「DOMを扱う」の版間の差分

提供: LWF Wiki
移動: 案内検索
(ページの作成:「==DOMを扱う== LWFでは、特殊な指定をすることでボタン領域をDOMとして扱うことが出来ます。<br/> 生成されたDOMは普通のHTMLのよ...」)
 
(DOMを生成する)
20行: 20行:
 
     div.style.color = "#ffffff";
 
     div.style.color = "#ffffff";
 
     div.style.fontSize = "16px";
 
     div.style.fontSize = "16px";
     div.innerHTML = "これは<span style='color:#ff0000;font-size:36px;'>DOM</span>です";
+
     div.innerHTML = "これはDOMです。タグとか使えます";
 
   
 
   
 
     return div;
 
     return div;

2013年11月14日 (木) 12:15時点における版

DOMを扱う

LWFでは、特殊な指定をすることでボタン領域をDOMとして扱うことが出来ます。
生成されたDOMは普通のHTMLのように扱うことが出来るので様々なことが出来ます。
ただし、DOMの内容はLWFの管理外になるので、実装によっては端末依存問題を踏んでしまったり
パフォーマンスの低下を引き起こすことにもなるので注意して使用してください。

DOMを生成する

まずはDOMとして扱われるボタンを作ります。
Flashでボタンを新規に作成してください。その際「シンボル名」に下記の命名規則を適用してください。

PROG_DOM_[識別名]

そうすると、作成したボタンはLWF再生時にDOMとして扱われるようになります。
そして、DOMとして扱われるようになる際に呼び出されるコンストラクタを設定することでDOMを操作できるようになります。

【サンプル】

//DOMが生成される時に呼び出されるコンストラクタを作成
var domConstructor = function (lwf, name, width, height) {
    console.log("create div");
    var div = document.createElement("div");
    div.style.width = width + "px";
    div.style.height = height + "px";
    div.style.color = "#ffffff";
    div.style.fontSize = "16px";
    div.innerHTML = "これはDOMです。タグとか使えます";

    return div;
}

//コンストラクタをセット
//これでDOMが生成される時に上記のコンストラクタが呼び出されるようになる。
window.LWF.ResourceCache.get().setDOMElementConstructor(domConstructor);


コンストラクタ用の関数の引数には
第1引数:DOMが所属しているLWFインスタンス
第2引数:DOMの識別名 シンボル名「PROG_DOM_hoge」とした場合hoge
第3引数:DOMの幅
第4引数:DOMの高さ
が入ってきます。