top


総投稿数 本 
no_

スポンサーサイト

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

Flex:◇まずは、基礎的な作業方法 ・・・ 【Flex:初日】

 2008-11-12
 ははは、告白。
 Flex3 を始めるぞ! と意気込んで落としたのは
  10月27日(16日前!

 実はそのとき「チュートリアル」少し触って、その後
 怒濤の「仕事モード」になり、満足に使えなかった・・・
 恥ずかし・・・

   リセット!( ・・・人生はリセットの積み重ね)

 本日別のマシンに新たに 組み込み直し
 (前に入れたPCは別プロジェクトで稼働中・・・)
 最初からやり直しだ。
 で、
 どうせやり直すなら、詳細な作業記録を盛り込んだ

  「Flex 事始め」 を記録しようと思い立つ。
  ※ほんとに、気が多い・・・

 前置き終わり

 以下、詳細な学習記録
 ※さて、参考になるやら、どうやら・・・

 追記に ▼

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


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


more 【Flex:初日】


 ・ダウンロード>インストール
 ・ファイルメニュー のチェック
  ・設定
  ・ヘルプ
   ・概要の習得
   ・テスト・チュートリアル 実施


**********************************************************
 ■ファイルメニューの チェック
**********************************************************
  新しいソフトウェアを試すときの(私の)お決まりの作業

  ・ざっと「ファイルメニュー」を確認し

  ----------------------------------
  【1:「環境設定」関連を探す】
  ----------------------------------

   あった!
 [ ウインドウ ] > [ 設定 ]
     
   ※基本的には「デフォルト」で使用するが、
    どのような設定があるか ざっと確認

  ----------------------------------
  【2:「ヘルプ」の確認】
  ----------------------------------

     
   ※実際に「ヘルプ」も立ち上げ、項目明細をざっと確認
    とても丁寧だ。

    ・「ワークベンチユーザーガイド」を一通り、読み進める
     さっと確認。後は必要に応じて立ち戻ればいいだろう。
    ・「Adobe Flex 3 ヘルプ」を開く

     ●Flex アプリケーションは、MXML ActionScript という
       2 つの言語を組み合わせて記述

     ●MXML・・・恥ずかしながら、知らなかった。
     XML マークアップ言語の一種で、
     ユーザーインターフェイスコンポーネントをレイアウト
     するために使用
     ・サーバーサイドのデータソースへのアクセスや、
     ・ユーザーインターフェイスコンポーネントと
      サーバーサイドのデータソースの間の
      データバインディングなど、
      ※アプリケーションの非ビジュアルな側面を宣言的に定義
       するために使用

     「アドビシステムズ社が提供するFlexアプリケーションの
      ユーザーインターフェイスを定義するためのXMLベースの
      独自言語
。」
      そうなんだ。(引用転載)

      ・「コンポーネント
        ・フォームのテキスト入力のような比較的単純なもの
        ・ツリーなどの複雑な「ビジュアルコンポーネント」まで
        ・Webサービス通信やアニメーションエフェクトなどの
         ビジュアル要素のないコンポーネントも用意

      ・「ビジュアルコンポーネント
        ・「コントロール
         UI用のコンポーネントで、
         データを表示・編集することが可能。
        ・「コンテナ
         子コンポーネントのレイアウトを制御するコンポーネント
           ・単にレイアウトを制御するコンポーネントである
            「レイアウトコンテナ
           ・複数のコンテナを子に定義することで画面遷移を
            制御できる「ナビゲータコンテナ

      ・MXML は HTML よりも構造化されており、提供されるタグセット
       も豊富
      ・MXML と HTML の最大の違いの 1 つは、MXML で定義された
       アプリケーションは SWF ファイルにコンパイルされて
       Adobe® Flash® Player または Adobe® AIR™ でレンダリング
      ・MXML アプリケーションは 1 つのファイルに記述することも、
       また複数のファイルに記述することもできます。MXML では、
       MXML および ActionScript ファイルに記述されたカスタム
       コンポーネントもサポート

サンプル例:(ヘルプより)hello.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- mxml\HellowWorld.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
paddingLeft="10" paddingRight="10" >

<mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/>

</mx:Panel>
</mx:Application>

・ドキュメントの 1 行目では、XML バージョンのオプションの宣言を指定
 MXML ファイルのエンコード方法を指定するエンコーディング情報を含める
   <?xml version="1.0" encoding="utf-8"?>

・ <mx:Application> タグは、Flex アプリケーションのルートタグ
 Application コンテナも示す
   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

・MXML タグのプロパティ(例えば <mx:Label> タグの text、fontWeight、
 fontSize プロパティなど)を使用すると、
 コンポーネントの初期状態を宣言的に設定
   <mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/ >

     ●実践

      ■MXML の SWF ファイルへのコンパイル
       まずこれをやってみる

        1:[ファイル]>[新規]>[MXMLアプリケーション]
         

        2:ウィザードが立ち上がり
         アプリケーションサーバー(?)は、PHP を選んで
        3:[PHPサーバーの設定]で、
         ローカルのApacheサーバー設定関連を入力
         設定検証 > OK
        4:Flexプロジェクトを生成
         メインアプリケーションファイルに
         test0.mxml と入力し [終了]
         ※これ、[実行]とかの方がしっくり来ますねぇ。

        5:このような表示になった
         

        6:上記ソースを[ソース] に入力し、多少編集
         
         

        7:[デザイン] タブを選んでみる
         しばらくいろいろ、さわって見る
         ・ウインドウサイズを、500 × 500 に
         ・タイトルの外側のコンポーネントで、
          レイアウトを、absolute(絶対指定) にすると
          タイトルのレイアウトで、こんなん出ました
         
         ・コントロールでImage利用してみたり
         ・背景はブログにあわせたグラデーション
         など、GUIウインドウで ちょこちょこと・・・
         
         
        8:[ファイル] > [書き出し] > [リリースビルド]
         このあたりが基本の出力かな、と推測
         [終了] をクリックで書き出す
         ※これも、[実行]とかの方がしっくり来ますねぇ。

         [ 出力したファイル群 ]
         ・test0.html
         ・test0.swf
         ・AC_OETags.js
         ・playerProductInstall.swf
         ・history フォルダ
          ・historyFrame.html
          ・history.js
          ・history.css


        9:このうち
         ・test0.html
         ・test0.swf
         ・AC_OETags.js

         のアップロードだけでいいと思うのだが、
         出力された test0.html
         history へのリンクが残っている

         それをすべてはずす

       10:アップロード
         これだ

 まぁ、とても簡単な操作で、アプリケーションを
創ることができること、それは確かに学んだ か(?)な。
commentsコメント
お疲れ様です^^
いよいよ稼動しはじめたのですね。
私は逆に忘れ始めていますw
どうせ買うならProfessionalが欲しいのですが、
Standardを買う余裕もない現状です;;
【2008/11/13 15:43】 | トモヒロ #pBoZlR9Y | [edit]
comment_post












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

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

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

 

リンク集

 

最近の記事

 

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

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

 

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