Adobe Flex - Developing Rich Internet Application Workshop Day 2
1 like683 views
This document provides an overview and outline of topics to be covered in the "Application Navigation" section of a course on developing rich internet applications with Flex 3. The topics include understanding navigator containers and controls, using the LinkBar, TabBar, ViewStack, TabNavigator and Accordion containers to implement navigation. Code examples are provided for implementing navigation with various containers.
Adobe Flex - Developing Rich Internet Application Workshop Day 2
- 1. Flex 3:Developing Rich Internet Applications - Day 2 Shyamala Prayaga
- 2. Reviewing course outline • Application Navigation • Styling your Application with CSS • Working with data (DataGrid)
- 3. Application navigation In this section, you will learn how to implement and manipulate navigation containers individually and relative to one another. You will also learn how navigator and layout containers interact
- 4. Application navigation Objectives After completing this unit, you shall be able to: • Understand what navigator container are and how to create them • Navigate the ViewStack container with LinkBar, TabBar controls
- 5. Application navigation Topics In this unit, you will learn the following: • Understanding navigator containers and controls • Using the LinkBar control • Using the TabBar control • Using the ViewStack container • Using the TabNavigator container • Using the Accordion container
- 6. Understanding navigator containers and controls There are two types of containers • Layout container - Control the sizing and positioning of the child element within them • Navigator container – Control user movement, or navigation among multiple child containers
- 7. Understanding navigator containers and controls Navigator container basics • The direct children of a navigator container must be containers, either layout or navigator container • Typical properties of a container tag include id, width and height. • Navigator container and their children • Only ViewStack, TabNavigator and Accordion containers have child containers that you can layout. • LinkBar, ButtonBar, TabBar navigator controls do not have child containers. Instead they enable users and code to control the currently active child container of ViewStack container.
- 8. Using the LinkBar control • The LinkBar control • Defines a horizontal row of linkButton controls • Is a navigator container with built-in logic to switch between children of a ViewStack container • Has a width that is wide enough to contain all label text plus separators and necessary padding • Has a height that accommodate the tallest child element • Has default padding value of 2 pixels on all sides • Is represented in MXML with the <mx:LinkBar> tag
- 9. Using the LinkBar control <mx:LinkBar> <mx:dataProvider> <mx:String>Home</mx:String> <mx:String>Contact Us</mx:String> <mx:String>Special Events</mx:String> <mx:String>Restaurant Menu</mx:String> </mx:dataProvider> </mx:LinkBar>
- 10. Using the TabBar control • The TabBar control • Defines a horizontal (default) or vertical rows of tabs • Has default padding value of 0 pixels on all sides • Is represented in MXML using <mx:TabBar> tag
- 11. Using the TabBar control <mx:TabBar labelField="menuName"> <mx:dataProvider> <mx:Object menuName="Home" /> <mx:Object menuName="Contact Us" /> <mx:Object menuName="Special Events"/> <mx:Object menuName="Resturant Menu" /> </mx:dataProvider> </mx:TabBar>
- 12. Using the ViewStack control The ViewStack container • Is made up of a collection of child containers that are stacked on top of each other, with one container visible or active at a time. • Does not provide user interface for selecting which child container is currently visible • Typically used LinkBar or TabBar controls to switch between child containers • Is represented in MXML with the <mx:ViewStack> tag
- 13. Using the ViewStack control
- 14. <mx:Panel title="ViewStack Demo" width="100%" height="100%" borderAlpha="1"> <mx:ViewStack id="vs" width="100%" height="100%"> <mx:VBox label="View 1" width="100%" height="100%"> <mx:Label text="This is View 1" color="0xFF0000"/> </mx:VBox> <mx:VBox label="View 2" width="100%" height="100%"> <mx:Label text="This is View 2" color="0x0000FF"/> </mx:VBox> <mx:VBox label="View 3" width="100%" height="100%"> <mx:Label text="This is View 3" color="0x00AA00"/> </mx:VBox> </mx:ViewStack> <mx:ControlBar> <mx:ButtonBar itemClick="vs.selectedIndex = ItemClickEvent(event).index"> <mx:dataProvider> <mx:String>View 1</mx:String> <mx:String>View 2</mx:String> <mx:String>View 3</mx:String> </mx:dataProvider> </mx:ButtonBar> </mx:ControlBar> </mx:Panel>
- 15. Walkthrough 11:Create navigation with TabBar and ViewStack control
- 16. Using TabNavigator container • The TabNavigator works the same way as ViewStack. • Has its own child so no need to provide ViewStack or dataProvider • Defines a horizontal row of tabs • Display one child at a time, in order they are defined • Had default padding value of 2 pixels on all side • Is represented in MXML with <mx:TabNavigator> tag
- 18. <mx:TabNavigator borderStyle="solid" > <mx:VBox label="Accounts" width="300" height="150"> <!-- Accounts view goes here. --> </mx:VBox> <mx:VBox label="Stocks" width="300" height="150"> <!-- Stocks view goes here. --> </mx:VBox> <mx:VBox label="Futures" width="300" height="150"> <!-- Futures view goes here. --> </mx:VBox> </mx:TabNavigator>
- 19. Using Accordion container • The Accordion works the same way as ViewStack. • Has its own child so no need to provide ViewStack or dataProvider • Defines vertically stacked panels that animate as they open and close • has its own child content • Has default padding value of 2 pixels on all side • Is represented in MXML with the <mx:Accordion> tag
- 21. <mx:Accordion borderStyle="solid" > <mx:VBox label="Accounts" width="300" height="150"> <!-- Accounts view goes here. --> </mx:VBox> <mx:VBox label="Stocks" width="300" height="150"> <!-- Stocks view goes here. --> </mx:VBox> <mx:VBox label="Futures" width="300" height="150"> <!-- Futures view goes here. --> </mx:VBox> </mx:Accordion>
- 22. Walkthrough 12:creating navigation using Accordion and TabNavigator
- 23. Summary
- 24. Styling your Application with CSS In this section, you will learn to customize the look and feel of flex applications with styles, behaviors and transitions. You will also learn to use different types of themes.
- 25. Styling your Application with CSS Objectives After completing this unit, you shall be able to: • Modifying the default Flex application style • Add animations to components using triggers and effects • Add animation to view state transitions
- 26. Styling your Application with CSS Topics In this unit, you will learn the following: • Customizing Flex application look and feel • Modifying Flex styles to change the look and feel • Using themes • Applying behaviors to components • Applying transitions to view state changes
- 27. Customizing Flex application look and feel • You can modify almost every aspect of the look and feel and user interaction of your application by using these features of flex • Component sizes- height and width. • Graphical display – characteristic like color, font size, border, width, text alignment, corner radius setting etc • Dynamic effects – animations or sound • Fonts – default embedded text character sets
- 28. Customizing Flex application look and feel Changing flex control style defaults – skins and styles • Skins are graphics displayed on components – for example, the down arrow of the ScrollBar component is made up of three skins – ScrollDownArrowDisabled, ScrollDownArrowUp, ScrollDownArrowDown – Some components share skins. For example components that use scroll bars – including all containers share their skin with the ScrollBar component • Styles are defined on components. You can customize these styles
- 29. Customizing Flex application look and feel • There are three ways to change the appearance of components – Use the Styles API to the programmatically modify styles – Physically modify or replace – Apply a theme made up of styles
- 30. Modifying styles to change the look and feel • Flex provides several ways of setting component styles • Using MXML component properties • Calling the setStyle() method in ActionScript • Using Cascading style sheets (CSS) • Setting global styles • Implementing built in theme styles
- 31. Modifying styles to change the look and feel Setting styles inline using MXML component attributes • You have already set some styles for components by specifying values for attributes in MXML components • <mx:Text text=“Appetizers” color=“#dd7142” />
- 32. Modifying styles to change the look and feel Setting style in ActionScript for individual components using the setStyle() method emailButton.setStyle(“ontSize”, 15);
- 33. Modifying styles to change the look and feel Setting style using Cascading style sheets (CSS) • Creating CSS type selectors – Type selectors assign styles to all instances of a particular type – Within the Style container, name MXML component and define its styles – Use a comma-separated list of components to set the same style to all specified components types <mx:Style> TextArea { backgroundColor: “#cccccc”} Button, TextInput, Label { font-style: Italic} </mx:Style> <mx:TextArea id=“message” />
- 34. Using themes • Flex provides several themes that can be applied to the overall application • Use the themeColor style to set the theme color to any color or to a halo color (haloGreen, haloBlue, haloSilver, haloOrange) <mx:Application themeColor=“haloBlue” >
- 36. Applying behaviors to components • Behaviors let you add animation and motion to your application components in response to some user or programmatic action.
- 37. Applying behaviors to components Understanding behaviors basics • Behavior has two parts – A trigger – an action, such as user clicking on a button, a component gaining focus or becoming invisible – An effect – a visible or audible change to the component occurring over a period of time such as fade effect • Components have triggers, but they do not do anything until you associate them with an event
- 38. Applying behaviors to components • Apply a simple behavior by setting the trigger name property of the component to the name of the effect class <mx:Button id=“sendButton” label=“Send Message” mouseDownEffect=“Fade” />