From e2f3b5fce11e0ced17f6a6df7c08a98cfa0fa540 Mon Sep 17 00:00:00 2001 From: kabayan <> Date: Thu, 23 Aug 2007 10:25:17 +0000 Subject: Indonesian QuickStart Controls without Samples --- .../protected/pages/Controls/id/Button.page | 16 ++ .../protected/pages/Controls/id/CheckBox.page | 14 ++ .../protected/pages/Controls/id/ClientScript.page | 42 ++++ .../pages/Controls/id/ClientScriptLoader.page | 94 +++++++++ .../protected/pages/Controls/id/ColorPicker.page | 10 + .../protected/pages/Controls/id/Data.page | 19 ++ .../protected/pages/Controls/id/DataGrid.page | 185 ++++++++++++++++++ .../protected/pages/Controls/id/DataList.page | 113 +++++++++++ .../protected/pages/Controls/id/DatePicker.page | 64 ++++++ .../protected/pages/Controls/id/Expression.page | 23 +++ .../protected/pages/Controls/id/FileUpload.page | 27 +++ .../protected/pages/Controls/id/Head.page | 10 + .../protected/pages/Controls/id/HiddenField.page | 13 ++ .../protected/pages/Controls/id/HtmlArea.page | 48 +++++ .../protected/pages/Controls/id/HyperLink.page | 11 ++ .../protected/pages/Controls/id/Image.page | 11 ++ .../protected/pages/Controls/id/ImageButton.page | 11 ++ .../protected/pages/Controls/id/ImageMap.page | 25 +++ .../protected/pages/Controls/id/InlineFrame.page | 24 +++ .../pages/Controls/id/JavascriptLogger.page | 31 +++ .../protected/pages/Controls/id/Label.page | 11 ++ .../protected/pages/Controls/id/LinkButton.page | 11 ++ .../protected/pages/Controls/id/List.page | 96 +++++++++ .../protected/pages/Controls/id/Literal.page | 25 +++ .../protected/pages/Controls/id/MultiView.page | 43 ++++ .../protected/pages/Controls/id/NewControl.page | 152 +++++++++++++++ .../protected/pages/Controls/id/OutputCache.page | 46 +++++ .../protected/pages/Controls/id/Pager.page | 38 ++++ .../protected/pages/Controls/id/Panel.page | 11 ++ .../protected/pages/Controls/id/PlaceHolder.page | 12 ++ .../protected/pages/Controls/id/RadioButton.page | 11 ++ .../protected/pages/Controls/id/Repeater.page | 111 +++++++++++ .../protected/pages/Controls/id/SafeHtml.page | 25 +++ .../protected/pages/Controls/id/Standard.page | 135 +++++++++++++ .../protected/pages/Controls/id/Statements.page | 40 ++++ .../protected/pages/Controls/id/TabPanel.page | 55 ++++++ .../protected/pages/Controls/id/Table.page | 11 ++ .../protected/pages/Controls/id/TextBox.page | 11 ++ .../pages/Controls/id/TextHighlighter.page | 26 +++ .../protected/pages/Controls/id/Validation.page | 216 +++++++++++++++++++++ .../protected/pages/Controls/id/Wizard.page | 100 ++++++++++ .../protected/pages/Controls/id/wizard.gif | Bin 0 -> 7081 bytes 42 files changed, 1977 insertions(+) create mode 100644 demos/quickstart/protected/pages/Controls/id/Button.page create mode 100644 demos/quickstart/protected/pages/Controls/id/CheckBox.page create mode 100644 demos/quickstart/protected/pages/Controls/id/ClientScript.page create mode 100644 demos/quickstart/protected/pages/Controls/id/ClientScriptLoader.page create mode 100644 demos/quickstart/protected/pages/Controls/id/ColorPicker.page create mode 100644 demos/quickstart/protected/pages/Controls/id/Data.page create mode 100644 demos/quickstart/protected/pages/Controls/id/DataGrid.page create mode 100644 demos/quickstart/protected/pages/Controls/id/DataList.page create mode 100644 demos/quickstart/protected/pages/Controls/id/DatePicker.page create mode 100644 demos/quickstart/protected/pages/Controls/id/Expression.page create mode 100644 demos/quickstart/protected/pages/Controls/id/FileUpload.page create mode 100644 demos/quickstart/protected/pages/Controls/id/Head.page create mode 100644 demos/quickstart/protected/pages/Controls/id/HiddenField.page create mode 100644 demos/quickstart/protected/pages/Controls/id/HtmlArea.page create mode 100644 demos/quickstart/protected/pages/Controls/id/HyperLink.page create mode 100644 demos/quickstart/protected/pages/Controls/id/Image.page create mode 100644 demos/quickstart/protected/pages/Controls/id/ImageButton.page create mode 100644 demos/quickstart/protected/pages/Controls/id/ImageMap.page create mode 100644 demos/quickstart/protected/pages/Controls/id/InlineFrame.page create mode 100644 demos/quickstart/protected/pages/Controls/id/JavascriptLogger.page create mode 100644 demos/quickstart/protected/pages/Controls/id/Label.page create mode 100644 demos/quickstart/protected/pages/Controls/id/LinkButton.page create mode 100644 demos/quickstart/protected/pages/Controls/id/List.page create mode 100644 demos/quickstart/protected/pages/Controls/id/Literal.page create mode 100644 demos/quickstart/protected/pages/Controls/id/MultiView.page create mode 100644 demos/quickstart/protected/pages/Controls/id/NewControl.page create mode 100644 demos/quickstart/protected/pages/Controls/id/OutputCache.page create mode 100644 demos/quickstart/protected/pages/Controls/id/Pager.page create mode 100644 demos/quickstart/protected/pages/Controls/id/Panel.page create mode 100644 demos/quickstart/protected/pages/Controls/id/PlaceHolder.page create mode 100644 demos/quickstart/protected/pages/Controls/id/RadioButton.page create mode 100644 demos/quickstart/protected/pages/Controls/id/Repeater.page create mode 100644 demos/quickstart/protected/pages/Controls/id/SafeHtml.page create mode 100644 demos/quickstart/protected/pages/Controls/id/Standard.page create mode 100644 demos/quickstart/protected/pages/Controls/id/Statements.page create mode 100644 demos/quickstart/protected/pages/Controls/id/TabPanel.page create mode 100644 demos/quickstart/protected/pages/Controls/id/Table.page create mode 100644 demos/quickstart/protected/pages/Controls/id/TextBox.page create mode 100644 demos/quickstart/protected/pages/Controls/id/TextHighlighter.page create mode 100644 demos/quickstart/protected/pages/Controls/id/Validation.page create mode 100644 demos/quickstart/protected/pages/Controls/id/Wizard.page create mode 100644 demos/quickstart/protected/pages/Controls/id/wizard.gif (limited to 'demos/quickstart/protected/pages') 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 @@ + + +

TButton

+ + +

+TButton membuat tombol klik pada halaman Web. judul tombol ditetapkan dengan properti Text. Tombol digunakan untuk mengirimkan data ke sebuah halaman. TButton memunculkan dua event sisi-server, OnClick dan OnCommand, ketika diklik pada sisi-klien. Perbedaan diantara event OnClick dan OnCommand adalah bahwa event kedua meneruskan ke leluhur kontrol tombol. Pengendali event OnCommand bisa menggunakan CommandName dan CommandParameter terkait dengan event guna melakukan aksi spesifik. +

+

+Mengklik tombol dapat memicu formulir validasi, jika CausesValidation adalah true. Dan validasi mungkin dibatasi di dalam grup tertentu dari kontrol validator menurut ValidationGroup. +

+ + +UNTUK DIKERJAKAN: atribut kustom + +
$Id: Button.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

TCheckBox

+ + +

+TCheckBox menampilkan kotak centang pada halaman Web. Judul bisa ditetapkan melalui Text dan ditampilkan disamping kotak centang. Ia bisa muncul baik di sisi kanan atau kiri kotak centang, yang ditentukan oleh TextAlign. Selanjutnya anda dapat menetapkan atribut yang diterapkan ke teks dengan menggunakan LabelAttributes. +

+

+Untuk menentukan apakah kotak centang dicentang atau tidak, uji properti Checked. Event CheckedChanged dimunculkan jika kondisi Checked berubah diantara pengiriman ke server. Jika AutoPostBack adalah true, mengubah kotak centang akan menyebabkan aksi postback. Dan jika CausesValidation juga true, setelah postback validasi akan dilakukan bagi validator di dalam ValidationGroup yang ditetapkan. +

+ + +
$Id: CheckBox.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

TClientScript

+ +

Menyertakan Bundel Librari Javascript dalam Prado

+

+TClientScript 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 PradoScripts. 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". +

+ +<com:TClientScript PradoScripts="ajax, effects" /> + + +

+ Bundel librari yang disertakan dalam Prado adalah

+ +

+Banyak dari librari, seperti validator dan datepicker akan secara otomatis ketika kontrol yang menggunakan librari ini terlihat pada halaman. Sebagai contoh, semua validator +jika EnableClientScript disetel true akan menyertakan librari javascript prado dan validator. +Ketergantungan dari setiap librari secara otomatis dipecahkan. Yakni, menetapkan, katakanlah "ajax", juga akan menyertakan librari "prado".

+ +

Menyertakan File Javascript Kustom

+

File Javascript kustom dapat diregistrasi menggunakan properti ScriptUrl. 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 +tag asset dinamis, file "test.js" akan dipublikasikan secara otomatis, yaitu file akan di-copy ke direktori asset bila perlu. +

+ +<com:TClientScript ScriptUrl=<%~ test.js %> /> + +

You can include Javascript files from other servers by specifying the full URL string in + the ScriptUrl property.

+ +

Menyertakan Blok Kode Javascript Kustom

+

Setiap konten di dalam tag kontrol TClientScript akan dianggap sebagai kode Javascript dan akan disajikan di mana ia dideklarasikan.

+ +
$Id: ClientScript.page 1846 2007-04-07 10:35:16Z wei $
 \ 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 @@ + + +

TClientScriptLoader

+ + + + + +

+TClientScriptLoader mempublikasikan koleksi file javascript sebagai assets. Contohnya, anggap kita mempunyai direktori bernama "mylib" dalam direktori protected/pages pada aplikasi kita.

+ +assets/ +protected/ + pages/ + mylib/ + file1.js + file2.js + file3.js + file4.js + packages.php + + +

Properti PackagePath bisa berupa direktori asset yang sudah ada atau path namespace ke direktori yang berisi file javascript. Sebagai contoh, untuk mempublikasikan file javascript dalam direktori mylib, kita dapat menetapkan PackagePath sebagai berikut. +Tag pertama TClientScriptLoader tergantung pada tag template asset dan menganggap bahwa template halaman berisi turunan tag TClientScriptLoader ada dalam direktori protected/pages. +Tag kedua TClientScriptLoader menggunakan notasi namespace ke untuk menetapkan path. +

+ + +<com:TClientScriptLoader PackagePath=<%~ mylib %> /> +<com:TClientScriptLoader PackagePath="Application.pages.mylib" /> + + +

+Ketika file dalam PackagePath dipublikasikan sebagai asset, pengambil naskah file php "clientscripts.php" secara otomatis di-copiy ke direktori asset tersebut. Pengambil naskah, menggabungkan file javascript dan bertindak sebagai gzip jika memungkinkan. +

+

Mengelompokan File Javascript

+

+Naskah yang dibolehkan dan naskah ketergantungan bisa dikelompokan dengan menggunakan file "packages.php" dengan format berikut. "packages.php" ini adalah opsional, jika tidak ada nama file tanpa ekstensi ".js" yang dipakai. "packages.php" harus berada dalam direktori yang diberikan oleh PackagePath. +

+ + +<?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 ?> + + +

Elemen pertama dari array yang dihasilkan oleh packages.php harus berisi sebuah array file javascripts relatif ke packages.php yang mengaitkan pengelompokan tertentu. Sebagai contoh, dalam packages.php di atas, pengelompokan 'package1' menggabungkan dua file javascript, yaitu 'file1.js' +dan 'file2.js'. +

+ +

Elemen kedua dari array yang dihasilkan oleh packages.php harus berisi array pengelompokan ketergantungan yang diurut dalam cara di mana grup harus digabungkan. Sebagai contoh, mengelompokan +'package1' hanya bergantung pada file pengelompokan'package1' +(misalnya 'file1.js' dan 'file2.js'). Sementara package2' tergantung pada pepngelompokan 'package1' dam 'package2'. Yakni 'package2' akan menggabung dengan urutan +'file1.js', 'file2.js', 'file3.js', dan 'file4.js'. +

+ +

Mengambil Paket Javascript

+ +

Untuk mengambil file javascript atau paket tertentu, setel properti PackageScripts dengan nilai 'package1' guna mengambil naskah 'package1'. Maksimum 25 paket dipisahkan dengan koma yang dibolehkan. Ketergantungan paket secara otomatis dipecahkan oleh file php pengambil naskah. +

+ + +<com:TClientScriptLoader PackagePath=<%~ mylib %> PackageScripts="package2" /> +<script type="text/javascript"> + //kode javascript memanfaatkan kode javascript yg diambil ke dalam 'package2' di atas </script> + + +

Setiap <com:TClientScriptLoader> membuat elemen HTML <script> untuk mengambil file javascript yang diperlukan.

+ +

Menghapus Komentar Javascript

+

Properti DebugMode bila false menghapus komentar dan spasi dari file javascript yang dipublikasikan. Jika properti +DebugMode tidak disetel, mode debug ditentukan dari +mode aplikasi. +

+
Catatan: +Jika DebugMode 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. +
+ +

Memadatkan Javascript dengan GZip

+

+Properti EnableGzip (standarnya true) membolehkan javascripts yang dipublikasikan untuk dilayani sebagai zipped jika browser dan server php mengijinkannya. +

+
$Id: ClientScript.page 1650 2007-01-24 06:55:32Z wei $
+ + \ 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 @@ + + +

TColorPicker

+ + +

+TBD +

+ +
$Id: ColorPicker.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

Kontrol Data

+ + + +
$Id: Data.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

TDataGrid

+ +

+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 DataSource atau DataSourceID terikat pada baris dan mengisi kontek ke sel. +

+

+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. +

+

+Baris TDataGrid dapat diakses melalui properti Items. 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 EditItemIndex atau SelectedItemIndex. Catatan, jika item dalam mode edit, maka memilih item ini tidak terpengaruh. +

+ +

Kolom

+

+Kolom pada data grid menentukan bagaimana sel terkait ditampilkan. Sebagai contoh, sel yang dikaitkan dengan TBoundColumn 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. +

+

+PRADO menyediakan lima tipe kolom: +

+ + +

Gaya Item

+

+TDataGrid mendefinisikan gaya yang diterapkan pada itemnya. Sebagai contoh, AlternatingItemStyle 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. +

+

+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, ItemStyle, AlternatingItemStyle, SelectedItemStyle, dan EditItemStyle. Oleh karena itu, jika warna latar belakang disetel merah dalam ItemStyle, EditItemStyle juga akan memiliki warna latar belakang merah, kecuali dinyatakan secara eksplisit ke nilai yang berbeda. +

+ +

Event

+

+TDataGrid menyediakan beberapa event untuk menjembatani manipulasi item datanya, +

+ + +

Menggunakan TDataGrid

+ +

Kolom yang Dibuat Secara Otomatis

+

+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 TBoundColumn. +

+

+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, +

+ +public function onLoad($param) { + parent::onLoad($param); + if(!$this->IsPostBack) { + $this->DataGrid->DataSource=$this->Data; + $this->DataGrid->dataBind(); + } +} + + + +

Kolom Ditetapkan secara Manual

+

+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. +

+

+Untuk menetapkan kolom secara manual, setel AutoGenerateColumns ke false, dan tetapkan kolom dalam template seperti berikut, +

+ +<com:TDataGrid ...> + <com:TBoundColumn DataField="name" .../> + <com:TBoundColumn DataField="price" .../> + <com:TEditCommandColumn ...> + ... +</com:TDataGrid> + +

+Catatan, jika AutoGenerateColumns 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 Columns datagrid hanya berisi kolom yang ditetapkan secara manual dan bukan yang secara otomatis dibuat. +

+

+Contoh berikut menggunakan kolom yang ditetapkan secara manual untuk memperlihatkan daftar informasi buku, +

+ +

Perhatikan bagaimana gaya item (baris) dan kolom bekerja sama untuk mempengaruhi penampilan sel dalam datagrid.

+ + + +

Berinteraksi dengan TDataGrid

+

+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. TBoundColumn 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 TEditCommandColumn untuk mengalihkan mode item. Sebagai tambahan, TButtonColumn menawarkan kepada para pengembang fleksibilitas dari pembuatan tombol bebas untuk berbagai interaksi pengguna. +

+

+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: TEditCommandColumn dan TButtonColumn. Sebagai tambahan, +TDropDownListColumn mengganti TTemplateColumn sebelumnya untuk membolehkan pengguna memilih peringkat dari daftar dropdown. Catatan, Ini juga memungkinkan untuk menggunakan TTemplateColumn guna menyelesaikan tugas yang sama. +

+ + +

Pengurutan

+

+TDataGrid mendukung pengurutan itemnya yang terkait dengan kolom tertentu. Untuk menghidupkan pengurutan, setel AllowSorting ke true. Ini akan mengubah header kolom menjadi tombol yang bisa diklik jika properti SortExpression tidak kosong. Ketika para pengguna mengklik pada tombol header, event OnSortCommand akan dimunculkan. Para pengembang dapat menulis pengendali guna merespon perintah pengurutan dan mengurut data berdasarkan SortExpression yang ditetapkan dalam kolom terkait. +

+

+Contoh berikut mengubah datagrid dalam Contoh 2 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. +

+ + +

Lembaran

+

+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 PagerStyle. Sebagai contoh, PagerStyle.Visible menentukan apakah lembaran terlihat atau tidak; PagerStyle.Position menunjukan di mana lembaran ditampilkan; dan PagerStyle.Mode menetapkan tipe lembaran apa yang ditampilkan, numerik atau kata berikutnya-sebelumnya. +

+

+Untuk menghidupkan lembaran, setel AllowPaging ke true. Jumlah baris data yang ditampilkan dalam halaman ditetapkan oleh PageSize, sementara indeks (berbasis-nol) pada halaman yang saat ini terlihat bagi para pengguna adalah dengan CurrentPageIndex. Ketika para pengguna mengklik pada tombol lembar, TDataGrid memunculkan event OnPageIndexChanged. Biasanya, pengendali event ditulis seperti berikut, +

+ +public function pageIndexChanged($sender,$param) { + $this->DataGrid->CurrentPageIndex=$param->NewPageIndex; + $this->DataGrid->DataSource=$this->Data; + $this->DataGrid->dataBind(); +} + +

+Contoh berikut menghidupkan fungsionalitas lembar dari datagrid yang ditampilkan dalam Contoh 1. Dalam contoh ini, anda dapat menyetel berbagai gaya lembar secara interaktif untuk melihat bagaimana pengaruh tampilan lembar halaman. +

+ + +

Lembar Kustom

+

+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. +

+

+Untuk menghidupkan lembat kustom, setel AllowPaging dan AllowCustomPaging ke true. Beritahu TDataGrid jumlah item data (baris) yang tersedia dengan menyetel VirtualItemCount. Dan merespon ke event OnPageIndexChanged. Dalam pengendali event, gunakan properti NewPageIndex atas parameter event untuk megnambil lembar baru data dari sumber data. Untuk MySQL database, ini bisa dikerjakan dengan menggunakan klausul LIMIT dalam pernyataan SQL select. +

+ + +

Memperluas TDataGrid

+

+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 TTemplateColumn untuk menyelesaikan tugas ini. Solusi yang lebih baik adalah mengembangkan komponen kolom gambar pekerjaan tersebut bisa dipakai ulang dengan mudah dalam proyek lain. +

+

+Semua komponen kolom datagrid harus diturunkan dari TDataGridColumn. Metode utama yang perlu diganti adalah initializeCell() yang membuat konten untuk sel dalam kolom terkait. Karena setiap sel juga dalam sebuah item (baris) dan item dapat memiliki tipe berbeda (seperti Header, AltneratingItem, dll.), konten berbeda bisa dibuat berdasarkan tipe item. Untuk contoh kolom gambar, seseorang dapat membuat kontrol TImage di dalam sel dalam item dari tipe Item dan AlterantingItem. +

+ +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; + } + } +} + +

+Dalam initializeCell(), jangan lupa untuk memanggil implementasi leluhur, karena ia menginisialisasi sel dalam item dari tipe Header dan Footer. +

+ +
$Id: DataGrid.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

TDataList

+

+TDataList mewakili ikatan data dan kontrol list yang bisa dimutakhirkan. Seperti TRepeater, TDataList menampilkan kontennya secara berulang berdasarkan data yang diambil dari DataSource. Kontek yang diulang dalam TDataList disebut item, yang adalah kontrol dan bisa diakses melalui Items. Ketika dataBind() 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. +

+ +

+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. +

+ +

+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. +

+ +

+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 Tutorial TRepeater. +

+ +

+Properti berikut dipakai untuk menetapkan tipe template dan penyaji datalist. Jika tipe konten didefinisikan dengan template dan penyaji, maka penyaji diambil lebih dulu. +

+ + + +

+Ketika dataBind() dipanggil, TDataList menjalani masa hidup seperti berikut untuk setiap baris data: +

+ +
    +
  1. buat item berdasarkan template atau penyaji
    2. +
  2. setel baris data ke item
    3. +
  3. munculkan event OnItemCreated
    4. +
  4. tambah item sebagai kontrol anak
    5. +
  5. panggil dataBind() pada item
    6. +
  6. munculkan event OnItemDataBound
    7. +
+ +

+TDataList memunculkan OnItemCommand kapan saja kontrol tombol di dalam beberapa item datalist memunculkan event OnCommand. Oleh karena itu, anda bisa menangani semua event OnCommand di satu tempat dengan menulis pengendali event untuk event OnItemCommand. Event tambahan dimunculkan jika event OnCommand memiliki salah satu dari nama perintah berikut (tidak sensitif-huruf): +

+ + + +

+TDataList menyediakan beberapa properti untuk mendukung pengotakan item. Jumlah kolom yang digunakan untuk menampilkan item data dietapkan melalui properti RepeatColumns, sementara RepeatDirection mengatur urutan item yang sedang disajikan. Tata letak item data dalam daftar ditetapkan melalui RepeatLayout, yang mengambil salah satu dari nilai berikut: +

+ + + +

+Item dalam TDataList dapat berupa salah satu dari tiga keadaan: sedang dilihat, sedang diedit dan sedang dipilih. Untuk mengubah keadaan item tertentu, setel SelectedItemIndex atau EditItemIndex. Former akan mengubah item yang ditunjuk ke mode yang dipilih, yang akan menyebabkan item menggunakan SelectedItemTemplate atau SelectedItemRenderer 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. +

+ +

+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: +

+ + + +

+Oleh karena itu, jika warna latar belakang disetel sebagai merah dalam ItemStyle, EditItemStyle juga akan mempunyai warna latar belakang merah keciali ia disetel ke nilai berbeda secara eksplisit. +

+ +

+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: +

+ + +

+Contoh berikut memperlihatkan bagaimana menggunakan TDataList guna menampilkan data tabular, dengan tata letak dan gaya yang berbeda. +

+ +

+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. +

+

+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 DataKeys yang digunakan. +

+

+Harap berhati-hati, untuk kemudahan, aplikasi ini tidak melakukan validasi input apapun. Dalam aplikasi sebenarnya, pastikan input divalidasi sebelum menyimpannya ke dalam database. +

+ + +
$Id: DataList.page 1687 2007-02-09 21:34:53Z xue $
 \ 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 @@ + + +

TDatePicker

+ + +

TDatePicker 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 DateFormat. Format yang benar adalah kombinasi dari token berikut: + + +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 +--------------------------------------------------------------------- + + +

+Tanggal pada pengambil tanggal bisa disetel menggunakan properti Date atau Timestamp. Nilai properti Date harus dalam format yang sama seperti pola yang ditetapkan dalam properti DateFormat. Properti Timestamp hanya menerima integer seperti cap waktu Unix. +

+ +

+TDatePicker mempunyai tiga Mode untuk menampilkan tampilan pengambil tanggal.

+ + +

Properti CssClass dapat dipakai untuk mengganti nama kelas CSS untuk panel pengambil tanggal. Properti CalendarStyle mengubah gaya kalender secara keseluruhan. +Nilai CalendarStyle berikut tersedia:

+ + +

Properti InputMode bisa disetel ke "TextBox" atau "DropDownList" dengan standar sebagai "TextBox". Dalam mode DropDownList, sebagai tambahan pada tampilan pengambil tanggal, tiga daftar drop down (hari, bulan dan tahun) disajikan untuk memilih tanggal. +Ketika InputMode sama dengan "DropDownList", urutan dan penampilan tanggal, bulan, dan tahun akan bergantung pada pola yang ditetapkan dalam properti DateFormat. +

+ +

Tampilan pengambil tanggal dapat disembunyikan dengan menetapkan ShowCalendar ke false. Banyak teks pada tampilan pengambil tanggal dapat diubah ke bahasa berbeda menggunakan properti Culture. +

+ +

Batas tahun pengambil kalender dapat disetel menggunakan properti FromYear dan UpToYear di mana +FromYear adalah tahun awal dan UpToYear adalah tahun terakhir yang dapat dipilih. +Awal hari pada seminggu bisa diubah dengan properti FirstDayOfWeek, dengan 0 sebagai Minggu, 1 sebagai Senin, dst. +

+ +

Catatan 1: Jika InputMode adalah "TextBox", DateFormat TIDAK boleh berisi pola MMM atau MMMM. Pengurai sisi-server tidak akan bisa menentukan tanggal yang benar jika MMM atau MMMM dipakai. Ketika InputMode sama dengan "DropDownList", seluruh pola dapat dipergunakan.

+ +

Catatan 2: Ketika TDatePicker dipakai bersama dengan validator, properti DateFormat pada validator harus sama dengan +DateFormat pada TDatePicker DAN harus disetel DataType="Date" pada validator guna memastikan validasi yang benar. Lihat +TCompareValidator, +TDataTypeValidator dan +TRangeValidator +untuk lebih jelasnya.

+ + + +
$Id: DatePicker.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

TExpression

+ + +

+TExpression mengevaluasi ekspresi PHP dan menampilkan hasil evaluasinya. Untuk menetapkan ekspresi yang akan dievaluasi, setel properti Expression. Catatan, TExpression mengevaluasi ekspresi selama menyajikan masa hidup kontrol. +

+ +

+Konteks dari ekspresi dalam kontrol TExpression adalah kontrol itu sendiri. Yaitu, $this mewakili obyek kontrol jika ia ada dalam ekspresi. Sebagai contoh, tag template akan menampilkan judul halaman yang berisi kontrol TExpression. +

+ +<com:TExpression Expression="$this->Page->Title" /> + + +

+Harap berhati-hati karena TExpression membolehkan eksekusi kode bebas PHP, secara umum anda seharusnya tidak menggunakannya untuk mengevaluasi ekspresi yang dikirimkan oleh para pengguna aplikasi anda. +

+ + + +
$Id: Expression.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

TFileUpload

+ + +

+TFileUpload 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. +

+

+TFileUpload memunculkan event OnFileUpload ketika ia adalah post back. Properti HasFile menunjukan apakah file yang di-upload sukses atau tidak. Jika sukses, file yang di-upload dapat disimpan pada server dengan memanggil metode saveAs(). +

+

+Properti berikut memberikan informasi mengenai file yang di-upload: +

+ +

+Jika upload file tidak berhasil, properti ErrorCode memberikan kode kesalahan yang menyebabkan kegagalan. Lihat dokumentasi PHP untuk penjelasan lengkap atas kode kesalahan yang mungkin. +

+ + + +
$Id: FileUpload.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

THead

+ + +

+TBD +

+ +
$Id: Head.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

THiddenField

+ + +

+THiddenField mewakili field tersembyni pada halaman Web. Nilai field tersembunyi dapat diakses melalui properti Value. +

+

+THiddenField memunculkan event OnValueChanged jika nilainya diubah selama postback. +

+ +
$Id: HiddenField.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

THtmlArea

+ + +

+THtmlArea menampilkan field input teks WYSIWYG pada halaman Web untuk mengumpulkan input dalam format HTML. Teks yang ditampilkan dalam kontrol THtmlArea ditetapkan atau ditentukan dengan menggunakan properti Text. Untuk menyesuaikan ukuran bagian input, setel properti Width dan Height daripada Columns dan Rows karena keduanya tidak memiliki arti di bawah situasi ini. Untuk mematikan fitur WYSIWYG, setel EnableVisualEdit ke false. +

+ +

+THtmlArea menyediakan fitur WYSIWYG dengan melapisi fungsionalitas yang disediakan oleh Proyek TinyMCE. +

+ +

+Editor standar hanya memberikan bar piranti dasar. Untuk mengubah atau menambah bar piranti lainnya, gunakan properti Options guna menambah opsi editor tambahan dengan setiap opsi pada baris baru. Lihat TinyMCE website untuk daftar opsi lebih lengkap. Contoh berikut menampilkan bar piranti spesifik untuk memanipulasi tabel HTML, +

+ +<com:THtmlArea> + <prop:Options> + plugins : "table" + theme_advanced_buttons3 : "tablecontrols" + </prop:Options> +</com:THtmlArea> + + +

+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. +

+ +
+                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
+----------------------------------------------------
+
+ + + +
$Id: HtmlArea.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

THyperLink

+ + +

+THyperLink menampilkan hiperlink pada halaman. URL hiperlink ditetapkan melalui properti NavigateUrl, dan teks link melalui properti Text. Target link ditetapkan melalui properti Target. Memungkinkan juga untuk menampilkan sebuah gambar dengan menyetel properti ImageUrl. Dalam hal ini, Text ditampilkan sebagai teks alternatif dari gambar. Jika ImageUrl dan Text keduanya kosong, konten ditutupi di dalam tag kontrol akan disajikan. +

+ + +
$Id: HyperLink.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

TImage

+ + +

+TImage menampilkan gambar pada halaman. Gambar ditetapkan melalui properti ImageUrl yang mengambil URL absolut terhadap file gambar. Penjajaran gambar yang ditampilkan disetel oleh properti ImageAlign. Untuk menyetel teks alternatif atau penjelasan panjang atas gambar, gunakan masing-masing AlternateText atau DescriptionUrl. +

+ + +
$Id: Image.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

TImageButton

+ + +

+TImageButton juga mirip dengan TButton, kecuali bahwa TImageButton menampilkan tombol sebagai sebuah gambar. Gambar ditetapkan melalui ImageUrl, dan teks alternatif ditetapkan oleh Text. Sebagai tambahan, dimungkinkan untuk mendapatkan informasi koordinat titik di mana gambar diklik. Informasi koordinat yang diisikan dalam parameter event OnClick (bukan OnCommand). +

+ + +
$Id: ImageButton.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

TImageMap

+ + +

+TImageMap Mewakili sebuah gambar pada halaman Web dengan bagian titik panas (hotspot) predefinisi yang dapat merespon secara berbeda saat pengguna mengkliknya. Tergantung pada HotSpotMode dari bagian hotspot, mengklik pada hotspot akan memicu postback atau mengendalikan URL yang ditetapkan. +

+

+Setiap hotspot dijelaskan menggunakan obyek THotSpot dan dipelihara dalam koleksi HotSpots pada TImageMap. Sebuah hotspot dapat berupa lingkaran, persegi panjangn, poligon, dll. +

+

+Hotspot dapat ditambahkan ke TImageMap melalui properti HotSpots atau dalam template seperti berikut, +

+ +<com:TImageMap ... > + <com:TCircleHotSpot ... /> + <com:TRectangleHotSpot ... /> + <com:TPolygonHotSpot ... /> +</com:TImageMap> + + + + +
$Id: ImageMap.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

TInlineFrame

+ + +

+TInlineFrame menampilkan sebuah bingkai inline (<iframe>) pada halaman Web. Lokasi konten bingkai ditetapkan oleh properti FrameUrl. +

+

+Penampilan TInlineFrame dapat dikustomisai dengan properti berikut, sebagai tambahan terhadap apa yang diturunkan dari TWebControl. +

+ + +

+Contoh berikut memperlihatkan TInlineFrame dengan setelan properti berbeda. Google homepage dipakai sebagai konten bingkai. +

+ + +
$Id: InlineFrame.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

TJavascriptLogger

+ + +

+TJavascriptLogger menyediakan javascript pencatatan sisi-klien. Ini sebagian besar adalah pelapis dari Javascript yang dikembangkan di http://gleepglop.com/javascripts/logger/. +

+ +

+Untuk menggunakan TJavascriptLogger, cukup tempatkan tag komponen berikut pada template halaman. +

+ +<com:TJavascriptLogger /> + + +

+Kemudian, Javascript sisi-klien dapat berisi pernyataan berikut. Ketika dieksekusi akan muncul dalam jendela pencatat. +

+ +Logger.info('something happend'); +Logger.warn('A warning'); +Logger.error('This is an error'); +Logger.debug('debug information'); + + +

+Untuk menghidup matikan penampakan pencatat dan konsol pada jendela browser, tekan ALT-D (atau CTRL-D pada OS X). +

+ +
$Id: JavascriptLogger.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

TLabel

+ + +

+TLabel menampilkan teks pada halaman Web. Teks yang ditampilkan disetel melalui properti Text. Jika Text kosong, konten yang ditutupi dalam tag komponen TLabel akan ditampilkan. TLabel juga dapat dipakai sebagai label formulir yang terkait dengan beberapa kontrol pada formulir. Karena Text bukan HTML-dikodekan ketika disajikan, pastikan ia tidak berisi karakter berbahaya yang ingin anda hindari. +

+ + +
$Id: Label.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

TLinkButton

+ + +

+TLinkButton mirip dengan TButton dalam setiap aspek kecuali bahwa TLinkButton ditampilkan sebagai hiperlink. Teks link ditentukan oleh properti Text. Jika properti Text kosong, maka konten tombol yang ditampilkan (oleh karenanya, anda bisa menutupi tag <img> di dalam badan tombol dan mendapatkan tombol gambar. +

+ + +
$Id: LinkButton.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

Kontrol Daftar

+

+Kontrol Daftar yang tercakup pada seksi ini semuanya diturunkan secara langsung atau tidak langsung dari TListControl. Oleh karena itu akan berbagi set properti yang sama dan umum dipakai, termasuk, +

+ + +

+Karena TListControl berasal dari TDataBoundControl, kontrol daftar ini juga berbagi operasi umum yang sama yang dikenal sebagai databinding atau penyatuan data. Items dapat dipopulasikan dari data yang sudah ada dan ditetapkan oleh DataSource atau DataSourceID. Fungsi yang memanggil dataBind() akan menyebabkan populasi data. Untuk kontrol daftar, data bisa ditetapkan dalam dua jenis format berikut: +

+ + +

TListBox

+

+TListBox menampilkan kotak daftar yang membolehkan satu atau multipel pilihan. Setel properti SelectionMode sebagai Single untuk menjadikan kotak daftar pilihan tunggal, dan Multiple untuk kotak daftar pilihan multipel. Jumlah baris ditampilkan dalam kotak ditetapkan melalui nilai properti Rows. +

+ + +

TDropDownList

+

+TDropDownList menampilkan kotak daftar dropdown yang membolehkan pengguna untuk memilih opsi tunggal dari beberapa yang telah ditetapkan. +

+ + +

TCheckBoxList

+

+TCheckBoxList menampilkan sebuah daftar kotak centang pada halaman Web. Penjajaran teks selain setiap kotak centang dapat ditetapkan dengan TextAlign. Tata letak kotak centang bisa dikontrol oleh properti berikut: +

+
    +
  • RepeatLayout - berupa Table atau Flow. Table menggunakan sel tabel HTML untuk mengatur kotak centang, sementara Flow mengunakan tag span dan break HTML untuk pengaturannya. Dengan tata letak Table, anda bisa menyetel CellPadding dan CellSpacing.
    • +
  • RepeatColumns - berapa banyak kolom kotak centang akan ditampilkan.
    • +
  • RepeatDirection - ke mana menjelajahi kotak centang, dalam cara horisontal (karena kotak centang ditampilkan dalam tata letak mirip-matriks).
    • +
+ + + +

TRadioButtonList

+

+TRadioButtonList mirip dengan TCheckBoxList dalam setiap aspek kecuali bahwa setiap TRadioButtonList menampilkan sebuah grup tombol radio. Hanya satu tombol radio dapat dipilih, (TCheckBoxList membolehkan pilihan multipel). +

+ + +

TBulletedList

+

+TBulletedList menampilkan item dalam format bulat pada halaman Web. Gaya bulat dapat ditetapkan dengan BulletStyle. Ketika gaya adalah CustomImage, tanda bulat ditampilkan sebagai gambar, yang ditetapkan dengan BulletImageUrl. +

+

+TBulletedList menampilkan teks item dalam tiga mode berbeda, +

+
    +
  • Text - teks item ditampilkan sebagai teks statis;
    • +
  • HyperLink - setiap item ditampilkan sebagai hiperlink yang URL-nya diberikan oleh nilai item, dan properti Target bisa dipakai untuk menetapkan jendela browser;
    • +
  • LinkButton - setiap item ditampilkan sebagai tombol link yang melakukan posts back pada halaman jika pengguna mengkliknya, dan event OnClick akan dimunculkan di bawah keadaan demikian.
    • +
+ + + +
$Id: List.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

TLiteral

+ + +

+TLiteral menampilkan teks statis pada halaman Web. TLiteral mirip dengan kontrol TLabel, kecuali bahwa TLiteral + * Kontrol tidak memiliki properti style, seperti BackColor, Font, dll. +

+ +

+Teks yang ditampilkan oleh TLiteral bisa dikontrol secara programatis dengan menyetel properti Text. Teks yang ditampilkan mungkin HTML-dikodekan jika Encode adalah true (nilai standarnya false). +

+ +

+TLiteral akan menyajikan konten yang dikurung dalam tag komponen jika Text kosong. +

+ +

+Harap berhati-hati jika Encode adalah false, pastikan Text tidak berisi karakter yang tidak diinginkan yang dapat menjadikan keamanan mudah ditembus. +

+ + + +
$Id: Literal.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

TMultiView

+ + +

+TMultiView bertindak sebagai penampung grup kontrol TView, yang dapat diambil oleh properti Views. Setiap tampilan berisi kontrol anak. TMultiView menentukan tampilan mana dan kontrol anaknya yang terlihat. Kapan saja hanya satu tampilan terlihat (disebut aktif). untuk mengaktifkan tampilan, setel ActiveView atau ActiveViewIndex. Catatan, standarnya tidak ada tampilan yang aktif. +

+

+Untuk menambah tampilan ke TMultiView, manipulasi koleksi Views atau tambah ia dalam template seperti berikut, +

+ +<com:TMultiView> + <com:TView> + view 1 content + </com:TView> + <com:TView> + view 2 content + </com:TView> +</com:TMultiView> + + +

+TMultiView merespon event perintah berikut untuk mengatur penampakan tampilannya. +

+ + +

+Setelah postback, jika indeks tampilan aktif diubah, TMultiView akan memunculkan event OnActiveViewChanged. +

+ +

+Permainan Hangman adalah penggunaan umum dari TMultiView. Contoh berikut memperlihatkan kegunaan lain dari TMultiView. +

+ + + +
$Id: MultiView.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

Menulis Kontrol Baru

+

+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. +

+

+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 TControl atau kelas anaknya. +

+ +

Komposisi Kontrol yang Sudah Ada

+

+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 subproperti. +

+

+Seseorang dapat menciptakan sebuah kontrol baru dalam dua cara. Pertama adalah memperluas TCompositeControl dan mengganti metode TControl::createChildControls(). Kedua adalah memperluas TTemplateControl (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. +

+

+Sebagai contoh, kami memperlihatkan bagaimana untuk membuat kotak teks berlabel yang disebut LabeledTextBox menggunakan dua pendekatan di atas. Kotak teks berlabel menampilkan label disamping kotak teks. Kami ingin menggunakan ulang TLabel dan TTextBox yang disediakan PRADO untuk menyelesaikan tugas ini. +

+ +

Komposisi dengan Menulis Template

+

+Kita memerlukan dua file: sebuah file kelas kontrol bernama LabeledTextBox.php dan file template kontrol bernama LabeledTextBox.tpl. Keduanya harus berada di bawah direktori yang sama. +

+

+Seperti membuat halaman PRADO, kita dapat dengan mudah menuliskan konten dalam file template kontrol. +

+ +<com:TLabel ID="Label" ForControl="TextBox" /> +<com:TTextBox ID="TextBox" /> + +

+Template di atas menetapkan kontrol TLabel bernama Label dan kontrol TTextBox bernama TextBox. Kita ingin memperlihatkan kedua kontrol ini. Ini bisa dikerjakan dengan mendefinisikan properti untuk masing-masing kontrol dalam file kelas LabeledTextBox. Sebagai contoh, kita dapat mendefinisikan proper Label seperti berikut, +

+ +class LabeledTextBox extends TTemplateControl { + public function getLabel() { + $this->ensureChildControls(); + return $this->getRegisteredObject('Label'); + } +} + +

+Dalam contoh di atas, metode memanggil ensureChildControls() memastikan bahwa kontrol label dan kotak teks sudah dibuat (dari template) ketika properti Label diakses. Properti TextBox dapat diimplementasikan dengan cara yang sama. +

+ + +

Komposisi dengan Penggantian createChildControls()

+

+Untuk kontrol gabungan sesederhana LabeledTextBox, lebih baik membuatnya dengan memperluas TCompositeControl dan mengganti metode createChildControls(), karena ia tidak menggunakan template dan menghemat waktu penguraian template. +

+

+Kode lengkap untuk LabeledTextBox ditampilkan sebagai berikut, +

+ +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; + } +} + + + +

Menggunakan LabeledTextBox

+

+Untuk menggunakan kontrol LabeledTextBox, pertama kita perlu menyertakan file kelas terkait. Kemudian dalam template halaman, kita dapat menuliskan baris seperti berikut, +

+ +<com:LabeledTextBox ID="Input" Label.Text="Username" /> + +

+Dalam contoh di atas, Label.Text adalah subproperti dari LabeledTextBox, yang merujuk ke properti Text dari properti Label. Untuk lebih jelasnya atas pemakaian LabeledTextBox, lihat contoh online di atas. +

+ +

Memperluas Kontrol yang Sudah Ada

+

+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. +

+

+Kesulitan tugas tergantung pada seberapa banyak kelas yang sudah ada dikustomisasi. Sebagai contoh, tugas sederhana bisa mengkustomisasi kontrol TLabel, agar ia menampilkan label merah sercara standarnya. Ini akan melibatkan setelan properti ForeColor ke "red" 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 TControl atau TWebControl. +

+

+Dalam bagian ini, sebagian besar kami memperkenalkan basis kelas kontrol TControl dan TWebControl, 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. +

+ +

Memperluas TControl

+

+TControl adalah basis kelas dari semua kelas kontrol. Dua metode adalah yang paling penting untuk kelas kontrol turunannya: +

+
    +
  • addParsedObject() - 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 Controls dari kontrol. Kontrol turunannya dapat mengganti metode ini untuk melakukan proses khusus mengenai konten yang dikurung tersebut. Sebagai contoh, TListControl hanya menerima komponen TListItem dikurung di dalam tag komponennya, dan komponen ini ditambahkan ke koleksi Items dari TListControl. +
  • render() - metode ini menyajikan kontrol. Standarnya menyajikan item-item dalam koleksi Controls. Kontrol turunannya dapat mengganti metode ini guna memberikan penyajian yang dikustomisasi.
    • +
+Properti dan metode penting lainnya termasuk: +
    +
  • ID - 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.
    • +
  • UnqiueID - 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 TControl::findControl(). Kontrol input pengguna sering memakainya sebagai nilai dari atribut yang sama dari elemen input HTML.
    • +
  • ClientID - mirip dengan UniqueID, kecuali bahwa ia dipakai terutama untuk penyajian dan umumnya digunakan sebagai nilai atribut id elemen HTML. Jangan bergantung pada format eksplisit ClientID.
    • +
  • Enabled - apakah kontrol ini dihidupkan atau tidak. Catatan, dalam beberapa kasus, jika salah satu kontrol leluhurnya dimatikan, kontrol juga diperlakukan sebagai dimatikan, meskipun properti Enabled adalah true.
    • +
  • Parent - kontrol leluhur dari kontrol ini. Kontrol leluhur memegang kendali apakah menyajikan kontrol ini atau tidak dan di mana menempatkan hasil yang disajikan.
    • +
  • Page - halaman yang berisi kontrol ini.
    • +
  • Controls - koleksi dari semua kontrol anak, termasuk teks statis diantaranya. Ia dapat dipakai seperti sebuah array, karena ia mengimplementasikan antarmuka Traversable. Untuk menambah anak ke kontrol, cukup sisipkan ia ke dalam koleksi Controls di posisi yang sesuai.
    • +
  • Attributes - koleksi dari atribut kustom. Ini berguna untuk membolehkan para pengguna untuk menetapkan atribut dari elemen output HTML yang tidak tercakup oleh properti kontrol.
    • +
  • getViewState() dan setViewState() - metode ini umum dipakai untuk mendefinisikan properti yang disimpan dalam kondisi tampilan.
    • +
  • saveState() dan loadState() - kedua metode ini bisa diganti untuk menyediakan langkah terakhir kondisi penyimpanan dan pengambilan.
    • +
  • Control lifecycles - Seperti halaman, kontrol juga mempunyai masa hidup. Setiap kontrol menjalani masa hidupnya dalam urutan berikut: constructor, onInit(), onLoad(), onPreRender(), render(), dan onUnload. Lebih jelasnya dapat ditemukan dalam seksi halaman.
    • +
+ +

Memperluas TWebControl

+

+TWebControl dipakai terutama sebagai basis kelas untuk kontrol yang menyajikan elemen HTML. Ia menyediakan satu set properti yang umum diantara elemen HTML. Ia memisahkan TControl::render() ke dalam metode berikut yang lebih cocok untuk menyajikan elemen HTML: +

+
    +
  • addAttributesToRender() - menambah atribut untuk elemen HTML yang disajikan. Metode ini sering diganti dengan kelas tutunannya karena biasanya memiliki atribut berbeda yang disajikan.
    • +
  • renderBeginTag() - menyajikan tag HTML pembuka.
    • +
  • renderContents() - menyajikan konten dikurung di dalam elemen HTML. Standarnya menampilkan item-item dalam koleksi Controls daru kontrol. kelas turunannya dapat mengganti metode ini guna menyajikan konten yang dikustomisasi.
    • +
  • renderEndTag() - menyajikan tag HTML penutup.
    • +
+

+Ketika menyajikan tag HTML pembuka, TWebControl memanggil getTagName() untuk mendapatkan nama tag. kelas turunannya dapat mengganti metode ini guna menyajikan nama tag yang berbeda. +

+ +

Membuat Kontrol dengan Fungsional Khusus

+

+Jika sebuah kontrol ingin merespon event sisi-klien dan menterjemahkannya ke dalam event sisi server (disebut event postback), seperti TButton, ia harus mengimplementasikan antarmuka IPostBackEventHandler. +

+

+Jika kontrol ingin bisa mengambil data post, seperti TTextBox, ia harus mengimplementasikan antarmuka IPostBackDataHandler. +

+

+Jika kontrol ingin mendapatkan data dari beberapa sumber data eksternal, ia harus memperluas TDataBoundControl. TDataBoundControl mengimplementasikan properti dasar yang diperlukan untuk mempopulasi data melalui databinding. Kenyataanya, kontrol seperti TListControl, TRepeater adalah TDataGrid semua berasal darinya. +

+
$Id: NewControl.page 1741 2007-03-05 16:05:43Z xue $
 \ 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 @@ + + +

TOutputCache

+ + +

+TOutputCache 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. +

+ +

+Untuk menggunakan TOutputCache, cukup kurung konten yang akan di-cache di dalam tag komponen TOutputCache pada template (baik template kontrol halaman ataupun non-halaman), misalnya +

+ +<com:TOutputCache> + content to be cached +</com:TOutputCache> + +

+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 TOutputCache pada satu template dan ia dapat diulang-ulang. +

+ +
Note: +TOutputCache menyimpan konten yang di-cache melalui modul cache PRADO (misalnya TSqliteCache) dan selanjutnya memerlukan setidaknya satu modul cache diambil saat aplikasi dijalankan. +
+ +

+Validitas dari konten yang di-cache ditentukan berdasarkan dua faktor: Durasi 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. +

+ +

+Ada dua cara untuk menetapkan ketergantungan cache. Seseorang bisa menulis pengendali event guna merespon event OnCheckDependency dan menyetel properti parameter event IsValid untuk menunjukan apakah data yang di-cache tetap benar atau tidak. Seseorang juga bisa memperluas TOutputCache dan mengganti metode getCacheDependency()-nya. +

+ +

+Konten yang diambil dari cache dapat bervariasi dengan memperhatikan beberapa parameter. TOutputCache mendukung variasi dengan memperhatikan parameter permintaan, yang ditetapkan oleh properti VaryByParam. 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 VaryBySession disetel true. Untuk memvariasikan konten yang di-cache oleh faktor lain, ganti metode calculateCacheKey(). +

+ +

+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. +

+ +

+Standarnya, TOutputCache hanya efektif untuk permintaan halaman non-postback dan saat modul cache dihidupkan. Jangan mencoba untuk mengalamatkan kontrol anak pada TOutputCache saat konten yang di-cache saat ini sedang dipakai. Gunakan properti ContentCached untuk menentukan apakah konten di-cache atau tidak. +

+ +
$Id: OutputCache.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

TPager

+ + +

+TPager membuat sebuah lembaran yang menyediakan UI bagi pengguna akhir untuk secara interaktif menetapkan halaman data mana yang disajikan dalam kontrol turunan-TDataBoundControl, seperti TDataList, TRepeater, TCheckBoxList, dll. Kontrol data-terikat sasaran ditetapkan dengan properti ControlToPaginate, yang harus berupa path ID dari kontrol sasaran yang dijangkau dari tempat penamaan lembar. +

+ +

+Note, the target data-bound control must have its AllowPaging 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. +

+ +

+TPager dapat menampilkan salah satu dari tiga tipe antarmuka pengguna, ditetapkan melalui properti Mode-nya: +

+ +

+Antarmuka pengguna ini selanjutnya dapat dikustomisasi dengan mengkonfigurasi properti berikut +

+ + +

+TPager memunculkan event OnPageIndexChanged 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. +

+ + + +
$Id: Pager.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

TPanel

+ + +

+TPanel bertindak sebagai tempat penyajian untuk kontrol lain. Ia menampilkan elemen <div> pada halaman. Properti Wrap menetapkan konten badan panel yang menggulung ataupun tidak, sementara HorizontalAlign mengatur bagaimana konten dijajarkan secara horisontal dan Direction menunjukan arah konten (kiri ke kanan atau kanan ke kiri). Anda dapat menyetel BackImageUrl untuk memberikan gambar latar belakang pada panel, dan dana bisa menyetel GroupingText 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 DefaultButton. +

+ + +
$Id: Panel.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

TPlaceHolder

+ + +

+TPlaceHolder menyimpan tempat pada template, di mana teks statis atau kontrol dapat disisipkan secara dinamis. +

+ + + +
$Id: PlaceHolder.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

TRadioButton

+ + +

+TRadioButton mirip dengan TCheckBox dalam setiap aspek, kecuali bahwa TRadioButton menampilkan tombol radio pada halaman Web. Tombol radio dapat dimiliki oleh grup yang ditetapkan oleh GroupName dengan demikian hanya satu tombol radio yang bisa dipilih. +

+ + +
$Id: RadioButton.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

TRepeater

+ +

+TRepeater menampilkan kontennya secara berulang berdasarkan data yang diambil dari DataSource. Konten yang diulang dalam TRepeater disebut items sebuah kontrol yang dapat diakses melalui properti Items. Ketika dataBind() 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. +

+ +

+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. +

+ +

+Sejak v3.1.0, tata letak juga bisa dietapkan oleh 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). 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: +

+ + + + +

+Properti berikut dipakai untuk menetapkan tipe template dan penyaji datalist. Jika tipe konten didefinisikan dengan template dan penyaji, maka penyaji diambil lebih dulu. +

+ + + +

+Untuk mempopulasikan data ke dalam item pengulag, setel DataSource ke obyek data yang benar, seperti array, TList, TMap, atau tabel database, dan kemudian panggil dataBind() untuk pengulang. Yaitu, +

+ +class MyPage extends TPage { + public function onLoad($param) { + parent::onLoad($param); + if(!$this->IsPostBack) { + $this->Repeater->DataSource=$data; + $this->Repeater->dataBind(); + } + } +} + + +

+Ketika dataBind() dipanggil, TRepeater menjalani masa hidup seperti berikut untuk setiap baris data: +

+ +
    +
  1. buat item berdasarkan template atau penyaji
    2. +
  2. setel baris data ke item
    3. +
  3. munculkan event OnItemCreated
    4. +
  4. tambah item sebagai kontrol anak
    5. +
  5. panggil dataBind() pada item
    6. +
  6. munculkan event OnItemDataBound
    7. +
+ +

+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. +

+ +

+Untuk mengakses data item pengulang dalam postbacks, gunakan salah satu cara berikut: +

+ + + +

+TRepeater memunculkan OnItemCommand kapan saja kontrol tombol di dalam beberapa item pengulang memunculkan event OnCommand. Oleh karena itu, anda bisa menangani semua event OnCommand di satu tempat dengan menulis pengendali event untuk event OnItemCommand. +

+ +

+Contoh berikut memperlihatkan bagaimana menggunakan TRepeater guna menampilkan data tabular. +

+ +

+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 OnItemDataBound pada pengulang terluar. Event OnItemDataBound dimunculkan setiap kali item pengulang terluar menyelesaikan penyatuan data. Dalam contoh berikut, kita mengeksploitasi event lain pada pengulang yang disebut OnItemCreated, 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 AlternatingItemTemplate untuk pengulang. +

+ +

+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. +

+

+Demo Penyusun komponen PRADO 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 OnItemCommand pada pengulang. +

+

+Lihat dalam contoh lain berikut yang memperlihatkan bagaimana menggunakan pengulang untuk mengumpulkan input pengguna. +

+ + +

+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 IDataRenderer. Kontrol Web umum, seperti TTextBox, TLabel, semuanya mengimplementasikan antarmuka ini. Ketika kontrol tersebut adalah penyaji item yang dipakai, properti Data ditempati dengan baris data yang sedang diikat ke item pengulang. +

+ + +

+Lebih sering, seseorang perlu mengkustomisasi tata letak item pengulang. Contoh di atas bergantng pada OnItemCreated 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 RegionDisplay. seperti kita lihat, kode baru lebih mudah dimengerti dan dipelihara. +

+ + + +
$Id: Repeater.page 1688 2007-02-09 22:48:31Z xue $
 \ 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 @@ + + +

TSafeHtml

+ + +

+TSafeHtml adalah kontrol yang membuang semua konten HTML yang berpotensi membahayakan. Ini terutama sebagai pelapis dari proyek SafeHTML. Menurut proyek SafeHTML, ia mencoba untuk mengamankan situasi berikut saat string ditampilkan kepada pengguna-akhir: +

+ + +

+Untuk menggunakan TSafeHtml, cukup kurung konten untuk diamankan dalam tag komponen TSafeHtml pada template. Konten bisa terdiri dari teks statis dan kontrol PRADO. Jika yang kedua, hasil penyajian kontrol akan aman. +

+ + + +
$Id: SafeHtml.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

Kontrol Standar

+

* tutorial untuk kontrol ini belum lengkap.

+ + +
$Id: Standard.page 1846 2007-04-07 10:35:16Z wei $
 \ 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 @@ + + +

TStatements

+ + +

+TStatements mengevaluasi rangkaian pernyataan PHP dan menampilkan konten yang disajikan oleh pernyataan. Untuk menetapkan pernyataan PHP yang dievaluasi, setel properti Statements. Sebagai contoh, tag komponen berikut menampilkan waktu saat ini pada halaman Web, +

+ +<com:TStatements> + <prop:Statements> + setlocale(LC_ALL, 'nl_NL'); + echo strftime("%A %e %B %Y",time()); + </prop:Statements> +</com:TStatements> + + +

+Catatan, TStatements mengevaluasi pernyataan PHP selama menyajikan masa hidup kontrol. Tidak seperti TExpression, TStatements hanya menampilkan konten 'echoed' di dalam pernyataan. +

+ +

+Konteks pernyataan dalam kontrol TStatements adalah kontrol itu sendiri. Yakni, $this mewakili obyek kontrol jika ia ada dalam pernyataan. Sebagai contoh, tag pernyataan berikut akan menampilkan judul halaman berisi kontrol TStatements. +

+ +<com:TStatements> + <prop:Statements> + $page=$this->Page; + echo $page->Title; + </prop:Statements> +</com:TStatements> + + +

+Harap berhati-hati, karena TStatements membolehkan eksekusi kode PHP bebas, secara umum anda jangan menggunakannya untuk mengevaluasi kode PHP yang dikirimkan oleh pengguna aplikasi anda. +

+ + + +
$Id: Statements.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

TTabPanel

+ + +

+TTabPanel 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. +

+ +

+Kontrol TTabPanel terdiri dari satu atau beberapa kontrol TTabView yang mewakili tampilan tab yang mungkin. Kapan saja, hanya satu tampilan tab terlihat (aktif), yang ditetapkan oleh setiap properti berikut: +

+ + + +

+Jika ActiveViewIndex dan ActiveViewID keduanya disetel, yang kedua diambil lebih dahulu. +

+ +

+TTabPanel menggunakan CSS untuk menetapkan penampilan bat tab dan panel. Standarnya, file CSS yang disertakan akan diterbitkan berisi CSS standar untuk TTabPanel. Anda juga dapat menggunakan file CSS sendiri dengan menetapkan properti CssUrl. Properti berikut menetapkan kelas CSS yang dipakai untuk elemen div dalam TTabPanel: +

+ + + +

+Untuk menggunakan TTabPanel, tulis template seperti berikut: +

+ + + <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> + + + + +
$Id: TabPanel.page 2075 2007-07-25 15:43:06Z xue $
 \ 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 @@ + + +

TTable

+ + +

+TTable menampilkan tabel HTML pada halaman. ia dipakai bersama dengan TTableRow dan TTableCell untuk membolehkan memanipulasi tabel HTML secara programatis. Baris dari tabel disimpan dalam properti Rows. Anda dapat menyetel tabel cellspacing dan cellpadding masing-masing melalui properti CellSpacing dan CellPadding. Judul tabel dapat ditetapkan melalui Caption di mana penjajarannya ditetapkan dengan CaptionAlign. Properti GridLines menunjukan bagaimana tabel harus menampikan bingkainya, dan BackImageUrl membolehkan tabel untuk memiliki gambar latar belakang. +

+ + +
$Id: Table.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

TTextBox

+ + +

+TTextBox menampilkan kotak teks pada halaman Web. Konten dalam kotak teks ditentukan oleh properti Text. Anda dapat membuat teks SingleLine, a MultiLine, atau Kata sandi dengan menyetel properti TextMode. Properti Rows dan Columns menetapkan dimensinya. Jika AutoPostBack adalah true, perubahan konten dalam kotak teks dan kemudian memindahkan fokur keluar darinya akan menyebabkan aksi postback. +

+ + +
$Id: TextBox.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

TTextHighlighter

+ + +

+TTextHighlighter melakukan penerangan sintaks untuk konten badannya, termasuk teks statis dan hasil penyajian dari kontrol anaknya. Teks yang sedang diterangi mengikuti sintaks Language yang ditetapkan, yang dapat berupa 'php' (standar), 'prado', 'css', 'html', dll. Di sini, 'prado' terdiri dari sintaks template kontrol PRADO. +

+

+Jika nomor baris diinginkan di depan setiap baris, setel ShowLineNumbers ke true. +

+

+Untuk menggunakan TTextHighlighter, cukup kurung konten yang sintaksnya akan diterangi di dalam badan pada kontrol TTextHighlighter. Contoh berikut menerangi bagian kode PHP, +

+ +<com:TTextHighlighter ShowLineNumbers="true"> + +</com:TTextHighlighter> + + + + +
$Id: TextHighlighter.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 @@ + + +

Kontrol Validasi

+ +

+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 TButton, TLinkButton atau TTextBox (di bawah mode AutoPostBack) di mana properti CausesValidation adalah true. +

+ +

+Validasi selalu dilakukan pada sisi server. Jika EnableClientScript 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. +

+ +

+Validator dengan berbagai set properti umum yang didefinisikan dalam basis kelas TBaseValidator dan didaftarkan sebagai berikut, +

+ + +

Kontrol Validasi Prado

+ +

TRequiredFieldValidator

+

+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 InitialValue, validator dapat memeriksa apakah input pengguna berbeda dari InitialValue. Jika tidak, validasi gagal. +

+ + + +

TRegularExpressionValidator

+

+TRegularExpressionValidator memverifikasi input pengguna terhadap pola reguler. Validasi gagal jika input tidak sama dengan pola. Ekspresi reguler bisa ditetapkan dengan properti RegularExpression. Beberapa ekspresi reguler yang umumnya dipakai termasuk: +

+ +

+Pola ekspresi reguler lebih jauh dapat ditemukan di Internet, misalnya +http://regexlib.com/. +

+

+Catatan, TRegularExpressionValidator hanya memeriksa input pengguna yang tidak kosong. Gunakan TRequiredFieldValidator untuk memastikan input pengguna tidak kosong. +

+ + +

TEmailAddressValidator

+

+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 CheckMXRecord adalah true, validator juga akan memeriksa apakah rekaman MX yang diindikasikan dalam alamat email adalah benar, checkdnsrr() tersedia dalam PHP yang diinstalasi. +

+

+Catatan, jika input yang divalidasi kosong, TEmailAddressValidator tidak akan melakukan validasi. Gunakan TRequiredFieldValidator untuk memastikan nilai tidak kosong. +

+ + + +

TCompareValidator

+

+TCompareValidator membandingkan input pengguna dengan nilai konstan yang ditetapkan oleh ValueToCompare, atau input pengguna lain yang ditetapkan oleh ControlToCompare. Properti Operator menetapkan bagaimana untuk membandingkan nilai, yang menyertakan Equal, NotEqual, GreaterThan, GreaterThanEqual, LessThan dan LessThanEqual. Sebelum perbandingkan, nilai yang dibandingkan akan diubah ke tipe yang ditetapkan oleh DataType seperti didaftarkan sebagai berikut, +

+
    +
  • String - Tipe data string.
    • +
  • Integer - Tipe data integer signed 32-bit.
    • +
  • Float - Tipe data pecahan presisi-ganda.
    • +
  • Date - Tipe data tanggal. Format tanggal dapat ditetapkan dengan menyeting properti DateFormat, yang harus dikenal oleh TSimpleDateFormatter. Jika properti tidak disetel, sintaks tanggal GNU diasumsikan.
    • +
+

+Catatan, jika input yang sedang divalidasi kosong, TEmailAddressValidator tidak akan melakukan validasi. Gunakan TRequiredFieldValidator untuk memastikan nilai tidak kosong. +

+

+N.B. Jika memvalidasi terhadap TDatePicker properti DataType harus sama dengan "Date" dan properti DateFormat pada validator harus sama dengan DateFormat pada TDatePicker. +

+ + + +

TDataTypeValidator

+

+TDataTypeValidator memverifiksai apakah data input adalah tipe spesifik sepeti ditunjukan oleh DataType. Tipe data dapat diperiksa kembali apakah sama seperti yang ada dalam TCompareValidator. +

+

+N.B. Jika memvalidasi terhadap TDatePicker properti DataType harus sama dengan "Date" dan properti DateFormat pada validator harus sama dengan DateFormat pada TDatePicker. +

+ + + + + +

TRangeValidator

+

+TRangeValidator memverifikasi apakah nilai input di dalam jangkauan yang ditetapkan. TRangeValidator menggunakan properti kunci untuk melakukan validasinya. Properti MinValue dan properti MaxValue menetapkan nilai minimum dan maksimum dari jangkauan yang benar. Properti DataType 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. +

+ +

+Jika properti StrictComparison disetel ke true, maka jangkauan dibandingkan semata-mata kurang dari MaxValue dan/atau lebih besar dari MinValue. +

+ +

+N.B. Jika memvalidasi terhadap TDatePicker properti DataType harus sama dengan "Date" dan properti DateFormat pada validator harus sama dengan DateFormat pada TDatePicker. +

+ + + + +

TCustomValidator

+

+TCustomValidator melakukan validasi didefinisikan-pengguna (baik sisi-server atau sisi-klien ataupun keduanya) pada kontrol input. +

+

+Untuk membuat fungsi validasii sisi-server, sediakan pengendali untuk event OnServerValidate yang melakukan validasi. String data pada kontrol input untuk memvalidasi dapat diakses dengan parameter event properti Value. Hasil validasi harus disimpan dalam properti IsValid pada parameter. +

+

+Untuk membuat fungsi validasi sisi-klien, tambahkan fungsi validasi javascript ke template halaman dan tempatkan namanya ke properti ClientValidationFunction. Fungsi harus memiliki tanda sebagai berikut: +

+ + + + + + +

TValidationSummary

+

+TValidationSummary menampilkan ringkasan dari kesalahan inline validasi pada halaman Web, dalam kotak pesan, atau keduanya. +

+

+Standarnya ringkasan validasi akan mengumpulkan ErrorMessage dari semua validator yang gagal pada halaman. Jika ValidationGroup tidak kosong, hanya validator itu yang dimiliki grup akan menampilkan pesan kesaslahannya dalam ringkasan. +

+

+Ringkasan dapat ditampilkan sebagai daftar, daftar bertitik, atau satu paragraf berdasarkan properti DisplayMode. Pesan yang ditampilkan dapat diawali dengan HeaderText. Ringkasan dapat ditampilkan pada halaman Web atau kotak pesan JavaScript, masing-masing dengan menyetel properti ShowSummary dan ShowMessageBox. Catatan, yang terakhir hanya efektif saat EnableClientScript adalah true. +

+ + +

Berinteraksi dengan Validator

+

Mereset atau Membersihkan Validator

+

+Validator bisa mereset pada sisi-klien menggunakan javascript dengan memanggil +Prado.Validation.reset(groupID) di mana groupID adalah nama pengelompokan. Jika groupID adalah null, maka validator tanpa pengelompokan yang dipakai. +

+ + + + + + +

Validasi Kondisional Sisi Server dan Klien

+

+ Semua validator berisi event berikut. + Event terkait untuk sisi klien tersedia sebagai sub-properti + dari properti ClientSide pada validator. +

+
    +
  • Event OnValidate muncul sebelum fungsi validasi validator yang dipanggil.
    • +
  • Event OnValidationSuccess muncul setelah validator sukses memvalidasi kontrol.
    • +
  • Event OnValidationError muncul setelah validator gagal memvalidasi.
    • +
+ +
Catatan: +Untuk Prado sebelum versi 3.1 nama properti adalah OnError dan OnSuccess. Untuk Prado versi 3.1 dan berikutnya masing-masing OnValidationError dan OnValidationSuccess. +
+ +

Contoh berikut memunculkan pesan yang mengatakan "hello" saat validator gagal pada sisi-klien. + +<com:TRequiredFieldValidator ... > + <prop:ClientSide.OnValidationError> + alert("hello"); + </prop:ClientSide.OnValidationError> +</com:TRequiredFieldValidator> + +Hasil event fungsi callback sisi-klien adalah dalam bentuk seperti berikut. + +function onErrorHandler(sender, parameter) +{ + alert("hello"); +} + +di mana sender adalah vaidator sisi-klien saat ini dan parameter adalah kontrol yang memanggil validator. +

+

Contoh Validasi Kondisional

+

+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). + +

+ +
$Id: Validation.page 1902 2007-05-07 04:17:37Z wei $
 \ 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 @@ + + +

TWizard

+ + +

Tinjauan

+

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

+components of wizard + +

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

+ +

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

+ +

+Langkah bimbingan biasanya ditambahkan ke bimbingan melalui template seperti berikut, +

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

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

+ + + +

Menggunakan TWizard

+ +

Contoh Bimbingan Satu-Langkah

+

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

+ + +

Mengkustomisasi Gaya Bimbingan

+

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

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

Mengkustomisasi Navigasi Bimbingan

+

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

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

Menggunakan Template dalam Bimbingan

+

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

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

Menggunakan Langkah Bimbingan Bertemplate

+

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

+ + +
$Id: Wizard.page 1650 2007-01-24 06:55:32Z wei $
 \ 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 new file mode 100644 index 00000000..9faf580d Binary files /dev/null and b/demos/quickstart/protected/pages/Controls/id/wizard.gif differ -- cgit v1.2.3