- 浏览: 973022 次
- 性别:
- 来自: 珠海
文章分类
最新评论
-
Yunjey:
Yunjey 写道这样子的话、grid中的editable如何 ...
Flex创建可编辑以及分页的DataGrid -
Yunjey:
这样子的话、grid中的editable如何设置啊?!
Flex创建可编辑以及分页的DataGrid -
di1984HIT:
写的很好~~
JCalendar组件 -
sanny81:
此文真棒!感谢一路风尘的奉献!
但我有一疑 ...
Filter发送自定义数据详解 -
umgsai:
求完整demo umgsai@126.com
Flex和Jsp创建用户登入系统
经常在Demo中会看到列表,表格等方式来显示数据。当然有时候也需要添加数据到这些列表或者表格中。有很多方式提交,这里展示一个弹出窗口的方式来添加新的数据到DataGrid中。
例子展示:
首先,我们开始建设一个基本的界面结构,一个带有“Notes"标题的Panel,一个DataGrid,以及一个用于提交数据的按钮。
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="500" height="300"> <mx:Panel title="Notes" width="100%" height="100%" layout="vertical" horizontalAlign="right" paddingTop="3" paddingLeft="3" paddingRight="3" paddingBottom="3"> <mx:DataGrid width="100%" height="100%"> <mx:columns> <mx:DataGridColumn headerText="Author" dataField="author" width="80"/> <mx:DataGridColumn headerText="Topic" dataField="topic" width="100"/> <mx:DataGridColumn headerText="Description" dataField="description"/> </mx:columns> </mx:DataGrid> <mx:Button label="Add Note"/> </mx:Panel> </mx:Application>
这些代码看起来并不陌生,DataGrid三个列的数据对应我们Note类的三个属性,我们定义Note类如下:
package { public class Note { public var author:String; public var topic:String; public var description:String; } }
要真正使得我们的数据开始运转,我们还需要一个脚本块:需要一个数据结构来保存我们的Note信息。这里我们使用notes:ArrayCollection来记录我们要添加和已经添加的数据。这些数据能够在DataGrid中显示,是因为我们要把它设置成为DataGrid的provider.接下来我们先定义和初始化这个notes.
<mx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var notes:ArrayCollection = new ArrayCollection(); ]]> </mx:Script>
然后在把它设置成为datagrid的provider.
<mx:DataGrid dataProvider="{notes}" width="100%" height="100%"> <mx:columns> <mx:DataGridColumn headerText="Author" dataField="author" width="80"/> <mx:DataGridColumn headerText="Topic" dataField="topic" width="100"/> <mx:DataGridColumn headerText="Description" dataField="description"/> </mx:columns> </mx:DataGrid>
接下来,我们就要创建一个弹出的窗口,这里使用的是Flex组件TitleWindow.我们起名为AddNote.mxml.它将用于输入界面,通过它,可以输入与datagrid三列属性对应的数据。它还包含两个按钮:cancel和save.
<?xml version="1.0" encoding="utf-8"?> <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="348" height="218" title="Add A Note"> <mx:Label text="Author" x="35" y="10"/> <mx:TextInput id="author" width="150" x="84" y="8"/> <mx:Label text="Topic" y="36" x="42"/> <mx:TextInput id="topic" width="150" x="84" y="34"/> <mx:Label text="Description" y="62" x="10"/> <mx:TextArea id="description" width="234" height="77" x="84" y="61"/> <mx:Button label="Cancel" x="193" y="146"/> <mx:Button label="Save" x="264" y="146"/> </mx:TitleWindow>
好了,我们已经拥有一个可以作为数据输入的界面,我们还要在我们的主程序中设定在某个合适的时间初始化并且显示这个窗口,这个任务就交给了Application的creation complete事件。即在Application 创建的时候执行:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="500" height="300" creationComplete="init()">
在这个init()函数中,我们创建了AddNote的一个实例,并设置监听来自save按钮的saveNote事件
private var addNoteScreen:AddNote; private function init():void { addNoteScreen = new AddNote(); addNoteScreen.addEventListener("SaveNote", saveNote); }
<mx:Button label="Add Note" click="addNote()"/>
当用户点击addNoe按钮的时候就要弹出刚才创建的窗口。这里我们使用PopManager来简单管理窗口的创建和关闭。
private function addNote():void { PopUpManager.addPopUp(addNoteScreen, this, true); PopUpManager.centerPopUp(addNoteScreen); addNoteScreen.author.text = ""; addNoteScreen.topic.text = ""; addNoteScreen.description.text = ""; }
这里有两个方法,方法一addPopUp,就是弹出窗口,这里我们传输了三个参数,addNoteScreen为AddNote的一个实例,this为当前窗口,true为是否设是否只有弹出的窗口可被点击,即是否只有弹出的窗口处于Active状态。第二个方法,就是设置弹出窗口的位置。
当窗口弹出来的时候,我们可以做两件事情,一提交保存用户输入数据,二是简单的关闭窗口。如果关闭窗口,我们也使用PopManager管理器:
<mx:Script> <![CDATA[ import mx.managers.PopUpManager; private function close():void { PopUpManager.removePopUp(this); } ]]> </mx:Script>
<mx:Button label="Cancel" click="close()" x="193" y="146"/>
若要保存用户提交的数据,我们需要调度一个自定义的事件.我们使用Event metadata tag来创建我们的自定义事件,而这个<metadata>标记将在TitleWindow中创建。
<mx:Metadata> [Event(name="SaveNote")] </mx:Metadata>
要调度这个时间,我们必须和按钮save挂钩起来:
<mx:Button label="Save" click="save()" x="264" y="146"/>
这个方法将添加到脚本中,这个方法就是简单调度SaveNoe事件:
private function save():void { this.dispatchEvent(new Event("SaveNote")); }
下面是TitleWindow所有代码:
<?xml version="1.0" encoding="utf-8"?> <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="348" height="218" title="Add A Note"> <mx:Metadata> [Event(name="SaveNote")] </mx:Metadata> <mx:Script> <![CDATA[ import mx.managers.PopUpManager; private function close():void { PopUpManager.removePopUp(this); } private function save():void { this.dispatchEvent(new Event("SaveNote")); } ]]> </mx:Script> <mx:Label text="Author" x="35" y="10"/> <mx:TextInput id="author" width="150" x="84" y="8"/> <mx:Label text="Topic" y="36" x="42"/> <mx:TextInput id="topic" width="150" x="84" y="34"/> <mx:Label text="Description" y="62" x="10"/> <mx:TextArea id="description" width="234" height="77" x="84" y="61"/> <mx:Button label="Cancel" click="close()" x="193" y="146"/> <mx:Button label="Save" click="save()" x="264" y="146"/> </mx:TitleWindow
要把弹出窗口中用户输入的数据显示在Application 中的datagrid中,其实也很简单,就是要数据绑定。前面的[Bindable]中的notes:ArrayCollecton就要与我们弹出窗口中的用户输入数据绑定起来。这个方法由save按钮触发后执行:
private function saveNote(e:Event):void { var note:Note = new Note(); note.author = addNoteScreen.author.text; note.topic = addNoteScreen.topic.text; note.description = addNoteScreen.description.text; notes.addItem(note); PopUpManager.removePopUp(addNoteScreen); }
在绑定之后,即显示在Application datagrid中之后,我们要把弹出的窗口关闭,即removePopUp。这里就是全部的介绍了,下面是Application的代码:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="500" height="300" creationComplete="init()"> <mx:Script> <![CDATA[ import mx.managers.PopUpManager; import mx.collections.ArrayCollection; [Bindable] private var notes:ArrayCollection = new ArrayCollection(); private var addNoteScreen:AddNote; private function init():void { addNoteScreen = new AddNote(); addNoteScreen.addEventListener("SaveNote", saveNote); } private function addNote():void { PopUpManager.addPopUp(addNoteScreen, this, true); PopUpManager.centerPopUp(addNoteScreen); addNoteScreen.author.text = ""; addNoteScreen.topic.text = ""; addNoteScreen.description.text = ""; } private function saveNote(e:Event):void { var note:Note = new Note(); note.author = addNoteScreen.author.text; note.topic = addNoteScreen.topic.text; note.description = addNoteScreen.description.text; notes.addItem(note); PopUpManager.removePopUp(addNoteScreen); } ]]> </mx:Script> <mx:Panel title="Notes" width="100%" height="100%" layout="vertical" horizontalAlign="right" paddingTop="3" paddingLeft="3" paddingRight="3" paddingBottom="3"> <mx:DataGrid dataProvider="{notes}" width="100%" height="100%"> <mx:columns> <mx:DataGridColumn headerText="Author" dataField="author" width="80"/> <mx:DataGridColumn headerText="Topic" dataField="topic" width="100"/> <mx:DataGridColumn headerText="Description" dataField="description"/> </mx:columns> </mx:DataGrid> <mx:Button label="Add Note" click="addNote()"/> </mx:Panel> </mx:Application>
参考翻译:http://www.switchonthecode.com/tutorials/flex-datagrid-adding-rows-using-a-popup
评论
你是说cancel和save的位置?个人习惯问题吧
这些都是以前学习的时候自己整理的。当初因为好奇,所以一步一步学着做,希望有帮助
辛苦了
发表评论
-
Rounded Colorized Image Borders
2009-05-16 22:24 1087This week I ran across a really ... -
Flex使用自定义皮肤和字体
2009-03-29 14:57 4244首先介绍两个Flex皮肤网站: 1. Skins and Th ... -
Flex--XML转换成ArrayCollection
2009-03-28 23:24 9675xml数据: <?xml version="1 ... -
关于Flex使用Blazeds连接Java后台的一个注意笔记
2009-03-24 16:49 2221今天在做Flex程序测试的时候,发现之前可以通过Blazeds ... -
Flex-设置DataGrid被选择行的风格
2009-03-22 20:54 7217这里例子将展示如何使用用户自定义的item renderer来 ... -
Flex使用JSON格式与Java通信
2009-03-22 00:09 7332在使用Flex,Java,Json更新Mysql数据【高级篇】 ... -
Flex--主程序与弹出窗口之间传递数据
2009-03-20 23:08 2683主程序:TitleWindowDataTest.mxml & ... -
Flex中显示手型鼠标
2009-03-06 21:40 5228有些时候,我们需要在Flex组件上--Label或者Butto ... -
Flex与JSON及XML的互操作
2009-03-01 17:18 1924作者 Jack Herrington 译者 张凯 ... -
Flex代码格式化插件
2009-03-01 16:52 2750在7Yue 那里看到这个轻巧实用的Eclipse插件,它可以 ... -
Flex-CUBlog排行榜解析
2008-07-29 20:55 1983不知道为什么一直有一个想法把CUBlog排行榜的数据提取出来放 ... -
使用Flex,Java,Json更新Mysql数据【高级篇】
2008-06-24 20:21 5845前面已经介绍如何使用Flex,java,json来更新dat ... -
Flex+Java Servlet文件上传实例
2008-06-23 21:05 20312资源都是来自网上。本实例将展示使用Flex和java serv ... -
Flex和Jsp创建用户登入系统
2008-06-22 16:16 4307在开始之前我们先来看下效果:【userName==passwo ... -
Flex中嵌入Google地图
2008-06-18 22:29 5984在我们开始之前,先来看一个例子:http://scriptpl ... -
Flex程序发布
2008-06-17 23:32 4018当你写好了一个Flex程序,想要按照某种方式发布。比如我们在 ... -
Flex自定义Alert窗口显示位置
2008-06-16 18:25 6346好像Flex3也没有找到可以直接使用的(x,y)的方法来指定A ... -
Flex支持滑轮滚动
2008-06-16 18:23 3450有些时候需要在Flex界面中支持鼠标的滑轮滚动功能,比如通过滑 ... -
Flex实现简单的Email发送
2008-06-14 16:35 4396本文主要介绍和实现怎么使用Flex-java来实现Em ... -
Flex创建可编辑以及分页的DataGrid
2008-06-13 16:32 14890之前那篇文章:使用Flex,Java,Json更新Mys ...
相关推荐
`PopUpManager`被用来管理这些窗口,确保它们作为弹出窗口正确显示。 在`fx:Declarations`部分,我们看到了两个数组(`gridColumns1`和`gridColumns2`),它们分别定义了列的信息,包括列代码(`colCode`)和列类型...
4. **显示自定义组件**:根据需要,你可以使用`PopUpManager`类将自定义组件以弹出窗口的形式显示出来: ```actionscript var customComponent:CustomComponent = new CustomComponent(); PopUpManager.addPopUp...
例如,如果我们想要在新的弹出窗口中编辑选定的记录,可以这样做: ```actionscript private function handleDoubleClick(event:MouseEvent):void { var selectedItem:Object = dataGrid.selectedItem; var ...
1. 增加:你可以通过在DataGrid下方添加一个Button,点击后弹出一个新窗口或对话框让用户输入新数据,然后将新数据添加到数据源中。DataGrid会自动反映出数据源的变化。 2. 删除:在每一行上添加一个删除按钮,监听...
### 做Flex项目的小技巧详解 #### 一、弹出新窗口 ...这些技巧涵盖了Flex开发中的常见问题,包括弹出窗口、多视图切换、服务器交互、数据处理等方面,对于提升Flex应用程序的质量和性能具有重要意义。
第十二章“弹出窗口入门”和第十三章“视图状态”分别介绍了如何在Flex应用程序中添加弹出窗口以及如何管理和切换不同视图状态。这些功能对于增强应用程序的交互性和可用性至关重要。 #### 数据服务与XML 第十四章...
- **弹出窗口**:使用`PopupManager`类可以创建弹出窗口。 - **TitleWindow组件**:一个带有标题栏的窗口,可以移动和关闭。 - **ViewStack组件**:用于实现多个视图之间的切换。 - **表单Form**:提供了一种结构化...
例如,ComboBox列可能需要根据数据源动态填充选项,Button列可能需要打开一个弹出窗口,而Checkbox列可能需要实现全选/全不选的功能。 为了实现这些功能,你可能需要熟悉Flex的MXML和ActionScript,包括组件的声明...
Flex提供了PopupManager类来创建和管理弹出窗口。弹出窗口可以被用来显示上下文菜单、提示信息或者作为模态对话框。 #### 9. TitleWindow 组件 TitleWindow组件是一个可以拖动的窗口,通常用作对话框或者工具窗口...
- Flex提供了`PopupManager`类,可以轻松创建弹出窗口或对话框,增强用户交互体验。 #### 7. **TitleWindow组件** - `TitleWindow`组件是一个带有标题栏的小型窗口,非常适合用作浮动的工具提示或小对话框。 ###...
弹出窗口的显示和位置 2.13节. 自定义弹出式窗口边框 2.14节. 处理focusIn和focusOut事件 第三章容器(65) 3.1 节使用布局管理器布置子组件 3.2 节通过百分比方式配置容器的布局和尺寸 3.3节. 以不同的坐标系统...
- **弹出窗口**:了解如何使用Flex内置的弹出窗口组件来显示模态对话框或提示信息。 - **视图状态管理**:通过管理视图的状态来优化用户体验,例如保存用户的设置或偏好。 综上所述,《Flex 3 in Action》这本书...
- Flex支持创建弹出窗口,这可以通过 `PopupManager` 类实现。 - 示例代码: ```xml ``` #### 9. TitleWindow组件 - **TitleWindow** 是一个具有标题栏的窗口组件,常用于创建对话框或模态窗口。 - 可以设置其 ...
Flex的Alert类默认不支持直接展示图片,但可以通过自定义Alert组件或者使用更高级的弹出窗口类(如ModalWindow)来实现这一需求。 ### 17. 解释Flex的单例模式和静态模式的区别,以及在AS中如何实现? 单例模式...
4. **弹出窗口**: 可以通过`PopupManager`类创建。 5. **TitleWindow组件**: 用于创建具有标题栏的窗口。 6. **ViewStack组件**: 用于展示多个视图中的一个。 7. **表单Form**: 用于收集用户输入。 8. **基本组件**:...
4. **弹出窗口**:如 `PopupManager`,用于显示模态或非模态的弹出窗口。 5. **TitleWindow组件**:类似于面板,但具有更丰富的外观和行为选项。 6. **ViewStack组件**:允许开发者在一个区域内切换不同的视图。 7. ...