Jeni slides j2 me-03-high level user interface
- 1. High Level User Interface Versi 0.1 Pembangunan Aplikasi Mobile
- 2. Tujuan Mengetahui manfaat menggunakan high level user interface dan low level user interface Mengetahui kapan menggunakan library low level user interface atau high level user interface Mendesain MIDlet dengan menggunakan high level user interface Mengidentifikasi beberapa sub class dari Screen Mengetahui beberapa items yang dapat diletakkan pada sebuah object Form
- 3. High Level vs Low Level High Level UI Low-Level UI highly portable across devices may be device-specific look and feel is the same as device application specific look and feel interactions like scrolling are encapsulated must implement own navigation cannot define actual appearance can define actual appearance on pixel level no access to device specific features access to low-level input like key presses
- 4. Kapan menggunakan High Level UI? Jika Anda akan membangun aplikasi sederhana, berupa aplikasi text based Apabila Anda ingin aplikasi Anda dapat digunakan pada banyak device (portability) Apabila Anda ingin aplikasi Anda memiliki kesamaan tampilan pada komponen-komponen UI-nya pada device yang berbeda Apabila Anda menginginkan untuk melakukan sedikit pengkodean, dimana interaksi terbanyak akan telah dihandle didalam API
- 5. Kapan menggunakan Low Level GUI? Apabila Anda menginginkan untuk mengontrol secara mandiri tampilan dari sebuah aplikasi Apabila aplikasi Anda membutuhkan penempatan element UI secara tepat kedalam screen Apabila Anda membangun sebuah graphical games, walaupun Anda tetap dapat menggunakan high level UI pada menu-menu games, tetapi lebih baik Anda menggunakan menu UI yang Anda ciptakan sendiri untuk memberikan environment yang lebih baik bagi user Apabila aplikasi membutuhkan akses kepada low-level input seperti tekan key Apbila aplikasi Anda akan mengimplementasikan layar navigasi yang diciptakan sendiri
- 6. Display Satu-satunya object untuk menampilkan sesuatu ke layar pada tiap MIDlet MIDlet dapat meminta reference kepada object Display dengan menggunakan static Display.getDisplay(), untuk memberikan reference pada instance dari MIDlet MIDlet akan memastikan bahwa object Display tidak akan berubah selama object dari MIDlet tersebut tersedia
- 7. Displayable Hanya satu displayable yang akan ditampilkan pada tiap display Secara default, Displayable tidak ditampilkan ke Display Sebuah Displayable dapat dipanggil dengan menggunakan setMethod() dari object Display Method setCurrent() akan dipanggil pada memulai aplikasi, jika tidak maka sebuah blank screen akan tampil
- 8. Displayable
- 9. Title Posisi dan tampilan dari title sangat bergantung kepada spesifikasi device dan hanya dapat ditentukan oleh device Sebuah title ditambahkan pada sebuah Displayable dengan memanggil method setTitle() Memanggil method ini berarti secara otomatis akan meng- update title pada Displayable. Jika Displayable sudah tampil pada layar, spesifikasi MIDP akan menentukan bahwa title haruslah diganti oleh implementasi (secepat mungkin dikenali, dan secepat mungkin dilaksanakan)
- 10. Command Didalam menu bar, MIDlet memiliki command Command biasanya diimplementasikan dalam MIDP sebagai soft key atau item didalam menu Sebuah object command berisi informasi mengenai action- action yang akan dilakukan pada saat command tsb diaktifkan. Command tidak berisi code yang akan dieksekusi pada saat command tsb diaktifkan Diperlukanlah sebuah commandListener sebagai properti dari Displayable yang berisi action-action yang akan dieksekusi pada saat Command diaktifkan
- 11. Command
- 12. CommandListener public void commandAction( Command command, Displayable displayable) Method commandAction() akan dipanggil pada saat sebuah Command dipilih Variabel pada command adalah reference pada Command yang sudah dipilih displayable adalah object dari Displayable, dimana Command ditempatkan didalam display tersebut dan action-action juga terjadi dalam display yang sama
- 13. Screen
- 14. Item Property Default Value Label specified in the subclass constructor Commands none defaultCommand null ItemCommandListener null Layout directive LAYOUT_DEFAULT Preferred width and height -1 (unlocked)
- 15. Item
- 16. Alert Alert adalah screen yang dapat merepresentasikan sebuah text dan image Alert adalah sebuah komponen yang digunakan untuk menampilkan error, peringatan, menampilkan text dan image sebagai informasi atau memberikan konfirmasi kepada user The Alert is displayed for a specified period of time. This time is set using the setTimeout() method and is specified in milliseconds unit. It can be made to be displayed until the user activates a command ("Done") by specifying a special timeout of Alert.FOREVER.
- 17. Tipe-tipe Alert INFO Alert Modal Alert Alert w/ gauge indicator
- 18. List List adalah subclass dari Screen yang berisi mengenai daftar yang dapat dipilih oleh user List dapat memiliki tiga tipe : IMPLICIT, EXCLUSIVE or MULTIPLE. Jika List adalah IMPLICIT dan user mengeksekusi button “select”, commandAction() milik commandListener dari List akan dipanggil Default Command adalah List.SELECT_COMMAND.
- 20. Text Box Sebuah TextBox adalah sub-class dari Screen yang bisa digunakan untuk mendapatkan masukan text dari user TextBox memperbolehkan user untuk menginputkan dan juga mengedit sebuah text. TextBox sama dengan TextField (lihat item TextFiel) karena ia memiliki input constraint dan input modes. Perbedaan utamanya adalah user dapat menginputkan baris yang baru (apabila input constraint diset ke ANY)
- 21. Text Box
- 22. Form Form adalah subclass dari Screen Form merupakan container dari subclass items seperti TextField, StringItem, ImageItem, DateField dan ChoiceGroup. Ia menghandle layout dari komponen-komponen GUI. Ia juga bertanggung jawab terhadap traversal antar komponen dan kemampuan scrolling pada Screen
- 23. ChoiceGroup Item ChoiceGroup adalah daftar dari pilihan-pilihan Pilihan tersebut bisa berisi text, image, maupun keduanya Pilihan-pilihan tersebut bisa EXCLUSIVE (hanya satu pilihan yang dapat diambil) atau MULTIPLE (beberapa pilihan dapat dipilih pada waktu yang sama ) Jika ChoiceGroup bertipe POPUP, hanya satu pilihan yang akan ditampilkan. Pop up yang sudah dipilih akan ditampilkan pada saat item tersebut dipilih. Dari pop up selection ini, user dapat menentukan pilihannya. Pilihan yang ditampilkan haruslah pilihan yang telah ditentukan oleh user tadi.
- 24. Choice Group
- 25. Date Field Komponen DateField digunakan untuk menerima inputan dari user berupa date dan time DateField bisa berisi inputan date (mode DATE), inputan time (mode TIME), atau keduanya (mode DATE_TIME ) Method getDate() memiliki return, current value yang dimiliki oleh item tersebut. Method ini akan memiliki kembalian null apabila item tidak diinisialisasi Jika mode dari DateField adalah DATE, maka komponen time diset ke nol, sedangkan apabila digunakan mode TIME, komponen dari date akan diset ke “1 January 1970”
- 26. DateField DateField input modes Selecting a date Time input
- 27. StringItem StringItem adalah sebuah komponen yang hanya bisa dibaca sehingga ia biasa diposisikan sebagai label atau text. Secara optional StringItem menerima beberapa mode tampilan yaitu Item.PLAIN, Item.HYPERLINK atau Item.BUTTON. Jika mode tampilan itu berupa HYPERLINK atau BUTTON maka default Command dan ItemCommandListener harus diset pada item tersebut.
- 28. String Item
- 29. Image Item ImageItem adalah image sederhana dimana sebuah image dapat diletakkan pada sebuah komponen yang lain seperti Form public ImageItem( String label, Image img, int layout, String altText)
- 30. Image Item
- 31. Text Field TextField adalah sebuah item dimana user dapat memasukkan encode input Constraint dalam TextField: ◦ TextField.ANY ◦ TextField.EMAILADDR ◦ TextField.NUMERIC ◦ TextField.PHONENUMBER ◦ TextField.URL ◦ TextField.DECIMAL
- 32. Text Field