- 浏览: 558245 次
- 性别:
文章分类
- 全部博客 (337)
- WEB前端@HTML (4)
- WEB前端@CSS (5)
- WEB前端@javascript (31)
- WEB前端@DHTML (8)
- WEB前端@jQuery (3)
- WEB前端@Flex4 (19)
- WEB前端@BootStrap3 (21)
- 数据交换@JSON (1)
- 模板标签@JSTL (1)
- 模板标签@Thymeleaf (1)
- 模板标签@XSL-FO (3)
- WEB后台@JavaSE (75)
- WEB后台@JAX-WS (27)
- WEB后台@HttpClient (0)
- WEB后台@SSO (2)
- 框架@Spring3 (3)
- 框架@spring_MVC (8)
- 框架@Hibernate (26)
- 框架@play framework (18)
- 框架@sl4j (4)
- 数据库@ (2)
- 数据库@JDBC (0)
- 服务器@Linux (14)
- 服务器@Tomcat (2)
- 第三方jar@dom4j (1)
- 第三方jar@POI (2)
- 第三方jar@CXF (5)
- 项目管理@Maven (22)
- 项目管理@SVN (1)
- 缓存管理@ehcache (1)
- 系统设计@设计模式 (10)
- 单元测试@JunitTest (1)
- 开发工具 (3)
- BUG收录 (1)
- 学习之路 (6)
- 面试之道 (1)
- 我的项目 (2)
最新评论
-
superich2008:
logback配置文件的改动会导致应用重新加载,多改动几次后就 ...
Chapter 3: Logback configuration -
chenzhihui:
不是可以在log4j中配置以控制台或者文件方式保存日志的?
play记录日志 -
smilease:
很棒,正缺这个,非常感谢
bootstrap3-typeahead 自动补全 -
guangling13345:
[size=x-small][/size]
二级联动菜单 -
jacksondesign:
有,和YAML的格式有关,不知道有没有什么好的YAML格式的验 ...
(四)play之yabe项目【页面】
Flex中实现导航有两种方式可以实现
1.使用状态,在不同事件发生时切换到指定的状态,不同的状态对应不同的视图界面
2.使用导航容器
--------------------------------------------------------------------
导航:实现多页视图的切换显示
1.实现导航基础的ViewStack类
2.NavigationContent类,该类支持在ViewStack中使用基于Spark的容器
3.实现导航时使用ViewStack类的selectedIndex和selectedChild属性
导航容器
重要概念:
容器:ViewStack
组件:NavigationContent (Spark元素)
说明:
任何实现了INavigationContent接口的类都可以作为ViewStack的子元素。
在spark中,NavigationContent实现了INavigationContent并且继承了Sprak Group类
导航容器每次只显示一个子元素,ViewStack通过切换其子元素的可见性实现子元素的呈现
如何切换元素呢?
通过selectedChild和selectedIndex属性控制元素在导航容器中的可见性
[selectedIndex:ViewStack索引从0开始,第一个子元素的索引为0]
[selectedChilde:通过引用子元素的id值,从而指定ViewStack显示哪个元素]
----------------------------------------------------------------
1.主程序设置状态:
一个为购物状态(对应购物组件),一个为结账状态(对应结账组件),通过不同的状态切换到不同的界面。
购物车实例在主程序中创建,然后通过组件的属性绑定到它们当中,实现购物与结账时购物车的共享。
界面中有各种按钮,点击之后发生click事件,在对应的事件处理函数中设currentState即可实现状态的切换!
用户选购商品结账时,会发生自定义事件placeOrder,在主程序中监听并处理:弹出一个对话框,显示购物简要信息,最后清空购物车,让程序的各个状态回到初始状态!
FlexGrocer.mxml
CheckOutView.mxml
该组件将在用户点击checkout时呈现
定义了1个ViewStack和3个NavigationContent,通过控制selectIndex实现导航
第1个导航页面为用户基本信息的录入
第2个导航页面为银行卡信息的录入
第3个导航为结账页面,左边显示用户前面录入的信息,右边显示购物车中的购物详情,用户可以选择结账或者重新编辑信息
自定义订单事件,当用户点击Complete Order按钮时触发
以下是3个导航页面
第一个用户基本信息的录入
用户点击proceed将发生proceed触发click事件,在事件处理函数中派发proceed自定义事件,在父容器中对该事件捕获,在事件处理函数中将ViewStack的selectedIndex加1,导航到第2个页面
第二个用户银行卡信息的录入,用户点击proceed将发生click事件,在事件处理函数中派发proceed自定义事件,在父容器中对该事件捕获,事件处理函数中将ViewStack的selectedIndex加1,导航到第3个页面
第三个结账页面,用户点击Edit Information按钮触发click事件,然后在事件处理函数中派发自定义事件:editInformation事件,父容器监听该事件,并在事件处理函数中将ViewStack的selectedIndex置为0;
用户点击Complete Order按钮触发click事件,然后在事件处理函数中派发自定义事件:completeOrder事件,父容器(CheckOutView.mxml)监听该事件,并在事件处理函数中:弹出对话框,提示购物的相关简要信息,然后清空购物车,恢复程序的初始状态等.
1.使用状态,在不同事件发生时切换到指定的状态,不同的状态对应不同的视图界面
2.使用导航容器
--------------------------------------------------------------------
导航:实现多页视图的切换显示
1.实现导航基础的ViewStack类
2.NavigationContent类,该类支持在ViewStack中使用基于Spark的容器
3.实现导航时使用ViewStack类的selectedIndex和selectedChild属性
导航容器
重要概念:
容器:ViewStack
组件:NavigationContent (Spark元素)
说明:
任何实现了INavigationContent接口的类都可以作为ViewStack的子元素。
在spark中,NavigationContent实现了INavigationContent并且继承了Sprak Group类
导航容器每次只显示一个子元素,ViewStack通过切换其子元素的可见性实现子元素的呈现
如何切换元素呢?
通过selectedChild和selectedIndex属性控制元素在导航容器中的可见性
[selectedIndex:ViewStack索引从0开始,第一个子元素的索引为0]
[selectedChilde:通过引用子元素的id值,从而指定ViewStack显示哪个元素]
----------------------------------------------------------------
1.主程序设置状态:
<s:states> <s:State name="shoppingView"/> <s:State name="checkoutView"/> </s:states>
一个为购物状态(对应购物组件),一个为结账状态(对应结账组件),通过不同的状态切换到不同的界面。
购物车实例在主程序中创建,然后通过组件的属性绑定到它们当中,实现购物与结账时购物车的共享。
界面中有各种按钮,点击之后发生click事件,在对应的事件处理函数中设currentState即可实现状态的切换!
用户选购商品结账时,会发生自定义事件placeOrder,在主程序中监听并处理:弹出一个对话框,显示购物简要信息,最后清空购物车,让程序的各个状态回到初始状态!
FlexGrocer.mxml
<?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" creationComplete="handleCreationComplete(event)" xmlns:views="views.*" xmlns:services="services.*" xmlns:cart="cart.*"> <!-- 购物视图、结账视图--> <s:states> <s:State name="shoppingView"/> <s:State name="checkoutView"/> </s:states> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> <!-- 将HTTPService获取数据的功能放到两个ActionScript类中进行处理,此处引入即可 --> <!-- 提供商品类别服务的组件(不可见组件)--> <services:CategoryService id="categoryService"/> <!-- 提供具体各种商品服务的组件(不可见组件)--> <services:ProductService id="productService"/> <!-- 创建购物车实例,将同一个对象传入到shoppingView和checkoutView两个状态下--> <cart:ShoppingCart id="shoppingCart"/> </fx:Declarations> <fx:Script> <![CDATA[ import events.OrderEvent; import mx.controls.Alert; import mx.events.FlexEvent; import spark.events.IndexChangeEvent; //当系统组件构建完成后,会调用到此方法,在这里向远端发起请求,获取数据 //当数据获取成功后,事件监听器会调用指定的方法处理数据 private function handleCreationComplete(event:FlexEvent):void { categoryService.send(); productService.send(); } //查看当前购物车中的商品 private function handleViewCartClick( event:MouseEvent ):void { bodyGroup.currentState="cartView";//切换到bodyGroup下的cartView状态 } //响应列表的变化,对change事件进行处理 protected function list1_changeHandler(event:IndexChangeEvent):void { //当控制条中商品的选中状态改变了,会触发change事件,该方法就会得到执行 //传入当前选中商品的catID,然后products集合会根据此id寻找对应的项,并只呈现匹配的哪些项 productService.filterCollection(event.target.selectedItem.categoryID); } protected function btnCheckout_clickHandler(event:MouseEvent):void { // 转到结账视图 this.currentState = "checkoutView"; } protected function FlexGrocer_clickHandler(event:MouseEvent):void { // 转到购物视图 this.currentState = "shoppingView"; } // 主应用程序的checkoutView组件派发placeOrder自定义事件之后,表示需要完成结账 protected function checkout_placeOrderHandler(event:OrderEvent):void { //当用户结账时,弹出提示框描述相关信息 Alert.show("Place an order for " +event.order.billingName + " with a total of " + shoppingCart.total,"Order Placed"); //清空购物车 shoppingCart = new ShoppingCart(); //当前状态切换到购物视图状态 this.currentState = "shoppingView"; //防止ShoppingView组件处于cartView状态,将其切换回State1状态 bodyGroup.currentState = "State1"; } ]]> </fx:Script> <!-- 控制条布局 --> <s:controlBarLayout> <s:BasicLayout/> </s:controlBarLayout> <!-- 控制条 --> <s:controlBarContent> <s:Button y="10" label="Checkout" id="btnCheckout" right="10" click="btnCheckout_clickHandler(event)"/> <s:Button y="10" label="View Cart" id="btnCartView" right="90" click="handleViewCartClick( event )"/> <s:Button label="Flex Grocer" x="5" y="5" click="FlexGrocer_clickHandler(event)"/> <!-- 从categoryService中获取商品种类信息 ,使用指定的项目呈现器NavigationItem显示内容--> <s:List left="200" height="52" dataProvider="{categoryService.categories}" itemRenderer="components.NavigationItem" change="list1_changeHandler(event)" includeIn="shoppingView"> <s:layout> <s:HorizontalLayout/> </s:layout> </s:List> </s:controlBarContent> <!-- 实例化商品组件(该组件被单独抽取出来,在主应用程序中实例化) --> <!-- 从productService中获取商品 --> <views:ShoppingView id="bodyGroup" width="100%" height="100%" groceryInventory="{productService.products}" includeIn="shoppingView" shoppingCart="{shoppingCart}"/> <!-- 结账视图--> <views:CheckOutView x="0" y="0" width="100%" height="100%" includeIn="checkoutView" shoppingCart="{shoppingCart}" placeOrder="checkout_placeOrderHandler(event)"/> <!-- 版权说明 --> <s:Label text="(c) 2009, FlexGrocer" right="10" bottom="10"/> </s:Application>
CheckOutView.mxml
该组件将在用户点击checkout时呈现
定义了1个ViewStack和3个NavigationContent,通过控制selectIndex实现导航
第1个导航页面为用户基本信息的录入
第2个导航页面为银行卡信息的录入
第3个导航为结账页面,左边显示用户前面录入的信息,右边显示购物车中的购物详情,用户可以选择结账或者重新编辑信息
<?xml version="1.0" encoding="utf-8"?> <s:Group 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:valueObjects="valueObjects.*" xmlns:checkout="views.views.checkout.*"> <s:layout> <s:VerticalLayout/> </s:layout> <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> <!-- 创建OrderInfo数据模型对象--> <valueObjects:OrderInfo id="orderInfo"/> </fx:Declarations> <!-- 声明自定义OrderEvent事件(当completeOrder的时候会发生此事件)--> <fx:Metadata> [Event(name="placeOrder", type="events.OrderEvent")] </fx:Metadata> <fx:Script> <![CDATA[ import cart.ShoppingCart; import events.OrderEvent; [Bindable] public var shoppingCart:ShoppingCart; //继续到下一个页面 protected function proceedHandler(event:Event):void { vs.selectedIndex += 1; } //返回编辑信息,即回到初始页面 protected function editInformationHandler(event:Event):void { vs.selectedIndex = 0; } //完成订单,结账 protected function completeOrderHandler(event:Event):void { // 为下一个订单重置导航 vs.selectedIndex = 0; // 在自定义事件对象中设置orderInfo对象并派发 this.dispatchEvent(new OrderEvent('placeOrder',orderInfo)); // 清除订单对象,为下一次做准备 orderInfo = new OrderInfo(); } ]]> </fx:Script> <!-- 利用ViewStack结合NavigationContent实现导航--> <mx:ViewStack id="vs" width="100%" height="100%"> <!-- page 1 可以进入下一页--> <checkout:CustomerInfo orderInfo="{orderInfo}" width="100%" height="100%" proceed="proceedHandler(event)"/> <!-- page 2 可以进入下一页--> <checkout:CreditCardInfo orderInfo="{orderInfo}" width="100%" height="100%" proceed="proceedHandler(event)"/> <!-- page 3 可以返回第一页重新编辑信息,也可以结账完成订单--> <checkout:Review orderInfo="{orderInfo}" width="100%" height="100%" shoppingCart="{shoppingCart}" editInformation="editInformationHandler(event)" completeOrder="completeOrderHandler(event)"/> </mx:ViewStack> </s:Group>
自定义订单事件,当用户点击Complete Order按钮时触发
package events { import flash.events.Event; import valueObjects.OrderInfo; public class OrderEvent extends Event { public var order:OrderInfo; //通过构造函数初始化自定义事件对象 //在事件对象中设置订单对象,事件监听器可以从event中取出该订单对象,从而获取到订单的详细信息 public function OrderEvent(type:String, order:OrderInfo ) { this.order = order; super(type); } override public function clone():Event { return new OrderEvent( type, order ); } } }
以下是3个导航页面
第一个用户基本信息的录入
用户点击proceed将发生proceed触发click事件,在事件处理函数中派发proceed自定义事件,在父容器中对该事件捕获,在事件处理函数中将ViewStack的selectedIndex加1,导航到第2个页面
<?xml version="1.0" encoding="utf-8"?> <s:NavigatorContent xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:layout> <s:HorizontalLayout/> </s:layout> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <fx:Metadata> [Event(name="proceed", type="flash.events.Event")] </fx:Metadata> <fx:Script> <![CDATA[ import valueObjects.OrderInfo; [Bindable] public var orderInfo:OrderInfo; private function handleProceed( event:Event ):void { dispatchEvent( new Event( 'proceed' ) ); } ]]> </fx:Script> <s:Label text="Checkout Page 1 of 3"/> <mx:Form> <mx:FormHeading label="Customer Information"/> <mx:FormItem label="Customer Name"> <!-- "@"符表示将会把输入的数据设置到对象的属性中,传说中的双向数据绑定? --> <s:TextInput text="@{orderInfo.billingName}"/> </mx:FormItem> <mx:FormItem label="Address"> <s:TextInput text="@{orderInfo.billingAddress}"/> </mx:FormItem> <mx:FormItem label="City"> <s:TextInput text="@{orderInfo.billingCity}"/> </mx:FormItem> <mx:FormItem label="State"> <s:TextInput text="@{orderInfo.billingState}"/> </mx:FormItem> <mx:FormItem label="Zip"> <s:TextInput text="@{orderInfo.billingZip}"/> </mx:FormItem> <mx:FormItem label="Delivery Date"> <mx:DateField selectedDate="@{orderInfo.deliveryDate}"/> </mx:FormItem> <mx:FormItem> <s:Button label="Proceed" click="handleProceed( event )"/> </mx:FormItem> </mx:Form> </s:NavigatorContent>
第二个用户银行卡信息的录入,用户点击proceed将发生click事件,在事件处理函数中派发proceed自定义事件,在父容器中对该事件捕获,事件处理函数中将ViewStack的selectedIndex加1,导航到第3个页面
<?xml version="1.0" encoding="utf-8"?> <s:NavigatorContent xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:layout> <s:VerticalLayout/> </s:layout> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <fx:Metadata> [Event(name="proceed", type="flash.events.Event")] </fx:Metadata> <fx:Script> <![CDATA[ import mx.collections.IList; import spark.events.IndexChangeEvent; import valueObjects.OrderInfo; [Bindable] public var orderInfo:OrderInfo; private function handleProceed( event:Event ):void { dispatchEvent( new Event( 'proceed' ) ); } ]]> </fx:Script> <s:Label text="Checkout Page 2 of 3"/> <mx:Form> <mx:FormHeading label="Billing Information"/> <mx:FormItem label="Credit Card Type"> <s:DropDownList selectedItem="@{orderInfo.cardType}" requireSelection="true"> <s:dataProvider> <s:ArrayList> <fx:String>American Express</fx:String> <fx:String>Diners Club</fx:String> <fx:String>Discover</fx:String> <fx:String>MasterCard</fx:String> <fx:String>Visa</fx:String> </s:ArrayList> </s:dataProvider> </s:DropDownList> </mx:FormItem> <mx:FormItem label="Card Number"> <s:TextInput text="@{orderInfo.cardNumber}"/> </mx:FormItem> <mx:FormItem label="Expiration" direction="horizontal"> <s:DropDownList selectedItem="@{orderInfo.cardExpirationMonth}" requireSelection="true"> <s:dataProvider> <s:ArrayList> <fx:String>January</fx:String> <fx:String>February</fx:String> <fx:String>March</fx:String> <fx:String>April</fx:String> <fx:String>May</fx:String> <fx:String>June</fx:String> <fx:String>July</fx:String> <fx:String>August</fx:String> <fx:String>September</fx:String> <fx:String>October</fx:String> <fx:String>November</fx:String> <fx:String>December</fx:String> </s:ArrayList> </s:dataProvider> </s:DropDownList> <s:DropDownList selectedItem="@{orderInfo.cardExpirationYear}" requireSelection="true"> <s:dataProvider> <s:ArrayList> <fx:String>2010</fx:String> <fx:String>2011</fx:String> <fx:String>2012</fx:String> <fx:String>2013</fx:String> <fx:String>2014</fx:String> <fx:String>2015</fx:String> </s:ArrayList> </s:dataProvider> </s:DropDownList> </mx:FormItem> <mx:FormItem> <s:Button label="Proceed" click="handleProceed( event )"/> </mx:FormItem> </mx:Form> </s:NavigatorContent>
第三个结账页面,用户点击Edit Information按钮触发click事件,然后在事件处理函数中派发自定义事件:editInformation事件,父容器监听该事件,并在事件处理函数中将ViewStack的selectedIndex置为0;
用户点击Complete Order按钮触发click事件,然后在事件处理函数中派发自定义事件:completeOrder事件,父容器(CheckOutView.mxml)监听该事件,并在事件处理函数中:弹出对话框,提示购物的相关简要信息,然后清空购物车,恢复程序的初始状态等.
<?xml version="1.0" encoding="utf-8"?> <s:NavigatorContent 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> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <fx:Metadata> [Event(name="editInformation", type="flash.events.Event")] [Event(name="completeOrder", type="flash.events.Event")] </fx:Metadata> <fx:Script> <![CDATA[ import cart.ShoppingCart; import cart.ShoppingCartItem; import events.OrderEvent; import events.ProductEvent; import valueObjects.OrderInfo; import valueObjects.Product; [Bindable] public var shoppingCart:ShoppingCart; [Bindable] public var orderInfo:OrderInfo; private function handleComplete( event:Event ):void { dispatchEvent( new Event( 'completeOrder' ) ); } private function handleEdit( event:Event ):void { dispatchEvent( new Event( 'editInformation' ) ); } private function removeProductHandler(event:ProductEvent):void { var sci:ShoppingCartItem = new ShoppingCartItem( event.product ); shoppingCart.removeItem( sci ); } ]]> </fx:Script> <s:Label text="Checkout Page 3 of 3"/> <s:HGroup width="100%" height="90%"> <!-- 显示用户前面输入的个人基本信息 --> <mx:Form> <mx:FormHeading label="Review and Checkout"/> <mx:FormItem label="Name"> <s:Label text="{orderInfo.billingName}"/> </mx:FormItem> <mx:FormItem label="Address"> <s:Label text="{orderInfo.billingAddress}"/> <s:Label text="{orderInfo.billingCity}, {orderInfo.billingState} {orderInfo.billingZip}"/> </mx:FormItem> <mx:FormItem label="Card Type"> <s:Label text="{orderInfo.cardType}"/> </mx:FormItem> <mx:FormItem label="Delivery Date"> <s:Label text="{orderInfo.deliveryDate}"/> </mx:FormItem> <mx:FormItem> <s:Button label="Complete Order" click="handleComplete( event )"/> <s:Button label="Edit Information" click="handleEdit( event )"/> </mx:FormItem> </mx:Form> <!--将购物车的详细信息进行显示--> <s:VGroup width="100%" height="100%"> <components:CartGrid id="dgCart" width="100%" height="100%" dataProvider="{shoppingCart.items}" removeProduct="removeProductHandler( event )"/> <s:Label text="Total {shoppingCart.total}"/> </s:VGroup> </s:HGroup> </s:NavigatorContent>
- FlexGrocer_bak.zip (481.5 KB)
- 下载次数: 8
发表评论
-
(十七)为Flex定制皮肤
2013-01-03 16:46 1291皮肤与组件的关系 使用状态和皮肤 创建Button皮肤 为应用 ... -
(十六)使用样式定制Flex应用
2013-01-03 11:47 1595为Flex应用程序添加样式: 通过标签属性设置样式 可 ... -
(十二)AdvancedDataGrid
2013-01-02 14:37 1588AdvancedDataGrid扩展了普通的DataGrid, ... -
(十一)为DataGrid指定项目呈现器(单元格内显示图片和按钮)
2013-01-02 14:31 16891.使用DataGrid组件展现数 ... -
(十)自定义事件并利用事件对象传递数据以及集合元素变化能派发的事件
2013-01-02 00:14 1302创建和分派事件 1.使用事件可以降低程序的耦合度 2.子类自定 ... -
(九)对List和DataGroup使用itemRenderer
2013-01-01 21:47 5383数据集 包含一组数据元素的对象就叫做数据集Data ... -
(八)自定义组件
2012-12-30 23:35 10401.组件的作用及其对开发的好处 2.Flex类的层次 3.可见 ... -
(七)数据绑定和集合
2012-12-30 17:53 925数据绑定和集合 1.数据绑定的原理 2.ArrayCollec ... -
(六)创建ActionScript类---值对象
2012-12-30 15:31 1008创建ActionScript类--值对象DTO/VO--数据模 ... -
(五)Flex4_使用远程数据
2012-12-30 11:44 1084使用远程XML数据 1.数据 ... -
(四)Flex4_事件
2012-12-29 23:57 885事件编程模型,构建松散耦合的应用程序 设置事件,向事件 ... -
(三)Flex4_Image控件,数据绑定
2012-12-29 23:03 1210数据绑定 1.给需要数据绑定的对象设置id,以便在程序中 ... -
(十八)Flex4_自定义ActionScript组件
2012-12-28 17:11 1091Spark组件是按复合(composi ... -
(十五)Flex4_格式化与校验器
2012-12-28 14:56 1383Flex提供了数据格式化功能,可以对数据进行格式化。通过内置的 ... -
(二)Flex4 容器与布局
2012-12-27 23:03 1621MXML文件 1.文件头 2.命名空间 3.历史版本的恢复 4 ... -
(一)Flex4 第一篇 RIA到底是什么
2012-12-27 22:57 1024待续... -
(十三)Flex4_实现拖放功能
2012-12-27 20:30 2187增强型拖放组件: List ... -
本地Host文件的修改
2012-12-23 09:40 1034Flash builder 4.6 序列号: 1424-49 ...
相关推荐
这个"dh.rar_flex cool me_flex menu skin_flex 导航_flex4 menu_flex4 menu"的压缩包文件,显然是与Flex4相关的资源,特别是关于创建酷炫的菜单导航和皮肤设计。 在Flex4中,菜单(Menu)是一种常见的用户界面元素...
在"VistaStyle"这个文件中,可能是包含了一个展示Flex风格布局的示例,可能涉及各种布局模式和效果,比如导航栏、卡片布局、网格系统等。通过学习这个实例,初学者能够更好地理解如何在实际项目中运用Flex布局,提升...
在描述中提到的“鹰眼”功能,也被称为小地图或导航图,通常在地图应用中用于提供全局视图。鹰眼小地图让用户可以在查看局部区域的同时,保持对整个地图范围的了解。实现这一功能需要理解如何在Flex中处理地图数据,...
在ArcGIS Flex中,NavigationSkin通常用于定制地图导航控件的外观和行为,例如缩放、平移等操作。通过自定义NavigationSkin,开发者可以实现独特的地图交互体验,满足特定项目的需求。 4. `arcgis_fl`与`arcgis_...
在Flex4中,DateChooser和DateField是两个用于处理日期输入和显示的UI组件,它们在构建用户界面时起着至关重要的作用。DateChooser通常用于为用户提供一个日历选择器,而DateField则是一个文本输入框,显示所选日期...
在现代的Web开发中,地图服务已经成为不可或缺的一部分,尤其在导航、定位、数据分析等领域。高德地图作为国内领先的地图服务提供商,为开发者提供了丰富的API接口,使得我们可以轻松地集成地图功能到自己的应用中。...
- **导航机制**:介绍Flex中的导航机制。 - **页面管理**:学习如何管理和切换不同的视图页面。 - **URL管理**:了解如何利用URL参数实现动态页面跳转。 #### 14. Demo8: 样式和主题 - **样式表**:学习如何使用CSS...
6. 模板和控件:ArcGIS API包含预设的用户界面模板和控件,如缩放条、比例尺、导航控件等,使开发者能快速构建用户友好的地图应用。 7. 3D地图支持:虽然3.6版本的API对3D地图的支持有限,但仍然可以创建简单的3D...
《深入探索Google Maps Flex SDK:基于.map_flex_1_22.zip_flex的开发实践》 在现代互联网应用中,地图服务已经成为不可或缺的一部分,尤其是对于地理位置相关的企业和开发者而言。Google Maps API作为业界领先的...
4. `justify-content`:定义子元素在主轴上的对齐方式,包括`flex-start`(默认,左对齐)、`flex-end`(右对齐)、`center`(居中)、`space-between`(两端对齐,子元素间等距)和`space-around`(各元素间等距)...
标题:Flex2_devguide 描述:最具权威的Flex原始开发文档,对Flex讲解非常详细。 根据提供的信息,我们可以深入探讨Flex2 Developer's Guide中所包含的关键知识点,这对于理解和掌握Flex框架及其应用开发至关重要...
本视频教程聚焦于Flex4中的导航器组件,旨在帮助开发者深入理解如何在Flex4环境中实现页面间的导航功能。 在Flex4中,导航器组件是构建多视图应用程序的关键工具,它允许用户在不同的视图之间轻松切换。这些视图...
4. Sample Flex Viewer架构: - Sample Flex Viewer是一个框架,用于创建GeoWeb应用程序,由MoxieZhang领导的开发团队CorporateSales, ESRI Inc.制作。 - 架构设计用于快速应用开发,分为编译发布包和源代码包。 ...
- **代码导航**:快速跳转到类、方法、变量等定义位置。 #### 第4章:在 FlashBuilder 中使用项目 - **项目创建**:指导用户如何在 Flash Builder 中创建新项目。 - **项目导出与导入**:介绍如何保存项目以便备份...
这通常需要在后端进行数据的分块查询,并在Flex前端实现分页控件和导航逻辑。 9. **立即更新**:描述中的“立即更新”指的是在修改信息后,无需刷新整个页面就能看到变化。这依赖于实时的数据绑定和事件驱动机制,...
4. `flex-wrap`: 控制是否允许子元素换行。`nowrap`表示不换行,`wrap`表示换行,`wrap-reverse`表示换行且第二行从反方向开始。 5. `flex-grow`, `flex-shrink` 和 `flex-basis`: 这些属性定义了子元素如何根据...
- `css`、`assets`、`fonts`、`as`、`views`、`navigators`:这些文件夹包含了Flex项目的样式文件(CSS)、资源(图片、字体)、ActionScript类、视图组件和导航逻辑。 5. **应用场景**: - UI设计:快速创建和...
Flex 4是其一个重要的版本,引入了更灵活的皮肤ning机制和Spark组件集,进一步提升了UI设计的灵活性和可定制性。 在描述中提到的"最近做了几个简单特效",这可能包括动画效果、过渡效果、交互式UI元素等。Flex 4...
在“Flex_4_docs”这个压缩包中,"package-summary.html"文件是整个API文档的索引页,它通常会列出所有的包、类和接口,方便开发者快速定位所需的信息。开发者可以根据自己的需求,通过这个首页深入到各个类和方法的...