Flex 4 の DateField の角を丸くするには?
-
20-09-2019 - |
質問
Flash ビルダーと flex 4 SDK を使用しており、 DateField
その中で、 TextInput
コンポーネントの角が丸くなっています。
次のコードを試してみましたが、機能しませんでした。
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768"
xmlns:components="components.*">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
@namespace components "components.*";
.roundedTI
{
corner-radius: 10;
borderStyle: solid;
}
</fx:Style>
<mx:DateField textInputStyleName="roundedTI"/>
</s:Application>
コミュニティは、コード内の目に見えるエラーを修正したり、その方法を示す代替ガイドやチュートリアルを教えてくれたりすることはできますか?
解決
Flex 4 では、すべてがスキンにあります。CSS は主に、コンポーネントまたはコンポーネントのクラスに 1 つのスキンを適用するためだけに使用されますが、Flex 3 では大量のプロパティを設定するために使用されていました。ただし、すばらしいのは、CSS で任意のスタイル プロパティ値を定義でき、その値に次の方法でアクセスできることです。 getStyle
肌の中に!
そのため、彼らは cornerRadius
もはや財産。代わりに、「DateFieldSkin」を作成し、CSS セレクターを介してコンポーネントに適用する必要があります。デフォルトの DateField スキンは、 DropDownSkin
. 。これを解決するコードは次のとおりです。
日付フィールドスキン:
<?xml version="1.0" encoding="utf-8"?>
<s:Skin
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:states>
<s:State name="normal"/>
<s:State name="disabled"/>
</s:states>
<!--- @private -->
<s:Rect id="border" left="0" right="0" top="0" bottom="0"
radiusX="{getStyle('cornerRadius')}" radiusY="{getStyle('cornerRadius')}">
<s:stroke>
<!--- @private -->
<s:SolidColorStroke id="borderStroke" color="0x5380D0" />
</s:stroke>
<s:fill>
<!--- @private -->
<s:SolidColor id="bgFill" color="0xFFFFFF"/>
</s:fill>
</s:Rect>
</s:Skin>
サンプルアプリ:
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
minWidth="1024" minHeight="768">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
.roundedTI
{
corner-radius: 10;
borderStyle: solid;
borderSkin: ClassReference("DateFieldSkin");
}
</fx:Style>
<mx:DateField textInputStyleName="roundedTI"/>
</s:Application>
半径値をスキンにハードコードしたり、さらに動的で最適化された処理を実行したりすることもできます。これは単なる始まりです。
うまくいったら教えてくれ、 ランス
所属していません StackOverflow