Thursday, September 23, 2010

Flex tab navigator Example

Flex Framework TabNavigator

Introduction:

Under mx.containers package TabNavigator class is defined.
Under TabNavigator class TabNavigator container is defined.

Tab Navigators are Navigator containers of flex.
In the following example, three tabs have been created using flex Layout container VBox. We also used the wipe effect behavior..

Example:


Step 1:
Create project named as ValidatorPro

Step 2:
Create ValidatorPro.mxml

Step 3:
Include following coding into the ValidatorPro.mxml

< ?xml version="1.0" encoding="utf-8"? >
< s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" >
< fx:Declarations >

< mx:WipeLeft id = 'wipe_left'/ >
< mx:WipeUp id="wipe_up"/ >

< /fx:Declarations >

< mx:Panel title = 'Tab Navigators' width = '100%' height = '100%' >

< mx:TabNavigator width = '100%' height = '100%' >

< mx:VBox label = 'Panel 1' showEffect = '{wipe_left}' >
< mx:Text text = 'You switched Panel1 Tab ' color = '#996600'/ >
< /mx:Vbox >

< mx:VBox label = 'Panel 2' showEffect = '{wipe_left}' >
< mx:Text text = 'You switched Panel2 Tab' color = '#FF9900'/ >
< /mx:Vbox >

< mx:VBox label = 'Panel 3' showEffect = '{wipe_up}' >
< mx:Text text = 'You switched Panel3 Tab' color = '#9966CC'/ >
< /mx:Vbox >

< /mx:TabNavigator >

< /mx:Panel >
< /s:Application >


Step 4:
            Run the Application

Step 5:

            Get the output like below




















































Tuesday, September 21, 2010

Flex Framework Validator Example


Flex Framework Validator Example

Aim:

We use pre-defined Flex validator to validate different type of data. By using appropriate flex validators to validate the data. Mostly we validate email, phone number, userID, and password.

In the below example, we use two flex pre defined validator such as Email validator and phone validator.
When the user enter the value, the data validator checks the syntax and the type of data entered and the entered data is to be wrong, the corresponding validator generates error message in red text format.

 Procedure:

Step 1:
            Create project named such as ValidatorPro

Step 2:
Include following coding into the ValidatorPro.mxml



< ?xml version="1.0" encoding="utf-8"? >
< s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" >
< fx:Declarations >
< mx:PhoneNumberValidator source = '{phoneNumber}'
property = 'text'/ >
< mx:EmailValidator source = '{EmailId}'
property = 'text'/ >

< /fx:Declarations >

< mx:Panel title = 'Flex Validator Control' >

< mx:TextInput id = 'phoneNumber'
text = 'enter valid phone number.'/ >
< mx:TextInput id = 'EmailId'
text = 'suresh@speed.com'/ >

< /mx:Panel >
< /s:Application >


Step 3:
          Run the Application

Step 4:
          Get the Output like below


If you enter invalid phone number the error message will display




















If you enter invalid email

















Flex Framework Alert Box Example


Flex Framework – Alert Box Example

Aim:

           Alert box is dialog box that appears on window with some message. Alert Box is referred to as pop-up window.

         Alert is class that is defined inside the mx:controls package. The pop-up window appears when show () method of the Alert Class is called.

Procedure:
Step 1:
            Create Project  named AlertPro

Open Flash Builder 4

File--New—Flex Project

















New Flex Project window will open.

















where you give project name such as AlerPro
            Next—Next—Finish
            AlertPro project successfully created.
Note: automatically AlertPro.mxml file created.
Step 2:
            Include following coding into the AlertPro.mxml


< ?xml version="1.0" encoding="utf-8"? >
< s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" >

< fx:Script >
< ![CDATA[
import mx.controls.Alert;
import mx.controls.Text;
private function display(event:Event):void
{
Alert.show(tnum.text,"Result");
}
]] >
< /fx:Script >
< mx:Panel title="Alret Box Example" height="400" width="400" >
< mx:Canvas >

< mx:Label id="num" text="Enter Your Name" x="50" y="50"/ >
< mx:TextInput id="tnum" x="200" y="50"/ >
< mx:Button label="OK" click="display(event);" x="200" y="250"/ >

< /mx:Canvas >
< /mx:Panel >
< /s:Application >


step 3:
            Run the application

Step 4:

            Alert Box will display with what you have entered in the TextInput components.














Saturday, September 18, 2010

Flex with Java


Flex with Java

Aim:
            To understand how to connect Flex with java from this post.

Requirements:

            1).            Download BlazeDS
                                                           Download BlazeDS Here

            2).            Flash Builder
                                                          Download Falsh Builder 4 Here

            3).            Jdk(above 1.5)
                                                         Download Jdk 6 


Procedure:

Step 1:

            Setting up Environment Variable in Windows

1. Open Control Panel
2. Click the System icon then a window will pop up
3. Go to the Advanced tab
4. Click the "Environment Variables"
5. Select "New" in System Variables.
6. In the Variable Name textbox type JAVA_HOME
7. In the Variable Location textbox type the JDK directory



















Running Installed Sample Applications.
1. Start Tomcat by double clicking [blazeds directory]tomcat\bin\startup.bat
2. Now, check if it works by running http://localhost:8400/ in your browser.
You will get output like below

Configure BlazeDS
  1. Open [blazeds directory]tomcat\webapps\
  2. Copy the blazeds folder and change the name it as "yoga".
  3. Open "yoga" folder.
  4. You should be able to see 2 folders. WEB-INF and META-INF.
  5.  Inside WEB-INF, open web.xml

















Remove comment < !—begin rds and remove end rds -- >

And change to false like below
….
….
< init-param >
< param-name > useAppserverSecurity < /param-name >
< param-value > false < /param-value >
< /init-param >

….
….















6. Inside the flex folder, open remoting-config.xml and add the coding.














Note: The destination and the source values are what we'll be using in flex when we create the RemoteObject tag.

Creating the HelloWorld Class
1.      Create a package com.
2.      Inside your Package create a HelloWorld Class. Your HelloWorld.java should look like this:

package com;
public class HelloWorld
{
    public String sayHello(String name)
    {
        return "Hello, " + name;
    }
}
3.    compile the HelloWorld.java

& > javac –d . HelloWorld.java

4.    you get HelloWorld.class file inside com.HelloWorld.class

Copy the package com and paste into

E:\SOFTWARE\blazeds\tomcat\webapps\yoga\WEB-INF\classes












Open Adobe Flash builder 4

Step 1:

          Open Adobe Flash Builder 4

Step 2:

          Create Flex Project














Give Project name as FlexJava















Click Next and another window will open


















Next and another window will open will be displayed like below
















And Finish

FlexJava project will be successfully created.

And automatically FlexJava.mxml file will be created.

Connect BlazeDS














The project server setting required window will open.














You give Yes

















From this page, you can select Application server type as J2EE


Select Use Remote Object Access service

Select BlazeDS

Root Folder: E:\SOFTWARE\blazeds\tomcat\webapps\yoga

Root URL: http://localhost:8400/yoga

Context root: /yoga

Click Validate configuration

The web root folder and root URL are valid message will displayed on top of the window






















And click ok.

Connect to Data/Services for FlexJava. Window will open.















Click Next. Authentication required window will open.













Select checkbox for No Password required.

Ok.

Connect Data/services for FlexJava window will open like below
























Select HelloWorld check box

And click Finish


Include following coding into the FlexJava.mxml



< ?xml version="1.0" encoding="utf-8"? >
< s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" >
< fx:Declarations >

< mx:RemoteObject id="ro" destination="HelloWorld"/ >

< /fx:Declarations >

< mx:Panel title="java flex" height="400"
width="400" >

< mx:Canvas >


< mx:TextInput id="n" change="ro.sayHello(n.text)" x="50" y="100"/ >
< mx:Label text="{ro.sayHello.lastResult}" x="200" y="200"/ >

< /mx:Canvas >
< /mx:Panel >

< /s:Application >


Run the FlexJava.mxml

Step1:

          Shutdown the Tomcat

Step 2:

          Start the Tomcat

Step 3:

          Run the FlexJava.mxml

Step 4:

          You will get ouput 



















Thursday, September 16, 2010

Flex with Java


Flex with Java

Aim:
            To understand how to connect Flex with java from this post.

Requirements:

            1).            Download BlazeDS

            2).            Flash Builder

            3).            Jdk(above 1.5)


Procedure:

Step 1:

            Setting up Environment Variable in Windows

1. Open Control Panel
2. Click the System icon then a window will pop up
3. Go to the Advanced tab
4. Click the "Environment Variables"
5. Select "New" in System Variables.
6. In the Variable Name textbox type JAVA_HOME
7. In the Variable Location textbox type the JDK directory


flex combox radio button properties

Flex Framework ComboBox and Radio Button Properties

flex combox radio button properties

Flex Framework ComboBox and Radio Button Properties