ラベル MXML の投稿を表示しています。 すべての投稿を表示
ラベル MXML の投稿を表示しています。 すべての投稿を表示

2011年12月7日水曜日

FLEXのdataGridの配列の値を+=する件。

DataGridなるものがFLEXにある。
こんなコードを書く。
datAr = new Array(
  {n:1,  type:0,  x:1.5,  y:2.5},
  {n:2,  type:1,  x:1.5,  y:2.5},
  {n:3,  type:2,  x:1.5,  y:2.5}
);
DG.dataProvider = datAr;
ここに、datArはArrayであって、datAr[0].xは1.5という数値(Number)である。
しかし、
datAr[0].x += 20;
とすると、いつのまにやら、datAr[0].xがStringになっており、
datAr[0].x が、"1.520"
という文字列になっている。
datAr[0].x = Number(datAr[0].x) + 20;
とすれば、無事に、21.5になるのだが。
まぁ、こういうもんなのだろう。。

2011年12月1日木曜日

FLEXのObjectのdeleteする件の1

だいぶ更新をサボってしまった。。
さて、表題の件、かなりあれこれ迷った挙句、根本的にここらへんの仕組みを理解していなかったので、整理を含めて書いてみる。

まず、データが階層構造で存在している。(JSON)
これを、Objectに変換する。
これが、表示・編集する元データとなる。
しかし、これを表示するとなると、DisplayObjectにしなきゃいけない。
よって、それを包括したクラスを作成した。
こんな感じ。※実際にはこれをさらに派生させる。
public class spBase extends UIComponent{
。。。
public var obj:Object; // データの参照が入るよ。
。。。
//実際には、このインスタンスに、以下のように設定
xxx.obj = maindata.a[0].b.c;
要するに、
"maindata":{
  "a":[
   {
   "b":{
    "c":{
       "dat1":1,
       "dat2":2,
       "dat3":3
     },
     "c2":{
       "cat1":1,
       "cat2":2,
       "cat3":3
     }    
    }
   }
  ]
}
って感じで。
で、何がやりたいかというと、xxxインスタンスを削除し、maindata.a[0].b.c;を無きものにしたいのだ。
xxxインスタンス自体は、xxx.parent.removeChildAt(zz);
で消せる。しかし、そんなことをやっても、maindata.a[0].b.cは、生きてる。
ここから、悪戦苦闘が始まるのだ。

テスト開始
item:Object = new Object;
item.obj = mainData.a[0].b.c;
で、デバッガで見た状況。
たしかに同じアドレスをさしている。

もちろん、
item.obj = {};
なんて書けば、こうなる。まぁ当然である。

でも、
trace(delete item.obj);
と書くと、こうなる。
【その1】

でも、
trace(delete mainData.a[0].b.c);
と書くと、こうなる。
【その2】

問題なのは、traceしてみると、両方ともtrueを返すことだ。
その1はいいのだが(いや、厳密には良くない気がするが。)、、、その2は、明らかに他が参照しているので、falseが返されるべきなんじゃ。。。。。
まぁどっちにしても、両方実行しないと消せないのである。

ってことは、、、参照だけもってても消せないのである。
ってことは、、、やりたいと思うことが、、できないわけである。

2011年9月7日水曜日

FLASHでGUIの3

FLASHのGUIといっても、当然、サーバとのやりとりが必要なわけで。
そうすると、マルチタスクのイベントドリブンのような顔をしたActionScriptではあるけど、
正しくタイムシェアリングしてるわけでもなんでもないし、
サーバとの転送量が大きい場合(データが大きい画像とか)を考えると、
1つづつ実行できるようなシステムにしたいわけですね。
といったところで、画像一覧をゲットするようなことを考えて見る。

●httpのためのクラスを作る
【仕様】
→url、データのタイプ、パラメータ、callBack関数を複数指定して、
ひとつづつhttpリクエストをかける。
100コの画像を取ってくる場合でも、必ず、ひとつずつリクエストするものとする。

いろいろやって結果、スマートかどうかは別にして、、、
タイマを使うことになってしまった。
要するに、
実行中かどうかをフラグで判定して、判定中だったら、タイマをまた設定みたいなことを繰り返す。
ActionScriptにはSleepも無いことだし。
ちょっといい加減に書きなぐったSRCがこんな感じ。

なんとなくそれらしく動く。パラメータとかTEXT系じゃないときは、次に考えます。

function spHttp(){
  own = this;
  init();
}
// ------------------------------------------------------------------------------
public function init():void{
  datAr  = new Array;
}
// ------------------------------------------------------------------------------
public function setData(url:String,  comtype:uint,  okRes:Function,  ngRes:Function,  method:String="POST",useProxy:Boolean=false):void{
  datAr.unshift(
          {
            "url":    url,
            "comtype":  comtype,
            "okFunc":  okRes,
            "ngFunc":  ngRes,
            "method":  method,
            "useProxy":  useProxy
          }
        );
}
// ------------------------------------------------------------------------------
public function execute(){
  setTimeout(executeSub, tInterval);
}
// ------------------------------------------------------------------------------
public function executeSub(){
  if(datAr.length < 1){
    //  END
  }else{
    if(bRun){
      setTimeout(executeSub, tInterval);
    }else{
      bRun = true;
      var o:Object  = datAr.pop();
      httpSV  = new HTTPService();
      httpSV.addEventListener(ResultEvent.RESULT,  okResult);
      httpSV.addEventListener(FaultEvent.FAULT,  ngResult);
      httpSV.resultFormat = "text";  //  
      httpSV.url    = o.url;    //  
      httpSV.method  = o.method;    //  httpSV.method = "POST";
      httpSV.useProxy  = o.useProxy;  //  httpSV.useProxy =false;
      uVar  = new URLVariables;
      uVar.decode("Giant=Baba");
      var at:AsyncToken = httpSV.send(uVar);
      at.id    = o.comtype;
      okFunction  = o.okFunc;
      ngFunction  = o.ngFunc;
    }
  }
}
// ------------------------------------------------------------------------------
public function okResult(event:ResultEvent):void{
  httpSV.removeEventListener(ResultEvent.RESULT,okResult);
  httpSV.removeEventListener(FaultEvent.FAULT,ngResult);
  okFunction(event);      //  本当の処理はこっちだよ
  bRun = false;
  execute();
}
// ------------------------------------------------------------------------------
public function ngResult(event:FaultEvent):void
{
  httpSV.removeEventListener(ResultEvent.RESULT,okResult);
  httpSV.removeEventListener(FaultEvent.FAULT,ngResult);
  ngFunction(event);      //  本当の処理はこっちだよ
  bRun = false;
  execute();
}
// ------------------------------------------------------------------------------

2011年9月1日木曜日

FLASHでGUIの2



とりあえず、FLASHでのGUIのobjectの階層構造。(ver1)

<TOP> MXML
  <app> 固有クラス。アプリ制御(非GUI)
  <doc> 固有クラス。doc制御(非GUI)
  <menues> MXML
  <mainArea> MXML
    <Canvas>  :Base:UIComponent 
      <Layer>  :Base:UIComponent
        <Item>  :Base:UIComponent
        <Item>  :Base:UIComponent
        <Item>  :Base:UIComponent
        <Item>  :Base:UIComponent
      <Layer>  :Base:UIComponent
      <Layer id="last">  :Base:UIComponent
  <dialog> MXML

スケールを設定して拡縮するのは<Canvas>のみ。
<Layer id='last'>には、メッシュというかGRID表示させる。
BaseはUIComponentほぼそのままだが、基本的な機能だけをいれる。
マウスイベントをうけとるかどうかのon-offとか。

あとは、かならずTOPへの参照をできるようにして、appとかdocとかを適宜参照可能にする。

やっぱ、絵の出るプログラムは楽しいよね。




2011年8月30日火曜日

FLASHでGUIの1

FLASH(FLEX)でGUIの場合に、まず、それぞれのエンティティを、
どういう形で持つかというところから始める。
もちろん、objectとして持つので、グラフィックスをもてる形でもつのは当然として、
ページがあったり、レイヤーがあったりするので、そこらへんの階層をどう考えるかだね。
データ上の階層と表示やGUI上の階層は一致させる必要がないけど、
たいがい、一致させとかないと、バグる元。
ってことで、FLASH(FLEXではなく)でやってたときは、
movieClipかSpriteでなんでもかんでもやってたんだけど、
FLEXではSpriteはそのまま使えないから、UIComponentでやることになるのかな。
それが最良かどうかは、やってみないとわからないので、
とりあえず、それで、POLYや画像を表示させたり、編集したりとかしてみて判断しよう。
ということで、ポリを書いてみることにする。

順を追うと、、こんな感じでテスト。
●UIComponentを継承した基本クラスを作る。
●その基本クラスをExtendsした、item用のクラスを作る。
●itemを動的に生成して、その中のgraphicsにポリを入れてみる。
●mouseDown-Move-Upに対応させて移動させてみる。

ここで、随分前にちょっと書いた、mouseイベントを最下層で拾うクラスを仕込んでみる。
要するに、
★itemにMouseDonwがくる
↓
★最下層Mouseイベント用クラスの、MouseDown/Up/Moveイベントを、
itemのpublic関数に持ってくるように設定する。
 ↓
★itemにMouseDonwがくる
↓
★処理をしたあと、イベントの転送先を削除する

で、基本クラス。
public class spBase extends UIComponent{
	public var mother:Object;
	//--------------------
	function spBase(){

	}
	//--------------------
	public function init(f:Object):void{
		mother = f;
		this.addEventListener(Event.REMOVED_FROM_STAGE, removed);
		//-------------------
		//	MouseDown
		//-------------------
		var own:Object = this;
		this.addEventListener(MouseEvent.MOUSE_DOWN,
			function (e:MouseEvent):void{
				mother.app.getKAM().setMAll(own.fd,own.fu,own.fm,own.fo);
			}
		);
	}
	//--------------------
	protected function fd(e:MouseEvent):void{
		trace("Down\n");
	}
	protected function fu(e:MouseEvent):void{
		trace("Up\n");
		mother.app.getKAM().setMClear();
	}
	protected function fm(e:MouseEvent):void{
		trace("Move ");
	}
	protected function fo(e:MouseEvent):void{
		trace("Over  ");
	}
	//--------------------
	//	like a destructer
	//--------------------
	private function removed(e:Event):void{
		removeEventListener(Event.REMOVED_FROM_STAGE, removed);
	}
}


で、itemクラスの雛形。
public class spItem extends soul.spBase{
	override protected function fd(e:MouseEvent):void{
		trace("spItem::Down\n");
	}
	override protected function fu(e:MouseEvent):void{
		trace("spItem::Up\n");
		mother.app.getKAM().setMAll(null,null,null,null);
	}
	override protected function fm(e:MouseEvent):void{
		trace("spItem::Move ");
	}
	override protected function fo(e:MouseEvent):void{
		trace("spItem::Over  ");
	}
}

で、呼ぶ時。motherは、MXMLでのthisを渡している。。(-_-;)
testobj = new soul.spItem();
testobj.init(mother);//mother:MXMLのthis







2011年2月11日金曜日

FLEXでFLASH(AS)っぽく画像を表示

FLEXで画像を読み込んで表示。一番単純にして重要な機能であるが、
FLEXのサンプルとかHowTo本を見ると、
【まずImageコンポーネントを~~】
なんていう、私の趣味とかけ離れた手法がかかれている。
まぁそれはそれとして、どうActionScriptに展開されるかを確認するのも重要だが、
ここでは、FLASH-CS3っぽく表示させてみる。
すると、こんな感じ
var loader = new Loader;
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,function(e){
 var bmp = new Bitmap;
 bmp.bitmapData = loader.content.bitmapData.clone();
 stage.addChild( bmp );
});  
var urlfile = "http://localhost/ren2.jpg";
var UR=new URLRequest(urlfile);
UR.method = URLRequestMethod.POST;
loader.load(UR);
まぁ、いままでとなんら変わることもなく実行できましたね。
もちろん、これはこれとして、実際はクラスでキッチリ書きますYO。
まぁ実際はコンテナっぽいものを作って、そこに描画させることになるのかな。
だから、FLASH-AS3だと、Spriteかなんかで

var sp = new Sprite;
sp.addChild(bmp);
stage.addChild( sp );
的な。

でも、こんなことするなら、わざわざFLEXじゃなくて、FLASHですればいいじゃんって
ことなんですけど、、、まぁ、気分で使い分けてるだけっす。
mxなら、
var temp : mx.controls.Image = new mx.controls.Image;
temp.x = 30;
temp.y = 85;
temp.width = 205;
temp.height = 216;
temp.source = "http://localhost/ren2.jpg";
addElement(temp);
ですかねー。

2011年2月9日水曜日

マウスイベントを最下層でひろうために。

CS3の時代にFlashで作ったAS3を見返して、FLEX4で実行させてみます。
クラスとしては後述の【keyAndMouse】クラスとしました。
keyAndMouseと言いながらも、keyは、ctrlとshiftをチェックするだけです。
要するにFLASHの、階層全てにイベントが発生するという特徴をいかして、
たとえボタンをクリックしてもkeydownがとれるように使います。
何につかうかといえば、何らかのGUIとしか言いようがないですけど、
今作ってるものには必要なんで^^;^^;
ということで、使い方は、mxmlのなかで、
~~略~~
public function MD(e){
 LL.text = "--M1---" + kam.getCS();
}
public function MU(e){
 LL.text = "--M2---" + kam.getCS();
}
public function MM(e){
 LL.text = "--M3---" + (ct++) + "/ " + kam.getCS();
}
public function MO(e){
 LL.text = "--M4---" + kam.getCS();
}
~~略~~
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
 kam = new keyAndMouse(this); 
 kam.setMD(MD);
 kam.setMU(MU);
 kam.setMM(MM);
 kam.setMO(MO);
~~略~~
って感じです。
要するに、、最下層のマウスイベントを、自分のクラス内にもってきたい時につかうのです。
まぁサンプルはどっちにしても同じ階層ですけど、このkamなるインスタンスを、引数として
別のクラスとかにもってって、そこで使うことをイメージしてます。
CS3のFLASHで作ってたときは、コンストラクタの引数はthisではなくstageでしたが、
引数をthis.stageにすると、
メインスレッド (中断 : TypeError: Error #1009: null のオブジェクト参照のプロパティまたはメソッドにアクセスすることはできません。)
といって怒られるので、thisに変更したのですが、実は、単に書く場所がマズかっただけで、
applicationCompleteHandlerで設定してやればOKでした。怠慢でした^^;^^;

ってことで、クラスは以下。たいしたことないっすけどね。
あぁ、あんまり型を書かない人なんで、すんません。。
package{
 //----------------------------------
 import flash.display.MovieClip;
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.events.KeyboardEvent;
 import flash.events.MouseEvent;
 import flash.ui.*;
 //----------------------------------
 public class keyAndMouse extends Sprite{
  var father  = null;
  var bControl = false;
  var bShift  = false;
  var funcMD  = null; // mouseDown event handler
  var funcMU  = null; // mouseUp   event handler
  var funcMM  = null; // mouseMove event handler
  var funcMO  = null; // mouseOver event handler
  var bKeep  = false;
  //--------------------
  var bMouseDown = false;
  //--------------------
  public function setMD(f){ funcMD = f;  }
  public function setMU(f){ funcMU = f;  }
  public function setMM(f){ funcMM = f;  }
  public function setMO(f){ funcMO = f;  }
  //--------------------
  public function getCS(){
   if(bControl && bShift) return 3;
   else if(bShift)   return 2;
   else if(bControl)  return 1;
   return 0;
  }
  //--------------------
  public function md(e){ if(funcMD) funcMD(e); }
  public function mu(e){ if(funcMU) funcMU(e); }
  public function mm(e){ if(funcMM) funcMM(e); }
  public function mo(e){ if(funcMO) funcMO(e); }
  //--------------------
  function keyAndMouse(f,bb:Boolean=true){
   bKeep = bb;
   father = f;
   this.addEventListener(Event.REMOVED_FROM_STAGE, removed);
   //-------------------
   // keyDown
   //-------------------
   father.addEventListener(KeyboardEvent.KEY_DOWN,
    function (e){
     if(e.keyCode == Keyboard.CONTROL) bControl = true;
     if(e.keyCode == Keyboard.SHIFT)  bShift = true;
    }
   );
   //-------------------
   // keyUp
   //-------------------
   father.addEventListener(KeyboardEvent.KEY_UP,
    function (e){
     if(e.keyCode == Keyboard.CONTROL) bControl = false;
     if(e.keyCode == Keyboard.SHIFT)  bShift  = false;
    }
   );
   //-------------------
   // mouseDown
   //-------------------
   father.addEventListener(MouseEvent.MOUSE_DOWN,
    function (e){
     if(bMouseDown){
      if(funcMU) funcMU(e);
      bMouseDown=false;  // 微妙な仕様
      return;     // 
     }
     bMouseDown = true;
     if(funcMD) funcMD(e);
    }
   );
   //-------------------
   // mouseUp
   //-------------------
   father.addEventListener(MouseEvent.MOUSE_UP,
    function (e){
     bMouseDown = false;
     if(funcMU){
      funcMU(e);
      if(!bKeep){
       funcMD = null;
       funcMU = null;
       funcMM = null;
      }
     }
    }
   );
   //-------------------
   // mouseMove
   //-------------------
   father.addEventListener(MouseEvent.MOUSE_MOVE,
    function (e){
     if(funcMM) funcMM(e);
    }
   );
   //-------------------
   // mouseOver
   //-------------------
   father.addEventListener(MouseEvent.MOUSE_OVER,
    function (e){
     if(funcMO) funcMO(e);
    }
   );
   //-------------------
  }
  //--------------------
  // like a destructer
  //--------------------
  private function removed(e:Event):void{
   removeEventListener(Event.REMOVED_FROM_STAGE, removed);
  }
  //--------------------
 }
 //----------------------------------
}

2011年1月6日木曜日

FLEXのMain.mxmlはどのように実行されるのか

まぁいわゆるMXMLというやつ。
これをコンパイルするとどうなるかというと、いったんActionScriptになるようですよね。
ということで、プロジェクト-プロパティでFLEXコンパイラの追加引数に【-keep】を追加。
さらに、ボタンをひとつ配置して、クリックイベントとだけ追加して、コンパイル。
MXMLとしては、こんな感じになる
<fx:Script>
  <![CDATA[
   protected function BTNID_clickHandler(event:MouseEvent):void
   {
    // TODO Auto-generated method stub
   }

  ]]>
 </fx:Script>
変換されると、こんな感じ
public class Main
    extends spark.components.Application
{
……略……
protected function BTNID_clickHandler(event:MouseEvent):void
{
 // TODO Auto-generated method stub
}
……略……
ということで、Main.mxmlというのが、Mainクラスになって、<fx:Script>の中が、そのままMainクラスになるという単純な構造のようだ。
ということで、最下層でいろいろやりたければ、

<fx:Script>
  <![CDATA[
   var aaa:Number = 0;
   public function test():void
   {
    var d:Date = new Date();
    var s:String = d.toTimeString();
    trace(s);
    trace(aaa++);
   }

   protected function BTNID_clickHandler(event:MouseEvent):void
   {
    test();// TODO Auto-generated method stub
   }

  ]]>
 </fx:Script>
なんて、適当なことをかいても、無事に、
public class Main
    extends spark.components.Application
{
……略……
 var aaa:Number = 0;
   public function test():void
   {
    var d:Date = new Date();
    var s:String = d.toTimeString();
    trace(s);
    trace(aaa++);
   }

   protected function BTNID_clickHandler(event:MouseEvent):void
   {
    test();// TODO Auto-generated method stub
   }
という風に変換されます。
ということで、あとは、【creationComplete】や【initialize】あたりに初期設定をいれてあれこれいじくりまわせばそれでOKってことですね。
うんそっか。簡単な話でしたね。