book

Flex 4 Cookbook

by Rich Tretola, Marco Casario, Todd Anderson, Joshua Noble, Garth Braithwaite

May 2010

Intermediate to advanced

760 pages

19h 26m

English

O'Reilly Media, Inc.

Read now

Unlock full access

A Note Regarding Supplemental Files
Preface
Who This Book Is ForWho This Book Is Not ForHow This Book Is OrganizedConventions Used in This BookUsing Code ExamplesHow to Use This BookO’Reilly CookbooksSafari® Books OnlineHow to Contact UsAcknowledgments
1. Flex and ActionScript Basics
1.1. Create a Flex Project in Flash Builder1.2. Create a Flex Library Project in Flash Builder1.3. Set Compiler Options in Flash Builder1.4. Compile a Flex Project Without Flash Builder1.5. Add an Event Listener in MXML1.6. Create Typed Vectors1.7. Use Event Bubbling1.8. Use Custom Events and Dispatch Data with Events1.9. Listen for a Keyboard Event1.10. Define Optional Parameters for Methods1.11. Define and Implement an Interface1.12. Access the Parent of a Flex Component
2. Containers
2.1. Position Children Within a Container2.2. Dynamically Add and Remove Children2.3. Reorder Child Elements of a Container2.4. Display Children Using Data Items2.5. Use a Custom Item Renderer in a DataGroup2.6. Use Multiple Item Renderers in a DataGroup2.7. Enable Scrolling in a Container2.8. Scale Children of a Container2.9. Apply Skins to a Container2.10. Set the Background Image of a BorderContainer2.11. Use a Control Bar2.12. Modify Layout of Content Elements in a Panel2.13. Track Mouse Position Within a Container2.14. Drag and Drop Between Visual Containers2.15. Drag and Drop Between Data Containers2.16. Add a Spark Layout Container to a MX Navigation Container2.17. Create a Spark-Based ViewStack
3. Layout
3.1. Position Children Linearly3.2. Switch Layout Management at Runtime3.3. Align and Size Children Within a Layout3.4. Lay Out Children Using Rows and Columns3.5. Size Children Uniformly3.6. Lazily Create and Recycle Children3.7. Create a Custom Layout3.8. Measure and Alter the Container Size3.9. Dynamically Change the Child Depth in the Layout3.10. Use Matrix3D to Apply Transformations Within a Layout3.11. Use TransformOffsets to Apply Transformations Within a Layout3.12. Create a Custom 3D Layout3.13. Programmatically Scroll Within a Layout3.14. Determine the Visibility of Elements in a Sequence-Based Layout
4. Graphics
4.1. Size and Position a Graphic Element4.2. Use Path to Draw a Shape with Stroke and Fill4.3. Display Text in a Graphic Element4.4. Display Bitmap Data in a Graphic Element4.5. Display Gradient Text4.6. Apply Bitmap Data to a Graphic Element as a Mask4.7. Create a Custom Shape Element4.8. Create a Custom Standalone Graphic Component4.9. Define and Reuse Graphic Symbols
5. Components
5.1. Handle a Button’s Click Event5.2. Create a Button Bar5.3. Load a External SWF5.4. Use a Calendar Date Input5.5. Create Event Handlers for Menu-Based Controls5.6. Display an Alert in an Application5.7. Display a Custom Pop Up in a Custom Component5.8. Detect a Mouse Click Outside a Pop Up to Close It5.9. Using s:Scroller to Create a Scrollable Container5.10. Handle focusIn and focusOut Events5.11. Open a DropDownList with a Keyboard Shortcut5.12. Grouping Radio Buttons5.13. Submit a Flex Form to a Server-Side Script
6. Skinning and Styles
6.1. Create a Skin for s:Button6.2. Apply a Repeating Background Image to an Application6.3. Create a Skin for s:ButtonBar and s:ButtonBarButton6.4. Skin an s:DropDownList6.5. Skin a Spark Container6.6. Change the Appearance of Components Using Styles6.7. Apply Skins and Properties to Spark and MX Components with CSS6.8. Create a Button Component with an Icon6.9. Add Custom Style Properties6.10. Partially Embed Fonts with CSS
7. Text and TextFlows
7.1. Create a TextFlow Object7.2. Generate a TextFlow Object from Another Source7.3. Create Links in a TextFlow7.4. Add Graphic Elements to a TextFlow7.5. Bind a Value to a s:TextInput Control7.6. Create a Custom Selection Style7.7. Style Links Within a TextFlow7.8. Locate Elements Within a TextFlow7.9. Determine All Fonts Installed on a User’s Computer7.10. Display Vertical Text in a TextArea7.11. Set the Selection in a TextArea7.12. Control the Appearance of the Selected Text7.13. Copy a Character as a Bitmap7.14. Create Linked Containers in a TextFlow7.15. Use a Custom Format Resolver7.16. Skin the TextArea Control7.17. Create Multiple Text Columns7.18. Highlight the Last Character in a TextFlow
8. Lists and ItemRenderers
8.1. Create an Item Renderer for a Spark List8.2. Create an Editable List8.3. Scroll to an Item in a Spark List8.4. Change the Layout of a Spark List8.5. Create a Nested List8.6. Set XML Data for a Spark List8.7. Allow Only Certain Items in a Spark List to Be Selectable8.8. Format and Validate Data Added in a Spark List Item Editor8.9. Create a Right-Click Menu for a Spark List8.10. Enable Dragging in a Spark List8.11. Customize the Drop Indicator of a Spark List8.12. Display Asynchronously Loaded Data in a Spark List

9. DataGrid
9.1. Create Custom Columns for a DataGrid9.2. Specify Sort Functions for DataGrid Columns9.3. Filter Items in a DataGrid9.4. Create Custom Headers for a DataGrid9.5. Handle Events from a DataGrid9.6. Enable Drag and Drop in a DataGrid9.7. Edit Items in a DataGrid9.8. Search Within a DataGrid and Autoscroll to the Match9.9. Generate a Summary for Flat Data by Using a Grouping Collection9.10. Create an Async Refresh for a Grouping Collection
10. Video
10.1. Create a Basic Video Player10.2. Display Video Playback Progress10.3. Create a Skinned Video Player10.4. Display Streaming Video10.5. Display the Bytes Loaded of a Video10.6. Create a Basic Video Player Using the Open Source Media Framework10.7. Access and Display Cue Points Embedded in a Video File10.8. Create a Wrapper for the Open Source Media Framework10.9. Display Captions with the Open Source Media Framework
11. Animations and Effects
11.1. Dynamically Set a Filter for a Component11.2. Call an Animation in MXML and in ActionScript11.3. Create Show and Hide Effects for a Component11.4. Define Keyframes for an Animation11.5. Create Parallel Series or Sequences of Effects11.6. Pause, Reverse, and Restart an Effect11.7. Set Effects for Adding a Component to or Removing One from a Parent Component11.8. Create Custom Animation Effects11.9. Use the DisplacementMapFilter Filter in a Flex Effect11.10. Use the Convolution Filter to Create an Animation11.11. Use Pixel Bender to Create a Transition
12. Collections
12.1. Add, Remove, or Retrieve Data from an ArrayList12.2. Retrieve and Sort Data from an ArrayCollection12.3. Filter an ArrayCollection12.4. Determine When an Item Within an ArrayCollection Is Modified12.5. Create a GroupingCollection12.6. Create a Hierarchical Data Provider for a Control12.7. Navigate a Collection Object and Save Your Position12.8. Create a HierarchicalViewCollection Object12.9. Filter and Sort an XMLListCollection12.10. Sort on Multiple Fields in a Collection12.11. Sort on Dates in a Collection12.12. Create a Deep Copy of an ArrayCollection12.13. Use Data Objects with Unique IDs
13. Data Binding
13.1. Bind to a Property13.2. Bind to a Function13.3. Create a Bidirectional Binding13.4. Bind to Properties by Using ActionScript13.5. Use Bindable Property Chains13.6. Bind to Properties on a XML Source by Using E4X13.7. Create Customized Bindable Properties13.8. Bind to a Generic Object13.9. Bind to Properties on a Dynamic Class
14. Validation, Formatting, and Regular Expressions
14.1. Use Validators and Formatters with TextInput Controls14.2. Create a Custom Formatter14.3. Use Regular Expressions to Create an International Zip Code Validator14.4. Validate Combo Boxes and Groups of Radio Buttons14.5. Show Validation Errors by Using ToolTips in a Form14.6. Use Regular Expressions for Locating Email Addresses14.7. Use Regular Expressions for Matching Credit Card Numbers14.8. Use Regular Expressions for Validating ISBNs14.9. Create Regular Expressions by Using Explicit Character Classes14.10. Use Character Types in Regular Expressions14.11. Match Valid IP Addresses by Using Subexpressions14.12. Use Regular Expressions for Different Types of Matches14.13. Match Ends or Beginnings of Lines with Regular Expressions14.14. Use Back-References14.15. Use a Look-Ahead or Look-Behind
15. Working with Services and Server-Side Communication
15.1. Configure a HTTPService15.2. Use RESTful Communication Between Flex Applications15.3. Communicate with a Service That Returns JSON-Formatted Data15.4. Configure Services for an Application Using BlazeDS15.5. Configure and Connect to a RemoteObject15.6. Use Publish/Subscribe Messaging for Chat Applications15.7. Use the IExternalizable Interface for Custom Serialization15.8. Track Results from Multiple Simultaneous Service Calls15.9. Register a Server-Side Data Type Within a Flex Application15.10. Communicate with a WebService15.11. Add a SOAP Header to a Request to a WebService15.12. Parse a SOAP Response from a WebService15.13. Communicate Securely with AMF by Using SecureAMFChannel15.14. Send and Receive Binary Data via a Binary Socket15.15. Communicate Using a XMLSocket15.16. Navigate a XML Document in E4X15.17. Use Regular Expressions in E4X Queries15.18. Add a XMLList to a XML Object15.19. Handle Namespaces in XML Returned by a Service15.20. Encode an ActionScript Data Object as XML15.21. Decode XML from a Web Service into Strongly Typed Objects
16. Browser Communication
16.1. Link to an External URL16.2. Work with FlashVars16.3. Invoke JavaScript Functions from Flex16.4. Invoke ActionScript Functions from JavaScript16.5. Change the HTML Page Title via BrowserManager16.6. Parse the URL via BrowserManager16.7. Deep-Link to Data via BrowserManager16.8. Deep-Link Containers via BrowserManager
17. Modules and Runtime Shared Libraries
17.1. Create a Runtime Shared Library17.2. Use Cross-Domain Runtime Shared Libraries17.3. Optimize a Runtime Shared Library17.4. Create a MXML-Based Module17.5. Create an ActionScript-Based Module17.6. Use ModuleLoader to Load Modules17.7. Use ModuleManager to Load Modules17.8. Load Modules from Different Servers17.9. Communicate with a Module17.10. Use Query Strings to Pass Data to Modules17.11. Use Linker Reports to Optimize Modules
18. AIR Basics
18.1. Create and Run an AIR Application with Flash Builder 418.2. Sign and Export an AIR Application18.3. Sign an AIR File with a Trusted Certificate18.4. Targeting a Specific Version of AIR18.5. Set the Application ID18.6. Set the Application Name and Filename18.7. Set the Application Version18.8. Edit the Application Description and Copyright Information18.9. Edit the Initial Window Settings18.10. Set the Installation Folder for an Application18.11. Set the Default Programs Menu Folder18.12. Set a Custom Application Icon18.13. Allow an AIR Application to Interact with the Browser18.14. Set the Application to Handle All Updates18.15. Determine the Application Version at Runtime18.16. Create Multilingual AIR Installations18.17. Create Applications with Update Capabilities18.18. Create Applications with Update Capabilities with a Custom Interface18.19. Package an Application in a Native Installer (.exe, .dmg, .rpm)18.20. Include Native Code Within Your AIR Application
19. Working with Data in AIR
19.1. Safeguard Files with the Encrypted Local Store19.2. Migrate Serialization Changes19.3. Create an In-Memory Database19.4. Encrypt a Database with a Password19.5. Use Parameters in Queries19.6. Include a Database in an Application19.7. Store Simple Relationships with an Object Relational Mapping
20. Operating System Integration with AIR
20.1. Close All Open Windows at Once20.2. Add a Drop Shadow for a Custom Chrome Window20.3. Use Deferred Rendering with Clipboard Data20.4. Create Custom Clipboard Data Formats20.5. Assign Keyboard Shortcuts to Menu Items20.6. Notify the User Through the Dock (Mac) and the Taskbar (Windows)20.7. Register Custom File Types20.8. Open a File with Its Default Application20.9. Check for Mounted and Unmounted Drives20.10. Obtain a List of Available External Drives20.11. Tell the Operating System That a File Has Been Downloaded from the Web20.12. Deploy an AIR Application as a Native Installer20.13. Create a HTTP Proxy Using the ServerSocket Class
21. Charting
21.1. Create a Chart21.2. Add Effects to Charts21.3. Select Regions of a Chart21.4. Format Tick Marks for a Chart21.5. Create a Custom Label for a Chart21.6. Create a Drill-Down Effect for a Column Chart21.7. Skin Chart Items21.8. Use ActionScript to Dynamically Add Columns to and Remove Columns from a Chart21.9. Overlap Multiple ChartSeries21.10. Drag and Drop Items in a Chart21.11. Create an Editable Line Chart
22. Unit Testing with FlexUnit
22.1. Create an Application That Uses the FlexUnit Framework22.2. Create an Application to Run FlexUnit Tests22.3. Create a FlexUnit Test Case22.4. Run Code Before and After Every Test22.5. Share Test Data Between Test Cases22.6. Handle Events in a Test Case22.7. Test Visual Components with FlexUnit22.8. Create Mock Objects for Testing22.9. Use Complex Assertions in a Test Case
23. Compiling, Debugging, and Deploying
23.1. Use trace Statements Without Flash Builder23.2. Use the Component Compiler23.3. Install the Flex Ant Tasks23.4. Use mxmlc and Ant to Compile Flex Applications23.5. Use Ant to Compile and Deploy Flex Applications That Use RSLs23.6. Use Rake to Compile Flex Applications23.7. Create and Monitor Expressions in the Flash Builder Debugger23.8. Install the Ant View in the Standalone Version of Flash Builder23.9. Use ASDoc and Ant to Generate Documentation23.10. Use Express Install for Your Application23.11. Use Memory Profiling with Flash Builder to View Memory Snapshots23.12. Check the Performance of Specific Methods
24. Internationalization, Accessibility, and Printing
24.1. Add an International Character Set to an Application24.2. Use a Resource Bundle to Localize an Application24.3. Use the ResourceManager for Localization24.4. Use Resource Modules for Localization24.5. Support Input Method Editor (IME) Devices24.6. Detect a Screen Reader24.7. Create a Tabbing Reading Order for Accessibility24.8. Print Selected Items in an Application24.9. Format Application Content for Printing24.10. Control Printing of Unknown-Length Content over Multiple Pages24.11. Add a Header and a Footer When Printing
Index
About the Authors
Colophon
Copyright

Content preview from Flex 4 Cookbook

Chapter 6. Skinning and Styles

The previous chapter discussed Flex Framework components that encourage standard and efficient development. However, when using a framework of components you often lose a certain degree of visual customization, and the resulting applications have a “cookie-cutter” appearance. To offset this side effect, the Flex 4 Spark components are equipped with a new and improved skinning architecture.

In Flex 4, a skin is a class, usually defined in MXML, that extends s:Skin and determines the visual appearance of a Spark component. The Spark component that is being skinned, also referred to as the host component, can declare and access parts in the Skin class. This new skinning architecture creates a greater separation between functionality (in the host component) and design (in the skin component). This separation allows skins and Spark components to be easily reused and updated with a minimal amount of code refactoring.

Styles are property settings—color, sizing, or font instructions—that modify the appearance of components and can be customized programmatically at both compile time and runtime. Style properties can be defined in multiple ways: by setting them inline within a component declaration, by using the setStyle() method to apply them, or by using Cascading Style Sheets (CSS). You can use CSS to define styles locally in a MXML file or in an external file.

For the sake of simplicity, the examples in the following recipes use a basic wire-frame design in ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

What Successful Brick-and-Mortar Retailers Get Right

Publisher Resources

ISBN: 9781449388195Errata Page

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

Flex 4 Cookbook

by Rich Tretola, Marco Casario, Todd Anderson, Joshua Noble, Garth Braithwaite

Chapter 6. Skinning and Styles

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.