Blog

このシリーズのパート1では、KenticoCloudを使用してベースのXamarinアプリを構築する方法を紹介しました。その記事では、最初のアプリケーションの作成、サービスの追加、およびデータを取得するための呼び出しの実装について説明しました。パート2では、そのコンテンツを表示し、XAMLを使用してクロスプラットフォームアプリを構築する方法について説明します。

最初のアプリを開発したので、良いものを追加する準備ができました。 XAML！この記事では、アプリケーションのUIを作成し、Kentico CloudDeliveryサービスの呼び出しをインターフェイスに接続する方法について説明します。

シリーズのパート1についてはこちらをご覧ください。

BlogPostsPageを追加する

モデルとサービスが整ったので、レイアウトを作成する準備が整いました。サンプルアプリケーションの上に構築、私は私のBlogPostsPageとBlogPostDetailPageビューを保持するために、ビューのフォルダを作成しました。

異なるクラス/ファイル用にいくつかのサブフォッダーがあることに注意してください。

私の意見では、私は記事の私のリストを表示するには、BlogPostsPage ContentPageを作成しました。具体的には、各ブログ投稿の画像、タイトル、その他の詳細を表示するListViewコントロールを追加しました。

グリッドと行/列の定義を使用することで、要素を必要な場所に正確に配置できました。完璧にするのは少し難しいかもしれないので、レイアウトを頻繁にテストするようにしてください。そして、私の場合と同様に、Silverlightを約3年間開発することも確かに役立ちました！

コードビハインドでは、サービスを使用してリストにデータを入力する機能を追加しました。

 public async Task RefreshBlogPosts(int intDelay = 0) { try { await General.Sleep(intDelay); var blogposts = await _viewModel.GetBlogPosts(); lvBlogPosts.ItemsSource = blogposts; } catch (Exception ex) { HandleException(ex); } }

次に、ユーザーが記事を選択したときに処理するOnSelectionイベントをクラスに追加しました。その場合は、ユーザーをBlogPostDetailPageにリダイレクトして、記事に関する追加情報を表示するようにしました。

 async void OnSelection(object sender, SelectedItemChangedEventArgs e) { if (e.SelectedItem == null) { return; } try { BlogPost blog = (BlogPost)e.SelectedItem; await Navigation.PushAsync(new BlogPostDetailPage(new BlogPostDetailViewModel(blog))); // Manually deselect item lvBlogPosts.SelectedItem = null; } catch (Exception ex) { HandleException(ex); } }

BlogPostDetailPageオブジェクトは、選択したBlogPostを使用して作成されることに注意してください。これにより、 ViewModelにすべてのブログの詳細が入力されます。

BlogPostDetailPageを追加する

記事をクリックすると、 BlogPostDetailPageが読み込まれます。このページには、追加情報と、作成者による他の記事のリストが表示されます。この詳細レイアウトの新しいビューを作成し、記事に関する情報を表示しました。

さらに、著者による他のブログのリストを表示したかったので、そのコンテンツ用に別のListViewを追加しました。

コードビハインドでは、コンテンツを取得するためにKenticoCloudサービスへの呼び出しを追加しました。 ViewModelには選択したBlogPostが入力されているため、サービスにGetAuthorBlogPosts関数の呼び出しを追加するだけで済みました。

 protected override void OnAppearing() { base.OnAppearing(); GetAuthorBlogPosts(viewModel.BlogPost.AuthorInternalName); } public async void GetAuthorBlogPosts(string strAuthor) { // Get author blogs Services.KenticoCloudService service = new Services.KenticoCloudService(); var authorblogposts = await service.GetAuthorBlogPosts(strAuthor); lvAuthorBlogPosts.ItemsSource = authorblogposts; }

テスト

アプリを作成したら、いくつかのデバイスで機能をテストしました。まず、UWPを試してみました。

UWPホーム

UWPの詳細

次に、VisualStudioエミュレーターを使用してAndroidを試しました。

Androidホーム

Androidの詳細

iOSの場合、Macに対してアプリケーションをコンパイルする必要があります。 OS Sierraを搭載したVMを作成し、iOSシミュレーターを起動してテストしました。

iOSホーム

iOSの詳細

最後に、私はWindows 10 Mobileを試しました（私たちの中にはまだそれらの1つを持っている人がいるため）。

Windows10モバイルホーム

Windows 10Mobileの詳細

重要な注意事項

開発プロセス中に、共有したいいくつかの情報に出くわしました。これらのいくつかを知っていると、何時間もの作業と頭痛の種を節約できるので、必ず注意してください。

-XamarinでKenticoCloud Delivery APIを使用するには、 .NET Standard1.4以降を使用する必要があります。これを行う方法に関する注意事項はサンプルアプリにあるので、必ず読んでください。

-AppSettingsをXamarinに保存する「定義済み」の方法はありません。私の場合、KenticoCloudProjectIDを格納するためにサービスでconstを作成しました。アプリケーションに別のソリューションが必要になる場合があります。

-Androidエミュレーターが正常に実行されていない場合は、構成に対してホストCPUを有効にしてください。一部のディスプレイ/ドッキングステーションはこれをサポートしていない可能性があることを知っておいてください。 （参考：この1つの問題を追跡するには、開発に約1。5日かかりました！）。

-iOSアプリを実行するには、 KenticoCloud.DeliveryNuGetパッケージへの参照をiOSプロジェクトに追加する必要がありました。 AndroidアプリとUWPアプリはこれを必要としませんでした。また、参照を追加した後、プロジェクトをクリーンアップする必要がありました。

-Xamarin LivePlayerについて聞いたことがあるかもしれません。この新しいアプリを使用すると、AndroidまたはIOSデバイスに直接デプロイできます。これは素晴らしいように聞こえますが、いくつかの制限があります。

oPCLプロジェクトは使用できません。「共有」ライブラリのみがサポートされています。

oプレーヤーを使用するには、Visual Studio2017プレビューバージョンを使用する必要があります。これは、標準のVS2017インストールとは別のものです。この新しいバージョンをインストールするには、SDKとエミュレーターの別々のバージョンをインストールする必要もあります。それはあなたのドライブにたくさんのスペースがあることを意味します！

-コードで#ifコメントを使用して、条件付きでロジックをロードできます。これにより、環境に応じて出力をすばやく変更できます。これが私の例外処理の例です：

 protected void HandleException(Exception ex) {#if DEBUG ShowMessage(ex.Message);#else ShowMessage(strStandardMessage);#endif}

前進する

Xamarinは、クロスプラットフォームのモバイルアプリを構築するための優れたツールです。 Kentico Cloudがアーキテクチャをサポートするようになったため、Webアプリで使用しているのと同じAPI呼び出しを使用して、iOS、Android、およびUWPアプリをすばやく構築できます。私たちのパートナーがどのような素晴らしいモバイル体験を思いつくのか楽しみです。がんばろう！

完全なソースコードを見る