Tutorial WebRatio

http://www.tulisanku.com

Tutorial WebRatio : Create the Hello World unit

Tutorial ini menunjukkan bagaimana untuk membuat sebuah custom unit sederhana yang akan menuliskan pesan “Hello World” pada sebuah halaman. Tutorial ini juga menunjukkan bagaimana menggunakan unit baru tersebut dalam web project.

Langkah-langkahnya adalah sebagai berikut :

1. Jalankan program WebRatio.2. Jika pada saat menjalankan program belum berada di WebRatio perspective, pada main menu

bagian atas pilih Window > Open Perspective > WebRatio.

3. Sebelum membuat custom unit, pertama harus membuat Unit Project untuk itu. Caranya dengan memilih di main menu File > New > Units Project. Setelah membuat Units Project, berikan nama untuk project tersebut. Pada tutorial ini diberikan nama MyUnits dan klik Finish.

4. Untuk membuat unit baru, pada bagian main menu pilih File > New > Unit. Berikan nama untuk

unit yang akan dibuat, pada tutorial ini diberi nama “HelloWorld”. Setelah itu klik next dan berikan tanda cek pada Content untuk tipe dari unit dan klik Finish.


http://www.tulisanku.com/




5. Langkah selanjutnya adalah untuk mendefenisikan semua properties dari unit tersebut. Setelah langkah 4 akan terbuka editor untuk Unit Configuration. Isikan “hwu” pada bagian ID prefix. Pilih tab Layout dan berikan tanda cek pada pilihan can place in grid.

6. Membuat Unit Bean. Class yang pertama kali dibuat adalah bean yang akan digunakan oleh unit. Bean adalah Java class yang merepresentasikan struktur data dari unit tersebut. Menambahkan






class baru dengan cara klik File > New > Class. Pada isian Source folder isi dengan “MyUnit/src”, untuk package diisi dengan com.webratio.units.custom.helloword dan pada bagian name diisi dengan HelloWorldUnitBean. Klik Finish untuk menyimpannya.

7. Window dari class yang baru saja dibuat akan otomatis terbuka. Pada bagian ini didefenisikan struktur data dari unit yang akan dibuat. Pada tutorial ini kita akan mengisi dengan code seperti di bawah ini :private String message;public String getMessage() {return message;}public void setMessage(String message) {






this.message = message;}

8. Class HelloWorldUnitService harus diubah pada bagian execute method. Dengan mengubah

bagian ini kita mengharapkan bisa menampilkan pesan di halaman tersebut. Pada bagian execute method ditambahkan code :HelloWorldUnitBean bean = new HelloWorldUnitBean();bean.setMessage("Hello World!");

9. Pembuatan custom unit baru telah selesai dilakukan. Untuk melakukan testing, dibutuhkan sebuah project baru. Membuat project baru dengan cara klik File > New > Web Project. Berikan nama project tersebut dengan nama UnitExample dengan siteview Public dan sebuah Home page.






10. Project telah selesai dibuat dan sekarang kita akan memasukkan custom unit kita ke halaman tersebut. Berikan nama pada unit tersebut seperti “My Unit”.

11. Langkah berikutnya dilakukan adalah membuat Style project. Hal ini dilakukan jika kita belum pernah membuat Style project sebelumnya. Untuk membuat Style project, pilih File > New > Style project. Berikan nama pada project tersebut misalnya “UnitStyle”.

12. Langkah selanjutnya yang dilakukan adalah membuat template untuk Hello World unit. Klik File > New > Layout Template. Pilih Unit untuk tipe template dan kemudian pilih Hello World Unit dari list yang ada. Klik Next kemudian pilih Style project dimana ingin meletakkan template baru dan berikan nama “HelloWorld” untuk nama template dan klik Finish.





13. Sekarang kita bisa mengubah file HelloWorld.unit.template. Hal yang paling penting adalah untuk menuliskan pesen menggunakan “message” properti dengan menggunakan code <c:out value="${<wr:UnitId/>.message}"/>

14. Pilih unit Hello World yang ada pada Grid View. Pada Properties View pilih template yang baru dibuat tadi dan pada bagian Unit Layout ganti dan asosiasikan dengan template yang baru di buat untuk unit tersebut.

15. Dengan demikian, tutorial ini sudah selesai. Selamat mencoba!




Tutorial WebRatio

Documents

Transcript of Tutorial WebRatio