Chapter 2 start flex

* Two languages are available in flex development.

1. mxml

2. ActionScript

 

* Two Component sets are used in flex.

1. component set used in earlier versions of Mx (MX. *) Flex

2. component set used by Spark (spark. *) flex4 and later versions.

Spark has more skin appearance and other advantages than MX components. They have the same components (such as buttons, text boxes, list controls, and so on ). Spark component set is officially recommended.

 

* Mxml File

The mxmlfile is a common xmlfile, which is similar to the HTML language. The mxmlfile is compiled into a. SWF file and runs in Flash Player or air.

<?xml version="1.0" encoding="utf-8"?><!-- mxml\HellowWorld.mxml --><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"xmlns:MyComps="myComponents.boxes.*"> <s:layout> <s:VerticalLayout /> </s:layout> <s:Panel title="My Application"> <s:Label text="Hello World" fontWeight="bold" fontSize="24"/>    <MyComps:CustomBox/></s:Panel></s:Application>

• Xmlns: FX = "http://ns.adobe.com/mxml/2009" ActionScript top-level namespace, such as objects, arrays, etc. Build mxml compilers for labels, such as <FX: SCRIPT>, <FX: declarations>, <FX: style >,< FX: Model>
• Xmlns: MX = "Library: // ns.adobe.com/flex/mx" MX component set namespace
• Xmlns: S = "Library: // ns.adobe.com/flex/spark" Spark component namespace, including WebService, httpservice, remoteobject components and classes supporting RPC Components
• Xmlns: mycomps = "mycomponents. Boxes. *"> Custom component namespace

 

* Application tag

Define the application container and the root tag of the application.

<S: appliction> </S: Application>

 

* Compile and run

1) ide run, generate SWF, and run it in air or packaged in HTML.

2) command line compilation:

cd flex_install_dir/bin mxmlc --show-actionscript-warnings=true --strict=true c:/app_dir/hello.mxml

 

* Relationship Between mxml and ActionScript

As a class library of ActionScript, flex includes components (containers and controls), management classes, Data Service classes, and other feature classes. Based on these class libraries, you can use mxml and ActionScript to develop applications. The mxml tag corresponds to the ActionScript class, And the mxml tag attribute corresponds to the property, style, or event of the class. Flex converts mxml to an equivalent as object. Defining mxml labels is an instance that declares an ActionScript class.

 

* Application structure

An mxml application can define a main file containing the <s: Application> tag, and a file that references other mxml, actionscript files, or mixed writes in two languages. The separation of mxml files and as files corresponds to different modules, which makes development easier, improves reusability, and maintainability.

 

* Mxml ID attribute

The ID attribute uniquely identifies an element in the mxml file and uses this ID to reference the component of the corresponding tag in the as code. After the ID is defined, the mxml compiler will point to the instance reference of the component as a public variable of the ID.

<?xml version="1.0"?><!-- mxml/UseIDProperty.mxml --><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[private function writeToLog():void {trace(myText.text);}]]></fx:Script><s:VGroup id="myVGroup"><s:TextInput id="myText" text="Hello World!" /><s:Button id="mybutton" label="Get Weather"  click="writeToLog();"/></s:VGroup></s:Application>

* Trigger Script Execution

<s:Button label="Submit" click="textarea1.text=‘Hello World‘;"/>

 

* Bind data

Use braces {} to bind the data source Value

<s:Label text="Enter Text:"/><s:TextInput id="textinput1" text="Hello"/><s:Label text="Bind Text to the TextArea control:"/><s:TextArea id="textarea1" text="{textinput1.text}"/><s:Button label="Submit" click="textinput1.text=‘Goodbye‘;"/>

* Declare the RPC service

The following services are supported:

• WebService provides access to soap-based Web Services.
• Httpservice provides access to HTTP URLs that return data.
• Remoteobject provides access to Java objects using the AMF protocol (Adobe livecycle Data Services es only)

<fx:Declarations><s:WebService id="WeatherService" wsdl="http:/example.com/ws/WeatherService?wsdl" useProxy="false"><s:operation name="GetWeather"><s:request><ZipCode>{zip.text}</ZipCode></s:request></s:operation></s:WebService></fx:Declarations>

* Data Storage

<fx:Declarations><fx:Model id="contact"><info>
* Verify data
<fx:Declarations><mx:PhoneNumberValidator id="pnV" source="{homePhoneInput}" property="text"/><mx:EmailValidator id="emV" source="{emailInput}" property="text" /></fx:Declarations>
* Format data
<fx:Script><![CDATA[[Bindable]private var storedZipCode:Number=123456789;]]></fx:Script><fx:Declarations><mx:ZipCodeFormatter id="ZipCodeDisplay" formatString="#####-####"/></fx:Declarations><s:Panel title="My Application"><s:TextInput text="{ZipCodeDisplay.format(storedZipCode)}"/> </s:Panel>
* Use CSS
<fx:Style>@namespace s "library://ns.adobe.com/flex/spark";@namespace mx "library://ns.adobe.com/flex/mx";/* class selector */.myClass { color: Red } /* type selector */s|Button { font-size: 18pt}</fx:Style><s:Panel title="My Application"><s:Button styleName="myClass" label="This is red 18 point text."/></s:Panel>
* Skin Style
Skinning
* Special Effects
<fx:Declarations><s:Resize id="myResize" heightBy="25" widthBy="50" target="{myButton}"/> </fx:Declarations><s:Button id="myButton" label="Resize target" click="myResize.end();myResize.play();"/>
* Custom mxml component
<?xml version="1.0"?><!-- mxml/CustomMXMLComponent.mxml --><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" xmlns:MyComps="myComponents.boxes.*"><s:Panel title="My Application" height="150"><MyComps:MyComboBox/></s:Panel></s:Application>
 
* Mxml syntax
P21.