Transcript Antarmuka Tingkat Bawah (Canvas)
Antarmuka Tingkat Bawah (Canvas)
Oleh : Oman Somantri S.Kom
Poltek Harber Tegal Teknik Komputer
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.
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().
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.
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.
Gbr: Sistem Koordinat Canvas
Contoh Tampilan…
SHAPE ( Bentuk )
• Graphics memiliki method‐method untuk menggambar dan mengisi bentuk‐bentuk yang sederhana.
Contoh List Code Canvas untuk Shape
Contoh Shape ..
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).
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.
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.
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.
Font Cont..
Image (Gambar)
• Graphics menggunakan method berikut untuk menggambar sebuah gambar : public void drawImage(Image img, int x, int y, int anchor)
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).
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.
Gambar Array Cont..
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.
Event key
Untuk mendapatkan “String” nama sebuah kunci, gunakan metode
getKeyName(int keyCode).
Even Key Cont..
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.