top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_465

Flex:◇チュートリアルを丁寧にやってみる(1) ・・・ 【Flex:2日目】

 2008-11-17
 前回は
  ・ダウンロード>インストール
  を行い、
  ヘルプメニューの概要に一通り理解し
 ・ヘルプメニューに掲載されている
  「テスト・チュートリアル」を実行

 してみた。
  とにかく限られた時間で、基本的に「モノに」しなくてはならない。

  それでは、引き続き「習得作業」にかかる
  前回から、また時間を空けてしまったが・・・

 ◎今日は、「チュートリアル」を丁寧に
  試してみよう・・・


 追記に ▼

※この連載は、はじめて「Flex」に取り組んだmetaboyが、
 60日間体験版を利用して、ゆっくりと学んでゆく、詳細な記録です。
                      (本日の作業時間:3.5時間
【Flex:2日目】


FC2ブログランキングにほんブログ村 IT技術ブログ Webサイト構築へブログ王ランキング人気ブログランキング人気ホームページランキングへ


more改めて
最初のスタート画面(Flex スタートページ)にある
**********************************************************
 ■「Flex へようこそ」ビデオを視る
**********************************************************
  ネット上の
  「Flex へようこそ」 に
  アクセスすることになる。
  ※とてもシンプルな紹介ビデオで、すぐに終了


次に
**********************************************************
 ■簡単なRIAの作成(チュートリアル) の実行
**********************************************************
 ※RIA (Rich Internet Application) のクライアント側の構築
  これもネット上のURLを開くことで、
  チュートリアルを見ることができる。 >> チュートリアル

  ・英文! (めげずに、Yahoo ウェブ翻訳 で翻訳しながら 進む)

  ----------------------------------
  【1:チュートリアルで作成するもの】
  ----------------------------------

   ●Flickr APIの「キーワード」アクセスして対象となる
    写真をGet リスティングするアプリケーション

   [利用リソース]
    ・Flex Builder、基本のFlexコンポーネッbト
    ・Flex HTTPサービス

   [動作の確認]
Flickr API利用のサンプルアプリケーション
 ※チュートリアルにある、組み込まれた完成形のアプリケーションで
  試しに "PHP" と入力して [Search]!



  ----------------------------------
  【2:チュートリアルで学ぶこと】
  ----------------------------------

   ●MXMLとActionScript構文を用いて、
    Flexアプリケーションを構築してゆくまでのプロセス

   [留意ポイント]
    ・Flexアプリケーションは、Flashアプリケーション

     ・FLASHベースのRIAを創る上で、基本的な方法
     ・FlashPlayer9(上位互換?)を利用することができる(再生できる)
     ・ほとんどのFlexアプリケーションは、サーバーよりも、
      クライアントで処理される

    ・Flexフレームワークは、Flashアプリケーション を創るための
     あらかじめ用意された、クラスライブラリとアプリケーションサービス

     ・フレームワークはフリーで利用することができ、
      EclipseベースのIDE は 「Flex Builder」と名付けられた
     ・フレームワークには、独立型ツールとして、または、
      Flex Builderの一部として利用できるコンパイラ を含む
     ・クラスライブラリとアプリケーションサービスは、開発者に
      提供される、基本的な構成要素であり、
      アプリケーション開発のための道具ともなる
     ・標準コンポーネントは、より拡張・改良することが可能

    ・Flexアプリケーションは、
     MXMLやActionScriptを使用して記述される
     ・MXMLは、主にレイアウトアプリケーション表示要素に使われる
      XMLに基づくマークアップ言語
     ・ActionScriptは、主にアプリケーション構成のために使われる
      ECMAScriptに対応したオブジェクト指向プログラミング言語
     ・MXMLとActionScriptコードは、バイナリのSWFファイルに
      コンパイルされる


  ----------------------------------
  【3:実践】
  ----------------------------------

   ●アプリケーション構成要素
Flickr API利用のサンプルアプリケーション構成要素



   [実技]
    ・1:新しくプロジェクト作成>保存 (FlickrRIA)
       [ ファイル ] > [ 新規 ] > [ Flex プロジェクト ]
 
     [ウィザードダイアログ]
     ・プロジェクト名:FlickrRIA [ 次へ ]
     ・出力フォルダ:(作業用に用意したディレクトリ)
     ※そのほかは、デフォルトのままで終了

     [画面が再構成される]
新規プロジェクト作成後のウインドウ


    ・2:「ソース」タブをクリック
「ソース」タブをクリックウ


     [編集]
     ・「コード layout="absolute" を削除」
      ※固定がデフォルトなのだな。それを解除する、と。
     :「Apilicationタグ(mx:Application)」に
backgroundGradientColors="[0xFFFFFF,0xAAAAAA]"
horizontalAlign="left"
verticalGap="15" horizontalGap="15"
を加える
      ※backgroundGradientColors
       ほほぉ、これは推察するに、グラディエーションを作成してくれる
      ※horizontalAlign
       水平方向の位置 ですな
      ※verticalGap,horizontalGap 整列間隔
       推察すると、上下方向・水平方向それぞれの 整列間隔
基礎編集を終えた状態



    ・2:「デザイン」タブをクリック
      ※レイアウトはこの「デザイン状態」で行うのが容易、ということで。

[HBox] をドラッグドロップで持ってくる
 ・コンポーネントウインドウ
 > レイアウト(要素)から
  [HBox] をドラッグドロップ
  で持ってくる
 ※表示される 「幅」などの
  オプションはそのまま


[HBox] をドラッグドロップで持ってくる

 ▼

[Label] をドラッグドロップで持ってくる
 ・コンポーネントウインドウ
 > コントロール(要素)から
  [Label] をドラッグドロップ
  で持って来て、前述の
  HBox の中に配置


[Label] をドラッグドロップで持って来て配置

 ▼

ダブルクリックして テキスト内容を変更
 ※ダブルクリックして テキスト内容を変更

 続けて、
 コンポーネントウインドウ
 > コントロール(要素)から
  [TextInput] [Button] を それぞれドラッグドロップして、配置
[TextInput] [Button] を それぞれドラッグドロップして、配置


    ・3:「ソース」タブに切り替え
      ※自動的にソースが挿入されている
[TextInput] [Button] を それぞれドラッグドロップして、配置

 ▼

Flickr サービスを利用して、結果を得るために、HTTPServiceObjectを追加する
 ・Flickr サービスを利用して、
  結果を得るために、
  HTTPServiceObject
  追加する



 ▼

ActionScript3.0 が記述できるように
 ・ActionScript3.0 が記述
  できるように
  HTTPServiceObject の前に
  <mx:Script> のタグを追加
 ・その中に
  「import mx.collections.ArrayCollection;」を記述


HTTPServiceObject の前にタグを追加



 ▼

 ・「import mx.collections.ArrayCollection;」の次に
  ResultEventクラス を加える
  ResultEventクラスは、HTTPServiceが生み出すイベントのタイプ
  さらに、
 ・photoFeed という名前で、配列変数を用意する(宣言)

 ▼

Flickr サービスを利用して、結果を得るために、HTTPServiceObjectを追加する
 Bindable ・・・MXML ファイルの <mx:Script> ブロックで
  [Bindable] メタデータタグを使用することにより、
 変数として定義した個別のプロパティをデータバインディング式の
 ソースとして使用可能にすることもできる、と。

 ん? 
  [Bindable] メタデータ
  データバインディング式? ちょっと気にしなければいけない
  概念ができてきたぞ・・・

実際の作業はここまでにしておこう。
ひとつひとつ、知識を吸収、つぶしておく必要がある。
commentsコメント
着々と進んでいますね。
丁寧に基本から進められているところが
私とはかなり違うので勉強になります。
私はいきなり、
あれを実現するにはどう組んだらいいか?
という入り方だったので余計きつかったのかなww
【2008/11/18 13:24】 | トモヒロ #pBoZlR9Y | [edit]
コメント、ありがとうございます。
とにかく、初めてですから・・・
そして、私の実態は相当なまけもの
ですので、1回1回を丁寧にしないと
何度もやるような 輩ではないと・・・

しかしなかなか時間がとれません。
さて、期限内にどこまでゆけるものやら・・・
【2008/11/18 14:01】 | metaboy #- | [edit]
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/465-a74114fe
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。