1. DL manuals
  2. MACROMEDIA
  3. Other
  4. FLEX-GETTING STARTED WITH FLEX
  5. Getting Started

MACROMEDIA FLEX-GETTING STARTED WITH FLEX Getting Started

Summary of FLEX-GETTING STARTED WITH FLEX

  • Page 1

    Getting started with flex.

  • Page 2

    Trademarks activeedit, activetest, add life to the web, afterburner, aftershock, andromedia, allaire, animation powerpack, aria, attain, authorware, authorware star, backstage, blue sky software, blue sky, breeze, bright tiger, captivate, clustercats, coldfusion, contents tab composer, contribute, d...

  • Page 3: Contents

    3 contents introduction: about flex documentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 using this manual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 accessing the flex documentation . . . . . . . . . . . . . . . . . . . ....

  • Page 4

    4 contents.

  • Page 5: Introduction

    5 introduction about flex documentation getting started with flex provides an introduction to macromedia flex. This book is intended for application developers who are new to flex and require an overview of flex features and capabilities. Contents using this manual . . . . . . . . . . . . . . . . . ...

  • Page 6

    6 introduction: about flex documentation accessing the flex documentation the flex documentation is designed to provide support for the complete spectrum of participants. Documentation set the flex documentation set includes the following manuals: viewing online documentation all flex documentation ...

  • Page 7: Chapter 1

    7 chapter 1 introducing flex this chapter introduces you to the macromedia flex presentation server, a development and runtime environment that lets you create rich interfaces for your web applications. Macromedia flex defines a standards-based programming methodology for building the presentation t...

  • Page 8

    8 chapter 1: introducing flex using flex in an n-tier application model by definition, enterprise applications are multitiered, where each tier brings specific benefits to the application design. A tiered architecture provides natural access points for integration with existing and future systems. E...

  • Page 9

    About flex 9 flex adds new functionality and options to the n-tier model. The following figure shows the same five tiers for a flex application: in flex, flash player provides the platform for interface development so that both client and presentation tier logic executes on the client computer. Flex...

  • Page 10

    10 chapter 1: introducing flex applications running in flash player behave like desktop applications, instead of a series of linked pages. Flash player manages the client interface as a single, uninterrupted flow and does not require a page load from the server when the client moves from one section...

  • Page 11

    About flex 11 flex application characteristics one of the most common applications using flex lets users perform product selection and configuration. The user works through a process to configure the features of a product, views or inspects the configuration, and then proceed through the steps requi...

  • Page 12

    12 chapter 1: introducing flex direct user feedback complex tasks must provide feedback to users when the user makes input errors or enters invalid information. Support for a feedback mechanism should also require a minimum of server-side interactions so as not to use network bandwidth. Because your...

  • Page 13

    Developing applications 13 you define your data models using mxml or actionscript as part of a flex application. The following figure shows a form created in flex that uses a data model: data binding is the process of tying the data in one object to another object. The data model supports bidirectio...

  • Page 14

    14 chapter 1: introducing flex although you can consider a flex application as part of the view in a distributed mvc architecture, you can use flex to implement the entire mvc architecture on the client. A flex application has its own view components that define the user interface, model components ...

  • Page 15

    The flex programming model 15 the flex programming model you deploy the flex presentation server on a j2ee application server or servlet container. The flex presentation server includes the flex application framework and the flex runtime services, as the following figure shows: the flex application ...

  • Page 16

    16 chapter 1: introducing flex when you declare a control using an mxml tag, you create an instance object of that class. This mxml statement creates a button object, and initializes the label property of the button object to the string submit. An mxml tag that corresponds to an actionscript class u...

  • Page 17

    The flex programming model 17 the second line begins with the tag, the root element of a flex application. This tag includes the flex namespace declaration. The content between the beginning and end tags defines the flex application. As it is written, this example lays out the user interface, but do...

  • Page 18

    18 chapter 1: introducing flex the previous example inserts the actionscript code directly into the mxml code. Although this technique works well for one or two lines of actionscript code, for more complex logic you typically define your actionscript in an block, as the following example shows: func...

  • Page 19

    Features of flex 19 features of flex the following table lists details about the flex feature set. Subsequent chapters in this book describes these features in detail. Feature description details containers defines a region of the flash player drawing surface and controls the layout for everything i...

  • Page 20

    20 chapter 1: introducing flex where to next this book contains an introduction to flex and an overview of developing flex applications. The developing flex applications book contains detailed information about these topics. For more information, see the following: • for information on mxml and acti...

  • Page 21

    Where to next 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 flex applications..

  • Page 22

    22 chapter 1: introducing flex.

  • Page 23: Chapter 2

    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 compo...

  • Page 24

    24 chapter 2: using mxml you can write an mxml application in a single file or in multiple files. Mxml supports custom components written in mxml files, actionscript files, and files created using the flash mx 2004 authoring environment. Some mxml tags, such as the tag, have a property that takes a ...

  • Page 25

    About mxml 25 the first line of the document specifies an optional declaration of the xml version. It is good practice to include encoding information that specifies how the mxml file is encoded. Many editors let you select from a range of file encoding options. On north american operating systems, ...

  • Page 26

    26 chapter 2: using mxml laying out a user interface mxml provides a comprehensive set of components for laying out the user interface of an application. The standard set of components includes simple form controls, such as buttons and text fields, as well as components for displaying structured dat...

  • Page 27

    About mxml 27 the list control and tabnavigator container are laid out side by side because they are in an hbox container. The controls in the tabnavigator container are laid out from top to bottom because they are in a vbox container. The following figure shows the application rendered in a web bro...

  • Page 28

    28 chapter 2: using mxml the following example shows the code for a version of the application in which the event handler is contained in an actionscript function in an tag: function hello(){ textarea1.Text="hello world"; } ]]> marginleft="10" marginright="10" > marginleft="10" marginright="10" > fo...

  • Page 29

    About mxml 29 the following figure shows the application rendered in a web browser window after the user clicks the submit button: as an alternative to the curly braces ({ }) syntax, you can use the tag, in which you specify the source and destination of a binding. For more information about data bi...

  • Page 30

    30 chapter 2: using mxml click='weatherservice.Getweather.Send()'/> the following figure shows the application rendered in a web browser window: for more information about using data services, see chapter 31, “managing data in flex,” in developing flex applications. Storing and validating applicatio...

  • Page 31

    About mxml 31 text="this isn't a valid phone number."/> {homephoneinput.Text} {cellphoneinput.Text} {emailinput.Text} the following figure shows the application rendered in a web browser window: for more information about using data models, see chapter 31, “managing data in flex,” in developing flex...

  • Page 32

    32 chapter 2: using mxml ]]> marginleft="10" marginright="10" > marginleft="10" marginright="10" > the following figure shows the application rendered in a web browser window: for more information about formatter components, see chapter 34, “formatting data,” in developing flex applications. Using c...

  • Page 33

    About mxml 33 the following figure shows the application rendered in a web browser window: for more information about using cascading style sheets, see chapter 20, “using styles and fonts,” in developing flex applications. Using effects an effect is a change to a component that occurs over a brief p...

  • Page 34

    34 chapter 2: using mxml dogs cats mice the following example shows an application that uses the mycombobox component as a custom tag. The value * assigns the local namespace to the current directory. Xmlns:local="*"> marginleft="10" marginright="10" > xmlns:local="*"> marginleft="10" marginright="1...

  • Page 35

    Basic mxml syntax 35 xml namespaces give you the ability to use custom tags that are not in the mxml namespace. The following example shows an application that contains a custom tag called custombox. The namespace value containers.Boxes.* indicates that an mxml component called custombox is in the c...

  • Page 36

    36 chapter 2: using mxml naming mxml files mxml filenames must adhere to the following naming conventions: • filenames must be valid actionscript identifiers, which means they must start with a letter or underscore character (_), and they can only contain letters and numbers and underscore character...

  • Page 37

    Basic mxml syntax 37 arrays of scalar values when a class has a property that takes an array as its value, you can represent the property in mxml using child tags. The component in the following example has a dataprovider property that contains an array of numbers: 94062 14850 53402 objects when a c...

  • Page 38

    38 chapter 2: using mxml if the value of the shippingaddress property is a subclass of address (such as domesticaddress), you can declare the property value as the following example shows: if the property is explicitly typed as object like the value property in the following example, you can specify...

  • Page 39

    Basic mxml syntax 39 the following example shows how you specify an anonymous object as the value of the dataprovider property: properties that contain xml data if a component contains a property that takes xml data, the value of the property is an xml fragment to which you can apply a namespace. In...

  • Page 40

    40 chapter 2: using mxml compiler tags compiler tags are tags that do not directly correspond to actionscript objects or properties. The names of the following compiler tags have just the first letter capitalized: • • • • • • the following compiler tags are in all lowercase letters: • • • • identifi...

  • Page 41

    How mxml relates to standards 41 mxml tag syntax mxml has the following syntax requirements: • the id property is not required on any tag. • the id property is not allowed on the root tag. • boolean properties only take true and false values. • the tag requires both source and destination properties...

  • Page 42

    42 chapter 2: using mxml event model standards the flex event model is a subset of document object model (dom) level 3 events, a world wide web consortium (w3c) working draft. Dom level 3 defines an event system that allows platform- and language-neutral registration of event handlers, describes eve...

  • Page 43: Chapter 3

    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 ...

  • Page 44

    44 chapter 3: using actionscript • netscape devedge online has a javascript developer central site ( http://developer.Netscape.Com/tech/javascript/index.Html ) that contains documentation and articles about actionscript. • core javascript guide. For more information about using actionscript in flex,...

  • Page 45

    About actionscript 45 • create new components in actionscript. • create new components in the flash authoring environment (swc files). Flex actionscript packages flex includes a standard set of actionscript classes and packages that define the flex components and provide helper classes. These packag...

  • Page 46

    46 chapter 3: using actionscript the following figure shows the source files used to generate a swf file that your j2ee server sends to the client: using actionscript in flex applications when you write a flex application, you use mxml to lay out the user interface of your application, and you use a...

  • Page 47

    Using actionscript in flex applications 47 flex does not parse text in a cdata construct so that you can use xml-parsed characters such as angle brackets () and ampersand (&). For example, the following script that includes a less than ( function changetext() { var x:number = 1; if (x ta1.Text = "he...

  • Page 48

    48 chapter 3: using actionscript the script within a given tag is accessible from any component in the mxml file. The tag must be located at the top level of the mxml file (within the application tag or other top-level component tag). You can define multiple script blocks in your mxml files, but you...

  • Page 49

    Using actionscript in flex applications 49 included actionscript files do not need to be in the same directory as the mxml file. However, you should organize your actionscript files in a logical directory structure. Flex detects changes in actionscript files using timestamps. If the file has changed...

  • Page 50

    50 chapter 3: using actionscript using the #include directive the #include directive is an actionscript statement that copies the contents of the specified file into your mxml file. The #include directive uses the following syntax: #include " file_name" the following example includes the myfunctions...

  • Page 51

    Using actionscript in flex applications 51 referring to external files the source attribute of the tag and the #include directive refer to files in different ways. The following are the valid paths to external files that are referenced in an tag’s source attribute: • absolute urls, such as http://ww...

  • Page 52

    52 chapter 3: using actionscript you can also use the wildcard character (*) to import all the classes in a given package. For example, the following statement imports all classes in the mypackage.Util package: import mypackage.Util.*; flex searches the actionscript classpath for imported files and ...

  • Page 53

    Creating actionscript components 53 creating actionscript components you create reusable components using actionscript, and reference these components in your flex applications as mxml tags. Components created in actionscript can contain graphical elements, define custom business logic, or extend ex...

  • Page 54

    54 chapter 3: using actionscript types of custom components you can create the following types of components in actionscript: • user-interface components user-interface components contain both processing logic and visual elements. These components usually extend the flex component hierarchy. You can...

  • Page 55

    Techniques for separating actionscript from mxml 55 click="celsius.Text=(farenheit.Text-32)/1.8;" /> one mxml document (function call in mxml tag event) the logic for the function is inside an block in the mxml document, and is called from the mxml tag’s click event, as the following code shows: fun...

  • Page 56

    56 chapter 3: using actionscript the sample3script.As actionscript file contains the following code: function calculate() { celsius.Text=(farenheit.Text-32)/1.8; } one codeless mxml document and one actionscript component the following example uses an actionscript class as a controller component. Th...

  • Page 57: Chapter 4

    57 chapter 4 architecting flex applications this chapter describes the macromedia flex development process. It describes coding practices, multitier applications, and application architecture. It also includes information about mxml url parameters, the flex development environment, and flex developm...

  • Page 58

    58 chapter 4: architecting flex applications about the flex coding process creating a useful flex application is as easy as opening your favorite text editor, typing some xml tags, saving the file, opening the file’s url in a web browser, and then repeating the process. When you develop a flex appli...

  • Page 59

    About the flex coding process 59 the first time the html page is requested, the flex application is compiled into a swf file with the specified name. If the mxml file changes, the flex compiler recompiles the mxml file the next time that the html page is requested. For more information, see chapter ...

  • Page 60

    60 chapter 4: architecting flex applications about the flex development environment you store flex server code and application files in the directory structure of a standard web application on a j2ee-compliant application server. The mxml deployment model is similar to that of javaserver pages (jsps...

  • Page 61

    About the flex coding process 61 the following table describes the flex development tools: you can get additional information about flex applications during the development process using a set of query string parameters. You append these to the end of the request string, as the following example sho...

  • Page 62

    62 chapter 4: architecting flex applications the following table describes the query string parameters that you can use to get additional information: for more information about application configuration, see chapter 39, “administering flex,” in developing flex applications. Working with a multitier...

  • Page 63

    Working with a multitier application model 63 laying out your application you declare a flex user interface by using tags that represent user-interface components. There are two general types of components: controls and containers. Controls are form elements, such as buttons, text fields, and list b...

  • Page 64

    64 chapter 4: architecting flex applications separating your data model from your view to cleanly separate the user interface, application-specific data, and data services, you can use flex data models that store data between controls and data services. This type of three-tier design is applicable t...

  • Page 65

    Working with a multitier application model 65 how you choose to access data in your flex application impacts performance. Because a flex application is cached on the browser after the first request, data access is responsible for significantly affecting performance while the application runs. Flex p...

  • Page 66

    66 chapter 4: architecting flex applications using events to connect application functionality actionscript code executes asynchronously. This means that code in a flex application continues executing without being blocked by the execution of other code. However, you need a way to deal with dependen...

  • Page 67

    Improving application start-up time and performance 67 controlling application appearance flex defines a default “look and feel” (appearance) that you can use as-is in an application, or modify to define your own specific appearance. As part of modifying the appearance, you can change some or all of...

  • Page 68

    68 chapter 4: architecting flex applications using layout containers you can improve application start-up time by using canvas containers, instead of relative layout containers, such as the form, hbox, vbox, grid, and tile containers, to perform automatic layout. Canvas containers eliminate the layo...

  • Page 69

    Improving application start-up time and performance 69 you could replace the previous layout with the following layout to achieve the same effect: improving effect performance if animations in an application do not play smoothly, background processing might be interfering with the animation. Effects...

  • Page 70

    70 chapter 4: architecting flex applications displaying multiple pop-up windows having more then six heavily populated pop-up windows open at the same time in a flex application can affect performance. The performance of flash player is limited by how quickly it can redraw obscured windows. This is ...

  • Page 71

    Architecting an application 71 the flex store application is included in the samples.War file, which you can extract into your application server. The following figure shows the catalog and shopping cart views of the flex store application: developing an object model the object model defines how the...

  • Page 72

    72 chapter 4: architecting flex applications flex store object model figure the following figure shows the object model for the flex store application and identifies each object as part of the model, view, or controller: flexstore the flexstore object is the top-level object in the flex store applic...

  • Page 73

    Architecting an application 73 thumbnailview the thumbnailview object is a visual object that displays a set of productthumbnail objects. This object must get the product data from the catalog object and pass it into productthumbnail objects that represent the individual products contained in the ca...

  • Page 74

    74 chapter 4: architecting flex applications flex store component figure the following figure shows the component type of each object in the object model of the flex store application. The data object boxes show which objects contain data object properties. Flexstore the flexstore object, the top-le...

  • Page 75

    Architecting an application 75 the following example shows the catalog object declared in the flexstore.Mxml file: {catalogws.Getlist.Result} the following example shows a product definition in the catalog.Xml file: usb watch so, you need to tell the time of course, but you also need a way to carry ...

  • Page 76

    76 chapter 4: architecting flex applications the cartview_script.As file also contains the following method definitions: • datagridchange(selecteditem) • removeitem() the cartview.Mxml component contains an tag for displaying shoppingcart items along with several other user-interface components and ...

  • Page 77

    Architecting an application 77 ... Cellrenderer="productthumbnail" width="100%" height="100%" itemwidth="120" itemheight="116" borderstyle="none" dragenabled="true" change="selecteditem=dataobject[mytile.Selectedindex]; dispatchevent({type:'change'}) "/> the component is declared in the thumbnailvie...

  • Page 78

    78 chapter 4: architecting flex applications the component contains the following property definitions in an tag: • var shoppingcart • var dataobject the shoppingcart property stores shoppingcart data. The component contains mxml tags for displaying product details. It also contains an tag for selec...

  • Page 79

    Summary of flex application features 79 summary of flex application features the following table describes the features that you are most likely to use when building flex applications: feature description user interface controls controls are user-interface components, such as button, textarea, and c...

  • Page 80

    80 chapter 4: architecting flex applications data services data service objects let you interact with server-side data sources. You can work with data sources that are accessible using soap-compliant web services, java objects, or http get or post requests. For more information, see chapter 31, “man...

  • Page 81

    Summary of flex application features 81 behaviors behaviors let you add animation or sound to applications in response to user or programmatic action. For more information, see chapter 21, “using behaviors,” in developing flex applications. Repeaters repeaters let you dynamically repeat any number o...

  • Page 82

    82 chapter 4: architecting flex applications actionscript profiling the actionscript profiler helps you identify performance problems in applications. It can show you where too many calls to a particular method might be occurring or where an object’s instantiation might be taking too long. For more ...

  • Page 83: Index

    83 index a actionscript about 43 class import 51 classpath 52 compared to ecmascript 44 compared to javascript 44 compiling 45 creating components 53 custom components 53 defining components 53 examples 54 identifiers 47 importing classes 51 importing files 48 in mxml 44, 47 including and importing ...

  • Page 84

    84 index d data binding about 13 mxml syntax 28 data formatters 31 data models about 13 in mxml 30 using 12 data services and mxml components 64 in mxml 29 development environment, flex 60 e ecmascript 44 effects about 33 changing components 33 performance tuning 69 using 33 event handlers definitio...

  • Page 85

    Index 85 g graphics, standards in mxml 42 h html, moving to flex 58 http services, standards in mxml 42 i id property 47 identifiers 40 include directive 50 including actionscript 48 j j2ee servers 9 java, standards in mxml 42 javascript, compared to ecmascript 43 l languages actionscript 43 mxml 23...

  • Page 86

    86 index product thumbnail object 72, 73 productdetail object 77 productthumbnail object 76 properties, setting in mxml 36 q query parameters 62 r relative paths 51 s script tag about 47 class import 51 external file reference 51 in mxml 48 include directive 50 including actionscript files 48 packag...