MACROMEDIA FLEX-GETTING STARTED WITH FLEX Скачать руководство пользователя страница 23 | Manualshive

Страница: 23 / 86

MACROMEDIA FLEX-GETTING STARTED WITH FLEX Скачать руководство пользователя страница 23

23

CHAPTER 2

Using MXML

MXML is an XML language that you use to lay out user-interface components for Macromedia
Flex applications. You also use MXML to declaratively define nonvisual aspects of an application,
such as access to server-side data sources and data bindings between user-interface components
and server-side data sources. This chapter describes MXML and how you use MXML to develop
Flex applications.

Contents

About MXML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Basic MXML syntax. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

How MXML relates to standards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

About MXML

You use two languages to write Flex applications: MXML and ActionScript. MXML is an XML
markup language that you use to lay out user-interface components. You also use MXML to
declaratively define nonvisual aspects of an application, such as access to data sources on the
server and data bindings between user-interface components and data sources on the server.
ActionScript is an object-oriented 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, MXML provides tags that define user interfaces. MXML will seem very familiar if
you have worked with HTML. However, MXML is more structured than HTML, and it provides
a much richer tag set. For example, MXML includes tags for visual components such as data
grids, trees, tab navigators, accordions, and menus, as well as nonvisual components that provide
web service connections, data binding, and animation effects. You can also extend MXML with
custom components that you reference as MXML tags.

One of the biggest differences between MXML and HTML is that MXML-defined applications
are compiled into SWF files and rendered by Macromedia Flash Player, providing a richer and
more dynamic user interface than page-based HTML applications do.

MXML does not use concepts specific to Flash, such as the timeline. However, you can use the
Flash authoring environment to create or modify components for use in Flex.

«
...
21
22
23
24
25
...
»

Содержание FLEX-GETTING STARTED WITH FLEX

Страница 1: ...Getting Started with Flex...

Страница 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...

Страница 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...

Страница 4: ...4 Contents...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 19: ...el Link List Loader MediaController MediaDisplay MediaPlayback Menu MenuBar NumericStepper ProgressBar RadioButton ScrollBars SimpleButton Slider Spacer Text TextArea TextInput TileList ToolTip Tree V...

Страница 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...

Страница 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...

Страница 22: ...22 Chapter 1 Introducing Flex...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Отзывы:

Нет отзывов