SaaS を作成するための Flex 4 の機能

	
<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer skinClass="mySkin">
   <s:layout>
      <s:VerticalLayout horizontalAlign="center"/>
   </s:layout>
   <s:Rect>
        ....
  </s:Rect>
    <s:Button ... />
    <s:Button ... />
</s:SkinnableContainer>s

	
public class Panel extends SkinnableContainer {

    // The content and layout properties are inherited from SkinnableContainer. 
    // Panel doesn't add much other functionality beyond what's in SkinnableContainer
  
    [SkinPart(required="true")]

    /**
     *  The skin part that defines the appearance of the 
     *  title text in the container.
     */
    public var titleField:TextGraphicElement;

    /**
     *  Title or caption displayed in the title bar. 
     */
    public var title:String;

    // This function is called when the skin part is loaded and assigned. 
    override protected function partAdded(partName:String, instance:*):void
    {
        // Assign the content to the header and footer. The main content
        // assignment is done in the superclass (SkinnableContainer)
        super.partAdded(partName, instance);

        if (instance == titleField)
        {
            titleField.text = title;
        }
    }
}

	
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark" 
height="200" width="200">
   <s:layout>
      <s:HorizontalLayout/>
   </s:layout>
   <s:SkinnableContainer id="myContainer" height="200" width="200" >
        <s:Button label="Click Me" skinClass="skins.FXGButtonSkin"/>
   </s:SkinnableContainer>
</s:Application>

	
<?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"
   xmlns:ai="http://ns.adobe.com/ai/2008"
   xmlns:d="http://ns.adobe.com/fxg/2008/dt"
   minWidth="21" minHeight="21">
     <fx:Metadata>
      [HostComponent("spark.components.Button")]
      </fx:Metadata> 
      <s:states>
        <s:State name="up"/>
        <s:State name="over"/>
        <s:State name="down"/>
        <s:State name="disabled"/>
      </s:states>

    <!-- FXG exported from Adobe Illustrator. -->
    <s:Graphic version="1.0" viewHeight="30" 
      viewWidth="100" ai:appVersion="14.0.0.367" d:id="1">
      <s:Group x="-0.296875" y="-0.5" d:id="2" 
       d:type="layer" d:userLabel="Layer 1">
    <s:Group d:id="3">
       <s:Rect x="0.5" y="0.5" width="100" 
          height="30" ai:knockout="0">
       <s:fill>
       <s:LinearGradient x="0.5" y="15.5" scaleX="100" rotation="-0">
         <s:GradientEntry color="#ffffff" ratio="0"/>
         <s:GradientEntry ratio="1"/>
       </s:LinearGradient>
       </s:fill>
         <s:stroke>
           <s:SolidColorStroke color="#0000ff" caps="none" 
              weight="1" joints="miter" miterLimit="4"/>
         </s:stroke>
       </s:Rect>
      < /s:Group>
     </s:Group>
  </s:Graphic>
    <s:SimpleText id="labelElement horizontalCenter="0" 
      verticalCenter="1" left="10" right="10" 
      top="15" bottom="2">
    </s:SimpleText>
  </s:SparkSkin>

	
<?xml version="1.0" encoding="utf-8"?>
<s:Graphic 
   xmlns:fx="http://ns.adobe.com/mxml/2009" 
   xmlns:mx="library://ns.adobe.com/flex/halo" 
   xmlns:s="library://ns.adobe.com/flex/spark">
     <s:Rect id="rect1" width="200" height="200" >
       <s:fill>
         <s:SolidColor color="0xFFFFCC" />
       </s:fill>
       <s:stroke>
         <s:SolidColorStroke color="0x660099" weight="2" />
       </s:stroke>
     </s:Rect>
</s:Graphic>

	
<?xml version="1.0"?> 
<!-- Set title of the Panel container based on the view state.--> 
<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:mx="library://ns.adobe.com/flex/halo" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     title="Login" title.Register="Register"> 

     <!-- The states property defines the view states.--> 
     <s:states> 
       <s:State name="Login"/> 
       <s:State name="Register"/> 
     </s:states> 

     <mx:Form id="loginForm"> 
       <mx:FormItem label="Username:"> 
         <s:TextInput/> 
       </mx:FormItem> 
     <mx:FormItem label="Password:"> 
         <s:TextInput/> 
       </mx:FormItem> 
     <!-- Add a TextInput control to the form for the Register view state. --> 
     <mx:FormItem id="confirm" label="Confirm:" includeIn="Register"> 
       <s:TextInput/> 
     </mx:FormItem> 
     <mx:FormItem direction="horizontal"> 
     <!-- Use the LinkButton to change to the Register view state.--> 
     <!-- Exclude the LinkButton from the Register view state.--> 
    <mx:LinkButton id="registerLink" 
       includeIn="Login" 
       label="Need to Register?" 
       click="currentState='Register'"/> 
     <!-- Add a LinkButton to the form for the Register view state. --> 
     <mx:LinkButton label="Return to Login" 
       includeIn="Register" 
       click="currentState=''"/> 
     <mx:Spacer width="100%" id="spacer1"/> 
     <!-- Set label of the control based on the view state.--> 
       <s:Button id="loginButton" 
         label="Login" label.Register="Register" /> 
       </mx:FormItem> 
     </mx:Form> 
</s:Panel>

	
<?xml version="1.0" encoding="utf-8"?>
<s:Application backgroundColor="0xFFFFFF" 
     xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:mx="library://ns.adobe.com/flex/halo" 
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:comps="comps.*">
    <comps:GraphicComp id="graphic1"/>
</s:Application>

	
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:mx="library://ns.adobe.com/flex/halo" 
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:MyComp="myComponents.*">
   <s:layout>
     <s:VerticalLayout/>
   </s:layout>
   <s:SimpleText text="Login or Register"
     fontSize="14" fontWeight="bold"/>
   <MyComp:LoginComponent currentState="Login"/>
</s:Application>

	
<?xml version="1.0"?>
  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:mx="library://ns.adobe.com/flex/halo" 
     xmlns:s="library://ns.adobe.com/flex/spark">
   <fx:Declarations>
     <s:Parallel id="parallelRMForward"
       target="{myImage}">
     <s:Rotate
       angleBy="180"/>
     <s:Move
        xBy="100" 
        yBy="100"/> 
     </s:Parallel>
     <s:Parallel id="parallelRMBack"
        target="{myImage}">
       <s:Rotate
         angleBy="180"/>
       <s:Move
         xBy="-100"
        yBy="-100"/>
     </s:Parallel>
   </fx:Declarations>
   <s:Button label="Play Effect Forward" 
     x="10" y="10"
     click="parallelRMForward.end();parallelRMForward.play();"/>
   <s:Button label="Play Effect Backward" 
     x="150" y="10"
     click="parallelRMBack.end();parallelRMBack.play();" />
    <mx:Image id="myImage" 
     x="10" y="50"
      source="@Embed(source='assets/logo.jpg')"/>
</s:Application>

	
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:mx="library://ns.adobe.com/flex/halo" 
     xmlns:s="library://ns.adobe.com/flex/spark">
   <s:layout>
     <s:VerticalLayout/>
   </s:layout>
   <!-- Define two view states.-->
   <s:states>
     <s:State name="default"/>
     <s:State name="red"/>
   </s:states>
   <!-- Define the transition that applies the Wipe effect
   whenever the view state changes.-->
   <s:transitions> 
     <s:Transition fromState="*" toState="*"> 
       <s:Sequence target="{myB}">
         <s:Wipe id="wipeEffect" 
           direction="right"
           duration="1000"/> 
       </s:Sequence>
     </s:Transition> 
   </s:transitions>
  <s:Button id="myB" label="Wipe" 
     color="black" color.red="red"/>
   <!-- Define two buttons to change the view state. -->
   <s:Button label="Set Default State" 
       click="currentState='default'"/>
   <s:Button label="Set Red State" 
       click="currentState='red'"/>
</s:Application>

	
<fx:Declarations>
   <s:DropShadowFilter id="myDSF"
       color="0x0000FF"
       distance="5"
       angle="315"/>
     <s:AnimateFilter id="myFilter" 
         target="{myB2}"
         repeatCount="0"
         duration="500"
         repeatBehavior="reverse"
         bitmapFilter="{new spark.filters.DropShadowFilter()}">
     <s:SimpleMotionPath property="color" valueFrom="0" valueTo="0x0000FF"/>
     <s:SimpleMotionPath property="distance" valueFrom="0" valueTo="10"/>
     <s:SimpleMotionPath property="angle" valueFrom="270" valueTo="360"/>
   </s:AnimateFilter>
</fx:Declarations>

	
<?xml version="1.0" encoding="utf-8"?>
   <s:Application name="Rotate3D Tester"
       xmlns="http://ns.adobe.com/mxml/2009">
    <layout>
     <BasicLayout />
   </layout>
   <fx:Declarations>
     <s:Rotate3D id="x_rotate3d"
        target="{image}"
        xFrom="0"
       xTo="360"
      duration="2000" />
     <s:Rotate3D id="y_rotate3d"
       target="{image}"
       yFrom="0"
       yTo="360"
       duration="2000" />
     <s:Rotate3D id="z_rotate3d"
        target="{image}"
       zFrom="0"
       zTo="360"
       duration="2000" />
    </fx:Declarations>
   <s:VGroup id="vGroup" left="10" top="10">
      <s:Button id="btnX"
       label="Rotate3D X-axis"
       click="x_rotate3d.play();" />
     <s:Button id="btnY"
        label="Rotate3D Y-axis"
       click="y_rotate3d.play();" />
     <s:Button id="btnZ"
       label="Rotate3D Z-axis"
       click="z_rotate3d.play();" />
   </s:VGroup>
   <mx:Image id="image"
     source="@Embed('assets/image.jpg')"
     horizontalCenter="0"
     verticalCenter="0"
     width="100"
    height="100" />
</s:Application>

	
<s:RichText fontSize="12">
    <s:content>
        <s:TextFlow color="0x222222">
            <s:p>
                <s:span fontWeight="bold">Hello </span>
                <s:spanv World</s:span>
            </s:p>
        </s:TextFlow>
    </s:content>
</s:RichText>