Home | | Internet & World Wide Web HOW TO PROGRAM | | Internet Programming | | Web Programming | Customizing Your User Interface - Adobe Flex 2

Chapter: Internet & World Wide Web HOW TO PROGRAM - Rich Internet Application Client Technologies - Adobe Flex 2 and Rich Internet Applications

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

Customizing Your User Interface - Adobe Flex 2

Flex allows you to customize the style of your user interface.

Customizing Your User Interface

 

Flex allows you to customize the style of your user interface. Just as in XHTML, you can include the styles inline, put them in a separate style section, or place them in a separate style-sheet file. The syntax is similar to that of CSS, but the names of the properties are different when used inline. Here, we add a style section and an inline style to our cover-Viewer application (Fig. 18.19). You can try this application at test.deitel.com/ examples/iw3htp4/flex/coverViewerStyles/.

 

The first change we make is to add a Style element (lines 7–15). Inside the Style element is a format virtually identical to CSS (Chapter 5). We first give all LinkButton and HorizontalList elements custom styles, by setting the font family, size and color. We specify a custom style by using a dot before the style name, customStyle. We can then apply that style to any eligible element by adding a styleName = "customStyle" attribute, as we do in line 101. Finally, we can specify a style inline as we do for the Panel element (lines 74–76). Some of the names of the inline style attributes are different from those in the Style element and in CSS, using a camel-case naming convention instead of hyphenation (e.g. font-family becomes fontFamily).

 

1    <?xml version = "1.0" encoding = "utf-8" ?>

 

2    <!-- Fig. 18.19: coverViewerStyles.mxml -->

 

3    <!-- Using a Style element and inline styles -->

 

4    <mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml">

5              

<!-- define styles for application -->

7       <mx:Style>

8 LinkButton       { font-family: "Helvetica, sans-serif";     

9                 font-size: 14 }     

10     HorizontalList { font-size: 12;        

11               color: black }      

12     .customStyle       { font-size: 16;    

13               font-weight: bold;        

14               color: black }      

15     </mx:Style>                 

17         <!-- ActionScript goes in this section -->

 

18         <mx:Script>

 

19                <![CDATA[

 

20                      // import the Cubic easing function for state transitions

 

21                      import mx.effects.easing.Cubic;

22                ]]>

 

23         </mx:Script>

24

25         <!-- an array of images -->

 

26         <mx:ArrayCollection id = "bookCovers">

 

27                <!-- each image has a name and source attribute -->

 

28                <mx:Object name = "C How to Program" source = "chtp5.jpg" />

 

29                <mx:Object name = "C++ How to Program" source = "cpphtp6.jpg" />

 

30                <mx:Object name = "Internet How to Program"

 

31                      source = "iw3htp4.jpg" />

 

<mx:Object name = "Java How to Program" source = "jhtp7.jpg" />

33                <mx:Object name = "VB How to Program" source = "vbhtp3.jpg" />

 

34                <mx:Object name = "Visual C# How to Program"

 

35                      source = "vcsharphtp2.jpg" />

 

36                <mx:Object name = "Simply C++" source = "simplycpp.jpg" />

 

37                <mx:Object name = "Simply VB 2005" source = "simplyvb2005.jpg" />

 

38                <mx:Object name = "Simply Java" source = "simplyjava.jpg" />

 

39                <mx:Object name = "Small C++ How to Program"

 

40                      source = "smallcpphtp5.jpg" />

 

41                <mx:Object name = "Small Java" source = "smalljavahtp6.jpg" />

 

42         </mx:ArrayCollection>

43

44         <!-- define the application's states -->

 

45         <mx:states>

 

46                <mx:State name = "HideThumbnails">

 

47                      <mx:RemoveChild target = "{ thumbnailList }" />

48          

49                      <!-- switch the showHideButton to hide -->

 

50                      <mx:SetEventHandler target = "{ showHideButton }" name = "click"

51                            handler = "currentState = ''" />

 

52                </mx:State>

 

53         </mx:states>

54

55         <!-- define the transition effect for application state changes -->

 

56         <mx:transitions>

 

<mx:Transition>

58     <mx:Resize        

59     targets       = "{ [ thumbnailList, viewPanel, largeImage ] }"

60     duration = "750" easingFunction = "Cubic.easeOut" />

61                </mx:Transition>

 

62         </mx:transitions>

63          

64         <!-- bind the source of largeImage to the selected thumbnail -->

 

65         <mx:Binding

 

66                source = "'fullsize/' +

 

67                      bookCovers.getItemAt( selectCoverSlider.value ).source"

 

68                destination = "largeImage.source" />

 

69         <mx:Binding source = "'fullsize/' + thumbnailList.selectedItem.source"

 

70                destination = "largeImage.source" />

71

72         <!-- user interface begins here -->

 

73         <mx:Panel id = "viewPanel" title = "Deitel Book Cover Viewer"

 

74                width = "100%" height = "100%" horizontalAlign = "center"

 

75                color = "blue" fontSize = "18" fontFamily = "Helvetica"

 

76                textAlign = "center">

77

78                <mx:HBox height = "100%" width = "100%">

 

<mx:VSlider id = "zoomSlider" value = "100" minimum = "0"

80     maximum = "100"     liveDragging = "true"

81        change = "largeImage.percentWidth =    zoomSlider.value;

82        largeImage.percentHeight = zoomSlider.value;"

83        height =         "100%"           width = "0%"

84        labels =          "[ '0%', 'Zoom', '100%' ]"      />

85        <mx:VBox width = "100%" height = "100%"

86        horizontalAlign = "center">

87                               

88        <!-- We bind the source of this image to the source of -->

89        <!-- the selected thumbnail, and center it in the VBox. -->

90        <!-- completeEffect tells Flex to fade the image in -->

91        <mx:Image id = "largeImage"

92                    source = ""

93                    horizontalAlign = "center"

94                    verticalAlign = "middle"

95                    width = "100%" height = "100%"

96                    completeEffect = "Fade" />

97                               

98        <!-- bind this Label to the name of the selected thumbnail -->

99        <!-- also specify a styleName to use the customStyle style -->

100                  <mx:Label text = "{ thumbnailList.selectedItem.name }"     

101                  styleName = "customStyle" />

102                   </mx:VBox>

 

103             </mx:HBox>

104      

105             <!-- slider can switch between images -->

 

106             <mx:HSlider id = "selectCoverSlider" height = "0%"

 

107                         minimum = "0" maximum = "{ bookCovers.length - 1 }"

 

108                         showDataTip = "false" snapInterval = "1" tickInterval = "1"

 

109                         liveDragging = "true"

 

change = "thumbnailList.selectedIndex =

111      selectCoverSlider.value;

112      thumbnailList.scrollToIndex( selectCoverSlider.value )" />

113     

114      <!-- display thumbnails of the images in bookCovers horizontally -->

114               <mx:HorizontalList id = "thumbnailList"

 

115                     dataProvider = "{ bookCovers }" width = "100%" height = "160"

 

116                     selectedIndex = "0"

 

117                     change = "selectCoverSlider.value = thumbnailList.selectedIndex">

118        

120                     <!-- define how each item is displayed -->

 

121                     <mx:itemRenderer>

 

<mx:Component>

123      <mx:VBox width = "140" height = "160"

124      horizontalAlign = "center" verticalAlign = "middle"

125      verticalScrollPolicy = "off"

126      horizontalScrollPolicy = "off" paddingBottom = "20">

127     

128      <!-- display a thumbnail of each image -->

129      <mx:Image source = "{ 'thumbs/' + data.source }"

130      verticalAlign = "middle" />

131     

132      <!-- display the name of each image -->

133      <mx:Label text = "{ data.name }" />

134      </mx:VBox>

135                         </mx:Component>

 

136                   </mx:itemRenderer>

 

</mx:HorizontalList>

139             <!-- this will exist in the bottom border of the Panel -->

 

140             <mx:ControlBar>

 

141                   <mx:LinkButton label = "Show/Hide Thumbnails"

 

142                         click = "currentState = 'HideThumbnails';"

143                         id = "showHideButton" />

 

144             </mx:ControlBar>

 

145      </mx:Panel>

 

</mx:Application>


 Fig. 18.19 | Using a Style element and inline styles. 


To specify an external style-sheet, which uses syntax identical to the contents of a Style element, you simply add a Style element with a source attribute pointing to the style-sheet file, as in <mx:Style source = "styles.css" />.

 

A great way to try out different styles is Adobe’s Flex Style Explorer, which you can find at weblogs.macromedia.com/mc/archives/FlexStyleExplorer.html. This allows you to visually create styles for most Flex user interface elements and generate the CSS you need to apply that style to your application.

Another way to customize the look of your application is through themes. The default theme of Flex applications is Halo. Other themes available with the Flex 2 SDK are Halo Classic (the former default), Ice, Institutional, Smoke and Wooden. All of these are defined in CSS files, but some of them also reference outside images and SWF files. These theme files can be found in flex_sdk_2/frameworks/themes/. You can specify that you want your application to use any of these themes at compile time by adding a theme parameter to the mxmlc command. Fig. 18.20 shows how to compile coverViewer.mxml with the ice.css theme. You can see how it looks in Fig. 18.21.


 


Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.