背番号を読み上げられ、大声で返事をする息子の横顔。
名前の漢字が間違えている背番号表・・・・切なくて涙がでそうでした。
愛しているよ!頑張ろうぜっ。
出来の悪い子ほど可愛いいって本当かもね。
背番号を読み上げられ、大声で返事をする息子の横顔。
名前の漢字が間違えている背番号表・・・・切なくて涙がでそうでした。
愛しているよ!頑張ろうぜっ。
出来の悪い子ほど可愛いいって本当かもね。
本日は、定期健診やら色々あったのに「面倒くさい!」と予定を全部ぶっちぎり。
随分前にTSUTAYAで借りて、見る時間がなく見れなかったものを旦那様がディスクに落としてくれてた「School Of Rock」を見た。
Rockとコメディーはよく似合うのね。
私にとって、すごーく面白い映画だった。
ピート・タウンゼントやら 、ラモーンズ やらアレサ・フランクリンやら私のアイドル達が沢山でてきて(映像だけど)、楽しかったー
ちょっとBLUES BROTHERSみたい?な感覚。
大体「ローック!」なんて言ってる人たちは、世間の感覚からすげー外れてて、外側から見るとある種コメディーチック。
大半の人はこの映画で言うところの「観客をビリビリさせる」事なんかできないのに、沢山の労力と時間とお金を使って、どうしようもない音楽を大真面目にやりながら大口をたたくのだ。
でも、やっぱり私はこの種の人達が大好き!
Let's Rooock!!!!!
■新機能について
・画面遷移用の新しいコンポーネントは次の通り
spark.components.View:画面用コンポーネント
spark.components.ViewNavigator:画面遷移コンポーネント
・上記アプリケーションを定義するためのコンポーネントは次の通り
spark.components.ViewNavigatorApplication:ViewNavigatorコンポーネントを1つ保持
spark.components.TabbedViewNavigatorApplication:ViewNavigatorコンポーネントを複数保持
■VIEWNAVIGATORコンポーネント
ViewNavigatorコンポーネントとは:
画面遷移の履歴を保持して遷移できるようにしたコンポーネント
[構成]
部品名 用途
actionBar 画面の情報を表示するActionBarコンポーネント
contentGroup 画面を配置するGroupコンポーネント
■VIEWNAVIGATORコンポーネントの機能
1)画面表示機能
Viewコンポーネントで作成した画面を表示する機能
2)画面遷移機能
動的な画面遷移とその遷移を管理する機能
次の画面に進めると履歴し、履歴をもとに前の画面に戻せる
メソッド名 処理
pushView 指定した画面へ進めて、履歴を1つ追加します。
popView 画面を1つ戻して、履歴を1つ削除します。
popToFirstView 初期画面まで戻して、それまでの履歴を削除します。
popAll 全ての履歴を削除します。
replaceView 現状の画面と新しい画面を入れ替えます。
・画面遷移時のトランジション
また、画面遷移時のトランジション(動作)は、4種類が用意されている
メソッド名 処理
spark.transitions.SlideViewTransition 上下左右からスライドするエフェクト
(この内右からのスライドがデフォルト)
spark.transitions.FlipViewTransition 回転するエフェクト。
spark.transitions.CrossFadeViewTransition 透明度でフェードアウト・イン
spark.transitions.ZoomViewTransition ズームするエフェクト
[設定方法]
① ViewNavigatorのプロパティでデフォルトのトランジションを指定
メソッド名 処理
defaultPushTransition 次の画面に進む際のトランジションを指定します。
defaultPopTransition 前の画面へ戻る際のトランジションを指定します。
② 画面遷移する度にメソッドで指定する方法
pushViewやpopViewの引数にトランジションクラスを指定
■VIEWコンポーネント
Viewコンポーネントとは:
画面を作成するための基礎となるコンポーネント
Viewコンポーネントをルートタグにして、ボタンやラベルなどのコンポーネントを配置して画面を作成
ViewコンポーネントにはViewNavigatorコンポーネントと連携するためのプロパティがある。
そのプロパティでは表示・非表示の他、titleの文字を指定したり、右側のグループのレイアウトなどを指定できる。
-------------------
ViewNavigatorコンポーネントとViewコンポーネントを用いたアプリケーション
-------------------
■VIEWNAVIGATORAPPLICATIONコンポーネント
ViewコンポーネントとViewNavigatorコンポーネントを利用して画面遷移を行うようなアプリケーションを構築するための
アプリケーションコンポーネント。
ViewNavigatorApplicationコンポーネントには、ViewNavigatorコンポーネントを内部的に1つ保持。
よって、ViewNavigatorApplicationコンポーネントも画面履歴を管理可能。
また、保持しているViewNavigatorコンポーネントのfirstViewプロパティを設定するために、
ViewNavigatorApplicationコンポーネントにもfirstViewプロパティが用意す。
ソースコード:
<s:ViewNavigatorApplication firstView="views.ListView">
</s:ViewNavigatorApplication>
・ ハードウェアキーとの連携
ViewNavigatorApplicationコンポーネントでは、デバイスのハードウェアキーと連携。
キー 動作
Menu アプリケーションメニュー表示(Viewコンポーネントごと)。
Back ViewNavigatorコンポーネントのpopViewメソッドと同等。
ソースコード:
<s:viewMenuItems>
<s:ViewMenuItem label="再読み込み"/>
<s:ViewMenuItem label="初期化"/>
</s:viewMenuItems>
■TABBEDVIEWNAVIGATORAPPLICATIONコンポーネント
TabbedViewNavigatorApplicationコンポーネントは、ViewNavigatorコンポーネントを複数保持可。
複数のViewNavigatorコンポーネントを切り替えるために、下方にTabBarを表示。
TabBarは、ViewコンポーネントのtabVisibleプロパティで操作することも可。
また、ハードウェアキーに対しては、ViewNavigatorApplicationコンポーネントと同様に対応。
ただし、現在表示しているViewNavigatorコンポーネントに対してのみ処理。
ソースコード:
<?xml version="1.0" encoding="utf-8"?>
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:ViewNavigator label="Tab1" width="100%" height="100%" firstView="views.Tab1View"/>
<s:ViewNavigator label="Tab2" width="100%" height="100%" firstView="views.Tab2View"/>
</s:TabbedViewNavigatorApplication>
■スキンについて
スキンを活用しないとみんな同じようなインターフェイスになります。
デザインをするためにはスキンを使いましょう(以上 flexbuilder4ガイドより)
■..でスキンって何か
MXMLで作成でき、読み書きが簡単であると共に、ツールによるアクセスも容易なもの
デザイン
■どうやってつくるのか?
http://www.adobe.com/jp/devnet/flex/articles/flex4_skinning_02.html
FXGというマークアップ言語を使う
流れ的には(ボタンの場合):
① 単純なボタンスキン作成
② ボタングラフィックスのボタンスキンへの変換
③ Buttonコンポーネントに関連付ける
① 単純なボタンスキン作成
Sample1.mxml
<?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">
<s:Group verticalCenter="0" horizontalCenter="0">
<s:Rect id="rect" radiusX="4" radiusY="4" top="0"
right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor color="0x77CC22" />
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x131313" weight="2"/>
</s:stroke>
</s:Rect>
<s:SimpleText text="Button!" color="0x131313"
textAlign="center" verticalAlign="middle"
horizontalCenter="0" verticalCenter="1"
left="12" right="12" top="6" bottom="6"
/>
</s:Group>
</s:Application>
② ボタングラフィックスのボタンスキンへの変換
ButtonSkin1.mxml
<?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" alpha.disabled=".5">
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<!-- border and fill -->
<s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor color="0x77CC22" />
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x131313" weight="2"/>
</s:stroke>
</s:Rect>
<!-- text -->
<s:SimpleText text="Button!" color="0x131313"
textAlign="center" verticalAlign="middle"
horizontalCenter="0" verticalCenter="1"
left="12" right="12" top="6" bottom="6"
/>
</s:Skin>
③ Buttonコンポーネントに関連付ける
これは2つ方法あり。skinClassというCSSスタイルを指定するか mxmlでインラインに設定次の例は mxmlへのインライン指定
Sample2.mxml
<?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">
<s:Button verticalCenter="0" horizontalCenter="0" skinClass="ButtonSkin1"
click="trace('I\'ve been clicked!')" focusIn="trace('focus...on me?')" />
</s:Application>
■スキンステート
http://www.adobe.com/jp/devnet/flex/articles/flex4_skinning_03.html
例えば、Buttonコンポーネントには、up、over、down、disabledの4つの基本的スキンステートがあります。
各ステートごとに異なるデザインを設定できます。
ButtonSkin2.mxml
<?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" alpha.disabled=".5">
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<!-- dropshadow for the down state only -->
<s:Rect radiusX="4" radiusY="4" top="0" right="0" bottom="0"
left="0" includeIn="down">
<s:fill>
<s:SolidColor color="0"/>
</s:fill>
<s:filters>
<s:DropShadowFilter knockout="true" blurX="5" blurY="5"
alpha="0.32" distance="2" />
</s:filters>
</s:Rect>
<!-- border and fill -->
<s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0"
bottom="0" left="0">
<s:fill>
<s:SolidColor color="0x77CC22" color.over="0x92D64E"
color.down="0x67A41D"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x131313" weight="2"/>
</s:stroke>
</s:Rect>
<!-- highlight on top -->
<s:Rect radiusX="4" radiusY="4" top="2" right="2" left="2"
height="50%">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF" alpha=".5"/>
<s:GradientEntry color="0xFFFFFF" alpha=".1"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- text -->
<s:SimpleText text="Button!" color="0x131313"
textAlign="center"
verticalAlign="middle"
horizontalCenter="0" verticalCenter="1"
left="12" right="12" top="6" bottom="6"
/>
</s:Skin>
■スキンパーツ
http://www.adobe.com/jp/devnet/flex/articles/flex4_skinning_04.html
Sparkのスキン可能コンポーネントには、コンポーネントの定義に使用できるスキンパーツのセットがあります。スクロールバーの場合、加算ボタン、減算ボタン、トラック、サムの4つのスキンパーツがあります。ボタンの場合、スキンパーツはlabelElementの1つだけです。
■スキン可能コンポーネントの作成
http://www.adobe.com/jp/devnet/flex/articles/flex4_skinning_05.html
------
ネタ元:Adobeのサイト↓
http://www.adobe.com/jp/devnet/flex/articles/flex4_skinning.html
■できる事
Google AndroidとApple iOSの両方のデバイスをサポートするアプリ開発。
■Adobeの想定しているワークフロー
Flash Builder(開発)→ Flash Catalyst(インタラクションデザイナー)→ Photoshop/Illustrator(ビジュアルデザイナー)
手順:
① Flash Builderでスキン適用可能なコンンポーネントの作成
② Flash Catalystでスキンを変更してデザイン
開発とデザインを兼務する人向けには:
Flash Builderでプロジェクトを選択して「Edit in Flash Catalyst(Flash Catalystで編集)」を選択し、Flash Catalystで必要なデザインの変更できる。
■パッケージ、クラス、forループ、whileループ、switchブロックの定義など、すぐに使用できる100種類を超える組み込みテンプレートが提供。
カスタマイズもでき他のマシンにエクスポートもできるので、メンバー全員がプロジェクト用に統一されたテンプレートのセットを使って作業できる。
■サーバーサイド開発との連携
FlexとPHPを使ったWebアプリケーションやモバイルアプリケーションを構築する開発プロセスを合理化
------------------------------
元ネタはAdobeのサイトです↓
http://www.adobe.com/jp/devnet/flashbuilder/articles/whatsnew-flashbuilder-45...