g3が生成するHTMLのマスターデータは以下のようになっています。(これは現在の最新。version 0.2のものと少し変わっています。)
head要素はフレームワーク側で生成するのでbody要素をデータとして用意しています。試しにHTML5のセクション関連の要素を使ってみました。
また、CSSによる修飾や、HTML生成時の置換に対応するため、必要だと思われる要素にIDを設定しています。
<body> <header> <div id="header"> <div id="header-content"> <h1>{title}</h1> </div> </div> </header> <div id="container"> <aside> <div id="aside"> <div id="aside-content"/> </div> </aside> <article> <div id="article"> <div id="article-body"> <div id="article-content"/> </div> </div> </article> </div> <footer> <div id="footer"> <div class="powered"> Powered by g3. </div> </div> </footer> </body>
g3では、g3アプリケーションが生成するHTML断片によって、以下の置き換えが行われます。
- body要素まるごと
- 指定したIDの要素
- ID article-contentのdiv要素
body要素まるごとの場合は、前述のマスターHTMLは使用されなくなります。
HTML断片のルート要素にIDが指定されていて、マスターHTMLの要素のIDと一致したときは、マスターHTMLの該当する要素がHTML断片に置換されます。
それ以外の場合は、IDがarticle-contentのdiv要素がHTML断片に置換されます。
このため、g3アプリケーション側ではアプリケーションとして表示したいコンテンツのみの作成を行うだけで、ヘッダー、サイド、コンテンツ、フッターから構成されるWebページのコンテンツに自動的に埋め込まれます。
一般的には、最後のarticle-contentのdiv要素に置換する方法が使われることになると考えられます。
今回、色々と調べてみて、HTML5はAjaxでGUI的な処理を行わない場合でも便利に使える、色々な機能が地味に拡張されてことが分かりました。そういうこともあり、g3ではWeb UIはHTML5を軸に機能を作り込んでいく予定です。
0 件のコメント:
コメントを投稿