SlideShare ist ein Scribd-Unternehmen logo
1 von 32
Downloaden Sie, um offline zu lesen
Low-Level User Interface
Versi 0.2
Pembangunan Aplikasi Mobile
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
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().
Sistem Koordinat
(0,0)
increasing x value
increasingyvalue
(getwidth()-1,getHeight()-1)
Hello, world! pada Canvas
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);
}
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()
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);
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
}
}
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.
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
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.
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
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.
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
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
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
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.
Anchor Points
TOP | LEFT
BOTTOM | HCENTER
BOTTOM | LEFT BOTTOM | RIGHT
TOP | RIGHT
TOP | HCENTER
BASELINE | LEFT BASELINE | RIGHT
BASELINE | HCENTER
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.
Menggambar Text
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).
Menggambar Garis
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)
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)
Menggambar Segi Empat
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.
Menggambar Sudut
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.
Image Anchor Points
TOP | LEFT
BOTTOM | HCENTER
BOTTOM | LEFT BOTTOM | RIGHT
TOP | RIGHT
TOP | HCENTER
VCENTER | LEFT VCENTER | RIGHT
VCENTER | HCENTER
Menggambar Images
try {
Image image =
Image.createImage("/jedi.png");
g.drawImage(image,
getWidth()/2, getHeight()/2,
Graphics.VCENTER | Graphics.HCENTER);
} catch (Exception e){}
Menggambar Images

Weitere ähnliche Inhalte

Was ist angesagt?

Pengantar grafika1
Pengantar grafika1Pengantar grafika1
Pengantar grafika1Hanz Skyblue
 
Soal tik kls xii semester i
Soal tik kls xii semester iSoal tik kls xii semester i
Soal tik kls xii semester iMbah Man
 
soal desain grafis
soal desain grafis soal desain grafis
soal desain grafis ismyndar
 
Komputr grafika
Komputr grafikaKomputr grafika
Komputr grafikaRos Dania
 
Matlab Untuk Pengolahan Citra
Matlab Untuk Pengolahan CitraMatlab Untuk Pengolahan Citra
Matlab Untuk Pengolahan Citraarifgator
 
Soal tik kls xii smt 1 0809 ulum 1
Soal tik kls xii smt 1 0809 ulum 1Soal tik kls xii smt 1 0809 ulum 1
Soal tik kls xii smt 1 0809 ulum 1eli priyatna laidan
 
Belajar corel draw x3
Belajar corel draw x3Belajar corel draw x3
Belajar corel draw x3almunajib
 
Soal prediksi-uas-genap-pengolahan-citra-digital
Soal prediksi-uas-genap-pengolahan-citra-digitalSoal prediksi-uas-genap-pengolahan-citra-digital
Soal prediksi-uas-genap-pengolahan-citra-digitalChika Fifi
 
Pertemuan ke 3 pengenalan tools
Pertemuan ke 3   pengenalan toolsPertemuan ke 3   pengenalan tools
Pertemuan ke 3 pengenalan toolsJck Jo
 
Tutorial coreldraw x4
Tutorial coreldraw x4Tutorial coreldraw x4
Tutorial coreldraw x4Artek Anas
 
Kisi kisi tik uas ganjil kelas xii
Kisi kisi tik uas ganjil kelas xiiKisi kisi tik uas ganjil kelas xii
Kisi kisi tik uas ganjil kelas xiieli priyatna laidan
 
Materi 1 Konsep Citra
Materi 1 Konsep CitraMateri 1 Konsep Citra
Materi 1 Konsep Citradedidarwis
 

Was ist angesagt? (20)

Kisi fb xii
Kisi fb xiiKisi fb xii
Kisi fb xii
 
Pengantar grafika1
Pengantar grafika1Pengantar grafika1
Pengantar grafika1
 
Soal tik kls xii semester i
Soal tik kls xii semester iSoal tik kls xii semester i
Soal tik kls xii semester i
 
soal desain grafis
soal desain grafis soal desain grafis
soal desain grafis
 
Soal tik xii smt 1
Soal tik xii smt 1Soal tik xii smt 1
Soal tik xii smt 1
 
Komputr grafika
Komputr grafikaKomputr grafika
Komputr grafika
 
Matlab Untuk Pengolahan Citra
Matlab Untuk Pengolahan CitraMatlab Untuk Pengolahan Citra
Matlab Untuk Pengolahan Citra
 
Soal tik kls xii smt 1 0809 ulum 1
Soal tik kls xii smt 1 0809 ulum 1Soal tik kls xii smt 1 0809 ulum 1
Soal tik kls xii smt 1 0809 ulum 1
 
Belajar corel draw x3
Belajar corel draw x3Belajar corel draw x3
Belajar corel draw x3
 
Pcd 10
Pcd 10Pcd 10
Pcd 10
 
Soal prediksi-uas-genap-pengolahan-citra-digital
Soal prediksi-uas-genap-pengolahan-citra-digitalSoal prediksi-uas-genap-pengolahan-citra-digital
Soal prediksi-uas-genap-pengolahan-citra-digital
 
Pcd 5
Pcd 5Pcd 5
Pcd 5
 
Pcd 2
Pcd 2Pcd 2
Pcd 2
 
Pertemuan ke 3 pengenalan tools
Pertemuan ke 3   pengenalan toolsPertemuan ke 3   pengenalan tools
Pertemuan ke 3 pengenalan tools
 
Tutorial coreldraw x4
Tutorial coreldraw x4Tutorial coreldraw x4
Tutorial coreldraw x4
 
Pcd 11
Pcd 11Pcd 11
Pcd 11
 
Pcd 4
Pcd 4Pcd 4
Pcd 4
 
Kisi kisi tik uas ganjil kelas xii
Kisi kisi tik uas ganjil kelas xiiKisi kisi tik uas ganjil kelas xii
Kisi kisi tik uas ganjil kelas xii
 
Materi 1 Konsep Citra
Materi 1 Konsep CitraMateri 1 Konsep Citra
Materi 1 Konsep Citra
 
Karkateristik fungsi kuadrat
Karkateristik fungsi kuadratKarkateristik fungsi kuadrat
Karkateristik fungsi kuadrat
 

Andere mochten auch

Jeni slides j2 me-05-persistence
Jeni slides j2 me-05-persistenceJeni slides j2 me-05-persistence
Jeni slides j2 me-05-persistencesainudinuga
 
Jeni slides j2 me-01-pengenalan thdp pembangunan apl mobile
Jeni slides j2 me-01-pengenalan thdp pembangunan apl mobileJeni slides j2 me-01-pengenalan thdp pembangunan apl mobile
Jeni slides j2 me-01-pengenalan thdp pembangunan apl mobilesainudinuga
 
Jeni slides j2 me-03-high level user interface
Jeni slides j2 me-03-high level user interfaceJeni slides j2 me-03-high level user interface
Jeni slides j2 me-03-high level user interfacesainudinuga
 
Khusyuitumudah 111210110035-phpapp02
Khusyuitumudah 111210110035-phpapp02Khusyuitumudah 111210110035-phpapp02
Khusyuitumudah 111210110035-phpapp02sainudinuga
 
Edmodo overview-Simulasi Digital
Edmodo overview-Simulasi DigitalEdmodo overview-Simulasi Digital
Edmodo overview-Simulasi Digitalsainudinuga
 
Jeni slides j2 me-02-memulai pemrograman mobile
Jeni slides j2 me-02-memulai pemrograman mobileJeni slides j2 me-02-memulai pemrograman mobile
Jeni slides j2 me-02-memulai pemrograman mobilesainudinuga
 
Simulasi digital sem1(buku siswa)
Simulasi digital sem1(buku siswa)Simulasi digital sem1(buku siswa)
Simulasi digital sem1(buku siswa)setioaribowo
 
The Presentation Come-Back Kid
The Presentation Come-Back KidThe Presentation Come-Back Kid
The Presentation Come-Back KidEthos3
 
SEO: Getting Personal
SEO: Getting PersonalSEO: Getting Personal
SEO: Getting PersonalKirsty Hulse
 

Andere mochten auch (9)

Jeni slides j2 me-05-persistence
Jeni slides j2 me-05-persistenceJeni slides j2 me-05-persistence
Jeni slides j2 me-05-persistence
 
Jeni slides j2 me-01-pengenalan thdp pembangunan apl mobile
Jeni slides j2 me-01-pengenalan thdp pembangunan apl mobileJeni slides j2 me-01-pengenalan thdp pembangunan apl mobile
Jeni slides j2 me-01-pengenalan thdp pembangunan apl mobile
 
Jeni slides j2 me-03-high level user interface
Jeni slides j2 me-03-high level user interfaceJeni slides j2 me-03-high level user interface
Jeni slides j2 me-03-high level user interface
 
Khusyuitumudah 111210110035-phpapp02
Khusyuitumudah 111210110035-phpapp02Khusyuitumudah 111210110035-phpapp02
Khusyuitumudah 111210110035-phpapp02
 
Edmodo overview-Simulasi Digital
Edmodo overview-Simulasi DigitalEdmodo overview-Simulasi Digital
Edmodo overview-Simulasi Digital
 
Jeni slides j2 me-02-memulai pemrograman mobile
Jeni slides j2 me-02-memulai pemrograman mobileJeni slides j2 me-02-memulai pemrograman mobile
Jeni slides j2 me-02-memulai pemrograman mobile
 
Simulasi digital sem1(buku siswa)
Simulasi digital sem1(buku siswa)Simulasi digital sem1(buku siswa)
Simulasi digital sem1(buku siswa)
 
The Presentation Come-Back Kid
The Presentation Come-Back KidThe Presentation Come-Back Kid
The Presentation Come-Back Kid
 
SEO: Getting Personal
SEO: Getting PersonalSEO: Getting Personal
SEO: Getting Personal
 

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

Modul PSB 6 J2ME LLUI
Modul PSB 6 J2ME LLUIModul PSB 6 J2ME LLUI
Modul PSB 6 J2ME LLUIRido Budiman
 
JENI-J2ME-Bab04-Low Level User Interface.pdf
JENI-J2ME-Bab04-Low Level User Interface.pdfJENI-J2ME-Bab04-Low Level User Interface.pdf
JENI-J2ME-Bab04-Low Level User Interface.pdfJurnal IT
 
TitikdanGaris.pptx
TitikdanGaris.pptxTitikdanGaris.pptx
TitikdanGaris.pptxbahankuliah1
 
Pemrogaman Visual Basic.NET (Modul 3)
Pemrogaman Visual Basic.NET (Modul 3)Pemrogaman Visual Basic.NET (Modul 3)
Pemrogaman Visual Basic.NET (Modul 3)Materi Kuliah Online
 
Desain grafis xi 3
Desain grafis xi 3Desain grafis xi 3
Desain grafis xi 3Ali Sufyan
 
Materi Pembelajaran APL Kelas X pertemuan 1.ppt
Materi Pembelajaran APL Kelas X pertemuan 1.pptMateri Pembelajaran APL Kelas X pertemuan 1.ppt
Materi Pembelajaran APL Kelas X pertemuan 1.pptTriadmaAdinugroho
 
Laporan pratikum v mulmet
Laporan pratikum v mulmetLaporan pratikum v mulmet
Laporan pratikum v mulmetrahmi wahyuni
 
Tugas tik tanggal 19 agustus 2014
Tugas tik tanggal 19 agustus 2014Tugas tik tanggal 19 agustus 2014
Tugas tik tanggal 19 agustus 2014Reza Padria
 
Pengolahan Citra Digital Dengan Menggunakan MATLAB
Pengolahan Citra Digital Dengan Menggunakan MATLABPengolahan Citra Digital Dengan Menggunakan MATLAB
Pengolahan Citra Digital Dengan Menggunakan MATLABSimesterious TheMaster
 
10-Image-Enhancement-Bagian2.pptx. Bimedical engineering
10-Image-Enhancement-Bagian2.pptx. Bimedical engineering10-Image-Enhancement-Bagian2.pptx. Bimedical engineering
10-Image-Enhancement-Bagian2.pptx. Bimedical engineeringnailaamuthi1
 
APLIKASI-KOMPUTER-2-AUTOCAD 2D.pdf
APLIKASI-KOMPUTER-2-AUTOCAD 2D.pdfAPLIKASI-KOMPUTER-2-AUTOCAD 2D.pdf
APLIKASI-KOMPUTER-2-AUTOCAD 2D.pdfGundhiAsmoro
 
Bab 2 pembentukan citra
Bab 2 pembentukan citraBab 2 pembentukan citra
Bab 2 pembentukan citraSyafrizal
 
Tutorial gambar garis dan bidang
Tutorial gambar garis dan bidangTutorial gambar garis dan bidang
Tutorial gambar garis dan bidangMeylanie Olivya
 

Ähnlich wie Jeni slides j2 me-04 low level user interface-v 0.2 (20)

Binder1
Binder1Binder1
Binder1
 
Modul PSB 6 J2ME LLUI
Modul PSB 6 J2ME LLUIModul PSB 6 J2ME LLUI
Modul PSB 6 J2ME LLUI
 
JENI-J2ME-Bab04-Low Level User Interface.pdf
JENI-J2ME-Bab04-Low Level User Interface.pdfJENI-J2ME-Bab04-Low Level User Interface.pdf
JENI-J2ME-Bab04-Low Level User Interface.pdf
 
TitikdanGaris.pptx
TitikdanGaris.pptxTitikdanGaris.pptx
TitikdanGaris.pptx
 
Pengantar R3
Pengantar R3Pengantar R3
Pengantar R3
 
Pemrogaman Visual Basic.NET (Modul 3)
Pemrogaman Visual Basic.NET (Modul 3)Pemrogaman Visual Basic.NET (Modul 3)
Pemrogaman Visual Basic.NET (Modul 3)
 
Desain grafis xi 3
Desain grafis xi 3Desain grafis xi 3
Desain grafis xi 3
 
Desain grafis
Desain grafisDesain grafis
Desain grafis
 
Desain grafis-x-3
Desain grafis-x-3Desain grafis-x-3
Desain grafis-x-3
 
Gis (surface analysis)
Gis (surface analysis)Gis (surface analysis)
Gis (surface analysis)
 
Materi Pembelajaran APL Kelas X pertemuan 1.ppt
Materi Pembelajaran APL Kelas X pertemuan 1.pptMateri Pembelajaran APL Kelas X pertemuan 1.ppt
Materi Pembelajaran APL Kelas X pertemuan 1.ppt
 
Tugas2 20914009
Tugas2 20914009Tugas2 20914009
Tugas2 20914009
 
Laporan pratikum v mulmet
Laporan pratikum v mulmetLaporan pratikum v mulmet
Laporan pratikum v mulmet
 
Tugas tik tanggal 19 agustus 2014
Tugas tik tanggal 19 agustus 2014Tugas tik tanggal 19 agustus 2014
Tugas tik tanggal 19 agustus 2014
 
Pengolahan Citra Digital Dengan Menggunakan MATLAB
Pengolahan Citra Digital Dengan Menggunakan MATLABPengolahan Citra Digital Dengan Menggunakan MATLAB
Pengolahan Citra Digital Dengan Menggunakan MATLAB
 
10-Image-Enhancement-Bagian2.pptx. Bimedical engineering
10-Image-Enhancement-Bagian2.pptx. Bimedical engineering10-Image-Enhancement-Bagian2.pptx. Bimedical engineering
10-Image-Enhancement-Bagian2.pptx. Bimedical engineering
 
APLIKASI-KOMPUTER-2-AUTOCAD 2D.pdf
APLIKASI-KOMPUTER-2-AUTOCAD 2D.pdfAPLIKASI-KOMPUTER-2-AUTOCAD 2D.pdf
APLIKASI-KOMPUTER-2-AUTOCAD 2D.pdf
 
Modul-AUTOCAD.pdf
Modul-AUTOCAD.pdfModul-AUTOCAD.pdf
Modul-AUTOCAD.pdf
 
Bab 2 pembentukan citra
Bab 2 pembentukan citraBab 2 pembentukan citra
Bab 2 pembentukan citra
 
Tutorial gambar garis dan bidang
Tutorial gambar garis dan bidangTutorial gambar garis dan bidang
Tutorial gambar garis dan bidang
 

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

  • 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)
  • 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.
  • 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).
  • 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)
  • 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.
  • 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){}