初めてのAdobe AIRアプリケーションの開発　チュートリアル

AIR

こまかいとこを段々つめてこうとおもったけど、第5回 初めてのWindowsアプリケーションの開発って記事があったので同じものをAirで作って見ようチュートリアル。
C#アプリとかやってた人ならAir相当さわりやすいかもね。

完成はこんな感じの

作り方

  • AIRプロジェクトをとりあえず作ります
  • できた「プロジェクト名.mxml」にとりあえず時間を表示するためのLabelコンポーネントを配置

こんな感じで。MXML直接編集してもOK。

  • Labelに対してIDにとりあえず「dateLabel」ってつけておきます
  • 幅とかフォントサイズとか適当に指定


とりあえずここからは完成後のソースを見ながら説明してきます

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	width="300"
	height="100"
	alpha="0.7"
	creationComplete="initApp()"><!--【１】-->
	
	<mx:Script>
	<![CDATA[
	//【２】
	private function initApp( ):void{
		setInterval( _onInterval , 1000 );
	}
	//【３】
	private function _onInterval():void{
		var d:Date = new Date();
		var txt:String =
					d.getHours() + "時" +
					d.getMinutes() + "分" +
					d.getSeconds();
		dateLabel.text = txt;
	}
	]]>
	</mx:Script>
	<mx:Label id="dateLabel" x="0" y="0" text="" width="100%" height="100%" fontSize="40" fontWeight="bold"/>
</mx:WindowedApplication>
  • 【１】mx:WindowedApplicationにcreationComplete="initApp()"を定義
  • 【２】mx:Scriptを定義して、実際のコードを書く場所を作る。上記で定義したinitAppメソッドを作っておく
  • 「初めてのWindowsアプリケーションの開発」でTimerを１秒に一回まわしているので、setInterval();を定義
    • setInterval( _onInterval , 1000 );
    • setInterval( メソッドの参照 , 第一引数で指定したメソッドを呼ぶ間隔 );
  • 【３】上で定義した_onIntervalを定義。labelに時間を代入

ウインドウを半透明に

なんか元のチュートリアルが半透明にするってのが入っているから同じようにしてみる。

  • 「プロジェクト名-app.xml」を開く
  • rootContentタグのsystemChromeをnone、transparentをtrueに
  • mxmlのmx:WindowedApplicationタグにalphaの指定を追加


以上で完成