PROJECT KySSの概要 薬師寺国安のページ 個人事業所セイザインデザイン リンク集 PROJECT KySS ホーム Silverlightのメニューページへ戻る
PROJECT KySS Logo

About N-Dimension XML Tree

PROJECT KySS Webサイト メニューページの木についての説明

XMLツリーの操作イメージ
このトップページのXMLデータ検索処理のユーザインタフェースは、Windows 7下のIEでの閲覧をイメージして、デザインされています。 XMLツリー中の任意のノードをタッチすると、光のラインが伸びて、検索キーが確定していきます。どのノードをどの順番で何回タッチしても大丈夫なロジックになっていますから(ただし、シングルタッチ)、できればタッチ可能なディスプレイで閲覧してください。
なお、デザインからプログラミングまで、Visual StudioとExpression Studioだけで開発されています。
画像もすべてExpression Designで作成されています。

操作手順と表示結果

1. 初期画面
メニューページにアクセスすると,Silverlightアニメーションにより,3つの大分類が表示されます。
1つはTechnique,1つはWorks,1つはHostingです。このうち,Hostingメニューは,ホスティング・サービスのメニューページにリンクしています。木構造データとして処理しているのは,TechniqueカテゴリとWorksカテゴリのデータです(図1)。
【図1】
図1
2. 「Technique」の木を選択した場合
「Technique」の木を選択すると,「Technique」の中の5つのノードが表示されます。
図2は,「Technique」にある5つのノードのうち,「Silverlight & WPF」を選択(して[View]ボタンをクリック)した場合です。検索結果の表示画面に「Silverlight & WPFの一覧」というタイトルが表示されています。
※画面キャプチャの検索結果は,2009年12月7日時点のものです。
【図2】
図2
一度[Reset]ボタンをクリックして初期状態に戻し,今度は,「Technique」の5つのノードのうち,「Silverlight & WPF」を選択し,さらに伸びた枝から,[Books & Articles]ノードを選択してみてください。図3のように,「Silverlight & WPF」のうち[Books & Articles]のデータが検索されます。検索結果の表示画面には,「Silverlight & WPF / Books & Articlesの一覧」というタイトルが表示されています。
【図3】
図3
3. 「Works」の木を選択した場合
「Works」の木を選択すると,「Works」の中の3つのノードが表示されます。
図4は,「Works」にある3つのノードのうち,「Books & Articles」を選択(して[View]ボタンをクリック)した場合です。検索結果の表示画面に「Books & Articlesの一覧」というタイトルが表示されています。
【図4】
図4
一度[Reset]ボタンをクリックして初期状態に戻し,今度は,「Works」の3つのノードのうち,「Books & Articles」を選択し,さらに伸びた枝から,[Silverlight & WPF]ノードを選択してみてください。図3のように,[Books & Articles]のうち,「Silverlight & WPF」のデータが検索されます。検索結果の表示画面には,「Books & Articles / Silverlight & WPFの一覧」というタイトルが表示されています。
【図5】
図5
このように,処理対象としているXML文書のデータは,Technique,Worksという,2つの視点から見ることができます。
このメニューページで用いたXML文書は,ごく一般的な構造の設計にすぎません。
しかし,将来的には,このような複数の異なる構造の木が単体のオブジェクトとして扱われるようになる日が来ます。それは,皆さんが(ギリギリ筆者も?)現役中に起こりうる変化に違いありません。