次の方法で共有

チュートリアル: モバイル ユーザー用 LightSwitch クライアントの作成

  • [アーティクル]

Microsoft LightSwitch for Visual Studio 更新プログラム 2を使用して、モバイル ユーザーがリモートの場所から電話など、指向の最新のタッチ デバイス、および Tablet を使用してデータを表示、追加、更新可能な HTML クライアントを作成できます。このチュートリアルでは、カスタマー サービス スタッフが容易に何人追跡、ボックスおよびボックスを各ジョブが必要か推論できるように引っ越し架空の企業、Contoso 実行のクライアントを作成します。

Contoso Office では、スケジューラは、ほとんどの時間を使し、見込み客にまたはを呼び出すときに、直々的なフォローアップのアクセスを配置します。これらのワーカー スレッドに基づく Silverlight にキーボードとマウスに対するには大きなデータ入力にし、豊富なデスクトップ クライアントを使用します。これに対し、計画の担当者は 1 日間旅し、各領域のサイズ、コンテンツとエントリの要件など、さまざまな位置と情報へのフォローアップのアクセスを説明します。これらのモバイル ユーザーはだけでなく、スケジューラから各フォローアップのアクセスに関する情報が示されますが、必要なデータの入力、または特定の型をサポートします。クライアントを、画像を作成し、および駐車制限または他の詳細についての移動のチームを通知します。

スケジューラのデスクトップ クライアント、既にビルドされている。スケジューラが追跡し、配置する各変換に関する詳細を使用する予定を入力するには、計画の専門家は、モバイル クライアントをビルドします。

必須コンポーネント

  • ダウンロードおよびインストール Microsoft LightSwitch for Visual Studio 更新プログラム 2。

  • ContosoMoving サンプル アプリケーションをダウンロードします。

  • 次の手順で説明するように、NuGet パッケージ マネージャーの拡張機能をインストールします。

NuGet の拡張機能をインストールするには

  1. メニュー バーで、[ツール]、[拡張機能と更新] を選択します。

  2. [拡張機能と更新] のダイアログ ボックスで、[オンライン] のノードを選択します。

  3. [Search Visual Studio Gallery] のテキスト ボックスに、NuGetを入力します。

  4. 結果の一覧で、[NuGet Package Manager] を選択し、[ダウンロード] のボタンをクリックします。

    [!メモ]

    拡張子が使用できるように Visual Studio を再起動する必要があります。

作業の開始

モバイル クライアントをビルドする前に、ダウンロードしたデスクトップ クライアント用のサンプル データを作成します。

サンプル データを作成するには

  1. メニュー バーで [ファイル]、[開く]、[プロジェクト/ソリューション] の順に選択します。

  2. 次に、ダウンロードした、が開きますが、検索します ContosoMoving.sln ファイル。

  3. メニュー バーで、[デバッグ]、[デバッグ開始] の順に選択します。

  4. 実行中のクライアントでは、メニュー バーで、[サンプル データ]、[サンプル データの作成] を選択します。

  5. [サンプル データの作成] 画面のツール バーで、[Add All Sample Data] のボタンをクリックします。

    サンプル データを [状態]、[Employee]、[顧客] と [予定] のエンティティに対して作成されます。

  6. ツール バーで、[保存] のボタンをクリックします。

  7. メニュー バーで、[ホーム] を選択します。

  8. ツール バーで、[最新の情報に更新] のボタンをクリックします。

    すべての従業員の次のスケジュールの一覧が表示され、デスクトップ クライアントの他の画面を確認できます。

モバイル クライアントを追加します。

次に、既存のソリューションに HTML のクライアント プロジェクトを追加します。

HTML のクライアント プロジェクトを追加するには

  1. [ソリューション エクスプローラー] では、[ContosoMoving] のノードを選択します。

  2. メニュー バーで、プロジェクト、[クライアントの追加] を選択します。

  3. [クライアントの追加] のダイアログ ボックスで、[HTML Client] を選択し、を [MobileClient]とし、を [OK] のボタンをクリックします。

  4. 表示されるプロジェクトのアップグレードのダイアログ ボックスで、[OK] のボタンをクリックします。

    プロジェクトは Microsoft LightSwitch for Visual Studio 更新プログラム 2にアップグレードされるため、移行レポートは、のブラウザーに表示されます。ソリューション ファイル構造が変更され、その LightSwitch のバージョンがインストールされていないコンピューターにソリューションを開くことができません。

    [ソリューション エクスプローラー] では、[データ ソース] のノードは [サーバー] と名前が変更された、[画面] のノードは [クライアント] と名前が変更され、ノードは、名前付き [MobileClient] 追加されます。[MobileClient] のノードは [スタートアップ] クライアントとしてマークされます。そのため、アプリケーションをデバッグするときに表示されます。クライアントのノードのショートカット メニューを開いて、[Set as StartUp Client] を選択すると、[スタートアップ] のクライアントを変更できます。

画面を作成し、ナビゲーションを定義します。

次に、ホーム スクリーンを作成し、詳細は、当たった画面間のナビゲーションを定義して、モーダル ダイアログ ボックスを作成します。モバイル クライアントは、デスクトップ クライアントとは異なるナビゲーション モデルを使用します。通常、1 画面分だけ、モバイル クライアントに一度に表示され、1 の画面から別のページに移動すると、変更がコミットされる。

ホーム スクリーンを作成するには

  1. [ソリューション エクスプローラー] では、[MobileClient] のノードを選択します。

  2. メニュー バーで、プロジェクト、[画面の追加] を選択します。

  3. [新しい画面の追加] のダイアログ ボックスで、[Browse Data Screen] テンプレートを選択します。

  4. [画面名] のテキスト ボックスに、[ホーム]を入力します。

  5. [画面データ] の一覧で、[UpcomingAppointments] を選択し、[OK] のボタンをクリックします。

ホーム スクリーンをカスタマイズするには

  1. デザイナー画面で、[予定] のノードを選択し、ドロップダウン リストの [行のレイアウト] を選択します。

  2. [行のレイアウト] | [予定] のノードの下で、[開始日] と [顧客] を除くすべてのノードを削除します。

  3. メニュー バーで、[デバッグの開始] を選択します。

    モバイル クライアントはブラウザーに表示されます。

    この時点で、画面表示スケジュールだけです。次に、ユーザーがタップをスケジュールするとスケジュールの詳細を表示するには、詳細]画面を追加します。

詳細]画面を作成するには

  1. [ソリューション エクスプローラー] では、[MobileClient] のノードを選択します。

  2. メニュー バーで、プロジェクト、[画面の追加] を選択します。

  3. [新しい画面の追加] のダイアログ ボックスで、[View Details Screen] テンプレートを選択します。

  4. [画面名] のテキスト ボックスに、[ViewAppointmentDetail]を入力します。

  5. [画面データ] の一覧で、[予定] を選択します。

  6. [予定の詳細]、[Appointment AppointmentPhotos] と [Appointment Rooms] のチェック ボックスをオンにし、[OK] のボタンをクリックします。

    デザイナー画面で、[タブ] のレイアウトが作成され、さまざまなデータ型はタブで構成されます。

詳細]画面をカスタマイズするには

  1. [ソリューション エクスプローラー] では、[ViewAppointmentDetail] の画面を開きます。

  2. デザイナー画面で、[行のレイアウト] | [詳細] のノードを選択します。

  3. [開始日]、[終了日]、[メモ]、[move Type]、[Employee] と [顧客] ノードを削除します。

  4. [タブ] のノードのショートカット メニューを開き、[タブの追加] を選択します。

  5. [プロパティ] のペインで、[メモ]に [名前] のプロパティの値を設定します。

  6. デザイナー画面で、[行のレイアウト] | [メモ] のノードを選択し、[追加] のノードを展開し、を [他の画面データ] を選択します。

    [画面データの追加] のダイアログ ボックスが表示されます。

  7. [Specify the screen data to add] のテキスト ボックスに、Appointment.Notesを入力し、を [OK] のボタンをクリックします。

  8. [メモ] のノードを選択し、ドロップダウン リストの [テキスト領域] のコントロールを選択します。

  9. [プロパティ] のペインで、[Stretch to Container] に [高さ] のプロパティの値を設定します。

  10. [行のレイアウト] | [詳細] のノードを選択し、[追加] のノードを展開し、を [他の画面データ] を選択します。

    [画面データの追加] のダイアログ ボックスが表示されます。

  11. [Specify the screen data to add] のテキスト ボックスに、Customer.Phoneを入力し、を [OK] のボタンをクリックします。

  12. [電話番号] のノードを選択し、ドロップダウン リストの [電話番号エディター] のコントロールを選択します。

  13. [追加] のノードを展開し、[他の画面データ] を選択します。

    [画面データの追加] のダイアログ ボックスが表示されます。

  14. [Specify the screen data to add] のテキスト ボックスに、Customer.Emailを入力し、を [OK] のボタンをクリックします。

  15. [電子メール] のノードを選択し、ドロップダウン リストの [電子メール アドレス エディター] のコントロールを選択します。

ナビゲーションを定義するには

  1. [ソリューション エクスプローラー] では、[ホーム] の画面を開きます。

  2. デザイナー画面で、[一覧] | Upcoming Appointments のノードを選択します。

  3. [プロパティ] のペインで、[Item Tap] のプロパティを選択し、" None のリンクを選択します。

  4. [Edit Item Tap] のダイアログ ボックスで、[Choose an existing method] のオプション ボタンをクリックし、ドロップダウン リストの [showViewAppointmentDetail] を選択します。

  5. [タスク] の一覧で、[保存] を選択します。

  6. [予定] のテキスト ボックスに、UpcomingAppointments.selectedItemを入力し、を [OK] のボタンをクリックします。

  7. メニュー バーで、モバイル クライアントを実行するには [デバッグの開始] を選択します。

    各スケジュールの矢印は、別の画面に移動できることを示します。

  8. [ViewAppointmentDetail] の画面を表示するにはタップをスケジュールします。

モーダル ダイアログ ボックスを作成するには

  1. [ソリューション エクスプローラー] では、[ViewAppointmentDetail] の画面を開きます。

  2. デザイナー画面で、[ダイアログ] のノードを選択し、[ダイアログの追加] のノードを選択します。

  3. [プロパティ] のペインで、EditContactInformationに [名前] のプロパティの値を設定します。

  4. [追加] のノードを展開し、[他の画面データ] を選択します。

    [画面データの追加] のダイアログ ボックスが表示されます。

  5. [Specify the screen data to add] のテキスト ボックスに、Appointment.Customer.FirstNameを入力し、を [OK] のボタンをクリックします。

  6. [追加] のノードを展開し、[他の画面データ] を選択します。

    [画面データの追加] のダイアログ ボックスが表示されます。

  7. [Specify the screen data to add] のテキスト ボックスに、Appointment.Customer.LastNameを入力し、を [OK] のボタンをクリックします。

  8. [追加] のノードを展開し、[他の画面データ] を選択します。

    [画面データの追加] のダイアログ ボックスが表示されます。

  9. [Specify the screen data to add] のテキスト ボックスに、Appointment.Customer.Phoneを入力し、を [OK] のボタンをクリックします。

  10. [電話番号] のノードを選択し、ドロップダウン リストの [電話番号エディター] のコントロールを選択します。

  11. [追加] のノードを展開し、[他の画面データ] を選択します。

    [画面データの追加] のダイアログ ボックスが表示されます。

  12. [Specify the screen data to add] のテキスト ボックスに、Appointment.Customer.Emailを入力し、を [OK] のボタンをクリックします。

  13. [電子メール] のノードを選択し、ボックスの一覧で [電子メール アドレス エディター] のコントロールを選択します。

  14. 電子メールのノードの下の左ペイン、ドラッグ [ストリート]、[市区町村]、[状態] と [PostalCode]。

    [ダイアログ] の結果セクションには、次の図のようになります。

    ダイアログのレイアウト

    [!メモ]

    ドラッグ代わりに、[FirstName] と [LastName] のフィールドと同じ手順を使用して [ストリート]、[市区町村]、[状態] と [PostalCode] のフィールドを追加できます。

ダイアログ ボックスを表示するには

  1. [ソリューション エクスプローラー] では、[ViewAppointmentDetail] の画面を開きます。

  2. デザイナー画面で、[行のレイアウト] | [詳細] のノードのショートカット メニューを開き、[ボタンの追加] を選択します。

  3. [ボタンの追加] のダイアログ ボックスで、[Choose an existing method] のオプション ボタンをクリックし、一覧の [ShowDialog] を選択し、を [OK] のボタンをクリックします。

  4. [Show Edit Contact Information] のノードを選択します。

  5. [プロパティ] のペインで、[編集]に [名前] のプロパティの値を設定します。

  6. メニュー バーで、クライアントを実行するには [デバッグ]、[デバッグの開始] を選択します。

  7. 実行中のモバイル クライアントでは、[View Appointment Detail] の画面を開くにタップをスケジュールします。

  8. ダイアログ ボックスを表示するには [編集] のボタンをタップします。

    [OK] と [キャンセル] のボタンが自動的に含まれます。

ユーザー インターフェイスをカスタマイズします。

デザイナー画面設定を変更することで、カスタム コントロールを追加し、JavaScript コードを記述して、クライアントのユーザー インターフェイスだけでなく、カスタマイズできます。

カスタム形式を JavaScript ライブラリを使用して追加するには

  1. [ソリューション エクスプローラー] では、[ホーム] の画面を開きます。

  2. デザイナー画面で、[行のレイアウト] | [予定] のノードを選択し、ボックスの一覧で [カスタム コントロール] を選択します。

  3. [コードの記述] の一覧で、RowTemplate_render のメソッドを選択します。

  4. コード エディターで、RowTemplate_render 関数の次のコードを追加します:

    myapp.Home.RowTemplate_render = function (element, contentItem) {
    var itemTemplate = $("<div> </div>");
    var title = $("<h3>" + moment(contentItem.value.StartDate).format("ddd, MMM Do, h:mm") + "-" + moment(contentItem.value.EndDate).format("h:mma") + "</h3>");
    var subTitle = $("<span>" + contentItem.value.Customer.FirstName + " " + contentItem.value.Customer.LastName + " - " + contentItem.value.Customer.Phone + "</span>");
    title.appendTo($(itemTemplate));
    subTitle.appendTo($(itemTemplate));
    itemTemplate.appendTo($(element));
};

    JavaScript このコードは、対象および書式を定義する format のメソッドを決定するために contentItem.value のメンバー変数を使用します。

  5. [ソリューション エクスプローラー] で、ツール バーの一覧から [ファイル ビュー] を選択します。

  6. [MobileClient] のノードのショートカット メニューで、[Manage NuGet Packages] を選択します。

  7. [Manage NuGet Packages] のダイアログ ボックスで、[オンライン] のノードを選択します。

  8. [オンライン検索] のテキスト ボックスに、moment.jsを入力します。

  9. Moment.js ライブラリをインストールするには [インストール] のボタンを選択し、を [閉じる] のボタンをクリックします。

  10. [ソリューション エクスプローラー] では、[MobileClient] のノードを展開し、[default.htm] ファイルを開きます。

  11. コード エディターで、</script> の終了タグの後に次のスクリプト タグを追加します:

    <script type="text/javascript" src="Scripts/moment.js" charset="utf-8"></script>

    このタグは moment.js ライブラリへの参照を追加します。

  12. メニュー バーで、クライアントを実行するには [デバッグ]、[デバッグの開始] を選択します。

    スケジューリングは、書式設定、時間と電話番号が追加されます。

レイアウトを変更するには

  1. [ソリューション エクスプローラー] で、ツール バーの一覧の [論理ビュー]、が開きます [ホーム] の画面を選択します。

  2. デザイナー画面で、[一覧] | Upcoming Appointments のノードを選択し、ドロップダウン リストの [Tile List] を選択します。

  3. [カスタム コントロール] | [予定] のノードを選択します。

  4. [プロパティ] のウィンドウで、を 280 ピクセルに [幅] のプロパティの値を設定します。

  5. [プロパティ] のウィンドウで、を 80 ピクセルに [高さ] のプロパティの値を設定します。

  6. メニュー バーで、クライアントを実行するには [デバッグ]、[デバッグの開始] を選択します。

    ホーム スクリーンは、タイル ベースのレイアウトの次のスケジュールを表示します。使用できる水平の領域を有効に使用するために、タイルのレイアウトが動的に調整方法を示すためブラウザー ウィンドウの幅を変更します。この例は、リストのレイアウトがどのモバイル デバイスの方向と画面サイズに基づいて変更する方法を示します。

動的画面のタイトルを追加するには

  1. [ソリューション エクスプローラー] では、[ViewAppointmentDetail] の画面を開きます。

  2. デザイナー画面で、[行のレイアウト] | [詳細] のノードを選択します。

  3. [コードの記述] の一覧で、Details_postRenderを選択します。

  4. コード エディターで、次の JavaScript コードを追加します:

    myapp.ViewAppointmentDetail.Details_postRender = function (element, contentItem) {
    contentItem.dataBind("value.Customer.FirstName", function () {
        formatAppointmentScreenTitle(contentItem);
    });

    contentItem.dataBind("value.Customer.LastName", function () {
        formatAppointmentScreenTitle(contentItem);
    });

    function formatAppointmentScreenTitle(contentItem) {
        contentItem.screen.details.displayName = contentItem.value.Customer.FirstName + " " +
        contentItem.value.Customer.LastName + " " +
        moment(contentItem.value.StartDate).format("h:mma") + " - " +
        moment(contentItem.value.EndDate).format("h:mma");
    };
};

  5. メニュー バーで、クライアントを実行するには [デバッグ]、[デバッグの開始] を選択します。

    スケジュール詳細の画面で顧客名を開始し、スケジュール時の終了。

クライアントを発行します。

ここまでで、ローカル ブラウザーで表示して、クライアントをテストします。モバイル デバイスからクライアントにアクセスするには、インターネット インフォメーション サービス (IIS) に発行する必要があります。

[!メモ]

LightSwitch 内のアプリケーションと同時に、Windows Azure では、モバイル クライアントを発行できます。詳細については、「方法: Windows Azure でアプリケーションをホストする」を参照してください。

サーバーを構成するには

  1. アプリケーションを配置するサーバーで、[インターネット インフォメーション サービス (IIS) マネージャー] を開きます。

  2. [接続] のペインでサーバー ノードを展開し、[既定の Web サイト] のノードを選択します。

  3. [既定の Web サイト] のノードのショートカット メニューを開き、[アプリケーションの追加] を選択します。

    [アプリケーションの追加] ダイアログ ボックスが表示されます。

  4. [エイリアス] のテキスト ボックスに、[ContosoMoving]を入力します。

  5. [物理パス] のテキスト ボックスに、クライアントのファイルのパス (たとえば、B: 15\inetpub\wwwroot\Contoso) を入力し、を [OK] のボタンをクリックします。

  6. 中央のペインで、[認証] のアイコンのショートカット メニューを開き、[機能を開く] を選択します。

  7. [認証] のペインで、次の値を設定します:

    名前

    状態

    匿名認証

    Enabled

    ASP.NET の偽装

    Disabled

    フォームの認証

    Enabled

    Windows 認証

    Disabled

クライアントを発行するには

  1. ツール バーの [デバッグ] の一覧で、[リリース] を選択します。

  2. [ソリューション エクスプローラー] では、[ContosoMoving] のノードを選択します。

  3. メニュー バーで、[ビルド]、[Publish ContosoMoving] を選択します。

    LightSwitch 公開アプリケーション ウィザードが表示されます。

  4. [アプリケーションの種類] のページで、[Complete Application] のオプション ボタンを選択し、[次へ] のボタンをクリックします。

  5. [アプリケーション サーバーの構成] ページで、[IIS サーバー] オプション ボタンを選択します。

  6. [発行出力] ページで、[サーバーにリモートで発行する] オプションを選択します。

  7. [サービス URL] のテキスト ボックスに、クライアントを発行する IIS を実行しているサーバーの URL を入力します。

  8. [Site/Application] のテキスト ボックスに、既定の Web サイトまたは ContosoMovingを入力します。

  9. [ユーザー名] のテキスト ボックスに、IIS を実行しているサーバーの管理者権限を持つユーザーの名前を入力します。

  10. [パスワード] のテキスト ボックスに、ユーザーのパスワードを入力し、[次へ] のボタンをクリックします。

  11. [セキュリティ設定] のページで、[アプリケーション管理者] のタブで、最初にクライアントに対して管理アクセスを持つユーザーの [ユーザー名]、[完全名] と [パスワード] を入力します。

    重要 : 重要

    発行した後にこれらの資格情報は、クライアント アクセスを必要とします。

  12. [HTTPS] のタブで、[No, HTTPS is not required] のオプション ボタンを選択し、[次へ] のボタンをクリックします。

    [データ接続] のページが表示されます。

  13. [ユーザー接続を指定します] のボックスに、アプリケーションのデータをホストする SQL Server データベースの接続文字列を入力します。

    このデータベースでは、IIS と同じサーバーまたは別のサーバーです。

    ヒントヒント

    [接続のプロパティ] のダイアログ ボックスを開き、接続文字列を作成するためにプロパティを入力すると、省略記号ボタンを選択できます。

  14. [データベース スキーマを発行する] のテキスト ボックスに、同じ接続文字列を入力します。

  15. [発行] ボタンをクリックして、アプリケーションを発行します。

クライアントをテストするには

  1. Web ブラウザーのアドレス バーに、IISServer がクライアントを発行したサーバーの名前です http://IISServer/contosomoving/clientを入力します。

  2. [ユーザー名] と [パスワード] のボックスに、クライアント管理者に指定した入力し、[ログイン] のボタンを選択します。資格情報が。

  3. メニュー バーで、[サンプル データ]、[サンプル データの作成] を選択します。

    [!メモ]

    デザイン時に入力されたデータは、運用データベースにため、サンプル データを追加する必要があります。発行されません。

  4. [サンプル データの作成] の画面で、[Add All Sample Data] のツール バーのボタンをクリックします。

    サンプル データを [状態]、[Employee]、[顧客] と [予定] のエンティティに対して作成されます。

  5. ツール バーで、[保存] のボタンをクリックします。

  6. ブラウザーのアドレス バーに、IISServer がクライアントを発行したサーバーの名前です http://IISServer/contosomoving/mobileclientを入力します。

  7. ユーザー名とパスワードが表示されたら、ユーザーとして ACarter とパスワードとして pass@word1 を入力します。

    アダム カーターの次のスケジュールが表示されます。

アップロードの写真にカスタム コントロールを追加します。

スケジュールの詳細の画面には**[Appointment Photos]** タブがあり、Contoso 移動の計画の専門家は、顧客のサイトの写真を実行してジョブをより正確に見積もれます。このタスクを有効にするには、クライアントにカスタム コントロールを追加します。

カスタム コントロールを追加するには

  1. [ソリューション エクスプローラー] で、ツール バーの一覧の [ファイル ビュー] を選択します。

  2. [スクリプト] のノードのショートカット メニューを開き、[追加] を選択し、を [既存の項目] を選択します。

  3. [既存項目の追加] のダイアログ ボックスで、[ContosoMoving] フォルダーに移動して [リソース] フォルダーを開き、[ImageUploader] のフォルダーを開きます。

  4. [base64-file-encoder] と [image-uploader] ファイルを選択し、[追加] のボタンをクリックします。

  5. 次に default.htm ファイルを、コード エディターが開き、スクリプトの対比テスト片の末尾に次のイメージ uploader.js への参照を追加します:

    <script type="text/javascript" src="Scripts/image-uploader.js" charset="utf-8"></script>

  6. [ソリューション エクスプローラー] で、ツール バーの一覧の [論理ビュー] を選択し、[ViewAppointmentDetail] の画面を開きます。

  7. デザイナー画面で、[Appointment Photo] のノードを選択し、ボックスの一覧の [列のレイアウト] を選択します。

  8. [ダイアログ] のノードのショートカット メニューを開き、[ダイアログの追加] を選択します。

  9. [プロパティ] のペインで、[ImageUploader]に [名前] のプロパティの値を設定します。

  10. [Stretch to Container] に [高さ] と [幅] のプロパティの値を設定します。

  11. デザイナー画面の左ペインで、[AppointmentPhotos] のノードを展開し、中央のペインの [行のレイアウト] | [イメージ アップローダ] のノードに [選択された項目] のノードをドラッグします。

  12. [予定] の新しく追加したノードを削除します。

  13. [図] のノードを選択し、ボックスの一覧で [カスタム コントロール] を選択します。

  14. [プロパティ] のペインで、[Edit Render Code] のハイパーリンクを選択します。

  15. コード エディターで、Picture1_render 関数に次のコードを追加します:

    createImageUploader(element, contentItem, "max-width: 300px; max-height: 300px");

    このコードは、画面が表示されるときに ImageUploader のカスタム コントロールを初期化します。

  16. デザイナー画面で、[行のレイアウト] | [Appointment Photos] のノードのショートカット メニューを開き、[ボタンの追加] を選択します。

  17. [ボタンの追加] のダイアログ ボックスで、[Choose an existing method] のオプション ボタンを選択します。

  18. [showDialog] の一覧で、[AppointmentPhotos.AddAndEditNew] を選択します。

  19. [移動] の一覧で、[イメージ アップローダ] を選択し、[OK] のボタンをクリックします。

  20. [一覧] | [Appointment Photos] のノードに表示されるように [Add Appointment Photo] のボタンをドラッグします。

  21. メニュー バーで、クライアントを実行するには [デバッグ]、[デバッグの開始] を選択します。

  22. 実行中のクライアントで、スケジュールをタップします。

  23. スケジュールの詳細の画面で、[Appointment Photos] のタブをタップします。

  24. [イメージ アップローダ] のダイアログ ボックスを開くに [Add Appointment Photo] のボタンをタップします。

    [Image Uploader] (画像アップロード) ダイアログ

貴社のアドレスをマップします。

計画の専門家は、Bing Maps コントロールを使用して、次の顧客のサイトを、検索機能を追加割り当てする必要があります。

マップ コントロールを追加するには

  1. [ソリューション エクスプローラー] で、ツール バーの一覧の [ファイル ビュー] を選択します。

  2. [スクリプト] のノードのショートカット メニューを開き、[追加] を選択し、を [既存の項目] を選択します。

  3. [既存項目の追加] のダイアログ ボックスで、[ContosoMoving] フォルダーに移動し、を [リソース] フォルダーを開きます。

  4. [lightswitch.bing-maps.js] ファイルを選択し、[追加] のボタンをクリックします。

  5. 次に default.htm ファイルを、コード エディターが開き、スクリプトの対比片テストの開始時に参照を追加します:

    <script type="text/javascript" charset="utf-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

  6. スクリプトの対比テスト片の末尾に、JavaScript ファイルへの参照を追加します:

    <script type="text/javascript" src="Scripts/lightswitch.bing-maps.js" charset="utf-8"></script>

  7. [ソリューション エクスプローラー] では、[論理ビュー] をツール バーの一覧のをクリックし、を [ViewAppointmentDetail] の画面を開きます。

  8. デザイナー画面で、[タブ] のノードのショートカット メニューを開き、[タブの追加] を選択します。

  9. [プロパティ] のペインで、[マップ]に [名前] のプロパティの値を設定します。

  10. [行のレイアウト] | [メモ] のノードに表示されるように [行のレイアウト] | [マップ] のノードをドラッグします。

  11. [行のレイアウト] | [マップ] のノードのショートカット メニューを開き、[カスタム コントロールの追加] を選択します。

    [カスタム コントロールの追加] のダイアログ ボックスが表示されます。

  12. [Specify the data for the new custom control] のテキスト ボックスに、[予定]を入力し、を [OK] のボタンをクリックします。

  13. [プロパティ] のペインで、[Edit Render Code] のハイパーリンクを選択します。

  14. コード エディターで、Appointment_render 関数の前に次のユーティリティ メソッドを追加します:

    function rebindMap(element, contentItem) {
    // Verify that we aren't updating the map continuously due to multiple bound values changing.
    var now = new Date();
    if (now.getTime() - mapLastUpdated.getTime() > 15) {
        setTimeout(function () {
            updateMap(element, contentItem);
            mapLastUpdated = new Date();
        }, 20);
    }
};

function updateMap(element, contentItem) {
    var mapDiv = $("#appointmentMap");
    // If we've previously created the map, make sure to clean up the div that contained it;
    // otherwise, the Bing map control fails to create properly.
    if (mapDiv.length > 0) {
        $(mapDiv).remove();
    }
    mapDiv = $("<div id='appointmentMap' class='msls-hauto msls-vauto' ></div>");

    $(mapDiv).appendTo($(element));
    mapControl = mapDiv.lightswitchBingMapsControl({
        street: contentItem.value.Street,
        city: contentItem.value.City,
        state: contentItem.value.State.Name,
        zipcode: contentItem.value.PostalCode,
        mapTypeId: Microsoft.Maps.MapTypeId.road,
        width: "600",
        height: "400"
    });
};

  15. Appointment_render 関数に次のコードを追加します:

    mapLastUpdated = new Date();
    contentItem.dataBind("value.Street", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.City", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.Zip", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.PostalCode", function () { rebindMap(element, contentItem); });

    このコードは、マップ コントロールに画面が表示されるとスケジュールのフィールドをバインドします。

  16. メニュー バーで、クライアントを実行するには [デバッグ]、[デバッグの開始] を選択します。

  17. 実行中のクライアントで、スケジュールをタップします。

  18. スケジュールの詳細の画面で、貴社の住所の地図を表示するには [マップ] のタブをタップします。

商標を追加します。

次に MobileClient より意味のあるものにクライアントのタイトルを変更し、クライアントをカスタマイズするには、Contoso 移動の会社のロゴを追加します。

タイトルを変更するには

  1. [ソリューション エクスプローラー] で、ツール バーの一覧から [ファイル ビュー] を選択します。

  2. 次に default.htm ファイルを、コード エディターが開き、次のコードに <title>MobileClient</title> の要素を置き換えます。:

    <title>Contoso Moving Mobile</title>

アイコンを追加するには

  1. [ソリューション エクスプローラー] では、[コンテンツ] と [イメージ] のノードを展開します。

  2. [user-logo.png] と [user-splash-screen.png] ファイルを削除します。

  3. [イメージ] のノードのショートカット メニューを開き、[追加] を選択し、を [既存の項目] を選択します。

  4. [既存項目の追加] のダイアログ ボックスで、[ContosoMoving] フォルダーに移動し、を [リソース] フォルダーを開きます。

  5. [logo.png] ファイルを選択し、[追加] のボタンをクリックします。

  6. [ソリューション エクスプローラー] では、[logo.png] のノードのショートカット メニューを開き、[名前の変更] を選択し、を [user-logo.png]を入力します。

  7. [イメージ] のノードのショートカット メニューを開き、[追加] を選択し、を [既存の項目] を選択します。

  8. [既存項目の追加] のダイアログ ボックスで、[logo.png] ファイルを選択し、[追加] のボタンをクリックします。

  9. [ソリューション エクスプローラー] では、[logo.png] のノードのショートカット メニューを開き、[名前の変更] を選択し、を [user-splash-screen.png]を入力します。

  10. メニュー バーで、クライアントを実行するには [デバッグ]、[デバッグの開始] を選択します。

    [!メモ]

    変更が表示されるまでブラウザーのキャッシュをクリアする必要があります。

テーマを変更します。

クライアントのテーマを定義するカスケード スタイル シート (CSS)。クライアント アプリケーションの外観を変更するための既定のテーマを変更したり、.css ファイルの変更によって、テーマ置き換えることができます。カスタマイズされたテーマの a.css ファイルを作成するために Web ThemeRoller、ツールを使用します。

テーマを切り替えるには

  1. [ソリューション エクスプローラー] で、ツール バーの一覧から [ファイル ビュー] を選択します。

  2. 次に default.htm ファイルを、コード エディターが開き、次のコードの行: <link rel="stylesheet" type="text/css" href="Content/dark-theme.css" charset="utf-8" /> を置き換えます。

    <link rel="stylesheet" type="text/css" href="Content/light-theme.css" charset="utf-8" />

  3. [ソリューション エクスプローラー] では、[コンテンツ] のノードを展開し、[user-customization.css] ファイルを開きます。

  4. ファイルをコメント /* if light theme change ‘white’ to ‘black */*/を検索し、4 回の繰り返しの次の文字列と msls-white-icons を置換します:

    msls-black-icons

  5. メニュー バーで、クライアントを実行するには [デバッグ]、[デバッグの開始] を選択します。

既存のテーマをカスタマイズするには

  1. 、Web ブラウザーで、ThemeRoller Web サイトに移動します。

  2. ThemeRoller のツール バーで、[Import or upgrade] のボタンをクリックします。

    [Import Theme] のダイアログ ボックスが表示されます。

  3. Visual Studio で、[ソリューション エクスプローラー] で、ツール バーのリストから [ファイル ビュー] を選択します。

  4. [コンテンツ] のノードを展開し、[light-theme.css] ファイルを開きます。

  5. コード エディターで、ファイルの内容をコピーします。

  6. ThemeRoller では、[light-theme.css] ファイルの内容を [Import Theme] のダイアログ ボックスに貼り付けて、ファイル [インポート] のボタンをクリックします。

  7. 左ペインで、グローバル のタブをクリックし、[Corner Radii] のノードを展開します。

  8. [グループ] のテキスト ボックスに、0.8emを入力します。

  9. [ボタン] のテキスト ボックスに、1.5emを入力します。

    右側のペインの UI 要素には、角が丸くなります。

  10. [B] のタブで、[削除] のリンクを選択します。

    LightSwitch は、グローバル だけで [Swatch A] の設定を使用します。追加のサンプルを削除すると、.css ファイルのサイズが小さくなります。

  11. 追加のサンプルを削除するプロセスを繰り返します。

  12. 右のペインで、[Swatch A] の背景の領域にカラー パレットから色をドラッグします。

  13. [Radio 1] の要素に異なる色をドラッグします。

    関連するすべての要素は、色を変更します。要素をポイントすると、選択色を示す補完色に変更されます。

  14. ThemeRoller のツール バーで、[ダウンロード] のボタンをクリックします。

  15. [Download Theme] のダイアログ ボックスで、[Download Zip] のボタンをクリックします。

  16. ローカル フォルダーに圧縮ファイルの内容を抽出します。

  17. [ソリューション エクスプローラー] では、[コンテンツ] のノードのショートカット メニューを開き、[追加] を選択し、を [既存の項目] を選択します。

  18. [既存項目の追加] のダイアログ ボックスで、ファイルを抽象化フォルダーに移動し、[my-item.css] ファイルを選択し、[追加] のボタンを選択します。

  19. default.htm ファイルを開き、コード エディターの行 <link rel="stylesheet" type="text/css" href="Content/light-theme.css" charset="utf-8" /> を探し、次のコードの行を置換します:

    <link rel="stylesheet" type="text/css" href="Content/my-theme.css" charset="utf-8" />

  20. メニュー バーで、クライアントを実行するには [デバッグ]、[デバッグの開始] を選択します。

クライアントを再発行します。

クライアントが完全であるため、IIS に再発行します。

クライアントを再発行するには

  1. [ソリューション エクスプローラー] では、[ContosoMoving] のノードを選択します。

  2. メニュー バーで、[ビルド]、[Publish ContosoMoving] を選択します。

  3. [LightSwitch アプリケーション発行ウィザード] では、クライアントを発行するには [発行] のボタンをクリックします。

  4. ブラウザーのアドレス バーに、IISServer がクライアントを発行したサーバーの名前です http://IISServer/contosomoving/mobileclientを入力します。

  5. ユーザー名とパスワードが表示されたら、ユーザーとして ACarter とパスワードとして pass@word1 を入力します。

    クライアントは、ユーザーが行った最新の変更を反映します。

    [!メモ]

    ブラウザーのキャッシュをクリアする必要があります。

参照

その他の技術情報

LightSwitch アプリの HTML クライアント画面