Jeni slides j2 me-04 low level user interface-v 0.2

720 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
720
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Jeni slides j2 me-04 low level user interface-v 0.2

  1. 1. Low-Level User Interface Versi 0.2 Pembangunan Aplikasi Mobile
  2. 2. Tujuan <ul><li>Memahami bagaimana menggunakan low-level event handling dalam MIDP </li></ul><ul><li>Menggambar dan menampilkan text, gambar, garis, persegi panjang, dan sudut </li></ul><ul><li>Menentukan warna, jenis huruf, dan ketebalan pada saat menggambar bentuk </li></ul><ul><li>Memahami dan menggunakan class Canvas dan Graphics </li></ul><ul><li>Menggambar dengan graphics </li></ul>
  3. 3. Canvas <ul><li>Canvas adalah subclass dari Displayable </li></ul><ul><li>Ia merupakan class abstract yang harus di-extend atau dijadikan sebagai subclass sebelum sebuah aplikasi memfungsikan class tersebut </li></ul><ul><li>Canvas dapat digunakan bersamaan dengan Screen sebagai high-level Displayable </li></ul><ul><li>Canvas akan mendefinisikan method-method tanpa event-handling. Aplikasi harus meng-override class-class tersebut untuk meng-handle event. </li></ul><ul><li>Canvas akan mendefinisikan sebuah method abstract yang dinamakan paint(). Sebuah aplikasi yang akan menggunakan Canvas harus mengimplementasikan method paint(). </li></ul>
  4. 4. Sistem Koordinat
  5. 5. Hello, world! pada Canvas
  6. 6. Hello, world! Canvas <ul><li>protected void paint(Graphics g) { </li></ul><ul><li> // membersihkan layar dengan </li></ul><ul><li> // memberikan warna putih pada layar </li></ul><ul><li>g.setColor(255, 255, 255 ); </li></ul><ul><li>g.fillRect(0, 0, getWidth(), getHeight()); </li></ul><ul><li> // set warna yang digunakan untuk menggambar </li></ul><ul><li>g.setColor(0, 0, 0); </li></ul><ul><li>// gambarlah text-nya </li></ul><ul><li>g.drawString(text, </li></ul><ul><li>getWidth()/2, getHeight()/2, </li></ul><ul><li>Graphics.TOP | Graphics.HCENTER); </li></ul><ul><li>} </li></ul>
  7. 7. Menambahkan Command <ul><li>Tambahkan object Command </li></ul><ul><li>Gunakan method addCommand() untuk menambahkan Command kepada Canvas (atau Form,List, TextBox) </li></ul><ul><li>Gunakan setCommandListener() untuk mendaftarkan class yang akan mendapatkan command event </li></ul><ul><li>Tambahkan commandListener dengan cara meng-implementasikan CommandListener dan menyediakan method commandAction() </li></ul>
  8. 8. Menambahkan Command <ul><li>Menciptakan object Command </li></ul><ul><li>private Command exitCommand = new Command(&quot;Exit&quot;, Command.EXIT, 0); </li></ul><ul><li>Menggunakan addCommand() untuk menambahkan sebuah command ke Canvas (atau Form, List, Text Box) </li></ul><ul><li>addCommand(exitCommand); </li></ul><ul><li>Menggunakan setCommandListener untuk mendaftarkan class mana yang akan mendapatkan command event </li></ul><ul><li>setCommandListener(this); </li></ul>
  9. 9. Menambahkan Command <ul><li>Menciptakan sebuah commandListener dengan cara meng-implements class CommandListener dan menyediakan method commandAction() </li></ul><ul><li>class HelloCanvas extends Canvas </li></ul><ul><li>implements CommandListener { </li></ul><ul><li>... </li></ul><ul><li>public void commandAction(Command c, Displayable d){ </li></ul><ul><li>if (c == exitCommand){ </li></ul><ul><li>// do something </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  10. 10. Graphics <ul><li>Graphics adalah sebuah class utama untuk menggambar text, image, lines, persegi panjang dan sudut </li></ul><ul><li>Ia memiliki method-method yang digunakan untuk menentukan pewarnaan, jenis huruf, dan ketebalan garis. </li></ul>
  11. 11. Color
  12. 12. Color <ul><li>Untuk menentukan warna yang akan digunakan pada method Graphics digunakanlah method setColor() </li></ul><ul><li>public void setColor (int red, int green, int blue) </li></ul><ul><li>public void setColor (int RGB) </li></ul><ul><li>Pada bentuk pertama, Anda akan mendefinisikan komponen-komponen warna yaitu merah, hijau, dan biru </li></ul><ul><li>Sedangkan pada bentuk kedua, komponen warna akan didefinisikan menggunakan bentuk : 0x00RRGGBB. </li></ul>
  13. 13. Color methods
  14. 14. Fonts <ul><li>Font memiliki tiga attribute yaitu face, style, dan size </li></ul><ul><li>Fonts tidak diciptakan sendiri oleh aplikasi, tetapi aplikasi akan mendapatkan attribute font tertentu dari sistem dan sistem-lah yang akan menyediakan font yang sesuai dengan attribute tersebut. </li></ul><ul><li>Tidak ada garansi dari sistem, bahwa semua attribute Font yang diinginkan oleh aplikasi dapat tersedia. </li></ul><ul><li>Jika sistem tidak mendapatkan font yang sesuai dengan permintaan dari aplikasi, maka ia akan mengembalikan font yang hampir sama dengan attribute-attribute yang di-request. </li></ul>
  15. 15. Fonts
  16. 16. Fonts <ul><li>Face dapat merupakan salah satu dari berikut ini: FACE_SYSTEM , FACE_MONOSPACE , atau FACE_PROPORTIONAL. </li></ul><ul><li>Style dapat berupa STYLE_PLAIN atau merupakan kombinasi dari STYLE_BOLD , STYLE_ITALIC , dan STYLE_UNDERLINED. </li></ul><ul><li>Kombinasi dari style dapat didefinisikan dengan menggunakn bitwise OR atau operator OR (|). Misalnya: bold dan italic dapat dideklarasikan berikut ini: </li></ul><ul><li>STYLE_BOLD | STYLE_ITALIC </li></ul><ul><li>Ukuran dari Font, bisa merupakan salah satu dari berikut ini: SIZE_SMALL , SIZE_MEDIUM , atau SIZE_LARGE </li></ul>
  17. 17. Stroke Style <ul><li>method setStrokeStyle(int style) akan menentukan stroke style yang akan digunakan untuk menggambar garis, sudut, persegi panjang, dan persegi panjang tumpul. </li></ul><ul><li>Stroke style tidak akan mengubah text, image, dan fill drawing operations. </li></ul><ul><li>Nilai yang benar bagi Stroke style adalah SOLID and DOTTED. </li></ul>
  18. 18. Anchor Points <ul><li>Text akan digambar relatif terhadap anchor point. Method drawString() akan melihat titik (x,y) relatif terhadap anchor point. </li></ul><ul><li>public void drawString(String str, int x, int y, int anchor) </li></ul><ul><li>Anchor merupakan kombinasi dari konstanta horisontal (LEFT, HCENTER, atau RIGHT) dan sebuah konstanta vertikal (TOP, BASELINE atau BOTTOM). </li></ul><ul><li>Konstanta horisontal and vertikal harus dikombinasikan dengan bitwise OR (|). Hal ini berarti, penggambaran text akan bersifat relatif terhadap baseline dan titik tengah horisontal akan membutuhkan anchor value BASELINE | HCENTER . </li></ul>
  19. 19. Anchor Points
  20. 20. Menggambar Text
  21. 21. Menggambar Text
  22. 22. Menggambar Garis <ul><li>public void drawLine (int x1, int y1, int x2, int y2) </li></ul><ul><li>Method ini akan menggambar sebuah garis dengan menggunakan warna dan jenis garis yang telah didefinisikan pada koordinat (x1,y1) dan (x2,y2). </li></ul>
  23. 23. Menggambar Garis
  24. 24. Menggambar Segi Empat <ul><li>public void drawRect (int x, int y, </li></ul><ul><li>int width, int height) </li></ul><ul><li>public void drawRoundRect (int x, int y, </li></ul><ul><li>int width, int height, </li></ul><ul><li>int arcWidth, int arcHeight) </li></ul>
  25. 25. Menggambar Segi Empat <ul><li>public void fillRect (int x, int y </li></ul><ul><li>int width, int height) </li></ul><ul><li>public void fillRoundRect (int x, int y, </li></ul><ul><li>int width, int height, </li></ul><ul><li>int arcWidth, int arcHeight) </li></ul>
  26. 26. Menggambar Segi Empat
  27. 27. Menggambar Sudut
  28. 28. Menggambar Sudut
  29. 29. Menggambar Images <ul><li>public void drawImage (Image img, int x, int y, int anchor) </li></ul><ul><li>Anchor haruslah sebuah kombinasi antara konstanta horisontal (LEFT, HCENTER, atau RIGHT) dan konstanta vertikal (TOP, VCENTER, atau BOTTOM). </li></ul><ul><li>Konstanta horisontal dan vertikal akan dikombinasikan dengan bitwise OR (|) </li></ul><ul><li>Menggambar text bergantung pada titik tengah vertikal dan horisontal, sehingga dibutuhkan anchor value VCENTER | HCENTER . </li></ul>
  30. 30. Image Anchor Points
  31. 31. Menggambar Images <ul><li>try { </li></ul><ul><li>Image image = Image.createImage(&quot;/jedi.png&quot;); </li></ul><ul><li>g.drawImage(image, </li></ul><ul><li>getWidth()/2, getHeight()/2, </li></ul><ul><li>Graphics.VCENTER | Graphics.HCENTER); </li></ul><ul><li>} catch (Exception e){} </li></ul>
  32. 32. Menggambar Images

×