Flexスタイルとフォント

3709 ワード

Web css Flex スクリプト Flash

FlexがサポートするスタイルはFlashより豊富で、スタイル定義の方法も多い.FlashよりもFlexが強く、Web開発に適した場所の一つでもあります.
スタイル定義のタイプ
1.外部スタイルシート


<mx:Style source='/css/myStyle.css'/>

Flexはグローバルスタイルシートglobalを呼び出します.css、このグローバルスタイルシートはflex-config.xml定義:


<global-css-url>/WEB-INF/flex/global.css</global-css-url>

システムのデフォルトのスタイルシートファイルglobal.cssファイルにはスタイル定義はありません.手動でグローバルスタイルを追加したり、デフォルトのグローバルスタイルファイルパスを変更したりすることができます.たとえば、グローバルスタイルファイルを次のようにします.


<global-css-url>/css/styles.css</global-css-url>

ちなみに、外部cssファイルを定義する場合、色スタイルには4つの定義方法があります.


.myclass { fillColor: #6666CC } // 16      
.myclass { borderColor: rgb(77%,22%,0%) } // RGB     
.myclass { errorColor: rgb(0,255,0) } // 10  RGB    
.myclass { color: Blue } // VGA

2.ローカルスタイル定義
を使用して現在のファイルのスタイルを定義します.
次の例ではmyFontStyleサブクラススタイルを定義します.対応するスタイルを使用するには、コンポーネントでstyleNameプロパティを使用してスタイルを適用します.


<mx:Style> 

.myFontStyle {  fontSize: 15  }

</mx:Style>

<mx:Button id='myButton' styleName='myFontStyle' label='Click Here' >

次のスタイルは、Buttonコンポーネントのすべてのスタイルを定義します.このスタイルで定義されたスタイルは、使用時にスタイル名を指定する必要はありません.


<mx:Style> 
Button {  fontSize: 15  }
</mx:Style>

<mx:Button id='myButton' label='Click Here' >

3.インラインスタイル定義
個別に特殊な処理が必要なコンポーネントについては、以下の方法で埋め込みスタイル定義を行うことができます.


<mx:Button id='myButton' fontSize='15' color='0x9966CC' label='My Button'/>

4.スクリプトスタイル定義の使用
この方法は、Flashの従来のASスクリプト方式を使用してスタイルを定義し、より柔軟性が高く、StyleManagerクラスおよびgetStyle()およびsetStyle()メソッドを使用して、以下に示すようにします.


<mx:Script>
<![CDATA[

//  styleManger 
mx.styles.StyleManager.styles.ToolTip.fontWeight = 'bold';
//      
lb1.text=ip1.getStyle('fontSize');
//      
lb1.text=ip1.setStyle('fontSize',newSize);
  
]]>
</mx:Script>

3つのスタイル定義が同時に使用される場合、優先度は次のようになります.
インラインスタイル>ローカルスタイル定義(スクリプトスタイル定義)>外部スタイル定義
特殊スタイル定義
スタイル定義を行う際には、いくつかのFlexの特殊なスタイル定義に注意する必要があります.
1.グローバルスタイル定義
定義されていないすべての制御コンポーネントにglobalスタイルを適用


global {  
fontSize:22;
textDecoration: underline;
}

2.アプリケーションスタイル定義
ApplicationタグはFlexのルートタグであり、Applicationスタイルは未定義のコンテナおよびサブコンテナのスタイルを定義するために使用されます.


Application {  
marginLeft: 0px;
marginRight: 0px;
marginTop: 0px;
marginBottom: 0px;
horizontalAlign: 'left';
}

フォントのスタイル定義について
1.デバイスフォントの使用


.myClass {  
fontFamily: Arial, Helvetica, '_sans';
color: Red;
fontSize: 22;
fontWeight: bold;
}

2.マイグレーションフォントの使用


<mx:Style>
@font-face { 
src:url('akbar.ttf');
fontFamily: myfont;
}

@font-face { 
src:url('akbar.ttf');
fontWeight: bold;
fontFamily: myfontBold;
}

</mx:Style>

フォントスタイルを定義すると、fontFamilyで次のようなフォントスタイルを適用できます.


Accordion {  
fontFamily: myfont
}

asp.Netc#検証日付フォーマット

asp.Netエラー処理クラス+SESSIONクラス