Low Level User Interface

14
LOW LEVEL USER INTERFACE ( Tugas Pratikum 4 ) Paper Diajukan untuk memenuhi tugas Mata Kuliah Mobile Programing Oleh Adi Muwardi 1083038 JURUSAN TEKNIK INFORMATIKA POLITEKNIK POS INDONESIA BANDUNG 2010

description

Low Level User Interface

Transcript of Low Level User Interface

Page 1: Low Level User Interface

LOW LEVEL USER INTERFACE

( Tugas Pratikum 4 )

Paper

Diajukan untuk memenuhi tugas Mata Kuliah Mobile Programing

Oleh

Adi Muwardi

1083038

JURUSAN TEKNIK INFORMATIKA

POLITEKNIK POS INDONESIA

BANDUNG

2010

Page 2: Low Level User Interface

HALAMAN PENGESAHAN

Judul Praktikum : Low Lever User Interface ( Tugas Pratikum 4)

Sub Judul Praktikum : 1. Menggambar Text

2. Menggambar Garis Warna

3. Menggambar Kotak

4. Menggambar Sudut

Tanggal Praktikum : 06 November 2010

Tanggal Penyerahan Laporan : 13 November 2010

Tempat Praktikum : Laboratorium Komputer 306

Alat dan Software : 1. Wireless toolkit 2.5

2. Notepad + +

Jurusan / Kelas : TI / 3B

Nama : Adi Muwardi (1083038)

Bandung, 06 November 2010

Menyetujui

Dosen Pengajar

Azizah Zakiah, S.Kom

Page 3: Low Level User Interface

KATA PENGANTAR

Puji syukur penulis panjatkan ke hadirat Tuhan Yang Maha Esa yang atas karuniaNya

penulis dapat menyelesaikan Laporan Praktikum mata kuliah Mobile Programming ini.

Laporan ini mengenai Menggambar Text, Menggambar Garis Warna, Menggambar

Kotak, Menggambar Sudut. dengan menggunakan aplikasi Wireless Toolkit dan Notepad + +

sebagai penulisan script.

Demikian Laporan Praktikum Mobile Programming ini penulis buat, sebagai hasil

praktikum yang telah penulis lakukan. Kritik dan saran yang membangun sangat penulis

harapkan sehingga kedepannya nanti lebih baik.

Penulis,

Adi Muwardi

Page 4: Low Level User Interface

DAFTAR ISI

JUDUL LAPORAN .………………………………………………………….i

HALAMAN PENGESAHAN ….………………………………………………………ii

KATA PENGANTAR .………………………………………………………...iii

DAFTAR ISI ..………………………………………………………..iv

I. LANDASAN MATERI……………………………………………………..1

1.1 Menggambar Text ……………………………………………………..2

1.2 Menggambar Garis warna .…………………………………………………..4

1.3 Menggambar Kotak ……………………………………………………..5

1.4 Menggambar Sudut ……………………………………………………..7

II. LATIHAN PRATIKUM ...………………………………………………..9

III. KESIMPULAN ………………………………………………...10

Page 5: Low Level User Interface

I. LANDASAN MATERI

Pada pertemuan ini, kita telah membahas tentang bagaimana cara membuat user interface

level tinggi seperti list, form, dan field input. Mereka 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.

kita juga akan berhadapan langsung dengan layar. Kita akan mempelajari class Canvas,

dimana akan menjadi pendukung dari proses menggambar kita. Kita juga akan menyelidiki ke

dalam class Graphic, dimana memiliki metode untuk menggambar garis, kotak, sudut, dan teks.

Kita juga akan membahas huruf, warna dan gambar.

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.

Page 6: Low Level User Interface

Menggambar Text

Metode untuk menggambar teks dan karakter adalah :

1. Drawstring Menggambar teks dalam str menggunakan warna dan huruf yang tersedia. (x,y)

adalah koordinat titik anchor. 2. drawSubstring

Sama seperti drawString, kecuali ini hanya akan menggambar substring dari offset (berbasis nol) dengan panjang length.

3. drawChar Menggambar karakter dengan warna dan huruf yang tersedia

4. drawChars Menggambar karakter dalam data array karakter, dimulai dari indeks offset

dengan panjang length

Page 7: Low Level User Interface

Hasil dapat dilihat pada Gambar di bawah ini

Hasil dapat dilihat Pada Gambar di bwaha ini

Page 8: Low Level User Interface

Menggambar Garis Warna

Satu-satunya metode grafik untuk menggambar garis didefinisikan sebagai :

public void drawLine(int x1, int y1, int x2, int y2)

Metode ini menggambar sebuah garis menggunakan warna yang tersedia dan coretan antara koordinat (x1,y1) dan (x2,y2).

Page 9: Low Level User Interface

Hasil dapat dilihat Pada Gambar di bwaha ini

Menggambar Kotak

Jika Anda akan mengenali, definisi drawRect dan drawRoundRect menetapkan lebar dari kotak yang digambar pada layar adalah dengan width+1 dan tingginya dengan height+1. Hal ini sangat tidak intuitif, tetapi seperti itulah spesifikasi MIDP menggambarkan metode ini. Untuk meng-agravate tidak konsistensi dari “off-by-one” ini, metode fillRect dan fillRoundRect hanya mengisi sebuah area kotak (width x height). Anda akan melihat ketidakcocokan ini jika anda memasukkan parameter yang sama untuk drawRect dan fillRect (dan drawRoundRect vs fillRoundRect). Sisi kanan dan bawah dari kotak digambar oleh kepalsuan drawRect di luar area yang diisi oleh fillRect.

Metode drawRect() menggambar sebuah kotak dengan pojok kiri atas pada koordinat (x,y) dan luas area (width+1 x height+1). Parameter yang sama ada bersamadrawRoundRect(). Parameter tambahan arcWidth dan arcHeight adalah diameter horisontal dan vertikal dari busur dari keempat sudut

Page 10: Low Level User Interface

Metode drawRect() menggambar sebuah kotak dengan pojok kiri atas pada koordinat (x,y) dan luas area (width+1 x height+1). Parameter yang sama ada bersamadrawRoundRect().

Page 11: Low Level User Interface

Parameter tambahan arcWidth dan arcHeight adalah diameter horisontal dan vertikal dari busur dari keempat sudut.

Hasil dapat dilihat pada gambar di bawah ini

Menggambar Sudut

Metode untuk menggambar bundar atau eclips adalah :

1. drawArc Menggambar arc dengan pusat pada (x,y) dan dimensi (width+1 x height+1). Arc

digambar mulai dari startAngle dan extend untuk derajat arcAngle. 0 derajat terletak pada jarum jam 3.

2. fillArc

Mewarnai bidang bundar dan eclips yang telah dibuat dengan warna yang tersedia.

Page 12: Low Level User Interface
Page 13: Low Level User Interface

II. Latihan Pratikum 1. Buatlah Program Untuk Menampilkan Textbox pada canvas / Layar Hp dengan tulisan

“Hai Kawan Saya Adi Muwardi”.

2. Buatlah 2 tombol klik dengan nama “Keluar”, “Ok”, dan apabila tombol Keluar di klik

maka muncul textbox dengan tulisan “Saya Keluar dari aplikasi ”, dan apabila tombol “

Ok “ di klik maka akan muncul textbox dengan tulisan “ Saya tekan Ok”.

Hasil dapat Dilihat Pada Gambar Di bawah ini

Page 14: Low Level User Interface