スタイルシートをダウンロード出来るサイト：Scalenine.com

Scalenine.com http://scalenine.com/

このサイトから直接ダウンロード出来るものも多いし、リンクになっている場合もある。

Flex用の設定済みスタイルシートを配布しているサイトはとても少ないので、
デザインセンス０の僕にはこういうサイトがあると、すごく助かる。

ここで落としてきたスタイルシートを使うに当たって注意する点がいくつかある。

日本語

スタイルシートに日本語表示が出来ないフォントが設定されている場合がある。
このようなフォントが設定されていると、日本語は表示されないか文字化けを起こすので、
日本語が使えるフォントに設定を変える必要がある。

デザイン崩れ

Flex2用に設定されているためか、Flex3で使おうとすると、まともに表示出来ない場合もある。

実際に落としてきたスタイルシートを適用してみる。

使ってみた

デフォルト
http://tsuyabu.in/~umezo/samples/flex/stylesheet/default.swf

iTunes7 スタイル適用
http://tsuyabu.in/~umezo/samples/flex/stylesheet/styled.swf

Main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[
    import mx.managers.PopUpManager;
    private function popup():void {
      var ppp : Popup = new Popup();
      PopUpManager.addPopUp( ppp , this , true );
      PopUpManager.centerPopUp( ppp );
    }
    ]]>
  </mx:Script>
  <!--
  <mx:Style source="../itunes7/style/jukebox.css"></mx:Style>
  -->
  <mx:ApplicationControlBar >
      <mx:MenuBar id="myMenuBar" labelField="@label" >
    <mx:XMLList>
      <menuitem label="File" >
        <menuitem label="About" />
        <menuitem label="Check update" />
        <menuitem label="exit" />
      </menuitem>
      <menuitem label="Control"/>
      <menuitem label="View"/>
      <menuitem label="Option" >
        <menuitem label="Preference" />
      </menuitem>
      <menuitem label="Help"/>
    </mx:XMLList>
  </mx:MenuBar>  
  </mx:ApplicationControlBar>
  
  <mx:Button click="popup();" label="popup" />
  <mx:Button/>
  <mx:TextInput/>
  <mx:TextArea/>
</mx:Application>

Popup.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" title="TestPopup" width="100%">
  <mx:Script>
    <![CDATA[
    import mx.managers.PopUpManager;
    ]]>
  </mx:Script>
  <mx:VBox width="100%" >
    <mx:HBox width="100%">
      <mx:Label text="moge" width="50" />
      <mx:TextInput width="100%" />
    </mx:HBox>
    <mx:HBox width="100%">
      <mx:Label text="moge" width="50" />
      <mx:TextInput width="100%" />
    </mx:HBox>
    <mx:HBox width="100%">
      <mx:Label text="moge" width="50" />
      <mx:TextInput width="100%" />
    </mx:HBox>
    <mx:HBox width="100%">
      <mx:Label text="moge" width="50" />
      <mx:TextInput width="100%" />
    </mx:HBox>
    <mx:HBox width="100%">
      <mx:Label text="moge" width="50" />
      <mx:TextInput width="100%" />
    </mx:HBox>
    <mx:HBox width="100%">
      <mx:Label text="moge" width="50" />
      <mx:TextInput width="100%" />
    </mx:HBox>
    <mx:HBox width="100%">
      <mx:Label text="moge" width="50" />
      <mx:TextInput width="100%" />
    </mx:HBox>
    <mx:HBox width="100%">
      <mx:Label text="moge" width="50" />
      <mx:TextInput width="100%" />
    </mx:HBox>
    <mx:HBox width="100%">
      <mx:Label text="moge" width="50" />
      <mx:TextInput width="100%" />
    </mx:HBox>
    <mx:HBox width="100%">
      <mx:Label text="moge" width="50" />
      <mx:TextInput width="100%" />
    </mx:HBox>
    <mx:HBox width="100%">
      <mx:Label text="hege" width="50" />
      <mx:TextInput width="100%" />
    </mx:HBox>
    <mx:Button width="100%" label="OK" click="PopUpManager.removePopUp( this ) ;"/>
  </mx:VBox>
</mx:TitleWindow>

FlashDevelopプロジェクトファイル
http://tsuyabu.in/~umezo/samples/flex/stylesheet/StyleTest.zip

まとめ

スタイルシートを使うと1行でがらっと見た目がかっこよくなって美味しい。
しかし、配布しているサイトは少ないので、Scalenineのようなサイトがあると本当に助かる。