FLEX no.3

--------------ex3_01_solution  -----------------------Using text controls

 

在嵌套的EmployeeOfTheMonth中

    <s:Scroller width="100%">
       
  <!-- Use a RichEditableText control -->
        <s:RichEditableText text="Congratulations to Brad our Employee of the Month. Brad has been instrumental in planning and overseeing our new wind power unit development. His dedication and infectious enthusiasm has helped to increase our wind-powered sales by 8% throughout the nation and as high as 22% in the Central region."
            height="57" width="240"/>
 
    </s:Scroller>

 

<s:RichEditableTest>定义：RichEditableText is a low-level UIComponent for displaying, scrolling, selecting, and editing richly-formatted text.

 

<s:TextInput width="250" height="80"
        textAlign="left"/>

 

 

--------------ex3_02_solution  -----------------------Using text layout features

 

 

 

在嵌套的Cafeteria中

        <s:Label text="Calorie Information"
            fontWeight="bold"
            rotation="270"/> <!--逆时针转270度方向-->

 

<s:RichText> 定义：RichText is a low-level UIComponent that can display one or more lines of richly-formatted text and embedded images.

如：

        <s:RichText width="100%"
            lineHeight="20">
                       
                <s:span fontStyle="italic">Water content (grams per 100g)</s:span>: 47.31<s:br/>
                <s:span fontStyle="italic">Calorie content of Food (kcals per 3.5oz)</s:span>: 283<s:br/>
                <s:span fontStyle="italic">Protein content (grams per 100g)</s:span>: 13.25<s:br/>
                <s:span fontStyle="italic">Fat content (lipids) (grams per 100g)</s:span>: 16.18<s:br/>
                <s:span fontStyle="italic">Ash content (grams per 100g)</s:span>: 2<s:br/>
                <s:span fontStyle="italic">Carbohydrate content (grams per 100g)</s:span>: 21.26<s:br/>
                <s:span fontStyle="italic">Dietary Fiber content (grams per 100g)</s:span>: N/A<s:br/>
                <s:span fontStyle="italic">Sugar content (grams per 100g)</s:span>: N/A<s:br/>
                      
        </s:RichText>

在嵌套的MonthlyEvents中

    <s:TextArea height="440" width="287"
        editable="false"
        paragraphSpaceBefore="4"
        contentBackgroundAlpha="0.0"
        paddingBottom="15"
        paddingTop="15"
        paddingRight="15"
        paddingLeft="15">

 

TextArea is a text-entry control that lets users enter and edit multiple lines of richly formatted text. It can display horizontal and vertical scrollbars for scrolling through the text and supports vertical scrolling with the mouse wheel.

 

 <s:span fontWeight="bold">COMPANY PICNIC</s:span>

 

The SpanElement class represents a run of text that has a single set of formatting attributes applied. SpanElement objects contain the text in a paragraph. A simple paragraph (ParagraphElement) includes one or more SpanElement objects.

 

--------------ex3_03_solution  -----------------------Defining selector styles

透过EmployeePortal.css 来给界面进行统一css格式：其中：

s|Button
{
    color: #0074AA;
}

s|Button
{
    color: #000000;
}

s|Button
{
    font-family:"Arial";
}

第2个和第3个将被使用。

引用css的写法： <fx:Style source="EmployeePortal.css" />

 

--------------ex3_4_solution  -----------------------Using advanced CSS selectors

 

s4中的css比s3中的css多了：

/*
The following selector is a descendant selector and defines the down state for only
Spark Button controls that exist in a Spark Panel container.
*/
s|Panel s|Button:down
{
    color: #000000;                    字体颜色
    baseColor: #D9E028;           基础颜色
}

/*
The following selector is a descendant selector and defines the color for only
Spark Button controls that exist within Spark ScrollBar controls in Panel containers.
*/

s|Panel s|ScrollBar s|Button
{
    baseColor: #555555;
}

/*
The following two pseudo selectors define the up and over states for a
Spark Button control.
*/
s|Button:up
{
    color: #FFFFFF;
    baseColor: #555555;
}

s|Button:over
{
    color: #000000;
    baseColor: #D9E028;
}

/*
The following is an id selector that is specifically targeting the styles
for the Label control in the EmployeeOfTheMonth custom component that
has an id property of employeeName.
*/
#employeeName
{
    color: #F05123;
}

 

 

<s:TextInput>定义TextInput is a text-entry control that lets users enter and edit a single line of uniformly-formatted text.

 

--------------ex3_5_solution  -----------------------Creating and applying skin

对于不同组件来创建skins ：

如： ex3_05_solution 中 35行：

 <s:SkinnableContainer width="933" height="81"
        skinClass="skins.TopContainerSkin">     此处是引用一个skin class ：TopContainerSkin

......

看 TopContainerSkin的格式：

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/halo"
    xmlns:s="library://ns.adobe.com/flex/spark">

...

</Skin>

 

另外：

 <s:Rect radiusX="4" radiusY="4"
        height="100%" width="100%" >
        
        <s:fill>
   <mx:SolidColor id="topContainerSkin"
                color="#000000"/>
  </s:fill>
 </s:Rect>  这是为边框的角进行圆滑的标签

 

--------------ex3_6_solution  创建和应用皮肤-----------------------Creating and applying skins

比第5节多了ButtonWithStatesSkin.mxml

关注：

    <s:states>
       
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
       
    </s:states>

 

<s:Rect id="buttonColor"
        left="0" right="0"
        top="0" bottom="0">
        <s:fill.up>
   <mx:SolidColor color="0x555555"/>
  </s:fill.up>
  
  <s:fill.over>
   <mx:SolidColor color="0xD9E028"/>
  </s:fill.over>
  
  <s:fill.down>
   <mx:SolidColor color="0x0D86B8"/>
  </s:fill.down>
   
 </s:Rect>

--------------ex3_7_solution  创建和应用皮肤-----------------------Creating and applying skins

请注意Portal中显示的标题已经变成了在contenxt右侧了。

在ex3_07_solution 中：

 <s:HGroup gap="0">
  
  <components:EmployeePortalPanel title="Employee of the Month" 
          panelTitleColor="#64BC48">
   
   <components:EmployeeOfTheMonth/>
   
  </components:EmployeePortalPanel>
  
  <components:EmployeePortalPanel title="Cafeteria Special"
          panelTitleColor="#F05123">
   
   <components:Cafeteria/>
   
  </components:EmployeePortalPanel>
  
  <components:EmployeePortalPanel title="Monthly Events"
          panelTitleColor="#0D86B8">
   
   <components:MonthlyEvents/>
   
  </components:EmployeePortalPanel>
  
 </s:HGroup>

其实真正导致panel的title变成右侧提示是看这里：

PanelSkin.mxml

原来的code：

-----

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/halo"
    xmlns:s="library://ns.adobe.com/flex/spark"
    creationComplete="initTitleSkin()">

    <!-- Properties of the parent ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
   
    <s:states>
       
        <s:State name="normal" />
        <s:State name="disabled" />
       
    </s:states>
   
    <!-- Metadata ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
   
    <fx:Metadata>
       
        [HostComponent("components.EmployeePortalPanel")]
       
    </fx:Metadata>
   
    <!-- Styles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
   
   
   
    <!-- Script ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
   
    <fx:Script>
        <![CDATA[
          
            private function initTitleSkin():void
            {
                headerSkinColor.color = hostComponent.panelTitleColor;
            }

        ]]>
    </fx:Script>
   
    <!-- Declarations ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
   
   
   
    <!-- UI components ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
 
 <s:Rect radiusX="4" radiusY="4"
        height="100%" width="100%" >
       
        <s:fill>
   <mx:SolidColor id="panelSkin"
                color="#E8E8E8"/>
  </s:fill>
       
    </s:Rect>
 
 <s:Path winding="nonZero"
        data="M 0.016 0.012 L 0.016 23.354 L 287.419 23.354 L 287.408 12.012 C 287.408 5.385 282.035 0.012 275.408 0.012 L 0.016 0.012 Z">
  
        <s:fill>
   <s:SolidColor id="headerSkinColor"/>
  </s:fill>
       
 </s:Path>
 
 <s:Label id="titleDisplay"
        lineBreak="explicit"
     left="10" right="4"
        top="2" height="30"
  verticalAlign="middle"
        fontWeight="bold"/>
 
    <s:Group id="contentGroup"
        top="23">
       
 </s:Group>       
 
</s:SparkSkin>
----

现在的code：

----

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/halo"
    xmlns:s="library://ns.adobe.com/flex/spark"
    creationComplete="initTitleSkin()">

    <!-- Properties of the parent ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
   
    <s:states>
       
        <s:State name="normal" />
        <s:State name="disabled" />
       
    </s:states>
   
    <!-- Metadata ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
   
    <fx:Metadata>
       
        [HostComponent("components.EmployeePortalPanel")]
       
    </fx:Metadata>
   
    <!-- Styles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
   
   
   
    <!-- Script ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
   
    <fx:Script>
        <![CDATA[
          
            private function initTitleSkin():void
            {
                headerSkinColor.color = hostComponent.panelTitleColor;
            }

        ]]>
    </fx:Script>
   
    <!-- Declarations ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
   
   
   
    <!-- UI components ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
 
 <s:Rect radiusX="4" radiusY="4"
        height="100%" width="100%"
        right="10">
       
        <s:fill>
   <mx:SolidColor id="panelSkin"
                color="#E8E8E8"/>
  </s:fill>
       
    </s:Rect>
 
 <s:Path winding="nonZero"
        data="M 0.016 0.012 L 0.016 23.354 L 287.419 23.354 L 287.408 12.012 C 287.408 5.385 282.035 0.012 275.408 0.012 L 0.016 0.012 Z"
        rotation="90"
        top="0" bottom="0"
        right="0">
  
        <s:fill>
   <s:SolidColor id="headerSkinColor"/>
  </s:fill>
       
 </s:Path>
 
    <s:Group top="0"
        bottom="0"
        right="0">
         
        <s:Label id="titleDisplay"
            lineBreak="explicit"
            left="10" right="4"
            top="0" height="30"
            verticalAlign="middle"
            fontWeight="bold" fontSize="14"
            rotation="90"
            color="#FFFFFF"/>
       
    </s:Group>
   
    <s:Group id="contentGroup" right="25">
       
 </s:Group>       
 
</s:SparkSkin>
----