注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

IOS & JAVA KEY

(iMilo)

 
 
 

日志

 
 
关于我

All the splendor in the world is not worth a good friend!! Hello my friend!!

网易考拉推荐

在容器中使用Spark和MX组件布局  

2010-05-01 23:44:31|  分类: Flex4 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 说明:本实验以前面的《Flex中实践OOP》为基础,在此基础上进行扩展

1、  为实验添加源文件,即:在demo(Flex Project)src的目录下添加图片文件,如:2.jpg、3.jpg……

2、  打开demo.mxml主程序文件,并切换到source模式下,删除<mx:Form>及<mx:FormItem>,然后添加多个person自定义控件,其代码如下:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                               xmlns:s="library://ns.adobe.com/flex/spark"

                               xmlns:mx="library://ns.adobe.com/flex/mx"

                               xmlns:components="components.*">

         <s:layout>

                   <s:VerticalLayout />

         </s:layout>

         <mx:FormHeading label="在容器中使用Spark和MX组件布局" fontSize="20"

                                               textAlign="center" color="#F30909" fontWeight="bold"

                                               textDecoration="none"/>

         <components:Person names="One Demo" image="1.jpg" x="0" y="0" />

         <s:Group>

                   <s:layout>

                            <s:TileLayout />

                   </s:layout>

                   <components:Person names="One Demo" image="1.jpg" x="0" y="0" />

                     <components:Person names="Two Demo" image="2.jpg"  x="150" y="150"/>

                     <components:Person names="Three Demo" image="3.jpg" x="300" y="300" />

                     <components:Person names="Fore Demo" image="4.jpg"  x="450" y="450" />

                     <components:Person names="Five Demo" image="5.jpg"  x="600" y="600" />

         </s:Group>

</s:Application>

说明:上面的程序说明整个应用程序是按照VerticalLayout布局,然后在<s:Group>标签对之间的组件按照TitleLayout布局。

Flex有四个框架布局类:

①、BasicLayout类将基于容器中的x何y绝对属性显示所有内容;

②、HorizontalLayout类将所有内容进行横向显示;

③、TitleLayout类将并列显示所有的子容器;

④、VerticalLayout类将垂直布局所有彼此相对的子内容。

最后运行程序,效果如下:

在容器中使用Spark和MX组件布局 - TEANA - JAVA KEY

当整个程序按照HorizontalLayout布局,即:

         <s:layout>

                   <s:VerticalLayout /> ---------------------------改为<s:HorizontalLayout />

         </s:layout>

则运行效果如下:

在容器中使用Spark和MX组件布局 - TEANA - JAVA KEY

由此看出,<s:Group>标签对包含的组件作为一个整体,布局。

  评论这张
 
阅读(587)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017