Dreamweaver記事

AIRチュートリアル Dreamweaver 第３回　リッチなUIを作ってみよう！～ Spryエフェクトと入力チェックを利用する～

第３回の完成画面

制作に入る前に、まずは今回のチュートリアルの完成画面を見てみましょう。

第２回からのレイアウトの変更点として画面上部にアプリケーションのタイトルを配置し、その下に条件指定エリアとしてホテルの種類を選択するプルダウンリストと、検索を開始するための「SEARCH」ボタンを配置しています。
AIRアプリケーションを起動すると、タイトルおよび条件指定のエリアが表示効果付きで表示されます。
「SEARCH」をクリックすると、“HOTELS”と“DETAILS”のエリアが順次表示され、検索結果が確認できるようになります。

大まかなステップ

第３回の大まかなステップとしては、以下の４つとなります。

1. レイアウトを作成する。
2. 検索結果を表示させる。
3. 表示効果を設定する。
4. プルダウンリストで選択された情報をチェックする。

データの連係のために、スクリプトをコーディングしますが、難しくはありません。大丈夫！
本チュートリアルでは、AIRアプリケーションの開発がおもな学習内容となりますので、タグやCSSに関しては言及しません。
第３回のチュートリアルで新たに使用する画像やスクリプトファイルが追加されていますので、事前にサンプルファイル{サンプルファイルのリンク}から、「images」「SpryAssets」フォルダをローカルサイトにコピーしてください。
準備が出来たら、チュートリアルを始めるとしましょう！

レイアウトを作成する

タイトルおよびプルダウンリストのためのフォームをレイアウトします。

【HTMLボディ以下にコピーしてください】

<div id="title" style="margin:10px;">
<img src="images/title.gif" />
</div> 
<div id="menu">
<form id="form1" name="form1" method="post">
		<div id="formregion">
			<label>
				<select name="hotel_type" id="hotel_type2">
				<option value="">選んでください</option>
				<option value="0">指定しない</option>
				<option value="1">旅館</option>
				<option value="2">ペンション・民宿</option>
				<option value="3">貸別荘</option>
				</select>
			</label>
		</div>
<input type="submit" value="SEARCH">
</form>
</div>

【コードビュー】

また後の手順で表示効果を追加するための準備として、divタグを追加します
HOTELSの画像をdivタグで囲みます。

【<div id="box">以下を差し替えてください】

<div id="hotel-title"><img src="images/hotels.gif" /></div>

詳細表示を変更します。文字画像と、詳細情報部分にdivタグを追加します。

【<div id="right">をタブセレクタで選択して差し替えてください】

<div id="right">
		<div id="detail-title"><img src="images/details.gif" /></div>
		<div id="sidebar">
	<div id="boxshot" spry:detailregion="dsHotels"><img src="{PictureURL}" /></div>
		<div id="Accordion1" class="Accordion" tabindex="0">
	<div class="AccordionPanel">
		<div class="AccordionPanelTab">
			<h3>ホテル説明</h3>
		</div>
		<div class="AccordionPanelContent">
		<div spry:detailregion="dsHotels">
			<p class="hotelCaption">{HotelCatchCopy}</p>
			<p>{HotelCaption}</p>
		</div>
	</div>
</div>
	<div class="AccordionPanel">
		<div class="AccordionPanelTab">
			<h3>ホテル詳細</h3>
		</div>
		<div class="AccordionPanelContent">
			<div spry:detailregion="dsHotels">
				<p>{HotelName}</p>
				<p>{PostCode}</p>
				<p>{HotelAddress}</p>
				<p>{AccessInformation}</p>
			</div>
		</div>
	</div>
	</div>
			</div>
</div>

【コードビュー】

追加したクラスは、後のステップで定義します。
では、ここまでの内容をAIRでプレビューしてみましょう。

タイトルと、検索エリアが表示されてますか？

ページ 2 / 5

前のページ

次のページ