LEARNING FLEX 3 PDF
How soon can you learn Adobe Flex 3? With this book's unique hands-on approach, you will be able to tinker with examples right away, and create your own. Flex 3. Сборник рецептов · Read more Learning Flex 3 Programmation Flex 3: Applications Internet riches avec Flash ActionScript 3, MXML et Flex Builder. I have been working with Flex since its inception, and I can say with confidence that there's no better time to be learning Flex. With Flex 3, it's easier and faster.
|Language:||English, Spanish, Arabic|
|Genre:||Business & Career|
|ePub File Size:||21.50 MB|
|PDF File Size:||18.60 MB|
|Distribution:||Free* [*Register to download]|
Learning Flex 3: Getting Up to Speed with Rich Internet Applications (Paperback) . Filesize: MB. Reviews. Complete guideline for ebook enthusiasts. It really. Learning Flex 3 Getting Up To Speed With Rich Internet. Applications fsa tpa 3- final - basiconline - page 3 medical, dental & vision co-pays co-insurance. ADOBE DEVELOPER LIBRARY - Learning Flex 3 Getting Up To Speed With Rich Internet (PDF) Rich mobile applications: genesis.
With Flex Builder, development is faster still. Flash Player was totally rewritten with performance in mind, and it shows. By design, it encourages good coding practices such as code organization and class-based applications. Inheriting the idea from web design, Flex supports the separation of content and design by allowing the external styling of your applications. Free sets of libraries are available, such as the Cairngorm framework, which make implementing MVC easy.
Therefore, if you so choose, you can edit your application in your favorite text editor and compile it on the command line without paying a dime. You can paste any code or choose from the introductory pieces and see the results immediately in your browser. This means all the component code is yours for the looking and using and reusing in most cases. This helps you as a new developer learn, because you can study the code for the Flex framework.
And this also means that Flex is yours. Not only this, but the compiler is open as well, meaning every aspect of Flex is open source. Being open source, a community has grown around extending and improving Flex. Flex is yours. With Java and ColdFusion servers, you can transmit compressed, binary data over the wire to your Flex application, making data submission and retrieval much faster than is possible with typical applications.
Along with this, connecting your data to Flex has never been easier. With ColdFusion and Flex, you supply the database, and Flex Builder will build out the application and server components for you. With the robust set of user interface controls that are available right out of the box and with a wide variety of open source controls, you can create any interface you like.
With Flex Charting, you have a great set of charting and data visualization tools at your disposal. You can use bar charts, pie charts, or high-low-open-close charts. You name it. Because of the power and expressiveness of Flash and the ease of development in Flex, the number of thirdparty data visualization components is growing every day. In this way, it resembles some technologies a great deal, and it differs from others.
However, besides sharing a common scripting language, Flex is quite different from using Flash. Flash is at its core an animation and drawing editor, and development features were added later. Flex was designed from the ground up to build applications.
Although some users of Flash who have dealt only with simple scripting may find using Flex a bit overwhelming, Java or C developers will feel more at home. A Note about the Term Flash I might as well get this out of the way early.
One is the Flash IDE, the animation and development tool that started it all. Another is the content you actually see on the web, like animations, advertisements, or applications, which are. It has support for easily moving data around, built-in support for styling and skinning your applications, advanced controls for interactivity, and a ton of other features to help you.
However, C developers may find the easiest transition, because the language shares a number of commonalities. The way the scripting language, ActionScript, is used and structured is similar. It inherits the concept of packages, and its syntax is nearly identical. Java, like Flex, allows an application to be built that can be deployed either on the web or to the desktop. A lot of Java developers are learning Flex, and a lot of projects that might have been built in Java are moving to Flex.
Silverlight is also an attempt at offering true cross-platform compatibility. With Flex, whatever you build will work pretty much the same everywhere because of the Flash plug-in, which is extremely small and already installed on most computers.
The Silverlight plug-in is larger, but its presence is growing. Out-of-the-box, Silverlight offers a good number of advanced controls and layout containers, although with the open-source initiative, the number of third-party Flex components are increasing quickly.
Flex 3 Cookbook (pdf)
As such, developers in this framework will make an easy adjustment to MXML and ActionScript and will find a number of new, powerful features. Flex is open source, too! With the explosion of Web 2. Just a few years ago, if you saw a fancy transition or animation, you could be sure it was Flash.
One trick to check whether a section of a website was done in Flex is to right-click Control-click on a Mac the area in your browser. When Not to Use Flex Flex is a great technology, and many will find it solves issues that have plagued past development. In most cases, a slight increase in size is well worth the reduced development time and functionality of the Flex framework.
However, you may not want simple widgets or small applications with minimal functionality to be weighed down by the framework. Assessing Flex and Your Project Needs. Although Flex has great support for HTML, it may not be enough for some projects, and may suffer a bit of a performance lag if there is a lot of text.
However, if you plan to deploy to AIR, Flex might be a great choice. If you want animations or bits of interactivity, a great solution is to use Flash or Flex in chunks within your HTML page.
Summary Hopefully, you have a better idea of what Flex is all about. Created as a means of developing applications based on the Flash Player, it has become a key player in the world of rich applications for the web and the desktop. With a robust set of components to make development easier, and a new markup language for easy coding, Flex is a great choice for many developers. The next chapter jumps right in to the basics of using Flex and Flex Builder.
So, the goal of this book will be introducing you to developing in Flex with Flex Builder. If you prefer to use your own editor and compile via the command line or other alternatives, you can download just the Flex SDK.
I recommend you grab a copy of Flex Builder, because Adobe will give you 30 days to try it with no limits. Here are a few popular editors: Eclipse This is the open source and free editor that, coupled with an XML-editing plug-in, makes a great editor.
Now it has the ability to edit and compile Flex as well. Because this is an open platform, new options for compiling Flex are available every day, so a quick search might help you find just what you need. Introducing Flex Builder and Eclipse Once you have a copy of Flex Builder, go through the program to familiarize yourself with the most important features. More about the IDE IDE stands for integrated development environment, which is a piece of software made just for making other software.
By default it comes packaged as a Java editor, but it can handle anything you throw at it via a plug-in architecture. This way Adobe could concentrate less on building an entire IDE and more on great new features. Eclipse is most useful if you develop in multiple languages, because you can use the same software for everything at once.
Eclipse is built in Java and was inherited from an IBM project, becoming fully open sourced in Well, branding. However, if Flex is your primary interest, be good to yourself and get the stand-alone version. You can always install a copy of the stand-alone in a separate location from your other Eclipse install, and later you can install the plug-in. Flex Builder Installation Once you have a copy of Flex Builder, open the installer, and follow the onscreen instructions.
The Flex Navigator will be the place you work with your files and projects, the Outline panel will show you a tree view of your application, and the Problems panel will show you all your problems like bugs and warnings.
N ot e To view this book's companion website, go to www. There you'll find the source code for the projects you'll build as you read through the book. Point your browser to www. The Import Flex Project dialog box appears, as shown in Figure This dialog box can take a zipped project archive and import it into the Flex Builder workspace.
Then click Browse, choose the. Click Finish to finalize the import. Importing a Flex project archive. Click the arrow next to the project name in the Flex Navigator to expose the contents of the folder.
Which one is it? Double-click the SimpleFlexExample. This renders the application in Design mode, giving you a pixel-perfect preview of how the application's structured. For example, to delete the project, you could also right-click the project folder Control-click on OS X and choose Delete from the context menu.
Not to worry, though— you can always bring it back. First, select the project in the Flex Navigator select the top folder titled SimpleFlexExample, not just one of the files or folders under the top folder. The project should still be there, and you should see a directory structure similar to what was displayed in the Flex Navigator.
Well, it shows you that a project in Flex Builder is a specific thing. You can try this by going to the src folder and double-clicking the SimpleFlexExample. It might open in a text editor, or your computer may not even know what to do with the file. If you want to use it, you have to make it into a project so that Flex Builder can understand how to work with it.
A workspace is any folder on your system that you choose to keep projects in, and it also contains preference settings. You might think you already know how to import a project, but this is a little different. This will allow you to import an expanded folder of files instead of an archived project.
Click Browse, and choose the SimpleFlexExample folder you just looked at, which holds the project and supporting files. Click Finish, and Flex Builder will import the project.
A dialog box will pop up, giving you options for your project. This dialog box has three sections: Project location, Application type, and Server technology.
For me, I like to keep it simple and organized and leave the defaults. N ot e You can always change project settings later, and this dialog box is just to help you get started. In this example, you want your application to run in a web browser, so leave the default as a web application. Flex not only is a solid platform for creating programs that run in a browser but it's also the premier solution for creating applications deployed as AIR applications.
With Flex Builder, deploying a project on the web or the desktop is as simple as flipping a switch. This helps you get started connecting your Flex application to data on a server, such as a remote XML file or database. Every Flex project has, by tradition, a bin folder, an html-template folder, a libs folder, and a src folder. Table describes the purpose of each of these folders, and Figure shows the structure in the Flex Navigator panel.
Table This can be. You can set this up when creating a new project by clicking Next instead of Finish in the New Project dialog box, or you can change the settings later by right-clicking the project and choosing Properties. You can modify these default folders by going to the Flex Build Path section and changing the Main source folder and the Output folder. Available at your disposal is a nice list of visual components you can simply drag and drop to build your interface.
A Blank Slate: If the Components panel is not visible, you can get it back by going to the Window menu, which has the most common panels for Flex right at its top. This panel holds all your user interface UI components that will help you build everything. The blue background you see in Design mode is actually a visual container component called Application, which is the root of every Flex application. Specifically, a Canvas uppercase is a separate type of container component, which is different from the more generic term canvas.
I might also refer to the canvas as the stage, which is an older Flash term. The term stage makes more sense when referring to creating animations and movies with the Flash IDE, but old habits die hard. To place components in your application, you can drag them from the Components panel and drop them anywhere you like on your canvas, as shown in Figure This will remove snapping and reference lines and give you pixel-perfect control over your placement.
You might notice that if you drag it toward the edges of the stage, some reference lines appear to help you line the component up. These are known as guides or smart guides in the design world, and you might have encountered them in Photoshop or your favorite design program. These guides are a visual representation of what is called snapping, which forces the component to align with adjacent edges or other components.
When dragging a component to an edge of the stage, snapping will typically cause the component to snap 10 pixels from that edge. This can be helpful to quickly line up your components and make your application symmetrical and sleek. Exploring Common Components Exploring Common Components A component is simply any reusable piece of code which can be used as a tool to build your application. One of the more useful parts of Flex is the great set of components it offers.
And while they can be huge timesavers and require very little know-how to get up and running, mastering them can take a while. Controls Controls are visual components that are a basic part of a UI, such as buttons and text.
Think of a remote control, which has buttons to manipulate a television, or a volume control, which can change the volume on your stereo. Button This is pretty simple: It also has the ability to toggle via the toggle property, and its state can be accessed by the selected property.
CheckBox This is much like a button, but with toggling as a default behavior. The selectedItem object or selectedIndex integer property lets you get or set the selection. Image This component lets you load external assets. Use the source property to set a reference to an image.
Label This is a good solution for a simple, single-line label identifier. List This component takes a list of items and displays them, allowing selection and adding scroll bars if there are too many items for its size. RadioButton This CheckBox-like control is useful when grouped, so that selecting one deselects the others.
The easiest way to use this control is by dragging a RadioButtonGroup to the stage, which will pop up a dialog box that lets you build your set of buttons visually. It will set its size to a square that fits the text. TextArea Use a TextArea when you want a piece of text that may be larger than the available space. It will add scroll bars as needed. TextInput This is a common component for single-line input. With it, you can get or set the value of the text via the text property this applies to all text components such as Text, TextArea, and RichTextEditor.
Layout Containers Layout containers, or simply containers, are visual components used to manage the way an application is aligned or how controls are placed in relationship to one another. All Flex applications have an instance of the Application component as their root. By default, it lets you place components anywhere you like, but you can also make it line your components up vertically or horizontally.
Set the x and y of any component that you place inside to have them show up where you want. Pair it up with some FormItem components explained next , and it will stack them up vertically, with the form fields being left-aligned. FormItem This container takes a control such as a TextInput and gives it the option of having a label. Just set the label property on the FormItem container itself.
HBox This takes components and lines them up horizontally. Panel This component is a container that has a window-like look, complete with a title bar. VBox This takes components and lines them up vertically. Navigators Navigators are a hybrid type of visual component that's like a layout container and a control mixed together. Its job is to take a set of containers, making only one visible at a time. Navigators make designing a modular interface easy.
Accordion This is similar to a TabNavigator explained next , except it stacks containers vertically and animates when different sections are selected. A common usage scenario is with a group of Form containers, separating into sections what would instead be a large, scrolling form. TabNavigator It takes a set of containers, like HBoxes and Panels, and makes it so only one is visible at a time.
File folder-like tabs are created with labels corresponding to the label properties of the individual containers within, and depending on which tab is selected by the user, that specific container will be made visible, hiding the rest.
Modifying Properties Directly You can modify your button component directly in Design mode, such as change its label and set up its size. For now, you can try changing the label of your button by double-clicking the button on your stage. A text input will pop up and let you change the label. You can also drag one of the handles that appear around your component to change its size.
Everything at Your Fingertips: But in Design mode it can be your best friend. Button in its heading and displays a custom set of properties for the button. Standard View Standard view is the default view of the Flex Properties panel Figure , and it includes a custom layout for each component. This is much like how Standard view is organized into a few groups like Common, Layout, and Style.
However, in Category view you have every possible property available. Flex Properties panel Category view Alphabetical View The third and final view available in the properties panel is Alphabetical view.
This, like Category view, has all the possible properties available. However, unlike Category and Standard view, none of the properties are organized in Alphabetical View. This view is great when you know the name or at least the first few letters of the property you want to modify.
Feel free to drag a few components onto the stage and move them around. Modify some properties such as label, width, and color to get a feel for how this panel works. N ot e Flex Builder for Windows offers a quick way to get to a property when using Alphabetical view.
Simply start typing the first few letters of the property, and the selection will scroll to the first match. This also works for other panels in Flex Builder that have a large list of items.
Common Properties All Flex visual components the ones you can manipulate in Design mode inherit from a base component called UIComponent. Because buttons, text inputs, and containers extend this base component, meaning they inherit all of its functionality and add their own, they get all that stuff for free.
Take the width property of a button control, for example. You can likely guess that this property changes the width of this component.
Because width is one of those properties that is shared among visual components, understanding how to use it with a button will help you to use it with other components as well.
Or an SDK? You might have heard the term in the context of web services like the Yahoo! Search API, which allows you to query the Yahoo!
But API applies equally to any way you can access or modify some program or language. You may also hear the term SDK, which is short for software development kit. This typically refers to a set of components or tools to aid or enable development for a particular platform. When downloading Flex Builder, you are downloading the development environment along with the Flex SDK, which is the library of components, the compilation tool, and a few other tools that make development in Flex possible.
Search SDK. Search results via Flex, and this is part of a family of tools for using Yahoo! Following is a list of the most commonly used properties for the most common components, along with an example of each: Even better is when you give them descriptive names based on what they do in the application for example, submitButton and refreshButton.
Similar to x, except this property controls vertical position instead of horizontal position. Setting visible to false will make an item disappear from view, but it will still take up space. For instance, if I have four buttons inside an HBox container, aligning all four horizontally, and I make the second button invisible, the two buttons to its right and the one to its left will remain in the same place, because the invisible button still makes room for itself see Figure CheckBox components use them in a similar way.
Containers use them as well. For instance, the FormItem container will display a label, and can be used as a description of a field when paired with another control, such as a TextInput, in a Form see Figure For other layout containers, the label will display when paired with navigation components. N ot e Note that there is also a control called Label which is used to place single lines of text throughout your application. Rather, it uses a property called text.
A checkbox and button with their own labels text This property changes the text displayed in text controls such as TextInput, TextArea, and Label see Figure Two controls that both use the text property alpha alpha is short for alpha channel, and it is a number from 0 to 1 that con- trols how transparent an item is. If you want what is behind a component to show through, you set an alpha value to less than 1.
In the case of a list control, setting its alpha to. Or is it halfway opaque? Typically, this will cause the component to gray out and to not respond to mouse actions as shown in Figure Two Panels with the same contents; one is enabled, the other disabled Chapter 3, Using Design Mode 33 Modifying Properties Directly source You can use this property for Image controls and other controls that point to an external file. You can also use it with the ProgressBar control to determine the progress of that Image control.
For instance, two usages of this property would be for what an Image control should display, and for what a ProgressBar should watch. Plus, because these components were designed well and with a lot of commonalities, most of the properties will seem natural.
You can select each one individually and press the Delete key, or you can click and drag on the stage to select components and press the Delete key. Drag a Panel to the stage. Give the Panel a title by double-clicking it or entering it in the properties panel.
Drag a Label component into the Panel. Because a Panel is a container, it can hold items just like the main Application component can which is also a container. So, drop the Label in this Panel, and place it near the top of the Panel. Give the Label the text My name is: You can apply bold by selecting the label and clicking the Bold icon in the Flex Properties panel in the Style section.
Drop a TextInput control under this Label. Drop a CheckBox control under the TextInput. You modify its label the same way as most components, by double-clicking it on the stage. There you are—you have created the user interface for your first Flex application. Because Flex supports UTF-8, you can insert characters from most languages without hassle.
You can do this in both Source and Design mode, so you can make a Flex application in any language. While this will increase file size, it will ensure that characters display just as you envisioned them. I usually leave this check box turned on, because it saves time and effort. Save and Launch dialog box You should see your application in a browser window see Figure The goal of any developer is to use the right tools for the job, and Design mode is often the right tool.
Every Flex application will begin with a root tag. For Flex applications that are deployed to the web, that root tag is called Application. For AIR applications, the root tag is called WindowedApplication and is pretty much the same, with just a few desktop-specific features. The Panel tag within the Application tag is also a container, and it has its default layout set to absolute as well.
The Label, TextInput, and CheckBox tags also have their coordinates set, but these coordinates are relative to the panel container in which they appear. Of course, these tags have other attributes as well. Take a look at the Panel, which has its title set via the title attribute.
In addition, the Label uses the text property to set its text and has a style property called fontWeight to make it bold. Finally, the CheckBox uses a property called label to set its label. Try editing the code and changing some of the properties. Right below the CheckBox but still within the Panel tag, add a button component by typing. Switching back to Design mode, you might notice that the button is placed on top of everything else and probably not where you envisioned it below the CheckBox.
Now, you have the choice of guessing the coordinates and typing them in Source mode or moving the button in Design mode. Actually, you have another option. You guessed it: If you set the paddingLeft property of the panel to 5, you will create a pleasing amount of space between the left edge of the panel and its contents. Titles, Labels, and Text You might have noticed that the Panel, TextInput, and CheckBox controls each have a different property for what essentially sets their label.
Why not just have a property called label? The panel also has a property called status that displays some text in the upper-right corner. X and Why?: You might remember that x means placement along a horizontal axis, and y refers to placement along a vertical axis. And you might have noticed something different about how x,y coordinates work in Flash. A Cartesian coordinate system, shown in Figure , will have an origin point at 0,0 and x and y values that increase as you go toward the top or toward the right.
In Flash, the origin is at the top left of the stage, and the x and y values increase as you go toward the bottom of the screen or toward the right. So, in essence, the y values are backward in Flash. This autocompletion is one of its most useful and powerful features. Typos and misspellings can wreck your project, and accepting a little help can go a long way toward preventing errors and frustration.
When you begin to type an attribute, Flex Builder pops up suggestions, and the most likely one the one at the top of the list is already selected see Figure , so pressing Enter inserts the complete text for you. This autocompletion is useful not only for attributes but also for tags. I just remember wondering what this fancy language was that I kept hearing about. That was the way it represented data, just by structuring via tags created with angle brackets.
XML was purely syntax and structure. If you wanted to represent a book in XML, you could create your own tags like , , and and then add information to a document using those tags. The markup part means it can include text as well as extra information about that text, via tags. In the case of HTML, you can use tags to provide text as well as information such as formatting for that text. As an example, early text-only word processors required writers to use tags equivalent to and to add italic and bold formatting respectively to a document.
These tags would be converted to the proper format when printing, and this same type of markup is used in HTML today. More importantly for a Flex application, XML shows hierarchy and structure. So, lucky for us Flex developers, we can describe an application by simply writing it. All that is opened must be closed: An important fact to remember about XML is that each tag must be complete.
That is to say, if a tag is opened, it has to be closed at some point. This is considered an open tag. You can ensure all tags are closed in a couple ways. The first is by creating an end tag for each beginning tag. So if you create the tag , you must eventually close it with the end tag. So is equivalent to. Case matters: XML is case-sensitive.
And that means and are different as well. Declarations are optional, but polite: The declaration looks like this: The Anatomy of a Tag A tag can contain information in two ways, either by content or by attributes.
Content is simply the text that exists between two tags, and attributes are text inside the opening tag only, with their information enclosed in quotes. Check out the following XML: In this example, is the root tag, and the title and author of that tag are placed as attributes of that book. The code also has two child tags representing two chapters.
Compare the previous code to the following, which contains the same information but arranged in a different way: The first uses attributes, and the second uses nested tags. So, attributes can be useful as a more compact way to represent the same information as nested tags—and more compact means more readable.
Compare this code to the same example in MXML. But did you know you could do the following? Learning Flex Those two code examples are essentially the same, one using an attribute to add the text property and the other using a nested tag. Consider the case of the text property. If the text were a whole paragraph, it would look strange to place it inline as an attribute.
Even more important is when a component expects structured data. You might need to set the data provider of a list control, which would be an array of items, not just a single line of text.
Professional flex 3 pdf - WordPress.com
The same is true for other properties that accept an array of items, such as the columns property of a DataGrid. The columns property lets you set properties on individual columns, and you can see an example of this by dragging a DataGrid control to your application in Design mode.
Take a look at the word itself: A namespace is a designation of what a name for something is in regard to its placement in some type of structure. Say, for the sake of this example, that your name is John Smith. Of course, lots of other John Smiths exist, so how can you distinguish yourself? So while attempting to make a property into a nested tag instead of an attribute, you might be tempted to write the following incorrect code for assigning text to a Label: Some Text However, because the text property is its own tag, it must use the namespace mx: Roman numeral attached to his name to differentiate himself.
So, in terms of XML namespaces, you could refer to yourself as So, namespaces help distinguish different components which may have the same name by their location. For now just accept that the Flex components are in the mx namespace because the source for these components is located in a special grouping of folders. You might then refer to your button in MXML as something like to differentiate it from.
Why not just make mx the default namespace and omit all the extra mx: Note the part that says xmlns: If you try to point your browser to http: This way, if you eventually create your own identifier, you have the option of using your web address, which makes it unlikely another person will have the same identifier.
By default, the namespace for Flex components is set up to be mx, but you can change it. For instance, instead of mx, you could use the name flex by doing the following: N ot e Notice how the Application tag, which declares this namespace, is also affected by it. Now, if you want to be able to use simply , change the namespace to an empty name: Remember all those grammar exercises in school?
Wait, that was an interrogative sentence. Oh, but that one was declarative. Find me an imperative sentence. There it was! Well, you do have to type it, unless you have a really good speech-to-text program. So instead of building your UI in scripts and dealing with procedures, you just place a Button tag where you want a button to exist, and Flex takes care of implementing it.
By comparison, ActionScript, the scripting language for Flex, is imperative. That means you create commands that you want the computer to follow. Panel; import mx. Button; var panel: Computer, add child! Am I talking to myself? Not only that, but now the code is super easy to modify. Say you decided that the button should be outside the panel instead of inside it.
You know how to work with Design mode as well as with Source mode and got your feet wet writing simple code. Next up on the agenda: To do that, the TextInput will need a name. Summary 47 Inline ActionScript Naming Conventions One popular naming convention, and the one I use for components, is appending the type of component to the id. For example, the TextInput in the HelloWorld application is used for inputting your name.
So, you could call it fullName. If this technique results in too many letters for you, you can instead append the initials of the component type, calling it fullNameTI.
Typically in an application, the program responds to certain events that occur, such as clicking or dragging the mouse, or typing with the keyboard more on this topic later. You can respond to these events by telling a component to wait for a specific event and then do something in response. A typical scenario is a person clicking a button and that button changing the property of another component. For that, you can use inline ActionScript: All you had to do was add a click attribute to the Button and within that attribute place ActionScript.
Dot Notation Previously, you added attributes to a tag to change the properties of a component. This same behavior is available in ActionScript as well, through the use of dot notation. You do this by typing the id of the component, fullNameTextInput, followed by a period and then immediately followed by the name of the property you want to modify: The same would work for a Button called myButton. So, to change the text of a TextInput control, you could use the following ActionScript: Technically, there is no difference.
In ActionScript, you can set a property any time you wish, or delay an assignment until an event occurs, such as when someone clicks a button. You might have noticed the use of single ' quotes instead of double " quotes inside the click attribute. The single quotes appear simply because double quotes would confuse the compiler as to when the click attribute was finished.
The funny thing is, you can actually switch the single and double quotes, just as long as whatever begins the quote also ends it: Now what if you wanted to do two or more things at once, all when someone clicks a button? Say you want to automatically select a CheckBox when someone clicks the Button. All that takes is a little more code. Be sure to first give the CheckBox an id of expertCheckBox and then modify your code to include a little more in the click attribute: This is also a property assignment and is done the same way, using the equal sign.
Notice that a semicolon ; separates the two assignments. The semicolon tells the compiler you have two different statements occurring on the same line. Chapter 5, Learning the Basics of Scripting 49 Functions As you can see, however, the code is starting to get a little messier. If you had three or four assignments, the click attribute would get fairly long. Functions A function is a piece of code that you create for reusability. You place some ActionScript code within a function, give the function a name, and when you want to run that code, you reference that function.
To do so, you need to move your code from inside the tag to another location. N ot e In the following examples that show ActionScript, all the code would be placed inside an tag. Just place the insertion point after your tag, begin typing How to Create a Function To create your function, use the keyword function followed by the name you want to give it, followed by a couple of parentheses: These braces act as containers for the function—everything in them is considered part of the function.
So, add the braces, and place the code that you had in the click attribute inside them: All you have to do is call that function tell it to run , and this code will execute. How do you do that? You call the function by using its name followed by the parentheses: Now when the button is clicked, both the TextInput and CheckBox selection will be set.
These set the access of the function, or the ability for the function to be seen and used. By default, the access is set to internal, which means the function can be used by the current application as well as any components within its package. The keyword private would make the function accessible only in that Application.
Later on, you can always change the access to something else, if you want to be more restrictive. Why would you ever want to restrict access? You might have functions in your code that apply only to the current application—or component, if you start creating your own.
N ot e Actually, access applies not only to functions, but to any variable declaration. Function Parameters What about those parentheses? You put them there because they help designate something as a function.
Flex 3 Cookbook (pdf)
But the parentheses are more than just aesthetics—you can use them to pass information, called parameters, into the function.
This, in essence, gives the function dynamic information at the time of its call. You can do that by using a parameter for the function: You give txt a value when you call the function by passing a value in the parentheses: You can also pass multiple parameters to a function: A useful feature is setting defaults for the parameters, which lets you decide whether to pass in values when you call the function.
This topic is going to be an easy one, because basically functions are methods. When talking about a method, I really mean a function that is part of a class. You created a function called setForm in your code.
What happens is that 52 Learning Flex 3 Data Types the setForm function becomes a method of your main application. Another is addChild , which places instances of components on the display list. Another fun one is setFocus , which is available on all controls and makes that control the active control.
Now you'll use this function to make your little application more usable. Add the following attribute to your Application tag: Note that there may be issues with the focus of Flash Player, meaning you may have to click somewhere within the application to actually set the focus to Flash Player and not the browser.
Variables A variable is a way to store information that you can use in your applications. For example, you may have an application that stores the name of a user, and you can store this name in a variable. You create a variable in ActionScript by using the var statement followed by the name of the variable. For instance, the text property of a TextInput was declared as a variable within the source code of the TextInput component.
Data Types Typing can mean more than just pressing keys on the keyboard. In programming, typing refers to a way to designate the kind of values a variable can have. The intent is to force the developer to think about what kind of information is needed. It also helps the program know the type of information, which results in much better performance.
Chapter 5, Learning the Basics of Scripting 53 Data Types Another great reason for typing is that each data type has certain properties and methods available to help you.
Can be one character or many. Can be in the range from 0 to 4,,, Can be in the range from -2,,, to 2,,, Valid values are true and false. The only value it can have is undefined. But which numeric value? Well, it would be a positive whole number, so looking at Table , you can see that the type uint would be a good choice, but Number would work as well.
When declaring a variable or function, you can set its type pretty easily. You use a colon: The same applies to a number. The following code creates a variable called pi and types it as a Number: Functions have the ability to return values, and the value they return can be typed. Just place a colon and the return type after the parentheses, and return a value using the return keyword.
This next function returns the sum of 2 and 2: Because you declared variables as parameters, you can type them, and you can type the function as well: N ot e You can determine the type of a property by hovering over the property with the mouse. After a moment, a tooltip will display with more information about that property, including the data type. Objects Everything is an object.
An object is, in a way, a container for anything else. It can hold a piece of text or some numbers, it can have logic that manipulates pieces of data, and it can even hold other objects.
It can be thought of as something that has both state and behavior, meaning it can have variables state and methods that work with those variables behavior.
Your application is an object. The Button inside your application is also an object, and any variables you create are objects, such as the properties of a Button. And so on. Chapter 5, Learning the Basics of Scripting 55 Classes var car: Classes are a better way to deal with such things. Classes If everything is an object, then what is a class? A class is like a blueprint for the kinds of information and properties an object will have, and an object is an instance of a class. When you created a car object, you gave it a few properties such as color and type.
But if you wanted to get organized, you could create a Car class, setting it up with all the properties you expected to use. It also would give you code completion in Flex Builder. String; var color: Boolean; var driver: This means a Person class exists, such as this: String; var age: You even know now that the driver property is a Person. Now when you create new instances of cars or people, you know what properties to expect and what type they should be.
9th International Conference, ICBL , Beijing, China, July , , Proceedings
Create a Car and a Person again, taking advantage of the new classes: For instance, the Button is actually from a Button class, and when you use it in ActionScript or MXML, you know its properties are always going to be the same. And while you may never need to create your own classes in ActionScript, it helps to be familiar with the concept, because it will come up frequently as you program with Flex. What is the difference between the two?
N ot e To compile means to convert, or translate, source code into another language. So a compiler is something that compiles source code. To build means to assemble all the necessary pieces of a Flex project and compile them. You can think of it like this: In this regard, you could create a Flex application using an ActionScript project, and use only ActionScript.
However, because of the benefits of using a markup language, MXML can be a more intuitive way to create applications. Tags Are Classes A tag placed declaratively in a Flex application is turned into the appropriate code in ActionScript when it is compiled. This could get compiled into the equivalent ActionScript code: Button; var myButton: The choice is yours, depending on the needs of your application.
This is the way to tell the compiler you want to ready a certain component or group of components for use. The second line declares a Button called myButton. This is equivalent to using the id attribute in MXML. This way, you can reference this particular Button later in your code. Notice that a bit more is going on in the second line. For instance, the colon followed by the word Button is a typing declaration, saying that this myButton variable should be a Button.
Because a variable can be anything, this is the way to tell ActionScript you want a Button here, not a Panel or a piece of text or something else.
If you use code completion when typing Button, or any other class, Flex will import it for you by writing the necessary import statement. This same line contains an equal sign and the statement new Button ; at the end of the line. For fundamental data types, you can assign a variable directly and do not need to use a keyword, such as a String var name: But you can use this syntax if you like: You may have noticed that, under the Category view of this panel, there is a section called Styles.
Styles are special properties of Flex components that are used to control the look and feel of the component. While they can be considered properties, they are not directly accessible in ActionScript using dot notation. In MXML, you can easily set styles using attributes. However, because of the way that styles are implemented in Flex, there is a different syntax for accessing style properties in ActionScript, using the methods getStyle and setStyle.
For example, the cornerRadius style property sets the roundness of a Button control, and you could set this style with the following MXML: Being a style property, you cannot access it directly. Therefore, the following code is incorrect: This method takes two parameters. The first is the name of the style property, and the second is the value you want to assign it to.
For more details on how to learn all the properties, style properties, and available events for a particular component, see the sidebar "Reading Flex Documentation" in the next chapter. The method getStyle allows you to get the value of a style property. To get the cornerRadius of myButton, for example, you could use the following ActionScript, which stores the value in a variable called roundness: However, while these listeners are set via an attribute in MXML, they are not actually properties of the component.
Instead, they are set via a special method. Within this field, add the compiler argument —keep, separating it from any other compiler arguments with a space. This will save the ActionScript code the compiler creates from MXML, and place it in a folder called generated that you can look through. This method takes two parameters: So, now you have yet another reason to be familiar with functions. Don't include parentheses following the function name. For example this code is incorrect: Think of flex items as primarily laying out either in horizontal rows or vertical columns.
You can change that and allow the items to wrap as needed with this property. There are some visual demos of flex-wrap here. The default value is row nowrap. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.
Note that visually the spaces aren't equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.
Think of it as the justify-content version for the cross-axis perpendicular to the main-axis. Note: this property has no effect when there is only one line of flex items.
However, the order property controls the order in which they appear in the flex container. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up. If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others or it will try to, at least.
This defines the ability for a flex item to shrink if necessary. It can be a length e. The auto keyword means "look at my width or height property" which was temporarily done by the main-size keyword until deprecated.
The content keyword means "size it based on the item's content" - this keyword isn't well supported yet, so it's hard to test and harder to know what its brethren max-content, min-content, and fit-content do.
If set to auto, the extra space is distributed based on its flex-grow value. See this graphic. The second and third parameters flex-shrink and flex-basis are optional. Default is 0 1 auto. The short hand sets the other values intelligently. Please see the align-items explanation to understand the available values. Examples Let's start with a very very simple example, solving an almost daily problem: perfect centering.
It couldn't be any simpler if you use flexbox. So setting a vertical margin of auto will make the item perfectly centered in both axis.TextArea Use a TextArea when you want a piece of text that may be larger than the available space. The way the scripting language, ActionScript, is used and structured is similar.
About the book With this book, you learn Flex by osmosis. But if you wanted to get organized, you could create a Car class, setting it up with all the properties you expected to use.
The author will show you how Cairngorm can be used to architect larger Flex applications, including tips to use Cairngorm in a less verbose way with HTTPService to talk to Rails. Perhaps the best way to handle this is to write in the new and final syntax and run your CSS through Autoprefixer , which handles the fallbacks very well.