manualshive.com logo in svg

MACROMEDIA FLEX-GETTING STARTED WITH FLEX, Getting Started

Share
Download
MACROMEDIA FLEX-GETTING STARTED WITH FLEX Getting Started Download Page 43

43

CHAPTER 3

Using ActionScript

Macromedia Flex developers can use ActionScript to extend the functionality of their Flex 
applications. ActionScript provides flow control and object manipulation features that are not 
available in strict MXML. This chapter introduces ActionScript and explains how to use 
ActionScript in an MXML application.

For more information on ActionScript, see 

Flex ActionScript Language Reference

.

Contents

About ActionScript  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

Using ActionScript in Flex applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

Creating ActionScript components  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

Techniques for separating ActionScript from MXML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

About ActionScript

ActionScript is the programming language for Macromedia Flash Player. ActionScript includes 
built-in objects and functions, and lets you create your own objects and functions. 

Note: 

The ActionScript programming language in Flash MX 2004 and Flex follows the ECMA 4 

standard proposed by the Mozilla project.

ActionScript is similar to the core JavaScript programming language. You don’t need to know 
JavaScript to use ActionScript; however, if you know JavaScript, ActionScript will appear familiar 
to you. The following are some of the many resources available that provide more information 
about general programming concepts and the JavaScript language:

•

The European Computers Manufacturers Association (ECMA) document ECMA-262 is 
derived from JavaScript and serves as the international standard for the JavaScript language.

•

ActionScript is based on the ECMA-262 specification, which is available from 

www.ecma-

international.org

. ECMA-262 is also known as ECMAScript. ActionScript is primarily based 

on Edition 3 of this standard, which is also referred to commonly as ECMA 3 (shorthand for 
ECMA-262 Edition 3).

Summary of Contents for FLEX-GETTING STARTED WITH FLEX

Page 1: ...Getting Started with Flex...

Page 2: ...cs Locator WinHelp Hyperviewer WinHelp Inspector and Xtra are either registered trademarks or trademarks of Macromedia Inc and may be registered in the United States or in other jurisdictions includin...

Page 3: ...ML syntax 35 How MXML relates to standards 41 CHAPTER 3 Using ActionScript 43 About ActionScript 43 Using ActionScript in Flex applications 46 Creating ActionScript components 53 Techniques for separa...

Page 4: ...4 Contents...

Page 5: ...pplications Getting Started with Flex contains the following chapters Chapter Description Chapter 1 Introducing Flex Introduces the Flex presentation server a development and runtime environment that...

Page 6: ...ailable online in HTML and Adobe Acrobat Portable Document Format PDF files Go to the documentation home page for Flex on the Macromedia website www macromedia com go flex15_documentation Book Descrip...

Page 7: ...process that you use to create Flex applications Contents About Flex 7 Developing applications 12 The Flex programming model 15 Features of Flex 19 Where to next 20 About Flex Flex defines a developm...

Page 8: ...m scalability and performance The client and presentation tiers shield clients from the complexities of accessing the enterprise data store You can distribute application development across your devel...

Page 9: ...unctionality The Flex server also includes the Flex compiler caching mechanism and web service proxy You do not need to modify the business and integration tiers to integrate with Flex This means that...

Page 10: ...custom client software Also Flash Player runs consistently in all browsers and platforms so you do not have to worry about inconsistent behavior in different client environments Developing applicatio...

Page 11: ...or MVC Flex also provides a powerful way to validate data and pass data between user interface controls and external data sources with little or no server interaction For more information see Chapter...

Page 12: ...ontainer is a rectangular region of the screen that contains controls and other containers Examples of containers are a Form container used for data entry a Box and a Grid A control is a form element...

Page 13: ...is invalid you can display a message to the user so that the user can correct the error How Flex fits the MVC models The goal of the Model View Controller MVC architecture is that by creating componen...

Page 14: ...emote Java object 6 Add validation to input data 7 Add a script to extend a component Running Flex applications Flex application files use the mxml filename extension You store these files under the w...

Page 15: ...ts The Flex runtime services include support for server side data access compilation and caching enterprise resource integration and deployment runtime needs All Flex services minimize redundancy and...

Page 16: ...ication ActionScript is a procedural language that you use to perform runtime control and data processing in your application Defining the user interface in MXML Your application can consist of one or...

Page 17: ...n ActionScript You can detect data validation errors and signal the error to the user resubmit a request to the server or perform some other actions based on your application Binding data objects to a...

Page 18: ...Flex controls exist in a container Define a Panel container mx Panel title My Application TextInput control for user input mx TextInput id myInput width 150 text Button control that triggers the copy...

Page 19: ...el Link List Loader MediaController MediaDisplay MediaPlayback Menu MenuBar NumericStepper ProgressBar RadioButton ScrollBars SimpleButton Slider Spacer Text TextArea TextInput TileList ToolTip Tree V...

Page 20: ...e move resize mouseDown mouseOver mouseOut mouseUp show Event model Occurrences that require a response from a Flex application User events include a mouse click or a key press System events include a...

Page 21: ...For more information on the Flex data model see Chapter 31 Managing Data in Flex in Developing Flex Applications For information on debugging see Chapter 36 Debugging Flex Applications in Developing F...

Page 22: ...22 Chapter 1 Introducing Flex...

Page 23: ...ted programming language based on the ECMAScript Edition 4 proposal which you use to write programmatic logic for responding to both user initiated and system initiated events at runtime Like HTML MXM...

Page 24: ...on is running for example mx HTTPService url ContextRoot directory myfile xml A path used at compile time that is relative to the context root of the Java web application in which a Flex application i...

Page 25: ...bsequent requests When the Flex compiler autogenerates the HTML file that contains this application it uses the height and width properties of the mx Application tag to determine height and width prop...

Page 26: ...e Accordion navigator container for creating collapsible panels and the ViewStack navigator container for laying out panels on top of each other The following example shows an application that contain...

Page 27: ...t property in which you can specify ActionScript code that executes when the Button control is clicked at runtime You can specify simple event handler code directly in event properties To use more com...

Page 28: ...onScript in Flex in Developing Flex Applications Binding data between components Flex provides simple syntax for binding the properties of components to each other In the following example the value i...

Page 29: ...pes of data service components 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 AM...

Page 30: ...application specific data A data model is an ActionScript object that provides properties for storing data and optionally contains methods for additional functionality You can declare a simple data m...

Page 31: ...cellPhone mx EmailValidator field contact email mx Application The following figure shows the application rendered in a web browser window For more information about using data models see Chapter 31...

Page 32: ...ntains inline style definitions or a reference to an external file that contains style definitions The mx Style tag must be an immediate child of the root tag of the MXML file You can apply styles to...

Page 33: ...xml version 1 0 mx Application xmlns mx http www macromedia com 2003 mxml mx Panel title My Application marginTop 10 marginBottom 10 marginLeft 10 marginRight 10 mx Button id myButton mouseOverEffect...

Page 34: ...mponents see Chapter 15 Building an Application with Multiple MXML Files in Developing Flex Applications You can also define custom Flex components in ActionScript and the Flash MX 2004 authoring tool...

Page 35: ...e application file directory The prefix name is arbitrary but it must be used as declared When using a component contained in a SWC file the package name and the namespace must match even though the S...

Page 36: ...ass its properties correspond to the properties and events of that class Setting component properties In MXML a component property uses the same naming conventions as the corresponding ActionScript cl...

Page 37: ...roperty objectType prop1 val1 prop2 val2 mynamespace nameOfProperty mynamespace MyComponent The following example shows an ActionScript class that defines an Address object This object is used as a pr...

Page 38: ...pace ObjectHolder mynamespace value mx Object foo bar mynamespace value mynamespace ObjectHolder Arrays of objects When a component has a property that takes an Array of objects as its value you can r...

Page 39: ...bject is XML data mynamespace MyComponent mynamespace value xmlns a http www example com myschema mx XML a purchaseorder a billingaddress a billingaddress a purchaseorder mx XML mynamespace value myna...

Page 40: ...onal id property which must be unique within the MXML file If a tag has an id property you can reference the corresponding object in ActionScript In the following example results from a web service re...

Page 41: ...ration tag requires a name value and does not allow duplicate name entries The mx operation tag cannot contain an id property The mx method tag requires a name value and does not allow duplicate name...

Page 42: ...supports and where to send messages Flex applications support web service requests and results that are formatted as Simple Object Access Protocol SOAP messages and are transported using the Hypertext...

Page 43: ...own objects and functions Note The ActionScript programming language in Flash MX 2004 and Flex follows the ECMA 4 standard proposed by the Mozilla project ActionScript is similar to the core JavaScrip...

Page 44: ...m variable references In JavaScript when a string is evaluated in a Boolean context and the string has a nonzero length the result is true if the string doesn t have a nonzero length the result is fal...

Page 45: ...ks_debug directory ActionScript compilation The logic of your Flex application can consist of ActionScript classes MXML files SWF files and external components in the form of SWC components MXML files...

Page 46: ...x extracts the ActionScript and creates a class file which is linked to the final SWF file For more information see Techniques for separating ActionScript from MXML on page 54 Note In general Macromed...

Page 47: ...The following example gets the value of the TextArea named ta1 var str String ta1 text You can refer to the current enclosing document or current object using the this keyword For more information see...

Page 48: ...ng is adding a reference to a class file or package so that you can access objects and properties defined by external classes Files that you import must be found in the ActionScript classpath Files th...

Page 49: ...source attribute of the mx Script tag to include external ActionScript files in your Flex applications This provides a way to make your MXML files less cluttered and promotes code reuse across differe...

Page 50: ...mber of include directives You can next include directives files with include directives can include files that have include directives The include directive supports only relative paths For more info...

Page 51: ...the context root Resolves to flex_app_root myfiles functions as include functions as Relative to the current document root in this case in the same directory as the current document Flex searches the...

Page 52: ...classes in the following order 1 Local as files in the same directory or subdirectories as the currently executing application 2 Classes in flex_app_root WEB INF flex user_classes 3 Classes specified...

Page 53: ...lowing example shows class myControls MyButton extends mx controls Button function MyButton In this example you write your MyButton control to the MyButton as file and you store the file in the myCont...

Page 54: ...veral different methods of separating ActionScript from the MXML The Temperature application takes input from a single input field and uses a function to convert the input from Farenheit to Celsius It...

Page 55: ...ht 10 mx HBox mx Label text Temperature in Farenheit mx TextInput id farenheit width 120 mx Button label Convert click calculate mx Label text Temperature in Celsius mx Label id celsius width 120 font...

Page 56: ...mxml initialize converter setupListener local TempConverter id converter xmlns local mx Panel title My Application marginTop 10 marginBottom 10 marginLeft 10 marginRight 10 mx HBox mx Label text Tempe...

Page 57: ...ages JSP Microsoft Active Server Pages ASP and Macromedia ColdFusion Markup Language CFML Unlike a set of static HTML pages or HTML templates created using JSP ASP or CFML the files in a Flex applicat...

Page 58: ...ificantly different from developing in HTML HTML uses a page metaphor in which code is primarily written in a set of page files What constitutes an application is really a set of separate HTML pages E...

Page 59: ...ation in Macromedia Flash MX even though in both environments the application is compiled into a SWF file You create a Flex application in text files which you can create and edit in a simple text edi...

Page 60: ...to true Flex disables all debugging and profiling features Flex also ignores query string parameter overrides such as debug true and asprofile true when production mode is enabled Directory Descriptio...

Page 61: ...is enabled and edit debugging settings in the flex config xml file For more information see Chapter 36 Debugging Flex Applications in Developing Flex Applications command line debugger The Flex Actio...

Page 62: ...re capable of accessibility Available when production mode is set to true or false asprofile true Generates ActionScript profiling information debug true Enables ActionScript debugging for an applicat...

Page 63: ...es of user interaction your users will not have to think about how to navigate the application but can instead concentrate on the content that the application offers Another advantage is that you do n...

Page 64: ...ed class if you want to set data types and provide methods for additional functionality In general you should use MXML based models for simple data structures and use ActionScript for more complex str...

Page 65: ...on servers use different web service back ends so you might see performance differences depending on the implementation The only way to understand how well your implementation will perform is to load...

Page 66: ...as the following example shows You can use this technique for any code that depends on the execution of other code mx WebService id myService mx operation name getFoo result myFooResultHandler event r...

Page 67: ...ave a default size You can use the default size specify your own size or let Flex resize a component as part of laying out your application For more information see Chapter 4 Introducing Containers in...

Page 68: ...plication starts You can instruct Flex to create all components in all containers only the initially visible components in the containers or no components in any of the containers In addition you can...

Page 69: ...lash Player to redraw To do this you use the effectStart and effectEnd events to control what is visible before and after the effect For example if you apply a Fade effect to a Form with many controls...

Page 70: ...bug Player and the standard Flash Player installed on your system Use query parameters and settings in the flex config xml file to control which player Flex uses to execute your application Ensure tha...

Page 71: ...n object model The object model defines how the various parts of the application map to individual objects It is useful to think in terms of a model view controller MVC architecture and consider wheth...

Page 72: ...oppingCart The ShoppingCart object is a nonvisual object that stores items a user selects for purchase This object is a model object because its primary purpose is to represent a set of items that the...

Page 73: ...in Determining component types and a messaging strategy on page 73 Determining component types and a messaging strategy After you establish an object model you need to consider what types of Flex comp...

Page 74: ...object with the sole function of data storage and it requires no data typing Compare this with the ShoppingCart object which is also in the model tier but stores and manipulates data The data for the...

Page 75: ...ngCart object is defined in an ActionScript class because it performs data storage and data manipulation An ActionScript class is the appropriate component type because it can contain both properties...

Page 76: ...ail The ProductThumbnail object defines a custom cell renderer used by the ThumbnailView object You use a cell renderer to manipulate and display custom cell content for each of row of a list based co...

Page 77: ...owing properties defined in an mx Script tag var selectedItem var dataObject var min var max The dataObject property stores catalog data The component contains the following methods defined in an mx S...

Page 78: ...that you can create using MXML tags and a small amount of ActionScript code The top level tag of the Checkout component is a VBox container The component uses an mx Script tag to include the ActionSc...

Page 79: ...an application For more information see Chapter 15 Building an Application with Multiple MXML Files in Developing Flex Applications ActionScript components ActionScript components are Flex components...

Page 80: ...other types of feedback For more information see Chapter 24 Using the Cursor Manager in Developing Flex Applications History management History management lets users navigate through a Flex applicati...

Page 81: ...ferred instantiation lets you determine when controls and other components are created when you invoke a Flex application For more information see Chapter 27 Improving Layout Performance in Developing...

Page 82: ...ncludes several configuration files to administer the behavior of your applications Settings specific to the Flex application are defined in the flex_app_root WEB INF flex flex config xml file Web app...

Page 83: ...ce 67 architecture of 70 developing 57 ASP and Flex coding 58 B behaviors about 67 performance tuning 69 C CartView object 72 75 Cascading Style Sheets CSS 32 catalog object 72 74 characters special 4...

Page 84: ...ry 15 components 12 containers 12 controls 12 data binding 13 data models 13 development environment 60 development process 14 development tools 60 features 19 Flash Debug Player and 10 Flash Player a...

Page 85: ...effects 33 event handlers 27 example 24 Hello World example 24 moving from Flash 23 Script tag 48 separating from ActionScript 54 simple applications 24 standards and 41 style property of tag 39 synta...

Page 86: ...directive 50 including ActionScript files 48 package import 51 source attribute of 49 using 49 with ActionScript 48 ShoppingCart object 72 75 skins 67 standards in MXML 41 styles about 67 in MXML 39...

Reviews:

No comments

Brands by name

Popular brands

Load more brands