Neo Inspiration

FlexでAccordionHeaderにボタンを配置の続きで、
AccordionHeaderにつけたボタンに押した感を出すやり方。

やり方としては2段階にわけて、
まずはボタンの上にマウスが来たら指マークにして、
その後その部分をダブルクリックしたら、イベントをさらに発生させる
ようにします。

こんなかんじ

とりあえず前提としてAccodionにイベントを埋め込んでおく

//Accordionはこうかいておいてイベントリッスンさせる

各イベント

//マウスカーソルがボタンの上にきたら指マークに変更
private function dispatchMouseMove(e:MouseEvent):void {
    var accHeader:AccordionHeader = new AccordionHeader();
    var button:Button = new Button();

    //AccordionHeaderをすべてチェックする
    for (var i:int = 0;i < myAccordionHeader.numChildren;i++) {
        accHeader = myAccordionHeader.getHeaderAt(i) as AccordionHeader;
        button = accHeader.getChildAt(0) as Button;
        //ボタンの上にマウスがあるかをチェックする
        if (button.getRect(this).useHandCursor(e.stageX,e.stageY)) {
            //マウスがボタンの上にいたら useHandCursorをtrueにする
            accHeader.buttonMode = true;
            accHeader.useHandCursor = true;
        } else {
            accHeader.useHandCursor = false;
        }
    }
}

まあ経験が浅いので上記のやり方くらいしか思いつかなかったんですが、
AccordionHeaderのボタンの位置とマウスカーソルの位置をチェックして、
contains() でチェックしていくというやり方です。
指カーソルに変更するのは、別のやり方もあると思いますが、
とりあえずAccordionHeaderのプロパティを書き換えるだけでも上手くいきます。

で、次に指カーソル状態でダブルクリックをチェックします。

//ボタンの上でダブルクリックされたらイベント発動
private function dispatchDblClick(e:MouseEvent):void {
    var accHeader:AccordionHeader = new AccordionHeader();
    var button:Button = new Button();

    //AccordionHeaderをすべてチェックする
    for (var i:int = 0;i < myAccordionHeader.numChildren;i++) {
        accHeader = myAccordionHeader.getHeaderAt(i) as AccordionHeader;
        button = accHeader.getChildAt(0) as Button;
        if (button.getRect(this).contains(e.stageX,e.stageY)) {
            accHeader.addEventListener(MouseEvent.CLICK,myDoubleClickEvent);
            accHeader.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
        }
    }
}

こっちも同じようにAccordionHeaderのボタンの位置と
マウスカーソルの位置をチェックして、
contains() でチェックしていくというやり方です。

一応実装してみた

一応このAccordionはTinyTodoというアプリで実装してみたので、
よかったら見てみてください。
Air製Todo管理ツール

FlexでAccordionHeaderにボタンを配置

SeoScouterのブクマのタグがFlexになっていて、
いや。。これAjaxなんだよな。。。
と思いつつ、ついでにFlexも勉強するかなーってことで、始めてみたら・・
面白い！！！

ということで土日からがっつりやってます。

今ちょうど、Todo管理ツールが欲しかったので、
それを作成することに。
まあもうほとんどできたので、
あとはテストで自分で使ってみるだけなんですが。

こんなかんじ。

アコーディオン形式にしようとおもって、
アコーディオンで作り始めたら、このヘッダーの部分に
クリッカブルなボタン入れたり、それをマウスオーバーで指ポインタにしたり
とか　そういうのが結構大変だったので、
随時メモっていきます。

—-

で、ボタンの配置は
そのまま accordion.***=ボタン
みたいにはかけなくて、（iconなら入れれますが）
mxmlで配置したaccordionを
ActionScriptでAccordionHeaderをextendしたクラスを書いて、
super()してaddchildする方法（AccordionHeaderが出力される際に必ず処理される）と、

一旦配置したaccodionのchildを accordion.getHeaderAt(i) as AccordionHeader
みたいなかんじで、順番に取得して、AccordionHeaderとして
そこに addchildする（こっちなら特定のだけボタンを配置できる）
方法の2個ができるのがわかって、マウスオーバーとかもしたかったので、
すぐ実装が理解できた下の方で実装しました。

こんなかんじ。

//アコーディオンを配置
<mx:Accordion id="accMain" openDuration="300"
 doubleClickEnabled="true" doubleClick="dispatchDblClick(event)"
 mouseMove="dispatchMouseMove(event)" />

<mx:Script>
<![CDATA[
pricate function initAccordion():void {
    //アコーディオンのchildの数だけforをまわして、buttonをつけていく
    for ( var i:int = 0; i < accMain.numChildren; i++ ) {
        var button:Button = new Button();
            button.width = 20;
            button.height = 20;
            button.styleName = "button";
        (accMain.getHeaderAt(i) as AccordionHeader).addChild(button);
    }
}
]]>
</mx:Script>

アコーディオンのパーツをどこかで書き出した後、initAccodion()で
アコーディオンのchildをすべて取得して、それぞれにaddChildしています。

ただ、これだと、ヘッダーにかぶさって？
かわかりませんが、ボタンが押した感じがしないので、
マウスオーバーで指さしマークにしたいとおもいますが、
長くなるので、わけます。

Airで　というよりも jqueryで　というほうが正しいきもしますが、
seo-webmasterではRESTでGoogleにログインするわけですが、
実装はこんなかんじの雑なソースになっております。

    var auth_url = "https://www.google.com/accounts/ClientLogin";
    var auth_id = $("#auth_id").val(); //フォームのIDを取得
    var auth_pass = $("#auth_pass").val(); //フォームのパスワードを取得

    $.ajax({
        url : auth_url,
        type : "POST",
        data  : {"accountType":"GOOGLE","Email":auth_id,"Passwd":auth_pass,"service":"サービス名","source":"ソース名"},
        error : function(XMLHttpRequest, textStatus, errorThrown){
            //エラー処理
        },
        success: function(rs) {
            var token = rs.match(/Auth=([a-zA-Z0-9_\-]+)/); //ここでトークンを切り出して保存する
            $('#SITE-TOKEN').val(token[1]);
        }
    });

これはPOSTなので、いいのですが、次はサイトの認証。
こっちはPUTを使います。

    var webmaster_url = "https://www.google.com/webmasters/tools/feeds/sites/" + encodeURIComponent(サイトID).replace(/\./g,"%2E");
    var token = $('#SITE-TOKEN').val()//認証トークン;

    //送信するXMLを生成する
    var xml = "<?xml version=\"1.0\" encoding=\"utf-8\"?><atom:entry xmlns:atom='http://www.w3.org/2005/Atom' xmlns:wt='http://schemas.google.com/webmasters/tools/2007'><atom:id>" + site_id + "</atom:id><atom:category scheme='http://schemas.google.com/g/2005#kind' term='http://schemas.google.com/webmasters/tools/2007#site-info'/><wt:verification-method type='htmlpage' in-use='true'/></atom:entry>";

    $.ajax({
        url : webmaster_url,
        type : "PUT",
        processData : false, //デフォルトがtrueなので必ずきってく
        dataType:"xml", //なくても動いたけど一応　受信コンテンツタイプの指定
        contentType : "application/atom+xml; charset=UTF-8", //コンテンツタイプXMLにしないとデフォルトが urlencodedなのでエラーになる
        data: xml, //送信xml
        beforeSend : function(req) {
            //ログイン時の認証トークンを送る
            req.setRequestHeader('Authorization', 'GoogleLogin auth=' + token);
        },
        error : function(XMLHttpRequest, textStatus, errorThrown){
            //エラー処理
        },
        success: function(rs) {
            //成功時の処理
        }
    });

ポイントとしては processData をきることと、
contentType をちゃんとatom+xmlにすること、
それからbeforeSendでsetRequestHeaderにトークンを埋め込むことかなー

ここらへんのリファレンスみたいなのがあんまなくて（読みかたがわからないだけかも）
適当に大文字にしたり小文字にしたり半角スペース入れたり
してたら通った感じなので、もしかしたら間違ってるかも。

AirでGoogle認証を使うならこんなかんじで試してみてください。