Your SlideShare is downloading. ×
0
Jeni slides j2 me-04 low level user interface-v 0.2
Jeni slides j2 me-04 low level user interface-v 0.2
Jeni slides j2 me-04 low level user interface-v 0.2
Jeni slides j2 me-04 low level user interface-v 0.2
Jeni slides j2 me-04 low level user interface-v 0.2
Jeni slides j2 me-04 low level user interface-v 0.2
Jeni slides j2 me-04 low level user interface-v 0.2
Jeni slides j2 me-04 low level user interface-v 0.2
Jeni slides j2 me-04 low level user interface-v 0.2
Jeni slides j2 me-04 low level user interface-v 0.2
Jeni slides j2 me-04 low level user interface-v 0.2
Jeni slides j2 me-04 low level user interface-v 0.2
Jeni slides j2 me-04 low level user interface-v 0.2
Jeni slides j2 me-04 low level user interface-v 0.2
Jeni slides j2 me-04 low level user interface-v 0.2
Jeni slides j2 me-04 low level user interface-v 0.2
Jeni slides j2 me-04 low level user interface-v 0.2
Jeni slides j2 me-04 low level user interface-v 0.2
Jeni slides j2 me-04 low level user interface-v 0.2
Jeni slides j2 me-04 low level user interface-v 0.2
Jeni slides j2 me-04 low level user interface-v 0.2
Jeni slides j2 me-04 low level user interface-v 0.2
Jeni slides j2 me-04 low level user interface-v 0.2
Jeni slides j2 me-04 low level user interface-v 0.2
Jeni slides j2 me-04 low level user interface-v 0.2
Jeni slides j2 me-04 low level user interface-v 0.2
Jeni slides j2 me-04 low level user interface-v 0.2
Jeni slides j2 me-04 low level user interface-v 0.2
Jeni slides j2 me-04 low level user interface-v 0.2
Jeni slides j2 me-04 low level user interface-v 0.2
Jeni slides j2 me-04 low level user interface-v 0.2
Jeni slides j2 me-04 low level user interface-v 0.2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

148

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
148
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Low-Level User Interface Versi 0.2 Pembangunan Aplikasi Mobile
  • 2. Tujuan  Memahami bagaimana menggunakan low-level event handling dalam MIDP  Menggambar dan menampilkan text, gambar, garis, persegi panjang, dan sudut  Menentukan warna, jenis huruf, dan ketebalan pada saat menggambar bentuk  Memahami dan menggunakan class Canvas dan Graphics  Menggambar dengan graphics
  • 3. Canvas  Canvas adalah subclass dari Displayable  Ia merupakan class abstract yang harus di-extend atau dijadikan sebagai subclass sebelum sebuah aplikasi memfungsikan class tersebut  Canvas dapat digunakan bersamaan dengan Screen sebagai high-level Displayable  Canvas akan mendefinisikan method-method tanpa event-handling. Aplikasi harus meng-override class-class tersebut untuk meng-handle event.  Canvas akan mendefinisikan sebuah method abstract yang dinamakan paint(). Sebuah aplikasi yang akan menggunakan Canvas harus mengimplementasikan method paint().
  • 4. Sistem Koordinat (0,0) increasing x value increasingyvalue (getwidth()-1,getHeight()-1)
  • 5. Hello, world! pada Canvas
  • 6. Hello, world! Canvas protected void paint(Graphics g) { // membersihkan layar dengan // memberikan warna putih pada layar g.setColor(255, 255, 255 ); g.fillRect(0, 0, getWidth(), getHeight()); // set warna yang digunakan untuk menggambar g.setColor(0, 0, 0); // gambarlah text-nya g.drawString(text, getWidth()/2, getHeight()/2, Graphics.TOP | Graphics.HCENTER); }
  • 7. Menambahkan Command Tambahkan object Command Gunakan method addCommand() untuk menambahkan Command kepada Canvas (atau Form,List, TextBox) Gunakan setCommandListener() untuk mendaftarkan class yang akan mendapatkan command event Tambahkan commandListener dengan cara meng- implementasikan CommandListener dan menyediakan method commandAction()
  • 8. Menambahkan Command  Menciptakan object Command private Command exitCommand = new Command("Exit", Command.EXIT, 0);  Menggunakan addCommand() untuk menambahkan sebuah command ke Canvas (atau Form, List, Text Box) addCommand(exitCommand);  Menggunakan setCommandListener untuk mendaftarkan class mana yang akan mendapatkan command event setCommandListener(this);
  • 9. Menambahkan Command Menciptakan sebuah commandListener dengan cara meng- implements class CommandListener dan menyediakan method commandAction() class HelloCanvas extends Canvas implements CommandListener { ... public void commandAction(Command c, Displayable d){ if (c == exitCommand){ // do something } }
  • 10. Graphics Graphics adalah sebuah class utama untuk menggambar text, image, lines, persegi panjang dan sudut Ia memiliki method-method yang digunakan untuk menentukan pewarnaan, jenis huruf, dan ketebalan garis.
  • 11. Color public boolean isColor() returns true if the display supports color, returns false otherwise public int numColors() returns the number of colors (or gray levels if device is does not support color) supported by the device
  • 12. Color Untuk menentukan warna yang akan digunakan pada method Graphics digunakanlah method setColor() public void setColor(int red, int green, int blue) public void setColor(int RGB) Pada bentuk pertama, Anda akan mendefinisikan komponen-komponen warna yaitu merah, hijau, dan biru Sedangkan pada bentuk kedua, komponen warna akan didefinisikan menggunakan bentuk : 0x00RRGGBB.
  • 13. Color methods public int getColor() retuns the current color in an int of the form an integer in form 0x00RRGGBB public int getRedComponent() returns the red component of the current color public int getGreenComponent() returns the green component of the current color public int getBlueComponent() returns the blue component of the current color public int getGrayScale() returns the grayscale value of the current color public void setGrayScale(int value) sets the grayscale value for suceeding drawing operations
  • 14. Fonts  Font memiliki tiga attribute yaitu face, style, dan size  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.  Tidak ada garansi dari sistem, bahwa semua attribute Font yang diinginkan oleh aplikasi dapat tersedia.  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.
  • 15. Fonts public static Font getFont(int face, int style, int size) returns a font from the system that matches the attributes public static Font getDefaultFont() returns the default font used bythe system public static Font getFont(int fontSpecifier) returns the font used for high level UI components. fontSpecifier may be: FONT_INPUT_TEXT or FONT_STATIC_TEXT
  • 16. Fonts  Face dapat merupakan salah satu dari berikut ini: FACE_SYSTEM, FACE_MONOSPACE, atau FACE_PROPORTIONAL.  Style dapat berupa STYLE_PLAIN atau merupakan kombinasi dari STYLE_BOLD, STYLE_ITALIC, dan STYLE_UNDERLINED.  Kombinasi dari style dapat didefinisikan dengan menggunakn bitwise OR atau operator OR (|). Misalnya: bold dan italic dapat dideklarasikan berikut ini: STYLE_BOLD | STYLE_ITALIC  Ukuran dari Font, bisa merupakan salah satu dari berikut ini: SIZE_SMALL, SIZE_MEDIUM, atau SIZE_LARGE
  • 17. Stroke Style  method setStrokeStyle(int style) akan menentukan stroke style yang akan digunakan untuk menggambar garis, sudut, persegi panjang, dan persegi panjang tumpul.  Stroke style tidak akan mengubah text, image, dan fill drawing operations.  Nilai yang benar bagi Stroke style adalah SOLID and DOTTED. public void setStrokeStyle(int style) sets the stroke style that will be used for drawing lines, arcs, rectangles and rounded rectangles public int getStrokeStyle() returns the current stroke style
  • 18. Anchor Points  Text akan digambar relatif terhadap anchor point. Method drawString() akan melihat titik (x,y) relatif terhadap anchor point. public void drawString(String str, int x, int y, int anchor)  Anchor merupakan kombinasi dari konstanta horisontal (LEFT, HCENTER, atau RIGHT) dan sebuah konstanta vertikal (TOP, BASELINE atau BOTTOM).  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.
  • 19. Anchor Points TOP | LEFT BOTTOM | HCENTER BOTTOM | LEFT BOTTOM | RIGHT TOP | RIGHT TOP | HCENTER BASELINE | LEFT BASELINE | RIGHT BASELINE | HCENTER
  • 20. Menggambar Text public void drawString(String str, int x, int y, int anchor) draws the text in str using the current color and font. (x,y) is the coordinate of the anchor point. public void drawSubstring(String str, int offset, int len, int x, int y, int anchor) same as drawString, except that it will only draw a substring from offset (zero-based) with length of len. public void drawChar(char character, int x, int y, int anchor) draws the character using the current color and font. public void drawChars(char[] data, int offset, int length, int x, int y, int anchor) draws the characters in the char array data, starting from the index of offset with length of length.
  • 21. Menggambar Text
  • 22. Menggambar Garis public void drawLine(int x1, int y1, int x2, int y2) Method ini akan menggambar sebuah garis dengan menggunakan warna dan jenis garis yang telah didefinisikan pada koordinat (x1,y1) dan (x2,y2).
  • 23. Menggambar Garis
  • 24. Menggambar Segi Empat public void drawRect(int x, int y, int width, int height) public void drawRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight)
  • 25. Menggambar Segi Empat public void fillRect(int x, int y int width, int height) public void fillRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight)
  • 26. Menggambar Segi Empat
  • 27. Menggambar Sudut public void drawArc(int x, int y, int width, int height, int startAngle, int arcAngle) draws an arc with center on (x,y) and dimensions (width+1 x height+1). The arc drawn begins at startAngle and extends for arcAngle degrees. 0 degree is at 3 o'clock. public void fillArc(int x, int y, int width, int height, int startAngle, int arcAngle) fills a circular or elliptical arc covering the rectangular area with the current color.
  • 28. Menggambar Sudut
  • 29. Menggambar Images public void drawImage(Image img, int x, int y, int anchor)  Anchor haruslah sebuah kombinasi antara konstanta horisontal (LEFT, HCENTER, atau RIGHT) dan konstanta vertikal (TOP, VCENTER, atau BOTTOM).  Konstanta horisontal dan vertikal akan dikombinasikan dengan bitwise OR (|)  Menggambar text bergantung pada titik tengah vertikal dan horisontal, sehingga dibutuhkan anchor value VCENTER | HCENTER.
  • 30. Image Anchor Points TOP | LEFT BOTTOM | HCENTER BOTTOM | LEFT BOTTOM | RIGHT TOP | RIGHT TOP | HCENTER VCENTER | LEFT VCENTER | RIGHT VCENTER | HCENTER
  • 31. Menggambar Images try { Image image = Image.createImage("/jedi.png"); g.drawImage(image, getWidth()/2, getHeight()/2, Graphics.VCENTER | Graphics.HCENTER); } catch (Exception e){}
  • 32. Menggambar Images

×