Flex 3:Developing Rich InternetApplications - Day 2                    Shyamala Prayaga
Reviewing course outline•   Application Navigation•   Styling your Application with CSS•   Working with data (DataGrid)
Application navigationIn this section, you will learn how to implement and manipulate navigation containers individually a...
Application navigationObjectivesAfter completing this unit, you shall be able to:•   Understand what navigator container a...
Application navigationTopicsIn this unit, you will learn the following:•   Understanding navigator containers and controls...
Understanding navigator containersand controlsThere are two types of containers•   Layout container - Control the sizing a...
Understanding navigator containersand controlsNavigator container basics•   The direct children of a navigator container m...
Using the LinkBar control•   The LinkBar control•   Defines a horizontal row of linkButton controls•   Is a navigator cont...
Using the LinkBar control <mx:LinkBar> <mx:dataProvider> <mx:String>Home</mx:String> <mx:String>Contact Us</mx:String> <mx...
Using the TabBar control•   The TabBar control•   Defines a horizontal (default) or vertical rows of tabs•   Has default p...
Using the TabBar control <mx:TabBar labelField="menuName"> <mx:dataProvider> <mx:Object menuName="Home" /> <mx:Object menu...
Using the ViewStack controlThe ViewStack container• Is made up of a collection of child containers that are stacked on top...
Using the ViewStack control
<mx:Panel title="ViewStack Demo" width="100%" height="100%" borderAlpha="1"><mx:ViewStack id="vs" width="100%" height="100...
Walkthrough 11:Create navigationwith TabBar and ViewStack control
Using TabNavigator container•   The TabNavigator works the same way as ViewStack.•   Has its own child so no need to provi...
Using TabNavigator container
<mx:TabNavigator borderStyle="solid" >    <mx:VBox label="Accounts"      width="300"      height="150">      <!-- Accounts...
Using Accordion container•   The Accordion works the same way as ViewStack.•   Has its own child so no need to provide Vie...
Using Accordion container
<mx:Accordion borderStyle="solid" >    <mx:VBox label="Accounts"      width="300"      height="150">      <!-- Accounts vi...
Walkthrough 12:creating navigationusing Accordion and TabNavigator
Summary
Styling your Application with CSSIn this section, you will learn to customize the look and feel of flex applications with ...
Styling your Application with CSSObjectivesAfter completing this unit, you shall be able to:•   Modifying the default Flex...
Styling your Application with CSSTopicsIn this unit, you will learn the following:•   Customizing Flex application look an...
Customizing Flex application lookand feel•   You can modify almost every aspect of the look and feel and user    interacti...
Customizing Flex application lookand feelChanging flex control style defaults – skins and styles•   Skins are graphics dis...
Customizing Flex application lookand feel•   There are three ways to change the appearance of components     – Use the Sty...
Modifying styles to change the lookand feel•   Flex provides several ways of setting component styles•   Using MXML compon...
Modifying styles to change the lookand feelSetting styles inline using MXML component attributes•   You have already set s...
Modifying styles to change the lookand feelSetting style in ActionScript for individual components using the setStyle()met...
Modifying styles to change the lookand feelSetting style using Cascading style sheets (CSS)•   Creating CSS type selectors...
Using themes•   Flex provides several themes that can be applied to the overall application•   Use the themeColor style to...
Walkthrough 13:Styling yourApplication
Applying behaviors to components•   Behaviors let you add animation and motion to your application components    in respon...
Applying behaviors to componentsUnderstanding behaviors basics•   Behavior has two parts     – A trigger – an action, such...
Applying behaviors to components•   Apply a simple behavior by setting the trigger name property of the    component to th...
Adobe Flex - Developing Rich Internet Application Workshop Day 2
Upcoming SlideShare
Loading in...5
×

Adobe Flex - Developing Rich Internet Application Workshop Day 2

513

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
513
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Adobe Flex - Developing Rich Internet Application Workshop Day 2"

  1. 1. Flex 3:Developing Rich InternetApplications - Day 2 Shyamala Prayaga
  2. 2. Reviewing course outline• Application Navigation• Styling your Application with CSS• Working with data (DataGrid)
  3. 3. Application navigationIn 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. 4. Application navigationObjectivesAfter 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. 5. Application navigationTopicsIn 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. 6. Understanding navigator containersand controlsThere 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. 7. Understanding navigator containersand controlsNavigator 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. 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. 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. 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. 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. 12. Using the ViewStack controlThe 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. 13. Using the ViewStack control
  14. 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. 15. Walkthrough 11:Create navigationwith TabBar and ViewStack control
  16. 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
  17. 17. Using TabNavigator container
  18. 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. 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
  20. 20. Using Accordion container
  21. 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. 22. Walkthrough 12:creating navigationusing Accordion and TabNavigator
  23. 23. Summary
  24. 24. Styling your Application with CSSIn 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. 25. Styling your Application with CSSObjectivesAfter 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. 26. Styling your Application with CSSTopicsIn 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. 27. Customizing Flex application lookand 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. 28. Customizing Flex application lookand feelChanging 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. 29. Customizing Flex application lookand 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. 30. Modifying styles to change the lookand 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. 31. Modifying styles to change the lookand feelSetting 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. 32. Modifying styles to change the lookand feelSetting style in ActionScript for individual components using the setStyle()method emailButton.setStyle(“ontSize”, 15);
  33. 33. Modifying styles to change the lookand feelSetting 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. 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” >
  35. 35. Walkthrough 13:Styling yourApplication
  36. 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. 37. Applying behaviors to componentsUnderstanding 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. 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” />

×