1. ホーム
  2. Web プログラミング
  3. フレックス

TitleWindowのフレックスは、アイデアと実装の値を渡すために

2022-01-18 10:09:48
1、デザインのアイデア
/{br
(1) 新規にDataGridを作成し、その最後のカラムに3つのボタンを追加します。追加、修正、削除の3つのボタンを追加します。
(2) Add ボタンをクリックすると、グリッドに新しい行が追加されます。
(3) [修正]ボタンをクリックして、フォームの行の属性の一部を修正します。
(4) [削除]ボタンをクリックすると、テーブルから行が削除されます。
2. 実現までのステップ
(1) 新しいアプリケーション、DataGrid.mxml を作成します。
DataGrid.mxml。
コピーコード コードは以下の通りです。

/{br

xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">








import mx.collections.ArrayCollection;
[Bindable]
//table data source binding
private var grid:ArrayCollection = new ArrayCollection([
{number: "2014010101",name: "Zhang San",sex: "Male",age: "19"},
{number: "2014010102",name: "Li Si",sex: "女",age: "20"},
{number: "2014010103",name: "Cai Hua",sex: "Male",age: "21"},
{number: "2014010104",name: "牛耳",sex: "女",age: "22"},
{number: "2014010105",name: "兆司",sex: "男",age: "18"},
{{number: "2014010106",name: "Hu Liu",sex: "female",age: "19"},
{{number: "2014010107",name: "Liu Si",sex: "Male",age: "20"},
{number: "2014010108",name: "Sun Yang",sex: "女",age: "22"},
{{number: "2014010109",name: "Zheng Wu",sex: "Male",age: "21"},
{number: "2014010110",name: "王雪",sex: "女",age: "20"},
{number: "2014010111",name: "Hu Liu",sex: "女",age: "19"},
{{number: "2014010112",name: "Liu Si",sex: "Male",age: "20"},
{number: "2014010113",name: "Sun Yang",sex: "女",age: "22"},
{number: "2014010114",name: "Zheng Wu",sex: "Male",age: "21"},
{number: "2014010115",name: "王雪",sex: "女",age: "20"}
]);
]]>














import mx.managers.PopUpManager;
/*Add button event function*/
protected function addHandler(event:MouseEvent):void
{{{br
var childWindow:ChildWindow = ChildWindow(PopUpManager.createPopUp(this,ChildWindow,true));
var point:Point = new Point(100,100);
childWindow.x = point.x + 400;
childWindow.y = point.y + 50;
}
/*Modify the button event function*/
/
protected function updateHandler(event:MouseEvent):void
{{{br
var updateWindow:UpdateWindow = UpdateWindow(PopUpManager.createPopUp(this,UpdateWindow,true));
var point:Point = new Point(100,100);
updateWindow.x = point.x + 400;
updateWindow.y = point.y + 50;
updateWindow.stuNo = event.currentTarget.selectedItem.content;
}
]]>















(2)新建一个增新窗口组件,孩子窗口.mxml
ChildWindow.mxml:
コピーコード コードは以下の通りです。

/{br

xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"
close="closeHandler(event)" title="New window added">





import mx.events.CloseEvent;
import mx.managers.PopUpManager;
/*Close button function*/
protected function closeHandler(event:CloseEvent):void
{{{br
PopUpManager.removePopUp(this);
}
/* Cancel button function */
protected function cancelHandler(event:MouseEvent):void
{{br
PopUpManager.removePopUp(this);
}
]]>





























(3) モディフィケーション・インターフェース・コンポーネント UpdateWindow.mxml を新規に作成します。
UpdateWindow.mxml。
コピーコード コードは以下の通りです。

/{br

xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"
close="closeHandler(event)" title="Modify window">





import mx.events.CloseEvent;
import mx.managers.PopUpManager;
/*Close button function*/
protected function closeHandler(event:CloseEvent):void
{{{br
PopUpManager.removePopUp(this);
}
/* Cancel button function */
protected function cancelHandler(event:MouseEvent):void
{{br
PopUpManager.removePopUp(this);
}
]]>





























3. 設計結果
(1)初期化時