TWizard

Tinjauan

TWizard adalah analogi terhadap bimbingan instalasi yang umum digunakan untuk menginstalasi software pada Windows. Ia memisahkan formulir besar dan menyajikan pengguna dengan sederetan formulir lebih kecil, disebut langkah bimbingan, untuk diselesaikan. Gambar berikut memperlihatkan bagaimana bimbingan dibuat atas kapan disajikan untuk pengguna, di mana konten langkah adalah konten utama pada langkah bimbingan untuk diselesaikan oleh para pengguna, header merujuk ke konten header yang umum bagi seluruh langkah, navigasi berisi tombol yang membolehkan pengguna untuk menjelajahi langkah demi langkah, dan bar samping berisi daftar hiperlink di mana para pengguna dapat menjangkau ke setiap langkah dengan satu klik. Penampakan bar samping dapat dihidup matikan dengan menyetel ShowSideBar.

Standarnya TWizard menyertakan komponen di atas dalam sebuah tabel HTML agar bar samping bisa ditampilkan di kiri sementara sisanya di kanan. Jika UseDefaultLayout disetel ke false, tidak ada tabel HTML yang akan dipakai, dan para pengembang hrus menggunakan teknik murni CSS untuk posisi komponen bimbingan. Catatan, setiap komponen ditampilkan sebagai <div> dan bimbingan sendiri juga adalah <div> yang mengurung komponennya <div>.

Langkah bimbingan disajikan dengan TWizardStep dan dipelihara dalam TWizard melalui properti WizardSteps. Kapan saja hanya satu yang terlihat, yang ditentukan oleh properti ActiveStep. Properti ActiveStepIndex memberikan indeks pada langkah yang aktif dalam koleksi langkah. Mengklik pada tombol navigasi dapat mengaktifkan langkah bimbingan yang berbeda.

Langkah bimbingan biasanya ditambahkan ke bimbingan melalui template seperti berikut,

<com:TWizard> <com:TWizardStep Title="step 1" StepType="Start"> konten dalam langkah 1 dapat berisi kontrol lain </com:TWizardStep> <com:TWizardStep Title="step 2" StepType="Step"> konten dalam langkah 2 dapat berisi kontrol lain </com:TWizardStep> <com:TWizardStep Title="finish step" StepType="Finish"> konten dalam langkah selesai dapat berisi kontrol lain </com:TWizardStep> </com:TWizard>

Dalam contoh di atas, StepType merujuk ke tipe langkah bimbingan, yang dapat mempengaruhi bagaimana penampilan navigasi dan perilaku langkah. Langkah bimbingan dapat berupa salah satu dari tipe berikut:

Start - langkah pertama dalam bimbingan.
Step - langkah internal dalam bimbiingan.
Finish - langkah terakhir yang membolehkan interaksi pengguna.
Complete - langkah yang memperlihatkan ringkasan kepada penngguna. Dalam langkah ini, bar samping dan panel navigasi tidak terlihat. Selanjutnya, langkah ini biasanya tidak membolehkan interaksi pengguna.
Auto - tipe langkah ditentukan oleh bimbingan secara otomatis.

Menggunakan TWizard

Contoh Bimbingan Satu-Langkah

Dalam contoh ini, kita menggunakan bimbingan untuk mengumpulkan preferensi pengguna pada warna. Dalam langkah pertama, pengguna disajikan dengan daftar dropdown dari mana dia dapat memilih warna favoritnya. Dalam langkah kedua, langkah lengkap, pilihannya dalam langkah sebelumnya ditampilkan. Dalam aplikasi sebenarnya, pada langkah ini pilihan bisa disimpan dalam database di belakang layar.

Mengkustomisasi Gaya Bimbingan

TWizard mendefinisikan seluruh set properti untuk kustomisasi penampilan berbagai komponennya seperti yang ditampilkan pada gambar di atas. Dalam keadaan tertentu, properti berikut disediakan untuk kustomisasi gaya:

Header - HeaderStyle.
Langkah - StepStyle.
Navigasi - NavigationStyle, StartNextButtonStyle, StepNextButtonStyle, StepPreviousButtonStyle, FinishPreviousButtonStyle, FinishCompleteButtonStyle, CancelButtonStyle.
Bar samping - SideBarStyle, SideBarButtonStyle.

Mengkustomisasi Navigasi Bimbingan

Berikut adalah set langkah bimbingan, TWizard mendukung tiga cara navigasi diantaranya:

Bidirectional - Para pengguna dapat menjelajahi maju dan mundur sepanjang rangkaian langkah bimbingan. Input data pengguna biasanya dikumpulkan di langkah terakhir. Ini juga dikenal sebagai model commit-at-the-end. Itulah cara navigasi standar yang didukung TWizard.
Unidirectional - Para pengguna dapat menjelajahi maju sepanjang rangkaian langkah bimbingan. Pindah mundur tidak dibolehkan. Data input pengguna biasa dikumpulkan langkah demi langkah. Ini juga dikenal sebagai model command-as-you-go. Untuk melarang perpindahan mundur ke langkah tertentu, setel properti AllowReturn ke false.
Nonlinear - Input pengguna dalam langkah menentukan langkah mana berikutnya. Untuk melakukannya, setel ActiveStepIndex ke langkah yang anda ingin agar pengguna pergi ke sana. Dalam hal ini, ketika pengguna mengklik pada tombol sebelumnya alam panel navigasi, langkah sebelumnya yang telah mereka kunjungi (bukan langkah sebelumnya dalam urtan sekuensial) akan menjadi terlihat.

Menggunakan Template dalam Bimbingan

TWizard mendukung kontrol konkrit dari penampilannya melalui template. Dalam keadaan tertentu, ia menyediakan properti template yang membolehkan kustomisasi lengkap pada header, navigasi dan bar samping.

Header - HeaderTemplate.
Navigation - StartNavigationTemplate, StepNavigationTemplate, FinishNavigationTemplate.
Side bar - SideBarTemplate.

Menggunakan Langkah Bimbingan Bertemplate

Langkah bimbingan juga dapat diberi template. Dengan menggunakan TTemplatedWizardStep, seseorang dapat mengkustomisasi konten langkah dan navigasi melalui masing-masing properti ContentTemplate dan NavigationTemplate. Ini berguna untuk pengembang kontrol guna membangun bimbingan khusus seperti registrasi pengguna, kereta belanja, dll.