flex国际化.doc

FLEX TRAINING GUIDE INTRODUCTION 2 CHAPTER 1 HELLO WORLD 3 CHAPTER 2 FLEX CONTROLS AND UI LAYOUT 10 CONTROL S SIZE 10 Fit to Content 10 Fit to parent 11 POSITION 12 CHAPTER 3 CUSTOMS COMPONENTS 13 CREATE A NEW CUSTOM COMPONENT 13 USING THE CUSTOM COMPONENT 14 CHAPTER 4 BLAZEDS 16 SETTING UP 16 CREATE A REMOTE J2EE CLASS FOR FLEX 19 CONNECT FLEX TO THE REMOTE CLASS 19 CHAPTER 5 BLAZEDS WITH JAVA OBJECT 22 THE JAVA OBJECT 22 STEPS TO CREATE THE OBJECT CLASS 24 CHAPTER 6 MULTI LINGUAL APPLICATION 26 PREPARATION 26 Introduction Adobe Flex is a collection of technologies released by Adobe Systems for the development and deployment of cross platform rich Internet applications based on the proprietary Adobe Flash platform In our project Flex 3 will be used for the web based client BlazeDS is a server based Java remoting and web messaging technology that allows you to connect to back end distributed data and push data in real time to Adobe Flex and Adobe AIR rich Internet applications RIA Client Browser Server Tomcat BlazeDS J2EEFlex DB Programming Language Action script 3 0 XML IDE and software needed Flex 3 builder eclipse plug in download link Eclipse with j2EE SDK http www eclipse org downloads download php file technology epp download s release ganymede SR1 eclipse jee ganymede SR1 win32 zip BlazeDS 544 zip Tomcat 6 0 http tomcat apache org download 60 cgi Chapter 1 Hello World Here will demonstrate how to build a simple RIA using only flex framework Before starting make sure you have Eclipse J2EE SDK and the Flex 3 builder plug in installed Open Eclipse click on File New Projet And choose Flex Builder Flex Project Enter the project s name helloWorld choose Web Application on application type and choose None on server technology then click Finish In the project folder you will find a src folder inside you will find helloWorld mxml This is the main source file of the helloWorld project Flex s code coded either coded in mxml file or as file Mxml is usually used to define the application layout and as file are usually used to define the application logic Open helloWorld mxml and you can read the source code panel Click on the Design tab to change to designer view Place a Label and a Button to the application by choosing the controls from the components panel Click on the label and then change the ID to myLabel and change the text to Hello world in the Flex properties window Do the same for the button too but change the ID to myButton Now save the helloWorld mxml and right click on it Choose Run As Flex Application Your default web browser will pop up and you will see the hello world web page Study the code You can also editing the layout by code click the Source tab to view helloWorld mxml by code Now we try to add a text input box to the helloWorld program All flex component use the mx name space Compile the application with the following source Look at the Button node now the label property is changed to label myTextInput text It means that the label of the button will be using the text of the TextInputBox Note that you will need to use and when the property value is a code snippet Now look at the click property click myLabel text myTextInput text The above code means that on click event the text of myLabel will be assigned to the text of myTextInput There are more event you can use for the application such as doublicClick mouseUP Action Script Block Action script is an object oriented language which has all the OO features such as inheritance and interface For action script syntaxm please go to http www flashscript biz flashas3 html for action script tutorial This tutorial will assume the reader has the basic knowledge of action script and will now explain the basic syntax of action script In order to insert action script code for complex logic Just add a node and write the action script code inside The following code use action script code to change the label text Exercise 1 1 Build a flex application which take a user input string form a TextInput box and output a reverse string to the label E g Input hello world Output dlrow olleh Chapter 2 Flex Controls and UI Layout The Flex framework provides a library of UI controls For understanding each flex component s functionality the flex 3 component explorer is a very useful tool It provides a demonstration and the code for each flex components Flex 3 component explorers In this chapter we will focus on how to configure the layout property Control s Size Create a new project named chapter2 and then add a Panel to the application by dragging the panel control in the design view By default a width and height is given and layout is set to absolute Fit to Content If you remove the width and height the size of Panel will then fit to the content automatically The following codes is an example Fit to parent You can set the size of a control in proportion of the parent s size For example if you have a panel like this Then the size of the panel will resize automatically to its parent s size You can also set the control to fit to parent by action script In action script myPanel percentHeight 100 myPanel percentWidth 100 Position Use the x and y property to set the location of the control Dock to container Use top bottom left and right properties to make the control resize and dock to the wall of the parent container Chapter 3 Customs components In chapter 3 we will create a customs component which populate multiples button upon user input Create a new custom component Create a folder customComponents and add a new MXML Component The new component will be in the customComponent package Then set the name to labelWithSlider and click finish We will use the example from Chapter 2 to implelmemt this control Copy the script block the slider node and the label node to the source inside the canvas node Remove the height and width so that the custom component can resize itself to fit the content Add a property to the script block with getter setter function public function set labelText var in text String void myLabel text in text public function get labelText String return myLabel text The complete source code for the labelWithSlider component Using the custom component In the application node at chapter3 mxml add a namespace so that we can use the custom component xmlns custom customsComponentes Next we can add our custom component We also add a button and set the click event to use the labelSize property Exercise 3 1 Try to make a custom component dynamicForm which has a property formFields ArrayCollection formFields is an array of String The dynamicForm component will generate a form will the fields specified in formFields property Chapter 4 BlazeDS BlazeDS is a server based Java remoting and web messaging technology that allows you to connect to back end distributed data and push data in real time to Adobe Flex and Adobe AIR rich Internet applications Setting up The following steps show how to configure a J2EE project to a flex project 1 Install tomcat6 0 and configure it in eclipse 2 Import the demo project to the work space 3 Right click on the project then choose Flex Project Nature Add Flex Project Nature 4 Choose J2EE on Application Server type check Use remote object access service and then click next 5 on the flex war file find the blazeds war you downloaded And change the output folder to WebContent 6 On project property Flex compiler Choose Use a specific SDK and select Flex 3 1 7 On Project property Flex Build Path Set as following 8 On Project property Flex Server Set as following 9 Now build the project and then right click on Demo mxml Run As Flex Application 10 The browser will ask you to log in Use admin admin to login and you are success if you see a blank page like the following Create a remote j2EE class for flex 1 In the src folder add a new file named testing java and write a simple function public class testing public String someFunction return Hello World 2 In WebContent WEB INF applicationContent xml Add Connect flex to the remote class 1 In WebContent WEB INF flex remoting config xml Add spring testing 2 IN WebContent WEB INF flex service config xml Add the following node 3 In Demo mxml use the following code 4 Save all document Clean the project and build again Then try to run the application Chapter 5 BlazeDS with Java Object In chapter 4 we connect to a J2EE server using Blazeds and call a Java method which returns a string In this chapter we will try to call a Java method which returns an Java object The Java Object Let say we have the following object public class testingObject public testingObject objectName test objectNumber 1 private String objectName private int objectNumber public String getObjectName return objectName public void setObjectName String objectName this objectName objectName public int getObjectNumber return objectNumber public void setObjectNumber int objectNumber this objectNumber objectNumber And we have a Java method as follow public class testing public testingObject someFunction return new testingObject In order for the flex to recognize the java object we will need to create a action script class in flex source which has exactly the same name as the testingObject class and also has all the properties of testingObject Steps to create the object class 1 add a new action script class into the flex src folder 2 name the class the same as the java class e g testingObject 3 put a alias header in the class definition with the java class path E g Bindable RemoteClass alias testingObject 4 write a default constructor with no parameter 5 declare all the class variable as public variable using the same name with correspon