Bagikan melalui

Mengonfigurasi Ulang Pita dengan Mode Aplikasi

  • Artikel

Kerangka kerja Windows Ribbon mendukung konfigurasi ulang dinamis dan pengeksposan elemen inti UI Pita pada durasi, berdasarkan status aplikasi (juga disebut sebagai konteks). Dideklarasikan dan dikaitkan dengan elemen tertentu dalam markup, berbagai status yang didukung oleh aplikasi disebut sebagai mode aplikasi.

Pengantar

Mode aplikasi terdiri dari grup kontrol logis yang mengekspos beberapa fungsi aplikasi inti di UI Pita. Mode ini diaktifkan atau dinonaktifkan secara dinamis oleh aplikasi melalui panggilan ke metode kerangka kerja IUIFramework::SetModes, yang mengaktifkan atau menonaktifkan visibilitas satu atau beberapa mode aplikasi.

Antarmuka Pengguna Kontekstual

Kerangka kerja Pita memberikan pengalaman pengguna yang kaya dengan menggabungkan kontrol dinamis yang merespons interaksi pengguna dan konteks aplikasi dengan mulus. UI kontekstual yang kaya ini dikirimkan melalui kombinasi mekanisme berikut:

  • Galeri - kontrol berbasis koleksi yang mendukung manipulasi dinamis koleksi item mereka.
  • Tab kontekstual - tab pita yang memiliki visibilitasnya ditentukan oleh perubahan konteks ruang kerja, seperti pemilihan gambar dalam dokumen.
  • Mode aplikasi - fungsionalitas aplikasi inti yang bergantung pada konteks aplikasi.

Dalam beberapa hal, mode aplikasi muncul secara fungsional mirip dengan tab kontekstual. Namun, perbedaan mendasar terletak pada niat dan ruang lingkup masing-masing.

Kontrol kontekstual diaktifkan sebagai respons terhadap perubahan konteks dalam aplikasi. Misalnya, di Microsoft Paint untuk Windows 7, tab kontekstual yang berisi grup perintah terkait teks ditampilkan saat pengguna menyisipkan area teks ke dalam ruang kerja. Tab kontekstual ini tidak berisi perintah inti untuk aplikasi dan hanya diekspos di UI karena konteks dalam aplikasi telah berubah. Fungsionalitas inti aplikasi (perintah pengeditan gambar) masih relevan dan tersedia untuk pengguna, bahkan dengan tab kontekstual terlihat.

Mode aplikasi berbeda dari kontrol kontekstual karena mereka mengonfigurasi ulang fungsionalitas sebagai respons terhadap perubahan dalam konteks tempat aplikasi beroperasi. Mode aplikasi berada pada tingkat abstraksi yang lebih tinggi; mereka menyediakan cara untuk mengonfigurasi ulang fungsionalitas inti aplikasi alih-alih mengekspos fungsionalitas sementara yang bukan merupakan komponen inti UI. Misalnya, di Microsoft Paint untuk Windows 7, peralihan dalam mode aplikasi terjadi saat perintah Pratinjau cetak dipanggil. Saat Microsoft Paint beralih ke pratinjau Cetak, konteks bahwa aplikasi beroperasi dalam perubahan dari pengeditan ke pratinjau. Akibatnya, fungsionalitas inti aplikasi berubah hingga pratinjau Cetak dibatalkan dan aplikasi memasuki konteks pengeditan lagi.

Skenario Mode Aplikasi Sederhana

Skenario berikut menunjukkan bagaimana mode aplikasi digunakan, dalam aplikasi yang disebut RibbonApp, untuk mengekspos aspek diskrit fungsionalitas inti.

Dua mode aplikasi didefinisikan dalam RibbonApp:

  • Mode sederhana memaparkan perintah dasar di seluruh UI Pita. Perintah ini muncul setiap saat, apa pun mode aplikasi mana yang aktif.
  • Mode tingkat lanjut memaparkan perintah kompleks yang ditujukan untuk pengguna ahli aplikasi. Perintah tingkat lanjut ini muncul di seluruh UI Pita, selain perintah sederhana.

Secara default, RibbonApp diatur untuk dibuka dalam mode Sederhana , dan perintah yang diperlukan oleh pengguna pemula ditampilkan di Menu Aplikasi dan tab Beranda . Cuplikan layar berikut menunjukkan Menu Aplikasi RibbonApp dan tab Beranda dalam mode Sederhana , menyoroti kontrol modal.

cuplikan layar memperlihatkan tab untuk mode aplikasi sederhana.cuplikan layar memperlihatkan menu aplikasi untuk mode aplikasi sederhana.

Meskipun perintah ini mungkin cukup untuk pengguna pemula, RibbonApp juga mendukung pengguna ahli melalui mode Tingkat Lanjut yang, ketika diaktifkan dengan mengklik tombol Beralih ke Mode Tingkat Lanjut di Menu Aplikasi, menampilkan fungsi inti tambahan.

Skenario ini mudah diimplementasikan dengan mengikat berbagai elemen dalam markup ke mode aplikasi diskrit yang dapat dinyalakan dan dinonaktifkan sesuai kebutuhan. Cuplikan layar berikut ini memperlihatkan Menu Aplikasi RibbonApp dan tab Beranda dalam mode Tingkat Lanjut , menyoroti kontrol modal.

cuplikan layar memperlihatkan tab untuk mode aplikasi tingkat lanjut.cuplikan layar memperlihatkan menu aplikasi untuk mode aplikasi tingkat lanjut.

Menerapkan Mode Aplikasi

Bagian ini menguraikan tiga langkah yang biasanya diperlukan untuk implementasi mode aplikasi kerangka kerja Pita. RibbonApp digunakan untuk memberikan contoh untuk setiap langkah.

Mengidentifikasi Mode

Setiap mode dalam aplikasi harus mewakili serangkaian fungsionalitas logis yang bergantung pada konteks yang dapat dioperasikan aplikasi. Misalnya, jika aplikasi menampilkan kontrol yang hanya relevan ketika koneksi jaringan terdeteksi, kontrol tersebut beroperasi dalam konteks jaringan yang mungkin membenarkan pembuatan mode Jaringan .

RibbonApp memiliki dua konteks yang dapat aktif pada waktu tertentu: Sederhana dan Tingkat Lanjut. Oleh karena itu, RibbonApp memerlukan dua mode: Sederhana dan Tingkat Lanjut.

Tetapkan Kontrol ke Mode Aplikasi

Setelah mode aplikasi diidentifikasi, tetapkan setiap kontrol Pita ke mode dengan mendeklarasikan atribut ApplicationModes dalam markup untuk elemen kontrol yang mendukung mode aplikasi.

Tampilan Pita memungkinkan mode ditentukan pada elemen kontrol berikut ini:

Dalam kerangka kerja Pita, elemen kontrol ini disebut sebagai kontrol modal. Mereka hanya muncul jika mode yang terikat aktif di UI.

Kontrol elemen yang terkandung dalam kontrol modal mewarisi perilaku mode aplikasi. Misalnya, jika kontrol modal Grup ditetapkan ke mode Tingkat Lanjut dan mode Tingkat Lanjut tidak aktif, maka Grup tersebut dan kontrol apa pun di dalamnya, modal atau sebaliknya, tidak akan terlihat di UI Pita.

Dengan penggunaan atribut ApplicationModes , mode ditetapkan ke kontrol modal dalam hubungan 1:N (satu-ke-banyak), di mana satu kontrol modal dapat dikaitkan dengan beberapa mode.

Kerangka kerja Pita mengacu pada mode secara numerik, dari 0 hingga 31, dengan mode 0 dianggap sebagai mode default yang diaktifkan secara otomatis saat aplikasi Pita dimulai. Kontrol modal apa pun yang tidak menentukan atribut ApplicationModes dianggap sebagai anggota mode default.

Di RibbonApp, Simple adalah mode default, dengan fungsionalitas mode Tingkat Lanjut hanya ditampilkan saat dimulai oleh pengguna.

Contoh berikut menunjukkan markup yang diperlukan untuk RibbonApp.

<Application.Views>
  <Ribbon>

    <!--Application Menu-->
    <Ribbon.ApplicationMenu>
      <ApplicationMenu CommandName='cmdAppMenu'>                    
        <MenuGroup>
          <Button CommandName='cmdSave'/>                        
          <Button CommandName='cmdExportMetadata' ApplicationModes='1'/>                   
        </MenuGroup>              
        <MenuGroup>
          <Button CommandName='cmdSwitchModes' ApplicationModes ='0,1'/>
          <Button CommandName='cmdExit'/>
        </MenuGroup>
      </ApplicationMenu>
    </Ribbon.ApplicationMenu>
            
    <!--Tabs-->
    <Ribbon.Tabs>
      <!--Home Tab-->
      <Tab CommandName='cmdHomeTab'>
                    
        <!--Scaling Policy for Home tab-->
        <Tab.ScalingPolicy>
          <ScalingPolicy>
            <ScalingPolicy.IdealSizes>
              <Scale Group='cmdSimpleControlsGroup' Size='Medium'/>                                
            </ScalingPolicy.IdealSizes>                     
          </ScalingPolicy>
        </Tab.ScalingPolicy>     
                    
        <!--Simple Controls Group-->
        <Group CommandName='cmdSimpleControlsGroup' SizeDefinition='ThreeButtons-OneBigAndTwoSmall'>                        
          <Button CommandName="cmdPaste" />
          <Button CommandName='cmdCut'/>                        
          <Button CommandName='cmdCopy'/>                        
        </Group>
      </Tab>
                
      <!--Advanced Tab-->
      <Tab CommandName='cmdAdvancedTab' ApplicationModes='1'>
        <!--Advanced Controls Group-->
        <Group CommandName='cmdMetadataGroup' ApplicationModes='1' SizeDefinition='TwoButtons'>
          <Button CommandName='cmdEditMetadata' />
          <Button CommandName='cmdCheckErrors' />
        </Group>
      </Tab>
    </Ribbon.Tabs>                   
                             
  </Ribbon>         
</Application.Views>

Contoh ini menunjukkan hal-hal berikut:

  • Mode default 0 tidak perlu dideklarasikan secara eksplisit. Karena kontrol modal yang tidak menentukan atribut ApplicationModes secara otomatis terikat ke mode 0 (Mode sederhana dalam contoh RibbonApp), tidak perlu secara eksplisit mendeklarasikan atribut untuk kontrol modal default.
  • Kontrol dapat terikat ke beberapa mode. Untuk RibbonApp, satu-satunya kebutuhan untuk atribut ApplicationModes dalam kontrol mode Sederhana adalah cmdSwitchModes tombol , karena ini adalah bagian dari mode Sederhana dan Tingkat Lanjut . Jika salah satu mode aktif, kontrol ini akan muncul di Menu Aplikasi.
  • Kontrol modal tidak mewarisi dari orang tua mereka. Tab Tingkat Lanjut dari RibbonApp berisi grup Metadata ; kedua kontrol modal ini ditetapkan ke mode 1 (Mode tingkat lanjut ). Menetapkan tab Tingkat Lanjut ke mode 1 tidak secara otomatis menetapkan kontrol anak, seperti grup Metadata , ke mode 1. Ini memungkinkan grup apa pun dalam tab diaktifkan atau dinonaktifkan secara independen saat runtime.
  • Kontrol non-modal masih dapat mengandalkan sakelar mode. Tombol Edit Metadata dan Periksa Kesalahan Dari RibbonApp adalah untuk pengguna tingkat lanjut dan hanya tersedia saat pengguna beralih ke mode Tingkat Lanjut . Kontrol tombol yang tidak dihosting di dalam Menu Aplikasi bersifat non-modal; namun, karena tombol ini dihosting di dalam kontrol modal (grup Metadata ), tombol tersebut terlihat saat grup terlihat. Oleh karena itu, tombol ini muncul ketika mode tingkat lanjut diaktifkan dan grup Metadata diekspos di UI Pita.

Beralih Mode pada Runtime

Setelah mode didefinisikan dalam markup, mode tersebut dapat dengan mudah diaktifkan atau dinonaktifkan sebagai respons terhadap peristiwa kontekstual. Seperti disebutkan sebelumnya, aplikasi Pita selalu dimulai dalam mode default 0. Setelah aplikasi diinisialisasi dan mode 0 aktif, set mode aktif dapat diubah dengan memanggil fungsi IUIFramework::SetModes . Fungsi ini mengambil bilangan bulat 32-bit sebagai representasi bitwise dari mode yang harus aktif; bit yang paling tidak signifikan mewakili mode 0 dan bit yang paling signifikan mewakili mode 31. Jika bit diatur ke nol, mode tidak aktif di UI Pita.

Di RibbonApp, saat pengguna mengaktifkan mode Tingkat Lanjut , perintah tingkat lanjut ditampilkan bersama perintah sederhana. Handler perintah untuk tombol Beralih ke Mode Tingkat Lanjut memanggil IUIFramework::SetModes untuk mengatur mode 0 (Sederhana) dan 1 (Tingkat Lanjut) sebagai aktif di UI. Contoh berikut adalah kode RibbonApp untuk panggilan fungsi ini :

const int SIMPLE_MODE = 0;
const int ADVANCED_MODE = 1;
pFramework->SetModes( UI_MAKEAPPMODE(SIMPLE_MODE) | UI_MAKEAPPMODE(ADVANCED_MODE) );

Catatan

Kerangka kerja Pita UI_MAKEAPPMODE makro menyederhanakan tugas pengaturan bit ini dengan benar sebagai persiapan untuk panggilan ke IUIFramework::SetModes.

 

Contoh ini menunjukkan hal berikut:

  • Gunakan makro UI_MAKEAPPMODE untuk menyusun set mode.
  • Mode diatur secara eksplisit dan atomik. Nilai bilangan bulat yang diteruskan ke IUIFramework::SetModes mewakili mode yang akan aktif setelah fungsi kembali. Meskipun mode Sederhana sebelumnya aktif, IUIFramework::SetModes harus menunjukkan bahwa mode Sederhana tetap aktif saat mode Tingkat Lanjut diaktifkan.
  • Mode default dapat dihapus. Meskipun di RibbonApp mode default (mode 0) tidak pernah dihapus, mode tersebut dapat dihapus dengan panggilan berikut: g_pFramework->SetModes(UI_MAKEAPPMODE(ADVANCED_MODE)), hanya mengekspos perintah tingkat lanjut di UI.

Catatan

Saat mode aplikasi dikonfigurasi ulang, Pita akan mencoba mempertahankan tab yang dipilih sebelumnya di UI. Jika kumpulan mode baru tidak lagi berisi tab yang dipilih sebelum panggilan, Pita akan memilih tab dalam tata letaknya yang paling dekat dengan Menu Aplikasi. Tab ini dimaksudkan untuk berisi perintah yang paling relevan dengan pengguna. Untuk informasi selengkapnya, lihat Panduan Pengalaman Pengguna Pita.

 

Keterangan

Pita harus memiliki setidaknya satu mode aktif setiap saat. Jika aplikasi mencoba menonaktifkan semua mode dengan memanggil IUIFramework::SetModes dengan nilai mode 0, E_FAIL dikembalikan dan set mode aktif tetap tidak berubah.

Kerangka kerja mengharuskan setidaknya satu tab ada di UI Pita setiap saat. Akibatnya, harus ada setidaknya satu tab yang diekspos oleh mode default (mode 0) dan setelah setiap sakelar mode.

Tidak semua area UI Pita dipengaruhi oleh mode aplikasi. Misalnya, jika menonaktifkan mode menyebabkan hilangnya tombol dari Pita yang sebelumnya ditambahkan ke Toolbar Akses Cepat, tombol tersebut tetap berada di Toolbar Akses Cepat, memungkinkan pengguna menjalankan Perintah yang terikat ke tombol. Sebagai aturan umum, jika Perintah termasuk dalam satu atau beberapa mode tidak aktif, maka Perintah tersebut juga harus dinonaktifkan dengan mengatur properti UI_PKEY_Enabled ke 0 (VARIANT_FALSE) .

Panduan Pengalaman Pengguna Pita

Menampilkan Tab Kontekstual