TreeMenu 折畳メニュ表示

TreeMenu 折畳メニュ表示基本ファイル作成

それではTreeMenu 折畳メニュ表示基本ファイル tree_menu.php を作成していきます。
作成ファイル内容は、
63Pear Village に戻り
左サイドナビ｢TreeMenu 折畳メニュ表示｣の中の
TreeMenu 折畳メニュ表示基本 PHP ファイル
から見てください。

HTML_TreeMenu 専用 JavaScript ファイルの読込

まず最初に Pear::HTML_TreeMenu用 JavaScript ファイルを読込みます。
<script language = "javascript" src = "js/TreeMenu.js"></script>
この JavaScript ファイルは前項 TreeMenu 折畳メニュ表示の準備
でダウンロ－ドした TreeMenu.js です。
なお、async は付けると動かないようです。
･･･ async src = ･･･とは書けません。

HTML_TreeNode クラスの使い方

基本となる Pear::HTML_TreeMenu の中の HTML_TreeNode クラスの使い方について説明します。
メニュの階層構造を設定するためのコンストラクタが HTML_TreeNode コンストラクタで HTML_TreeNode の基本情報を連想配列の形式で指定します。
その連想配列の利用可能なパラメ－タは次のようになっています。

上位層のツリ－情報の作成

HTML_TreeNode コンストラクタで HTML_TreeNode の基本情報を連想配列の形式で指定します。
上位の最初の階層を作成します。
この最上層の配列名を $data_0[0] とすると
$data_0[0] =array(
 'text' => 'Styles',
 'icon' => 'folder.gif',
 'expandedIcon' => 'folder-expanded.gif',
//展開した時のアイコン
 'expanded' => 'true'
//起動時にこのフォルダは展開する
);
となります。
引き続き他の上位層も作成します。
$data_0[1] =
 array('text' => 'Countries');
$data_0[2] =
 array('text' => 'Restaurants');
$data_0[3] =
 array('text' => 'Menus');

下位層のツリ－情報の作成

最上層の下に表示される下位層の配列名を$data[0][1]とすると
$data[0][1] = array(
 'icon' => 'folder.gif',
 'text' => 'Google',
 "link" => "http://www.google.co.jp/",
//リンク先
 "linkTarget" => "_blank");
/* 現在のウィンドウのタブの新しいタブ又は新しいウィンドウでリンクを開く */
引き続き他の下位層も作成します。
$data[0][1]～$data[0][2]
$data[1][1]～$data[1][4]
$data[2][1]～$data[2][3]
$data[3][1]～$data[3][2]

foreach文を使って上･下層のツリ－情報を結合

ここがちょっと難解です。
上位層の HTML_TreeNode( )インスタンスを作成します。
$menu1[0] = new HTML_TreeNode($data_0[0]);
･･････････
$menu1[3] = new HTML_TreeNode($data_0[3]);
次ぎに、これらに連なる下位層の HTML_TreeNode( )インスタンスを HTML_TreeMenu::addItem メソッドで上位層のインスタンスに組込みます。
$menu1[0] -> addItem(new HTML_TreeNode($data[0][1]));
$menu1[0] -> addItem(new HTML_TreeNode($data[0][2]));

$menu1[1] -> addItem(new HTML_TreeNode($data[1][1]));
･･････
$menu1[1] -> addItem(new HTML_TreeNode($data[1][4]));

$menu1[2] -> addItem(new HTML_TreeNode($data[2][1]));
･･････
$menu1[2] -> addItem(new HTML_TreeNode($data[2][3]));

$menu1[3] -> addItem(new HTML_TreeNode($data[3][1]));
$menu1[3] -> addItem(new HTML_TreeNode($data[3][2]));
これらを foreach 文で表現すると
foreach ($data_0 as $key1 => $value1){
 $menu1[$key1] = new HTML_TreeNode($data_0[$key1]);
  foreach ($data[$key1] as $key2 => $value2){
   $menu1[$key1] -> addItem(
    new HTML_TreeNode($data[$key1][$key2]));
  }
}
となります。

foreach文を使って４つの上位層を結合

折畳みツリ－メニュのオブジェトのインスタンスを
$menu = new HTML_TreeMenu();
とし、ここまでに作成した、４つの HTML_TreeNode( )インスタンス
$menu1[0]～$menu1[3]
を HTML_TreeMenu::addItem メソッドを使って $menu に組込みます。
$menu -> addItem($menu1[0]);
･････
$menu -> addItem($menu1[3]);
これらを foreach 文で表現すると
foreach ($menu1 as $key => $value){
  $menu -> addItem($menu1[$key]);
}
となります。

生成されたツリ－情報をHTML形式で出力

ツリ－情報が生成できたら後はこれを HTML_TreeMenu_DHTML クラスに引き渡します。
HTML_TreeMenu_DHTML クラスは引渡されたツリ－情報を折畳み可能なツリ－メニュの形式で 出力するためのレンダラ(描画)クラスです。
まずは HTML_TreeMenu_DHTML インスタンスを作成
$tree = new HTML_TreeMenu_DHTML($menu);
HTML_TreeMenu_DHTML::toHTML メソッドで生成されたツリ－メニュを出力します。
echo $tree -> toHTML();

折畳みツリ－メニュのオブジェトの内容

ついでに、できあがった折畳みツリ－メニュのオブジェト $menu の中身がどうなっているのか見てみましょう。
見てもしょうがないのですが････
echo "<pre>";
  print_r ($menu);
echo "</pre>";

折畳みツリ－メニュのオブジェトを保存

高速化のためできあがった折畳みツリ－メニュのオブジェト $menu を保存することにします。
PHP 関数 serialize を使用するとオブジェクトを文字列表現に変換することができます。
書式は
オブジェクト変換文字列表現＝ serialize(オブジェクト変数)
です。
よって
$so = serialize($menu);
とすると、オブジェクト $menu を文字列に変換することができます。
そして、PHP 関数 file_put_contents を使用して、 text フォルダに tree_menu.txt という名前で保存します。
file_put_contents
('text/tree_menu.txt', $so);

折畳みツリ－メニュのオブジェトの復活

ここまで来たらオブジェトを復活させてみましょう。
$si = file_get_contents
('text/tree_menu.txt');
$a = unserialize($si);
$tree1 = new HTML_TreeMenu_DHTML($a);
echo $tree1 -> toHTML();
とすれば復活させることができることは容易に想像できますね。
要するに、あらかじめ tree_menu.txt を作成しておけば unserialize 関数を使って高速に 折畳みツリ－メニュを表示することができるのです。

ここまでで TreeMenu 折畳メニュ表示基本ファイル作成は完了です。
引き続き TreeMenu 折畳メニュ表示基本ファイルの確認をしていきます。
長くなりましたのでここで一旦切りたいと思います。

TreeMenu 折畳メニュ表示基本ファイル確認　に続く
TreeMenu 折畳メニュ表示の準備　に戻る

63PearVillageに戻る