つれずれなるままの開発日記(最近はFlexばかり..)

Archive for the ‘UI’ Category

今日、初めてFlash Builder4を使い始めました。
AIR2.0もリリースされたことですし、それもインストールして、SecureSocketを使ってgmailに接続できるかを確認するのに、
サンプルもFlex4のSparkで書き直すことにしたのですが・・・・

まだ、慣れません。

何が慣れにくいかって、s:XXXX と mx:XXXXX が両方あるあたりですね。

混在できるのは、すでにあるものの移行をしつつ、新しい開発と考えるといいのかもしれませんが、
理解ということになると、

昔のXXXはYYYになります。

というようになれば、理解（あきらめの意味も含めて）がしやすく感じます。

TabNavigatorって、何になるんだ？ってわかりませんでした。今のところ。
工夫しだいで、Sparkだけでもできるのかもしれませんが・・・

mx:TabNavigator　は　s:TabNavigator
と、なっていれば、たとえ、実体が同じでも使いやすと思うのは私だけでしょうか？

<mx :TabNavigator width="100%" height="100%" resizeToContent="true">
		<s :NavigatorContent />
</mx>

って、混じるのはちょっと異物を見ていると感じてしまうのは、
まだ、慣れていないからだけなのでしょうか・・・・

まあ、まださわり初めですので、利点が勝っていることが実感できれば、気にならなくなるかもしれません。

しかしながら、生まれて初めてIDEのVisualEditor（デザイン）の方を使ってしまいました。
どちらのコンポーネントを使うことをIDEは望ましいと思っているのかも含めての意味もありますが、使ってしまいました。

今まで、Flex Builder3でも、Eclipseや、VisualCafe(なつかしい・・・）でも、C++Builderでも使ったことも、使おうと思ったこともない機能なのですが・・・・
マウスで、画面イメージを作っていくことなんて・・・

flexのDataGridで縦と横のスクロールバーがあるか調べる。

しかしながら、標準のメソッドではこの方法が見つからないので・・・
以下のmx_internalなメソッドを使って調べる。

 mx_internal::scroll_verticalScrollBar;
 mx_internal::scroll_horizontalScrollBar;

どうやら、スクロールバーがあるかどうかは、
１）nullが返ってきたとき。
２）visible=falseだったとき。

のようである。

このメソッド(getter)はScrollControlBaseのメソッドなのでかなりの広範囲で使えるだろう。
ただし、あくまでもmx_internalなメソッドなので使用の際にはそのことをお忘れなく。。。。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    creationComplete="init()"
    updateComplete="update()"
    >
    <mx:Script>
        <![CDATA[
            import mx.core.ScrollPolicy;
            import mx.controls.scrollClasses.ScrollBar;
            import mx.collections.ArrayCollection;

            private function init():void{
                // データを作成する
                var src:Array = new Array();
                for(var i:int = 0; i<30; i++){
                    var obj:Object = new Object();
                    obj.label = "ラベル" + i;
                    obj.idx = i;
                    src.push(obj);
                }
                dg.dataProvider = new ArrayCollection(src);
            }

            private function update():void{
                var vs:ScrollBar = dg.mx_internal::scroll_verticalScrollBar;
                var hs:ScrollBar = dg.mx_internal::scroll_horizontalScrollBar;
                if(vs){
                    if(vs.visible){
                        vlog.text =" Found !! " + vs.width;
                    }
                    else{
                        vlog.text = "Found !! But not visible";
                    }

                }
                else{
                    vlog.text = "*NOT* found ...";
                }
                if(hs){
                    if(hs.visible){
                        hlog.text = "Found !!" + hs.height;
                    }
                    else{
                        hlog.text =" Found !! But not visible";
                    }
                }
                else{
                    hlog.text = "*NOT* found ...";
                }
            }
            private function changeHBar():void{
                if(hbar.selected){
                    dg.horizontalScrollPolicy = ScrollPolicy.ON;
                }
                else{
                    dg.horizontalScrollPolicy = ScrollPolicy.OFF;
                }

            }
        ]]>
    </mx:Script>
    <mx:VBox width="100%" height="100%">
    <mx:DataGrid width="100%" height="90%" id="dg">
        <mx:columns>
            <mx:DataGridColumn headerText="LABEL" dataField="label" minWidth="150"/>
            <mx:DataGridColumn headerText="INDEX" dataField="idx" minWidth="150"/>
        </mx:columns>
    </mx:DataGrid>
    <mx:CheckBox id="hbar" change="changeHBar()"/>
    <mx:HBox>
        <mx:Label text="VerticalScrollBar" />
        <mx:Label id="vlog" />
    </mx:HBox>
    <mx:HBox>
        <mx:Label text="HorizontalScrollBar" />
        <mx:Label id="hlog" />
    </mx:HBox>
    </mx:VBox>
</mx:Application>

flexのDataGridを使ってデータ一覧を表示したが、なぜか、マウスのカーソル通り、背景が反転しない。
もしや、DataProviderを自作しているためか？
でも、同じオブジェクトを使いまわしているところはないし・・・

ん・・・
何かデータにゴミがあるとおかしくなるのか？
と、データのプロパティを１つ１つ調べていくと、

uid

というフィールドがおかしいというところまでは力技で突き止めた。
んー、このフィールド名ではなく、別のフィールド名（messageId)という名前に変更したところ、
きちんと動くようになった・・・・

ちなみに、ほかでも同じような状況になったことがあるのだが、uidをダブらないようにしたらこの状況は起きていないので、
明らかに、このフィールドが作用している・・・

もしや、これは使えないフィールドというものが存在するかも。。。。。
私の場合、SQLiteを使ってデータを保存して、このフィールド名にuidというものを使ってしまった。

このように、DBという制約に頭がいってしまい、
uidというフィールドがFlexのframeworkレベルまで影響を及ぼすということを認識していなかった。

多少調べてみたら、
http://livedocs.adobe.com/flex/3_jp/langref/mx/controls/listClasses/BaseListData.html
というところが関係しそうな気がする。

さらに調べてみると、そのuidは、
http://livedocs.adobe.com/flex/3_jp/langref/mx/utils/UIDUtil.html#getUID()
で、itemのuidフィールドを見てそこからuidを取得しているから

uidというフィールドに一意にならないデータとして使ってはならないということだ。
私の場合、メールのmessage-idをuidとして保存していたのだが、意味としては重複してはならないが、
データとして結果として重複する場合があるので、まあ、それはそれでいいかとしていたが、
やはり、名前を変えることにした。

通常、uidというフィールドにユニークでない値をつかうということは少ないと思うが、
レアなケースだけにすぐに原因も見つけられなかった。

まあ、これでもう少し、
DataGridの中身が理解できたので、それはそれでいい経験ということで納得しよう。

さて、DataGirdのヘッダをいろいろとカスタマイズしたいなとおもって、その備忘録です。

１）ヘッダを表示しない

単純にDataGridの１列目を項目として２列目を値の入力などのようなプロパティ編集として使いたい場合に、
ヘッダを表示したくないということがある。
この場合には

<mx:DataGrid showHeaders="false" />

ただし、ここで注意しなければいけないのがヘッダの表示がないと、列幅を変える場所がなくなってしまうのです。
普通のセルの縦の区切り線でもサイズを変更できるようにできればいいのですが・・・

なので、私が気をつけているのは・・・

<mx:DataGridColumn headerText="項目名" minWidth="100" width="100" />
<mx:DataGridColumn headerText="値" />

のように１列目は幅を固定します。
ただし、なぜかリサイズとかすると、この設定を無視してサイズが変わるので画面の更新で再度、設定しなおします。
（headerTextは表示されませんが、わかりやすいように値をいれているだけです。）

列の幅の調整については私はこのようにしてにげました。

２）あるヘッダだけソートをさせなくしたい。

セルにチェックボックスや、ボタンなどを表示しているときに、そのヘッダをクリックされてもソートされないようにしたい。

<mx:DataGridColumn sortable="false" />

３）ヘッダにアイコンなどの画像などを表示したい

DataGridColumnに対してheaderRendererを設定してやればよい。

<mx:DataGridColumn id="dgf_priority">
	<mx:headerRenderer>
		<mx:Component>
			<mx:HBox verticalAlign="middle" horizontalGap="0">
				<mx:Image source="@Embed('assets/star_s.png')" />
				<mx:Label text="スター" />
			</mx:HBox>
		</mx:Component>
	</mx:headerRenderer>
</mx:DataGridColumn>

４）ヘッダの高さを取得・変更する

ヘッダの高さは
<mx:DataGridColumn headerHeight=”10″ />
のように設定できます。取得も同じプロパティです。

flexでは、ResourceManagerという機能を使って文言を別のファイルにして管理が行えます。
したがって、マルチランゲージ対応などもこれを使って行えます。

では、Flex Builderを使ってこのResourceManagerを使って文言を別のファイルにします。

１）Flex Builderのpropertiesファイルに日本語を記述できるようにする。
この設定を忘れると、文字コードがおかしいといわれ保存ができません。

はじめ、Flex Builder日本語版で、propertiesファイルがJavaなどのpropertiesファイルと同じようにしなければ、
日本語を記述できないと勘違いしてしまいましたが、単なるFlex Builderの設定のようです。
(せっかく日本語版なのですから、このあたりのデフォルトもきちんと設定されているとうれしいのですが・・・・）

ウィンドウ＞設定　から、一般＞コンテンツ・タイプ
で
「テキスト」を開くと、「Javaプロパティー・ファイル」がありますので、そこのデフォルト・エンコーディングを”UTF-8″に変更してください。

２）ソースディレクトリの下に

locale/ja_JP

ディレクトリを作成し、ここに文言ファイルを置きます。

別のディレクトリに配置し、そこをソースディレクトリとして追加してもかまいません。

３）コンパイル時に、ja_JPを使うようにします。

プロジェクトのプロパティで、「Flexコンパイラ」の「追加コンパイラ引数」に以下のように設定します。

-locale ja_JP -allow-source-path-overlap=true -source-path=locale/{locale}

４）実際に文言ファイルを作成します。
ここではファイル名はLBL0001.propertiesにします。

title=これはタイトルです。
desc=ここには説明が入ります。

５）文言ファイルで定義した文言をMXMLで使用する

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
    label="{resourceManager.getString('LBL0001','title')}"
>
    <mx:Metadata>
        [ResourceBundle("LBL0001")]
    </mx:Metadata>

</mx>

という感じで利用可能です。
文言だけじゃなく、ちょっとしたシステム設定などにも使えるのではないでしょうか？