Window Container in Flex4


 

Window Container in Flex4

This container are use window applications in flex 4. Spark Window container is provide a way if user want to create own window.

This container are use window applications in flex 4. Spark Window container is provide a way if user want to create own window.

Window Container in Flex4 :

This container are use window applications in flex 4. Spark Window container is provide a way if user want to create own window. The Window container are provide layout and content of operating system window that's created after the application are initiated. In this example user can see how to create Window container in Flex4. The MXML tag for creating Window container is <s:Window/>. User can set the main characteristic for the window container. In this example user can see how to create a window container component. First  we have create a main application and after that we have create Window component and used this component in own application that's have a login process.

Example:

<?xml version="1.0" encoding="utf-8"?>

<!-- aircomponents/src/WindowSplash.mxml -->

<s:WindowedApplication 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="init();">

<fx:Script>

<![CDATA[

import myComponents.formWindow;

private const startTime:int = 10;

private var endTime:int = 0;

private var timer:Timer;

private var formWindowobj:myComponents.formWindow;

private function init():void {

var screenBounds:Rectangle = Screen.mainScreen.bounds;

nativeWindow.x = (screenBounds.width - nativeWindow.width) / 2;

nativeWindow.y = (screenBounds.height - nativeWindow.height) / 2;

timer = /font>new Timer(1000);

timer.addEventListener(TimerEvent.TIMER, incrementTime);

timer.start();

}

private function incrementTime(event:TimerEvent):void {

endTime++;

if ((startTime - endTime) == 0)

{{

timer.stop();

timer.removeEventListener(TimerEvent.TIMER, incrementTime);

timer = /font>null;

nativeWindow.close();

0

formWindowobj = new formWindow();

formWindowobj.open();

}}

1

}

]]>

</x:Script>

2

<s:VGroup horizontalCenter="0" verticalCenter="0">

<s:Label text="This is Original Screen" fontFamily="New Times Roman" fontSize="20" fontWeight="bold"/>

<s:Label text="Wait.." fontFamily="New Times Roman" fontSize="20" fontWeight="bold"/>

3

</s:VGroup>

</s:WindowedApplication>

This is the code of main application and the code of window component is

4

<?xml version="1.0" encoding="utf-8"?>

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

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

5

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

width="250" height="200" title="Login Window">

&l<s:layout>

6

<VerticalLayout/>

</s:layout>

<fx:Script>

7

<![CDATA[

private function login():void {

if(username.text==""){

8

uname.text = "Please enter User Name";

uname.visible=true;

}

9

if(password.text==""){

pass.text = "Please enter password";

pass.visible=true;

0

}

if(username.text!="" && password.text!=""){

uname.text = "Welcome "+username.text;

1

uname.visible=true;

pass.visible=false;

}

2

}

]]>

</fx:Script>

3

<mx:Form>

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

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

4

</mx:FormItem>

<mx:FormItem label="Password:">

<s:TextInput id="password" width="100%" displayAsPassword="true"/>

5

</mx:FormItem>

</mx:Form>

<s:HGroup horizontalAlign="center">

6

<s:Button label="Login" click="login();" />

</s:HGroup>

<s:VGroup>

7

<mx:Text id="uname" visible="false"/>

<mx:Text id="pass" visible="false"/>

</s:VGroup>

8

</s:Window>

The system provide a native window but user want to create own window then use this process.

Output:

9

After some time system remove this window and give window that's have a login process like this

 Download this code

Ads