MXMLにCSSの適用

勉強のためにRSSリーダー風のレイアウトにCSSを適用してみた。

それにしてもFlexはXHTML + CSS + Javascriptによく似ている。

しかも開発スピードが非常に早い。

下のモックも朝30分ほどでできた。HTMLじゃ2,3日以上かかってただろう。

MXML



<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

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

	<mx:HDividedBox top="10" right="10" bottom="10" left="10">

		<mx:Panel width="25%" height="100%" layout="absolute" title="メニュー">

			<mx:Accordion top="35" right="10" bottom="10" left="10">

				<mx:HBox label="MXML" width="100%" height="100%">

					<mx:List width="100%" height="100%">

						<mx:Object label="aaaa" />

						<mx:Object label="aaaa" />

						<mx:Object label="aaaa" />

						<mx:Object label="aaaa" />

						<mx:Object label="aaaa" />

						<mx:Object label="aaaa" />

						<mx:Object label="aaaa" />

						<mx:Object label="aaaa" />

						<mx:Object label="aaaa" />

						<mx:Object label="aaaa" />

					</mx:List>

				</mx:HBox>

				<mx:HBox label="CSS" width="100%" height="100%">

				</mx:HBox>

				<mx:HBox label="ActionScript" width="100%" height="100%">

				</mx:HBox>

			</mx:Accordion>

		</mx:Panel>

		<mx:VDividedBox width="75%" height="100%">

			<mx:Panel width="100%" height="50%" layout="absolute" title="ビュー">

				<mx:DateField top="35" right="10" bottom="10" left="10" />

			</mx:Panel>

			<mx:Panel width="100%" height="50%" layout="absolute" title="ソース">

				<mx:RichTextEditor top="35" right="10" bottom="10" left="10" styleName="Rtext">

				</mx:RichTextEditor>

			</mx:Panel>

			</mx:VDividedBox>

	</mx:HDividedBox>

</mx:Application>

CSS



Application {background-color:#000;}

Panel {

   borderStyle: solid;

   borderColor: #666666;

   borderAlpha: 1;

   borderThickness: 0;

   borderThicknessLeft: 10;

   borderThicknessTop: 0;

   borderThicknessBottom: 10;

   borderThicknessRight: 10;

   roundedBottomCorners: true;

   cornerRadius: 3;

   headerHeight: 26;

   backgroundAlpha: 0.74;

   highlightAlphas: 0.52, 0.13;

   headerColors: #000000, #333333;

   backgroundColor: #ffffff;

   dropShadowEnabled: true;

   shadowDistance: 0;

   titleStyleName: "mypanelTitle";

}

.mypanelTitle {

   letterSpacing: 0;

   color: #ffffff;

}

.Rtext {

   borderStyle: none;

   borderColor: #666666;

   borderAlpha: 1;

   borderThickness: 0;

   borderThicknessLeft: 10;

   borderThicknessTop: 0;

   borderThicknessBottom: 10;

   borderThicknessRight: 10;

   roundedBottomCorners: true;

   cornerRadius: 0;

   headerHeight: 0;

   backgroundAlpha: 0;

   highlightAlphas: 0.52, 0.13;

   headerColors: #000000, #333333;

   backgroundColor: #ffffff;

   dropShadowEnabled: true;

   shadowDistance: 0;

   titleStyleName: "Rtexttitle";

}

.Rtexttitle {

   letterSpacing: 0;

   color: #ffffff;

}