Windows 8 Store Applicationプログラミング(基本編) 4

ロジックコードを記述する

ロジックコードを記述する

リスト3 (MainWindow.xaml.vb)

Option Strict On

HTTP アプリケーション用のプログラミングインターフェイスを提供するクラスの含まれる、System.Net.Http名前空間をインポートします。

Imports System.Net.Http

DataInfoクラス内に文字列型の、「title」「description」「link」プロパティを定義しておきます。

Public Class DataInfo
  Property title As String
  Property description As String
  Property link As String
End Class

Public NotInheritable Class MainPage
  Inherits Page

ページがアクティブになった時の処理

HttpClientクラスの新しいインスタンスmyHttpClientオブジェクトを作成します。HttpClientクラスは、URI で識別されるリソースに HTTP 要求を送信し、そのリソースから HTTP 応答を受信するためのクラスです。

「http://www.microsoft.com/japan/msdn/rss/feed/rss.aspx」のUriで初期化された新しいUriオブジェクトmyUriを作成しておきます。このUriにRSSの情報が記載されています(RSSの構造については図4参照)。

HttpClientクラスのGetStringAsyncメソッドで、指定したURIにGET送信し、非同期操作で応答本体を文字列として受け取り、変数resultに格納します。非同期処理の場合は、メソッドの最初にAsyncを追加します。

Protected Overrides Async Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)

のAsyncの部分を追加する必要があります。しかし、このAsyncの追加を忘れても、非同期処理のメソッドを使った場合、自動的にエラーが表示され、「含まれているスコープを’Async’にします」と表示され、その個所をクリックすると自動的にAsyncが頭に追加されます(図5参照)。VS2012の素晴らしい点です!

XElement.Parseメソッドで、文字列として読み込まれたXMLのRSS(図4参照)を読み取ります。

DataInfoクラス型の新しいリストである、myDataInfoオブジェクトを作成します。

読み込んだXML文書内から、Descendants メソッドで、子孫要素であるすべての 要素のコレクションに対して、各要素を変数 myResult に格納しながら、以下の処理を行います。

DataInfoクラスの「title」プロパティに

要素の値を指定します。「description」プロパティに<description>要素の値を指定します。「link」プロパティに<link>要素の値を指定します。これらのプロパティの設定されたDataInfoをAddメソッドでリストであるmyDataInfoオブジェクトに追加します。</p> <p>ListBoxのItemsSourceプロパティにmyDataInfoオブジェクトを指定します。これで、「タイトル」と「概要」がListBox内に表示されます。</p> <pre class="brush: plain; " type="syntaxhighlighter"> Protected Overrides Async Sub OnNavigatedTo(e As Navigation.NavigationEventArgs) Dim myHttpClient As New HttpClient Dim myUri As Uri = New Uri("http://www.microsoft.com/japan/msdn/rss/feed/rss.aspx", UriKind.Absolute) Dim result = Await myHttpClient.GetStringAsync(myUri) Dim xmldoc As XElement = XElement.Parse(result) Dim myDataInfo As New List(Of DataInfo) For Each myResult In From c In xmldoc.Descendants("item") Select c With myDataInfo .Add(New DataInfo With {.title = myResult.Element("title").Value, .description = myResult.Element("description").Value, .link = myResult.Element("link").Value}) End With Next ListBox1.ItemsSource = myDataInfo End Sub </pre> <h4>ListBox内の項目が選択された時の処理</h4> <p>ListBoxから選択された項目の、linkプロパティの値を変数myUrlに格納します。〔戻る〕ボタンの使用を可能にし、FameのNavigateメソッドで、myUrlを引数にWebViewPageに遷移します。</p> <pre class="brush: plain; " type="syntaxhighlighter"> Private Sub ListBox1_SelectionChanged(sender As Object, e As SelectionChangedEventArgs) Handles ListBox1.SelectionChanged myFrame.Visibility = Windows.UI.Xaml.Visibility.Visible Dim myUrl = DirectCast(ListBox1.SelectedItem, DataInfo).link backButton.IsEnabled = True myFrame.Navigate(GetType(WebViewPage), myUrl) End Sub </pre> <h4>〔戻る〕ボタンがクリックされた時の処理</h4> <p>Frameコントロールを非表示にします。</p> <pre class="brush: plain; " type="syntaxhighlighter"> Private Sub backButton_Click(sender As Object, e As RoutedEventArgs) Handles backButton.Click myFrame.Visibility = Windows.UI.Xaml.Visibility.Collapsed End Sub End Class </pre> <div class="imagebox"><a href="/sites/default/files/articles/376704.png" target="_blank"><img alt="" src="/sites/default/files/articles/376704.png" width="400" /></a> <div class="caption">図4:http://www.microsoft.com/japan/msdn/rss/feed/rss.aspx のRSSの構造一部。使用するのは、各<item>要素内の、<title><description><link>の3つの要素(クリックで拡大)</div> </div> <div class="imagebox"><a href="/sites/default/files/articles/376705.png" target="_blank"><img alt="" src="/sites/default/files/articles/376705.png" width="400" /></a> <div class="caption">図5:「含まれているスコープを’Async’にします」のメッセージが表示されるので、その個所をクリックする(クリックで拡大)</div> </div> <p>次に、ソリューションエクスプローラー内のWebViewPage.xamlを展開して表示される、WebViewPagexaml.vbをダブルクリックしてリスト4のコードを記述します。</p> <h3>ロジックコードを記述する</h3> <h4>リスト4 (WebViewPage.xaml.vb)</h4> <pre class="brush: plain; " type="syntaxhighlighter">Option Strict On Public NotInheritable Class WebViewPage Inherits Page </pre> <h4>ページがアクティブになった時の処理</h4> <p>MainPage.xamlから渡された値(e.Parameter)を文字列に変換して、変数myUriに格納します。</p> <p>WebViewのNavigateメソッドで変数myUriに格納されたページに遷移します。絶対URIで指定します。</p> <pre class="brush: plain; " type="syntaxhighlighter"> Protected Overrides Sub OnNavigatedTo(e As Navigation.NavigationEventArgs) Dim myUrl = CStr(e.Parameter) WebView1.Navigate(New Uri(myUrl, UriKind.Absolute)) End Sub End Class </pre> <p>このサンプルは「デバッグなしで開始」で実行してください。筆者の環境だけかもしれませんが、「デバッグ開始」を実行するとJust-In-Timeのエラーが発生します。Just-In-Timeのチェックを外してもエラーになりますので、「デバッグなしで開始」での実行をお願いします。</p> <p>「デバッグなしで開始」では問題なく動作します。</p> <!--pagebreak--> <p>では、つぎにもう1つのサンプルを紹介します。</p> <h2>別のページに遷移する際のパラメータの渡し方</h2> <p>「名前」「住所」「仕事」の3つのデータを別ページに渡すサンプルです。</p> <p>「名前」「住所」「仕事」を入力して〔OK〕ボタンをタップすると、これら3つの情報が別ページに表示されます(図6)。Windows ストアアプリでは、どんな型のデータでも、別ページに渡すことが可能です。別ページで受け取ったデータは、オブジェクト型になりますので、任意の型にキャストして使用することになります。</p> <div class="imagebox"><a href="/sites/default/files/articles/376706.png" target="_blank"><img alt="" src="/sites/default/files/articles/376706.png" width="400" /></a> <div class="caption">図6:「名前」「住所」「仕事」のデータが別ページに表示されている(クリックで拡大)</div> </div> <p>実際に動かした動画は下記のようになります。Windows Store Applicationの動画を撮るアプリケーションが存在していませんので、スマホでとった動画です。見難い点はご了承願います。</p> <p><iframe allowfullscreen="" frameborder="0" height="315" src="http://www.youtube.com/embed/C7z3o-fUHIc?rel=0" width="560"></iframe></p> <p>サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。</p> <h3>プロジェクトの作成</h3> <p>VS 2012のメニューから[ファイル(F)/新規作成(N)/プロジェクト(P)]と選択します。次に、「テンプレート」から「Windows ストア」を選択し、右に表示される項目名から「新しいアプリケーション(XAML)」を選択します。「名前(N)」に任意のプロジェクト名を指定します。ここでは「Win8_NavigateParameter」という名前を付けています。</p> <p>次に、ソリューションエクスプローラー内のWin8_NavigateParameterプロジェクトを選択した状態で、マウスの右クリックをし、表示されるメニューから「追加(D) /新しいフォルダ(D)」と選択して、名前がImageというフォルダを作成します。作成したImageフォルダを選択し、マウスの右クリックで表示されるメニューから「追加(D)/既存の項目(G)」と選択して1個の画像ファイル(1920×1200)を追加しておきます。</p> <p>画像ファイルはダウンロードされたサンプルファイルには追加済です。</p> <h3>コントロールの配置</h3> <p>ツールボックスからデザイン画面上にImageコントロールを1個、TextBlockコントロール(項目名を表示)を3個、TextBoxコントロール(入力用)を3個、Buttonコントロールを2個、Frameコントロールを1個配置します。</p> <p>ImageコントロールのSourceプロパティにはImageフォルダ内の画像を読み込んでおきます。レイアウトは図7のようになります。書き出されるXAMLコードはリスト5です。</p> <div class="imagebox"><a href="/sites/default/files/articles/376707.png" target="_blank"><img alt="" src="/sites/default/files/articles/376707.png" width="400" /></a> <div class="caption">図7:各コントロールをレイアウトした(クリックで拡大)</div> </div> <h4>リスト5 書き出されたXAMLコード(MainPage.xaml)</h4> <ul class="type-none"> <li>(1)<Image>要素のSourceにImageフォルダ内の画像を指定しています。</li> <li>(2)「名前」「住所」「仕事」用の入力ボックスである3つの<TextBox>要素を配置しています。</li> <li>(3)〔OK〕と〔戻る〕ボタンを配置しています。〔戻る〕ボタンは初期状態では、IsEnabledプロパティのチェックを外し(False)使用不可としています。</li> <li>(4)<Frame>要素を配置しています。</li> </ul> <pre class="brush: plain; " type="syntaxhighlighter"><Page x:Class="Win8_NavigateParameter.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Win8_NavigateParameter" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Image Source="Image/win8_10.jpg"/>■(1) <TextBlock HorizontalAlignment="Left" Height="67" Margin="148,57,0,0" TextWrapping="Wrap" Text="名前" VerticalAlignment="Top" Width="130" FontFamily="Meiryo UI" FontSize="48"/> <TextBlock HorizontalAlignment="Left" Height="67" Margin="148,155,0,0" TextWrapping="Wrap" Text="住所" VerticalAlignment="Top" Width="130" FontFamily="Meiryo UI" FontSize="48"/> <TextBlock HorizontalAlignment="Left" Height="67" Margin="148,250,0,0" TextWrapping="Wrap" Text="仕事" VerticalAlignment="Top" Width="130" FontFamily="Meiryo UI" FontSize="48"/> <TextBox x:Name="nameTextBox" HorizontalAlignment="Left" Height="67" Margin="313,57,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="408" FontFamily="Meiryo UI" FontSize="48"/>■(2) <TextBox x:Name="addressTextBox" HorizontalAlignment="Left" Height="67" Margin="313,155,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="853" FontFamily="Meiryo UI" FontSize="48"/>■(2) <TextBox x:Name="jobTextBox" HorizontalAlignment="Left" Height="67" Margin="313,250,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="408" FontFamily="Meiryo UI" FontSize="48"/>■(2) <Button x:Name="okButton" Content="OK" HorizontalAlignment="Left" Height="72" Margin="313,343,0,0" VerticalAlignment="Top" Width="363" FontFamily="Meiryo UI" FontSize="36"/>■(3) <Frame x:Name="myFrame" HorizontalAlignment="Left" Height="774" Margin="0,-6,0,0" VerticalAlignment="Top" Width="1225"/>■(4) <Button x:Name="backButton" Content="戻る" HorizontalAlignment="Left" Height="54" Margin="1248,23,0,0" VerticalAlignment="Top" Width="108" IsEnabled="False"/>■(3) </Grid> </Page> </pre> <h3>「空白のページ」の作成</h3> <p>VS2012のメニューの「プロジェクト(P)/新しい項目の追加(W)」と選択します。「新しい項目の追加」ダイアログボックスが開きますので、「空白のページ」を選択します。「名前(N)」にGetParametersPage.xamlと入力し、[追加(A)]ボタンをクリックします。</p> <h3>コントロールの配置</h3> <p>表示されるデザイン画面に、ツールボックスからTextBlockコントロールを1個配置します。TextWrappingプロパティにはWrapを指定し、文字の回り込みを可能にしておきます(図8)。</p> <p>書き出されるXAMLコードは省略します。</p> <div class="imagebox"><a href="/sites/default/files/articles/376707.png" target="_blank"><img alt="" src="/sites/default/files/articles/376707.png" width="400" /></a> <div class="caption">図7:各コントロールをレイアウトした(クリックで拡大)</div> </div> <p>図8 TextBlockコントロールをレイアウトした(Parameter_08.png)</p> <p>次に、ソリューションエクスプローラー内のMainWindow.xamlを展開して表示される、MainWindow.xaml.vbをダブルクリックしてリスト6のコードを記述します。</p> <h3>ロジックコードを記述する</h3> <h4>リスト6 (MainWindow.xaml.vb)</h4> <pre class="brush: plain; " type="syntaxhighlighter">Option Strict On </pre> <p>MessageDialogを表示するクラスの含まれる、Windows.UI.Popups名前空間をインポートします。</p> <pre class="brush: plain; " type="syntaxhighlighter">Imports Windows.UI.Popups </pre> <p>PersonalInfo構造体で、文字列型の「Namae」、「Address」、「Work」を定義しておきます。</p> <pre class="brush: plain; " type="syntaxhighlighter">Public Structure PersonalInfo Public Namae As String Public Address As String Public Work As String End Structure Public NotInheritable Class MainPage Inherits Page </pre> <p>PersonalInfo構造体のメンバ変数myPersonalInfoオブジェクトを宣言します。</p> <pre class="brush: plain; " type="syntaxhighlighter"> Dim myPersonalInfo As PersonalInfo </pre> <h4>〔OK〕ボタンがクリックされた時の処理</h4> <p>「名前」「住所」「仕事」のいずれかのデータが未入力の場合は、警告メッセージを表示して処理を抜けます。<br /> それ以外の場合は、〔戻る〕ボタンの使用を可能にし、構造体のNameにnamaeTextBoxの値、AddressにaddressTextBoxの値、WorkにjobTextBoxの値を指定します。<br /> FrameのNavigateメソッドでmyPersonalInfo構造体オブジェクトを引数に、GetParametersPageに遷移します。</p> <pre class="brush: plain; " type="syntaxhighlighter"> Private Async Sub okButton_Click(sender As Object, e As RoutedEventArgs) Handles okButton.Click If nameTextBox.Text = String.Empty OrElse addressTextBox.Text = String.Empty OrElse jobTextBox.Text = String.Empty Then Dim message As New MessageDialog("データが未入力です。") Await message.ShowAsync Exit Sub Else backButton.IsEnabled = True myFrame.Visibility = Windows.UI.Xaml.Visibility.Visible myPersonalInfo.Namae = nameTextBox.Text myPersonalInfo.Address = addressTextBox.Text myPersonalInfo.Work = jobTextBox.Text myFrame.Navigate(GetType(GetParametersPage), myPersonalInfo) End If End Sub </pre> <h4>〔戻る〕ボタンがクリックされた時の処理</h4> <p>Frameを非表示にします。</p> <pre class="brush: plain; " type="syntaxhighlighter"> Private Sub backButton_Click(sender As Object, e As RoutedEventArgs) Handles backButton.Click myFrame.Visibility = Windows.UI.Xaml.Visibility.Collapsed End Sub End Class </pre> <p>次に、ソリューションエクスプローラー内のGetParametersPage.xamlを展開して表示される、GetParametersPage.xaml.vbをダブルクリックしてリスト7のコードを記述します。</p> <h3>ロジックコードを記述する</h3> <h4>リスト7 (GetParametersPage.xaml.vb)</h4> <pre class="brush: plain; " type="syntaxhighlighter">Option Strict On Public NotInheritable Class GetParametersPage Inherits Page </pre> <h4>ページがアクティブになった時の処理</h4> <p>MainPage.xamlから渡された値(e.Parameter)をPersonalInfo構造体に変換して、PersonalInfo構造体型の変数myResultに格納します。</p> <p>変数myNameに構造体のNamaeの値を、myAddressにAddressの値を、myJobにWorkの値を格納します。<br /> TextBlock内に、各変数の値を文字列と連結して表示します。</p> <pre class="brush: plain; " type="syntaxhighlighter"> Protected Overrides Sub OnNavigatedTo(e As Navigation.NavigationEventArgs) Dim myResult As PersonalInfo = DirectCast(e.Parameter, PersonalInfo) Dim myName = myResult.Namae Dim myAddress = myResult.Address Dim myJob = myResult.Work resultTextBlock.Text = "私の名前は" & myName & "で、住所は" & myAddress & "です。" & myJob & "の仕事をやっています。" End Sub End Class </pre> <p>今回はここまでです。ありがとうございました。</p> <div class="next_page_link" id="next_page_link_auto"><a href="/story/2012/10/31/3767?page=2" class="btn --next-prev next_page_link_auto_bancho_common">別のページに遷移する際のパラメータの渡し方</a></div></body></html>

この記事をシェアしてください

人気記事トップ10

人気記事ランキングをもっと見る

企画広告も役立つ情報バッチリ! Sponsored