オルタナティブ・ブログ > イメージ AndAlso ロジック >

ヴィジュアル、サウンド、テキスト、コードの間を彷徨いながら、感じたこと考えたことを綴ります。

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

»

先般紹介した、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>では、ユーザーが検索キーを入力する間は「検索機能の使い方」の説明文を表示しておき、「検索」ボタンがクリックされた時、「検索機能の使い方」を「検索結果」の表示画面に切り替えます。

Wp7_panoramatest2_1

処理対象データは、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で処理します。

以前の関連記事
Windows Phone 7 開発で、Panoramaコントロールを使う。
Windows Phone 7 Silverlightアプリケーションを作ってみた。

Comment(0)