diff options
| author | kabayan <> | 2007-08-23 10:25:17 +0000 |
|---|---|---|
| committer | kabayan <> | 2007-08-23 10:25:17 +0000 |
| commit | e2f3b5fce11e0ced17f6a6df7c08a98cfa0fa540 (patch) | |
| tree | b0de1ae62fa4fb1403d9f6218fe09b714ef31ab7 /demos/quickstart/protected/pages/Controls | |
| parent | c4f8cbabdf91cd6a4a45ff879f1210217f6c9f8e (diff) | |
Indonesian QuickStart Controls without Samples
Diffstat (limited to 'demos/quickstart/protected/pages/Controls')
42 files changed, 1977 insertions, 0 deletions
diff --git a/demos/quickstart/protected/pages/Controls/id/Button.page b/demos/quickstart/protected/pages/Controls/id/Button.page new file mode 100644 index 00000000..dac3c9ca --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/Button.page @@ -0,0 +1,16 @@ +<com:TContent ID="body" >
+
+<h1 id="2001">TButton</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TButton" />
+
+<p id="240234" class="block-content">
+<tt>TButton</tt> membuat tombol klik pada halaman Web. judul tombol ditetapkan dengan properti <tt>Text</tt>. Tombol digunakan untuk mengirimkan data ke sebuah halaman. <tt>TButton</tt> memunculkan dua event sisi-server, <tt>OnClick</tt> dan <tt>OnCommand</tt>, ketika diklik pada sisi-klien. Perbedaan diantara event <tt>OnClick</tt> dan <tt>OnCommand</tt> adalah bahwa event kedua meneruskan ke leluhur kontrol tombol. Pengendali event <tt>OnCommand</tt> bisa menggunakan <tt>CommandName</tt> dan <tt>CommandParameter</tt> terkait dengan event guna melakukan aksi spesifik.
+</p>
+<p id="240235" class="block-content">
+Mengklik tombol dapat memicu formulir validasi, jika <tt>CausesValidation</tt> adalah true. Dan validasi mungkin dibatasi di dalam grup tertentu dari kontrol validator menurut <tt>ValidationGroup</tt>.
+</p>
+<com:RunBar PagePath="Controls.Samples.TButton.Home" />
+
+UNTUK DIKERJAKAN: atribut kustom
+
+<div class="last-modified">$Id: Button.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/CheckBox.page b/demos/quickstart/protected/pages/Controls/id/CheckBox.page new file mode 100644 index 00000000..06c12fa0 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/CheckBox.page @@ -0,0 +1,14 @@ +<com:TContent ID="body" >
+
+<h1 id="2101">TCheckBox</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TCheckBox" />
+
+<p id="250236" class="block-content">
+<tt>TCheckBox</tt> menampilkan kotak centang pada halaman Web. Judul bisa ditetapkan melalui <tt>Text</tt> dan ditampilkan disamping kotak centang. Ia bisa muncul baik di sisi kanan atau kiri kotak centang, yang ditentukan oleh <tt>TextAlign</tt>. Selanjutnya anda dapat menetapkan atribut yang diterapkan ke teks dengan menggunakan <tt>LabelAttributes</tt>.
+</p>
+<p id="250237" class="block-content">
+Untuk menentukan apakah kotak centang dicentang atau tidak, uji properti <tt>Checked</tt>. Event <tt>CheckedChanged</tt> dimunculkan jika kondisi <tt>Checked</tt> berubah diantara pengiriman ke server. Jika <tt>AutoPostBack</tt> adalah true, mengubah kotak centang akan menyebabkan aksi postback. Dan jika <tt>CausesValidation</tt> juga true, setelah postback validasi akan dilakukan bagi validator di dalam <tt>ValidationGroup</tt> yang ditetapkan.
+</p>
+<com:RunBar PagePath="Controls.Samples.TCheckBox.Home" />
+
+<div class="last-modified">$Id: CheckBox.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/ClientScript.page b/demos/quickstart/protected/pages/Controls/id/ClientScript.page new file mode 100644 index 00000000..7d2f7373 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/ClientScript.page @@ -0,0 +1,42 @@ +<com:TContent ID="body" > + +<h1 id="2201">TClientScript</h1> +<com:DocLink ClassPath="System.Web.UI.WebControls.TClientScript" /> +<h2 id="2202">Menyertakan Bundel Librari Javascript dalam Prado</h2> +<p id="260238" class="block-content"> +<tt>TClientScript</tt> membolehkan kode Javascript disisipkan atau di-link ke template halaman. PRADO dibundel dengan fungsionalitas librari besar Javascript termasuk efek, AJAX, pengendali event dasar, dan masih banyak lagi. Librari Javascript yang dibundel bisa di-link ke template halaman saat ini menggunakan properti <tt>PradoScripts</tt>. Multipel librari Javascript yang dibundel bisa ditetapkan menggunakan string nama librari Javascript dipisahkan koma untuk disertakan pada halaman. Contoh berikut akan menggunakan librari "ajax" dan "effects". +</p> +<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_260101"> +<com:TClientScript PradoScripts="ajax, effects" /> +</com:TTextHighlighter> + +<p id="260239" class="block-content"> + Bundel librari yang disertakan dalam Prado adalah</p> + <ul id="u1" class="block-content"> + <li><tt>prado</tt> : kerangka kerja javascript prado dasar berdasarkan Prototype</li> + <li><tt>effects</tt> : efek visual dari script.aculo.us</li> + <li><tt>ajax</tt> : terkait ajax dan callback berdasarkan Prototype</li> + <li><tt>validator</tt> : validasi</li> + <li><tt>logger</tt> : javascript pencatat dan browser obyek</li> + <li><tt>datepicker</tt> : datepicker</li> + <li><tt>colorpicker</tt> : colorpicker</li> + </ul> +<p id="260240" class="block-content"> +Banyak dari librari, seperti <tt>validator</tt> dan <tt>datepicker</tt> akan secara otomatis ketika kontrol yang menggunakan librari ini terlihat pada halaman. Sebagai contoh, semua <a href="?page=Controls.Validation">validator</a> +jika <tt>EnableClientScript</tt> disetel true akan menyertakan librari javascript <tt>prado</tt> dan <tt>validator</tt>. +Ketergantungan dari setiap librari secara otomatis dipecahkan. Yakni, menetapkan, katakanlah "ajax", juga akan menyertakan librari "prado".</p> + +<h2 id="2203">Menyertakan File Javascript Kustom</h2> +<p id="260241" class="block-content">File Javascript kustom dapat diregistrasi menggunakan properti <tt>ScriptUrl</tt>. Contoh berikut menyertakan file Javascript "test.js" ke halaman. Dalam hal ini, file "test.js" relatif ke template saat ini yang sedang anda gunakan. Karena nilai properti adalah +<a href="?page=Configurations.Templates3">tag asset dinamis</a>, file "test.js" akan dipublikasikan secara otomatis, yaitu file akan di-copy ke direktori asset bila perlu. +</p> +<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_260102"> +<com:TClientScript ScriptUrl=<%~ test.js %> /> +</com:TTextHighlighter> +<p id="260242" class="block-content">You can include Javascript files from other servers by specifying the full URL string in + the <tt>ScriptUrl</tt> property.</p> + +<h2 id="2204">Menyertakan Blok Kode Javascript Kustom</h2> +<p id="260243" class="block-content"> Setiap konten di dalam tag kontrol <tt>TClientScript</tt> akan dianggap sebagai kode Javascript dan akan disajikan di mana ia dideklarasikan.</p> + +<div class="last-modified">$Id: ClientScript.page 1846 2007-04-07 10:35:16Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/ClientScriptLoader.page b/demos/quickstart/protected/pages/Controls/id/ClientScriptLoader.page new file mode 100644 index 00000000..3458b234 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/ClientScriptLoader.page @@ -0,0 +1,94 @@ +<com:TContent ID="body" >
+
+<h1>TClientScriptLoader</h1>
+
+<com:DocLink ClassPath="System.Web.UI.WebControls.TClientScriptLoader" />
+
+<com:SinceVersion Version="3.1b" />
+
+<p class="block-content">
+<tt>TClientScriptLoader</tt> mempublikasikan koleksi file javascript sebagai assets. Contohnya, anggap kita mempunyai direktori bernama "<tt>mylib</tt>" dalam direktori <tt>protected/pages</tt> pada aplikasi kita.</p>
+<com:TTextHighlighter Language="prado" CssClass="source block-content">
+assets/
+protected/
+ pages/
+ mylib/
+ file1.js
+ file2.js
+ file3.js
+ file4.js
+ packages.php
+</com:TTextHighlighter>
+
+<p class="block-content">Properti <tt>PackagePath</tt> bisa berupa direktori asset yang sudah ada atau path namespace ke direktori yang berisi file javascript. Sebagai contoh, untuk mempublikasikan file javascript dalam direktori <tt>mylib</tt>, kita dapat menetapkan <tt>PackagePath</tt> sebagai berikut.
+Tag pertama <tt>TClientScriptLoader</tt> tergantung pada tag template asset dan menganggap bahwa template halaman berisi turunan tag <tt>TClientScriptLoader</tt> ada dalam direktori <tt>protected/pages</tt>.
+Tag kedua <tt>TClientScriptLoader</tt> menggunakan notasi namespace ke untuk menetapkan path.
+</p>
+
+<com:TTextHighlighter Language="prado" CssClass="source block-content">
+<com:TClientScriptLoader PackagePath=<%~ mylib %> />
+<com:TClientScriptLoader PackagePath="Application.pages.mylib" />
+</com:TTextHighlighter>
+
+<p class="block-content">
+Ketika file dalam <tt>PackagePath</tt> dipublikasikan sebagai asset, pengambil naskah file php "<tt>clientscripts.php</tt>" secara otomatis di-copiy ke direktori asset tersebut. Pengambil naskah, menggabungkan file javascript dan bertindak sebagai gzip jika memungkinkan.
+</p>
+<h2>Mengelompokan File Javascript</h2>
+<p class="block-content">
+Naskah yang dibolehkan dan naskah ketergantungan bisa dikelompokan dengan menggunakan file "<tt>packages.php</tt>" dengan format berikut. "<tt>packages.php</tt>" ini adalah opsional, jika tidak ada nama file tanpa ekstensi ".js" yang dipakai. "<tt>packages.php</tt>" harus berada dalam direktori yang diberikan oleh <tt>PackagePath</tt>.
+</p>
+
+<com:TTextHighlighter Language="php" CssClass="source block-content">
+<?php
+ $packages = array(
+ 'package1' => array('file1.js', 'file2.js'),
+ 'package2' => array('file3.js', 'file4.js'));
+
+ $deps = array(
+ 'package1' => array('package1'),
+ 'package2' => array('package1', 'package2')); //package2 memerlukan package1 pertama.
+
+ return array($packages,$deps); //harus mengembalikan $packages dan $deps dalam array ?>
+</com:TTextHighlighter>
+
+<p class="block-content">Elemen pertama dari array yang dihasilkan oleh <tt>packages.php</tt> harus berisi sebuah array file javascripts relatif ke <tt>packages.php</tt> yang mengaitkan pengelompokan tertentu. Sebagai contoh, dalam <tt>packages.php</tt> di atas, pengelompokan '<tt>package1</tt>' menggabungkan dua file javascript, yaitu '<tt>file1.js</tt>'
+dan '<tt>file2.js</tt>'.
+</p>
+
+<p class="block-content">Elemen kedua dari array yang dihasilkan oleh <tt>packages.php</tt> harus berisi array pengelompokan ketergantungan yang diurut dalam cara di mana grup harus digabungkan. Sebagai contoh, mengelompokan
+'<tt>package1</tt>' hanya bergantung pada file pengelompokan'<tt>package1</tt>'
+(misalnya '<tt>file1.js</tt>' dan '<tt>file2.js</tt>'). Sementara <tt>package2</tt>' tergantung pada pepngelompokan '<tt>package1</tt>' dam '<tt>package2</tt>'. Yakni '<tt>package2</tt>' akan menggabung dengan urutan
+'<tt>file1.js</tt>', '<tt>file2.js</tt>', '<tt>file3.js</tt>', dan '<tt>file4.js</tt>'.
+</p>
+
+<h2>Mengambil Paket Javascript</h2>
+
+<p class="block-content">Untuk mengambil file javascript atau paket tertentu, setel properti <tt>PackageScripts</tt> dengan nilai '<tt>package1</tt>' guna mengambil naskah '<tt>package1</tt>'. Maksimum 25 paket dipisahkan dengan koma yang dibolehkan. Ketergantungan paket secara otomatis dipecahkan oleh file php pengambil naskah.
+</p>
+
+<com:TTextHighlighter Language="prado" CssClass="source block-content">
+<com:TClientScriptLoader PackagePath=<%~ mylib %> PackageScripts="package2" />
+<script type="text/javascript">
+ //kode javascript memanfaatkan kode javascript yg diambil ke dalam 'package2' di atas </script>
+</com:TTextHighlighter>
+
+<p>Setiap <tt><com:TClientScriptLoader></tt> membuat elemen HTML <tt><script></tt> untuk mengambil file javascript yang diperlukan.</p>
+
+<h2>Menghapus Komentar Javascript</h2>
+<p class="block-content">Properti <tt>DebugMode</tt> bila false menghapus komentar dan spasi dari file javascript yang dipublikasikan. Jika properti
+<tt>DebugMode</tt> tidak disetel, mode debug ditentukan dari
+<a href="?page=Advanced.Performance">mode aplikasi</a>.
+</p>
+<div class="note"><b class="note">Catatan:</b>
+Jika <tt>DebugMode</tt> adalah false baik secara eksplisit ataupun ketika mode aplikasi adalah non-debug, maka header cache juga dikirimkan untuk memberitahu
+browser dan proxy untuk melakukan cache file.
+Lebih lanjut, pasca proses (komentar dihapus dan di-zip) disimpan dalam direktori asset untuk permintaan berikutnya. Yaitu mode non-debug, naskah di-cache dalam direktori asset sampai ia dihapus.
+</div>
+
+<h2>Memadatkan Javascript dengan GZip</h2>
+<p class="block-content">
+Properti <tt>EnableGzip</tt> (standarnya true) membolehkan javascripts yang dipublikasikan untuk dilayani sebagai zipped jika browser dan server php mengijinkannya.
+</p>
+<div class="last-modified">$Id: ClientScript.page 1650 2007-01-24 06:55:32Z wei $</div>
+
+</com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/ColorPicker.page b/demos/quickstart/protected/pages/Controls/id/ColorPicker.page new file mode 100644 index 00000000..00b34e6e --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/ColorPicker.page @@ -0,0 +1,10 @@ +<com:TContent ID="body" >
+
+<h1 id="2201">TColorPicker</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TColorPicker" />
+
+<p id="270244" class="block-content">
+TBD
+</p>
+
+<div class="last-modified">$Id: ColorPicker.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/Data.page b/demos/quickstart/protected/pages/Controls/id/Data.page new file mode 100644 index 00000000..9a4098a5 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/Data.page @@ -0,0 +1,19 @@ +<com:TContent ID="body" >
+
+<h1 id="5001">Kontrol Data</h1>
+
+<ul id="u1" class="block-content">
+ <li>
+ <a href="?page=Controls.DataList">TDataList</a> dipakai untuk menampilkan atau memodifikasi daftar dari item data.
+ </li>
+
+ <li>
+ <a href="?page=Controls.DataGrid">TDataGrid</a> menampilkan data dalam format tabel dengan baris serta kolom.
+ </li>
+
+ <li>
+ <a href="?page=Controls.Repeater">TRepeater</a> menampilkan kontennya yang didefinisikan dalam template secara berulang berdasarkan pada data yang berikan.
+ </li>
+</ul>
+
+<div class="last-modified">$Id: Data.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/DataGrid.page b/demos/quickstart/protected/pages/Controls/id/DataGrid.page new file mode 100644 index 00000000..e668a45c --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/DataGrid.page @@ -0,0 +1,185 @@ +<com:TContent ID="body" >
+
+<h1 id="5201">TDataGrid</h1>
+
+<p id="590373" class="block-content">
+TDatagrid adalah kontrol penting dalam membangun aplikasi Web yang kompleks. Ia menampilkan data dalam format tabular dengan baris (juga disebut item) dan kolom. Baris dibuat dengan sel, sementara kolom mengatur bagaimana sel harus ditampilkan berdasarkan kaitannya dengan kolom. Data yang ditetapkan melalui <tt>DataSource</tt> atau <tt>DataSourceID</tt> terikat pada baris dan mengisi kontek ke sel.
+</p>
+<p id="590374" class="block-content">
+TDataGrid sangat interaktif. Para pengguna dapat mengurut data sepanjang kolom yang ditetapkan, mengendalikannya melalui halaman data yang berbeda, dan melakukan aksi, seperti mengedit dan menghapus, pada baris data.
+</p>
+<p id="590375" class="block-content">
+Baris TDataGrid dapat diakses melalui properti <tt>Items</tt>. Baris (item) bisa berupa salah satu dari beberapa mode: browse, mengedit dab memilih, yang mempengaruhi bagaimana sel dalam bariis ditampilkan. Untuk mengubah mode item, modifikasi <tt>EditItemIndex</tt> atau <tt>SelectedItemIndex</tt>. Catatan, jika item dalam mode edit, maka memilih item ini tidak terpengaruh.
+</p>
+
+<h2 id="5202">Kolom</h2>
+<p id="590376" class="block-content">
+Kolom pada data grid menentukan bagaimana sel terkait ditampilkan. Sebagai contoh, sel yang dikaitkan dengan <tt>TBoundColumn</tt> ditampilkan secara berbeda tergantung dari modenya. Sebuah sel ditampilkan sebagai teks statis jika sel dalam mode browse, kotak teks jika dalam mode edit, dan seterusnya.
+</p>
+<p id="590377" class="block-content">
+PRADO menyediakan lima tipe kolom:
+</p>
+<ul id="u1" class="block-content">
+ <li><tt>TBoundColumn</tt> menghubungkan sel dengan field data dan menampilkan sel berdasarkan modenya.</li>
+ <li><tt>TLiteralColumn</tt> menghubungkan sel dengan field data spesifik dan menampilkan sel dengan teks statis.</li>
+ <li><tt>TCheckBoxColumn</tt> menghubungkan sel dengan field data spesifik dan menampilkan kotak centang dalam setiap sel yang kondisi centangnya ditentukan oleh nilai field data.</li>
+ <li><tt>TDropDownListColumn</tt> menghubungkan sel dengan field data spesifik dan menampilkan sel berdasarkan modenya. Jika dalam mode edit, sel akan ditampilkan dengan <tt>TDropDownList</tt>.</li>
+ <li><tt>THyperLinkColumn</tt> menampilkan hiperlink dalam sel yang URL dan judulnya bisa berupa secara statis ditetapkan atau terikat ke beberapa field data.</li>
+ <li><tt>TEditCommandColumn</tt> menampilkan tombol perintah edit/update/cancel dalam sel untuk menyatakan item yang berada di dalamnya.</li>
+ <li><tt>TButtonColumn</tt> menampilkan tombol perintah dalam sel.</li>
+ <li><tt>TTemplateColumn</tt> menampilkan sel berdasarkan pada template berbeda yang didefinisikan untuknya.</li>
+</ul>
+
+<h2 id="5203">Gaya Item</h2>
+<p id="590378" class="block-content">
+TDataGrid mendefinisikan gaya yang diterapkan pada itemnya. Sebagai contoh, <tt>AlternatingItemStyle</tt> diterapkan untuk mengganti item (item 2, 4, 6, dll.) Melalui properti ini, seseorang dapat menyetel field gaya CSS atau kelas CSS untuk item-item tersebut.
+</p>
+<p id="590379" class="block-content">
+Gaya item diterapkan dalam cara hirarkis. Gaya dalam hirarki lebih tinggi akan diturunkan dari gaya dalam hirarki lebih rendah. Mulai dari hirarki terendah, gaya item termasuk gaya item itu sendiri, <tt>ItemStyle</tt>, <tt>AlternatingItemStyle</tt>, <tt>SelectedItemStyle</tt>, dan <tt>EditItemStyle</tt>. Oleh karena itu, jika warna latar belakang disetel merah dalam <tt>ItemStyle</tt>, <tt>EditItemStyle</tt> juga akan memiliki warna latar belakang merah, kecuali dinyatakan secara eksplisit ke nilai yang berbeda.
+</p>
+
+<h2 id="5204">Event</h2>
+<p id="590380" class="block-content">
+TDataGrid menyediakan beberapa event untuk menjembatani manipulasi item datanya,
+</p>
+<ul id="u2" class="block-content">
+ <li><tt>OnItemCreated</tt> - muncul setiap kali item baru saja dibuat. Ketika event muncul, data dan kontrol anak keduanya tersedia bagi item baru.</li>
+ <li><tt>OnItemDataBound</tt> - muncul setiap kali item selesai menyatukan data. Ketika event muncul, data dan kontrol anak keduanya tersedia untuk item, dan item telah selesai menyatukan data dari dirinya sendiri dan seluruh kontrol anaknya.</li>
+ <li><tt>OnItemCommand</tt> - muncul ketika kontrol anak pada beberapa item (seperti <tt>TButton</tt>) memunculkan event <tt>OnCommand</tt>.</li>
+ <li>command events - muncul saat event kontrol anak <tt>OnCommand</tt> mempunyai nama perintah spesifik,
+ <ul>
+ <li><tt>OnSelectedIndexChanged</tt> - jika nama perintah adalah <tt>select</tt>.</li>
+ <li><tt>OnEditCommand</tt> - jika nama perintah adalah <tt>edit</tt>.</li>
+ <li><tt>OnDeleteCommand</tt> - jika nama perintah adalah <tt>delete</tt>.</li>
+ <li><tt>OnUpdateCommand</tt> - jika nama perintah adalah <tt>update</tt>.</li>
+ <li><tt>OnCancelCommand</tt> - jika nama perintah adalah <tt>cancel</tt>.</li>
+ <li><tt>OnSortCommand</tt> - jika nama perintah adalah <tt>sort</tt>.</li>
+ <li><tt>OnPageIndexChanged</tt> - jika nama perintah adalah <tt>page</tt>.</li>
+ </ul>
+ </li>
+</ul>
+
+<h2 id="5205">Menggunakan TDataGrid</h2>
+
+<h3 id="5210">Kolom yang Dibuat Secara Otomatis</h3>
+<p id="590381" class="block-content">
+TDataGrid standarnya akan membuat sebuah daftar kolom berdasarkan struktur data terikat. TDataGrid akan membaca baris pertama data, menguraikan nama field dari baris, dan mengkonstruksi kolom untuks setiap field. Setiap field adalah tipe <tt>TBoundColumn</tt>.
+</p>
+<p id="590382" class="block-content">
+Contoh berikut menampilkan daftar informasi produk komputer menggunakan TDataGrid. Kolom secara otomatis dibuat. Perhatikan bagaimana gaya item ditetapkan dan diturunkan. Data dipopulasi ke dalam datagrid menggunakan kode berikut yang umum diantara kebanyakan aplikasi datagrid,
+</p>
+<com:TTextHighlighter Language="php" CssClass="source block-content" id="code_590121">
+public function onLoad($param) {
+ parent::onLoad($param);
+ if(!$this->IsPostBack) {
+ $this->DataGrid->DataSource=$this->Data;
+ $this->DataGrid->dataBind();
+ }
+}
+</com:TTextHighlighter>
+<com:RunBar PagePath="Controls.Samples.TDataGrid.Sample1" />
+
+<h3 id="5211">Kolom Ditetapkan secara Manual</h3>
+<p id="590383" class="block-content">
+Menggunakan kolom yang dibuat secara otomatis memberikan cara cepat melihat data tabular. Dalam aplikasi sebenarnya, kolom yang dibuat secara otomatis sering tidak mencukupi karena para pengembang tidak memiliki cara mengkustomisasi penampilannya. Kolom yang dibuat secara manual jauh lebih diinginkan.
+</p>
+<p id="590384" class="block-content">
+Untuk menetapkan kolom secara manual, setel <tt>AutoGenerateColumns</tt> ke false, dan tetapkan kolom dalam template seperti berikut,
+</p>
+<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_590122">
+<com:TDataGrid ...>
+ <com:TBoundColumn DataField="name" .../>
+ <com:TBoundColumn DataField="price" .../>
+ <com:TEditCommandColumn ...>
+ ...
+</com:TDataGrid>
+</com:TTextHighlighter>
+<p id="590385" class="block-content">
+Catatan, jika <tt>AutoGenerateColumns</tt> adalah true dan di sana ditetapkan kolom secara manual, kolom yang dibuat secara otomatis akan diterapkan ke kolom yang ditetapkan secara manual. Catat juga, properti <tt>Columns</tt> datagrid hanya berisi kolom yang ditetapkan secara manual dan bukan yang secara otomatis dibuat.
+</p>
+<p id="590386" class="block-content">
+Contoh berikut menggunakan kolom yang ditetapkan secara manual untuk memperlihatkan daftar informasi buku,
+</p>
+<ul id="u4" class="block-content">
+ <li>Book title - ditampilkan sebagai hiperlink mengarah ke halaman buku amazon.com terkait. <tt>THyperLinkColumn</tt> dipakai.</li>
+ <li>Publisher - ditampilkan sebagai bagian teks menggunakan <tt>TBoundColumn</tt>.</li>
+ <li>Price - ditampilkan sebagai bagian teks menggunakan <tt>TBoundColumn</tt> dengan output berformat string dan gaya dikustomisasi.</li>
+ <li>In-stock or not - ditampilkan sebagai kotak centang menggunakan <tt>TCheckBoxColumn</tt>.</li>
+ <li>Rating - ditampilkan sebagai gambar menggunakan <tt>TTemplateColumn</tt> yang membolehkan kebebasan maksimum dalam menetapkan konten sel.</li>
+</ul>
+<p id="590387" class="block-content">Perhatikan bagaimana gaya item (baris) dan kolom bekerja sama untuk mempengaruhi penampilan sel dalam datagrid.</p>
+<com:RunBar PagePath="Controls.Samples.TDataGrid.Sample2" />
+
+
+<h2 id="5206">Berinteraksi dengan TDataGrid</h2>
+<p id="590388" class="block-content">
+Selain kaya fungsionalitas penyajian data seperti didemonstrasikan dalam bagian sebelumnya, TDataGrid juga sangat interaktif bagi pengguna. Pemakaian impor TDataGrid adalah mengedit atau menghapus baris data. <tt>TBoundColumn</tt> dapat menyesuaikan penyajian sel terkait berdasarkan mode item datagrid. Ketika item dalam mode browse, sel ditampilkan dengan teks statis; ketika item ditampilkan dalam mode edit, kotak teks ditampilkan untuk menampung input pengguna. TDataGrid menyediakan <tt>TEditCommandColumn</tt> untuk mengalihkan mode item. Sebagai tambahan, <tt>TButtonColumn</tt> menawarkan kepada para pengembang fleksibilitas dari pembuatan tombol bebas untuk berbagai interaksi pengguna.
+</p>
+<p id="590389" class="block-content">
+Contoh berikut memperlihatkan bagaimana untuk membuat tabel informasi buku sebelumnya menjadi interaktif. Ia membolehkan pengguna untuk mengedit dan menghapus item buku dari tabel. Dua kolom tambahan dipakai dalam contoh untuk membolehkan interaksi para penggunak dengan datagrid: <tt>TEditCommandColumn</tt> dan <tt>TButtonColumn</tt>. Sebagai tambahan,
+<tt>TDropDownListColumn</tt> mengganti <tt>TTemplateColumn</tt> sebelumnya untuk membolehkan pengguna memilih peringkat dari daftar dropdown. Catatan, Ini juga memungkinkan untuk menggunakan <tt>TTemplateColumn</tt> guna menyelesaikan tugas yang sama.
+</p>
+<com:RunBar PagePath="Controls.Samples.TDataGrid.Sample3" />
+
+<h2 id="5207">Pengurutan</h2>
+<p id="590390" class="block-content">
+TDataGrid mendukung pengurutan itemnya yang terkait dengan kolom tertentu. Untuk menghidupkan pengurutan, setel <tt>AllowSorting</tt> ke true. Ini akan mengubah header kolom menjadi tombol yang bisa diklik jika properti <tt>SortExpression</tt> tidak kosong. Ketika para pengguna mengklik pada tombol header, event <tt>OnSortCommand</tt> akan dimunculkan. Para pengembang dapat menulis pengendali guna merespon perintah pengurutan dan mengurut data berdasarkan <tt>SortExpression</tt> yang ditetapkan dalam kolom terkait.
+</p>
+<p id="590391" class="block-content">
+Contoh berikut mengubah datagrid dalam <a href="?page=Controls.Samples.TDataGrid.Sample2">Contoh 2</a> menjadi yang bisa diurutkan. Para pengguna dapat mengklik pada tombol link yang ditampilkan dalam setiap kolom, dan data akan diurut dalam urutan membesar sepanjang kolom tersebut.
+</p>
+<com:RunBar PagePath="Controls.Samples.TDataGrid.Sample4" />
+
+<h2 id="5208">Lembaran</h2>
+<p id="590392" class="block-content">
+Ketika berhadapan dengan dataset besar, lembaran sangat membantu dalam mengurangi ukuran halaman dan kompleksitasnya. TDataGrid disertai lembaran yang membolehkan para pengguna menetapkan di halaman mana data ingin mereka lihat. Lembaran bisa dikustomisasi melalui <tt>PagerStyle</tt>. Sebagai contoh, <tt>PagerStyle.Visible</tt> menentukan apakah lembaran terlihat atau tidak; <tt>PagerStyle.Position</tt> menunjukan di mana lembaran ditampilkan; dan <tt>PagerStyle.Mode</tt> menetapkan tipe lembaran apa yang ditampilkan, numerik atau kata berikutnya-sebelumnya.
+</p>
+<p id="590393" class="block-content">
+Untuk menghidupkan lembaran, setel <tt>AllowPaging</tt> ke true. Jumlah baris data yang ditampilkan dalam halaman ditetapkan oleh <tt>PageSize</tt>, sementara indeks (berbasis-nol) pada halaman yang saat ini terlihat bagi para pengguna adalah dengan <tt>CurrentPageIndex</tt>. Ketika para pengguna mengklik pada tombol lembar, TDataGrid memunculkan event <tt>OnPageIndexChanged</tt>. Biasanya, pengendali event ditulis seperti berikut,
+</p>
+<com:TTextHighlighter CssClass="source block-content" id="code_590123">
+public function pageIndexChanged($sender,$param) {
+ $this->DataGrid->CurrentPageIndex=$param->NewPageIndex;
+ $this->DataGrid->DataSource=$this->Data;
+ $this->DataGrid->dataBind();
+}
+</com:TTextHighlighter>
+<p id="590394" class="block-content">
+Contoh berikut menghidupkan fungsionalitas lembar dari datagrid yang ditampilkan dalam <a href="?page=Controls.Samples.TDataGrid.Sample1">Contoh 1</a>. Dalam contoh ini, anda dapat menyetel berbagai gaya lembar secara interaktif untuk melihat bagaimana pengaruh tampilan lembar halaman.
+</p>
+<com:RunBar PagePath="Controls.Samples.TDataGrid.Sample5" />
+
+<h3 id="5212">Lembar Kustom</h3>
+<p id="590395" class="block-content">
+Fungsionalitas lembar halaman yang ditampilkan di atas memerlukan pengambilan seluruh data ke dalam memori, meskipun hanya sebagian darinya ditampilkan dalam sebuah halaman. Untuk dataset besar, ini tidak efisien dan mungkin tidak selalu layak. TDataGrid menyediakan lembar kustom untuk memecahkan masalah ini. Lembar kustom hanya memerlukan sebagian data untuk ditampilkan kepada pengguna akhir.
+</p>
+<p id="590396" class="block-content">
+Untuk menghidupkan lembat kustom, setel <tt>AllowPaging</tt> dan <tt>AllowCustomPaging</tt> ke true. Beritahu TDataGrid jumlah item data (baris) yang tersedia dengan menyetel <tt>VirtualItemCount</tt>. Dan merespon ke event <tt>OnPageIndexChanged</tt>. Dalam pengendali event, gunakan properti <tt>NewPageIndex</tt> atas parameter event untuk megnambil lembar baru data dari sumber data. Untuk MySQL database, ini bisa dikerjakan dengan menggunakan klausul <tt>LIMIT</tt> dalam pernyataan SQL select.
+</p>
+<com:RunBar PagePath="Controls.Samples.TDataGrid.Sample6" />
+
+<h2 id="5209">Memperluas TDataGrid</h2>
+<p id="590397" class="block-content">
+Selain turunan kelas tradisional, kemampuan diperluas TDataGrid dikembangkan terutama melalui komponen kolom datagrid. Sebagai contoh, seseorang mungkin ingin menampilkan sebuah kolom bergambar. Dia dapat menggunakan <tt>TTemplateColumn</tt> untuk menyelesaikan tugas ini. Solusi yang lebih baik adalah mengembangkan komponen kolom gambar pekerjaan tersebut bisa dipakai ulang dengan mudah dalam proyek lain.
+</p>
+<p id="590398" class="block-content">
+Semua komponen kolom datagrid harus diturunkan dari <tt>TDataGridColumn</tt>. Metode utama yang perlu diganti adalah <tt>initializeCell()</tt> yang membuat konten untuk sel dalam kolom terkait. Karena setiap sel juga dalam sebuah item (baris) dan item dapat memiliki tipe berbeda (seperti <tt>Header</tt>, <tt>AltneratingItem</tt>, dll.), konten berbeda bisa dibuat berdasarkan tipe item. Untuk contoh kolom gambar, seseorang dapat membuat kontrol <tt>TImage</tt> di dalam sel dalam item dari tipe <tt>Item</tt> dan <tt>AlterantingItem</tt>.
+</p>
+<com:TTextHighlighter CssClass="source block-content" id="code_590124">
+class ImageColumn extends TDataGridColumn {
+ ...
+ public function initializeCell($cell,$columnIndex,$itemType) {
+ parent::initializeCell($cell,$columnIndex,$itemType);
+ if($itemType==='Item' || $itemType==='AlternatingItem') {
+ $image=new TImage;
+ // ... kustomisasi gambar
+ $cell->Controls[]=$image;
+ }
+ }
+}
+</com:TTextHighlighter>
+<p id="590399" class="block-content">
+Dalam <tt>initializeCell()</tt>, jangan lupa untuk memanggil implementasi leluhur, karena ia menginisialisasi sel dalam item dari tipe <tt>Header</tt> dan <tt>Footer</tt>.
+</p>
+
+<div class="last-modified">$Id: DataGrid.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/DataList.page b/demos/quickstart/protected/pages/Controls/id/DataList.page new file mode 100644 index 00000000..8b6f8737 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/DataList.page @@ -0,0 +1,113 @@ +<com:TContent ID="body" >
+
+<h1 id="5101">TDataList</h1>
+<p id="580362" class="block-content">
+TDataList mewakili ikatan data dan kontrol list yang bisa dimutakhirkan. Seperti <tt>TRepeater</tt>, TDataList menampilkan kontennya secara berulang berdasarkan data yang diambil dari <tt>DataSource</tt>. Kontek yang diulang dalam TDataList disebut item, yang adalah kontrol dan bisa diakses melalui <tt>Items</tt>. Ketika <tt>dataBind()</tt> dipanggil, TDataList membuat sebuah item untuk setiap baris data dan mengikat baris data ke item. Secara opsional, TDataList dapat mempunyai header, footer dan/atau pemisah antara item.
+</p>
+
+<p id="580363" class="block-content">
+TDataList berbeda dari TRepeater yakni memperkenalkan konsep kondisi item dan membolehkan menerapkan gaya berbeda ke item dalam kondisi berbeda. Sebagai tambahan, TDataList mendukung pengotakan item berulang dalam berbagai cara.
+</p>
+
+<p id="580364" class="block-content">
+Tata letak dari konten yang diulang dalam TDataList ditetapkan dengan template inline. Item TDataList, header, footer, dll. diturunkan dengan template terkait saat data sedang diikat ke pengulang.
+</p>
+
+<p id="580365" class="block-content">
+Sejak v3.1.0, tata letak juga dapat berupa penyaji. Penyaji adalah kelas kontrol yang dapat diturunkan sebagai item datalist, header, dll. Penyaji dapat dilihat sebagai template eksternal (sebenarnya, ia juga merupakan kontrol tanpa-template). Untuk lebih jelasnya, lihat penjelasan mengenai penyaji dalam <a href="?page=Controls.Repeater">Tutorial TRepeater</a>.
+</p>
+
+<p id="580366" class="block-content">
+Properti berikut dipakai untuk menetapkan tipe template dan penyaji datalist. Jika tipe konten didefinisikan dengan template dan penyaji, maka penyaji diambil lebih dulu.
+</p>
+
+<ul id="u5" class="block-content">
+<li><tt>ItemTemplate</tt>, <tt>ItemRenderer</tt>: untuk setiap baris data yang diulang</li>
+<li><tt>AlternatingItemTemplate</tt>, <tt>AlternatingItemRenderer</tt>: untuk setiap pergantian baris data. Jika tidak disetel, <tt>ItemTemplate</tt> atau <tt>ItemRenderer</tt> yang akan dipakai.</li>
+<li><tt>HeaderTemplate</tt>, <tt>HeaderRenderer</tt>: untuk header datalist.</li>
+<li><tt>FooterTemplate</tt>, <tt>FooterRenderer</tt>: untuk footer datalist.</li>
+<li><tt>SeparatorTemplate</tt>, <tt>SeparatorRenderer</tt>: untuk konten yang ditampilkan diantara item.</li>
+<li><tt>EmptyTemplate</tt>, <tt>EmptyRenderer</tt>: dipakai saat data yang terikat ke datalist kosong.</li>
+<li><tt>EditItemTemplate</tt>, <tt>EditItemRenderer</tt>: untuk baris yang sedang diedit.</li>
+<li><tt>SelectedItemTemplate</tt>, <tt>SelectedItemRenderer</tt>: untuk baris yang sedang dipilih.</li>
+</ul>
+
+<p id="580367" class="block-content">
+Ketika <tt>dataBind()</tt> dipanggil, TDataList menjalani masa hidup seperti berikut untuk setiap baris data:
+</p>
+
+<ol id="u6" class="block-content">
+<li>buat item berdasarkan template atau penyaji</li>
+<li>setel baris data ke item</li>
+<li>munculkan event <tt>OnItemCreated</tt></li>
+<li>tambah item sebagai kontrol anak</li>
+<li>panggil <tt>dataBind()</tt> pada item</li>
+<li>munculkan event <tt>OnItemDataBound</tt></li>
+</ol>
+
+<p id="580368" class="block-content">
+TDataList memunculkan <tt>OnItemCommand</tt> kapan saja kontrol tombol di dalam beberapa item datalist memunculkan event <tt>OnCommand</tt>. Oleh karena itu, anda bisa menangani semua event <tt>OnCommand</tt> di satu tempat dengan menulis pengendali event untuk event <tt>OnItemCommand</tt>. Event tambahan dimunculkan jika event <tt>OnCommand</tt> memiliki salah satu dari nama perintah berikut (tidak sensitif-huruf):
+</p>
+
+<ul id="u7" class="block-content">
+<li><tt>edit</tt> - pengguna ingin mengedit item. Event <tt>OnEditCommand</tt> akan dimunculkan.</li>
+<li><tt>update</tt> - pengguna ingin menyimpan perubahan terhadap item. Event <tt>OnUpdateCommand</tt> akan dimunculkan.</li>
+<li><tt>select</tt> - pengguna memilih item. Event <tt>OnSelectedIndexChanged</tt> akan dimunculkan.</li>
+<li><tt>delete</tt> - pengguna menghapus item. Event <tt>OnDeleteCommand</tt> akan dimunculkan.</li>
+<li><tt>cancel</tt> - pengguna membatalkan aksi pengeditan sebelumnya. Event <tt>OnCancelCommand</tt> akan dimunculkan.</li>
+</ul>
+
+<p id="580369" class="block-content">
+TDataList menyediakan beberapa properti untuk mendukung pengotakan item. Jumlah kolom yang digunakan untuk menampilkan item data dietapkan melalui properti <tt>RepeatColumns</tt>, sementara <tt>RepeatDirection</tt> mengatur urutan item yang sedang disajikan. Tata letak item data dalam daftar ditetapkan melalui <tt>RepeatLayout</tt>, yang mengambil salah satu dari nilai berikut:
+</p>
+
+<ul id="u8" class="block-content">
+<li><tt>Table</tt> (default) - item diatur menggunakan tabel HTML dan sel. Ketika menggunakan tata letak ini, seseorang dapat menyetel <tt>CellPadding</tt> dan <tt>CellSpacing</tt> untuk menyesuaikan cellpadding dan cellspacing pada tabel, dan <tt>Caption</tt> serta <tt>CaptionAlign</tt> untuk menambahkan judul tabel dengan penjajaran yang ditetapkan.</li>
+<li><tt>Flow</tt> - item diatur menggunakan span dan break HTML.</li>
+<li><tt>Raw</tt> - TDataList tidak membuat tag HTML apapun untuk melakukan kotak-kotak.</li>
+</ul>
+
+<p id="580370" class="block-content">
+Item dalam TDataList dapat berupa salah satu dari tiga keadaan: sedang dilihat, sedang diedit dan sedang dipilih. Untuk mengubah keadaan item tertentu, setel <tt>SelectedItemIndex</tt> atau <tt>EditItemIndex</tt>. Former akan mengubah item yang ditunjuk ke mode yang dipilih, yang akan menyebabkan item menggunakan <tt>SelectedItemTemplate</tt> atau <tt>SelectedItemRenderer</tt> dalam penyajiannya. Yang terakhir akan mengubah item yang ditunjuk ke mode edit dan menggunakan template atau penyaji terkait. Catatan, jika sebuah item dalam mode edit, maka memilih item ini tidak akan berpengaruh.
+</p>
+
+<p id="580371" class="block-content">
+Gaya berbeda dapat diterapkan ke item dalam status yang berbeda. Gaya aplikasi dilakukan dalam cara hirarkis: Gaya dalam hirarki lebih tinggi akan diturunkan dari hirarki lebih rendah. Dimulai dari hirarki paling rendah, gaya item termasuk:
+</p>
+
+<ul id="u9" class="block-content">
+<li>gaya item sendiri</li>
+<li><tt>ItemStyle</tt></li>
+<li><tt>AlternatingItemStyle</tt></li>
+<li><tt>SelectedItemStyle</tt></li>
+<li><tt>EditItemStyle</tt></li>
+</ul>
+
+<p id="580372" class="block-content">
+Oleh karena itu, jika warna latar belakang disetel sebagai merah dalam <tt>ItemStyle</tt>, <tt>EditItemStyle</tt> juga akan mempunyai warna latar belakang merah keciali ia disetel ke nilai berbeda secara eksplisit.
+</p>
+
+<p id="580373" class="block-content">
+Ketika halaman yang berisi datalist adalah post back, datalist akan mengembalikan secara otomatis seluruh kontennya, termasuk item, header, footer dan pemisah. Akan tetapi, baris data terkait dengan setiap item tidak akan ditemukan kembali dan menjadi null. Untuk mengakses data, gunakan salah satu cara berikut:
+</p>
+
+<ul id="u10" class="block-content">
+<li>Gunakan <tt>DataKeys</tt> untuk memperoleh kunci data terkait dengan item pengulang (repeater) yang ditetapkan dan gunakan kunci untuk mengambil data terkait dari beberapa penyimpanan persisten seperti misalnya DB. </li>
+<li>Simpan seluruh dataset dalam kondisi tampilan, yang akan mengembalikan dataset secara otomatis setelah postback. Bagaimanapun juga, harap berhati-hati jika ukuran dataset anda besar, ukuran halaman akan menjadi besar. Beberapa data kompleks mungkin juga mempunyai masalah serialisasi jika disimpan dalam kondisi tampilan.</li>
+</ul>
+<p id="580374" class="block-content">
+Contoh berikut memperlihatkan bagaimana menggunakan TDataList guna menampilkan data tabular, dengan tata letak dan gaya yang berbeda.
+</p>
+<com:RunBar PagePath="Controls.Samples.TDataList.Sample1" />
+<p id="580375" class="block-content">
+Pemakaian umum dari TDataList adalah untuk memanipulasi data tabular, termasuk melihat, mengedit, meghapus item data. Ini dihidupkan dengan event perintah dan berbagai template item pada TDataList.
+</p>
+<p id="580376" class="block-content">
+Contoh berikut menampilkan informasi produk komputer. Para pengguna dapat menambah produk baru, memodifikasi atau menghapus produk yang sudah ada. Agar bisa mencari item data untuk pemutakhiran atau penghapusan, properti <tt>DataKeys</tt> yang digunakan.
+</p>
+<p id="580377" class="block-content">
+Harap berhati-hati, untuk kemudahan, aplikasi ini tidak melakukan validasi input apapun. Dalam aplikasi sebenarnya, pastikan input divalidasi sebelum menyimpannya ke dalam database.
+</p>
+<com:RunBar PagePath="Controls.Samples.TDataList.Sample2" />
+
+<div class="last-modified">$Id: DataList.page 1687 2007-02-09 21:34:53Z xue $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/DatePicker.page b/demos/quickstart/protected/pages/Controls/id/DatePicker.page new file mode 100644 index 00000000..e93300c6 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/DatePicker.page @@ -0,0 +1,64 @@ +<com:TContent ID="body" >
+
+<h1 id="2301">TDatePicker</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TDatePicker" />
+
+<p id="280245" class="block-content"><tt>TDatePicker</tt> menampilkan kotak teks untuk keperluan input tanggal.
+Ketika kotak teks menerima fokus, kalender akan muncul dan pengguna dapat mengambil tanggal darinya yang akan secara otomatis dimasukan ke dalam kotak teks. Format tanggal string yang ditampilkan dalam kotak teks ditentukan oleh properti <tt>DateFormat</tt>. Format yang benar adalah kombinasi dari token berikut:
+
+<com:TTextHighlighter Language="text" CssClass="source block-content" id="code_280103">
+Karakter Pola Format (en-US)
+---------------------------------------------------------------------
+ d digit hari
+ dd digit hari diisi misalnya 01, 02
+ M digit bulan
+ MM digit bulan diisi
+ MMM singkatan nama bulan yang dilokalisasi, misalnya Mar, Apr
+ MMMM nama bulan yang dilokalisasi, misalnya March, April
+ yy 2 digit tahun
+ yyyy 4 digit tahun
+---------------------------------------------------------------------
+</com:TTextHighlighter>
+
+<p id="280246" class="block-content">
+Tanggal pada pengambil tanggal bisa disetel menggunakan properti <tt>Date</tt> atau <tt>Timestamp</tt>. Nilai properti <tt>Date</tt> harus dalam format yang sama seperti pola yang ditetapkan dalam properti <tt>DateFormat</tt>. Properti <tt>Timestamp</tt> hanya menerima integer seperti cap waktu Unix.
+</p>
+
+<p id="280247" class="block-content">
+TDatePicker mempunyai tiga <tt>Mode</tt> untuk menampilkan tampilan pengambil tanggal.</p>
+ <ul id="u1" class="block-content">
+ <li><tt>Basic</tt> - Hanya menampilkan input teks, memfokuskan pada input menampilkan pengambil tanggal.</li>
+ <li><tt>Button</tt> - Menampilkan tombol disebelah input teks, mengklik pada tombol tampilkan tanggal, teks tombol dapat diubah dengan properti <tt>ButtonText</tt>.</li>
+ <li><tt>ImageButton</tt> - Menampilkan gambar di sebelah input teks, mengklik pada gambar pengambil tanggal, sumber gambar bisa diubah melalui properti <tt>ImageUrl</tt>.</li>
+ </ul>
+
+<p id="280248" class="block-content">Properti <tt>CssClass</tt> dapat dipakai untuk mengganti nama kelas CSS untuk panel pengambil tanggal. Properti <tt>CalendarStyle</tt> mengubah gaya kalender secara keseluruhan.
+Nilai <tt>CalendarStyle</tt> berikut tersedia:</p>
+ <ul id="u2" class="block-content">
+ <li><tt>default</tt> - gaya standar kalender.</li>
+ </ul>
+
+<p id="280249" class="block-content">Properti <tt>InputMode</tt> bisa disetel ke "TextBox" atau "DropDownList" dengan standar sebagai "TextBox". Dalam mode <tt>DropDownList</tt>, sebagai tambahan pada tampilan pengambil tanggal, tiga daftar drop down (hari, bulan dan tahun) disajikan untuk memilih tanggal.
+Ketika <tt>InputMode</tt> sama dengan "DropDownList", urutan dan penampilan tanggal, bulan, dan tahun akan bergantung pada pola yang ditetapkan dalam properti <tt>DateFormat</tt>.
+</p>
+
+<p id="280250" class="block-content">Tampilan pengambil tanggal dapat disembunyikan dengan menetapkan <tt>ShowCalendar</tt> ke false. Banyak teks pada tampilan pengambil tanggal dapat diubah ke bahasa berbeda menggunakan properti <tt>Culture</tt>.
+</p>
+
+<p id="280251" class="block-content">Batas tahun pengambil kalender dapat disetel menggunakan properti <tt>FromYear</tt> dan <tt>UpToYear</tt> di mana
+<tt>FromYear</tt> adalah tahun awal dan <tt>UpToYear</tt> adalah tahun terakhir yang dapat dipilih.
+Awal hari pada seminggu bisa diubah dengan properti <tt>FirstDayOfWeek</tt>, dengan 0 sebagai Minggu, 1 sebagai Senin, dst.
+</p>
+
+<p id="280252" class="block-content"><b>Catatan 1:</b> Jika <tt>InputMode</tt> adalah "TextBox", <tt>DateFormat</tt> <b>TIDAK</b> boleh berisi pola <code>MMM</code> atau <code>MMMM</code>. Pengurai sisi-server tidak akan bisa menentukan tanggal yang benar jika <code>MMM</code> atau <code>MMMM</code> dipakai. Ketika <tt>InputMode</tt> sama dengan "DropDownList", seluruh pola dapat dipergunakan.</p>
+
+<p id="280253" class="block-content"><b>Catatan 2:</b> Ketika <tt>TDatePicker</tt> dipakai bersama dengan validator, properti <tt>DateFormat</tt> pada validator harus sama dengan
+<tt>DateFormat</tt> pada <tt>TDatePicker</tt> <b>DAN</b> harus disetel <tt>DataType</tt>="Date" pada validator guna memastikan validasi yang benar. Lihat
+<a href="?page=Controls.Validation#TCompareValidator">TCompareValidator</a>,
+<a href="?page=Controls.Validation#TDataTypeValidator">TDataTypeValidator</a> dan
+<a href="?page=Controls.Validation#TRangeValidator">TRangeValidator</a>
+untuk lebih jelasnya.</p>
+
+<com:RunBar PagePath="Controls.Samples.TDatePicker.Home" />
+
+<div class="last-modified">$Id: DatePicker.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/Expression.page b/demos/quickstart/protected/pages/Controls/id/Expression.page new file mode 100644 index 00000000..53ef6509 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/Expression.page @@ -0,0 +1,23 @@ +<com:TContent ID="body" >
+
+<h1 id="2401">TExpression</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TExpression" />
+
+<p id="290254" class="block-content">
+<tt>TExpression</tt> mengevaluasi ekspresi PHP dan menampilkan hasil evaluasinya. Untuk menetapkan ekspresi yang akan dievaluasi, setel properti <tt>Expression</tt>. Catatan, <tt>TExpression</tt> mengevaluasi ekspresi selama menyajikan masa hidup kontrol.
+</p>
+
+<p id="290255" class="block-content">
+Konteks dari ekspresi dalam kontrol <tt>TExpression</tt> adalah kontrol itu sendiri. Yaitu, <tt>$this</tt> mewakili obyek kontrol jika ia ada dalam ekspresi. Sebagai contoh, tag template akan menampilkan judul halaman yang berisi kontrol <tt>TExpression</tt>.
+</p>
+<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_290104">
+<com:TExpression Expression="$this->Page->Title" />
+</com:TTextHighlighter>
+
+<p id="290256" class="block-content">
+Harap berhati-hati karena <tt>TExpression</tt> membolehkan eksekusi kode bebas PHP, secara umum anda seharusnya tidak menggunakannya untuk mengevaluasi ekspresi yang dikirimkan oleh para pengguna aplikasi anda.
+</p>
+
+<com:RunBar PagePath="Controls.Samples.TExpression.Home" />
+
+<div class="last-modified">$Id: Expression.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/FileUpload.page b/demos/quickstart/protected/pages/Controls/id/FileUpload.page new file mode 100644 index 00000000..25669131 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/FileUpload.page @@ -0,0 +1,27 @@ +<com:TContent ID="body" >
+
+<h1 id="2501">TFileUpload</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TFileUpload" />
+
+<p id="300257" class="block-content">
+<tt>TFileUpload</tt> menampilkan field file upload pada halaman Web. Setelah postback, teks yang dimasukan ke dalam field akan diperlkakukan sebagai nama (lokal) file yang di-upload ke server.
+</p>
+<p id="300258" class="block-content">
+<tt>TFileUpload</tt> memunculkan event <tt>OnFileUpload</tt> ketika ia adalah post back. Properti <tt>HasFile</tt> menunjukan apakah file yang di-upload sukses atau tidak. Jika sukses, file yang di-upload dapat disimpan pada server dengan memanggil metode <tt>saveAs()</tt>.
+</p>
+<p id="300259" class="block-content">
+Properti berikut memberikan informasi mengenai file yang di-upload:
+</p>
+<ul id="u1" class="block-content">
+ <li><tt>FileName</tt> - nama file asal pada sisi-klien tanpa direktori.</li>
+ <li><tt>FileType</tt> - tipe MIME dari file yang di-upload.</li>
+ <li><tt>FileSize</tt> - ukuran file dalam byte.</li>
+ <li><tt>LocalName</tt> - path file absolut dari file yang di-upload ke server. Catatan, file ini akan dihapus setelah permintaan halaman saat ini selesai. Panggil <tt>saveAs()</tt> untuk menyimpan file yang di-upload.</li>
+</ul>
+<p id="300260" class="block-content">
+Jika upload file tidak berhasil, properti <tt>ErrorCode</tt> memberikan kode kesalahan yang menyebabkan kegagalan. Lihat <a href="http://www.php.net/manual/en/features.file-upload.errors.php">dokumentasi PHP</a> untuk penjelasan lengkap atas kode kesalahan yang mungkin.
+</p>
+
+<com:RunBar PagePath="Controls.Samples.TFileUpload.Home" />
+
+<div class="last-modified">$Id: FileUpload.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/Head.page b/demos/quickstart/protected/pages/Controls/id/Head.page new file mode 100644 index 00000000..1312e8c0 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/Head.page @@ -0,0 +1,10 @@ +<com:TContent ID="body" >
+
+<h1 id="2601">THead</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.THead" />
+
+<p id="310261" class="block-content">
+TBD
+</p>
+
+<div class="last-modified">$Id: Head.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/HiddenField.page b/demos/quickstart/protected/pages/Controls/id/HiddenField.page new file mode 100644 index 00000000..a1cc18fe --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/HiddenField.page @@ -0,0 +1,13 @@ +<com:TContent ID="body" >
+
+<h1 id="2701">THiddenField</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.THiddenField" />
+
+<p id="320262" class="block-content">
+<tt>THiddenField</tt> mewakili field tersembyni pada halaman Web. Nilai field tersembunyi dapat diakses melalui properti <tt>Value</tt>.
+</p>
+<p id="320263" class="block-content">
+<tt>THiddenField</tt> memunculkan event <tt>OnValueChanged</tt> jika nilainya diubah selama postback.
+</p>
+
+<div class="last-modified">$Id: HiddenField.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/HtmlArea.page b/demos/quickstart/protected/pages/Controls/id/HtmlArea.page new file mode 100644 index 00000000..537e507a --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/HtmlArea.page @@ -0,0 +1,48 @@ +<com:TContent ID="body" >
+
+<h1 id="2801">THtmlArea</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.THtmlArea" />
+
+<p id="330264" class="block-content">
+<tt>THtmlArea</tt> menampilkan field input teks WYSIWYG pada halaman Web untuk mengumpulkan input dalam format HTML. Teks yang ditampilkan dalam kontrol <tt>THtmlArea</tt> ditetapkan atau ditentukan dengan menggunakan properti <tt>Text</tt>. Untuk menyesuaikan ukuran bagian input, setel properti <tt>Width</tt> dan <tt>Height</tt> daripada <tt>Columns</tt> dan <tt>Rows</tt> karena keduanya tidak memiliki arti di bawah situasi ini. Untuk mematikan fitur WYSIWYG, setel <tt>EnableVisualEdit</tt> ke false.
+</p>
+
+<p id="330265" class="block-content">
+<tt>THtmlArea</tt> menyediakan fitur WYSIWYG dengan melapisi fungsionalitas yang disediakan oleh <a href="http://tinymce.moxiecode.com/">Proyek TinyMCE</a>.
+</p>
+
+<p id="330266" class="block-content">
+Editor standar hanya memberikan bar piranti dasar. Untuk mengubah atau menambah bar piranti lainnya, gunakan properti <tt>Options</tt> guna menambah opsi editor tambahan dengan setiap opsi pada baris baru. Lihat <a href="http://tinymce.moxiecode.com/tinymce/docs/index.html">TinyMCE website</a> untuk daftar opsi lebih lengkap. Contoh berikut menampilkan bar piranti spesifik untuk memanipulasi tabel HTML,
+</p>
+<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_330105">
+<com:THtmlArea>
+ <prop:Options>
+ plugins : "table"
+ theme_advanced_buttons3 : "tablecontrols"
+ </prop:Options>
+</com:THtmlArea>
+</com:TTextHighlighter>
+
+<p id="330267" class="block-content">
+Kemampuan mengedit secara visual sisi-klien didukung oleh Internet Explorer 5.0+ untuk Windows dan browser berbasis-Gecko. Jika browser tidak mendukung mengedit secara visual visual, area teks tradisional yang akan ditampilkan.
+</p>
+
+<pre>
+ Windows XP MacOS X 10.4
+----------------------------------------------------
+MSIE 6 OK
+MSIE 5.5 SP2 OK
+MSIE 5.0 OK
+Mozilla 1.7.x OK OK
+Firefox 1.0.x OK OK
+Firefox 1.5b2 OK OK
+Safari 2.0 (412) OK(1)
+Opera 9 Preview 1 OK(1) OK(1)
+----------------------------------------------------
+(1) - sebagian bekerja
+----------------------------------------------------
+</pre>
+
+<com:RunBar PagePath="Controls.Samples.THtmlArea.Home" />
+
+<div class="last-modified">$Id: HtmlArea.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/HyperLink.page b/demos/quickstart/protected/pages/Controls/id/HyperLink.page new file mode 100644 index 00000000..25391060 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/HyperLink.page @@ -0,0 +1,11 @@ +<com:TContent ID="body" >
+
+<h1 id="2901">THyperLink</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.THyperLink" />
+
+<p id="340268" class="block-content">
+<tt>THyperLink</tt> menampilkan hiperlink pada halaman. URL hiperlink ditetapkan melalui properti <tt>NavigateUrl</tt>, dan teks link melalui properti <tt>Text</tt>. Target link ditetapkan melalui properti <tt>Target</tt>. Memungkinkan juga untuk menampilkan sebuah gambar dengan menyetel properti <tt>ImageUrl</tt>. Dalam hal ini, <tt>Text</tt> ditampilkan sebagai teks alternatif dari gambar. Jika <tt>ImageUrl</tt> dan <tt>Text</tt> keduanya kosong, konten ditutupi di dalam tag kontrol akan disajikan.
+</p>
+<com:RunBar PagePath="Controls.Samples.THyperLink.Home" />
+
+<div class="last-modified">$Id: HyperLink.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/Image.page b/demos/quickstart/protected/pages/Controls/id/Image.page new file mode 100644 index 00000000..8974adeb --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/Image.page @@ -0,0 +1,11 @@ +<com:TContent ID="body" >
+
+<h1 id="3201">TImage</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TImage" />
+
+<p id="370273" class="block-content">
+<tt>TImage</tt> menampilkan gambar pada halaman. Gambar ditetapkan melalui properti <tt>ImageUrl</tt> yang mengambil URL absolut terhadap file gambar. Penjajaran gambar yang ditampilkan disetel oleh properti <tt>ImageAlign</tt>. Untuk menyetel teks alternatif atau penjelasan panjang atas gambar, gunakan masing-masing <tt>AlternateText</tt> atau <tt>DescriptionUrl</tt>.
+</p>
+<com:RunBar PagePath="Controls.Samples.TImage.Home" />
+
+<div class="last-modified">$Id: Image.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/ImageButton.page b/demos/quickstart/protected/pages/Controls/id/ImageButton.page new file mode 100644 index 00000000..cd8ec032 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/ImageButton.page @@ -0,0 +1,11 @@ +<com:TContent ID="body" >
+
+<h1 id="3001">TImageButton</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TImageButton" />
+
+<p id="350269" class="block-content">
+<tt>TImageButton</tt> juga mirip dengan <tt>TButton</tt>, kecuali bahwa <tt>TImageButton</tt> menampilkan tombol sebagai sebuah gambar. Gambar ditetapkan melalui <tt>ImageUrl</tt>, dan teks alternatif ditetapkan oleh <tt>Text</tt>. Sebagai tambahan, dimungkinkan untuk mendapatkan informasi koordinat titik di mana gambar diklik. Informasi koordinat yang diisikan dalam parameter event <tt>OnClick</tt> (bukan <tt>OnCommand</tt>).
+</p>
+<com:RunBar PagePath="Controls.Samples.TImageButton.Home" />
+
+<div class="last-modified">$Id: ImageButton.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/ImageMap.page b/demos/quickstart/protected/pages/Controls/id/ImageMap.page new file mode 100644 index 00000000..7c2de9db --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/ImageMap.page @@ -0,0 +1,25 @@ +<com:TContent ID="body" >
+
+<h1 id="3101">TImageMap</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TImageMap" />
+
+<p id="360270" class="block-content">
+<tt>TImageMap</tt> Mewakili sebuah gambar pada halaman Web dengan bagian titik panas (hotspot) predefinisi yang dapat merespon secara berbeda saat pengguna mengkliknya. Tergantung pada <tt>HotSpotMode</tt> dari bagian hotspot, mengklik pada hotspot akan memicu postback atau mengendalikan URL yang ditetapkan.
+</p>
+<p id="360271" class="block-content">
+Setiap hotspot dijelaskan menggunakan obyek <tt>THotSpot</tt> dan dipelihara dalam koleksi <tt>HotSpots</tt> pada <tt>TImageMap</tt>. Sebuah hotspot dapat berupa lingkaran, persegi panjangn, poligon, dll.
+</p>
+<p id="360272" class="block-content">
+Hotspot dapat ditambahkan ke <tt>TImageMap</tt> melalui properti <tt>HotSpots</tt> atau dalam template seperti berikut,
+</p>
+<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_360106">
+<com:TImageMap ... >
+ <com:TCircleHotSpot ... />
+ <com:TRectangleHotSpot ... />
+ <com:TPolygonHotSpot ... />
+</com:TImageMap>
+</com:TTextHighlighter>
+
+<com:RunBar PagePath="Controls.Samples.TImageMap.Home" />
+
+<div class="last-modified">$Id: ImageMap.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/InlineFrame.page b/demos/quickstart/protected/pages/Controls/id/InlineFrame.page new file mode 100644 index 00000000..bca231ac --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/InlineFrame.page @@ -0,0 +1,24 @@ +<com:TContent ID="body" >
+
+<h1 id="3301">TInlineFrame</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TInlineFrame" />
+
+<p id="380274" class="block-content">
+<tt>TInlineFrame</tt> menampilkan sebuah bingkai inline (<iframe>) pada halaman Web. Lokasi konten bingkai ditetapkan oleh properti <tt>FrameUrl</tt>.
+</p>
+<p id="380275" class="block-content">
+Penampilan <tt>TInlineFrame</tt> dapat dikustomisai dengan properti berikut, sebagai tambahan terhadap apa yang diturunkan dari <tt>TWebControl</tt>.
+</p>
+<ul id="u1" class="block-content">
+ <li><tt>Align</tt> - penjajaran pada bingkai.</li>
+ <li><tt>DescriptionUrl</tt> - URI dari penjelasan panjang pada konten bingkai.</li>
+ <li><tt>MarginWidth</tt> dan <tt>MarginHeight</tt> - jumlah pixel masing-masing untuk digunakan sebagai batas kiri/kanan dan atas/bawah..</li>
+ <li><tt>ScrollBars</tt> - apakah scrollbar disediakan untuk bingkai inline. Standarnya adalah <tt>Auto</tt>, berarti scroll bar muncul bila diperlukan. Menyetelnya sebagai <tt>None</tt> atau <tt>Both</tt> untuk secara eksplisit to menyembunyikan atau menampilkan scroll bars.</li>
+</ul>
+
+<p id="380276" class="block-content">
+Contoh berikut memperlihatkan <tt>TInlineFrame</tt> dengan setelan properti berbeda. Google homepage dipakai sebagai konten bingkai.
+</p>
+<com:RunBar PagePath="Controls.Samples.TInlineFrame.Home" />
+
+<div class="last-modified">$Id: InlineFrame.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/JavascriptLogger.page b/demos/quickstart/protected/pages/Controls/id/JavascriptLogger.page new file mode 100644 index 00000000..93be7d9b --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/JavascriptLogger.page @@ -0,0 +1,31 @@ +<com:TContent ID="body" >
+
+<h1 id="3401">TJavascriptLogger</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TJavascriptLogger" />
+
+<p id="390277" class="block-content">
+<tt>TJavascriptLogger</tt> menyediakan javascript pencatatan sisi-klien. Ini sebagian besar adalah pelapis dari Javascript yang dikembangkan di <a href="http://gleepglop.com/javascripts/logger/">http://gleepglop.com/javascripts/logger/</a>.
+</p>
+
+<p id="390278" class="block-content">
+Untuk menggunakan <tt>TJavascriptLogger</tt>, cukup tempatkan tag komponen berikut pada template halaman.
+</p>
+<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_390107">
+<com:TJavascriptLogger />
+</com:TTextHighlighter>
+
+<p id="390279" class="block-content">
+Kemudian, Javascript sisi-klien dapat berisi pernyataan berikut. Ketika dieksekusi akan muncul dalam jendela pencatat.
+</p>
+<com:TTextHighlighter Language="js" CssClass="source block-content" id="code_390108">
+Logger.info('something happend');
+Logger.warn('A warning');
+Logger.error('This is an error');
+Logger.debug('debug information');
+</com:TTextHighlighter>
+
+<p id="390280" class="block-content">
+Untuk menghidup matikan penampakan pencatat dan konsol pada jendela browser, tekan ALT-D (atau CTRL-D pada OS X).
+</p>
+
+<div class="last-modified">$Id: JavascriptLogger.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/Label.page b/demos/quickstart/protected/pages/Controls/id/Label.page new file mode 100644 index 00000000..1715587e --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/Label.page @@ -0,0 +1,11 @@ +<com:TContent ID="body" >
+
+<h1 id="3501">TLabel</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TLabel" />
+
+<p id="400281" class="block-content">
+<tt>TLabel</tt> menampilkan teks pada halaman Web. Teks yang ditampilkan disetel melalui properti <tt>Text</tt>. Jika <tt>Text</tt> kosong, konten yang ditutupi dalam tag komponen <tt>TLabel</tt> akan ditampilkan. <tt>TLabel</tt> juga dapat dipakai sebagai label formulir yang terkait dengan beberapa kontrol pada formulir. Karena <tt>Text</tt> bukan HTML-dikodekan ketika disajikan, pastikan ia tidak berisi karakter berbahaya yang ingin anda hindari.
+</p>
+<com:RunBar PagePath="Controls.Samples.TLabel.Home" />
+
+<div class="last-modified">$Id: Label.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/LinkButton.page b/demos/quickstart/protected/pages/Controls/id/LinkButton.page new file mode 100644 index 00000000..c4a8c024 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/LinkButton.page @@ -0,0 +1,11 @@ +<com:TContent ID="body" >
+
+<h1 id="3601">TLinkButton</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TLinkButton" />
+
+<p id="410282" class="block-content">
+<tt>TLinkButton</tt> mirip dengan <tt>TButton</tt> dalam setiap aspek kecuali bahwa <tt>TLinkButton</tt> ditampilkan sebagai hiperlink. Teks link ditentukan oleh properti <tt>Text</tt>. Jika properti <tt>Text</tt> kosong, maka konten tombol yang ditampilkan (oleh karenanya, anda bisa menutupi tag <img> di dalam badan tombol dan mendapatkan tombol gambar.
+</p>
+<com:RunBar PagePath="Controls.Samples.TLinkButton.Home" />
+
+<div class="last-modified">$Id: LinkButton.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/List.page b/demos/quickstart/protected/pages/Controls/id/List.page new file mode 100644 index 00000000..63260b69 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/List.page @@ -0,0 +1,96 @@ +<com:TContent ID="body" >
+
+<h1 id="4801">Kontrol Daftar</h1>
+<p id="550329" class="block-content">
+Kontrol Daftar yang tercakup pada seksi ini semuanya diturunkan secara langsung atau tidak langsung dari <tt>TListControl</tt>. Oleh karena itu akan berbagi set properti yang sama dan umum dipakai, termasuk,
+</p>
+<ul id="u1" class="block-content">
+<li><tt>Items</tt> - daftar item dalam kontrol. Item adalah tipe <tt>TListItem</tt>. Daftar item bisa dipopulasikan melalui penyatuan data atau ditetapkan dalam template seperti berikut:
+<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_550115">
+<com:TListBox>
+ <com:TListItem Text="text 1" Value="value 1" />
+ <com:TListItem Text="text 2" Value="value 2" Selected="true" />
+ <com:TListItem Text="text 3" Value="value 3" />
+</com:TListBox>
+</com:TTextHighlighter>
+</li>
+<li><tt>SelectedIndex</tt> - indeks berbasis-nol pada item yang dipilih dalam daftar item.</li>
+<li><tt>SelectedIndices</tt> - indeks dari semua item yang dipilih.</li>
+<li><tt>SelectedItem</tt> - item yang pertama dipilih dalam daftar item.</li>
+<li><tt>SelectedValue</tt> - nilai dari item pertama yang dipilih dalam daftar item.</li>
+<li><tt>AutoPostBack</tt> - apakah perubahan pilihan pada kontrol memicu postback atau tidak.</li>
+<li><tt>CausesValidation</tt> - apakah validasi harus dilakukan saat postback dipicu oleh kontrol daftar.</li>
+</ul>
+
+<p id="550330" class="block-content">
+Karena <tt>TListControl</tt> berasal dari <tt>TDataBoundControl</tt>, kontrol daftar ini juga berbagi operasi umum yang sama yang dikenal sebagai <tt>databinding</tt> atau penyatuan data. <tt>Items</tt> dapat dipopulasikan dari data yang sudah ada dan ditetapkan oleh <tt>DataSource</tt> atau <tt>DataSourceID</tt>. Fungsi yang memanggil <tt>dataBind()</tt> akan menyebabkan populasi data. Untuk kontrol daftar, data bisa ditetapkan dalam dua jenis format berikut:
+</p>
+<ul id="u2" class="block-content">
+ <li>array satu-dimensi atau obyek yang mengimplementasikan <tt>ITraversable</tt> : kunci array akan dipakai sebagai nilai item daftar, dan nilai array akan dipakai sebagai teks item daftar. Sebagai contoh
+<com:TTextHighlighter CssClass="source block-content" id="code_550116">
+$listbox->DataSource=array(
+ 'key 1'=>'item 1',
+ 'key 2'=>'item 2',
+ 'key 3'=>'item 3');
+$listbox->dataBind();
+</com:TTextHighlighter>
+</li>
+ <li>data tabular (dua-dimensi): setiap baris mempopulasi satu item daftar. Nilai item daftar ditetapkan oleh anggota yang diindeks dengan <tt>DataValueField</tt>, dan teks item daftar dengan <tt>DataTextField</tt>. Sebagai contoh,
+<com:TTextHighlighter CssClass="source block-content" id="code_550117">
+$listbox->DataTextField='name';
+$listbox->DataValueField='id';
+$listbox->DataSource=array(
+ array('id'=>'001','name'=>'John','age'=>31),
+ array('id'=>'002','name'=>'Mary','age'=>30),
+ array('id'=>'003','name'=>'Cary','age'=>20));
+$listbox->dataBind();
+</com:TTextHighlighter>
+</li>
+</ul>
+
+<h2 id="4802">TListBox</h2>
+<p id="550331" class="block-content">
+<tt>TListBox</tt> menampilkan kotak daftar yang membolehkan satu atau multipel pilihan. Setel properti <tt>SelectionMode</tt> sebagai <tt>Single</tt> untuk menjadikan kotak daftar pilihan tunggal, dan <tt>Multiple</tt> untuk kotak daftar pilihan multipel. Jumlah baris ditampilkan dalam kotak ditetapkan melalui nilai properti <tt>Rows</tt>.
+</p>
+<com:RunBar PagePath="Controls.Samples.TListBox.Home" />
+
+<h2 id="4803">TDropDownList</h2>
+<p id="550332" class="block-content">
+<tt>TDropDownList</tt> menampilkan kotak daftar dropdown yang membolehkan pengguna untuk memilih opsi tunggal dari beberapa yang telah ditetapkan.
+</p>
+<com:RunBar PagePath="Controls.Samples.TDropDownList.Home" />
+
+<h2 id="4804">TCheckBoxList</h2>
+<p id="550333" class="block-content">
+<tt>TCheckBoxList</tt> menampilkan sebuah daftar kotak centang pada halaman Web. Penjajaran teks selain setiap kotak centang dapat ditetapkan dengan <tt>TextAlign</tt>. Tata letak kotak centang bisa dikontrol oleh properti berikut:
+</p>
+<ul id="u3" class="block-content">
+ <li><tt>RepeatLayout</tt> - berupa <tt>Table</tt> atau <tt>Flow</tt>. <tt>Table</tt> menggunakan sel tabel HTML untuk mengatur kotak centang, sementara <tt>Flow</tt> mengunakan tag span dan break HTML untuk pengaturannya. Dengan tata letak <tt>Table</tt>, anda bisa menyetel <tt>CellPadding</tt> dan <tt>CellSpacing</tt>.</li>
+ <li><tt>RepeatColumns</tt> - berapa banyak kolom kotak centang akan ditampilkan.</li>
+ <li><tt>RepeatDirection</tt> - ke mana menjelajahi kotak centang, dalam cara horisontal (karena kotak centang ditampilkan dalam tata letak mirip-matriks).</li>
+</ul>
+
+<com:RunBar PagePath="Controls.Samples.TCheckBoxList.Home" />
+
+<h2 id="4805">TRadioButtonList</h2>
+<p id="550334" class="block-content">
+<tt>TRadioButtonList</tt> mirip dengan <tt>TCheckBoxList</tt> dalam setiap aspek kecuali bahwa setiap <tt>TRadioButtonList</tt> menampilkan sebuah grup tombol radio. Hanya satu tombol radio dapat dipilih, (<tt>TCheckBoxList</tt> membolehkan pilihan multipel).
+</p>
+<com:RunBar PagePath="Controls.Samples.TRadioButtonList.Home" />
+
+<h2 id="4806">TBulletedList</h2>
+<p id="550335" class="block-content">
+<tt>TBulletedList</tt> menampilkan item dalam format bulat pada halaman Web. Gaya bulat dapat ditetapkan dengan <tt>BulletStyle</tt>. Ketika gaya adalah <tt>CustomImage</tt>, tanda bulat ditampilkan sebagai gambar, yang ditetapkan dengan <tt>BulletImageUrl</tt>.
+</p>
+<p id="550336" class="block-content">
+<tt>TBulletedList</tt> menampilkan teks item dalam tiga mode berbeda,
+</p>
+<ul id="u4" class="block-content">
+ <li><tt>Text</tt> - teks item ditampilkan sebagai teks statis;</li>
+ <li><tt>HyperLink</tt> - setiap item ditampilkan sebagai hiperlink yang URL-nya diberikan oleh nilai item, dan properti <tt>Target</tt> bisa dipakai untuk menetapkan jendela browser;</li>
+ <li><tt>LinkButton</tt> - setiap item ditampilkan sebagai tombol link yang melakukan posts back pada halaman jika pengguna mengkliknya, dan event <tt>OnClick</tt> akan dimunculkan di bawah keadaan demikian.</li>
+</ul>
+
+<com:RunBar PagePath="Controls.Samples.TBulletedList.Home" />
+
+<div class="last-modified">$Id: List.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/Literal.page b/demos/quickstart/protected/pages/Controls/id/Literal.page new file mode 100644 index 00000000..6601296a --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/Literal.page @@ -0,0 +1,25 @@ +<com:TContent ID="body" >
+
+<h1 id="3701">TLiteral</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TLiteral" />
+
+<p id="420283" class="block-content">
+<tt>TLiteral</tt> menampilkan teks statis pada halaman Web. <tt>TLiteral</tt> mirip dengan kontrol <tt>TLabel</tt>, kecuali bahwa <tt>TLiteral</tt>
+ * Kontrol tidak memiliki properti style, seperti <tt>BackColor</tt>, <tt>Font</tt>, dll.
+</p>
+
+<p id="420284" class="block-content">
+Teks yang ditampilkan oleh <tt>TLiteral</tt> bisa dikontrol secara programatis dengan menyetel properti <tt>Text</tt>. Teks yang ditampilkan mungkin HTML-dikodekan jika <tt>Encode</tt> adalah true (nilai standarnya false).
+</p>
+
+<p id="420285" class="block-content">
+<tt>TLiteral</tt> akan menyajikan konten yang dikurung dalam tag komponen jika <tt>Text</tt> kosong.
+</p>
+
+<p id="420286" class="block-content">
+Harap berhati-hati jika <tt>Encode</tt> adalah false, pastikan <tt>Text</tt> tidak berisi karakter yang tidak diinginkan yang dapat menjadikan keamanan mudah ditembus.
+</p>
+
+<com:RunBar PagePath="Controls.Samples.TLiteral.Home" />
+
+<div class="last-modified">$Id: Literal.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/MultiView.page b/demos/quickstart/protected/pages/Controls/id/MultiView.page new file mode 100644 index 00000000..2b77fdfe --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/MultiView.page @@ -0,0 +1,43 @@ +<com:TContent ID="body" >
+
+<h1 id="3801">TMultiView</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TMultiView" />
+
+<p id="430287" class="block-content">
+<tt>TMultiView</tt> bertindak sebagai penampung grup kontrol <tt>TView</tt>, yang dapat diambil oleh properti <tt>Views</tt>. Setiap tampilan berisi kontrol anak. <tt>TMultiView</tt> menentukan tampilan mana dan kontrol anaknya yang terlihat. Kapan saja hanya satu tampilan terlihat (disebut <i>aktif</i>). untuk mengaktifkan tampilan, setel <tt>ActiveView</tt> atau <tt>ActiveViewIndex</tt>. Catatan, standarnya tidak ada tampilan yang aktif.
+</p>
+<p id="430288" class="block-content">
+Untuk menambah tampilan ke <tt>TMultiView</tt>, manipulasi koleksi <tt>Views</tt> atau tambah ia dalam template seperti berikut,
+</p>
+<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_430109">
+<com:TMultiView>
+ <com:TView>
+ view 1 content
+ </com:TView>
+ <com:TView>
+ view 2 content
+ </com:TView>
+</com:TMultiView>
+</com:TTextHighlighter>
+
+<p id="430289" class="block-content">
+<tt>TMultiView</tt> merespon event perintah berikut untuk mengatur penampakan tampilannya.
+</p>
+<ul id="u1" class="block-content">
+ <li><tt>NextView</tt> : beralih ke tampilan berikutnya (dengan memperhatikan tampilan aktif saat ini).
+ <li><tt>PreviousView</tt> : beralih ke tampilan sebelumnya (dengan memperhatikan tampilan aktif saat ini).
+ <li><tt>SwitchViewID</tt> : beralih ke tampilan sesuai path ID. Path ID diambil dari parameter perintah.
+ <li><tt>SwitchViewIndex</tt> : beralih ke tampilan sesuai indeks berbasis-nol dalam koleksi <tt>Views</tt>. Indeks diambil dari parameter perintah.
+</ul>
+
+<p id="430290" class="block-content">
+Setelah postback, jika indeks tampilan aktif diubah, <tt>TMultiView</tt> akan memunculkan event <tt>OnActiveViewChanged</tt>.
+</p>
+
+<p id="430291" class="block-content">
+<a href="?page=Fundamentals.Samples.Hangman.Home">Permainan Hangman</a> adalah penggunaan umum dari <tt>TMultiView</tt>. Contoh berikut memperlihatkan kegunaan lain dari <tt>TMultiView</tt>.
+</p>
+
+<com:RunBar PagePath="Controls.Samples.TMultiView.Home" />
+
+<div class="last-modified">$Id: MultiView.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/NewControl.page b/demos/quickstart/protected/pages/Controls/id/NewControl.page new file mode 100644 index 00000000..c1dfb201 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/NewControl.page @@ -0,0 +1,152 @@ +<com:TContent ID="body" >
+
+<h1 id="5401">Menulis Kontrol Baru</h1>
+<p id="660428" class="block-content">
+Menulis kontrol baru sering diinginkan oleh para pemrogram tingkat lanjut, karena mereka ingin menggunakan ulang kode yang mereka tulis untuk menghadapi penyajian yang komples serta interaksi pengguna.
+</p>
+<p id="660429" class="block-content">
+Secara umum, ada dua cara penulisan kontrol baru: komposisi kontrol yang sudah ada dan memperluas kontrol yang sudah ada. Semuanya memerlukan kontrol baru tersebut berasal dari <tt>TControl</tt> atau kelas anaknya.
+</p>
+
+<h2 id="5402">Komposisi Kontrol yang Sudah Ada</h2>
+<p id="660430" class="block-content">
+Komposisi adalah cara termudah membuat kontrol baru. Ia melibatkan terutama penurunan kontrol yang sudah ada, mengkonfigurasinya dan menjadikannya unsur komponen. Properti dari unsur komponen diperlihatkan melalui <a href="?page=Fundamentals.Components">subproperti</a>.
+</p>
+<p id="660431" class="block-content">
+Seseorang dapat menciptakan sebuah kontrol baru dalam dua cara. Pertama adalah memperluas <tt>TCompositeControl</tt> dan mengganti metode <tt>TControl::createChildControls()</tt>. Kedua adalah memperluas <tt>TTemplateControl</tt> (atau kelas anaknya) dan menulis template kontrol. Yang terakhir lebih mudah digunakan dan bisa mengatur tata letak unsur komponen lebih intuitif, sementara pembentuk lebih efisien karena ia tidak perlu menguraikan template.
+</p>
+<p id="660432" class="block-content">
+Sebagai contoh, kami memperlihatkan bagaimana untuk membuat kotak teks berlabel yang disebut <tt>LabeledTextBox</tt> menggunakan dua pendekatan di atas. Kotak teks berlabel menampilkan label disamping kotak teks. Kami ingin menggunakan ulang <tt>TLabel</tt> dan <tt>TTextBox</tt> yang disediakan PRADO untuk menyelesaikan tugas ini.
+</p>
+
+<h3 id="5404">Komposisi dengan Menulis Template</h3>
+<p id="660433" class="block-content">
+Kita memerlukan dua file: sebuah file kelas kontrol bernama <tt>LabeledTextBox.php</tt> dan file template kontrol bernama <tt>LabeledTextBox.tpl</tt>. Keduanya harus berada di bawah direktori yang sama.
+</p>
+<p id="660434" class="block-content">
+Seperti membuat halaman PRADO, kita dapat dengan mudah menuliskan konten dalam file template kontrol.
+</p>
+<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_660129">
+<com:TLabel ID="Label" ForControl="TextBox" />
+<com:TTextBox ID="TextBox" />
+</com:TTextHighlighter>
+<p id="660435" class="block-content">
+Template di atas menetapkan kontrol <tt>TLabel</tt> bernama <tt>Label</tt> dan kontrol <tt>TTextBox</tt> bernama <tt>TextBox</tt>. Kita ingin memperlihatkan kedua kontrol ini. Ini bisa dikerjakan dengan mendefinisikan properti untuk masing-masing kontrol dalam file kelas <tt>LabeledTextBox</tt>. Sebagai contoh, kita dapat mendefinisikan proper <tt>Label</tt> seperti berikut,
+</p>
+<com:TTextHighlighter CssClass="source block-content" id="code_660130">
+class LabeledTextBox extends TTemplateControl {
+ public function getLabel() {
+ $this->ensureChildControls();
+ return $this->getRegisteredObject('Label');
+ }
+}
+</com:TTextHighlighter>
+<p id="660436" class="block-content">
+Dalam contoh di atas, metode memanggil <tt>ensureChildControls()</tt> memastikan bahwa kontrol label dan kotak teks sudah dibuat (dari template) ketika properti <tt>Label</tt> diakses. Properti <tt>TextBox</tt> dapat diimplementasikan dengan cara yang sama.
+</p>
+<com:RunBar PagePath="Controls.Samples.LabeledTextBox1.Home" />
+
+<h3 id="5405">Komposisi dengan Penggantian <tt>createChildControls()</tt></h3>
+<p id="660437" class="block-content">
+Untuk kontrol gabungan sesederhana <tt>LabeledTextBox</tt>, lebih baik membuatnya dengan memperluas <tt>TCompositeControl</tt> dan mengganti metode <tt>createChildControls()</tt>, karena ia tidak menggunakan template dan menghemat waktu penguraian template.
+</p>
+<p id="660438" class="block-content">
+Kode lengkap untuk <tt>LabeledTextBox</tt> ditampilkan sebagai berikut,
+</p>
+<com:TTextHighlighter CssClass="source block-content" id="code_660131">
+class LabeledTextBox extends TCompositeControl {
+ private $_label;
+ private $_textbox;
+ public function createChildControls() {
+ $this->_label=new TLabel;
+ $this->_label->setID('Label');
+ // tambah label sebagai anak dari LabeledTextBox
+ $this->getControls()->add($this->_label);
+ $this->_textbox=new TTextBox;
+ $this->_textbox->setID('TextBox');
+ $this->_label->setForControl('TextBox');
+ // tambah textbox sebagai anak dari LabeledTextBox
+ $this->getControls()->add($this->_textbox);
+ }
+ public function getLabel() {
+ $this->ensureChildControls();
+ return $this->_label;
+ }
+ public function getTextBox() {
+ $this->ensureChildControls();
+ return $this->_textbox;
+ }
+}
+</com:TTextHighlighter>
+<com:RunBar PagePath="Controls.Samples.LabeledTextBox2.Home" />
+
+<h3 id="5406">Menggunakan <tt>LabeledTextBox</tt></h3>
+<p id="660439" class="block-content">
+Untuk menggunakan kontrol <tt>LabeledTextBox</tt>, pertama kita perlu menyertakan file kelas terkait. Kemudian dalam template halaman, kita dapat menuliskan baris seperti berikut,
+</p>
+<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_660132">
+<com:LabeledTextBox ID="Input" Label.Text="Username" />
+</com:TTextHighlighter>
+<p id="660440" class="block-content">
+Dalam contoh di atas, <tt>Label.Text</tt> adalah subproperti dari <tt>LabeledTextBox</tt>, yang merujuk ke properti <tt>Text</tt> dari properti <tt>Label</tt>. Untuk lebih jelasnya atas pemakaian <tt>LabeledTextBox</tt>, lihat contoh online di atas.
+</p>
+
+<h2 id="5403">Memperluas Kontrol yang Sudah Ada</h2>
+<p id="660441" class="block-content">
+Memperluas kontrol yang sudah ada sama seperti penurunan kelas konvensional. Ia membolehkan para pengembang untuk mengkustomisasi kelas kontrol yang sudah ada dengan mengganti propertinya, metodenya, event, atau membuat yang baru.
+</p>
+<p id="660442" class="block-content">
+Kesulitan tugas tergantung pada seberapa banyak kelas yang sudah ada dikustomisasi. Sebagai contoh, tugas sederhana bisa mengkustomisasi kontrol <tt>TLabel</tt>, agar ia menampilkan label merah sercara standarnya. Ini akan melibatkan setelan properti <tt>ForeColor</tt> ke <tt>"red"</tt> dalam konstruktornya. Tugas yang sulit adalah membuat kontrol yang menyediakan fungsional inovatif secara lengkap. Biasanya, ini memerlukan perluasan kontrol dari kelas kontrol "tingkat rendah", seperti misalnya <tt>TControl</tt> atau <tt>TWebControl</tt>.
+</p>
+<p id="660443" class="block-content">
+Dalam bagian ini, sebagian besar kami memperkenalkan basis kelas kontrol <tt>TControl</tt> dan <tt>TWebControl</tt>, memperlihatkan bagaimana mereka bisa dikustomisasi. Kami juga memperkenalkan bagaimana untuk menulis kontrol dengan fungsionalitas khusus, seperti mengambil data post, memunculkan data post dan penyatuan data dengan sumber data.
+</p>
+
+<h3 id="5407">Memperluas <tt>TControl</tt></h3>
+<p id="660444" class="block-content">
+<tt>TControl</tt> adalah basis kelas dari semua kelas kontrol. Dua metode adalah yang paling penting untuk kelas kontrol turunannya:
+</p>
+<ul id="u1" class="block-content">
+ <li><tt>addParsedObject()</tt> - metode ini diminta oleh setiap komponen ata string teks yang dikurung di dalam tag komponen yang menetapkan kontrol dalam sebuah template. Standarnya, komponen dan string teks yang dikurung ditambahkan ke dalam koleksi <tt>Controls</tt> dari kontrol. Kontrol turunannya dapat mengganti metode ini untuk melakukan proses khusus mengenai konten yang dikurung tersebut. Sebagai contoh, <tt>TListControl</tt> hanya menerima komponen <tt>TListItem</tt> dikurung di dalam tag komponennya, dan komponen ini ditambahkan ke koleksi <tt>Items</tt> dari <tt>TListControl</tt>.
+ <li><tt>render()</tt> - metode ini menyajikan kontrol. Standarnya menyajikan item-item dalam koleksi <tt>Controls</tt>. Kontrol turunannya dapat mengganti metode ini guna memberikan penyajian yang dikustomisasi.</li>
+</ul>
+Properti dan metode penting lainnya termasuk:
+<ul id="u2" class="block-content">
+ <li><tt>ID</tt> - string yang secara unik mengidentifikasi kontrol diantara semua kontrol dari tempat penamaan yang sama. ID otomatis akan dibuat jika properti ID tidak disetel secara eksplisit.</li>
+ <li><tt>UnqiueID</tt> - ID unik lengkap yang mengidentifikasi kontrol diantara semua kontrol pada hirarki halaman saat ini. Ia dapat digunakan untuk mencari kontrol dalam hirarki halaman dengan memanggil metode <tt>TControl::findControl()</tt>. Kontrol input pengguna sering memakainya sebagai nilai dari atribut yang sama dari elemen input HTML.</li>
+ <li><tt>ClientID</tt> - mirip dengan <tt>UniqueID</tt>, kecuali bahwa ia dipakai terutama untuk penyajian dan umumnya digunakan sebagai nilai atribut id elemen HTML. Jangan bergantung pada format eksplisit <tt>ClientID</tt>.</li>
+ <li><tt>Enabled</tt> - apakah kontrol ini dihidupkan atau tidak. Catatan, dalam beberapa kasus, jika salah satu kontrol leluhurnya dimatikan, kontrol juga diperlakukan sebagai dimatikan, meskipun properti <tt>Enabled</tt> adalah true.</li>
+ <li><tt>Parent</tt> - kontrol leluhur dari kontrol ini. Kontrol leluhur memegang kendali apakah menyajikan kontrol ini atau tidak dan di mana menempatkan hasil yang disajikan.</li>
+ <li><tt>Page</tt> - halaman yang berisi kontrol ini.</li>
+ <li><tt>Controls</tt> - koleksi dari semua kontrol anak, termasuk teks statis diantaranya. Ia dapat dipakai seperti sebuah array, karena ia mengimplementasikan antarmuka <tt>Traversable</tt>. Untuk menambah anak ke kontrol, cukup sisipkan ia ke dalam koleksi <tt>Controls</tt> di posisi yang sesuai.</li>
+ <li><tt>Attributes</tt> - koleksi dari atribut kustom. Ini berguna untuk membolehkan para pengguna untuk menetapkan atribut dari elemen output HTML yang tidak tercakup oleh properti kontrol.</li>
+ <li><tt>getViewState()</tt> dan <tt>setViewState()</tt> - metode ini umum dipakai untuk mendefinisikan properti yang disimpan dalam kondisi tampilan.</li>
+ <li><tt>saveState()</tt> dan <tt>loadState()</tt> - kedua metode ini bisa diganti untuk menyediakan langkah terakhir kondisi penyimpanan dan pengambilan.</li>
+ <li>Control lifecycles - Seperti halaman, kontrol juga mempunyai masa hidup. Setiap kontrol menjalani masa hidupnya dalam urutan berikut: constructor, <tt>onInit()</tt>, <tt>onLoad()</tt>, <tt>onPreRender()</tt>, <tt>render()</tt>, dan <tt>onUnload</tt>. Lebih jelasnya dapat ditemukan dalam seksi <a href="?page=Fundamentals.Pages">halaman</a>.</li>
+</ul>
+
+<h3 id="5408">Memperluas <tt>TWebControl</tt></h3>
+<p id="660445" class="block-content">
+<tt>TWebControl</tt> dipakai terutama sebagai basis kelas untuk kontrol yang menyajikan elemen HTML. Ia menyediakan satu set properti yang umum diantara elemen HTML. Ia memisahkan <tt>TControl::render()</tt> ke dalam metode berikut yang lebih cocok untuk menyajikan elemen HTML:
+</p>
+<ul id="u3" class="block-content">
+ <li><tt>addAttributesToRender()</tt> - menambah atribut untuk elemen HTML yang disajikan. Metode ini sering diganti dengan kelas tutunannya karena biasanya memiliki atribut berbeda yang disajikan.</li>
+ <li><tt>renderBeginTag()</tt> - menyajikan tag HTML pembuka.</li>
+ <li><tt>renderContents()</tt> - menyajikan konten dikurung di dalam elemen HTML. Standarnya menampilkan item-item dalam koleksi <tt>Controls</tt> daru kontrol. kelas turunannya dapat mengganti metode ini guna menyajikan konten yang dikustomisasi.</li>
+ <li><tt>renderEndTag()</tt> - menyajikan tag HTML penutup.</li>
+</ul>
+<p id="660446" class="block-content">
+Ketika menyajikan tag HTML pembuka, <tt>TWebControl</tt> memanggil <tt>getTagName()</tt> untuk mendapatkan nama tag. kelas turunannya dapat mengganti metode ini guna menyajikan nama tag yang berbeda.
+</p>
+
+<h3 id="5409">Membuat Kontrol dengan Fungsional Khusus</h3>
+<p id="660447" class="block-content">
+Jika sebuah kontrol ingin merespon event sisi-klien dan menterjemahkannya ke dalam event sisi server (disebut event postback), seperti <tt>TButton</tt>, ia harus mengimplementasikan antarmuka <tt>IPostBackEventHandler</tt>.
+</p>
+<p id="660448" class="block-content">
+Jika kontrol ingin bisa mengambil data post, seperti <tt>TTextBox</tt>, ia harus mengimplementasikan antarmuka <tt>IPostBackDataHandler</tt>.
+</p>
+<p id="660449" class="block-content">
+Jika kontrol ingin mendapatkan data dari beberapa sumber data eksternal, ia harus memperluas <tt>TDataBoundControl</tt>. <tt>TDataBoundControl</tt> mengimplementasikan properti dasar yang diperlukan untuk mempopulasi data melalui databinding. Kenyataanya, kontrol seperti <tt>TListControl</tt>, <tt>TRepeater</tt> adalah <tt>TDataGrid</tt> semua berasal darinya.
+</p>
+<div class="last-modified">$Id: NewControl.page 1741 2007-03-05 16:05:43Z xue $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/OutputCache.page b/demos/quickstart/protected/pages/Controls/id/OutputCache.page new file mode 100644 index 00000000..083aa6e7 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/OutputCache.page @@ -0,0 +1,46 @@ +<com:TContent ID="body" >
+
+<h1 id="88025">TOutputCache</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TOutputCache" />
+
+<p id="440292" class="block-content">
+<tt>TOutputCache</tt> menghidupkan cache sebagian dari halaman Web, juga dikenal sebagai partial caching. Konten yang sedang di-cache adalah sumber halaman HTML yang berasal dari teks statis pada template PRADO atau disajikan oleh satu atau beberapa kontrol pada template. Ketika konten yang di-cache dipakai, kontrol yang membuat konten tidak lagi dibuat untuk hirarki halaman dan selanjutnya penghematan secara signifikan waktu pemrosesan halaman dapat dicapai. Efek sampingnya, seperti yang sudah anda bayangkan adalah bahwa konten yang ditampilkan mungkin membosankan jika versi cache ditampilkan ke para pengguna.
+</p>
+
+<p id="440293" class="block-content">
+Untuk menggunakan <tt>TOutputCache</tt>, cukup kurung konten yang akan di-cache di dalam tag komponen <tt>TOutputCache</tt> pada template (baik template kontrol halaman ataupun non-halaman), misalnya
+</p>
+<com:TTextHighlighter Language="xml" CssClass="source block-content" id="code_440110">
+<com:TOutputCache>
+ content to be cached
+</com:TOutputCache>
+</com:TTextHighlighter>
+<p id="440294" class="block-content">
+di mana konten yang di-cache bisa berupa teks statis dan/atau tag template. Jika yang kedua, hasil penyajian dari tag template akan di-cache. Anda dapat menempatkan satu atau beberapa <tt>TOutputCache</tt> pada satu template dan ia dapat diulang-ulang.
+</p>
+
+<div class="note"><b class="tip">Note:</b>
+<tt>TOutputCache</tt> menyimpan konten yang di-cache melalui modul cache PRADO (misalnya <tt>TSqliteCache</tt>) dan selanjutnya memerlukan setidaknya satu modul cache diambil saat aplikasi dijalankan.
+</div>
+
+<p id="440295" class="block-content">
+Validitas dari konten yang di-cache ditentukan berdasarkan dua faktor: <tt>Durasi</tt> dan ketergantungan cache. Pembentuk menetapkan jumlah detik data bisa tetap benar dalam cache (standarnya 60 detik), sementara yang kedua menetapkan kondisi data yang di-cache tergantung padanya. Jika ketergantungan berubah (misalnya data relevan dalam DB dimutakhirkan), data yang di-cache akan dibuat tidak benar dan diabaikan.
+</p>
+
+<p id="440296" class="block-content">
+Ada dua cara untuk menetapkan ketergantungan cache. Seseorang bisa menulis pengendali event guna merespon event <tt>OnCheckDependency</tt> dan menyetel properti parameter event <tt>IsValid</tt> untuk menunjukan apakah data yang di-cache tetap benar atau tidak. Seseorang juga bisa memperluas <tt>TOutputCache</tt> dan mengganti metode <tt>getCacheDependency()</tt>-nya.
+</p>
+
+<p id="440297" class="block-content">
+Konten yang diambil dari cache dapat bervariasi dengan memperhatikan beberapa parameter. <tt>TOutputCache</tt> mendukung variasi dengan memperhatikan parameter permintaan, yang ditetapkan oleh properti <tt>VaryByParam</tt>. Jika parameter permintaan yang ditetapkan berbeda, versi berbeda dari konten yang di-cache dipakai. Ini sangat berguna jika konten halaman mungkin divariasikan berdasarkan beberapa parameter GET. Konten yang sedang di-cache juga dapat divariasikan dengan sesi pengguna jika <tt>VaryBySession</tt> disetel true. Untuk memvariasikan konten yang di-cache oleh faktor lain, ganti metode <tt>calculateCacheKey()</tt>.
+</p>
+
+<p id="440298" class="block-content">
+Output cache bisa diulang. Cache terluar mengambil lebih dulu di atas cache terdalam dalam menentukan kebenaran konten yang di-cache. Ini berarti, jika konten yang di-cache oleh cache terdalam berakhir atau dibuat tidak benar, sementara yang terluar tidak, maka konten terluar yang di-cache akan dipakai.
+</p>
+
+<p id="440299" class="block-content">
+Standarnya, <tt>TOutputCache</tt> hanya efektif untuk permintaan halaman non-postback dan saat modul cache dihidupkan. Jangan mencoba untuk mengalamatkan kontrol anak pada <tt>TOutputCache</tt> saat konten yang di-cache saat ini sedang dipakai. Gunakan properti <tt>ContentCached</tt> untuk menentukan apakah konten di-cache atau tidak.
+</p>
+
+<div class="last-modified">$Id: OutputCache.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/Pager.page b/demos/quickstart/protected/pages/Controls/id/Pager.page new file mode 100644 index 00000000..b4ace0e8 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/Pager.page @@ -0,0 +1,38 @@ +<com:TContent ID="body" >
+
+<h1 id="3901">TPager</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TPager" />
+
+<p id="450300" class="block-content">
+<tt>TPager</tt> membuat sebuah lembaran yang menyediakan UI bagi pengguna akhir untuk secara interaktif menetapkan halaman data mana yang disajikan dalam kontrol turunan-<tt>TDataBoundControl</tt>, seperti <tt>TDataList</tt>, <tt>TRepeater</tt>, <tt>TCheckBoxList</tt>, dll. Kontrol data-terikat sasaran ditetapkan dengan properti <tt>ControlToPaginate</tt>, yang harus berupa path ID dari kontrol sasaran yang dijangkau dari tempat penamaan lembar.
+</p>
+
+<p id="450301" class="block-content">
+Note, the target data-bound control must have its <tt>AllowPaging</tt> set to true. Otherwise the pager will be invisible. Also, in case when there is only one page of data available, the pager will also be invisible.
+</p>
+
+<p id="450302" class="block-content">
+<tt>TPager</tt> dapat menampilkan salah satu dari tiga tipe antarmuka pengguna, ditetapkan melalui properti <tt>Mode</tt>-nya:
+</p>
+<ul id="u1" class="block-content">
+<li><tt>NextPrev</tt> - tombol halaman berikutnya dan sebelumnya yang disajikan pada setiap halaman.</li>
+<li><tt>Numeric</tt> - daftar tombol indeks halaman yang disajikan.</li>
+<li><tt>DropDownList</tt> - daftar dropdown pada indeks halaman yang disajikan.</li>
+</ul>
+<p id="450303" class="block-content">
+Antarmuka pengguna ini selanjutnya dapat dikustomisasi dengan mengkonfigurasi properti berikut
+</p>
+<ul id="u2" class="block-content">
+<li><tt>NextPageText</tt> dan <tt>PrevPageText</tt> - label dari tombol halaman berikutnya/sebelumnya. Properti ini dipakai ketika <tt>Mode</tt> lembar adalah <tt>NextPrev</tt> atau <tt>Numeric</tt>.</li>
+<li><tt>FirstPageText</tt> dan <tt>LastPageText</tt> - label dari tombol halaman pertama/terakhir. Jika kosong, tombol terkait tidak akan ditampilkan. Properti ini dipakai ketika <tt>Mode</tt> lembar adalah <tt>NextPrev</tt> atau <tt>Numeric</tt>.</li>
+<li><tt>PageButtonCount</tt> - jumlah maksimum tombol indeks halaman pada sebuah halaman. Properti ini dipakai saat <tt>Mode</tt> lembar adalah <tt>Numeric</tt>.</li>
+<li><tt>ButtonType</tt> - tipe tombol halaman, <tt>PushButton</tt> berarti tombol submisi normal, atau <tt>LinkButton</tt> berarti tombol hiperlink.</li>
+</ul>
+
+<p id="450304" class="block-content">
+<tt>TPager</tt> memunculkan event <tt>OnPageIndexChanged</tt> ketika pengguna-akhir berinteraksi dengannya dan menetapkan halaman baru (misalnya dengan mengklik pada tombol halaman berikutnya yang akan membawa ke halaman berikutnya). Para pengembang dapat menulis pengendali untuk merspon event ini dan medapatkan indeks halaman baru yang diinginkan, seseorang bisa memasukan halaman baru data ke kontrol ikatan-data terkait.
+</p>
+
+<com:RunBar PagePath="Controls.Samples.TPager.Sample1" />
+
+<div class="last-modified">$Id: Pager.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/Panel.page b/demos/quickstart/protected/pages/Controls/id/Panel.page new file mode 100644 index 00000000..5447d7f5 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/Panel.page @@ -0,0 +1,11 @@ +<com:TContent ID="body" >
+
+<h1 id="3901">TPanel</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TPanel" />
+
+<p id="460305" class="block-content">
+<tt>TPanel</tt> bertindak sebagai tempat penyajian untuk kontrol lain. Ia menampilkan elemen <div> pada halaman. Properti <tt>Wrap</tt> menetapkan konten badan panel yang menggulung ataupun tidak, sementara <tt>HorizontalAlign</tt> mengatur bagaimana konten dijajarkan secara horisontal dan <tt>Direction</tt> menunjukan arah konten (kiri ke kanan atau kanan ke kiri). Anda dapat menyetel <tt>BackImageUrl</tt> untuk memberikan gambar latar belakang pada panel, dan dana bisa menyetel <tt>GroupingText</tt> agar panel ditampilkan sebagai set field dengan legenda teks. Terakhir, anda bisa menetapkan tombol standar untuk dipicu saat para pengguna menekan tombol 'return' di dalam panel dengan menyetel properti <tt>DefaultButton</tt>.
+</p>
+<com:RunBar PagePath="Controls.Samples.TPanel.Home" />
+
+<div class="last-modified">$Id: Panel.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/PlaceHolder.page b/demos/quickstart/protected/pages/Controls/id/PlaceHolder.page new file mode 100644 index 00000000..b23f3f9b --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/PlaceHolder.page @@ -0,0 +1,12 @@ +<com:TContent ID="body" >
+
+<h1 id="4001">TPlaceHolder</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TPlaceHolder" />
+
+<p id="470306" class="block-content">
+<tt>TPlaceHolder</tt> menyimpan tempat pada template, di mana teks statis atau kontrol dapat disisipkan secara dinamis.
+</p>
+
+<com:RunBar PagePath="Controls.Samples.TPlaceHolder.Home" />
+
+<div class="last-modified">$Id: PlaceHolder.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/RadioButton.page b/demos/quickstart/protected/pages/Controls/id/RadioButton.page new file mode 100644 index 00000000..f3766e9e --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/RadioButton.page @@ -0,0 +1,11 @@ +<com:TContent ID="body" >
+
+<h1 id="4101">TRadioButton</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TRadioButton" />
+
+<p id="480307" class="block-content">
+<tt>TRadioButton</tt> mirip dengan <tt>TCheckBox</tt> dalam setiap aspek, kecuali bahwa <tt>TRadioButton</tt> menampilkan tombol radio pada halaman Web. Tombol radio dapat dimiliki oleh grup yang ditetapkan oleh <tt>GroupName</tt> dengan demikian hanya satu tombol radio yang bisa dipilih.
+</p>
+<com:RunBar PagePath="Controls.Samples.TRadioButton.Home" />
+
+<div class="last-modified">$Id: RadioButton.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/Repeater.page b/demos/quickstart/protected/pages/Controls/id/Repeater.page new file mode 100644 index 00000000..4b319547 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/Repeater.page @@ -0,0 +1,111 @@ +<com:TContent ID="body" >
+
+<h1 id="5301">TRepeater</h1>
+
+<p id="600400" class="block-content">
+TRepeater menampilkan kontennya secara berulang berdasarkan data yang diambil dari <tt>DataSource</tt>. Konten yang diulang dalam TRepeater disebut <i>items</i> sebuah kontrol yang dapat diakses melalui properti <tt>Items</tt>. Ketika <tt>dataBind()</tt> dipanggil, TRepeater membuat sebuah item untuk setiap baris data dan mengikat baris data ke item. Secara opsional, TDataList dapat mempunyai header, footer dan/atau pemisah antara item.
+</p>
+
+<p id="600401" class="block-content">
+Tata letak dari konten yang diulang dalam TDataList ditetapkan dengan template inline. Item TDataList, header, footer, dll. diturunkan dengan template terkait saat data sedang diikat ke pengulang.
+</p>
+
+<p id="600402" class="block-content">
+Sejak v3.1.0, tata letak juga bisa dietapkan oleh <i>penyaji</i>. Penyaji adalah kelas kontrol yang dapat diturunkan sebagai item datalist, header, dll. Penyaji dapat dilihat sebagai template eksternal (sebenarnya, ia juga merupakan kontrol tanpa-template). Penyaji bisa berupa kelas kontrol apapun. Dengan menggunakan penyaji, seseorang dapat menghindari penulisan panjang dan template yang kacau. Karena penyaji adalah sebuah kelas, ia juga membantu menggunakan kembali template yang sebelumnya mungkin disertekan di dalam template lain. Jika diimplementasikan dengan salah satu antarmuka berikut, penyaji akan diinisialisasi dengan properti tambahan yang relevan terhadap item penyaji:
+</p>
+
+<ul id="u1" class="block-content">
+<li><tt>IDataRenderer</tt> - properti <tt>Data</tt> akan disetel sebagai baris dari data terikat ke item penyaji. Banyak kontrol PRADO mengimplementasikan antarmuka ini, seperti <tt>TLabel</tt>, <tt>TTextBox</tt>, dll.</li>
+<li><tt>IItemDataRenderer</tt> - properti <tt>ItemIndex</tt> akan disetel sebagai indeks berbasis-nol pada item dalam koleksi item penyaji, dan properti <tt>ItemType</tt> sebagai tipe item (seperti <tt>TListItemType::Item</tt>). Untuk kenyamanan basis kelas, <tt>TRepeaterItemRenderer</tt> mengimplementasikan <tt>IDataItemRenderer</tt> dan dapat mempunyai template terkait karena diperluas dari <tt>TTemplateControl</tt>.</li>
+</ul>
+
+
+<p id="600403" class="block-content">
+Properti berikut dipakai untuk menetapkan tipe template dan penyaji datalist. Jika tipe konten didefinisikan dengan template dan penyaji, maka penyaji diambil lebih dulu.
+</p>
+<ul id="u2" class="block-content">
+<li><tt>ItemTemplate</tt>, <tt>ItemRenderer</tt> - untuk setiap baris data yang diulang.</li>
+<li><tt>AlternatingItemTemplate</tt>, <tt>AlternatingItemRenderer</tt>: untuk setiap pergantian baris data. Jika tidak disetel, masing-masing <tt>ItemTemplate</tt> atau <tt>ItemRenderer</tt> yang akan dipakai.</li>
+<li><tt>HeaderTemplate</tt>, <tt>HeaderRenderer</tt> - untuk header repeater.</li>
+<li><tt>FooterTemplate</tt>, <tt>FooterRenderer</tt> - untuk footer repeater.</li>
+<li><tt>SeparatorTemplate</tt>, <tt>SeparatorRenderer</tt> - untuk konten yang ditampilkan diantara item.</li>
+<li><tt>EmptyTemplate</tt>, <tt>EmptyRenderer</tt> - dipakai saat data yang terikat ke penyaji kosong.</li>
+</ul>
+
+
+<p id="600404" class="block-content">
+Untuk mempopulasikan data ke dalam item pengulag, setel <tt>DataSource</tt> ke obyek data yang benar, seperti array, <tt>TList</tt>, <tt>TMap</tt>, atau tabel database, dan kemudian panggil <tt>dataBind()</tt> untuk pengulang. Yaitu,
+</p>
+<com:TTextHighlighter Language="php" CssClass="source block-content" id="code_600125">
+class MyPage extends TPage {
+ public function onLoad($param) {
+ parent::onLoad($param);
+ if(!$this->IsPostBack) {
+ $this->Repeater->DataSource=$data;
+ $this->Repeater->dataBind();
+ }
+ }
+}
+</com:TTextHighlighter>
+
+<p id="600405" class="block-content">
+Ketika <tt>dataBind()</tt> dipanggil, TRepeater menjalani masa hidup seperti berikut untuk setiap baris data:
+</p>
+
+<ol id="u3" class="block-content">
+<li>buat item berdasarkan template atau penyaji</li>
+<li>setel baris data ke item</li>
+<li>munculkan event <tt>OnItemCreated</tt></li>
+<li>tambah item sebagai kontrol anak</li>
+<li>panggil <tt>dataBind()</tt> pada item</li>
+<li>munculkan event <tt>OnItemDataBound</tt></li>
+</ol>
+
+<p id="600406" class="block-content">
+Biasanya anda hanya perlu mengikat data ke pengulang saat halaman yang berisi pengulang mulai diminta. Ketika halaman adalah post back, pengulang akan mengembalikan secara otomatis seluruh konten, termasuk item, header, footer dan pemisah. Akan tetapi, baris data yang terkait dengan setiap item tidak akan ditemukan kembali dan menjadi null.
+</p>
+
+<p id="600407" class="block-content">
+Untuk mengakses data item pengulang dalam postbacks, gunakan salah satu cara berikut:
+</p>
+<ul id="u4" class="block-content">
+<li>Gunakan <tt>DataKeys</tt> untuk memperoleh kunci data terkait dengan item pengulang (repeater) yang ditetapkan dan gunakan kunci untuk mengambil data terkait dari beberapa penyimpanan persisten seperti misalnya DB. </li>
+<li>Simpan seluruh dataset dalam kondisi tampilan, yang akan mengembalikan dataset secara otomatis setelah postback. Bagaimanapun juga, harap berhati-hati jika ukuran dataset anda besar, ukuran halaman akan menjadi besar. Beberapa data kompleks mungkin juga mempunyai masalah serialisasi jika disimpan dalam kondisi tampilan.</li>
+</ul>
+
+
+<p id="600408" class="block-content">
+TRepeater memunculkan <tt>OnItemCommand</tt> kapan saja kontrol tombol di dalam beberapa item pengulang memunculkan event <tt>OnCommand</tt>. Oleh karena itu, anda bisa menangani semua event <tt>OnCommand</tt> di satu tempat dengan menulis pengendali event untuk event <tt>OnItemCommand</tt>.
+</p>
+
+<p id="600409" class="block-content">
+Contoh berikut memperlihatkan bagaimana menggunakan TRepeater guna menampilkan data tabular.
+</p>
+<com:RunBar PagePath="Controls.Samples.TRepeater.Sample1" />
+<p id="600410" class="block-content">
+TRepeater Dapat digunakan dalam situasi lebih kompleks. Sebagai contoh, kami tampilkan dalam contoh berikut bagaimana menggunakan pengulang yang diulang-ulang, misalnya pengulang dalam pengulang. Ini umum terlihat dalam penyajian data master-detail. Untuk menggunakan pengulang di dalam pengulang lain, untuk sebuah item untuk pengulang di luarnya dibuat, kita perlu menyetel sumber data detail untuk pengulang terdalam. Ini bisa dilakukan dengan merespon ke event <tt>OnItemDataBound</tt> pada pengulang terluar. Event <tt>OnItemDataBound</tt> dimunculkan setiap kali item pengulang terluar menyelesaikan penyatuan data. Dalam contoh berikut, kita mengeksploitasi event lain pada pengulang yang disebut <tt>OnItemCreated</tt>, yang dimunculkan setiap kali item pengulang (dan kontennya) baru saja dibuat. Kita respon ke event ini dengan menyetel warna latar belakang berbeda untuk item pengulang guna menyempurnakan tampilan latar belakang item berganti. Ini menghemat kita dari penulisan <tt>AlternatingItemTemplate</tt> untuk pengulang.
+</p>
+<com:RunBar PagePath="Controls.Samples.TRepeater.Sample2" />
+<p id="600411" class="block-content">
+Selain menampilkan data, TRepeater juga bisa dipakai untuk mengumpulkan data dari pengguna. Kontrol validasi dapat ditempatkan dalam template TRepeater guna memberifikasi bahwa input pengguna sudah benar.
+</p>
+<p id="600412" class="block-content">
+Demo <a href="../composer/index.php">Penyusun komponen PRADO</a> adalah contoh yang baik atas penggunaan tersebut. Ia menggunakan pengulang untuk mengumpulkan properti komponen dan definisi event. Para pengguna juga dapat menghapus atau menyesuaikan event dan propertinya, yang diimplementasikan dengan merespon ke event <tt>OnItemCommand</tt> pada pengulang.
+</p>
+<p id="600413" class="block-content">
+Lihat dalam contoh lain berikut yang memperlihatkan bagaimana menggunakan pengulang untuk mengumpulkan input pengguna.
+</p>
+<com:RunBar PagePath="Controls.Samples.TRepeater.Sample3" />
+
+<p id="600414" class="block-content">
+Contoh ini memperlihatkan bagaimana menggunakan penyaji item "drop-in", tersedia sejak v3.1.0. Penyaji ini ada dalam rilis PRADO. Mereka intinya kontrol yang mengimplementasikan antarmuka <tt>IDataRenderer</tt>. Kontrol Web umum, seperti <tt>TTextBox</tt>, <tt>TLabel</tt>, semuanya mengimplementasikan antarmuka ini. Ketika kontrol tersebut adalah penyaji item yang dipakai, properti <tt>Data</tt> ditempati dengan baris data yang sedang diikat ke item pengulang.
+</p>
+<com:RunBar PagePath="Controls.Samples.TRepeater.Sample4" />
+
+<p id="600415" class="block-content">
+Lebih sering, seseorang perlu mengkustomisasi tata letak item pengulang. Contoh di atas bergantng pada <tt>OnItemCreated</tt> untuk menyesuaikan penampilan pengulang. Pengulang item template lebih disukai dalam situasi ini, karena membolehkan kita untuk menyimpan tata letak dan konten yang lebih kompleks dalam sebuah item pengulang. Contoh berikut mengimplementasikan ulang contoh pengulang yang diulang-ulang menggunakan template item penyadi yang disebut <tt>RegionDisplay</tt>. seperti kita lihat, kode baru lebih mudah dimengerti dan dipelihara.
+</p>
+<com:RunBar PagePath="Controls.Samples.TRepeater.Sample5" />
+
+
+<div class="last-modified">$Id: Repeater.page 1688 2007-02-09 22:48:31Z xue $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/SafeHtml.page b/demos/quickstart/protected/pages/Controls/id/SafeHtml.page new file mode 100644 index 00000000..fdb1ea24 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/SafeHtml.page @@ -0,0 +1,25 @@ +<com:TContent ID="body" >
+
+<h1 id="4201">TSafeHtml</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TSafeHtml" />
+
+<p id="490308" class="block-content">
+<tt>TSafeHtml</tt> adalah kontrol yang membuang semua konten HTML yang berpotensi membahayakan. Ini terutama sebagai pelapis dari proyek <a href="http://pixel-apes.com/safehtml/">SafeHTML</a>. Menurut proyek SafeHTML, ia mencoba untuk mengamankan situasi berikut saat string ditampilkan kepada pengguna-akhir:
+</p>
+<ul id="u1" class="block-content">
+ <li>Tag pembuka tanpa tang penutupnya</li>
+ <li>penutupan tag tanpa tag pembukanya
+ <li>salah satu dari tag ini: base, basefont, head, html, body, applet, object, iframe, frame, frameset, script, layer, ilayer, embed, bgsound, link, meta, style, title, blink, xml, dll.</li>
+ <li>seiap atribut ini: on*, data*, dynsrc</li>
+ <li>javascript:/vbscript:/about: dll. protocols</li>
+ <li>ekspresi/perangai, dll. dalam style</li>
+ <li>konten aktif lainnya.</li>
+</ul>
+
+<p id="490309" class="block-content">
+Untuk menggunakan <tt>TSafeHtml</tt>, cukup kurung konten untuk diamankan dalam tag komponen <tt>TSafeHtml</tt> pada template. Konten bisa terdiri dari teks statis dan kontrol PRADO. Jika yang kedua, hasil penyajian kontrol akan aman.
+</p>
+
+<com:RunBar PagePath="Controls.Samples.TSafeHtml.Home" />
+
+<div class="last-modified">$Id: SafeHtml.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/Standard.page b/demos/quickstart/protected/pages/Controls/id/Standard.page new file mode 100644 index 00000000..abfca45b --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/Standard.page @@ -0,0 +1,135 @@ +<com:TContent ID="body" >
+
+<h1>Kontrol Standar</h1>
+<p>* tutorial untuk kontrol ini belum lengkap.</p>
+<ul id="u1" class="block-content">
+ <li>
+ <a href="?page=Controls.Button">TButton</a> mewakili tombol klik pada halaman Web, dipakai terutama sebagai pemicu postback halaman.
+ </li>
+
+ <li>
+ <a href="?page=Controls.CheckBox">TCheckBox</a> mewakili kotak centang pada halaman Web, bisa digunakan untuk mengumpulkan dua-kondisi input pengguna.
+ </li>
+
+ <li>
+ <a href="?page=Controls.ClientScript">TClientScript</a> menambahkan kode javascript ke halaman.
+ </li>
+
+ <li>
+ <a href="?page=Controls.ClientScriptLoader">TClientScriptLoader</a> mengambil pustaka javascript kustom.
+ </li>
+
+ <li>*
+ <a href="?page=Controls.ColorPicker">TColorPicker</a> mewakili field input yang mengambil nilai warna via dialog warna.
+ </li>
+
+ <li>
+ <a href="?page=Controls.DatePicker">TDatePicker</a> mewakili field input yang mengambil nilai tanggal via dialog kalender.
+ </li>
+
+ <li>
+ <a href="?page=Controls.Expression">TExpression</a> menerima ekspresi PHP dan menampilkan hasil evaluasi pada halaman Web.
+ </li>
+
+ <li>
+ <a href="?page=Controls.FileUpload">TFileUpload</a> mewakili field upload file, membolehkan pengguna mengirimkan file ke server.
+ </li>
+
+ <li>*
+ <a href="?page=Controls.Head">THead</a> mewakili elemen <head> pada halaman Web HTML. Diperlukan oleh halaman PRADO agar bisa memakai tema.
+ </li>
+
+ <li>
+ <a href="?page=Controls.HiddenField">THiddenField</a> mewakili field input tersembunyi pada halaman Web.
+ </li>
+
+ <li>
+ <a href="?page=Controls.HtmlArea">THtmlArea</a> mewakili field input teks WYSIWYG yang mengambil input pengguna dalam format HTML.
+ </li>
+
+ <li>
+ <a href="?page=Controls.HyperLink">THyperLink</a> mewakili hyperlink pada halaman Web.
+ </li>
+
+ <li>
+ <a href="?page=Controls.Image">TImage</a> mewakili gambar pada halaman Web.
+ </li>
+
+ <li>
+ <a href="?page=Controls.ImageButton">TImageButton</a> mewakili tombol klik yang memiliki gambar sebagai latar belakang, dipakai untuk memicu postback halaman.
+ </li>
+
+ <li>
+ <a href="?page=Controls.ImageMap">TImageMap</a> mewakili gambar pada halaman Web dengan bagian titik yang bisa diklik.
+ </li>
+
+ <li>
+ <a href="?page=Controls.InlineFrame">TInlineFrame</a> mewakili elemen <iframe> HTML pada halaman Web.
+ </li>
+
+ <li>
+ <a href="?page=Controls.JavascriptLogger">TJavascriptLogger</a> mewakili pencatat pada halaman Web yang bisa mencatat berbagai informasi JavaScript.
+ </li>
+
+ <li>
+ <a href="?page=Controls.Label">TLabel</a> mewakili label pada halaman Web. Label bisa dikustomisasi via berbagai atribut CSS.
+ </li>
+
+ <li>
+ <a href="?page=Controls.LinkButton">TLinkButton</a> mewakili hyperlink yang bisa melakukan postbacks halaman.
+ </li>
+
+ <li>
+ <a href="?page=Controls.Literal">TLiteral</a> mewakili teks statis tanpa tag HTML yang mengelilinginya pada halaman Web.
+ </li>
+
+ <li>
+ <a href="?page=Controls.MultiView">TMultiView</a> mewakili tempat untuk grup kontrol <tt>TView</tt>, masing-masing adalah tempat untuk kontrol lainnya. Kapan saja, sebanyak-banyaknya satu <tt>TView</tt> yang terlihat.
+ </li>
+
+ <li>
+ <a href="?page=Controls.OutputCache">TOutputCache</a> menghidupkan bagian cache atas output halaman dan dapat meningkatkan waktu respon halaman secara signifikan.
+ </li>
+
+ <li>
+ <a href="?page=Controls.Pager">TPager</a> membuatUI yang membolehkan pengguna untuk menetapkan halaman mana data ditampilkan secara interaktif dalam kontrol data-bound.
+ </li>
+
+ <li>
+ <a href="?page=Controls.Panel">TPanel</a> mewakili tempat untuk kontrol lain pada halaman Web. Dalam HTML, ia ditampilkan sebagai elemen <div>.
+ </li>
+
+ <li>
+ <a href="?page=Controls.PlaceHolder">TPlaceHolder</a> memesan tempat pada template kontrol. Ia menyisipkan konten body-nya di tempat itu.
+ </li>
+
+ <li>
+ <a href="?page=Controls.RadioButton">TRadioButton</a> mewakili tombol radio pada halaman Web. Dipakai terutama dalam sebuah grup di mana pengguna membuat pilihan.
+ </li>
+
+ <li>
+ <a href="?page=Controls.SafeHtml">TSafeHtml</a> menampilkan konten body dengan kepastian bahwa konten tidak berisi kode yang membahayakan (seperti <a href="?page=Advanced.Security">XSS</a>).
+ </li>
+
+ <li>
+ <a href="?page=Controls.Statements">TStatements</a> menerima beberapa pernyataan PHP dan menampilkan output standarnya pada halaman Web.
+ </li>
+
+ <li>
+ <a href="?page=Controls.Table">TTable</a> mewakili tabel HTML pada halaman Web. Dipakai bersama dengan <tt>TTableRow</tt> dan <tt>TTableCell</tt>.
+ </li>
+
+ <li>
+ <a href="?page=Controls.TextBox">TTextBox</a> mewakili field input teks pada halaman Web. Ia bisa mengumpulkan satu-baris, multi-baris atau input teks sandi dari pengguna.
+ </li>
+
+ <li>
+ <a href="?page=Controls.TextHighlighter">TTextHighlighter</a> menerangi konten body berdasarkan penerang sintaks, seperti PHP, XML, PRADO, dll.
+ </li>
+
+ <li>
+ <a href="?page=Controls.Wizard">TWizard</a> mewakili formulir multi-langkah yang bisas mengambil input pengguna langkah demi langkah. Mirip dengan bimbingan instalasi Windows.
+ </li>
+</ul>
+
+<div class="last-modified">$Id: Standard.page 1846 2007-04-07 10:35:16Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/Statements.page b/demos/quickstart/protected/pages/Controls/id/Statements.page new file mode 100644 index 00000000..fdda7532 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/Statements.page @@ -0,0 +1,40 @@ +<com:TContent ID="body" >
+
+<h1 id="4301">TStatements</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TStatements" />
+
+<p id="500310" class="block-content">
+<tt>TStatements</tt> mengevaluasi rangkaian pernyataan PHP dan menampilkan konten yang disajikan oleh pernyataan. Untuk menetapkan pernyataan PHP yang dievaluasi, setel properti <tt>Statements</tt>. Sebagai contoh, tag komponen berikut menampilkan waktu saat ini pada halaman Web,
+</p>
+<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_500111">
+<com:TStatements>
+ <prop:Statements>
+ setlocale(LC_ALL, 'nl_NL');
+ echo strftime("%A %e %B %Y",time());
+ </prop:Statements>
+</com:TStatements>
+</com:TTextHighlighter>
+
+<p id="500311" class="block-content">
+Catatan, <tt>TStatements</tt> mengevaluasi pernyataan PHP selama menyajikan masa hidup kontrol. Tidak seperti <tt>TExpression</tt>, <tt>TStatements</tt> hanya menampilkan konten 'echoed' di dalam pernyataan.
+</p>
+
+<p id="500312" class="block-content">
+Konteks pernyataan dalam kontrol <tt>TStatements</tt> adalah kontrol itu sendiri. Yakni, <tt>$this</tt> mewakili obyek kontrol jika ia ada dalam pernyataan. Sebagai contoh, tag pernyataan berikut akan menampilkan judul halaman berisi kontrol <tt>TStatements</tt>.
+</p>
+<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_500112">
+<com:TStatements>
+ <prop:Statements>
+ $page=$this->Page;
+ echo $page->Title;
+ </prop:Statements>
+</com:TStatements>
+</com:TTextHighlighter>
+
+<p id="500313" class="block-content">
+Harap berhati-hati, karena <tt>TStatements</tt> membolehkan eksekusi kode PHP bebas, secara umum anda jangan menggunakannya untuk mengevaluasi kode PHP yang dikirimkan oleh pengguna aplikasi anda.
+</p>
+
+<com:RunBar PagePath="Controls.Samples.TStatements.Home" />
+
+<div class="last-modified">$Id: Statements.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/TabPanel.page b/demos/quickstart/protected/pages/Controls/id/TabPanel.page new file mode 100644 index 00000000..7e7688f7 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/TabPanel.page @@ -0,0 +1,55 @@ +<com:TContent ID="body" >
+
+<h1>TTabPanel</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TTabPanel" />
+
+<p>
+<tt>TTabPanel</tt> menampilkan panel bertab. Para pengguna dapat mengklik pada bar tab untuk beralih diantara tampilan tab yang berbeda. Setiap tampilan tab adalah panel independen yang dapat berisi konten bebas.
+</p>
+
+<p>
+Kontrol <tt>TTabPanel</tt> terdiri dari satu atau beberapa kontrol <tt>TTabView</tt> yang mewakili tampilan tab yang mungkin. Kapan saja, hanya satu tampilan tab terlihat (aktif), yang ditetapkan oleh setiap properti berikut:
+</p>
+
+<ul>
+<li><tt>ActiveViewIndex</tt> - indeks integer berbasis-nol pada tampilan dalam koleksi view.</li>
+<li><tt>ActiveViewID</tt> - ID teks pada tampilan yang telihat.</li>
+<li><tt>ActiveView</tt> - turunan tampilan yang terlihat.</li>
+</ul>
+
+<p>
+Jika <tt>ActiveViewIndex</tt> dan <tt>ActiveViewID</tt> keduanya disetel, yang kedua diambil lebih dahulu.
+</p>
+
+<p>
+<tt>TTabPanel</tt> menggunakan CSS untuk menetapkan penampilan bat tab dan panel. Standarnya, file CSS yang disertakan akan diterbitkan berisi CSS standar untuk <tt>TTabPanel</tt>. Anda juga dapat menggunakan file CSS sendiri dengan menetapkan properti <tt>CssUrl</tt>. Properti berikut menetapkan kelas CSS yang dipakai untuk elemen div dalam <tt>TTabPanel</tt>:
+</p>
+
+<ul>
+<li><tt>CssClass</tt> - nama kelas CSS untuk elemen div terluar (standarnya 'tab-panel');</li>
+<li><tt>TabCssClass</tt> - nama kelas CSS untuk tab non aktif elemen div (standarnya 'tab-normal');</li>
+<li><tt>ActiveTabCssClass</tt> - nama kelas CSS untuk tab aktif elemen div (standarnya 'tab-active');</li>
+<li><tt>ViewCssClass</tt> - kelas CSS untuk elemen div menutupi tampilan konten (standarnya 'tab-view');</li>
+</ul>
+
+<p>
+Untuk menggunakan TTabPanel, tulis template seperti berikut:
+</p>
+
+<com:TTextHighlighter Language="prado" CssClass="source">
+ <com:TTabPanel>
+ <com:TTabView Caption="View 1">
+ content for view 1
+ </com:TTabView>
+ <com:TTabView Caption="View 2">
+ content for view 2
+ </com:TTabView>
+ <com:TTabView Caption="View 3">
+ content for view 3
+ </com:TTabView>
+ </com:TTabPanel>
+</com:TTextHighlighter>
+
+<com:RunBar PagePath="Controls.Samples.TTabPanel.Home" />
+
+<div class="last-modified">$Id: TabPanel.page 2075 2007-07-25 15:43:06Z xue $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/Table.page b/demos/quickstart/protected/pages/Controls/id/Table.page new file mode 100644 index 00000000..64ef0e42 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/Table.page @@ -0,0 +1,11 @@ +<com:TContent ID="body" >
+
+<h1 id="4401">TTable</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TTable" />
+
+<p id="510314" class="block-content">
+<tt>TTable</tt> menampilkan tabel HTML pada halaman. ia dipakai bersama dengan <tt>TTableRow</tt> dan <tt>TTableCell</tt> untuk membolehkan memanipulasi tabel HTML secara programatis. Baris dari tabel disimpan dalam properti <tt>Rows</tt>. Anda dapat menyetel tabel cellspacing dan cellpadding masing-masing melalui properti <tt>CellSpacing</tt> dan <tt>CellPadding</tt>. Judul tabel dapat ditetapkan melalui <tt>Caption</tt> di mana penjajarannya ditetapkan dengan <tt>CaptionAlign</tt>. Properti <tt>GridLines</tt> menunjukan bagaimana tabel harus menampikan bingkainya, dan <tt>BackImageUrl</tt> membolehkan tabel untuk memiliki gambar latar belakang.
+</p>
+<com:RunBar PagePath="Controls.Samples.TTable.Home" />
+
+<div class="last-modified">$Id: Table.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/TextBox.page b/demos/quickstart/protected/pages/Controls/id/TextBox.page new file mode 100644 index 00000000..b91810cc --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/TextBox.page @@ -0,0 +1,11 @@ +<com:TContent ID="body" >
+
+<h1 id="4501">TTextBox</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TTextBox" />
+
+<p id="520315" class="block-content">
+<tt>TTextBox</tt> menampilkan kotak teks pada halaman Web. Konten dalam kotak teks ditentukan oleh properti <tt>Text</tt>. Anda dapat membuat teks <tt>SingleLine</tt>, a <tt>MultiLine</tt>, atau <tt>Kata sandi</tt> dengan menyetel properti <tt>TextMode</tt>. Properti <tt>Rows</tt> dan <tt>Columns</tt> menetapkan dimensinya. Jika <tt>AutoPostBack</tt> adalah true, perubahan konten dalam kotak teks dan kemudian memindahkan fokur keluar darinya akan menyebabkan aksi postback.
+</p>
+<com:RunBar PagePath="Controls.Samples.TTextBox.Home" />
+
+<div class="last-modified">$Id: TextBox.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/TextHighlighter.page b/demos/quickstart/protected/pages/Controls/id/TextHighlighter.page new file mode 100644 index 00000000..f99bc46d --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/TextHighlighter.page @@ -0,0 +1,26 @@ +<com:TContent ID="body" >
+
+<h1 id="4601">TTextHighlighter</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TTextHighlighter" />
+
+<p id="530316" class="block-content">
+<tt>TTextHighlighter</tt> melakukan penerangan sintaks untuk konten badannya, termasuk teks statis dan hasil penyajian dari kontrol anaknya. Teks yang sedang diterangi mengikuti sintaks <tt>Language</tt> yang ditetapkan, yang dapat berupa 'php' (standar), 'prado', 'css', 'html', dll. Di sini, 'prado' terdiri dari sintaks template kontrol PRADO.
+</p>
+<p id="530317" class="block-content">
+Jika nomor baris diinginkan di depan setiap baris, setel <tt>ShowLineNumbers</tt> ke true.
+</p>
+<p id="530318" class="block-content">
+Untuk menggunakan <tt>TTextHighlighter</tt>, cukup kurung konten yang sintaksnya akan diterangi di dalam badan pada kontrol <tt>TTextHighlighter</tt>. Contoh berikut menerangi bagian kode PHP,
+</p>
+<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_530113">
+<com:TTextHighlighter ShowLineNumbers="true">
+<?php
+$str = 'one|two|three|four';
+print_r(explode('|', $str, 2)); // akan mengeluarkan array
+?>
+</com:TTextHighlighter>
+</com:TTextHighlighter>
+
+<com:RunBar PagePath="Controls.Samples.TTextHighlighter.Home" />
+
+<div class="last-modified">$Id: TextHighlighter.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/Validation.page b/demos/quickstart/protected/pages/Controls/id/Validation.page new file mode 100644 index 00000000..e9a95fe9 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/Validation.page @@ -0,0 +1,216 @@ +<com:TContent ID="body" >
+
+<h1 id="4901">Kontrol Validasi</h1>
+
+<p id="560337" class="block-content">
+Kontrol validasi disebut validator, melakukan validasi terhadap nilai data yang dimasukan-pengguna saat ia ditulis kembali ke server. Validasi dipicu oleh kontrol postback, seperti properti <tt>TButton</tt>, <tt>TLinkButton</tt> atau <tt>TTextBox</tt> (di bawah mode <tt>AutoPostBack</tt>) di mana properti <tt>CausesValidation</tt> adalah true.
+</p>
+
+<p id="560338" class="block-content">
+Validasi selalu dilakukan pada sisi server. Jika <tt>EnableClientScript</tt> adalah true dan browser klien mendukung JavaScript, validator juga dapat melakukan validasi sisi-klien. Validasi sisi-klien akan memvalidasi input pengguna sebelum ia mengirimkannya ke server. Data formulir tidak akan dikirmkan jika ada kesalahan terdeteksi. Ini menghindari informasi yang diperlukan untuk validasi sisi-server.
+</p>
+
+<p id="560339" class="block-content">
+Validator dengan berbagai set properti umum yang didefinisikan dalam basis kelas <tt>TBaseValidator</tt> dan didaftarkan sebagai berikut,
+</p>
+<ul id="u1" class="block-content">
+<li><tt>ControlToValidate</tt> menetapkan kontrol input yang divalidasi. Properti ini harus disetel ke path ID dari kontrol input. Path ID adalah ID titik-terkoneksi dari kontrol yang menjangkai dari tempat penamaan validator ke kontrol sasaran.</li>
+<li><tt>ErrorMessage</tt> menetapkan pesan kesalahan untuk ditampilkan seandainya validator terkait gagal.</li>
+<li><tt>Text</tt> mirip dengan <tt>ErrorMessage</tt>. Jika keduanya ada, <tt>Text</tt> diambil lebih dulu. Properti ini berguna saat dipakai bersama dengan <tt>TValidationSummary</tt>.</li>
+<li><tt>ValidationGroup</tt> menetapkan di grup mana validator berada. Validator hanya akan melakukan validasi jika postback saat ini dipicu oleh kontrol yang berada dalam grup yang sama.</li>
+<li><tt>EnableClientScript</tt> menetapkan apakah validasi harus dilakukan di sisi-klien atau server. Standarnya dihidupkan.</li>
+<li><tt>Display</tt> menetapkan bagaimana pesan kesalahan ditampilkan. Ia mengambil salah satu dari tiga nilai berikut ini:
+ <ul>
+ <li><tt>None</tt> - pesn kesalahan tidak akan ditampilkan meskipun validator gagal.</li>
+ <li><tt>Static</tt> - spasi untuk menampilkan pesan kesalahan disiapkan. Oleh karena itu, menampilkan pesan kesalahan tidak akan mengubah tata letak halaman anda yang sudah ada.</li>
+ <li><tt>Dynamic</tt> - spasi untuk menampilkanpesan kesalahan TIDAK disiapkan. Oleh karena itu, menampilkan pesan kesalahan akan menggeser tata letak halaman anda (biasanya ke bawah).</li>
+ </ul>
+</li>
+<li><tt>ControlCssClass</tt> - kelas CSS yang diterapkan ke kontrol yang sedang divalidasi seandainya validasi gagal.</li>
+<li><tt>FocusOnError</tt> - menyetel fokus di tempat validasi jika validasi gagal. Standarnya false.</li>
+<li><tt>FocusElementID</tt> - ID dari elemen HTML yang akan menerima fokus jika validasi gagal dan <tt>FocusOnError</tt> adalah true.</li>
+</ul>
+
+<h1 id="116008">Kontrol Validasi Prado</h1>
+<a name="TRequiredFieldValidator"></a>
+<h2 id="4902">TRequiredFieldValidator</h2>
+<p id="560340" class="block-content">
+TRequiredFieldValidator memastikan bahwa pengguna memasukan beberapa data dalam field input yang ditetapkan. Standarnya TRequiredFieldValidator akan memeriksa apakah input pengguna kosong atau tidak. Validasi gagal jika input kosong. Dengan menyetel <tt>InitialValue</tt>, validator dapat memeriksa apakah input pengguna berbeda dari <tt>InitialValue</tt>. Jika tidak, validasi gagal.
+</p>
+<com:RunBar PagePath="Controls.Samples.TRequiredFieldValidator.Home" />
+
+<a name="TRegularExpressionValidator"></a>
+<h2 id="4903">TRegularExpressionValidator</h2>
+<p id="560341" class="block-content">
+TRegularExpressionValidator memverifikasi input pengguna terhadap pola reguler. Validasi gagal jika input tidak sama dengan pola. Ekspresi reguler bisa ditetapkan dengan properti <tt>RegularExpression</tt>. Beberapa ekspresi reguler yang umumnya dipakai termasuk:
+</p>
+<ul id="u2" class="block-content">
+<li>Setidaknya 6 karakter: <code>[\w]{6,}</code></li>
+<li>Nomor Telepon Jepang: <code>(0\d{1,4}-|\(0\d{1,4}\) ?)?\d{1,4}-\d{4}</code></li>
+<li>Kode Pos Jepang: <code>\d{3}(-(\d{4}|\d{2}))?</code></li>
+<li>Nomor Telepon P.R.C.: <code>(\(\d{3}\)|\d{3}-)?\d{8} </code></li>
+<li>Kode Pos P.R.C.: <code>\d{6}</code></li>
+<li>Nomor Keamanan Sosial P.R.C.: <code>\d{18}|\d{15}</code></li>
+<li>Nomor Telepon Amerika: <code>((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}</code></li>
+<li>Kode ZIP Amerika: <code>\d{5}(-\d{4})?</code></li>
+<li>Nomor Keamanan Sosial Amerika: <code>\d{3}-\d{2}-\d{4}</code></li>
+</ul>
+<p id="560342" class="block-content">
+Pola ekspresi reguler lebih jauh dapat ditemukan di Internet, misalnya
+<a href="http://regexlib.com/">http://regexlib.com/</a>.
+</p>
+<p id="560343" class="block-content">
+Catatan, TRegularExpressionValidator hanya memeriksa input pengguna yang tidak kosong. Gunakan TRequiredFieldValidator untuk memastikan input pengguna tidak kosong.
+</p>
+<com:RunBar PagePath="Controls.Samples.TRegularExpressionValidator.Home" />
+
+<h2 id="TEmailAddressValidator">TEmailAddressValidator</h2>
+<p id="560344" class="block-content">
+TEmailAddressValidator memverifikasi bahwa input pengguna adalah alamat email yang benar. Validator menggunakan ekspresi reguler untuk memeriksa apakah input adalah format alamat email yang benar. Jika <tt>CheckMXRecord</tt> adalah true, validator juga akan memeriksa apakah rekaman MX yang diindikasikan dalam alamat email adalah benar, <tt>checkdnsrr()</tt> tersedia dalam PHP yang diinstalasi.
+</p>
+<p id="560345" class="block-content">
+Catatan, jika input yang divalidasi kosong, TEmailAddressValidator tidak akan melakukan validasi. Gunakan TRequiredFieldValidator untuk memastikan nilai tidak kosong.
+</p>
+<com:RunBar PagePath="Controls.Samples.TEmailAddressValidator.Home" />
+
+<a name="TCompareValidator"></a>
+<h2 id="4904">TCompareValidator</h2>
+<p id="560346" class="block-content">
+TCompareValidator membandingkan input pengguna dengan nilai konstan yang ditetapkan oleh <tt>ValueToCompare</tt>, atau input pengguna lain yang ditetapkan oleh <tt>ControlToCompare</tt>. Properti <tt>Operator</tt> menetapkan bagaimana untuk membandingkan nilai, yang menyertakan <tt>Equal</tt>, <tt>NotEqual</tt>, <tt>GreaterThan</tt>, <tt>GreaterThanEqual</tt>, <tt>LessThan</tt> dan <tt>LessThanEqual</tt>. Sebelum perbandingkan, nilai yang dibandingkan akan diubah ke tipe yang ditetapkan oleh <tt>DataType</tt> seperti didaftarkan sebagai berikut,
+</p>
+<ul id="u3" class="block-content">
+<li><tt>String</tt> - Tipe data string.</li>
+<li><tt>Integer</tt> - Tipe data integer signed 32-bit.</li>
+<li><tt>Float</tt> - Tipe data pecahan presisi-ganda.</li>
+<li><tt>Date</tt> - Tipe data tanggal. Format tanggal dapat ditetapkan dengan menyeting properti <tt>DateFormat</tt>, yang harus dikenal oleh <tt>TSimpleDateFormatter</tt>. Jika properti tidak disetel, sintaks tanggal GNU diasumsikan.</li>
+</ul>
+<p id="560347" class="block-content">
+Catatan, jika input yang sedang divalidasi kosong, TEmailAddressValidator tidak akan melakukan validasi. Gunakan TRequiredFieldValidator untuk memastikan nilai tidak kosong.
+</p>
+<p id="560348" class="block-content">
+<b>N.B.</b> Jika memvalidasi terhadap <a href="?page=Controls.DatePicker">TDatePicker</a> properti <tt>DataType</tt> harus sama dengan "Date" dan properti <tt>DateFormat</tt> pada validator harus sama dengan <tt>DateFormat</tt> pada <a href="?page=Controls.DatePicker">TDatePicker</a>.
+</p>
+<com:RunBar PagePath="Controls.Samples.TCompareValidator.Home" />
+
+<a name="TDataTypeValidator"></a>
+<h2 id="4905">TDataTypeValidator</h2>
+<p id="560349" class="block-content">
+TDataTypeValidator memverifiksai apakah data input adalah tipe spesifik sepeti ditunjukan oleh <tt>DataType</tt>. Tipe data dapat diperiksa kembali apakah sama seperti yang ada dalam TCompareValidator.
+</p>
+<p id="560350" class="block-content">
+<b>N.B.</b> Jika memvalidasi terhadap <a href="?page=Controls.DatePicker">TDatePicker</a> properti <tt>DataType</tt> harus sama dengan "Date" dan properti <tt>DateFormat</tt> pada validator harus sama dengan <tt>DateFormat</tt> pada <a href="?page=Controls.DatePicker">TDatePicker</a>.
+</p>
+
+
+<com:RunBar PagePath="Controls.Samples.TDataTypeValidator.Home" />
+
+<a name="TRangeValidator"></a>
+<h2 id="4906">TRangeValidator</h2>
+<p id="560351" class="block-content">
+TRangeValidator memverifikasi apakah nilai input di dalam jangkauan yang ditetapkan. TRangeValidator menggunakan properti kunci untuk melakukan validasinya. Properti <tt>MinValue</tt> dan properti <tt>MaxValue</tt> menetapkan nilai minimum dan maksimum dari jangkauan yang benar. Properti <tt>DataType</tt> menetapkan tipe data dari nilai yang sedang divalidasi. Pertama, nilai akan diubah ke dalam tipe yang ditetapkan dan kemudian dibandingkan dengan jangkauan yang benar. Tipe data bisa diperiksa apakah sama dengan yang ada dalam TCompareValidator.
+</p>
+
+<p id="range_strict" class="block-content">
+Jika properti <tt>StrictComparison</tt> disetel ke <tt>true</tt>, maka jangkauan dibandingkan semata-mata kurang dari <tt>MaxValue</tt> dan/atau lebih besar dari <tt>MinValue</tt>.
+</p>
+
+<p id="560352" class="block-content">
+<b>N.B.</b> Jika memvalidasi terhadap <a href="?page=Controls.DatePicker">TDatePicker</a> properti <tt>DataType</tt> harus sama dengan "Date" dan properti <tt>DateFormat</tt> pada validator harus sama dengan <tt>DateFormat</tt> pada <a href="?page=Controls.DatePicker">TDatePicker</a>.
+</p>
+
+<com:RunBar PagePath="Controls.Samples.TRangeValidator.Home" />
+
+<a name="TCustomValidator"></a>
+<h2 id="4907">TCustomValidator</h2>
+<p id="560353" class="block-content">
+TCustomValidator melakukan validasi didefinisikan-pengguna (baik sisi-server atau sisi-klien ataupun keduanya) pada kontrol input.
+</p>
+<p id="560354" class="block-content">
+Untuk membuat fungsi validasii sisi-server, sediakan pengendali untuk event <tt>OnServerValidate</tt> yang melakukan validasi. String data pada kontrol input untuk memvalidasi dapat diakses dengan parameter event properti <tt>Value</tt>. Hasil validasi harus disimpan dalam properti <tt>IsValid</tt> pada parameter.
+</p>
+<p id="560355" class="block-content">
+Untuk membuat fungsi validasi sisi-klien, tambahkan fungsi validasi javascript ke template halaman dan tempatkan namanya ke properti <tt>ClientValidationFunction</tt>. Fungsi harus memiliki tanda sebagai berikut:
+</p>
+<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_560118">
+<script type="text/javascript">
+function ValidationFunctionName(sender, parameter)
+{
+ // if(parameter == ...)
+ // return true;
+ // else
+ // return false;
+}
+</script>
+</com:TTextHighlighter>
+<com:RunBar PagePath="Controls.Samples.TCustomValidator.Home" />
+
+<a name="TValidationSummary"></a>
+<h2 id="4908">TValidationSummary</h2>
+<p id="560356" class="block-content">
+TValidationSummary menampilkan ringkasan dari kesalahan inline validasi pada halaman Web, dalam kotak pesan, atau keduanya.
+</p>
+<p id="560357" class="block-content">
+Standarnya ringkasan validasi akan mengumpulkan <tt>ErrorMessage</tt> dari semua validator yang gagal pada halaman. Jika <tt>ValidationGroup</tt> tidak kosong, hanya validator itu yang dimiliki grup akan menampilkan pesan kesaslahannya dalam ringkasan.
+</p>
+<p id="560358" class="block-content">
+Ringkasan dapat ditampilkan sebagai daftar, daftar bertitik, atau satu paragraf berdasarkan properti <tt>DisplayMode</tt>. Pesan yang ditampilkan dapat diawali dengan <tt>HeaderText</tt>. Ringkasan dapat ditampilkan pada halaman Web atau kotak pesan JavaScript, masing-masing dengan menyetel properti <tt>ShowSummary</tt> dan <tt>ShowMessageBox</tt>. Catatan, yang terakhir hanya efektif saat <tt>EnableClientScript</tt> adalah true.
+</p>
+<com:RunBar PagePath="Controls.Samples.TValidationSummary.Home" />
+
+<h1 id="123123">Berinteraksi dengan Validator</h1>
+<h2 id="116009">Mereset atau Membersihkan Validator</h2>
+<p id="1212323">
+Validator bisa mereset pada sisi-klien menggunakan javascript dengan memanggil
+<tt>Prado.Validation.reset(groupID)</tt> di mana <tt>groupID</tt> adalah nama pengelompokan. Jika <tt>groupID</tt> adalah null, maka validator tanpa pengelompokan yang dipakai.
+</p>
+
+<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_560118a">
+<script type="text/javascript">
+function reset_validator()
+{
+ Prado.Validation.reset("group1");
+}
+</script>
+</com:TTextHighlighter>
+<com:RunBar PagePath="Controls.Samples.ResetValidation.Home" />
+
+<h2 id="5301">Validasi Kondisional Sisi Server dan Klien</h2>
+<p id="560359" class="block-content">
+ Semua validator berisi event berikut.
+ Event terkait untuk sisi klien tersedia sebagai sub-properti
+ dari properti <tt>ClientSide</tt> pada validator.
+</p>
+ <ul id="u4" class="block-content">
+ <li>Event <tt>OnValidate</tt> muncul sebelum fungsi validasi validator yang dipanggil.</li>
+ <li>Event <tt>OnValidationSuccess</tt> muncul setelah validator sukses memvalidasi kontrol.</li>
+ <li>Event <tt>OnValidationError</tt> muncul setelah validator gagal memvalidasi.</li>
+ </ul>
+
+<div class="note"><b class="tip">Catatan:</b>
+Untuk Prado sebelum versi 3.1 nama properti adalah <tt>OnError</tt> dan <tt>OnSuccess</tt>. Untuk Prado versi 3.1 dan berikutnya masing-masing <tt>OnValidationError</tt> dan <tt>OnValidationSuccess</tt>.
+</div>
+
+<p id="560360" class="block-content">Contoh berikut memunculkan pesan yang mengatakan "hello" saat validator gagal pada sisi-klien.
+<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_560119">
+<com:TRequiredFieldValidator ... >
+ <prop:ClientSide.OnValidationError>
+ alert("hello");
+ </prop:ClientSide.OnValidationError>
+</com:TRequiredFieldValidator>
+</com:TTextHighlighter>
+Hasil event fungsi callback sisi-klien adalah dalam bentuk seperti berikut.
+<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_560120">
+function onErrorHandler(sender, parameter)
+{
+ alert("hello");
+}
+</com:TTextHighlighter>
+di mana <tt>sender</tt> adalah vaidator sisi-klien saat ini dan <tt>parameter</tt> adalah kontrol yang memanggil validator.
+</p>
+<h3 id="5302">Contoh Validasi Kondisional</h3>
+<p id="560361" class="block-content">
+Contoh berikut memperlihatkan penggunaan event validator sisi-klien dan sisi server. Contoh mendemonstrasikan validasi kondisional. Catatan bahwa, kita perlu menuliskan kode untuk sisi server dan klien. Selanjutnya, pada sisi server, kita perlu menghidupkankembali validator kondisional agar kode javascript dihasilkan tanpa mempedulikan apapun (sebaliknya, validator sisi-klien tidak tersedia).
+<com:RunBar PagePath="Controls.Samples.TClientSideValidator.Home" />
+</p>
+
+<div class="last-modified">$Id: Validation.page 1902 2007-05-07 04:17:37Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/Wizard.page b/demos/quickstart/protected/pages/Controls/id/Wizard.page new file mode 100644 index 00000000..b8b44063 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/Wizard.page @@ -0,0 +1,100 @@ +<com:TContent ID="body" >
+
+<h1 id="4701">TWizard</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TWizard" />
+
+<h2 id="4702">Tinjauan</h2>
+<p id="540319" class="block-content">
+<tt>TWizard</tt> 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 <tt>konten langkah</tt> adalah konten utama pada langkah bimbingan untuk diselesaikan oleh para pengguna, <tt>header</tt> merujuk ke konten header yang umum bagi seluruh langkah, <tt>navigasi</tt> berisi tombol yang membolehkan pengguna untuk menjelajahi langkah demi langkah, dan <tt>bar samping</tt> berisi daftar hiperlink di mana para pengguna dapat menjangkau ke setiap langkah dengan satu klik. Penampakan bar samping dapat dihidup matikan dengan menyetel <tt>ShowSideBar</tt>.
+</p>
+<img src="<%~wizard.gif%>" alt="components of wizard" />
+
+<p id="540320" class="block-content">
+Standarnya <tt>TWizard</tt> menyertakan komponen di atas dalam sebuah tabel HTML agar bar samping bisa ditampilkan di kiri sementara sisanya di kanan. Jika <tt>UseDefaultLayout</tt> 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>.
+</p>
+
+<p id="540321" class="block-content">
+Langkah bimbingan disajikan dengan <tt>TWizardStep</tt> dan dipelihara dalam <tt>TWizard</tt> melalui properti <tt>WizardSteps</tt>. Kapan saja hanya satu yang terlihat, yang ditentukan oleh properti <tt>ActiveStep</tt>. Properti <tt>ActiveStepIndex</tt> memberikan indeks pada langkah yang aktif dalam koleksi langkah. Mengklik pada tombol navigasi dapat mengaktifkan langkah bimbingan yang berbeda.
+</p>
+
+<p id="540322" class="block-content">
+Langkah bimbingan biasanya ditambahkan ke bimbingan melalui template seperti berikut,
+</p>
+
+<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_540114">
+<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>
+</com:TTextHighlighter>
+
+<p id="540323" class="block-content">
+Dalam contoh di atas, <tt>StepType</tt> merujuk ke tipe langkah bimbingan, yang dapat mempengaruhi bagaimana penampilan navigasi dan perilaku langkah. Langkah bimbingan dapat berupa salah satu dari tipe berikut:
+</p>
+<ul id="u1" class="block-content">
+ <li><tt>Start</tt> - langkah pertama dalam bimbingan.</li>
+ <li><tt>Step</tt> - langkah internal dalam bimbiingan.</li>
+ <li><tt>Finish</tt> - langkah terakhir yang membolehkan interaksi pengguna.</li>
+ <li><tt>Complete</tt> - langkah yang memperlihatkan ringkasan kepada penngguna. Dalam langkah ini, bar samping dan panel navigasi tidak terlihat. Selanjutnya, langkah ini biasanya tidak membolehkan interaksi pengguna.</li>
+ <li><tt>Auto</tt> - tipe langkah ditentukan oleh bimbingan secara otomatis.</li>
+</ul>
+
+
+<h2 id="4703">Menggunakan TWizard</h2>
+
+<h3 id="4704">Contoh Bimbingan Satu-Langkah</h3>
+<p id="540324" class="block-content">
+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.
+</p>
+<com:RunBar PagePath="Controls.Samples.TWizard.Sample1" />
+
+<h3 id="4705">Mengkustomisasi Gaya Bimbingan</h3>
+<p id="540325" class="block-content">
+<tt>TWizard</tt> 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:
+</p>
+<ul id="u2" class="block-content">
+ <li>Header - <tt>HeaderStyle</tt>.</li>
+ <li>Langkah - <tt>StepStyle</tt>.</li>
+ <li>Navigasi - <tt>NavigationStyle</tt>, <tt>StartNextButtonStyle</tt>, <tt>StepNextButtonStyle</tt>, <tt>StepPreviousButtonStyle</tt>, <tt>FinishPreviousButtonStyle</tt>, <tt>FinishCompleteButtonStyle</tt>, <tt>CancelButtonStyle</tt>.</li>
+ <li>Bar samping - <tt>SideBarStyle</tt>, <tt>SideBarButtonStyle</tt>.</li>
+</ul>
+<com:RunBar PagePath="Controls.Samples.TWizard.Sample2" />
+
+<h3 id="4706">Mengkustomisasi Navigasi Bimbingan</h3>
+<p id="540326" class="block-content">
+Berikut adalah set langkah bimbingan, <tt>TWizard</tt> mendukung tiga cara navigasi diantaranya:
+</p>
+<ul id="u3" class="block-content">
+ <li>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 <tt>TWizard</tt>.</li>
+ <li>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 <tt>AllowReturn</tt> ke false.</li>
+ <li>Nonlinear - Input pengguna dalam langkah menentukan langkah mana berikutnya. Untuk melakukannya, setel <tt>ActiveStepIndex</tt> 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.</li>
+</ul>
+<com:RunBar PagePath="Controls.Samples.TWizard.Sample3" />
+
+<h3 id="4707">Menggunakan Template dalam Bimbingan</h3>
+<p id="540327" class="block-content">
+<tt>TWizard</tt> mendukung kontrol konkrit dari penampilannya melalui template. Dalam keadaan tertentu, ia menyediakan properti template yang membolehkan kustomisasi lengkap pada header, navigasi dan bar samping.
+</p>
+<ul id="u4" class="block-content">
+ <li>Header - <tt>HeaderTemplate</tt>.</li>
+ <li>Navigation - <tt>StartNavigationTemplate</tt>, <tt>StepNavigationTemplate</tt>, <tt>FinishNavigationTemplate</tt>.</li>
+ <li>Side bar - <tt>SideBarTemplate</tt>.</li>
+</ul>
+<com:RunBar PagePath="Controls.Samples.TWizard.Sample4" />
+
+<h3 id="4708">Menggunakan Langkah Bimbingan Bertemplate</h3>
+<p id="540328" class="block-content">
+Langkah bimbingan juga dapat diberi template. Dengan menggunakan <tt>TTemplatedWizardStep</tt>, seseorang dapat mengkustomisasi konten langkah dan navigasi melalui masing-masing properti <tt>ContentTemplate</tt> dan <tt>NavigationTemplate</tt>. Ini berguna untuk pengembang kontrol guna membangun bimbingan khusus seperti registrasi pengguna, kereta belanja, dll.
+</p>
+<com:RunBar PagePath="Controls.Samples.TWizard.Sample5" />
+
+<div class="last-modified">$Id: Wizard.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/id/wizard.gif b/demos/quickstart/protected/pages/Controls/id/wizard.gif Binary files differnew file mode 100644 index 00000000..9faf580d --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/id/wizard.gif |
