Antarmuka Tingkat Bawah (Canvas)

1. Antarmuka  Tingkat  Bawah(Canvas)  Oleh : Oman SomantriS.Kom PoltekHarberTegalTeknikKomputer

2. Pendahuluan User interface level tinggibersifat user interface level tinggidan programmer tidakperlukhawatirtentangmenggambar pixel layarataumengaturposisitekspadalayar. Semua program telahmenetapkanjeniskomponendan label elemen. Sistemtersebutakanmenanganigambarpadalayar, scrolling dan layout. Satukelemahanketikahanyamenggunakankomponen user interface level tinggiadalahprogram tidakmemilikikendalipenuhsebuahlayar.Adasaatdimanakitainginmenggambarsebuahgaris, gambarberanimasidanmempunyaikendaliuntukmengatur pixel padalayar.

3. Canvas • Canvas menyediakan media untukmenciptakantampilan yang sesuaidengankeperluanaplikasiataukeinginanpengguna.  Media  inimendukungkapabilitasdidalammembuatberagambentuk,  teks, dangambar  (statisatauanimasi), yang padadasarnyamerupakankemampuanobyek Graphics.  • Canvas memilikikemampuanberinteraksidenganpenggunamelaluimekanisme event handling (misalnya user memilihsebuahmenu dalamaplikasiMIDlet).  • Event handling  inidapatberupaantisipasiterhadap  key  event,  game  action  dan  pointer  event.  Perangkatkomunikasi, teleponselulerataupun PDA, memilikiresolusitampilan yang sangatberagam. • Class Canvas menggambarkansebuahmetodeabstrak yang disebut paint(). Aplikasimenggunakan class Canvas harusmenyediakansebuahimplementasiuntukmetode paint().

4. Paint dan Repaint  • Paint dan Repaint  untukmenampilkankonten Canvas, sebagaipengembangaplikasikitaperlumemanggil method  paint().  • Implementasi MIDP menyertakanobyek Graphics sebagaiargumen  paint(). Graphics memiliki method‐method untukmenggambarbentuk 2D, teks, dangambarpada Canvas. Untukmenggunakan  Canvas,  sebuahkelas  yang mewarisikelasabstrak  Canvas  harusdibuat. 

5. SistemKoordinat • Sistemkoordinatdari Canvas adalahberbasis nol. Koordinat x dan y dimulaidengannol. Pojokkiriatasdari Canvas berkoordinat (0,0). Koordinat x bertambahdarikirikekanan. Sedangkankoordinat y bertambahdariataskebawah. MetodegetWidth() dangetHeight() mengembalikannilailebardantinggiberturut-turut. • Pojokkananbawahpadalayarmemilikikoordinat (getWidth()-1,getWidth()-1). Setiapperubahan yang terjadipadaukuran yang diberikanuntuk area menggambarpada Canvas dilaporkankepadaaplikasiolehmetodesizeChanged(). Ukuran yang tersediapada Canvas mungkinsajaberubahjikaadapergantianantara mode layar full dan normal ataupenambahandanpengurangansebuahkomponenseperti Command.

6. Gbr: SistemKoordinat Canvas

7. ContohTampilan…

8. SHAPE ( Bentuk ) • Graphics memiliki method‐method untukmenggambardanmengisibentuk‐bentuk yang sederhana.  

9. Contoh List Code Canvas untuk Shape

10. Contoh Shape ..

11. Warna (Color) • Graphics menggunakanwarna yang ditentukanuntukmenggambar  outline bentuk, mengisibentuk, danmenggambarteks. Warnadirepresentasikansebagaikombinasimerah (red), hijau (green), danbiru (blue), dengannilai8 bituntuktiapkomponenwarna.  Warnadapatdisetmenggunakan method : public void setColor(intRGB). • Method tersebutmengkombinasikansemuanilaikomponenwarnadalamsebuahnilai integer/bilanganbulat. Method alternatifuntukmengesetwarnadapatmenggunakannilaitiapkomponenwarnasebagainilai integer dengannilaidari 0 hingga 255. Method tersebutyaitupublic void setColor(int red, int green, int blue).

12. TipeGaris (Stroke Style)  • Graphics menggunakantipegaris (stroke style) yang ditentukanuntukmenggambarberbagai outline bentukdangaris. Tipegarisdarikelas Graphics adalah :  a. SOLID sebagainilai default  b. DOTTED   • Untukmenggantitipegaris,  dapatdigunakansetStrokeStyle().  Kodeberikutdigunakanuntukmenggambarsebuahpersegiempatdengangaris  yang  solid  dansebuahpersegiempatdengangarisputus‐putus. 

13. Teks • Penggambaranteksdilakukanberdasarkananchor point.  Anchorpointmenentukansecaratepatdimanateksakandigambar. Anchor point  dideskripsikandengankomponenhorisontaldanvertikal, yang  didefinisikansebagaikontantadikelas Graphics. 

14. Font ( Huruf ) • Font  direpresentasikanolehnama  font  (font  face),tipe font (font  style), danukuran  font  (font  size). Masing‐masingrepresentasi Font tersebutberbentukkonstantaberupaatribut static padakelas Font.

15. Font Cont..

16. Image (Gambar) • Graphics menggunakan method berikutuntukmenggambarsebuahgambar: public void drawImage(Image img, int x, inty, int anchor)

17. Transformasi • Gambar Graphics memiliki method  drawRegion()  untukmenggambar  area  sebuahgambardandapatjugamelakukanmanipulasigambarpadawaktu yang bersamaan. public void drawRegion(Image src, intx_src, inty_src, int width, int height, int transform, intx_dest, inty_dest, int anchor).

18. GambarSebagai Array Integer  • Gambardapatdirepresentasikandalamsebuah  array  integer,  dimanasetiapelemen  array mendeskripsikanwarnauntuksetiappikselgambar. Method berikutdapatdigunakanuntukmembentukgambardarisebuah array integer. 

19. Gambar Array Cont..

20. Clipping • Clipping  padadasarnyamembatasipenggambaran.  Semuapenggambarandiluarbentukatau  area clipping  tidakakanditampilkan.  Untukmendapatkaninformasi  area  clipping,  method berikutdapatdigunakan. 

21. Event key Untukmendapatkan “String” namasebuahkunci, gunakanmetodegetKeyName(intkeyCode).

22. Even Key Cont..

23. Event Pointer. • Disampingdari event key, program MIDP jugadapatmengatasi event pointer. Hal inibersifatbenarjikasebuahperangkatmemilikisebuah pointer danhaltersebutdiimplementasikandidalamsistem JAVA padasebuahperangkat. • MetodehasPointerEvents() mengembalikannilai true jikasebuahperangkatmendukung pointer yang bersifatditekandandilepaskan. MetodehasPointerMotionEvents() mengembalikannilai true jikasebuahperangkatmendukung event gerakandari pointer.

24. Even Pointer Cont..

25. Sekian,TERIMA KASIH