Macromedia Flex Markup Language Introduction _ Other

Introduction to Macromedia Flex Markup Language
Macromedia Flex (Development Code Royale) is a showcase server that developers can use to develop a new generation of "complex Internet Applications" (Rias-rich Internet applications). Complex Internet applications combine the usability of desktop applications with the ease of management of Web applications.

Flex is a showcase server installed in the Java EE Application Server or servlet container. It has rich user interface components, an xml-based markup language for the configuration of these components, and an object-oriented programming language that can handle user interaction. What these technologies bring to us is the use of flash players to render complex Internet applications, using industry standards and developers in familiar ways.

This article will focus on the key parts of the flex language.

In order to run the code mentioned in this article, you may need to join Flex's beta test. Flex runs on a Java EE application server like Macromedia JRun, IBM Websphere, BEA WebLogic, or Apache Tomcat. Flex will support Microsoft in the future. NET Server.

Introduction to Flex language

Because of the wide application of markup languages and object-oriented programming languages, Flex languages based on these two technologies will also benefit from this. The markup language is successful and the user interface is relatively easy to arrange. MXML, an Xml-based markup language introduced by Flex, will continue its success. Like HTML, you can use Mxml to arrange the user interface for the application. As an xml-based markup language, Mxml has a stronger structure than HTML, with fewer grammatical ambiguities. A richer set of tabs has been introduced than Html,mxml. such as: Datagrid,tree,tabnavigator,accordion and menu, these are part of the standard tag set. You can also extend the mxml tag to create your own components. In addition, the biggest difference is that the user interface defined by Mxml is run with a Flash player, which is more appealing than traditional html-based, page-centric Web applications.

In addition to the configuration of visual components, you can use Mxml to define other important aspects of your application, such as, you can define an application as a customer of a Web service, or develop animations in your application to prompt the user for progress.

However, the programming logic provided by the markup language is still difficult to meet the needs of user interaction. In Flex, you can use the ActionScript programming language to write event listeners to meet this requirement. ActionScript is a ECMA-262 standard, strongly typed object-oriented language, similar to other programming languages--java and C #, and therefore easy to start with.

In summary, when writing a flex application, you need to use Mxml to set up the user interface and use ActionScript to write the logic that responds to user interaction.

As a developer, you can write mxml by hand with your familiar IDE (such as Eclipes or IntelliJ), or you can use the "WYSIWYG" development environment that Flex supports (the current development code is Brady), depending on your preferences. Even if you choose to hand-write mxml, you can still use the XML schema provided by Flex to provide you with code hints (hinting) and code completion functions in the IDE.

The following example is the source code for a simple flex application called Helloword.mxml. The application has two textinput components, and when you click Copy, the contents of source TextInput are displayed in the destination textinput domain. The following example shows how to create an application with Mxml and ActionScript: Define the user interface with Mxml, and then use ActionScript to write the copy logic for the event listener for the button component.

<?xml version= "1.0" encoding= "Iso-8859-1"?>
<mx:application xmlns:mx= "Http://www.macromedia.com/2003/mxml" >
<mx:textinput id= "source" width= "/>"
<mx:button label= "Copy" click= "Destination.text=source.text"/>
<mx:textinput id= "Destination" width= "/>"
</mx:Application>

Flex Development and Deployment model

To develop and deploy this application, you typically go through the following steps:

1. Write the Hellowold.mxml file with your familiar IDE or flex "WYSIWYG" development tool.

2. Deploy the file to the application server. It is generally possible to copy Helloworld.mxml to a Web application directory or to package Helloworld.mxml as part of the application into the war file.

When a user first requests Helloworld.mxml, the server compiles the Mxml code into a Flash byte code (a SWF file). The server then sends the resulting SWF file to the client and lets the Flash player execute. For concurrent requests to the same Mxml document, the server skips the compilation process and returns the same compilation results directly.

If you are familiar with JavaServer pages, you will find that their models are very similar. Just as JSPs is compiled into Java bytecode (servlets), the Mxml file is compiled into a flash byte code. The main difference is that in flex, the resulting bytecode is executed at the client, while the Java bytecode (servlet) generated by the JSP is executed on the server side. With Flex, you can seamlessly integrate complex client applications into existing business logic.

Using Mxml user interface components

The rich user component is a major feature of Flex. In addition to the traditional data-entry controls (Text Inputtextarea,checkbox,radiobutton,combobox, and so on), Mxml also includes advanced components for maintaining structured data (tree components) and large datasets (DataGrid components). For clear organization of data and its processing, Flex also provides navigation components (tab,viewstack,accordion, etc.).

To make it easier to organize the user interface, the Flex container also defines a layout management policy that indicates the position of a component relative to another component. The Flex Component library provides a large number of containers that can implement different layout policies. For example, components in Hbox are arranged horizontally, and components in VBox are arranged vertically, and components in grid are arranged in rows and columns, like HTML table. No layout management policy is defined in the view container, so you can specify the location of the component with x,y coordinates.

Here is a traditional e-mail interface with three panels in a flex environment. The tree in the Hbox container is arranged horizontally, while the DataGrid and textarea in the VBox container are arranged vertically.

<?xml version= "1.0" encoding= "Iso-8859-1"?>
<mx:application xmlns:mx= "Http://www.macromedia.com/2003/mxml" >
<mx:HBox>
<mx:Tree/>
<mx:VBox>
<mx:DataGrid/>
<mx:TextArea/>
</mx:VBox>
</mx:HBox>
</mx:Application>

Writing ActionScript code

The flex language is event-driven. Mxml event as the property of the label, you can write event listeners for it. For example, the button component has a click attribute, Combobox,list and tree components have a change attribute, and so on.

For simple interactions, you can write ActionScript statements directly on the label's event properties. For example, in a HelloWorld application, a actionscripts statement in the Click event Listener of a button can copy the contents of the source TextInput to destination TextInput.

<?xml version= "1.0" encoding= "Iso-8859-1"?>
<mx:application xmlns:mx= "Http://www.macromedia.com/2003/mxml" >
<mx:textinput id= "source" width= "/>"
<mx:button label= "Copy" click= "Destination.text=source.text"/>
<mx:textinput id= "Destination" width= "/>"
</mx:Application>

When the logic is more complex, you can define a separate ActionScript function and then call it in the component's event listener. For example, you can rewrite the HelloWorld application as follows:

<?xml version= "1.0" encoding= "Iso-8859-1"?>
<mx:application xmlns:mx= "Http://www.macromedia.com/2003/mxml" >
<mx:script>
function copy () {
Destination.text=source.text
}
</mx:script>
<mx:textinput id= "source" width= "/>"
<mx:button label= "Copy" click= "copy ()"/>
<mx:textinput id= "Destination" width= "/>"
</mx:Application>

Creating a Mxml file is actually creating a class. The ActionScript function defined in the <mx:script> label is the method of the class. You can define ActionScript functions in Mxml files or stand-alone files. Depending on which method you choose, the latter approach can make a better division of the development team.

To define your own components

In Flex, you can create your own components from scratch, or by extending the components already in the Flex component library. Creating a component is like creating an application: Use Mxml to arrange the user interface, and use ActionScript to write the interface logic.

An example below is to create a simple credit card selection component by extending the VBox class.

<?xml version= "1.0" encoding= "Iso-8859-1"?>
<mx:vbox xmlns:mx= "Http://www.macromedia.com/2003/mxml" >
<mx:radiobutton groupname= "card" id= "AmericanExpress"
Label= "American Express" selected= "true"/>
<mx:radiobutton groupname= "card" id= "MasterCard" label= "MasterCard"/>
<mx:radiobutton groupname= "card" id= "visa" label= "visa"/>
</mx:VBox>
The name of the component is the name of the source file. For example, the name of the source file is Creditcardchooser.mxml, the name of the component is creditcardchooser, so that this tag name can be used. The following example uses the Creditcardchoose component that you just created.

<?xml version= "1.0" encoding= "Iso-8859-1"?>
<mx:application xmlns:mx= "Http://www.macromedia.com/2003/mxml" >
<mx:label text= "Select a credit card:"/>
<CreditCardChooser/>
</mx:Application>

Interface developers can also create complex visualization components in the Macromedia Flash development environment, coexisting as SWC files.

Of course, you can also use ActionScript only to define the entire component, which is typically used to define non-visual components in your application. You might create non-visual components for such a business object--for example, a shopping cart that contains client logic, or a helper in an application

Data access

Macromedia Flex is developed for server-oriented architecture (soa–service-oriented architecture). In this model, the application accomplishes its task by interacting with services that are dispersed in different places. For example, if you create an online travel application, you need to interact with different services: The Global Hotel reservation service, the purpose information service, the weather Service, and so on. These services may be provided in different mechanisms and come from different places. Flex enables you to assemble information on the client and provide three different data service components to meet the needs of a service provider for specific data access: WebService components, Httpservice components (typically use XML for data access via HTTP) and RemoteObject components. Mxml allows you to set up a connection with the service using the corresponding WebService, Httpservice, and remoteobject tags.

Data binding

In many languages, how to display background data in a user-interface control is a headache and is very error prone. It is often tedious to collect data that users enter into a control and pass it on to a remote service.

One of the features of Flex is that it provides a two-way data binding mechanism: You can bind the user interface control to the data result set of the service invocation, and in turn, bind the parameters of the service to the values entered by the user interface control.

Below is a simple stock quote application. The example uses the WebService tag to set up a connection with the stock price Web service provided by Xmmethods. This example illustrates the bidirectional binding capabilities of flex. The symbol input parameter for the GetQuote method is bound to the symbol TextInput component. The quote tag is bound to the call result of the Getqute method.

<?xml version= "1.0" encoding= "Iso-8859-1"?>
<mx:application xmlns:mx= "Http://www.macromedia.com/2003/mxml" >
<mx:webservice id= "Wsstock" wsdl= "http://services.xmethods.net/soap/urn:xmethods-delayed-quotes.wsdl" >
<mx:operation name= "GetQuote" >
<mx:request>
<symbol>{symbol.text}</symbol>
</mx:request>
</mx:operation>
</mx:WebService>
<mx:label text= "Enter a symbol:"/>
<mx:HBox>
<mx:textinput id= "symbol"/>
<mx:button label= "Get Quote" click= ' wsStock.getQuote.send () '/>
</mx:HBox>
<mx:label id= "quote" fontweight= "bold" >{wsStock.getQuote.result}</mx:Label>
</mx:Application>

In fact, the flex data binding mechanism is better than the traditional Retrieve/display/display method: In Flex applications, you can bind any property of any object to any property value of another object.

Use a hierarchical style sheet (CSS)

Flex uses hierarchical style sheet standards to ensure user interface consistency and makes applications easier to maintain. As in HTML, you can embed an external style sheet in an application, or define a style as its attribute under a particular markup element. The style sheet also allows you to define fonts. The desired font definition is embedded in the applied bytecode, and can be rendered correctly even if the user does not have such a font on the machine.

The following is an external style sheet called MAIN.CSS.

@font-face {
Src:url ("Lucidasansregular.ttf");
Font-family:mainfont;
}

. Error {color: #FF0000; font-size:12;}
. title {font-family:mainfontbold;font-size:18;}
TextArea {backgroundcolor: #EEF5EE;}

The following example declares an external style sheet by using the <mx:style> tag and uses a different style for different controls.

<?xml version= "1.0" encoding= "Iso-8859-1"?>
<mx:application xmlns:mx= "Http://www.macromedia.com/2003/mxml" >
<mx:style src= "Main.css"/>
<mx:label stylename= "Error" text= "This are an error"/>
<mx:label stylename= "title" text= "This is a title"/>
<mx:textarea width= "height=" wordwrap= "true" >this is a textarea</mx:textarea>
</mx:Application>

Effects

Complex Internet applications are often compared to client/server applications. Because they provide the same level of user experience. However, it is easy to overlook the difference is that both users have characteristics. Customers who use client/server applications are often tortured and eventually adapted to the user interface they need to face. Customers with complex Internet applications are usually temporary users. Under such conditions, an intuitive user interface will lose the opportunity.

Appropriate use of effects, such as floating tips and progress status, helps customers understand the current content intuitively. In Mxml, you can achieve this by setting up animations.

The following example uses the prebuilt effect in the Flex feature library, in this case when the square component is displayed with the Wiperight effect, and the wipeleft effect is used when it disappears.

<?xml version= "1.0" encoding= "Iso-8859-1"?>
<mx:application xmlns:mx= "Http://www.macromedia.com/2003/mxml" >
<mx:view id= "Square" width= "height=" "backgroundcolor=" #666699 "showeffect=" Wiperight "hideeffect=" Wipeleft "/>
<mx:HBox>
<mx:button label= "Display" click= "Square.visible=true"/>
<mx:button label= "Hide" click= "Square.visible=false"/>
</mx:HBox>
</mx:Application>

Summarize

The flex language contains a rich library of user interface components, MXML (an xml-based Markup language) and ActionScript (ECMA 262 based, strongly typed object-oriented programming language). Mxml is used to arrange the user interface and to handle other aspects of the application, and ActionScript is used to handle user interaction logic. Because of the popularity of the Flash platform, Flex enables developers to develop a wide range of applications. Developers can use industry standards (such as XML,CSS and SVC) and the patterns and paradigms they are familiar with to create applications. Flex's decoupled collaboration and Macromedia Common component model also enable developers and interface designers to collaborate better and produce breakthrough products in the user experience on a reliable, maintainable architecture.

About the Author:
From 1994-2000, Christophe Coenraets served in PowerSoft, a company that has now been acquired by Sybase. He started working with Java in 1996 and became a technical specialist in the company's Java and Internet application department. Christophe later joined Macromedia Company to become the company Java Application Server JRun technology specialist. Christophe began studying complex Internet applications in this position, starting to integrate the Flash front-end with the back-end of Java, Christophe is currently Macromedia's new Developer-centric Rich The High Commissioner for Internet applications initiative. Over the past decade, Christophe has often spoken in seminars around the world.