Antarmuka Tingkat Bawah (Canvas)

Presentasi berjudul: "Antarmuka Tingkat Bawah (Canvas)"— Transcript presentasi:

1 Antarmuka Tingkat Bawah (Canvas)
Oleh : Oman Somantri S.Kom Poltek Harber Tegal Teknik Komputer

2 Pendahuluan User interface level tinggi bersifat user interface level tinggi dan programmer tidak perlu khawatir tentang menggambar pixel layar atau mengatur posisi teks pada layar. Semua program telah menetapkan jenis komponen dan label elemen. Sistem tersebut akan menangani gambar pada layar, scrolling dan layout. Satu kelemahan ketika hanya menggunakan komponen user interface level tinggi adalah program tidak memiliki kendali penuh sebuah layar. Ada saat dimana kita ingin menggambar sebuah garis, gambar beranimasi dan mempunyai kendali untuk mengatur pixel pada layar.

3 Canvas Canvas menyediakan media untuk menciptakan tampilan yang sesuai dengan keperluan  aplikasi  atau  keinginan  pengguna.  Media  ini  mendukung  kapabilitas  di  dalam  membuat beragam bentuk,  teks, dan gambar  (statis atau animasi), yang pada dasarnya merupakan  kemampuan obyek Graphics.  Canvas memiliki kemampuan berinteraksi dengan pengguna melalui mekanisme event handling (misalnya user memilih sebuah menu dalam aplikasi MIDlet).  Event handling  ini  dapat  berupa  antisipasi  terhadap  key  event,  game  action  dan  pointer  event.  Perangkat komunikasi, telepon  seluler ataupun PDA, memiliki resolusi tampilan yang sangat beragam. Class Canvas menggambarkan sebuah metode abstrak yang disebut paint(). Aplikasi menggunakan class Canvas harus menyediakan sebuah implementasi untuk metode paint().

4 Paint dan Repaint  Paint dan Repaint  untuk  menampilkan  konten Canvas, sebagai pengembang  aplikasi  kita perlu  memanggil method  paint().  Implementasi MIDP menyertakan obyek Graphics sebagai argumen  paint(). Graphics memiliki method‐method untuk menggambar bentuk 2D, teks, dan gambar pada Canvas. Untuk menggunakan  Canvas,  sebuah  kelas  yang mewarisi  kelas  abstrak  Canvas  harus  dibuat. 

5 Sistem Koordinat Sistem koordinat dari Canvas adalah berbasis nol. Koordinat x dan y dimulai dengan nol. Pojok kiri atas dari Canvas berkoordinat (0,0). Koordinat x bertambah dari kiri ke kanan. Sedangkan koordinat y bertambah dari atas ke bawah. Metode getWidth() dan getHeight() mengembalikan nilai lebar dan tinggi berturut-turut. Pojok kanan bawah pada layar memiliki koordinat (getWidth()-1,getWidth()-1). Setiap perubahan yang terjadi pada ukuran yang diberikan untuk area menggambar pada Canvas dilaporkan kepada aplikasi oleh metode sizeChanged(). Ukuran yang tersedia pada Canvas mungkin saja berubah jika ada pergantian antara mode layar full dan normal atau penambahan dan pengurangan sebuah komponen seperti Command.

6 Gbr: Sistem Koordinat Canvas

7 Contoh Tampilan…

8 SHAPE ( Bentuk ) Graphics memiliki method‐method untuk menggambar dan mengisibentuk‐bentuk yang sederhana.  

9 Contoh List Code Canvas untuk Shape

10 Contoh Shape ..

11 Warna (Color) Graphics menggunakan warna yang ditentukan untuk menggambar  outline bentuk, mengisi bentuk, dan menggambar teks. Warna  direpresentasikan sebagai kombinasi merah (red), hijau (green), dan  biru (blue), dengan nilai 8 bit untuk tiap komponen warna.  Warna  dapat diset menggunakan method : public void setColor(intRGB). Method tersebut mengkombinasikan semua nilai komponen warna  dalam sebuah nilai integer/bilangan bulat. Method alternatif untuk  mengeset warna dapat menggunakan nilai tiap komponen warna  sebagai nilai integer dengan nilai dari 0 hingga 255. Method tersebut yaitu public void setColor(int red, int green, int blue).

12 Tipe Garis (Stroke Style)
Graphics menggunakan tipe garis (stroke style) yang ditentukan  untuk menggambar berbagai outline bentuk dan garis. Tipe garis  dari kelas Graphics adalah :  a. SOLID sebagai nilai default  b. DOTTED   Untuk mengganti  tipe  garis,  dapat  digunakan  setStrokeStyle().  Kode  berikut  digunakan  untuk menggambar  sebuah  persegi  empat  dengan  garis  yang  solid  dan  sebuah  persegi  empat  dengan  garis putus‐putus. 

13 Teks  Penggambaran  teks  dilakukan  berdasarkan  anchor point.  Anchorpoint  menentukan  secara  tepat  dimana teks akan digambar. Anchor point  dideskripsikan dengan komponen horisontal dan  vertikal, yang  didefinisikan sebagai kontanta di kelas Graphics. 

14 Font ( Huruf ) Font  direpresentasikan  oleh  nama  font  (font  face),tipe font (font  style), dan  ukuran  font  (font  size). Masing‐masing representasi Font tersebut berbentuk konstanta  berupa atribut static pada kelas Font.

15 Font Cont..

16 Image (Gambar) Graphics menggunakan method berikut untuk  menggambar sebuah gambar : public void drawImage(Image img, int x, int y, int anchor)

17 Transformasi   Gambar Graphics memiliki method  drawRegion()  untuk menggambar  area  sebuah  gambar  dan  dapat juga melakukan manipulasi gambar pada waktu yang bersamaan. public void drawRegion(Image src, int x_src, int y_src, int width, int height, int transform, int x_dest, int y_dest, int anchor).

18 Gambar Sebagai Array Integer
Gambar  dapat  direpresentasikan  dalam  sebuah  array  integer,  di mana  setiap  elemen  array mendeskripsikan warna untuk setiap piksel gambar. Method berikut dapat digunakan untuk membentuk gambar dari sebuah array integer. 

19 Gambar Array Cont..

20 Clipping Clipping  pada  dasarnya  membatasi  penggambaran.  Semua  penggambaran  di  luar  bentuk  atau  area clipping  tidak  akan  ditampilkan.  Untuk  mendapatkan  informasi  area  clipping,  method berikut  dapat digunakan. 

21 Event key Untuk mendapatkan “String” nama sebuah kunci, gunakan metode getKeyName(int keyCode).

22 Even Key Cont..

23 Event Pointer. Disamping dari event key, program MIDP juga dapat mengatasi event pointer. Hal ini bersifat benar jika sebuah perangkat memiliki sebuah pointer dan hal tersebut diimplementasikan di dalam sistem JAVA pada sebuah perangkat. Metode hasPointerEvents() mengembalikan nilai true jika sebuah perangkat mendukung pointer yang bersifat ditekan dan dilepaskan. Metode hasPointerMotionEvents() mengembalikan nilai true jika sebuah perangkat mendukung event gerakan dari pointer.

24 Even Pointer Cont..

25 Sekian, TERIMA KASIH