AppView for ASP.NET WebForms
手順 2：C1AppViewItems および C1AppViewPages の追加
クイックスタート > 手順 2：C1AppViewItems および C1AppViewPages の追加
この手順では、アプリケーションに１つの  C1AppViewItem といくつかの C1AppViewPage を追加します。AppView for ASP.NET Web Forms コントロールをカスタマイズするには、次の手順を実行します。

  1. <cc1:C1AppView> 開始タグをクリックして、コントロールのC1AppView スマートタグを表示しますが作成されます。
  2. ［C1AppView のタスク］メニューで、［モバイルモード］オプションのチェックボックスをオンにします。
  3. ページをクリックして［C1AppView のタスク］メニューを閉じます。
  4. 次のように、<cc1:C1AppView> マークアップを変更します。このマークアップは、プロジェクトに１つのC1AppViewItem を追加します。
    ソースビュー
    コードのコピー 
         <cc1:C1AppView ID="C1AppView1" runat="server" HeaderTitle="ホームページ" Height="300px">
     <DefaultContent>
        <p>
        このアプリケーションは Wijmo とjQuery Mobile を使用してビルドします。
        Wijmo の詳細については、<a href="http://wijmo.com">http://wijmo.com></a> を参照してください。
        </p>
    </DefaultContent>
       <Items>
          <cc1:C1AppViewItem Text="Wizard" AppViewPageUrl="/Wizard/Index.aspx">
          </cc1:C1AppViewItem>
       </Items>
</cc1:C1AppView>

    AppViewPageUrl プロパティの設定に注目してください。次の手順では、C1AppViewPage を追加します。
  5. ソリューションエクスプローラで、アプリケーションの名前を右クリックします。メニューから［追加］→［新規フォルダ］を選択します。追加したフォルダ名を Wizard と指定します。
  6. Wizard フォルダを右クリックし、次の手順を実行します。
    1. メニューから［追加］→［新しい項目］を選択します。
    2. ［新しい項目の追加］ダイアログウィンドウから、［Web フォーム］を選択し、Index.aspx という名前を指定します。［OK］をクリックすると、ページが開きます。
  7. Index.aspx ページを選択し、<body> タグ内のマークアップを次のように編集します。
    マークアップ
    コードのコピー 
    <cc1:C1AppViewPage runat="server">
   <content id="Content1" runat="server">
       <Template> 
          <cc1:C1Wizard ID="C1Wizard1" runat="server" Delay="300">
             <steps>
               <cc1:C1WizardStep runat="server" Title="Step1" ID="C1Wizard1_Step1">
                 Mauris eleifend est et turpis. Duis id erat. Duis cursus.
               </cc1:C1WizardStep>
               <cc1:C1WizardStep runat="server" Title="Step2" ID="C1Wizard1_Step2">
                 This is the second step.
               </cc1:C1WizardStep>
               <cc1:C1WizardStep runat="server" Title="Step3" ID="C1Wizard1_Step3">
                 This is the third step.
               </cc1:C1WizardStep>
               <cc1:C1WizardStep runat="server" Title="Step4" ID="C1Wizard1_Step4">
                This is the fourth step.
               </cc1:C1WizardStep>
               <cc1:C1WizardStep runat="server" Title="Step5" ID="C1Wizard1_Step5">
                This is the final step.
               </cc1:C1WizardStep>
             </steps>
         </cc1:C1Wizard>    
      </Template>
   </content>
</cc1:C1AppViewPage>

これで、新しいプロジェクトが作成され、プロジェクトに C1AppView コントロールが追加されました。次の手順では、このコントロールの外観と動作をカスタマイズします。

 

 

Copyright © GrapeCity, Inc. All rights reserved.