最近はベイスターズ観戦日記と化しております

さぶれの日記
http://flex91.blog19.fc2.com/  presented by さぶれ@

プロフィール


さぶれ@

Author:さぶれ@
Webアプリなんぞ作っている会社に勤めるサラリーマン。自分の技術力のなさを嘆きつつ、日々勉強中。


最近の記事



カテゴリー



月別アーカイブ



スポンサーサイト

--/--/-- --:--|スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

E4Xのネームスペース処理

2008/06/06 11:12|FlexTB:0CM:1

ネームスペースを指定しないと処理されない


この前作った画像表示アプリに、画像検索エンジンから検索結果を引っ張ってきて、画像一覧に表示する機能を追加してみることにしました。画像検索エンジンはYahooのAPIを使用することにしました。
この前XMLの処理についても勉強したので、正直楽勝と思ったのですが落とし穴にはまりました。
Yahooから返ってくるXMLはこんな感じです。
var result:XML = 
<ResultSet xsi:schemaLocation="urn:yahoo:jp:srchmi http://api.search.yahoo.co.jp/ImageSearchService/V1/ImageSearchResponse.xsd" totalResultsAvailable="987433" totalResultsReturned="10" firstResultPosition="1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="urn:yahoo:jp:srchmi">
<Result>
<Title>ネコポーチ.jpg</Title>
<Summary>ネコポーチ 久しぶりにネコポーチが店頭に並びました。 前回作った時はあまり出足が良くなかったので久しく作らずにいたのですが、お客様の要望も</Summary>
<Url>http://www.kabanya.net/weblog/%E3%83%8D%E3%82%B3%E3%83%9D%E3%83%BC%E3%83%81.jpg</Url>
<ClickUrl>http://www.kabanya.net/weblog/%E3%83%8D%E3%82%B3%E3%83%9D%E3%83%BC%E3%83%81.jpg</ClickUrl>
<RefererUrl>http://www.kabanya.net/weblog/cat1</RefererUrl>
<FileSize>85.3kB</FileSize>
<FileFormat>jpeg</FileFormat>
<Height>298</Height>
<Width>448</Width>
<Thumbnail>
<Url>http://sp1.yt-thm-a01.yimg.com/image/25/m6/3626288746</Url>
<Height>93</Height>
<Width>140</Width>
</Thumbnail>
</Result>
</ResultSet>;
上記XMLからURLデータを抜き出そうとして下記のようにアクセスしたのですが、XMList.length()が0を返します。
trace(result.Result.Url.length);//出力結果:0
この原因は、ネームスペースを指定しないでアクセスしようとしたためです。上記XMLにはこんなネームスペースが指定されています。
xmlns="urn:yahoo:jp:srchmi"
よって、E4Xでアクセスする時は、こんな感じでネームスペースを指定しなければいけません。
var ns:Namespace = new Namespace("urn:yahoo:jp:srchmi");
trace(result.ns::Result.ns::Url.length());//出力結果:1
でも、毎回ネームスペースを指定するのは大変なので、デフォルトのネームスペースを指定します。
default xml namespace = new Namespace("urn:yahoo:jp:srchmi");
上記の宣言は、XMLインスタンスを生成した後やmxmlの初期化がすんでいない時に宣言すると良くわからないエラーがたくさんでます。注意してください。

なぞなこと

var ns:Namespace = new Namespace("urn:yahoo:jp:srchmi");
default xml namespace = ns;
こういう風に宣言すると
VerifyError: Error #1025: 無効なレジスタ 2 がアクセスされました。
というエラーがでます。何なんでしょうね・・・・。バグでしょうか?

mx.effects.Moveを使って画像一覧を作ってみた。

2008/06/05 09:02|FlexTB:0CM:0
せっかくFlexを勉強しているので、effectsを使った何かをやってみようと思いました。
そこで、作ったのが以下のFlexアプリ。
スライドバーで列数を変えると、画像の表示位置がアニメーションしながら変化します。
作ったアプリはこんな感じになりました。
ImageSlideShow.html

ソースとしては、ImageBoxという自作クラスをCanvas上に並べて、ImageBoxで実装したmoveImageを呼び出す、という動作になります。
ImageBox
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" width="400" height="300">
<mx:Image id="myImage" width="100%" height="100%" source="http://fc2.com/ad/200805/mob.gif"/>
<mx:Move id="myMove" target="{this}" duration="500"/>
<mx:Script>
<![CDATA[
public function moveImage(xTo:int, yTo:int) : void {
myMove.stop();
myMove.xTo = xTo;
myMove.yTo = yTo;
myMove.play();
}

public function set sourceURL(value:String) : void {
myImage.source = value;
}
]]>
</mx:Script>
</mx:Module>

mainのmxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*" creationComplete="init(event)">
<mx:VBox width="100%" height="100%">
<mx:HSlider id="columnSlider" height="24" minimum="1" maximum="10" snapInterval="1"
width="501" value="3" change="chnageNumOfCol(event)"/>
<mx:Canvas width="100%" height="100%" id="imageListCanvas">
</mx:Canvas>
</mx:VBox>

<mx:Script>
<![CDATA[
import mx.events.SliderEvent;
import mx.events.FlexEvent;

private var numOfImage:int = 20;
private function init(event:FlexEvent) : void {
var w:int = 100;
var h:int = 100;
for (var i:int = 0; i < numOfImage; i++) {
var box:ImageBox = new ImageBox();
imageListCanvas.addChild(box);
box.width = w;
box.height = h;
var location:Point = getLocation(i, box.width, box.height);
box.x = location.x;
box.y = location.y;
}
}

private function getLocation(num:int, w:int, h:int) : Point {
var numOfCol:int = columnSlider.value;
var x:int = (num % numOfCol) * w;
var y:int = int(num / numOfCol) * h;
return new Point(x, y);
}

private function chnageNumOfCol(event:SliderEvent) : void {
var images:Array = imageListCanvas.getChildren();
var num:int = 0;
for each(var box:ImageBox in images) {
var location:Point = getLocation(num, box.width, box.height);
num += 1;
//移動先の場所を指定して、Moveを実行する。
box.moveImage(location.x, location.y);
}
}
]]>
</mx:Script>

</mx:Application>


ConstraintRowとConstraintColumnクラス

2008/06/04 10:06|FlexTB:0CM:0
Flex3からCanvasクラスに、constraintRowsやconstraintColumnsというプロパティが追加されていたので調べてみました。
これらのプロパティは、Canvasオブジェクトを分割するデータを管理します。
つまり、グリッド上にラベルなどのコンポーネントを配置する場合などは、constraintRowsなどを定義して使用すれば良いようです。

constraintRowsやconstraintColumnsは、具体的にコンテナを持つわけではありません。
レイアウトに行や列を仮想的に定義したときのデータを管理します。
constraintRowsやconstraintColumnsは、親レイアウトコンテナの大きさが変わったときなどは、自動で仮想の行・列の高さや大きさを再計算したりします。

具体的にコードを見てましょう。
constraint.png

例えば、Buttonに「top="row1:10"」した場合、「row1のTopをy座標の0としたとき、Buttonは10の位置にあるよ」という意味になります。
後は、上図を見ていただければ、意味を理解できると思います。

「ConstraintRowというコンテナがあってその子供としてButtonを持つよ」
ということではなく
「constraintRowsとconstraintColumnsで仮想的な線を描いたから、その線を基準に子コンポーネントの位置を決めてね」
という発想のクラスなんですね。
ちょっと、面白い発想だと思いました。
constraintRowsやconstraintColumnsを使いこなせれば、結構柔軟なレイアウトをパフォーマンスへの影響を抑えて実装できそうですね。

RemoteObjectのメソッドごとにresultイベントを取得する方法

2008/05/30 20:24|FlexTB:0CM:0
RemoteObjectを使う場合、下記の感じで定義するサンプルが多いようです。
<mx:RemoteObject id="remoteObj" destination="testService" result="resultHandler(event)" />
しかし、上記の方法では、remoteObjのどのメソッドを呼び出しても、同じresultHanlerメソッドが呼び出されてしまいます。

そこで、下記のように記述すれべメソッドごとにイベントハンドラー割り当てることができます。
<mx:RemoteObject id="remoteObj" destination="testService">
<mx:method name="getValue" result="getValueHandler(event)" />
<mx:method name="getType" result="getTypeHandler(event)"/>
</mx:RemoteObject>
ちょっとしたことですが、忘れないようにメモ。

メタデータタグ

2008/05/29 16:23|FlexTB:0CM:0
気になったメタデータタグのメモ

自作UIコンポーネントの自作イベントをMXMLから参照する。

自作UIコンポーネントコード
[Event(name="customEvent", type="flash.events.Event")]
public class metaTagTest extends UIComponent
{
}

呼び出し元MXMLコード
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">
<mx:Script>
<![CDATA[
function customEventHandler(eventObj:Event):void {
...
}
]]>
</mx:Script>

  <local:metaTagTest customEvent="customEventHandler(event)"></local:metaTagTest>


</mx:Application>

Javaのジェネリックみたいなことできる?

以下のように書けば、Javaで言うところのジェネリックみたいなことができるかな?と思ったのですが・・・・
[ArrayElementType("Number")] 
var newStringProperty:Array = new Array();
newStringProperty.push("1st");
newStringProperty.push("2nd");
for each (var element:String in newStringProperty) {
trace();
}

特にコンパイラエラーなども出ませんね。
MXMLに記述するときしかメタタグのチェックは有効にならないのでしょうか?

Amazon



ブログ内検索



RSSフィード



 |  未分類 | Flex | ActionScript3 | BlazeDS | Silverlight | 読書 | Javascript | Java読書会 | 横浜ベイスターズ | 
Copyright(C) 2008All Rights Reserved. さぶれの日記
Powered by FC2ブログ.  template designed by 遥かなるわらしべ長者への軌跡.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。