2011年9月2日金曜日

Flash Builder開発(画面遷移フレームワーク)

■新機能について

・画面遷移用の新しいコンポーネントは次の通り

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>

 

 

 

Posted via email from cohiro's posterous

2011年8月25日木曜日

Flash Builder4.5でやる少しデザイン寄りの事

■スキンについて

スキンを活用しないとみんな同じようなインターフェイスになります。

デザインをするためにはスキンを使いましょう(以上 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

 

Posted via email from cohiro's posterous

Flash Builder4.5でできる事を調べる

■できる事

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...

Posted via email from cohiro's posterous

仕事モードオン!

この年から、そして子育て中のこの状況の中で、新たに技術を習得するつもりの自分が好きで嫌いだ。

 

Posted via email from cohiro's posterous

2011年8月23日火曜日

暑くてエスニックな気分で、ランチはタイ料理とする。

1288631440

RAKU THAI PHENG ROI というお店。隣が4人の女子グループ!
なんか羨ましいなぁ。

それにしても辛っ

Posted via email from cohiro's posterous

浪江のショッピングセンターサンプラザとハンバーグとおじいちゃん

私の大好きなおじいちゃんは、津島という福島の山の上の方に住んでいました。
おじいちゃんは、お酒が好きで陽気で昔話の上手な子供にとっては最高の人でした。

先ほど寝るときに息子が「暑いから何もかけないで寝る」と言うので「お腹だけでいいからかけて寝なさい」と自分で言ってその津島のおじいちゃんを思い出しました。

おじいちゃんは、いつもなんだかいい方法を思いついて私に教えてくれたのですが、その内の一つが「寝しなが暑くても、冷えてきた時の為お腹だけには布団をかけておく」というものでした。
兎に角布団をかけて寝ろ、という母親や叔母に「嫌だ」と言いつづける言うことを聞かない困った子供に「こんなもんでいいんじゃない」と悪戯っぽく笑って隣に居てくれるような人でした。

私の小学生の頃の夏休みと言うと、お盆の頃から夏休みの終わりまでの結構長い間中津島で過ごしていました。
今思えば、うちは商売をしていて両親共忙しかったので、体よく預けられていただけかもしれません。
最初の内は裏山でキツネを見つけたり、トンボをおいかけたりして田舎を楽しんでいるのですが、その内そんなものにも飽きて「つまんないなぁー」となってきはじめ、その絶妙なタイミングでおじいちゃんは「おい、ハンパーク食べにいくか?」とさそってくるのです。(おじいちゃんはいくら違うと言っても、ハンバーグをハンパークと呼んでいました)

津島の周りにはハンバーグなんて洒落たものを出すお店はないので、バスで一時間以上グルグルと山道を下って、浪江駅の辺りまでおりて行き、店舗がいくつか集まっているショッピングモールの中のレストランに連れて行ってくれました。

小さかったし、30年も前の話です。よく連れて行ってくれたあのショッピングモールが具体的にどこで、なんていう名前だったのか、わかりませんでしたが、ただ行き帰りに使った浪江駅のそばだって事だけはわかっていました。

浪江駅ってもっと海沿いだったよね。あのショッピングモールはどこでなんていう名前だったんだろう、とgoogle mapで探してみました。

「ショッピングセンター サンプラザ」

このお店のページを検索し、会社の設立をみたら私の生まれる前からやってる。ここだ間違いない。
また、近所でお店を再オープンさせ、仮設住宅に物資を納品したりしているようだ。

どうか、福島で暮らす人たちにこれ以上悪いことがおこりませんように。
福島で事業をしている会社と従業員が希望を持って、存続していけますように。
どうか、おじいちゃん、守ってください。

Posted via email from cohiro's posterous

2011年3月23日水曜日

東京都営住宅が被災者向けに無料で提供しているというので問い合わせてみた所、現在東京都に避難している人だけが対象との事。残念。#save_fukushima

叔父叔母は自宅から遠く離れたくないみたいで高いのに福島市内のウィークリーマンション。
早期に戻れないと思うのだけど、、、

Posted via email from cohiro's posterous

2011年3月5日土曜日

2011年3月4日金曜日

昼休みに銀座を闊歩。こんなに変わったのーと見ていたら、ずっと来たかったアバクロ到着。入りにくい。入れない。

以前いた職場に戻れる事になったので、銀座ともさようなら。
残り少ないもの、楽しもうっと。

Posted via email from cohiro's posterous

2011年2月22日火曜日

いつも一緒だった友達が、あの頃は楽しかったね、今は私も恋もしないし、毎晩友達と話すような事もなくなっちゃったのよ。って。

そうかぁ、そうだよね。
だけどその事が無性に寂しくて涙がでそうなのは、弱ってるからかなぁ。
楽しかったなぁ、もう一度戻りたい、って年寄りみたい、私。

Posted via email from cohiro's posterous

2011年2月13日日曜日

バレンタインの用意で娘とフォンダンショコラを焼いた。

娘は大きくなったら、ケーキ屋さんになりたいんだって言うので、頑張ってました。

Posted via email from cohiro's posterous

2011年2月11日金曜日

2011年2月8日火曜日

部屋をきれいにしたい病。久々に発病中。気持ちいいけど、疲れる。

子供とのいたちごっこでなかなか終了しないプラス維持できないのに、どうしようもなくきれいにしたい!

Posted via email from cohiro's posterous

2011年2月1日火曜日

向いていないものはやらなくていいや。それが自分の一番の評価ポイントでも。

マーケティング、嫌いじゃないけど、セットとしてついてくる人を説得したり説明したりする事。
小さい頃から苦手だもん。
やーらない。やなんだもん。

Posted via email from cohiro's posterous

2011年1月31日月曜日

新幹線、はやぶさの中吊り。格好いいなぁ、五年前なら息子もそういうはず。

変に親子は似るのです。
音楽の趣味も似てるので、多分遺伝子的なものが反応するのだと思います。
ずっと離れて暮らしてた妹も趣味が似てる。

Posted via email from cohiro's posterous

家族からの誕生日プレゼント。めちゃくちゃ嬉しかった。

息子からは一年間有効のマッサージパスとカラフルな手紙。
旦那様からは、イオン導入機、大好きな発泡日本酒、マーケティングの分かりやすい本と1日沢山家事を手伝ってくれました。
娘からはチュー。

何だか物凄く嬉しかったからか、肩凝りが一気に解消。 また毎日頑張る気力が漲っております。

Posted via email from cohiro's posterous

2011年1月28日金曜日

2011年1月24日月曜日

夜の雨。なんかしっとりいい雰囲気。

久しぶりだからか、自分が出かける時間じゃないからか、洗濯物がでてない時間だからか、雨がいとおしい気がします。

Posted via email from cohiro's posterous

2011年1月21日金曜日

2011年1月18日火曜日

すき焼き

自転車で信号待ち。えっカバンから湯気が上がっている。

水筒のロックがはずれてました。
お気に入りの財布がー。
携帯も濡れてたけど無事みたい。

Posted via email from cohiro's posterous

2011年1月16日日曜日

ベストキッド見ました。ジャッキーチェンはやっぱり素敵ー

リメイクだから筋は知っているのだけど、リメイクらしくない感じで見れた。

Posted via email from cohiro's posterous

2011年1月13日木曜日

「トンマナ押さえといて」と仕事で言われた。とんマナ??何かの略だろうと、頭の中を色々なものが駈け巡った。

業界人みたいに逆さことばで、まな板トントン?意味わっかんない!
でググりました。
広告業界用語でトーン&マナーだって。

Posted via email from cohiro's posterous

2011年1月5日水曜日

幸薄い顔で初出勤。どこかにドラッグストアないかな。

宿泊先のホテルから荷物を配送。帰り楽々!と思ったら、メイク道具一式詰めてしまい、初出勤の本日いつものメイクセットがない!
お土産にもらったくすんだ色の口紅しかなく、マスカラもなく、幸薄い顔に仕上がりました。

Posted via email from cohiro's posterous

2011年1月3日月曜日