Flex基础_3.ppt

1、Flex 入门培训,Jason,FLXB实例效果,FLXB实例效果图,FLXB实例制作,页面美化 样式表 - Cascading Style Sheet 外观 - skin,FLXB实例制作,数据CRUD 报表制作 页面美化 发布部署 测试与调试,FLXB实例制作,创建样式表 Step 1: Create a style sheet and a CSS global selector. Return to FlexWebTestDrive.mxml in Design mode. Navigate to the Appearance view and change font and color

2、 styles If you dont want to choose your own values, here are some you can use: font-family: Verdana, font-size: 10, chrome-color: #494949. Switch to Source mode. You will see a new Style tag below the Application tag. In the Package Explorer, you should see a new file, FlexWebTestDrive.css. Open it.

3、 You will see a global CSS selector whose styles will be applied to all components. /* CSS file */ namespace s library:/ namespace mx library:/ global font-family: Verdana; font-size: 10; chrome-color: #494949; ,FLXB实例制作,Step 2: Create a CSS type selector. In Design mode for FlexWebTestDrive.mxml, s

4、elect one of the buttons and in the Properties view set its text to bold and white and change its corner radius to 5. Look at the generated code. ,FLXB实例制作,Return to Design mode and click the Convert to CSS button. In the New Style Rule dialog box, select Specific component .,FLXB实例制作,Step 3:latest

5、css ( FlexWebTestDrive.css ) /* CSS file */ namespace s library:/ namespace mx library:/ global font-family: Verdana; font-size: 10; chrome-color: #494949; symbol-color:#FFFFFF; s|Application skinClass: ClassReference(skins.ApplicationSkin); ,FLXB实例制作, s|TextInput.searchInput skinClass: ClassReferen

6、ce(skins.SearchInputSkin); s|Button.searchButton skinClass: ClassReference(skins.SearchButtonSkin); mx|PieSeries fills:#6B96D0,#5B7FB2,#81A4D0,#7EC2EA,#6B84A5,#686BD0,#6A8AD0; .boldTitles fontWeight:bold; ,FLXB实例制作,应用样式表后的效果图,FLXB实例制作,外观设计 Step 1:Create a new skin for the TextInput control Return to

7、 Design mode of FlexWebTestDrive.mxml. Select the searchTxtTextInput control. In the Properties view, click the button next to the Skin field and select Create Skin . In the New MXML Skin dialog box, set the package to skins and the name to SearchInputSkin; leave the host component set to ponents.Te

8、xtInput, create it as a copy of spark.skins.spark.TextInputSkin, and remove the ActionScript styling code .,FLXB实例制作,Create a new skin for the TextInput control.,FLXB实例制作,Step 2: Set the skinClass in the style sheet. Switch back to Design mode and with the TextInput selected, click Convert to CSS. I

9、n the New Style Rule dialog box, select Specific component with style name and name it searchInput . Make this the style used by the search TextInput control in all the application states.,FLXB实例制作,Step 3: Change the controls spacing. In the SparkSkin tag, set minHeight to 30. In the RichEditableTex

10、t tag, change theleft, right, andtop properties to 10 pixels and itsbottom property to 7. Add these same values to the Label control and also set theincludeInLayout property to true and set itsfontStyle to normal. Your code should appear as shown here: (.) ,FLXB实例制作,Step 4: Round the controls corner

11、s. To each of the three Rect tags, add radius X and radiusY properties set to 3 pixels. Example code for one of the rectangles is shown here: ,FLXB实例制作,Step 5: Add the graphics to the skin. After the states in SearchButtonSkin.mxml, use Code Assist to select the search_icon FXG class Your skin class

12、 should appear as shown here: HostComponent(ponents.Button) ,FLXB实例制作,Step 6: Size and position the icon. Return to SparkButtonSkin and set the minHeight and minWidth properties of the Skin class to 30. In the search_icon tag, set thehorizontalCenter and verticalCenter properties to 0. Step 7: Add a

13、 background rectangle. Above the search_icon tag, add a Rect tag and set itsleft,right,top, and bottom properties to 0. Set its topRightRadiusX,top RightRadiusY,bottom RightRadiusX, and bottomRightRadiusY properties to 3. Set its stroke property to an instance of the SolidColorStroke class with acol

14、or of #1A1A1A. (.) ,FLXB实例制作,Step 8: Add a gradient fill. Set the rectanglesfill property to an instance of the LinearGradient class with arotation of 90. Add a GradientEntry with acolor of 0 x999999 and a color in the up state of 0 x666666. Add a second GradientEntry with acolor of 0 x4D4D4D and a

15、color in the up state of 0 x333333. ,FLXB实例制作,Step 9: Position the search controls. Return to Design mode of FlexWebTestDrive.mxml and reposition the search TextInput and Button controls. Make these the properties for all states. To set the positions for all states, modify the source code or select each control and select Apply Current Properties to all Components.,FLXB实例制作,Step 10: Set the skinClass in the style sheet. With the Search button selected, click Convert to CSS. In the New Style Rule dialog box, select Specific component with style name and name it searchButton (see