Mango 対応 Silverlight 検索アプリケーションの作成（1）コンテンツの構成

2011/05/31

先般紹介した、Mango 対応 Silverlight 検索アプリケーション「菜食献立データベース365」の開発方法を解説していきます。
開発のための準備については、以前の記事を参照してください。

・開発環境の構築方法と、日本語入力使用方法
「Windows Phone 7 アプリケーションの開発環境を構築する」
「”Mango”Windows Phone Developer Tools 7.1 Beta のインストール」

筆者のVS2010は英語版であり、上記手順は英語版のものです。
筆者はWindows Phone 7 アプリケーションの開発環境を構築したうえで、Mangoの環境に移行しています。
Mangoの段階からの環境構築については、テストしていません。

今回作成するサンプルアプリケーションの処理は、次の動画のとおりです。
開発ツールの基本操作や、本記事で作成するサンプルアプリケーションの概要については、過去の記事と重複する部分もありますが、再度取り上げていきます。
【操作をキャプチャした動画を見る】

では、Mango 対応 Silverlight 検索アプリケーションを作っていきましょう。
コードを書く前に、まず、アプリケーションの構造を説明します。

このアプリケーションでは、スクリーンに収まらないデータを表示するため、Panoramaコントロールを使います。
このコントロールを表す要素は、<controls:Panorama>です。その子として、複数の<controls:PanoramaItem>を持つことができます。フリックによって表示するスクリーンの枚数を増やすには、この子要素を追加します。
本アプリケーションでは、次の4つの画面のために、4個の<controls:PanoramaItem>を使います。

(1)　今日の献立
(2)　季節の料理
(3)　一品検索の検索フォーム
(4)　検索機能の使い方、検索結果

4個目の<controls:PanoramaItem>では、ユーザーが検索キーを入力する間は「検索機能の使い方」の説明文を表示しておき、「検索」ボタンがクリックされた時、「検索機能の使い方」を「検索結果」の表示画面に切り替えます。

処理対象データは、XML文書ファイルとして作成しています。「今日の献立」を表示するために、一品検索の365件のデータを処理対象とすることは、走査効率がよくないため、3個のファイルに分けていますが、基本的には、構造は同じです。

(1)　今日の献立（TodayMenu.xml）
(2)　季節の料理（ThisMonth.xml）
(3)(4)　一品検索（DailyMenu.xml）

＜?xml version="1.0" encoding="UTF-8"?＞
＜本日の献立＞
　　＜献立インデックス="1001"＞
　　　　＜ID＞366＜/ID＞
　　　　＜分類＞ご飯物＜/分類＞
　　　　＜主献立画像="bambooShoot001.png"＞二色たけのこご飯＜/主献立＞
　　　　＜菜食基本食材＞6人分：米3合、　～略～　濃い口しょうゆ＜/菜食基本食材＞
　　　　＜菜食オプション＞しめじ、こんにゃく、きぬさや＜/菜食オプション＞
　　　　＜作り分け方＞前日の晩から、干ししいたけを　～略～　盛り付けます。＜/作り分け方＞
　　　　＜肉＞鶏もも肉＜/肉＞
　　　　＜魚介＞―＜/魚介＞
　　　　＜乳＞―＜/乳＞
　　　　＜卵＞卵（錦糸玉子）＜/卵＞
　　　　＜献立例＞白魚サラダ　～略～　いちご。＜/献立例＞
　　＜/献立＞
　　＜献立＞繰り返し、略
＜/本日の献立＞

"インデックス"属性値の4桁の数字は、＜肉＞＜魚介＞＜乳＞＜卵＞の各要素の内容テキストに対応しています。一品検索用のXML文書ファイルは、Microsoft Accessで作成し、フラットな構造でエクスポートされたものを、XSLTスタイルシートによって変換しています。その際に、"インデックス"属性値を自動的に追加しています。

これらのXMLデータを、LINQ to XMLで処理します。

Sei

2011/05/31 23:48:33

Comment(0)

trackback(0)