Bagikan melalui


Membuat Aplikasi Pita

Kerangka kerja Windows Ribbon terdiri dari dua platform pengembangan yang berbeda, namun dependen: bahasa markup berdasarkan Extensible Application Markup Language (XAML) untuk mendeklarasikan kontrol dan tata letak visualnya, dan serangkaian antarmuka berbasis C++ Component Object Model (COM) untuk menentukan fungsionalitas perintah dan kait aplikasi. Pembagian tenaga kerja dalam arsitektur kerangka kerja Pita ini mengharuskan pengembang yang ingin memanfaatkan kemampuan UI kaya yang ditawarkan oleh kerangka kerja harus merancang dan menjelaskan UI dalam markup, lalu menggunakan antarmuka COM kerangka kerja Pita untuk menghubungkan kerangka kerja ke aplikasi host.

Peta Strategi Pita

Aspek visual aplikasi Pita, seperti kontrol apa yang ditampilkan dan tempatnya ditempatkan, dideklarasikan dalam markup (lihat Mendeklarasikan Perintah dan Kontrol dengan Markup Pita). Logika perintah aplikasi, seperti apa yang terjadi ketika tombol ditekan, diimplementasikan dalam kode.

Proses penerapan Pita dan memasukkannya ke dalam aplikasi Windows memerlukan empat tugas dasar: menulis markup, mengkompilasi markup, menulis kode, dan mengkompilasi dan menautkan seluruh aplikasi.

Diagram berikut mengilustrasikan alur kerja untuk implementasi Pita umum.

diagram memperlihatkan alur kerja untuk implementasi pita umum.

Bagian berikut menjelaskan proses ini secara lebih rinci.

Menulis Markup

Setelah UI Pita dirancang, tugas pertama untuk pengembang aplikasi adalah menjelaskan UI dengan markup Pita.

Penting

File skema markup kerangka kerja Pita, UICC.xsd, diinstal dengan Kit Pengembangan Perangkat Lunak (SDK) Microsoft Windows untuk Windows 7 dan .NET Framework 4.0. Dengan menggunakan jalur penginstalan standar, file terletak di folder %ProgramFiles%\Microsoft SDKs\Windows\[version number]\Bin tempat file dapat direferensikan oleh banyak editor XML untuk memberikan petunjuk dan penyelesaian otomatis.

 

Kontrol pita, Perintah Pita (elemen independen kontrol yang menyediakan fungsionalitas dasar untuk kontrol Pita), dan semua tata letak kontrol dan hubungan visual dideklarasikan dalam markup. Struktur markup Pita menekankan perbedaan antara kontrol Pita dan Perintah melalui dua hierarki simpul utama: pohon Perintah dan Sumber Daya dan pohon Tampilan .

Semua kontainer dan tindakan yang diekspos oleh Pita dideklarasikan di pohon Perintah dan Sumber Daya . Setiap elemen Command dikaitkan dengan sekumpulan sumber daya, sebagaimana diperlukan oleh desain UI.

Setelah membuat Perintah untuk aplikasi, Anda mendeklarasikan kontrol di pohon Tampilan dan mengikat setiap kontrol ke Perintah untuk mengekspos fungsionalitas Perintah. Kerangka kerja Pita menentukan penempatan kontrol aktual berdasarkan hierarki Kontrol yang dideklarasikan di sini.

Contoh kode berikut menggambarkan cara mendeklarasikan kontrol Tombol, aplikasi Keluar berlabel, dan mengaitkannya dengan Perintah Keluar.

<Application xmlns="http://schemas.microsoft.com/windows/2009/Ribbon">
  <Application.Commands>
    <Command Name="cmdExit" LabelTitle="Exit application" />
  </Application.Commands>

  <Application.Views>
    <Ribbon>
      <Ribbon.Tabs>
        <Tab>
          <Group>
            <Button CommandName="cmdExit" />
          </Group>
        </Tab>
      </Ribbon.Tabs>
    </Ribbon>
  </Application.Views>
</Application>
        

Tip

Meskipun dimungkinkan untuk menggunakan ekstensi nama file apa pun untuk file markup Pita, .xml adalah ekstensi yang direkomendasikan yang digunakan di seluruh dokumentasi.

 

Mengkompilasi Markup

Setelah file markup Pita dibuat, file tersebut harus dikompilasi ke dalam format biner oleh pengkompilasi markup Pita, Pengkompilasi Perintah UI (UICC), yang disertakan dengan kit pengembangan perangkat lunak (SDK) Windows. Referensi ke file biner ini diteruskan ke metode IUIFramework::LoadUI selama inisialisasi kerangka kerja Pita oleh aplikasi host.

UICC dapat dijalankan langsung dari jendela baris perintah atau ditambahkan sebagai "Langkah Build Kustom" di Visual Studio.

Gambar berikut menunjukkan pengkompilasi markup UICC di jendela Windows 7 SDK CMD Shell.

cuplikan layar memperlihatkan uicc.exe di jendela baris perintah.

Gambar berikut menunjukkan UICC ditambahkan sebagai Langkah Build Kustom di Visual Studio.

cuplikan layar memperlihatkan uicc.exe ditambahkan sebagai langkah build kustom di visual studio.

UICC menghasilkan tiga file: versi biner markup (.bml), header definisi ID (file .h) untuk mengekspos elemen markup ke aplikasi host Pita, dan skrip definisi sumber daya (file.rc) untuk menautkan sumber daya gambar dan string Pita ke aplikasi host pada waktu kompilasi.

Untuk detail selengkapnya tentang mengkompilasi markup kerangka kerja Pita, lihat Mengkompilasi Markup Pita.

Membangun Aplikasi

Setelah UI awal untuk aplikasi Pita dirancang dan diimplementasikan dalam markup, kode aplikasi harus ditulis yang menginisialisasi kerangka kerja, mengonsumsi markup, dan mengikat Perintah yang dideklarasikan dalam markup ke penangan Perintah yang sesuai dalam aplikasi.

Penting

Karena kerangka kerja Pita berbasis COM, sebaiknya proyek Pita menggunakan operator __uuidof() untuk mereferensikan GUID untuk antarmuka kerangka kerja Pita (IID). Dalam kasus di mana tidak mungkin untuk menggunakan operator __uuidof(), seperti ketika pengkompilasi non-Microsoft digunakan atau aplikasi host berbasis C, IID harus didefinisikan oleh aplikasi karena tidak terkandung dalam uuid.lib.

Jika IID didefinisikan oleh aplikasi maka GUID yang ditentukan dalam UIRibbon.idl harus digunakan.

UIRibbon.idl dikirim sebagai bagian dari Kit Pengembangan Perangkat Lunak (SDK) Windows dan dapat ditemukan di jalur penginstalan standar %ProgramFiles%\Microsoft SDKs\Windows\v7.0\Include.

 

Menginisialisasi Pita

Diagram berikut mengilustrasikan langkah-langkah yang diperlukan untuk mengimplementasikan aplikasi Pita sederhana.

diagram memperlihatkan langkah-langkah yang diperlukan untuk mengimplementasikan implementasi pita sederhana.

Langkah-langkah berikut ini menjelaskan secara rinci cara mengimplementasikan aplikasi Pita sederhana.

  1. CoCreateInstance

    Aplikasi memanggil fungsi COM CoCreateInstance standar dengan ID kelas kerangka kerja Pita untuk mendapatkan penunjuk ke kerangka kerja.

    IUIFramework* pFramework = NULL;
    HRESULT hr = ::CoCreateInstance(
                CLSID_UIRibbonFramework, 
                NULL,
                CLSCTX_INPROC_SERVER, 
                IID_PPV_ARGS(&pFramework));
    if (FAILED(hr))
    {
      return hr;
    }
    
  2. Inisialisasi(hwnd, IUIApplication*)

    Aplikasi memanggil IUIFramework::Initialize, meneruskan dua parameter: handel ke jendela tingkat atas yang akan berisi Pita dan penunjuk ke implementasi IUIApplication yang memungkinkan kerangka kerja melakukan panggilan balik ke aplikasi.

    ! [Penting]
    Kerangka kerja Pita diinisialisasi sebagai apartemen berulir tunggal (STA).

     

    hr = pFramework->Initialize(hWndHost, pApplication);
    if (FAILED(hr))
    {
      return hr;
    }
    
  3. LoadUI(instance, resourceName)

    Aplikasi memanggil IUIFramework::LoadUI untuk mengikat sumber daya markup. Parameter pertama dari fungsi ini adalah handel ke instans aplikasi Pita. Parameter kedua adalah nama sumber daya markup biner yang dikompilasi sebelumnya. Dengan meneruskan markup biner ke kerangka kerja Pita, aplikasi memberi sinyal seperti apa struktur Pita dan bagaimana kontrol harus diatur. Ini juga menyediakan kerangka kerja dengan manifes perintah untuk mengekspos (seperti Tempel, Potong, Temukan), yang digunakan oleh kerangka kerja ketika membuat panggilan balik terkait Perintah pada durasi.

    hr = pFramework->LoadUI(GetModuleHandle(NULL), L"APPLICATION_RIBBON");
    if (FAILED(hr))
    {
      return hr;
    }
    
  4. IUIApplication::OnCreateUICommand callbacks

    Setelah langkah 1 sampai 3 selesai, kerangka kerja Pita mengetahui Perintah mana yang akan diekspos di Pita. Namun, kerangka kerja masih membutuhkan dua hal sebelum Pita berfungsi penuh: cara untuk memberi tahu aplikasi ketika Perintah dijalankan dan cara untuk mendapatkan sumber daya Perintah, atau properti, pada durasi. Misalnya, jika kotak kombo muncul di UI, maka kerangka kerja perlu meminta item untuk mengisi kotak kombo.

    Kedua fungsionalitas ini ditangani melalui antarmuka IUICommandHandler . Secara khusus, untuk setiap perintah yang dideklarasikan dalam markup biner (lihat Langkah 3 di atas), kerangka kerja memanggil IUIApplication::OnCreateUICommand untuk meminta aplikasi untuk objek IUICommandHandler untuk perintah tersebut

    Catatan

    Antarmuka IUICommandHandler memungkinkan handler Command terikat ke satu atau beberapa Perintah.

     

Minimal, aplikasi diperlukan untuk menerapkan stub metode IUIApplication yang mengembalikan E_NOTIMPL seperti yang ditunjukkan dalam contoh berikut.

STDMETHOD(OnViewChanged)(UINT32 viewId,
                         UI_VIEWTYPE typeID,
                         IUnknown *view,
                         UI_VIEWVERB verb,
                         INT32 uReasonCode)
{ 
  return E_NOTIMPL; 
}

STDMETHOD(OnCreateUICommand)(UINT32 commandId,
                             UI_COMMANDTYPE typeID,
                             IUICommandHandler **commandHandler)
{ 
  return E_NOTIMPL; 
}

STDMETHOD(OnDestroyUICommand)(UINT32 commandId,
                              UI_COMMANDTYPE typeID,
                              IUICommandHandler *commandHandler) 
{ 
  return E_NOTIMPL; 
}

Pada titik ini, file sumber daya markup harus ditautkan ke aplikasi host dengan menyertakan referensi ke file definisi sumber daya markup (yang berisi referensi ke file header markup) dalam file sumber daya aplikasi. Misalnya, aplikasi bernama RibbonApp dengan file sumber daya bernama ribbonUI.rc memerlukan baris berikut dalam file RibbonApp.rc.

#include "ribbonUI.rc"

Bergantung pada pengkompilasi dan pengtaut yang digunakan, skrip definisi sumber daya mungkin juga memerlukan kompilasi sebelum aplikasi Pita dapat dikompilasi. Alat baris perintah pengkompilasi sumber daya (RC) yang dikirim dengan Microsoft Visual Studio dan Windows SDK dapat digunakan untuk tugas ini.

Mengkompilasi Aplikasi

Setelah aplikasi Pita dikompilasi, aplikasi dapat dijalankan dan UI diuji. Jika UI memerlukan penyesatan dan tidak ada perubahan pada penangan Perintah terkait dalam kode aplikasi inti, revisi file sumber markup, kompilasi ulang markup dengan UICC.exe, dan tautkan file sumber daya markup baru. Ketika aplikasi dimulai ulang, UI yang dimodifikasi ditampilkan.

Semua ini dimungkinkan tanpa menyentuh kode aplikasi inti—peningkatan signifikan atas pengembangan dan distribusi aplikasi standar.

Run Time Updates dan Eksekusi

Struktur komunikasi run-time kerangka kerja Pita didasarkan pada pendorongan dan penarikan, atau pemanggil dua arah, model.

Model ini memungkinkan kerangka kerja untuk menginformasikan aplikasi ketika Perintah dijalankan dan memungkinkan kerangka kerja dan aplikasi untuk mengkueri, memperbarui, dan membatalkan nilai properti dan sumber daya Pita. Fungsionalitas ini disediakan melalui sejumlah antarmuka dan metode.

Kerangka kerja menarik informasi properti yang diperbarui dari aplikasi Pita melalui metode panggilan balik IUICommandHandler::UpdateProperty . ID Perintah dan kunci properti, yang mengidentifikasi properti Perintah untuk diperbarui, diteruskan ke metode yang kemudian mengembalikan, atau mendorong, nilai untuk kunci properti tersebut ke kerangka kerja.

Kerangka kerja memanggil IUICommandHandler::Execute saat Perintah dijalankan, mengidentifikasi ID Perintah dan jenis eksekusi yang terjadi (UI_EXECUTIONVERB). Di sinilah aplikasi menentukan logika eksekusi untuk perintah.

Diagram berikut mengilustrasikan komunikasi run-time untuk Eksekusi perintah antara kerangka kerja dan aplikasi.

diagram memperlihatkan contoh komunikasi run-time antara kerangka kerja pita dan aplikasi host.

Catatan

Menerapkan fungsi IUICommandHandler::UpdateProperty dan IUICommandHandler::Execute tidak diperlukan untuk awalnya menampilkan Pita dalam aplikasi. Namun, metode ini diperlukan untuk memastikan bahwa aplikasi berfungsi dengan benar ketika perintah dijalankan oleh pengguna.

 

Dukungan OLE

Aplikasi Pita dapat dikonfigurasi sebagai server OLE untuk mendukung aktivasi OLE di luar tempat.

Objek yang dibuat dalam aplikasi server OLE mempertahankan asosiasinya dengan aplikasi server ketika dimasukkan (baik ditempelkan atau ditempatkan) ke dalam aplikasi klien OLE (atau kontainer). Dalam aktivasi OLE di luar tempat, mengklik dua kali objek di aplikasi klien membuka instans khusus aplikasi server dan memuat objek untuk pengeditan. Ketika aplikasi server ditutup, semua perubahan yang dilakukan pada objek tercermin dalam aplikasi klien.

Catatan

Kerangka kerja Pita tidak mendukung aktivasi OLE di tempat. Objek yang dibuat di server OLE berbasis Pita tidak dapat diedit dari dalam aplikasi klien OLE. Instans khusus eksternal dari aplikasi server diperlukan.

Mendeklarasikan Perintah dan Kontrol dengan Markup Pita

Panduan Pengalaman Pengguna Pita

Proses Desain Pita