- 浏览: 243664 次
- 性别:
- 来自: 四川
文章分类
最新评论
-
coosummer:
推荐使用http://buttoncssgenerator.c ...
Button CSS 样式 -
tangshengpan:
楼主,我跟你的情况一样,有现成OCX控件,用JAVA调用,出错 ...
Java调用OCX的方法(已存在OCX) -
bushkarl:
恩,思路挺清晰的
oracle 如何解决表间大数据量的复制select into table1 from table2 -
baixiaozhe:
确实不错! 我曾用scroll实现过类似效果
flex中实现marquee效果(由下而上滚动) -
sosyi:
我的报这样的错:
Exception in thread &q ...
Java调用OCX的方法(已存在OCX)
经常在Demo中会看到列表,表格等方式来显示数据。当然有时候也需要添加数据到这些列表或者表格中。有很多方式提交,这里展示一个弹出窗口的方式来添加新的数据到DataGrid中。
例子展示:
首先,我们开始建设一个基本的界面结构,一个带有“Notes"标题的Panel,一个DataGrid,以及一个用于提交数据的按钮。
Xml代码
<?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>
<?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类如下:
Xml代码
package
{
public class Note
{
public var author:String;
public var topic:String;
public var description:String;
}
}
package
{
public class Note
{
public var author:String;
public var topic:String;
public var description:String;
}
} 要真正使得我们的数据开始运转,我们还需要一个脚本块:需要一个数据结构来保存我们的Note信息。这里我们使用notes:ArrayCollection来记录我们要添加和已经添加的数据。这些数据能够在DataGrid中显示,是因为我们要把它设置成为DataGrid的provider.接下来我们先定义和初始化这个notes.
Js代码
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var notes:ArrayCollection = new ArrayCollection();
]]>
</mx:Script>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var notes:ArrayCollection = new ArrayCollection();
]]>
</mx:Script> 然后在把它设置成为datagrid的provider.
Xml代码
<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: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代码
<?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>
<?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 创建的时候执行:
Xml代码
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="500" height="300"
creationComplete="init()">
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="500" height="300"
creationComplete="init()"> 在这个init()函数中,我们创建了AddNote的一个实例,并设置监听来自save按钮的saveNote事件
Js代码
private var addNoteScreen:AddNote;
private function init():void
{
addNoteScreen = new AddNote();
addNoteScreen.addEventListener("SaveNote", saveNote);
}
private var addNoteScreen:AddNote;
private function init():void
{
addNoteScreen = new AddNote();
addNoteScreen.addEventListener("SaveNote", saveNote);
} Xml代码
<mx:Button label="Add Note" click="addNote()"/>
<mx:Button label="Add Note" click="addNote()"/> 当用户点击addNoe按钮的时候就要弹出刚才创建的窗口。这里我们使用PopManager来简单管理窗口的创建和关闭。
Js代码
private function addNote():void
{
PopUpManager.addPopUp(addNoteScreen, this, true);
PopUpManager.centerPopUp(addNoteScreen);
addNoteScreen.author.text = "";
addNoteScreen.topic.text = "";
addNoteScreen.description.text = "";
}
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管理器:
Js代码
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
private function close():void
{
PopUpManager.removePopUp(this);
}
]]>
</mx:Script>
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
private function close():void
{
PopUpManager.removePopUp(this);
}
]]>
</mx:Script> Xml代码
<mx:Button label="Cancel" click="close()" x="193" y="146"/>
<mx:Button label="Cancel" click="close()" x="193" y="146"/> 若要保存用户提交的数据,我们需要调度一个自定义的事件.我们使用Event metadata tag来创建我们的自定义事件,而这个<metadata>标记将在TitleWindow中创建。
Java代码
<mx:Metadata>
[Event(name="SaveNote")]
</mx:Metadata>
<mx:Metadata>
[Event(name="SaveNote")]
</mx:Metadata> 要调度这个时间,我们必须和按钮save挂钩起来:
Xml代码
<mx:Button label="Save" click="save()" x="264" y="146"/>
<mx:Button label="Save" click="save()" x="264" y="146"/> 这个方法将添加到脚本中,这个方法就是简单调度SaveNoe事件:
Js代码
private function save():void
{
this.dispatchEvent(new Event("SaveNote"));
}
private function save():void
{
this.dispatchEvent(new Event("SaveNote"));
} 下面是TitleWindow所有代码:
Xml代码
<?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
<?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按钮触发后执行:
Js代码
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);
}
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代码
<?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>
例子展示:
首先,我们开始建设一个基本的界面结构,一个带有“Notes"标题的Panel,一个DataGrid,以及一个用于提交数据的按钮。
Xml代码
<?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>
<?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类如下:
Xml代码
package
{
public class Note
{
public var author:String;
public var topic:String;
public var description:String;
}
}
package
{
public class Note
{
public var author:String;
public var topic:String;
public var description:String;
}
} 要真正使得我们的数据开始运转,我们还需要一个脚本块:需要一个数据结构来保存我们的Note信息。这里我们使用notes:ArrayCollection来记录我们要添加和已经添加的数据。这些数据能够在DataGrid中显示,是因为我们要把它设置成为DataGrid的provider.接下来我们先定义和初始化这个notes.
Js代码
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var notes:ArrayCollection = new ArrayCollection();
]]>
</mx:Script>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var notes:ArrayCollection = new ArrayCollection();
]]>
</mx:Script> 然后在把它设置成为datagrid的provider.
Xml代码
<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: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代码
<?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>
<?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 创建的时候执行:
Xml代码
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="500" height="300"
creationComplete="init()">
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="500" height="300"
creationComplete="init()"> 在这个init()函数中,我们创建了AddNote的一个实例,并设置监听来自save按钮的saveNote事件
Js代码
private var addNoteScreen:AddNote;
private function init():void
{
addNoteScreen = new AddNote();
addNoteScreen.addEventListener("SaveNote", saveNote);
}
private var addNoteScreen:AddNote;
private function init():void
{
addNoteScreen = new AddNote();
addNoteScreen.addEventListener("SaveNote", saveNote);
} Xml代码
<mx:Button label="Add Note" click="addNote()"/>
<mx:Button label="Add Note" click="addNote()"/> 当用户点击addNoe按钮的时候就要弹出刚才创建的窗口。这里我们使用PopManager来简单管理窗口的创建和关闭。
Js代码
private function addNote():void
{
PopUpManager.addPopUp(addNoteScreen, this, true);
PopUpManager.centerPopUp(addNoteScreen);
addNoteScreen.author.text = "";
addNoteScreen.topic.text = "";
addNoteScreen.description.text = "";
}
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管理器:
Js代码
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
private function close():void
{
PopUpManager.removePopUp(this);
}
]]>
</mx:Script>
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
private function close():void
{
PopUpManager.removePopUp(this);
}
]]>
</mx:Script> Xml代码
<mx:Button label="Cancel" click="close()" x="193" y="146"/>
<mx:Button label="Cancel" click="close()" x="193" y="146"/> 若要保存用户提交的数据,我们需要调度一个自定义的事件.我们使用Event metadata tag来创建我们的自定义事件,而这个<metadata>标记将在TitleWindow中创建。
Java代码
<mx:Metadata>
[Event(name="SaveNote")]
</mx:Metadata>
<mx:Metadata>
[Event(name="SaveNote")]
</mx:Metadata> 要调度这个时间,我们必须和按钮save挂钩起来:
Xml代码
<mx:Button label="Save" click="save()" x="264" y="146"/>
<mx:Button label="Save" click="save()" x="264" y="146"/> 这个方法将添加到脚本中,这个方法就是简单调度SaveNoe事件:
Js代码
private function save():void
{
this.dispatchEvent(new Event("SaveNote"));
}
private function save():void
{
this.dispatchEvent(new Event("SaveNote"));
} 下面是TitleWindow所有代码:
Xml代码
<?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
<?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按钮触发后执行:
Js代码
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);
}
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代码
<?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>
发表评论
-
FLEX带进度指示的文件上传
2010-04-03 15:56 1063转载: http://tj007-bo.iteye.com/b ... -
air+ajax
2009-12-27 13:06 708http://fins.iteye.com/blog/5561 ... -
主题:flex设计表格的复杂表头(类似报表的斜线表头)
2009-07-19 11:48 2820http://www.iteye.com/topic/3802 ... -
flex datagrid 自定义
2009-07-11 03:13 1304http://blog.csdn.net/heimaoxiao ... -
flex 中使用xml文件
2009-07-11 02:59 776<artwork> <piec ... -
介绍开源Flash游戏引擎PushButton Engine
2009-07-10 22:54 3681介绍开源Flash游戏引擎PushButton Engine ... -
Flex 最佳做法(初学者)文件命名与注意事项
2009-07-10 13:39 853转载于:http://www.adobe.com/cn/dev ... -
puremvc flex 简单例子
2009-07-09 23:07 1355puremvc flex 简单例子 http://wmc ... -
一个不错的Flex效果(一个会转动的3D盒子的效)
2009-07-09 11:10 950转载于: http://www.blogjava.net/cp ... -
一款flex操作系统
2009-07-08 09:30 834http://ijimu.cn/ -
Flex组件的项目渲染器(ItemRenderer)使用
2009-07-04 23:34 739http://blog.csdn.net/babylon_00 ... -
给Flex的PopUpManager显示控件添加特效
2009-07-04 20:11 2504PopUpManager本身不提供显示控件特效设置,对控件的s ... -
Flex上传文件功能
2009-07-03 10:31 3900Flex代码 <?xml version=" ... -
flex文件上传,mmons-fileupload做后台
2009-07-03 00:31 1749Java代码 internal function init( ...
相关推荐
`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. ...