Share via

Mendeklarasikan Perintah dan Kontrol dengan Markup Pita

  • Artikel

Kerangka kerja Windows Ribbon menggunakan bahasa markup berdasarkan Extensible Application Markup Language (XAML) untuk mengimplementasikan tampilan aplikasi Pita secara deklaratif.

Memisahkan Presentasi dari Logika Perintah

Pemisahan atribut presentasi dan visual dari logika perintah dalam kerangka kerja Pita dicapai melalui dua platform pengembangan yang berbeda, tetapi dependen. Tata letak kontrol, perilaku penskalaan, Deklarasi perintah, dan spesifikasi sumber daya adalah domain waktu desain sintaks markup deklaratif berdasarkan spesifikasi Extensible Application Markup Language (XAML ). Fungsionalitas tingkat rendah, kait aplikasi, dan handler Perintah didefinisikan dalam implementasi antarmuka berbasis Model Objek Komponen (COM).

Pemisahan presentasi dan logika ini memberikan manfaat berikut:

  • Siklus pengembangan aplikasi yang lebih efisien yang memungkinkan pengembang dan desainer UI untuk mengimplementasikan GUI aplikasi Pita secara independen dari fungsionalitas aplikasi inti. Fungsionalitas inti ini dapat diserahkan kepada pengembang perangkat lunak khusus.
  • Pemeliharaan yang lebih murah karena perubahan pada GUI dimungkinkan tanpa perubahan pada fungsi inti (dan sebaliknya).
  • Spesifikasi sederhana string dan sumber daya gambar melalui markup.
  • Kemudahan pembuatan prototipe.

Struktur Markup

Ada dua cabang berbeda dalam struktur markup kerangka kerja Pita.

Cabang pertama berisi manifes Perintah dan deklarasi sumber daya (string dan gambar). Setiap entri Perintah digunakan oleh kerangka kerja untuk mengikat kontrol Pita, melalui ID Perintah, ke penangan Perintah yang ditentukan dalam kode aplikasi.

Cabang kedua berisi deklarasi kontrol aktual. Setiap kontrol dikaitkan dengan Perintah melalui atribut CommandName yang memetakan ke atribut Nama yang ditentukan dalam setiap deklarasi Perintah.

Komponen Pita

Fungsionalitas UI kerangka kerja pita diekspos melalui Tampilan. Tampilan pada dasarnya adalah kontainer, seperti Pita dan ContextPopup, yang digunakan untuk menyajikan kontrol kerangka kerja dan Perintah yang terikat.

Tampilan Pita terdiri dari beberapa komponen yang menyertakan Menu Aplikasi, Toolbar Akses Cepat (QAT) untuk menampilkan Perintah yang umum digunakan dari UI pita, tab inti dan kontekstual yang berisi grup kontrol, dan sistem menu konteks kaya dari ContextPopup.

Semua komponen Pita dinyatakan dalam file markup mandiri yang:

Dua contoh markup Pita berikut menunjukkan bagaimana sekumpulan item Menu Aplikasi Pita masing-masing terkait dengan Nama perintah dan ID.

  1. Bagian ini memperlihatkan deklarasi Perintah yang diperlukan untuk Menu Aplikasi dengan perintah dasar seperti Baru, Buka, dan Simpan.

    <!-- Command declarations for the Application Menu. -->
<Command Name="cmdFileMenu"
         Symbol="ID_FILE_MENU"
         Id="25000" />
<!-- Command declaration for most recently used items. -->
<Command Name="cmdMRUItems"
         Symbol="ID_FILE_MRUITEMS"
         Id="25050"/>
<!-- Command declarations for Application Menu items. -->
<Command Name="cmdNew"
         Symbol="ID_FILE_NEW"
         Comment="New"
         Id="25001"
         LabelTitle="&amp;New"/>
<Command Name="cmdOpen"
         Symbol="ID_FILE_OPEN"
         Comment="Open"
         Id="25002"
         LabelTitle="&amp;&amp;Open"/>
<Command>
  <Command.Name>cmdSave</Command.Name>
  <Command.Symbol>ID_FILE_SAVE</Command.Symbol>
  <Command.Comment>Save</Command.Comment>
  <Command.Id>25003</Command.Id>
  <Command.LabelTitle>
    <String>
      <String.Content>Label for Save</String.Content>
      <String.Id>59999</String.Id>
      <String.Symbol>strSave</String.Symbol>
    </String>
  </Command.LabelTitle>
  <Command.TooltipTitle>Tooltip title with &amp;&amp; for Save Command</Command.TooltipTitle>
  <Command.TooltipDescription>Tooltip description for Save Command.</Command.TooltipDescription>
  <Command.Keytip>s1</Command.Keytip>
</Command>
<Command Name="cmdPrint"
         Symbol="ID_FILE_PRINT"
         Comment="Save"
         Id="25004"
         LabelTitle="Print" />
<Command Name="cmdExit"
         Symbol="ID_FILE_EXIT"
         Comment="Exit"
         Id="25005"
         LabelTitle="Exit" />

  2. Bagian ini memperlihatkan deklarasi Kontrol terkait.

    <!-- Control declarations for Application Menu items. -->
<Ribbon.ApplicationMenu>
  <ApplicationMenu CommandName="cmdFileMenu">
    <!-- Most recently used items collection. -->
    <ApplicationMenu.RecentItems>
      <RecentItems CommandName="cmdMRUItems"/>
    </ApplicationMenu.RecentItems>
    <!-- Menu items collection. -->
    <MenuGroup>
      <Button CommandName="cmdNew" />
      <Button CommandName="cmdOpen" />
      <Button CommandName="cmdSave" />
    </MenuGroup>
    <MenuGroup>
      <Button CommandName="cmdPrint" />
      <Button CommandName="cmdExit" />
    </MenuGroup>
  </ApplicationMenu>
</Ribbon.ApplicationMenu>

Saat markup dikompilasi dengan alat Pengkompilasi Perintah UI (UICC), nama Perintah dan ID ditempatkan ke dalam file header yang digunakan oleh aplikasi host Pita.

Berikut ini adalah contoh file header yang dihasilkan oleh UICC.

// *****************************************************************************
// * This is an automatically generated header file for UI Element definition  *
// * resource symbols and values. Please do not modify manually.               *
// *****************************************************************************

#pragma once

#define cmdFileMenu 25000 
#define cmdNew 22001  /* New */ 
#define cmdNew_LabelTitle_RESID 60005
#define cmdOpen 22002  /* Open */ 
#define cmdOpen_LabelTitle_RESID 60006
#define cmdSave 22003  /* Save */ 
#define cmdSave_LabelTitle_RESID 60007
#define cmdSave_TooltipTitle_RESID 60008
#define cmdSave_TooltipDescription_RESID 60009

Bahasa Markup Aplikasi yang Dapat Diperluas (XAML)

Mengkompilasi Markup Pita