Cara Membuat Bilah Menu Gaya Internet Explorer

Sekilas, bilah menu di Microsoft Internet Explorer 5 dan yang lebih baru terlihat mirip dengan menu standar. Namun, itu terlihat sangat berbeda ketika Anda mulai menggunakannya.

Cuplikan layar berikut ini memperlihatkan bilah menu Windows Internet Explorer dengan menu Alat dipilih.

screen shot that shows the windows internet explorer menu bar, with the tools menu selected

Bilah menu sebenarnya adalah kontrol toolbar yang terlihat seperti menu standar. Alih-alih item menu tingkat atas, bilah menu memiliki serangkaian tombol teks-saja yang menampilkan menu drop-down saat diklik. Namun, sebagai jenis toolbar khusus, bilah menu memiliki beberapa kemampuan yang tidak memiliki menu standar:

  • Ini dapat disesuaikan menggunakan teknik toolbar standar, memungkinkan pengguna untuk memindahkan, menghapus, atau menambahkan item.
  • Ini dapat memiliki pelacakan panas, sehingga pengguna akan tahu kapan mereka melebihi item tingkat atas tanpa harus mengkliknya terlebih dahulu.

Bilah menu dapat dimasukkan ke dalam kontrol rebar, memberikannya fitur berikut:

  • Ini dapat memiliki gripper, yang memungkinkan pengguna untuk memindahkan atau mengubah ukuran pita.
  • Ini dapat berbagi strip di kontrol rebar dengan band lain, seperti toolbar standar dalam ilustrasi sebelumnya.
  • Ini dapat menampilkan chevron ketika ditutupi oleh pita yang berdekatan, memberikan pengguna akses ke item tersembunyi.
  • Ini dapat memiliki bitmap latar belakang yang ditentukan aplikasi.

Topik ini membahas cara mengimplementasikan bilah menu. Karena bilah menu adalah implementasi khusus dari kontrol toolbar, fokusnya adalah pada topik yang khusus untuk bilah menu. Untuk diskusi tentang cara menggabungkan toolbar ke dalam kontrol rebar, lihat Cara Membuat Toolbar Gaya Internet Explorer dan Tentang Kontrol Bilah Ulang.

Membuat Bilah Alat ke Bilah Menu

Untuk membuat bilah alat ke bilah menu:

  • Buat toolbar datar dengan menyertakan TBSTYLE_FLAT dengan bendera gaya jendela lainnya. Gaya TBSTYLE_FLAT juga memungkinkan pelacakan panas. Dengan gaya ini, bilah menu terlihat seperti menu standar hingga pengguna mengaktifkan tombol. Kemudian, tombol tampak menonjol dari toolbar dan menekan ketika diklik, sama seperti tombol standar. Karena pelacakan panas diaktifkan, semua yang diperlukan untuk mengaktifkan tombol adalah agar kursor mengarahkan kursor ke atasnya. Jika kursor berpindah ke tombol lain, kursor akan diaktifkan dan tombol lama dinonaktifkan.
  • Buat tombol gaya daftar dengan menyertakan TBSTYLE_LIST dengan bendera gaya jendela lainnya. Gaya ini membuat tombol lebih tipis yang terlihat lebih seperti item menu tingkat atas standar.
  • Buat tombol hanya teks dengan mengatur anggota iBitmap dari struktur TBBUTTON tombol ke I_IMAGENONE dan anggota iString ke teks tombol.
  • Berikan setiap tombol gaya BTNS_DROPDOWN. Saat tombol diklik, kontrol toolbar mengirimkan pemberitahuan TBN_DROPDOWN kepada aplikasi Anda untuk memintanya menampilkan menu tombol.
  • Masukkan bilah menu ke dalam band rebar. Aktifkan gripper dan chevron, seperti yang dibahas dalam Cara Membuat Toolbar Gaya Internet Explorer.
  • Terapkan handler TBN_DROPDOWN untuk menampilkan menu drop-down tombol saat diklik. Menu drop-down adalah jenis menu pop-up. Ini dibuat dengan menggunakan fungsi TrackPopupMenu , dengan sudut kiri atasnya selaras dengan sudut kiri bawah tombol.
  • Terapkan navigasi keyboard, sehingga bilah menu dapat diakses sepenuhnya tanpa mouse.
  • Menerapkan pelacakan panas menu. Dengan menu standar, setelah menu item menu tingkat atas ditampilkan, memindahkan kursor ke item tingkat atas lainnya secara otomatis menampilkan menunya dan menciutkan menu item sebelumnya. Kontrol toolbar akan melacak kursor dan mengubah gambar tombol secara otomatis menampilkan menu baru. Aplikasi Anda harus melakukannya secara eksplisit.

Sebagian besar item ini mudah diterapkan dan dibahas di tempat lain. Lihat Cara Membuat Bilah Alat Gaya Internet Explorer, Tentang Kontrol Bilah Alat, atau Tentang Kontrol Bilah Ulang untuk diskusi umum tentang cara menggunakan toolbar dan kontrol bilah ulang. Lihat Menu untuk diskusi tentang cara menangani menu pop-up. Dua item terakhir, navigasi keyboard dan pelacakan panas menu, dibahas di sisa topik ini.

Menangani Navigasi dengan Menu Pelacakan Panas Dinonaktifkan

Pengguna dapat memilih untuk menavigasi bilah menu dengan mouse, keyboard, atau campuran keduanya. Untuk menerapkan navigasi bilah menu, aplikasi Anda harus menangani pemberitahuan toolbar dan memantau mouse dan keyboard. Tugas ini dapat dipecah menjadi dua bagian yang berbeda: dengan dan tanpa pelacakan panas menu. Bagian ini membahas cara menangani navigasi ketika tidak ada menu yang ditampilkan dan pelacakan panas menu tidak diaktifkan.

Jika pelacakan panas menu dinonaktifkan, Anda dapat memperlakukan bilah menu sebagai toolbar normal. Jika pengguna menavigasi dengan mouse, yang perlu dilakukan aplikasi Anda adalah menangani pemberitahuan TBN_DROPDOWN . Saat pemberitahuan ini diterima, tampilkan menu drop-down yang sesuai, dan aktifkan pelacakan panas menu. Sejak saat itu, Anda berada di menu rezim pelacakan panas yang dibahas di Navigasi Penanganan dengan Menu Pelacakan Panas Diaktifkan.

Seperti yang dibahas dalam Navigasi Campuran, Anda juga perlu menangani pemberitahuan TBN_HOTITEMCHANGE untuk melacak tombol aktif. Pemberitahuan ini tidak relevan jika pengguna hanya menavigasi dengan mouse, tetapi perlu ketika navigasi mouse dan keyboard dicampur.

Seperti yang disebutkan di bagian sebelumnya, pengguna dapat melakukan sejumlah operasi navigasi dengan keyboard saat pelacakan panas menu dinonaktifkan. Kontrol toolbar mendukung navigasi keyboard hanya jika memiliki fokus. Mereka juga tidak menangani semua penekanan tombol yang diperlukan untuk bilah menu. Solusi paling sederhana untuk menangani navigasi keyboard adalah memproses peristiwa tekan tombol yang relevan secara eksplisit.

Jika pelacakan panas menu dinonaktifkan, aplikasi Anda harus menangani peristiwa tekan tombol ini dengan cara berikut:

  • Kunci F10. Aktifkan tombol pertama dengan TB_SETHOTITEM.
  • Tombol PANAH KIRI dan PANAH KANAN. Aktifkan tombol yang berdekatan dengan TB_SETHOTITEM. Jika pengguna mencoba menavigasi salah satu ujung bilah menu, aktifkan tombol pertama di ujung yang berlawanan.
  • Kunci ESCAPE. Nonaktifkan tombol aktif dengan TB_SETHOTITEM. Bilah menu harus dikembalikan ke status sebelum mengaktifkan tombol pertama.
  • Kunci akselerator KUNCI ALT. Gunakan pesan TB_MAPACCELERATOR untuk menentukan tombol mana yang sesuai dengan Karakter kunci. Tampilkan menu drop-down tombol dan aktifkan pelacakan panas menu.
  • Tombol PANAH BAWAH. Jika tombol aktif tetapi tidak ada menu yang ditampilkan, tampilkan menu tombol dan aktifkan pelacakan panas menu.
  • Tombol ENTER. Nonaktifkan tombol aktif dengan TB_SETHOTITEM. Bilah menu harus dikembalikan ke status sebelum mengaktifkan tombol pertama.

Handler navigasi keyboard yang diuraikan di bagian sebelumnya pada dasarnya melakukan dua tugas: melacak tombol aktif dan menampilkan menu yang sesuai saat tombol dipilih. Handler ini cukup selama pengguna hanya menavigasi dengan keyboard. Namun, pengguna sering mencampur navigasi keyboard dan mouse. Misalnya, mereka dapat mengaktifkan tombol pertama dengan tombol F10, menggunakan mouse untuk mengaktifkan tombol yang berbeda, lalu membuka menunya dengan tombol PANAH BAWAH. Jika Anda hanya memantau penekanan tombol untuk melacak tombol aktif, Anda akan menampilkan menu yang salah. Anda juga harus menangani pemberitahuan TBN_HOTITEMCHANGE untuk melacak tombol aktif secara akurat.

Menangani Navigasi dengan Menu Pelacakan Panas Diaktifkan

Saat pelacakan panas menu diaktifkan, aplikasi Anda harus mengubah caranya merespons navigasi pengguna. Untuk mereplikasi perilaku menu standar, Anda harus menerapkan fitur berikut secara eksplisit.

Dengan navigasi mouse:

  • Jika pengguna memindahkan kursor ke tombol lain, menu tersebut segera muncul dan menu sebelumnya menghilang.
  • Pelacakan panas menu tetap aktif hingga pengguna memilih perintah atau mengklik titik yang bukan bagian dari wilayah menu. Salah satu tindakan menonaktifkan pelacakan panas menu hingga tombol lain diklik.
  • Jika kursor berpindah dari menu, menu drop-down saat ini tetap ada hingga kursor berpindah kembali, atau pengguna mengklik titik di luar, area yang dicakup oleh menu. Jika kursor kembali ke tombol yang berbeda dari yang saat ini ditampilkan, menu lama diciutkan dan menu baru ditampilkan.

Dengan navigasi keyboard:

  • Tombol PANAH KANAN memindahkan fokus ke kanan. Jika item memiliki submenu, tampilkan submenu. Jika item tidak memiliki submenu, ciutkan menu dan submenu apa pun, aktifkan tombol berikutnya dengan TB_SETHOTITEM, dan tampilkan menu untuk tombol yang berdekatan. Jika tombol terakhir aktif saat pesan ini diterima, tampilkan menu untuk tombol pertama.

  • Tombol PANAH KIRI memindahkan fokus ke kiri. Jika item adalah submenu, ciutkan dan alihkan fokus ke menu induknya. Jika item bukan submenu, ciutkan menu, aktifkan tombol berikutnya dengan TB_SETHOTITEM, dan tampilkan menu untuk tombol tersebut.

  • Kunci ESCAPE mendukung tampilan satu langkah.

    • Jika submenu ditampilkan, submenu diciutkan dan fokus bergeser ke menu induk.
    • Jika menu tombol ditampilkan, menu diciutkan dan pelacakan panas menu dinonaktifkan. Tombol item tetap aktif.
    • Jika tidak ada menu yang ditampilkan tetapi tombol aktif, tombol dinonaktifkan dan pelacakan panas menu dinonaktifkan.
  • Tombol PANAH ATAS dan PANAH BAWAH hanya digunakan untuk menavigasi dalam menu tertentu.

  • Kunci ENTER meluncurkan perintah yang terkait dengan item menu. Jika item menu memiliki submenu, kunci ENTER akan menampilkannya.

Seperti halnya kasus yang dinonaktifkan pelacakan panas menu, aplikasi Anda harus dapat menangani mouse, keyboard, dan navigasi campuran. Namun, fakta bahwa menu ditampilkan berarti bahwa olahpesan harus ditangani agak berbeda.

Pemrosesan Pesan untuk Pelacakan Panas Menu

Pelacakan panas menu mengharuskan menu ditampilkan setiap saat, selain dari interval singkat yang diperlukan untuk beralih ke menu baru. Namun, menu drop-down yang ditampilkan oleh TrackPopupMenu adalah modal. Aplikasi Anda akan terus menerima beberapa pesan secara langsung, termasuk WM_COMMAND, TBN_HOTITEMCHANGE, dan pesan terkait menu normal seperti WM_MENUSELECT. Namun, ini tidak akan menerima pesan keyboard atau mouse tingkat rendah secara langsung. Untuk menangani pesan seperti WM_MOUSEMOVE, Anda harus mengatur hook pesan untuk mencegat pesan yang diarahkan ke menu.

Saat menu drop-down ditampilkan, atur hook pesan dengan memanggil fungsi SetWindowsHookEx dengan parameter idHook diatur ke WH_MSGFILTER. Semua pesan yang ditujukan untuk menu akan diteruskan ke MessageProc Anda. Misalnya, fragmen kode berikut mengatur hook pesan yang akan menjebak pesan yang masuk ke menu drop-down. MsgHook adalah nama prosedur kait, dan hhookMsg merupakan pegangan untuk prosedur.

hhookMsg = SetWindowsHookEx(WH_MSGFILTER, MsgHook, HINST_THISDLL, 0);

Pesan menu diidentifikasi dengan mengatur parameter nCode prosedur kait ke MSGF_MENU. Parameter lParam akan menunjuk ke struktur MSG dengan pesan . Detail pesan mana yang perlu ditangani, dan bagaimana, dibahas di sisa topik ini.

Aplikasi Anda harus meneruskan semua pesan ke hook pesan berikutnya dengan memanggil fungsi CallNextHookEx. Anda juga harus mengirim pesan mouse langsung ke kontrol toolbar, memastikan untuk mengonversi koordinat titik apa pun ke ruang koordinat klien toolbar. Mengirim pesan secara langsung memastikan bahwa kontrol toolbar menerima pesan mouse yang sesuai. Misalnya, toolbar perlu menerima pesan WM_MOUSEMOVE untuk melacak tombolnya.

Saat tombol baru diaktifkan, aplikasi Anda harus menciutkan menu drop-down lama dengan pesan WM_CANCELMODE , dan menampilkan menu baru. Ini juga harus menciutkan menu drop-down saat fokus diambil dari bilah menu dengan navigasi keyboard atau dengan mengklik di luar area menu. Setiap kali Anda menciutkan menu, Anda harus membebaskan kait pesannya dengan menggunakan fungsi UnhookWindowsHookEx. Jika Anda perlu menampilkan menu drop-down lain, buat hook pesan baru. Ketika perintah diluncurkan, menu akan diciutkan secara otomatis tetapi Anda harus secara eksplisit membebaskan hook pesan.

Contoh kode berikut membebaskan hook pesan yang diatur dalam contoh sebelumnya.

UnhookWindowsHookEx(hhookMsg);

Ketika tombol hot-track kontrol toolbar normal, tombol ini menyoroti tombol aktif dan mengirim pemberitahuan TBN_HOTITEMCHANGE kepada aplikasi setiap kali tombol baru diaktifkan. Aplikasi Anda bertanggung jawab untuk menampilkan menu drop-down yang sesuai. Ini harus:

  • Tangani pemberitahuan TBN_HOTITEMCHANGE untuk melacak tombol aktif. Saat tombol aktif berubah, ciutkan menu lama dan buat yang baru.
  • Tangani pemberitahuan TBN_DROPDOWN yang dikirim saat tombol diklik. Kemudian harus menciutkan menu dan menonaktifkan pelacakan panas menu. Tombol tetap aktif.
  • Tangani pesan WM_LBUTTONDOWN, WM_RBUTTONDOWN, dan WM_MOUSEMOVE dalam prosedur hook pesan Anda, untuk melacak posisi mouse. Jika mouse diklik di luar area menu, ciutkan menu drop-down saat ini, nonaktifkan pelacakan panas menu, dan kembalikan bilah menu ke status praaktivasinya.
  • Saat perintah menu diluncurkan, nonaktifkan pelacakan panas menu. Menu akan diciutkan secara otomatis tetapi Anda harus secara eksplisit membebaskan hook pesan.

Anda juga harus menangani pesan terkait menu, seperti pesan WM_INITMENUPOPUP yang dikirim saat item menu perlu menampilkan submenu. Untuk diskusi tentang cara menangani pesan tersebut, lihat Menu.

Aplikasi Anda harus memproses pesan keyboard dalam prosedur kait pesan dan bertindak pada pesan yang memengaruhi pelacakan panas menu. Penekanan tombol berikut harus ditangani:

  • Kunci ESCAPE. Kunci ESCAPE mengembalikan tampilan ke atas satu tingkat. Jika submenu ditampilkan, submenu harus diciutkan. Jika menu utama tombol ditampilkan, ciutkan dan nonaktifkan pelacakan panas menu. Tombol tetap aktif.
  • Tombol PANAH KANAN. Jika item memiliki submenu, tampilkan. Jika item tidak memiliki submenu, ciutkan menu dan submenu apa pun, aktifkan tombol berikutnya dengan TB_SETHOTITEM, dan tampilkan menunya. Jika tombol terakhir aktif saat pemberitahuan ini diterima, tampilkan menu untuk tombol pertama.
  • Tombol PANAH KIRI. Jika item berada dalam submenu, ciutkan dan alihkan fokus ke menu induknya. Jika item bukan submenu, ciutkan menu, aktifkan tombol yang berdekatan dengan TB_SETHOTITEM, dan tampilkan menunya. Jika tombol pertama aktif saat pemberitahuan ini diterima, tampilkan menu untuk tombol terakhir.
  • Tombol PANAH ATAS dan PANAH BAWAH. Kunci ini digunakan untuk menavigasi dalam menu tetapi tidak secara langsung memengaruhi pelacakan panas menu.
  • Kunci akselerator KUNCI ALT. Gunakan pesan TB_MAPACCELERATOR untuk menentukan tombol mana yang sesuai dengan Karakter kunci. Jika sesuai dengan tombol yang berbeda dari tombol yang saat ini aktif, ciutkan menu drop-down saat ini, aktifkan tombol baru dengan TB_SETHOTITEM, dan tampilkan menu untuk tombol yang berdekatan. Jika karakter Kunci sesuai dengan tombol yang ditampilkan saat ini, ciutkan menu drop-down dan nonaktifkan pelacakan panas menu. Tombol harus tetap aktif.