2006 03 18_osc2006_x_cube_template

XOOPS Cube テンプレート仕様 Malaika System 早川知道 (Tom_G3X ) 2006.3.18

注意事項 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Xcube のテーマ・テンプレート仕様概要 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Smarty 最新バージョンに ,[object Object],[object Object],[object Object],XOOPSv2 rc1 　～　 XOOPS 2.0.2  Smarty 2.3.0 XOOPS 2.0.3 　～　 XOOPS 2.0.7.3  Smarty 2.5.0 XOOPS 2.0.9 　～　 XOOPS 2.0.13a-JP  Smarty 2.6.5-dev XOOPS Cube 2.1 alpha1  Smarty 2.6.12 最新版に更新

定数の変数アサイン ,[object Object],[object Object],[object Object],[object Object],例 : <{$smarty.const.XOOPS_URL}> は <{$xoops_url}> と同じ（共に使用可能）言語定数のアサインを簡略化言語ファイル（言語定数の定義） define(‘_MD_USER_LANG_AVATAR’, “ アバター” ); 実行ファイル（テンプレート変数のアサイン） $xoopsTpl->assign(“lang_avatar”, _MD_USER_LANG_AVATAR); テンプレート（変数の記述） <{$lang_avatar}> ～今まで一般的だった記述方法～言語ファイル（言語定数の定義） define(‘_MD_USER_LANG_AVATAR’, “ アバター” ); テンプレート（変数の記述） <{$smarty.const. _MD_USER_LANG_AVATAR}> ～ XOOPS Cube で多用される記述方法～

オブジェクトの変数アサイン ,[object Object],[object Object],[object Object],テンプレート記述例 : <{$thisUser->getVar(‘uid’)}> Object をそのままアサイン可能 // XOOPS Object でデータ取得 $handler =& xoops_gethandler('user'); // Objeact から配列に置換え　　（面倒な処理） (^^ ゞ // 配列をテンプレート変数にアサイン $xoopsTpl->assign(“thisUser”, $thisUser); // XOOPS Object でデータ取得 $handler =& xoops_gethandler('user'); $this->mObject =& $handler->get($uid); // Object を直接テンプレート変数にアサイン $render->setAttribute("thisUser", $this->mObject); ～ XOOPS Cube 2.1 で可能になった～

テーマ・テンプレートでサニタイズ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<{ $object-> get (‘xxxx’) }> 　　　　　生値 <{ $object-> get (‘xxxx’) | escape }> 　サニタイズ済みの値変換前変換後 ------- -------- < 　　　　 < > 　　　　 > “ 　　　　 " ‘ 　　　　　‘ & 　　　　 &

Xcube 独自 Smarty プラグイン追加 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],では、簡単に主な関数の説明を・・・

Xoops_input , xoops_textarea ,[object Object],[object Object],使用例： <{ xoops_input type=“text” value=“$object->get(‘name’)” }> type = “text” などフォームのタイプを指定する value = サニタイズが自動的に行なわれる。その他、 name , class , size , maxlength , id , default などが指定できる。 <input type=“text” value=“<{$object->get(‘name’)|escape}>” /> と同じ。 ,[object Object],[object Object],使用例： <{ xoops_textarea name=“name” value=“$object->get(‘name’)” }> value = サニタイズが自動的に行なわれる。その他、 name , class , cols , rows , id , readonly などが指定できる。 <textarea name=“name”><{$object->get(‘name’)|escape}></textarea> と同じ。追記 : key を追加 (3/15) <{assign name=“id” value=$obj->get(‘id’)}> <input type=“checkbox” name=“hoge[<{$id}>]”> <{xoops_input type=“checkbox” name=“hoge” key = $obj->get(‘id’) }>

Xoops_dhtmltarea , xoops_token ,[object Object],[object Object],[object Object],[object Object],<{ xoops_dhtmltarea name=description value=$actionForm->get('description')}> <{ xoops_token form=$actionForm}> <input type=“hidden” name=“module.user.GroupEditForm.TOKEN” value=“..token 値 .." />

Xoops_pagenavi ,[object Object],[object Object],< div class = "pagenavi" >< { xoops_pagenavi pagenavi=$pageNavi}> </ div > pagenavi=$pageNav は、 XCube_PagaNavigator.class.php を前提にしている。 <{ xoops_pagenavi total=“20” current=“3” url="list.php?start=“ }> という、記述も可能。

デバグ用モディファイ ,[object Object],[object Object],[object Object],[object Object],[object Object],<{ $userObject | debug_print_var }> デバグ出力例：

【通常表示画面】 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

【管理画面】 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

ホールバック (Fallback) ,[object Object],[object Object],[object Object],触っちゃいけない、禁断のディレクトリ～ ,[object Object],/modules/ (module_dir) /admin/templates/ / ＊ .html /icons/ ＊ .gif ( モジュール専用のアイコン等 ) /modules/base/admin/theme/ / admin_theme.html 　 ( 管理画面用テ－マ ) /style.css 　　 ( 管理画面テーマ用 CSS) /icons/ ＊ .gif 　　 ( 管理画面用共通アイコン ) /design/ ＊ .gif 　 ( テーマ専用画像 ) ,[object Object]

オーバーライド (Override) ,[object Object],[object Object],[object Object],[object Object],変更したいテーマ・テンプレートだけを、これらのディレクトリに入れておけば、デフォルトを上書きした状態になり、デザインの変更が容易になる。上書き専用！失敗したら、消そう！　元に戻るよ～ /themes/admin/ / admin_theme.html (override 管理画面用テ－マ ) /style.css (override 管理画面テーマ用 CSS) /icons/ ＊ .gif (override 理画面用共通アイコン ) /design/ ＊ .gif (override テーマ専用画像 ) ,[object Object],/themes/admin/modules/ (module_dir) / / ＊ .html (override 管理画面テンプレート ) ,[object Object]

オーバーライドの問題点 ,[object Object],これらを解決する為、管理画面専用の Smarty モディファイを実装。管理画面のデザインを変更しよう！そうだ！オーバーライド機能を使おう！！だけど、まてよ？？ハテ？？ info.gif だけを変更したいのに、 admin_theme.html も書き換えなければならない・・ ? style.css を書き換えた時、背景画像のパスも書き換えなければならない・・ ? 困ったもんだぁ～～。やっとれんがやぁ～！ (fallback)/admin_theme.html で、 (fallback)/icons/info.gif を表示する時通常は、こう記述するが・・・・・。例 : <img src=“<{$smarty.const._XOOPS_URL}>/modules/base/admin/theme/icons/info.gif” />

モディファイ theme ,[object Object],記述方法： <{ “icons/info.gif” | theme }> 優先順位 1. 　 /themes/admin/modules/ (module_dir) /icons/ info.gif オーバーライド内の各モジュールの icons ディレクトリ 2. 　 /themes/admin/icons/ info.gif オーバーライド内の共通 icons ディレクトリ 3. 　 /modules/ (module_dir) /admin/template/icons/ info.gif 各モジュールのテンプレート内の icons ディレクトリ 4. 　 /modules/base/admin/theme/icons/ info.gif ホールバックディレクトリ管理画面だけで有効なモディファイである優先順位に従ってファイルの有無をチェックし、最初に見つかったファイルを表示する。

モディファイ stylesheet ,[object Object],[object Object],記述方法： <{stylesheet file=style.css}> 優先順位 1 　 /themes/admin/ style.css オーバーライド内の style.css 2 　 /modules/base/admin/theme/ style.css ホールバックディレクトリ内の style.css 優先順位に従って CSS ファイルの有無をチェックし、最初に見つかった CSS ファイルを使用する。 ↓ /modules/base/admin/css.php より実行 ↓ CSS の背景画像などの相対パスの問題を解決。特に、相対パスの関係を意識する必要が無くなる管理画面だけで有効なモディファイである

StyleSheet について ,[object Object],[object Object],[object Object],[object Object],こんな記述が出来るのは、管理画面の style.css だけです。 ← ・・・・・・・・・・・・・・・・・・・・　 /modules/base/admin/css.php ,[object Object],h2 { color : #666666 ; background : url( <{“icons/h2bg.gif"|theme}> ) repeat-x ; padding-left : 5px ; }

管理画面テンプレート指針 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

見出し用 HTML タグ ,[object Object],[object Object],[object Object],h1 　テーマ用（予約タグ） h2 　テーマ用（主に、現在のモジュール名の表示用に使用） h3 　テンプレート用（管理画面名の表示用に使用する） h4 　テンプレート用（管理画面内の見出し用） h5 　テンプレート用（管理画面内の見出し用）

CSS クラス ,[object Object],.outer 　　　　　 table タグに使用　 th 　　　　　　　 table 内の見出し用 .head 　　　　　 table 内のヘッダー用 .odd 　 .even 　 table 内の各 td tr に使用 .foot 　　　　　　 table 内のフッター用 .adminnavi 　各管理画面上部のナビ（バンくずナビ）に使用 .topnavi 　　　　リスト表示画面上部の新規リンク等に使用 .tips 　　　　　　　管理画面の簡単な説明等の表示に使用 .pagenavi 　　　リスト表示画面等のページナビ箇所に使用 ,[object Object]

基本フォーマット ( ヘッダー ) ,[object Object],<div class = "adminnavi" > <a href = “” > モジュール名 </a> »» <a href = “” > 管理画面名 </a> <{* »» .... 必要に応じて ........ *}> </div> <h3> 管理画面名 </h3> <div class = "tips" > 必要に応じて、簡単なアドバイス等の表示に使用可能 </div>

基本フォーマット ( リスト ) ,[object Object],<div class = “toptab” > [ <a href = “” > 新規作成 </a> ] </div> <table class = "outer" > <tr> <th> xxxxxx </th> ： </tr> <{foreach item=obj from=$objects}> <tr class = "<{cycle values='odd,even'}>" > <td> <{$obj->getVar(‘xxxx’)}> </td> ： </tr> <{/foreach}> </table> <div class = "pagenavi" > <{xoops_pagenavi pagenavi=$pageNavi}> </div>

基本フォーマット ( 編集・新規追加 ) ,[object Object],<form xxxxxxxxxxxx > <table> <tr> <th colspan = "2" > 管理画面名 </th> </tr> <tr> <td class = "head" > xxxxxx </td> <td class =“ <{cycle values=“odd,even”}>” > xxxxxx </td> </tr> ： <tr> <td colspan = "2" class = "foot" > xxxxxx </td> </tr> </table> </form>

管理画面ヘルプ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

ヘルプ専用モディファイ helpurl ,[object Object],[object Object],<a href = “<{ ‘xxxx.html’ | helpurl }>” > 次のページ </a> ( /modules/hogehoge/language/japanese/help.html ) Hogehoge モジュールヘルプ・・・・・・・・・・・・・・・・・・・・・・・ <a href = “<{ ‘help2.html’ | helpurl }>” > 続きは「ヘルプ２」 </a> ( /modules/hogehoge/language/japanese/help2.html ) Hogehoge モジュールヘルプ２・・・・・・・・・・・・・・・・・・・・・・・ <a href = “<{ ‘help.html’ | helpurl }>” > 「ヘルプ１」に戻る </a>

ヘルプ記述ルール ,[object Object],[object Object],各ヘルプファイルは、 <ul><li> などの簡素な形式で記述するのが望ましい。 ( /modules/base/admin/templates/help.html ) < div class = "adminnavi" > < a href = “ ・・・・” > モジュール名 </ a > »» ヘルプ </ div > < h3 > ヘルプ < a href = “ ・・・・” > ( モジュール名 ) </ a ></ h3 > < div class = "help" >< {$contents}> </ div > ( /modules/hogehoge/language/japanese/help.html ) < h4 > XOOPS 2.0.x 操作移行リスト </ h4 > < ul > < li >< a href = " < {'xoops2.html'|helpurl}>"> こちら </ a > をご覧ください </ li > </ ul >

おしまいご参考にしていただければ幸いです御清聴ありがとうございました

2006 03 18_osc2006_x_cube_template

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

Viewers also liked

Viewers also liked (8)

Similar to 2006 03 18_osc2006_x_cube_template

Similar to 2006 03 18_osc2006_x_cube_template (20)

More from Tom Hayakawa

More from Tom Hayakawa (20)

Recently uploaded

Recently uploaded (7)

2006 03 18_osc2006_x_cube_template

Editor's Notes