Home Tutorial Flex Flex4 Components TitleWindow in Flex4

 
 

Share on Google+Share on Google+
TitleWindow in Flex4
Posted on: May 12, 2010 at 12:00 AM
Advertisement
Spark TitleWindow is a layout container that is created by used pop-up window. The TitleWindow container have a content area for own Childs, border, title bar etc. It is also have a close button that's working to close this TitleWindow.

TitleWindow in Flex4:

Spark TitleWindow is a layout container that is created by used pop-up window. The TitleWindow container have a content area for own Childs, border, title bar etc. It is also have a close button that's working to close this TitleWindow. If user want to a container that drag around the application window then use TitleWindow. If user want to create a TitleWindow then use PopUpManager to create TitleWindow. User not created directly using MXML tags.

In this example we have create a TitleWindow provide a user interface to enter user personal information. We have to create this TitleWindow with the help of PopUpManager and describe the functionality of close button. The PopUpManager provide methods createPopUp() and removePopUp() for create TitleWindow and remove TitleWindow.

Example:

In this example user have a main application code that provide a button. If user want to enter own personal information then click on this button and a title window are generate by the system and user fill information.

<?xml version="1.0"?>

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

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

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

<fx:Script>

<![CDATA[

import mx.managers.PopUpManager;

import spark.components.TitleWindow;

import myComponents.PersonalInformationForm;

private function createTitleWindow():void {

var personalInformationWindow:TitleWindow=

PopUpManager.createPopUp(this, PersonalInformationForm, false) as TitleWindow;

personalInformationWindow.title="Personal Information Window";

PopUpManager.centerPopUp(personalInformationWindow);

}

]]>

</fx:Script>

<s:Panel title="Create My Personal Information" width="200" height="100">

<s:Button label="Open Window" click="createTitleWindow();"/>

</s:Panel>

</s:Application>

 This is the main application code and TitleWindow component code is

<?xml version="1.0"?>

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

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

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

close="close();">

<s:layout>

<s:VerticalLayout/>

</s:layout>

<fx:Script>

<![CDATA[

import mx.managers.PopUpManager;

private function close():void {

PopUpManager.removePopUp(this);

}

private function save():void {

PopUpManager.removePopUp(this);

}

]]>

</fx:Script>

<mx:Form>

<mx:FormItem label="First Name:">

<s:TextInput id="firstname" width="100%"/>

</mx:FormItem>

<mx:FormItem label="Last Name:">

<s:TextInput id="lastname" width="100%"/>

</mx:FormItem>

<mx:FormItem label="Email:">

<s:TextInput id="email" width="100%"/>

</mx:FormItem>

<mx:FormItem label="Age:">

<s:TextInput id="age" width="100%"/>

</mx:FormItem>

<mx:FormItem label="Contect Number:">

<s:TextInput id="contect" width="100%"/>

</mx:FormItem>

<mx:FormItem label="Address:">

<s:TextArea id="address" width="100%"/>

</mx:FormItem>

<mx:FormItem label="State:">

<s:TextInput id="state" width="100%"/>

</mx:FormItem>

<mx:FormItem label="Country:">

<s:TextInput id="country" width="100%"/>

</mx:FormItem>

</mx:Form>

<s:HGroup>

<s:Button label="Save"

click="save();" />

<s:Button label="Close without save" click="close();"/>

</s:HGroup>

</s:TitleWindow>

Output:

After click Open Window button a TitleWindow present like this.

 

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.



Download personalinformation file code
Download titlewindow file code
Advertisement

Related Tags for TitleWindow in Flex4:


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: May 12, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com