上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。




ライブラリを用いて、使い勝手の良さそうなフォームを作ってみました。
使用ライブラリはFlexLibとDegrafaです。



FlexLib


内容は主にFlex3の基本コンポーネントを拡張させた内容となっています。
今回はWindowShadeを使用しています。

以下のサイトからDL出来ます。
http://code.google.com/p/flexlib/


Degrafa


内容は主に描画関連(Graphics)のコンポーネントになっています。
今回はButton部分の描画に使用しています。

以下のサイトからDL出来ます。
http://www.degrafa.org/

Main.mxml



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:containers="flexlib.containers.*"
xmlns:controls="flexlib.controls.*"
xmlns:degrafa="com.degrafa.*"
xmlns:paint="com.degrafa.paint.*"
xmlns:geometry="com.degrafa.geometry.*">

<mx:Style source="./shadow.css" />

<containers:WindowShade id="shade" opened="false"
openIcon="{null}" closeIcon="{null}"
paddingTop="0" headerLocation="bottom"
headerRenderer="HeaderRenderer">

<mx:Panel width="100%" height="100%"
horizontalAlign="center" verticalAlign="middle">
<mx:Form>
<mx:FormItem label="ユーザ名">
<controls:PromptingTextInput prompt="username" />
</mx:FormItem>
<mx:FormItem label="パスワード">
<controls:PromptingTextInput prompt="password" displayAsPassword="true" />
</mx:FormItem>
<mx:HBox width="100%" horizontalAlign="center">
<mx:Button label="Login" />
</mx:HBox>
</mx:Form>
</mx:Panel>

<containers:filters>
<mx:DropShadowFilter alpha=".3" angle="90" />
</containers:filters>
</containers:WindowShade>

</mx:Application>


HeaderRenderer.mxml



<?xml version="1.0" encoding="utf-8"?>
<controls:CanvasButton xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="20"
xmlns:containers="flexlib.containers.*"
xmlns:controls="flexlib.controls.*"
xmlns:degrafa="com.degrafa.*"
xmlns:paint="com.degrafa.paint.*"
xmlns:geometry="com.degrafa.geometry.*"
skin="mx.skins.ProgrammaticSkin">

<mx:Script>
<![CDATA[
import flexlib.containers.WindowShade;
]]>
</mx:Script>

<mx:Box width="100%" horizontalAlign="center">
<degrafa:Surface width="80">
<degrafa:GeometryGroup>

<!--ボタン 背景-->
<geometry:RoundedRectangle width="80" height="15">
<geometry:fill>
<paint:GradientFillBase angle="90">
<paint:GradientStop color="#000000" />
<paint:GradientStop color="#333333" />
</paint:GradientFillBase>
</geometry:fill>
</geometry:RoundedRectangle>

<!--ボタン 矢印上-->
<geometry:Polygon>
<geometry:data>40,5 35,13 45,13</geometry:data>
<geometry:stroke>
<paint:SolidStroke color="#333333" alpha="{WindowShade(parent).opened ? 1 : 0}" weight="1" />
</geometry:stroke>
<geometry:fill>
<paint:SolidFill color="#ffffff" alpha="{WindowShade(parent).opened ? 1 : 0}" />
</geometry:fill>
</geometry:Polygon>

<!--ボタン 矢印下-->
<geometry:Polygon>
<geometry:data>40,13 35,5 45,5</geometry:data>
<geometry:stroke>
<paint:SolidStroke color="#333333" alpha="{WindowShade(parent).opened ? 0 : 1}" weight="1" />
</geometry:stroke>
<geometry:fill>
<paint:SolidFill color="#ffffff" alpha="{WindowShade(parent).opened ? 0 : 1}" />
</geometry:fill>
</geometry:Polygon>

</degrafa:GeometryGroup>
</degrafa:Surface>
</mx:Box>
</controls:CanvasButton>


WindowShade


ボタンを表示させ、そのボタンをクリックすることでWindowShadeの内容を
表示・非表示するためのコンテナーです。
表示するボタンは「HeaderRenderer.mxml」で記載しています。

RoundedRectangle


WindowShadeで使用するボタンの背景部分を描画しています。
RoundedRectangleで四角形を描画し、fillで塗りつぶし(グラデーション)を行っています。

Polygon


ボタン上に描画する矢印(▲、▼)を描画しています。
dataの数値で描画する座標を指定しており、三角形を描画する際に
必要な3点の座標を指定しています。

 <!--ボタン 矢印上-->
 <geometry:data>40,5 35,13 45,13</geometry:data>
 <geometry:data>[x座標,y座標] [x座標,y座標] [x座標,y座標]</geometry:data>



SolidStroke


Polygonのdataで指定した座標の順で線を引きます。
alphaでは、親コンポーネント(WindowShade)のプロパティ(open)を参照し、
表示の時はalpha=0、非表示の時はalpha=1としています。

SolidFill


Polygonのdataで指定した座標内を塗りつぶしします。
SolidStrokeと同様に、alphaでは、親コンポーネント(WindowShade)の
プロパティ(open)を参照し、表示の時はalpha=0、非表示の時はalpha=1としています。


実行結果は以下のようになります


※ 実行結果はスタイルシートを適用させています。
以下のサイトにある「Shadow」のThemeを使用しています。
http://www.scalenine.com/
少しでも参考になれば応援お願いします。












上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。