Laporan-TA-2.doc

ab 8 1 expensive2 akses lebih mudah3 query4 laporan finance5 executive information system6 backward recovery7 tahap negosiasi8 merekomendasikan solusi9 boolean10 instalasi dan pengujian baru atau konversi ke sistem baru

bab 91 firewall2 trojan horse3 enkripsi4 ergonomis5 tangan

BAB I

BAB II

PENDAHULUAN

1.1 Latar Belakang

Teknologi smartphone saat ini sudah bukan menjadi barang baru lagi.

Secara singkat, smartphone adalah sebuah device yang memungkinkan untuk

melakukan komunikasi dan merupakan gabungan dari dua buah device.

Device yang pertama adalah HP (Hand Phone) dimana dapat melakukan

komunikasi seperti menelepon dan mengirim sms. Device yang kedua adalah

PDA (Personal Digital Assistant) dimana dapat dikatakan sebagai asisten

pribadi dan organizer yang bisa menyimpan data contact, to do list sampai

sinkronisasi antara komputer dan PDA.

1

Layaknya sebuah komputer mini, smartphone membutuhkan sebuah

Sistem Operasi (Operating System / OS) agar dapat digunakan. OS yang

tercatat saat ini digunakan untuk mengoperasikan smartphone ada 7 yaitu:

Android, Apple iPhone, Palm WebOS, Microsoft Window Mobile, Palm, RIM

BlackBerry, dan Symbian. Masing-masing diklaim sebagai Sistem Operasi

yang terbaik oleh pembuatnya [1].

Dari ke 7 OS tersebut, Android adalah sistem operasi untuk telepon seluler

yang berbasis Linux. Android menyediakan platform terbuka bagi para

pengembang untuk menciptakan aplikasi mereka sendiri untuk digunakan oleh

bermacam peranti bergerak. Awalnya, Google Inc. membeli Android Inc.,

pendatang baru yang membuat peranti lunak untuk ponsel. Kemudian untuk

mengembangkan Android, dibentuklah Open Handset Alliance, konsorsium

dari 34 perusahaan peranti keras, peranti lunak, dan telekomunikasi, termasuk

Google, HTC, Intel, Motorola, Qualcomm, T-Mobile, dan Nvidia [2].

Pada riset pasar yang dilakukan oleh Nielsen ditemukan bahwa, OS

Android telah menjadi OS paling terpopuler di kalangan pasar pengguna

smartphone Amerika. Menurut laporan tersebut, untuk saat ini Android telah

menyumbang sekitar 29% dari penjualan semua smartphone aktif. Untuk

perbandingannya mengambil pasar Blackberry dan Apple yang sama-sama

berbagi sekitar 27% dari smartphone aktif [3].

Semakin banyak smartphone yang menggunakan Android, semakin

banyak pula aplikasi yang akan digunakan untuk mengoptimalkannya. Namun

karena OS ini masih terbilang baru, maka masih sedikit developer yang

2

http://chempornet.com/blackberry-storm-2-akan-hadir-di-indonesia/

http://chempornet.com/inilah-8-alasan-android-os-kuasai-dunia/

http://id.wikipedia.org/wiki/Nvidia

http://id.wikipedia.org/wiki/T-Mobile

http://id.wikipedia.org/wiki/Qualcomm

http://id.wikipedia.org/wiki/Motorola

http://id.wikipedia.org/wiki/Intel

http://id.wikipedia.org/wiki/HTC

http://id.wikipedia.org/wiki/Google

http://id.wikipedia.org/w/index.php?title=Open_Handset_Alliance&action=edit&redlink=1

http://id.wikipedia.org/wiki/Linux

http://id.wikipedia.org/wiki/Telepon_seluler

http://id.wikipedia.org/wiki/Sistem_operasi

membuat aplikasi berbasis Android. Bagi seorang developer, ini merupakan

tantangan baru dan layak untuk dicoba.

Saat ini disediakan Android Software Development Kit (SDK) untuk

pembuatan aplikasi berbasis OS ini. Android SDK harus diintegrasikan

dengan Integrated Development Environment (IDE). Integrasi dari Android

SDK dengan IDE dapat berupa plugin.

Ada beberapa plugin yang telah menyediakan dukungan fitur-fitur untuk

mengembangkan aplikasi pada android, yaitu :

a. Android Development Tools (ADT) plugin untuk Eclipse IDE.

ADT merupakan plugin untuk Eclipse IDE yang dirancang untuk

memberikan kemudahan dalam pengembangan aplikasi Android.

ADT dapat mendukung pembuatan aplikasi, dari mulai pembuatan

proyek, mendesain user interface, menambahkan komponen-

komponen android, men-debug aplikasi, dan mem-build proyek

menjadi .apk (file extension untuk aplikasi android) pada Eclipse IDE.

b. Android plugin untuk Netbeans.

Plugin android yang terdapat pada Netbeans dikembangkan oleh

Martin Adamek dan 212 anggota lainnya [3].

Khusus bagi designer yang menggunakan Netbeans IDE, sudah terdapat

SDK (Software Development Kit) Android dengan berbasis bahasa Java yang

nantinya dapat digunakan untuk membuat aplikasi berbasis OS ini. Namun

SDK Android ini masih menggunakan teks base dalam membuat aplikasinya.

3

Mulai dari pembuatan User Interface sampai logika prosesnya, designer masih

harus mengetikkan baris demi baris kode.

Berdasarkan hal tersebut, kami mencoba membuat sebuah program

tambahan atau disebut plugin khusus bagi designer yang terbiasa

menggunakan Netbeans IDE. Ketika plugin ini ditanamkan pada Netbeans

IDE, maka nantinya akan terdapat fitur baru dimana mereka tidak perlu repot-

repot menyusun kode untuk membuat UI nya. Designer hanya perlu

men-drag and drop ikon-ikon yang tersedia dalam plugin ini.

Dengan adanya plugin, ini diharapkan dapat mengefisienkan waktu bagi

designer. Designer tidak perlu lagi memikirkan bagaimana kode-kode xml

yang digunakan untuk membuat user interface-nya.

1.2 Rumusan Masalah

Berdasarkan latar belakang yang telah diuraikan diatas maka dapat diambil

rumusan masalah yaitu :

a. Tidak tersedianya plugin Android GUI Designer di Netbeans IDE yang

bersifat visual (biasa disebut visual designer).

Plugin Android yang tersedia pada Netbeans IDE untuk layout aplikasi

yang dibuat masih bersifat text base.

b. Sulitnya designer dalam membuat design untuk android jika berbasis text

base.

Designer yang sedang membuat design layout aplikasi masih harus

mengetikkan secara manual. Jika dibuat secara manual terkadang designer

4

lupa akan baris kode yang harus diketikkan, dikarenakan banyaknya baris

kode untuk membuat layout aplikasi android.

1.3 Batasan Masalah

Adapun dalam pembuatan Plugin ini, terdapat beberapa batasan masalah

yaitu:

a. Plugin ini hanya dapat dijalankan / ditanamkan pada Netbeans IDE.

Plugin yang dibuat hanya dapat dijalankan pada Netbeans IDE. Plugin

yang dibuat merupakan bagian dari Netbeans (module) yang tidak bisa

ditanamkan pada IDE lain.

5

b. Plugin ini ditujukan untuk designer untuk membuat layout aplikasi yang

berbasis Android pada Netbeans IDE.

Plugin yang dibuat ditujukan untuk designer, karena plugin ini ditujukan

untuk menambah performance dan ketepatan dari hasil design layout nya.

c. Plugin ini hanya dapat meng-generate kode xml untuk layout nya.

Plugin yang dibuat tidak bisa meng-generate R.java secara otomatis

seperti pada plugin yang terdapat pada Eclipse IDE. Class R.java sendiri

nantinya akan di-generate oleh plugin Netbeans untuk android yang sudah

ada.

1.4 Tujuan

Berdasarkan rumusan masalah yang telah disebutkan, diperlukan sebuah

plugin GUI designer untuk netbeans IDE yang memanfaatkan struktur xml

android.

Adapun tujuan dibuatnya Plugin ini adalah sebagai berikut:

a. Menyediakan plugin yang telah menggabungkan struktur xml android dan

visual designer yang terdapat pada Netbeans, sehingga waktu untuk

membuat layout untuk aplikasi dapat diefisienkan.

b. Menyediakan plugin yang dapat langsung meng-generate kode xml dari

layout yang dibuat oleh designer.

c. Menyediakan plugin yang dapat diintegrasikan dengan plugin android

Netbeans yang sudah ada.

6

1.5 Ruang Lingkup

Agar tujuan dari pengembangan plugin dapat tercapai, ruang lingkup

plugin yang dikembangkan, yaitu :

a. Integrasi visual designer pada netbeans dengan standar xml aplikasi

Android

Plugin yang dibuat dapat melakukan mapping dari layout yang dibuat oleh

designer menjadi barisan kode xml standar android.

b. Drag and drop komponen-komponen android.

Plugin yang dibuat dapat menambahkan komponen-komponen android

secara drag and drop.

c. Pembuatan plugin auto-generating kode xml on the fly.

Plugin yang dibuat dapat melakukan men-generate kode xml setelah

designer menambahkan komponen-komponen android nya.

1.6 Metodologi

Metode yang digunakan dalam pembuatan plugin GUI Designer Android

adalah waterfall. Tahap kegiatan yang dilakukan adalah sebagai berikut :

a. Studi Literatur

Tahap ini dilakukan untuk mempelajari dan memahami teori yang

berkaitan dengan topic TA. Beberapa literatur yang digunakan adalah :

Ebook mengenai pembuatan plugin pada Netbeans, yaitu Rich Client

Programming: Plugging into the NetBeans(TM) Platform.

Artikel-artikel mengenail Android GUI Component, dan XML parser.

7

b. Eksplorasi pembuatan plugin pada Netbeans IDE

Eksplorasi pembuatan plugin pada Netbeans IDE dilakukan untuk

memahami arsitektur, perilaku, dan fungsi-fungsi dari Netbeans IDE.

Eksplorasi digunakan menggunakan contoh pembuatan plugin dari

Netbeans IDE yang telah ada dan artikel-artikel cara membuat plugin pada

Netbeans IDE.

c. Analisis

Kegiatan yang dilakukan pada tahap analisis, yaitu melakukan analisis

plugin yang telah ada.

Analis plugin yang telah ada dilakukan untuk mengetahui proses serta

fungsi-fungsi yang terdapat pada plugin yang telah ada dan untuk mencari

kelebihan dan kekurangan suatu fungsi, sehingga dapat

mempertimbangkan fungsi mana yang digunakan untuk plugin yang

dikembangkan.

Hasil akhir yang didapatkan dari tahap analisis adalah role plugin, dan

requirement fungsional yang merupakan kebutuhan dari plugin yang

dikembangkan.

d. Perancangan

Tahap ini dilakukan setelah requirement fungsional pada tahap analisis

didapatkan. Perancangan mengacu pada hasil yang telah didapatkan pada

tahap analisis. Pada tahap ini, perancangan plugin dimodelkan

8

menggunakan Unified Modeling Language (UML), seperti use case

diagram, use case specification, class diagram, dan sequence diagram.

e. Implementasi

Pada tahap ini dilakukan pembangunan atau implementasi komponen-

komponen yang telah dibuat pada tahap perancangan ke dalam bahasa

pemrograman, melakukan pengetesan terahdap hasil implementasi, dan

melakukan perancangan ulang apabila terdapat ketidaksesuaian dengan

yang diharapkan.

f. Pengujian

Pada tahap ini dilakukan pengujian plugin yang telah diimplementasikan.

Metode yang digunakan dalam pengujian dalam metode black box testing.

1.7 Sistematika Laporan

Sistematika penulisan laporan TA ini terbagi menjadi 6 bab, yaitu:

1. BAB I Pendahuluan

Pada bab ini dijelaskan latar belakang dilakukannya pengembangan plugin

GUI Designer android untuk Netbeans, rumusan masalah, batasan

masalah, tujuan, ruang lingkup pengembangan plugin, metodologi yang

digunakan dalam mengembangkan plugin, serta sistematika penulisan

laporan.

2. BAB II Kajian Pustaka

Pada bab ini dijelaskan teori-teori yang menjadi landasan dalam penulisan

laporan TA.

9

3. BAB III Analisis

Pada bab ini dijelaskan analisis terhadap plugin dan yang sudah ada, untuk

dijadikan landasan pada tahap perancangan plugin.

4. BAB IV Perancangan

Pada bab ini dijelaskan rancangan sistem yang akan dibuat berdasarkan

hasil analisis.

5. BAB V Implementasi

Pada bab ini dijelaskan realisasi dari tahap perancangan sistem.

6. BAB VI Pengujian

Pada bab ini dijelaskan pengujian hasil implementasi.

7. BAB VII Penutup

Pada bab ini dijelaskan kesimpulan yang diperoleh dari pengerjaan TA dan

saran yang diperlukan berkaitan dengan pengembangan sistem.

10

BAB II

LANDASAN TEORI

Dalam pembuatan Plugin GUI Designer ini, kami menggunakan beberapa

teori yang menjadi landasan dalam pembuatan Plugin GUI ini. Berikut adalah

beberapa landasan teori yang kami gunakan:

2.1 Android

Android adalah sistem operasi untuk telepon seluler yang berbasis Linux.

Android menyediakan platform terbuka bagi para pengembang buat

menciptakan aplikasi mereka sendiri untuk digunakan oleh bermacam peranti

bergerak. Awalnya, Google Inc. membeli Android Inc., pendatang baru yang

membuat peranti lunak untuk ponsel. Kemudian untuk mengembangkan

Android, dibentuklah Open Handset Alliance, konsorsium dari 34 perusahaan

peranti keras, peranti lunak, dan telekomunikasi, termasuk Google, HTC,

Intel, Motorola, Qualcomm, T-Mobile, dan Nvidia.

Pada saat perilisan perdana Android, 5 November 2007, Android bersama

Open Handset Alliance menyatakan mendukung pengembangan standar

terbuka pada perangkat seluler. Di lain pihak, Google merilis kode–kode

Android di bawah lisensi Apache, sebuah lisensi perangkat lunak dan standar

terbuka perangkat seluler.

1. Android GUI Component

Pada aplikasi Android, user interface dibuat mengunakan objek dari

kelas View dan ViewGroup. Kelas View adalah dasar dari sub kelas yang

11

http://id.wikipedia.org/wiki/Lisensi_Apache

http://id.wikipedia.org/wiki/Nvidia

http://id.wikipedia.org/wiki/T-Mobile

http://id.wikipedia.org/wiki/Qualcomm

http://id.wikipedia.org/wiki/Motorola

http://id.wikipedia.org/wiki/Intel

http://id.wikipedia.org/wiki/HTC

http://id.wikipedia.org/wiki/Google

http://id.wikipedia.org/w/index.php?title=Open_Handset_Alliance&action=edit&redlink=1

http://id.wikipedia.org/wiki/Linux

http://id.wikipedia.org/wiki/Telepon_seluler

http://id.wikipedia.org/wiki/Sistem_operasi

disebut “widgets” seperti pada textfields dan buttons. Sedangkan

ViewGroup, melayani untuk sub kelas yang disebut “layouts” yang

menyediakan berbagai macam arsitektur layout seperti linear, tabular dan

relative.

Pada platform android, untuk mendefinisikan sebuah user interface

menggunakan hirarki yang terdiri dari View dan ViewGroup. Hirarki

tersebut dapat dilihat pada diagram dibawah ini.

Gambar 2.1 Hirarki user interface Android

a. Layout

Cara yang umum untuk membuat layout adalah dengan

menggunakan XML yang memang sudah tersedia pada IDE Netbeans

ataupun IDE Eclipse. XML menyediakan struktur layout yang mudah

dibaca baik untuk pembuat, ataupun pengembang.

Nama pada setiap elemen XML merepresentasikan suatu kelas

pada Java. Contohnya, <TextView> pada elemen XML

menginstasiasi kelas TextView pada UI yang dibuat. Dengan catatan,

12

bahwa layout dapat menampung element seperti TextView atau Button

ataupun keduanya selama yang ditampungnya adalah berupa objek

View.

b. Widget

Widget adalah suatu objek dari View yang melayani interaksi

dengan pengguna. Android telah menyediakan berbagai macam widget

yang siap pakai, seperti buttons, checkboxes dan text-entry fields tetapi

kita juga bias membuat View objek kita sendiri dengan

mengkombinasikan widget yang ada atau membuatnya sendiri.

c. Menus

Salah satu bagian yang penting lainnya pada UI adalah Menu.

Menu dapat menampilkan beberapa fungsi dari suatu aplikasi dan juga

dapat menampilkan settings untuk pengaturan suatu aplikasi.

Pada View hierarki diatas, menu termasuk View tetapi tidak perlu

mendefinisikannya sendiri. Android telah menyediakan method

onCreateOptionMenu() atau onCreateContextMenu() dimana kita

tinggal menambahkan View yang diinginkan pada menu kita. Kita juga

dapat mendeklarasikan View dalam XML –nya.

2.2 Plugin

Plugin (dalam Bahasa Indonesia: Pengaya) adalah sebuah program

komputer yang menambah fungsionalitas pada sebuah program utama

(misalkan web browser, media player, blog, dll). Program utama biasanya

13

memberikan semacam antarmuka (interface) agar Plugin dapat berinteraksi

dengan program utama.

Dunia pemrograman juga membutuhkan suatu Plugin. Pada aplikasi

Netbeans IDE misalkan, agar kita bisa membuat aplikasi Android, maka kita

membutuhkan sebuah Plugin sehingga Netbeans mampu melakukannya.

Secara default Netbeans tidak dapat membuat User Interface untuk aplikasi

Android meskipun pada dasarnya Android juga menggunakan bahasa Java.

Namun Java digunakan untuk logika prosesnya, sementara untuk tampilannya

membutuhkan bahasa xml untuk Android.

Untuk sementara ini Plugin yang dapat digunakan pada Netbeans yaitu

Software Development Kit Android. Dengan Plugin ini kita dapat membuat

aplikasi Android walaupun dalam membuat UI nya masih menggunakan text-

base. Gambar dibawah ini menunjukkan Plugin yang sudah terinstall dalam

aplikasi Netbeans IDE.

Gambar 2.2 Plugin yang terdapat pada Netbeans IDE 6.9.114

Berikut ini adalah beberapa tujuan dibuatnya sebuah Plugin:

Memungkinkan pengembang pihak ketiga untuk menciptakan

kemampuan yang dapat mengoptimalkan aplikasi.

Memudahkan ketika akan menambahkan fitur baru

Mengurangi ukuran aplikasi

1. Mekanisme Kerja Plugin

Gambar 2.3 Mekanisme kerja plugin

Seperti ditunjukkan dalam gambar, aplikasi host menyediakan ruang

agar plugin dapat digunakan, termasuk cara untuk plugin untuk

ditanamkan pada aplikasi host dan protokol untuk pertukaran data dengan

plugin. Plugin tergantung pada layanan yang diberikan oleh aplikasi host

dan biasanya tidak bekerja sendiri. Sebaliknya, aplikasi host beroperasi

secara independen dari plugin, sehingga memungkinkan end-user untuk

menambahkan dan memperbaharui plugin secara dinamis tanpa perlu

membuat perubahan pada aplikasi host.

15

Application Programming Interface (API) menyediakan interface

standar, yang memungkinkan pihak ketiga untuk membuat plugin yang

berinteraksi dengan aplikasi host. Sebuah API yang stabil memungkinkan

pihak ketiga yang menciptakan plugin untuk melakukan suatu perubahan

versi sehingga aplikasi host dengan versi lama pun masih dapat digunakan

dengan selalu melakukan update. API dari Adobe Photoshop dan After

Effects merupakan standar untuk Plugin dan bersaing aplikasi seperti

Corel Paint Shop Pro telah mengadopsi mereka.

2. Plugin pada Netbeans IDE

Seperti yang dijelaskan pada materi plugin, Netbeans memerlukan

sebuah plugin agar dapat membaca berbagai macam bahasa pemrograman

ataupun untuk menambahkan fitur baru. Banyak sekali plugin yang dapat

ditanamkan pada Netbeans. Plugin yang dapat ditanamkan pada aplikasi

ini adalah berformat nbm (Netbeans Module), dimana file nbm tersebut

dibuat didalam Netbeans.

Teknologi plugin pada netbeans merupakan salah satu inti dari aplikasi

GUI Designer Android. Plugin netbeans atau disebut juga Netbeans

Module adalah komponen dari suatu aplikasi yang dapat berdiri sendiri

dimana modul yang lain dapat mengkomunikasikannya melalui suatu

interface tanpa mengetahui bagaimana implementasinya. Setiap modul

memerlukan karakteristiknya sendiri untuk memenuhi kebutuhan para

penggunanya, berikut adalah karakteristik dari Netbeans Module :

1. Deployment Format

16

Kemampuan dalam membuat semua resource yang terdapat pada

suatu modul, disediakan sebagai satu deployment package. Netbeans

Module dibungkus melalui suatu format yang bereksistensi *.nbm.

2. Uniqueness

Setiap modul harus memiliki identitas unique-nya sendiri, dimana

Netbeans Module System menyediakan pendefinisian identitas unique

tersebut pada manifest file.

3. Versioning

Setiap modul harus dapat ditentukan versinya. Netbeans Module

System memisahkan antara versi spesifikasi dan versi

implementasinya.

4. Exposed Interface

Setiap modul mendefinisikan fitur apa saja yang dapat diakses.

Pada Netbeans Platform, package yang bisa diakses oleh modul lain di

deklarasikan melalui OpenIDE-Module-Public-Packages manifest key.

5. Declarative Dependency

Setiap modul harus dapat mendeklarasikan modul mana saja yang

dibutuhkan jika memang ada kebutuhan untuk mengambil fungsi yang

terdapat pada modul lain. Netbeans menyediakannya melalui manifest

key OpenIDE-Module-Dependencies.

6. Lifecycle

Setiap modul harus mempunyai siklus hidupnya sendiri, yang

dikelola oleh application’s runtime. Netbeans Module System

17

menangani hal tersebut. Mulai dari konfigurasi modul, loading, proses

installasi, sampai unloading modul ketika aplikasi dimatikan.

2.3 XML

XML singkatan dari eXtensible Markup Language yaitu merupakan suatu

bahasa Markup. Markup yaitu bahasa yang berisikan kode-kode berupa tanda-

tanda tertentu dengan aturan tertentu untuk memformat dokumen teks dengan

tag sendiri agar dapat dimengerti. XML dikembangkan mulai tahun 1996 dan

mendapatkan pengakuan dari W3C pada bulan Februari 1998. Teknologi yang

digunakan pada XML sebenarnya bukan teknologi baru, tapi merupakan

turunan dari SGML yang telah dikembangkan pada awal 80-an dan telah

banyak digunakan pada dokumentasi teknis proyek-proyek berskala besar.

Ketika HTML dikembangkan pada tahun 1990, para penggagas XML

mengadopsi bagian paling penting pada SGML dan dengan berpedoman pada

pengembangan HTML menghasilkan markup spesifik.

Seperti halnya HTML, XML juga menggunakan elemen yang ditandai

dengan tag pembuka (diawali dengan ‘<’ dan diakhiri dengan ‘>’), tag

penutup (diawali dengan ‘</ ‘diakhiri ‘>’) dan atribut elemen (parameter yang

dinyatakan dalam tag pembuka misal <form name=”isidata”>). Hanya

bedanya, HTML mendefinisikan dari awal tag dan atribut yang dipakai

didalamnya, sedangkan pada XML kita bisa menggunakan tag dan atribut

sesuai kehendak kita.

XML pada Android digunakan untuk mendefinisikan User Interface yang

akan digunakan. Penggunaan bahasanya pun sama yaitu diawali dengan tag

18

pembuka dan diakhiri dengan tag penutup. Hanya yang berbeda disini yaitu

atribut di dalam XML nya, dimana bahasa Android sudah mendefinisikan

sendiri atribut-atributnya. Contoh XML untuk menampilkan Analog Clock

pada Android adalah sebagai berikut :

<AnalogClock android:id="@+id/AnalogClock01"

android:layout_width="wrap_content"

android:layout_height="wrap_content">

</AnalogClock>.

Untuk selanjutnya bisa dilihat pada bagian Lampiran tentang widget dan

layout yang digunakan.

19

BAB III

ANALISIS

Pada Bab ini, kami akan menjelaskan analisis yang telah kami lakukan

untuk mempermudah dalam pengerjaan Plugin GUI Designer Android ini.

3.1 Analisis Visual Designer pada NetBeans

Salah satu inti dari Plugin GUI Designer Android adalah Visual Designer

untuk merancang user interface secara grafikal. Konsep Visual Designer yang

bagus untuk saat ini adalah Matisse GUI Builder pada NetBeans IDE. Pada

sub bab ini akan mengkaji mengenai konsep yang dimiliki oleh Matisse GUI

Builder.

Matisse GUI Builder mempunyai fitur yang bernama multiple view, yang

berasal dari NetBeans Core Multiview API (terdapat pada package

org.netbeans.core.api.multiview). Fitur ini menyediakan sudut pandang yang

berbeda untuk komponen yang sama. Dalam hal ini, kita bisa melihat dari

sudut pandang Design atau dari sudut pandang Source. Sudut pandang Design

memperlihatkan grafik dari suatu komponen, sedangkan Source

memperlihatkan source code dari komponen tersebut. Pada Design inilah

tempat untuk Drop suatu komponen dari Palette.

Ketika suatu komponen di-Drag menuju Design, akan terlihat garis putus-

putus dari komponen tersebut ke atas dan ke kiri, setelah di-drop akan muncul

garis baru yang menggantikan garis putus-putus tersebut. Kejadian tersebut

adalah salah satu fitur dari Matisse GUI Builder yang disebut GroupLayout.

20

Fitur tersebut adalah untuk menentukan posisi dari komponen yang relatif

terhadap tepi dari layout atau terhadap posisi dari komponen lain.

Palette window (akan di highlight ketika menekan Ctrl-Shift-8)

menampilkan list dari komponen yang bisa di drag and drop ke dalam form.

Standard komponen dari Palette ini adalah berasal Swing dan AWT.

Komponen dari Palette dan Palette ini sendiri didefinisikan pada NetBeans

API Palette (org.netbeans.spi.palette). membuat Palette berarti

mengimplementasikan kelas NetBeans API Palette berikut :

Class Deskripsi

PaletteFactory Menginstansiasi kelas dari Component Palette. Kelas

ini meng-invoke createPalette method yang akan

membuat palette baru dari folder yang teregistrasi

pada layer.xml.

PaletteController Menyediakan akses ke data pada Component Palette.

PaletteActions Menyediakan Action, category dan items pada palette.

Table 3.1 Komponen pallete netbeans

Ketika membuat GUI form menggunakan Matisse GUI Builder, NetBeans

membuat dua file :

1. Java file yang berisi source code untuk form tersebut.

2. File xml bereksistensi .form yang berisi informasi mengenai layout dari

form tersebut. Matisse GUI Builder menggunakan file ini untuk mengedit

form tersebut.

21

3.2 Analisis Plugin Pada NetBeans IDE

Teknologi plugin pada Netbeans merupakan salah satu inti dari aplikasi

GUI Designer Android. NetBeans mengenali suatu modul melalui file

manifest.mf. Berikut adalah analisa dari isi file tersebut :

Tag Deskripsi

OpenIDE-Module Nama unik untuk modul. Biasanya penamaannya

seperti penamaan pada Package Java. Contohnya

com.netbeansrcp.helloservice

OpenIDE-Module-

Name

Menampilkan nama dari modul yang human-

readable

OpenIDE-Module-

Short-

Description

Penjelasan singkat mengenai modul. Sekitar 1

kalimat.

OpenIDE-Module-

Long-Description

Penjelasan panjang modul. Sekitar 1 paragraf.

OpenIDE-Module-

Display-Category

Mengkategorikan modul. Modul dengan kategori

yang sama akan di grupkan.

OpenIDE-Module- Nama dari kelas Installer dan path-nya. Contoh

com/modulemakers/clip_disp/Installer.class

22

Install

OpenIDE-Module-

Layer

Nama dari Layer.xml dan path-nya.

Table 3.2 Manifest file

3.3 Analisis Android

Sudah kita diketahui bahwa Google adalah pencipta OS Android yang

kemudian diasuh oleh Open Handset Alliance. Mereka mengibaratkan OS

Android sebagai sebuah tumpukan dari software-software. Setiap lapisan dari

tumpukan ini terdapat beberapa program yang mendukung fungsi-fungsi

spesifik dari sistem operasi. Tumpukan paling bawah disebut dengan kernel.

Google menggunakan kernel Linux versi 2.6 untuk membangun Android,

yang mencakup memory management, security setting, power management,

dan beberapa driver hardware.

Bertempat di level yang sama terdapat library yang merupakan lapisan

runtime mencakup dari serangkaian inti library Java. Dengannya, para

programmer dapat mengembangkan aplikasi untuk Android menggunakan

bahasa pemrograman Java. Untuk lapisan selanjutnya adalah application

framework, isinya yaitu mencakup program untuk mengatur fungsi-fungsi

dasar smartphone.

23

Application framework merupakan serangkaian tool dasar seperti alokasi

resource smartphone, aplikasi telepon, pergantian antar-proses atau program,

dan pelacakan lokasi fisik telepon. Para pengembang aplikasi memiliki akses

penuh kepada tool-tool dasar tersebut, dan memanfaatkannya untuk

menciptakan aplikasi yang lebih kompleks.

Dilapisan teratas terdapat aplikasi itu sendiri. Dilapisan inilah kira

menemukan fungsi-fungsi dasar smartphone, seperti menelepon dan mengirim

pesan singkat, menjalankan web browser, mengakses daftar kontak, dan lain-

lain. Bagi sebagian pengguna, lapisan inilah yang paling sering mereka akses.

Mereka mengakses fungsi-fungsi dasar tersebut melalui user interface.

Nah user interface dari setiap aplikasi Android terdiri dari Widget dan

Layout. Widget digunakan untuk sebagai interaksi langsung antara pengguna

dengan aplikasi, sedangkan layout adalah penampung widget-widget yang

akan digunakan. Pada bagian selanjutnya kami akan menganalisis mengenai

GUI Android.

1. Analisis GUI Android

Seperti yang dijelaskan pada sebelumnya bahwa GUI Android

merupakan objek-objek dari kelas View dan ViewGroup. Kelas View

adalah dasar dari sub kelas yang disebut “widgets” sedangkan ViewGroup,

melayani untuk sub kelas yang disebut “layouts”.

Disini kita akan membahas widget dan layout apa saja yang digunakan

dalam pembuatan UI Aplikasi Android. Pada analisis ini kami

24

menggunakan referensi dari Plugin GUI yang ada pada Eclipse untuk

mempermudah dalam melakukan pengelompokannya.

2. Widget Component

Pada bagian ini kami akan menganalisis tentang component-

component Widget Android. Dengan menggunakan referensi dari Plugin

GUI Android Eclipse dan situs http://developer.android.com, kami akan

mencoba menganalisis tentang widget component.

Setelah kami melihat dan menganalisis dari Plugin GUI Android

Eclipse dan referensi dari situs http://developer.android.com, kami

menyimpulkan bahwa widget yang digunakan terbagi menjadi 3 kelompok

besar menurut kemiripan dari karakteristiknya yaitu Interaction Widget,

Information Widget dan Editable Widget.

a. Interaction Widget

Interaction Widget merupakan widget yang berinteraksi langsung

dengan pengguna. Widget ini digunakan pada aplikasi ketika akan

melakukan suatu proses harus ada action dari pengguna terlebih

dahulu, artinya ketika pengguna menyentuh atau mengklik widget

tertentu, maka suatu action / proses akan dilakukan oleh aplikasi.

Berikut ini adalah gambar cara kerja Interaction Widget.

25

http://developer.android.com/


uc Use Case Model

User

Interaction Widget

Action«Take» «Do»

Gambar 3.1 Interaction widget

Misalkan pada aplikasi game Android, pengguna ingin mulai

memainkan permainan ,maka tinggal menekan widget Start Game,

pengguna ingin mengatur bahasa dalam game itu dari Inggris ke

Spanyol, maka tinggal menekan widget Setting atau pengguna ingin

mengakhiri aplikasi permainan tersebut, maka tinggal menekan widget

Exit. Kegiatan diatas adalah sedikit contoh tentang penggunaan widget

ini.

Gambar 3.2 Contoh penggunaan widget

26

Button merupakan widget dasar dari Interaction Widget. Meskipun

banyak variannya, tetapi inti dari kegunaannya interaksi langsung

dengan pengguna. Contoh dari Interaction Widget adalah Button,

DatePicker, Image Button, Spinner dan sebagainya (Selanjutnya bisa dilihat

pada bagian Lampiran).

Widget Name Button

Description

Merupakan widget yang dapat ditekan yang

berbentuk sebuah tombol dimana ketika tombol

tersebut ditekan atau diklik oleh pengguna, maka

akan melakukan suatu aksi / proses

Attribute

android.widget.TextView

android.view.View

XML Code

<Button android:text="@+id/Button01"

android:id="@+id/Button01"



</Button>

Result

Table 3.3 Widget Button

Widget Name DatePicker

Description Kelas ini adalah widget untuk memilih tanggal.

Tanggal dapat dipilih dengan menggunakan

bulan, tahun dan pergantian hari atau sebuah

27

CalendarView

Attribute

android:calendarViewShown

android:endYear

android:maxDate

android:minDate

android:spinnerShown

android:startYear

android.widget.FrameLayout

android.view.ViewGroup

android.view.View

XML Code

<DatePicker android:id="@+id/DatePicker01"


android:layout_height="wrap_content"></DatePi

cker>

Result

Table 3.4 Widget DatePicker

Widget Name ImageButton

Description Sama seperti Button, hanya saja bisa digunakan

dengan menambahkan gambar. Fungsinya sama

yaitu dapat di tekan atau di klik oleh pengguna.

28

Secara default tampilannya sama seperti Button

Attribute

android.widget.ImageView

android.view.View

XML Code

<ImageButton

android:id="@+id/ImageButton01"



</ImageButton>

Result

Table 3.5 Widget ImageButton

Widget Name Spinner

Description

Suatu tampilan yang menyajikan lebih dari satu

pilihan secara bersamaan. Pengguna dapat

memilih salah satunya untuk melakukan suatu

aksi / proses

Attribute

android:gravity

android:prompt


android.view.View

XML Code <Spinner android:id="@+id/Spinner01"



29

</Spinner>

Result

Table 3.6 Widget Spinner

b. Information Widget

Information Widget merupakan widget yang isinya memberikan

informasi mengenai suatu hal. Misalkan informasi mengenai operator

celuler, mengenai jam, mengenai tanggal, dan lain-lain. Widget ini

biasanya bergabung dengan Editable Widget, karena untuk mengubah

suatu informasi yang ada pada widget tersebut, harus dilakukan

pengeditan terlebih dahulu. Berikut ini adalah gambar cara kerja

Information Widget. uc Use Case Model

User

Information Widget

Source Information

Editable Widget

«Give»«Do»

«Give»

Gambar 3.3 Cara kerja information widget

Seperti yang dikatakan bahwa Information Widget selalu terdapat

Editable Widget, ada beberapa widget informasi yang memerlukan

pengeditan terlebih dahulu sebelum digunakan. Namun tidak semua

widget ini memerlukan pengeditan, informasinya bisa langsung

didapat dari sumber lain semisal dari perangkat itu sendiri, internet

30

atau operator seluler. Biasanya widget yang informasi didapat secara

otomatis tersebut bersifat locked (terkunci) artinya tidak dapat diedit

oleh pengguna, namun secara otomatis dapat berganti ketika

systemnya telah ter-update.

Gambar 3.4 Contoh information widget

Gambar diatas merupakan contoh penggunaan Information Widget. Bisa

dilihat jam tersebut merupakan widget yang berasal dari aplikasi pengatur

Jam yang dipasang pada layar utama. Kemudian widget informasi mengenai

cuaca tersebut merupakan contoh widget yang lock, artinya pengguna tidak

dapat mengeditnya tetapi informasi otomatis berubah ketika pengguna

terkoneksi internet, dan aplikasi cuaca tersebut mengambil data yang

terbaru. Dibawah ini, kami mengambil beberapa contoh yang termasuk

kedalam Information Widget (Untuk selanjutnya dapat dilihat pada bagian

Lampiran).

31

Widget Name AnalogClock

Description

Widget yang digunakan untuk menampilkan jam

analog yang memiliki 2 buah jarum jam yang

menunjukan jam dan menit

Attribute android.view.View

XML Code

<AnalogClock

android:id="@+id/AnalogClock01"



</AnalogClock>

Result

Table 3.7 Widget AnalogClock

Widget Name DigitalClock

Description

Sama seperti AnalogClock, hanya ditampilkan

secara digital. Menampilkan tentang informasi

jam / menit / detik.

Attribute


android.view.View

XML Code <DigitalClock

android:text="@+id/DigitalClock01"

android:id="@+id/DigitalClock01"

32



</DigitalClock>

Result

Table 3.8 Widget DigitalClock

Widget Name ProgressBar

Description

Visual indicator dari suatu proses operasi.

Menampilkan bar yang menunjukan seberapa

jauh operasi yang sudah selesai di proses.

Attribute android:animationResolution

android:indeterminate

android:indeterminateBehavior

android:indeterminateDrawable

android:indeterminateDuration

android:indeterminateOnly

android:interpolator

android:max

android:maxHeight

android:maxWidth

android:minHeight

android:minWidth

android:progress

android:progressDrawable

33

android:secondaryProgress

android.view.View

XML Code

<ProgressBar android:id="@+id/ProgressBar01"


android:layout_height="wrap_content"></Progre

ssBar>

Result

Table 3.9 Widget ProgressBar

c. Editable Widget

Editable Widget merupakan widget yang mempunyai kemampuan

untuk diedit, artinya ketika terjadi kesalahan, pengguna dapat mengedit

kembali dan mengoreksinya. Contoh dari penggunaan dari widget ini

adalah saat pengguna menggunakan aplikasi Message kemudian

mengetikan kata-kata tertentu. Saat kegiatan inilah sebenarnya

pengguna sedang menggunakan Editable Widget.

Contoh lain ketika menggunakan aplikasi Memo / Note, kemudian

menuliskan sesuatu dalam memo atau note, tentu saja kita harus

mengedit memo atau note tersebut sehingga akan menampilkan

informasi apa yang harus dilakukan pada kegiatan selanjutnya. Berikut

ini adalah gambaran cara kerja dari Editable Widget.

34

uc Use Case Model

User

Editable Widget

Information Widget

Other Source

«Do»

«Give»

«Give»

Gambar 3.5 Cara kerja Editable Widget

Disini user menggunakan Editable Widget untuk mengedit sesuatu.

Setelah selesai mengedit, maka informasi yang disimpan tersebut akan

di kirimkan, biasanya ke Information Widget, atau bisa juga

dikirimkan ke sumber lain yang tidak termasuk kedalam Information

Widget.

Gambar 3.6 Contoh Editable Widget

Gambar diatas adalah contoh penggunaan dari Editable Widget.

Widget tersebut digunakan pada aplikasi Message. Bisa diperhatikan

bahwa ketika mengetikkan suatu huruf, maka koreksi huruf yang benar

35

akan tertampil dibawahnya. Dengan begitu pengguna tidak perlu repot-

repot mengetikkan suatu kata tertentu, karena koresksi kata tersebut

sudah tertampil dibawahnya, pengguna hanya perlu untuk

mengkliknya.

Sebagian Editable Widget berhubungan dengan Text. Dibawah ini

adalah beberapa yang termasuk kedalam Editable Widget.

Widget Name AutoCompleteTextView

Description

Teks yang muncul dengan otomatis ketika

pengguna sedang mengetik sesuatu. Teks utuh

tersebut akan muncul ketika pengguna baru

mengetikan beberapa huruf. List dari teks yang

disarankan akan tertampil dengan tampilan drop

down, dan ketika pengguna memilih teks

tersebut, secara otomatis akan mengganti teks

yang belum sempurna tersebut

Attribute

android.widget.AutoCompleteTextView


android.view.View

XML Code <AutoCompleteTextView

android:text="@+id/AutoCompleteTextView01"

android:id="@+id/AutoCompleteTextView01"



36

</AutoCompleteTextView>

Result

Table 3.10 Widget AutoCompleteTextView

Widget Name CheckedTextView

Description

Kelanjutan dari TextView dimana teks nya dapat

mensupport Checkable interface artinya dapat

disentuh / diklik oleh pengguna, sangat berguna

ketika digunakan dalam ListView. Contoh

penggunaanya dalam AutoCompleteTextView,

user dapat mengklik / menyentuh teks yang

ditampilkan

Attribute


android.view.View

XML Code

<CheckedTextView

android:text="@+id/CheckedTextView01"

android:id="@+id/CheckedTextView01"



</CheckedTextView>

Result

Table 3.11 Widget CheckedTextView

37

Widget Name EditText

Description

EditText adalah lapisan tipis di atas TextView

yang mengkonfigurasi dirinya sendiri untuk dapat

diedit. Maksudnya yaitu ketika pengguna selesai

mengetikkan suatu teks, maka teks itu dapat

diedit kembali apabila terjadi kesalahan.

Attribute


android.view.View

XML Code

<EditText android:text="@+id/EditText01"

android:id="@+id/EditText01"



</EditText>

Result

Table 3.12 Widget EditText

Widget Name MultiAutoCompleteTextView

Description

Teks yang dapat di edit, yang merupakan

kelanjutan dari AutoCompleteTextView. Hanya

saja dapat menunjukan beberapa saran

penyelesaian untuk substring teks dimana

pengguna mengetik teks tertentu bukan

seluruhnya

Attribute android.widget.AutoCompleteTextView

38


android.view.View

XML Code

<MultiAutoCompleteTextView

android:text="@+id/MultiAutoCompleteTextVie

w01"

android:id="@+id/MultiAutoCompleteTextView

01" android:layout_width="wrap_content"


</MultiAutoCompleteTextView>

Result

Table 3.13 Widget MultiAutoCompleteTextView

3. Layout Component

Pada bagian ini kami akan menganalisis tentang component-

component Layout Android. Dengan menggunakan referensi dari Plugin

GUI Eclipse dan situs http://developer.android.com, kami akan mencoba

menjelaskan dan menganalisis mengenai layout component.

Setelah kami melihat dan menganalisis dari Plugin GUI Android

Eclipse dan referensi dari situs http://developer.android.com, kami

menyimpulkan bahwa layout yang digunakan terbagi menjadi 2 kelompok

besar menurut kemiripan dari karakteristiknya yaitu Container Layout dan

Scrollable Layout.

39



a. Container Layout

Sesuai namanya Container Layout merupakan layout yang

menampung widget-widget atau suatu fungsi tertentu (item) yang

banyaknya tergantung dari kemampuan layer perangkat. Artinya jika

suatu layout sudah penuh maka untuk menyimpan widget / item

selanjutnya, akan dibuat pada layout yang baru.

Pada umumnya layout ini tidak memiliki fitur agar dapat di-scroll.

Contoh dari penggunaan Container Layout adalah menu utama dari

suatu aplikasi. Berikut adalah gambaran kinerja untuk Container

Layout. uc Use Case Model

Container Layout

Container Layout New

Interaction Widget

Information Widget

Editable Widget

Item

«IfFull»

«Add»

«Add»

«Add»

«Add»

«Add»

«Add»

«Add»

«Add»

Gambar 3.7 Kinerja Container Layout

Contoh dari penggunaan Container Layout adalah membuat menu

utama dari suatu aplikasi, misalkan aplikasi game Disini Designer

memasukkan beberapa widget kedalam layout tersebut. Setelah satu

layout tersebut penuh / tidak mampu menampung widget lagi karena

keterbatasan layer, maka untuk menyimpan sisa widgetnya, Designer 40

membuat layout baru. Namun Container Layout dapat berubah

menjadi Scroll Layout apabila ditambahkan didalamnya kemampuan

untuk scrolling.

Gambar 3.8 Contoh Container Layout

Gambar diatas adalah contoh penggunaan Container Layout. Bisa dilihat

bahwa menu utama tersebut tidak memerlukan scrolling karena widget

yang akan disimpankan sudah terpenuhi semua, seperti widget Button Play,

Settings, About dan Exit. Dibawah ini adalah beberapa contoh dari Container

Layout.

Layout Name AbsoluteLayout

Description Layout yang memungkinkan menentukan sendiri

lokasi yang tepat untuk widget (menggunakan

koordinat x / y) Absolute layout dikatakan kurang

fleksibel karena penempatannya bersifat

permanen dan sulit untuk mengatur tata letak

41

widget

Attribute


android.view.View

XML Code

<AbsoluteLayout

android:id="@+id/AbsoluteLayout01"



</AbsoluteLayout>

Table 3.14 Layout AbsoluteLayout

Layout Name FrameLayout

Description

FrameLayout dirancang untuk membatasi area

pada layar ketika menampilkan sebuah item.

Attribute

android:foreground

android:foregroundGravity

android:measureAllChildren


android.view.View

XML Code

<FrameLayout

android:id="@+id/FrameLayout01"



</FrameLayout>

Table 3.15 Layout FrameLayout

42

Layout Name LinearLayout

Description

Layout yang mengatur dan menampilkan

widget=widget secara kolom atau baris.

Attribute


android.view.View

XML Code

<LinearLayout

android:id="@+id/LinearLayout02"



</LinearLayout>

Table 3.16 Layout LinearLayout

Layout Name RelativeLayout

Description

Layout ini berbeda dengan AbsoluteLayout, jika

menggunakan layout ini, penempatan widget

tidak bersifat permanen, tetapi akan

menyesuaikan dengan keadaan layar.

Attribute


android.view.View

XML Code

<RelativeLayout

android:id="@+id/RelativeLayout01"



</RelativeLayout>

43

Table 3.17 Layout RelativeLayout

b. Scroll Layout

Scroll Layout adalah layout yang memiliki kemampuan scrolling,

artinya dia bisa menyimpan banyak widget tanpa harus membuat

widget baru. Designer tidak perlu khawatir akan kehabisan tempat

untuk menyimpan widget atau item karena keterbatasan layer.

Contoh penggunaan Scroll Layout adalah inbox pada aplikasi

Message. Dimana ketika inbox tersebut penuh dalam satu layar, maka

untuk melihat pesan lain yang masuk, pengguna tinggal melakukan

scrolling biasanya secara vertical. Selain itu Scroll Layout bisa

berkolaborasi dengan Container Layout. Berikut adalah gambaran cara

kerja Scroll Layout. uc Use Case Model

Container Layout

Scroll Layout

Item

Interaction Widget

Information Widget

Editable Widget

«Add»

«Add»

«Add»

«Add»

«Add»

Gambar 3.9 Cara Kerja ScrollLayout44

Pada dasarnya Scroll Layout gabungan dari Container Layout.

Seperti sebelumnya Container menyimpan widget-widget yang akan

digunakan, kemudian layout tersebut diberi kemampuan untuk

melakukan scrolling. Maka hasilnya akan menjadi Scroll Layout.

Gambar 3.10 Contoh penggunaan Scroll Layout

Gambar diatas adalah contoh penggunaan dari Scroll Layout, dimana

bisa dilihat ketika satu layer penuh dengan pesan yang masuk, maka untuk

melihat pesan yang lain tinggal melakukan scrolling secara vertical. Dibawah

ini adalah yang termasuk dengan Scroll Layout.

Layout Name ExpandableListView

Description

Menampilkan daftar item scrolling secara vertikal

dengan list level sebanyak 2 tingkat.

Attribute android:childDivider

android:childIndicator

45

android:childIndicatorLeft

android:childIndicatorRight

android:groupIndicator

android:indicatorLeft

android:indicatorRight

android.widget.ListView

android.widget.AbsListView


android.view.View

XML Code

<ExpandableListView

android:id="@+id/ExpandableListView01"



</ExpandableListView>

Table 3.18 Layout ExpendableListView

Layout Name GridView

Description

Untuk menampilkan item dalam scrolling 2 arah /

dimensi.

Attribute android:columnWidth

android:gravity

android:horizontalSpacing

android:numColumns

android:StretchMode

46

android:verticalSpacing


android.view.View

XML Code

<GridView android:id="@+id/GridView01"



</GridView>

Table 3.19 Layout GridView

Layout Name ScrollView

Description

Layout yang menampilkan tampilan secara hirarki

sehingga dapat di scroll oleh pengguna. Tampilan

dapat diperbesar dari ukuran asli.

Attribute



android.view.View

XML Code

<ScrollView android:id="@+id/ScrollView01"



</ScrollView>

Table 3.21 Layout Scrollview

4. Attribute dan XML Code

47

Bisa dilihat secara seksama bahwa setiap widget dan layout memiliki

attribute tertentu. Attribute-attribute ini nantinya digunakan untuk meng-

customize widget dan layout yang sudah dipasangkan pada layer. Dalam

Plugin GUI Android Eclipse kita bisa mengedit attribute setiap widget dan

layout melalui tab Properties. Pada tab ini kita bisa mengedit attribute yang

akan digunakan. Setiap attribute memiliki efek yang berbeda-berbeda

tergantung dari fungsinya.

Gambar 3.11 Contoh attribute widget android

Penjelasan tentang fungsi dari masing-masing attribute bisa dilihat

pada bagian Lampiran.

Selanjutnya setelah kita mengetahui bahwa setiap widget dan layout

memiliki attribute, sekarang bagaimana cara penulisan widget atau layout

48

itu sendiri? Sudah dikatakan pada bagian sebelumnya bahwa user interface

Android dibuat dengan XML Code.

Sama seperti XML pada umumnya yaitu menggunakan elemen yang

ditandai dengan tag pembuka (diawali dengan ‘<’ dan diakhiri dengan

‘>’), tag penutup (diawali dengan ‘</ ‘diakhiri ‘>’) dan atribut elemen

(parameter yang dinyatakan dalam tag pembuka misal <form

name=”isidata”>). Namun Android sudah menyiapkan aturan sendiri

untuk variable-variable yang digunakan dan juga attribute dasar yang

harus ada pada setiap Widget atau Layout.

<AnalogClock android:id="@+id/AnalogClock01" android:layout_width="wrap_content" android:layout_height="wrap_content">

</AnalogClock>.

AnalogClock menjelaskan widget yang akan digunakan, dalam hal ini

jam analog yang nantinya akan memberikan informasi mengenai waktu.

Android:id merupakan nama id yang nantinya akan digunakan pada script

pemrograman Java untuk dilakukan pemanggilan. Sedangkan

android:layout_width dan android:layout_height berisi informasi tentang

widget ini diletakan pada layout. Adapun jika ingin menambahkan

attribute baru, maka tinggal menambahkannya pada tag pembuka.

49

Gambar 3.12 Attribute background pada widget AnalogClock

Maka pada xml file nya menjadi :

<AnalogClock android:id="@+id/AnalogClock01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/icon">

</AnalogClock>

3.4 Analisis Plugin GUI Designer Android pada Eclipse dan DroidDraw

Pada analisis ini, kami menggunakan satu aplikasi untuk dijadikan

pembanding yaitu DroidDraw. Kami menggunakan aplikasi ini karena dari sisi

tampilan dan penggunaanya sangat mudah dipahami dan dimengerti bagi

Designer pemula. Aplikasi DroidDraw ini bersifat standalone dan dapat di

download pada situs http://droiddraw.org/.

50

Disini kami melakukan perbandingan untuk menganalisis Plugin Eclipse,

dan setelah menganalisisnya kemudian kami menemukan 2 kelemahan yang

ada pada plugin tersebut, yaitu tentang tampilan icon widget dan layout pada

pallete-nya dan tampilan mengenai tab Properties untuk mengedit attribute.

Gambar 3.13 Widget android pada Eclipse

Gambar 3.14 Widget android pada DroidDraw

Gambar yang pertama diambil dari Plugin Eclipse dan yang kedua diambil

dari aplikasi DroidDraw. Bisa dilihat bahwa tampilan pallete nya lebih baik

51

aplikasi DroidDraw daripada Plugin Eclipse. Dengan tampilan seperti itu,

Designer pemula pun akan lebih cepat memahami mengenai fungsi-fungsinya,

ketimbang dengan hanya teks biasa dengan icon yang tidak jelas. Plugin

Eclipse mengharuskan Designer mengecek satu-persatu dengan cara

memasangkannya pada layer untuk mengetahui bentuknya, sedangkan pada

DroidDraw sudah tertampil dengan jelas.

Gambar 3.15 Properties widget android pada Eclipse

Gambar 3.16 Properties widget android pada DroidDraw

Yang kedua yaitu mengenai tab Properties. Gambar 3.15 merupakan

tampilan tab Properties pada Plugin Eclipse, sedangkan yang Gambar 3.16

52

pada DroidDraw. Bisa dilihat tampilan untuk DroidDraw lebih mudah

dipahami, ketimbang dengan Plugin Eclipse. Pada Plugin Eclipse setiap

attributenya tidak jelas harus diisi apa. Bisa saja kita mengisi huruf atau angka

pada attribute Backround, padahal attribute tersebut berfungsi untuk

menambahkan Background pada suatu widget atau layout. Pada DroidDraw

lebih jelas mengenai apa yang harus diisikan pada attribute tersebut.

3.5 Analisis Pengguna Plugin GUI Designer Android

Pengguna dari Plugin GUI Designer Android ini adalah User Interface

Designer. User Interface Designer atau UI Designer adalah individu yang

bertugas dalam hal merancang tampilan untuk berinteraksi dengan user (User

Interface), baik untuk menerima inputan ataupun menampilkan hasil dari

suatu proses, untuk aplikasi Android. Dalam hal ini, Designer mengetahui dan

memahami cara menggunakan komponen-komponen Android dan mengetahui

bagaimana cara menggunakan Plugin pada NetBeans IDE. Designer tidak

perlu tahu mengenai bahasa pemrograman Java yang digunakan untuk

membuat aplikasi Android.

3.6 Analisis Pengembangan Plugin GUI Designer Android

Bahasa yang digunakan dalam pembuatan Plugin ini adalah dengan

menggunakan bahasa Java. Tools yang digunakan untuk pembuatannya yaitu

Netbeans 6.91. Apabila suatu saat Plugin ini akan dilakukan peng-update-an,

maka dapat dikode ulang menggunakan tools tersebut. Sistem operasi yang

digunakan yaitu Microsoft Windows 7.

53

3.7 Analisis Hardware

Beberapa perangkat yang digunakan dalam pembuatan Plugin ini adalah

sebagai berikut:

1. Notebook ASUS A42JC dengan spesifikasi hardwarenya yaitu:

OS: Microsoft Windows 7

CPU: Intel(R) Core(TM) i5 CPU M450 2.40GHz

RAM: 3 GB

Harddisk: 500GB

2. HP LG dengan menggunakan OS Android, spesifikasinya yaitu:

OS: Android OS, v1.6 (Donut), upgradable to v2.1

CPU: 600 MHz processor

Java: Yes, via Java MIDP emulator

HP Android disini digunakan untuk melakukan pengetesan terhadap

aplikasi yang dibuat dengan menggunakan Plugin GUI Designer ini.

3.8 Analisis Kedudukan Plugin

Kedudukan Plugin pada proses pembuatan Aplikasi Android adalah

sebagai pembantu dalam pembuatan UI Aplikasi Android. Pada dasarnya

Netbeans sudah mempunyai Plugin SDK Android, namun dalam pembuatan

UI nya masih bersifat teks base. Mungkin bagi Designer yang sudah hafal

betul XML untuk UI Android tidak memiliki masalah, namun apabila masih

sebatas pemula, mungkin Plugin GUI ini akan sangat berguna. Agar Plugin ini

dapat bekerja secara optimal, tentu saja pada Netbeans harus juga disertakan

54

Plugin SDK Android, karena Plugin yang kami buat hanya digunakan untuk

menggenerate Code XML untuk UI Aplikasi Android.

Plugin GUI ini menyediakan sebuat pallete yang berisi widget dan layout

yang siap digunakan untuk UI Android. Disini Designer hanya perlu

melakukan drag and drop dari pallete ke dalam layer perangkat yang akan

digunakan. Setelah widget tertempel pada layer, maka secara otomatis widget

itu akan di generate kedalam XML, Designer dapat menambahkan sesuatu pada

XML tersebut secara manual, atau mengedit properties option yang sudah

disediakan.

55

BAB IV

PERANCANGAN

Pada Bab ini kami akan membuat rancangan tentang pembuatan Plugin GUI

Designer Android ini. Tahap awal yang kami lakukan adalah membuat use case

nya.

4.1 Use Case

1. General Design

Actor Goal

Designer 1. Drag and Drop View

2. View XML Code

3. Choose widget

4. Choose layout

5. Edit widget

6. Edit layout

7. Design UI

Host Aplication 8. Install plugin

9. Uninstall plugin

10. Start plugin

11. Exit plugin

Table 4.1 General design

56

Use Case Name Drag and Drop View

Primary Actor Designer

StakeHolders and

Interest

Designer: Melakukan Drag and Drop View

dari pallete ke layer untuk mendesign UI

Aplikasi Android

Preconditions Belum ada objek view pada layer

Postconditions Objek View berhasil dibuat dan ditempatkan

kedalam layer

Main Success

Scenario

1. Designer memilih icon View dari pallete

2. Designer men drag icon View dari pallete

3. System membaca script program untuk

View tersebut

4. Designer men drop icon View kedalam

layer

5. System mencari script XML untuk view

tersebut

Table 4.2 Use case Drag and Drop View

Use Case Name View XML Code


StakeHolders and

Interest

Designer: Ingin code XML dari UI yang telah

di design

Preconditions Belum ada objek view pada layer

Postconditions Designer telah membuat UI Design pada layer

57

dan menekan tab “View XML”

Main Success

Scenario

1. Designer membuat design User Interface

dan menekan tab ‘View XML’

2. System melihat informasi code XML setiap

element pada User Interface tersebut

3. System menampilkan informasi tersebut

pada layer View XML

4. System mengulangi langkah 2-3 sampai

tiap element pada User Interface selesai di

baca.

5. System menampilkan layer View XML.

Table 4.3 Use case View XML

Use Case Name Choose Widget


StakeHolders and

Interest

Designer: Memilih widget yang akan

digunakan untuk membuat UI

Preconditions Widget belum ada yang di highlight

Widget yang dipilih akan ter-highlight.



Main Success

Scenario

1. Designer memilih Widget dengan meng-

klik-nya

58

2. System akan meng-highlight Widget

terpilih tersebut.

Table 4.4 Choose Widget

Use Case Name Choose Layout


StakeHolders and

Interest

Designer: Memilih layout yang akan

digunakan untuk membuat UI

Preconditions Layout belum ada yang di highlight.

Widget yang dipilih akan ter-highlight.



Main Success

Scenario

1. Designer memilih Layout dengan meng-

klik-nya

2. System akan meng-highlight Layout

terpilih tersebut.

Table 4.5 Choose Layout

Use Case Name Edit Widget


StakeHolders and

Interest

Designer: Ingin mengedit widget yang telah

tertempel pada layer.

Preconditions Widget sudah ditempel pada ilustrasi layer

Postconditions Code XML akan tergenerate ketika widget

ditempel pada ilustrasi layer.

59

Main Success

Scenario

1. Designer memilih widget

2. Designer menempelkan pada layer

3. System membaca script dan generate

kedalam XML

4. Designer membuka tab ‘View XML’

5. Designer dapat melihat code XML-nya

Table 4.6 Edit Widget

Use Case Name Edit Layout


StakeHolders and

Interest

Designer: Ingin mengedit widget yang telah

tertempel pada layer.

Preconditions Layout sudah ditempel pada ilustrasi layer

Postconditions Code XML akan tergenerate ketika layout

ditempel pada ilustrasi layer

Main Success

Scenario

1. Designer memilih layout

2. Designer menempelkan pada layer

3. System membaca script dan generate

kedalam XML

4. Designer membuka tab ‘View XML’

5. Designer dapat melihat code XML-nya

Table 4.7 Edit Layout

60

Use Case Name Design UI


StakeHolders and

Interest

Designer: Ingin mendesain UI Android secara

visual.

Preconditions

Postconditions XML dari UI tersebut tertampil pada layer

XML

Main Success

Scenario

1. Designer membuat design User Interface

dan menekan tombol 'Generate'

2. System melihat informasi code XML setiap

element pada User Interface tersebut

3. system menampilkan informasi tersebut

pada layer View XML

4. System mengulangi langkah 2-3 sampai

tiap element pada User Interface selesai di

baca.

5. System menampilkan layer View XML.

Table 4.8 Edit Layout

61

2. Use Case Diagram

Berikut ini adalah use case diagram untuk Plugin GUI yang kami

kerjakan:

Gambar 4.1 Use Case diagram plugin GUI Designer

62

DAFTAR PUSTAKA

1. T. Boudreau, J. Tulach, G. Wielenga : “Rich Client Programming : Plugging

into the NetBeans Platform”, Prentice Hall : ISBN 0-13-235480-2, 2007.

2. http://andi.stk31.com/perkembangan-sistem-operasi-smartphone-di-us-dan-

indonesia.html

3. http://id.wikipedia.org/wiki/Android_%28sistem_operasi%29

4. http://kenai.com/projects/nbandroid

5. http://en.wikipedia.org/wiki/Plugin_%28computing%29

6. http://silveiraneto.net/2008/02/24/netbeans-your-first-plugin/

7. http://developer.android.com

63


http://silveiraneto.net/2008/02/24/netbeans-your-first-plugin/

http://en.wikipedia.org/wiki/Plug-in_(computing)

http://kenai.com/projects/nbandroid

http://id.wikipedia.org/wiki/Android_(sistem_operasi)

http://andi.stk31.com/perkembangan-sistem-operasi-smartphone-di-us-dan-indonesia.html

http://andi.stk31.com/perkembangan-sistem-operasi-smartphone-di-us-dan-indonesia.html

LAMPIRAN

Widget Component

No 1

Widget Name AnalogClock

Description

This widget display an analogic clock with two hands for hours

and minutes.

(Widget yang digunakan untuk menampilkan jam analog yang

memiliki 2 buah jarum jam yang menunjukan jam dan menit)


XML Code

<AnalogClock android:id="@+id/AnalogClock01"


android:layout_height="wrap_content"></AnalogClock>

Result

No 2

Widget Name AutoCompleteTextView

Description An editable text view that shows completion suggestions

automatically while the user is typing. The list of suggestions is

displayed in a drop down menu from which the user can choose

an item to replace the content of the edit box with.

64

(Teks yang muncul dengan otomatis ketika pengguna sedang

mengetik sesuatu. Teks utuh tersebut akan muncul ketika

pengguna baru mengetikan beberapa huruf. List dari teks yang

disarankan akan tertampil dengan tampilan drop down, dan

ketika pengguna memilih teks tersebut, secara otomatis akan

mengganti teks yang belum sempurna tersebut)

Attribute



android.view.View

XML Code

<AutoCompleteTextView

android:text="@+id/AutoCompleteTextView01"

android:id="@+id/AutoCompleteTextView01"


android:layout_height="wrap_content"></AutoCompleteTextV

iew>

Result

No 3

Widget Name Button

Description Represents a push-button widget. Push-buttons can be pressed,

or clicked, by the user to perform an action.

65

(Merupakan widget yang dapat ditekan yang berbentuk sebuah

tombol dimana ketika tombol tersebut ditekan atau diklik oleh

pengguna, maka akan melakukan suatu aksi / proses)

Attributeandroid.widget.TextView

android.view.View

XML Code

<Button android:text="@+id/Button01"

android:id="@+id/Button01"


android:layout_height="wrap_content"></Button>

Result

No 4

Widget Name CheckedTextView

Description

An extension to TextView that supports the Checkable interface.

This is useful when used in a ListView.

(Kelanjutan dari TextView dimana teks nya dapat mensupport

Checkable interface artinya dapat disentuh / diklik oleh

pengguna, sangat berguna ketika digunakan dalam ListView.

Contoh penggunaanya dalam AutoCompleteTextView, user

dapat mengklik / menyentuh teks yang ditampilkan)


android.view.View

66

XML Code

<CheckedTextView android:text="@+id/CheckedTextView01"

android:id="@+id/CheckedTextView01"


android:layout_height="wrap_content"></CheckedTextView>

Result

No 5

Widget Name CheckBox

Description

A checkbox is a specific type of two-states button that can be

either checked or unchecked.

(Sebuah icon yang memiliki 2 kemungkinan yaitu checked /

diceklis atau unchecked / tidak diceklist, biasanya icon ini yang

menyatakan suatu proses diaktifkan atau tidak)


android.view.View

XML Code

<CheckBox android:text="@+id/CheckBox01"

android:id="@+id/CheckBox01"


android:layout_height="wrap_content"></CheckBox>

Result

No 6

Widget Name Chronometer67

DescriptionClass that implements a simple timer.

(Kelas yang mengimplementasikan timer yang sederhana)

Attribute

android:format


android.view.View

XML Code

<Chronometer android:text="@+id/Chronometer01"

android:id="@+id/Chronometer01"


android:layout_height="wrap_content"></Chronometer>

Result

No 7

Widget Name DatePicker

Description

This class is a widget for selecting a date. The date can be

selected by a year, month, and day spinners or a CalendarView.

(Kelas ini adalah widget untuk memilih tanggal. Tanggal dapat

dipilih dengan menggunakan bulan, tahun dan pergantian hari

atau sebuah CalendarView)

Attribute android:calendarViewShown

android:endYear

android:maxDate

68

android:minDate

android:spinnerShown

android:startYear



android.view.View

XML Code

<DatePicker android:id="@+id/DatePicker01"


android:layout_height="wrap_content"></DatePicker>

Result

No 8

Widget Name DigitalClock

Description

Like AnalogClock, but digital. implement separate views for

hours/minutes/seconds.

(Sama seperti AnalogClock, hanya ditampilkan secara digital.

Menampilkan tentang informasi jam / menit / detik.)


android.view.View

69

XML Code

<DigitalClock android:text="@+id/DigitalClock01"

android:id="@+id/DigitalClock01"


android:layout_height="wrap_content"></DigitalClock>

Result

No 9

Widget Name EditText

Description

EditText is a thin veneer over TextView that configures itself to

be editable.

(EditText adalah lapisan tipis di atas TextView yang

mengkonfigurasi dirinya sendiri untuk dapat diedit. Maksudnya

yaitu ketika pengguna selesai mengetikkan suatu teks, maka teks

itu dapat diedit kembali apabila terjadi kesalahan.)


android.view.View

XML Code

<EditText android:text="@+id/EditText01"

android:id="@+id/EditText01"


android:layout_height="wrap_content"></EditText>

Result

70

No 10

Widget Name Gallery

Description

A view that shows items in a center-locked, horizontally

scrolling list.

(Tampilan yang menunjukan daftar-daftar item, ditampilkan

scrolling list secara horizontal, artinya dapat di scroll.)

Attribute

android:animationDuration

android:gravity

android:spacing

android:unselectedAlpha

android.widget.AbsSpinner


android.view.View

XML Code

<Gallery android:id="@+id/Gallery01"


android:layout_height="wrap_content"></Gallery>

Result

No 11

Widget Name ImageButton

Description Displays a button with an image (instead of text) that can be

pressed or clicked by the user.

71

(Sama seperti Button, hanya saja bisa digunakan dengan

menambahkan gambar. Fungsinya sama yaitu dapat di tekan atau

di klik oleh pengguna. Secara default tampilannya sama seperti

Button)

Attributeandroid.widget.ImageView

android.view.View

XML Code

<ImageButton android:id="@+id/ImageButton01"


android:layout_height="wrap_content"></ImageButton>

Result

No 12

Widget Name ImageView

Description

Displays an arbitrary image, such as an icon. The ImageView

class can load images from various sources (such as resources or

content providers).

(Menampilkan gambar seadanya, seperti sebuah ikon. Kelas

ImageView dapat memuat gambar dari berbagai sumber (Seperti

sumber daya atau penyedia konten).)


android.view.View

XML Code <ImageView android:id="@+id/ImageView01"

72


android:layout_height="wrap_content"></ImageView>

Result

No 13

Widget Name MultiAutoCompleteTextView

Description

An editable text view, extending AutoCompleteTextView, that

can show completion suggestions for the substring of the text

where the user is typing instead of necessarily for the entire

thing.

(Teks yang dapat di edit, yang merupakan kelanjutan dari

AutoCompleteTextView. Hanya saja dapat menunjukan

beberapa saran penyelesaian untuk substring teks dimana

pengguna mengetik teks tertentu bukan seluruhnya)

Attribute



android.view.View

XML Code

<MultiAutoCompleteTextView

android:text="@+id/MultiAutoCompleteTextView01"

android:id="@+id/MultiAutoCompleteTextView01"


android:layout_height="wrap_content"></MultiAutoComplete

TextView>

73

Result

No 14

Widget Name ProgressBar

Description

Visual indicator of progress in some operation. Displays a bar to

the user representing how far the operation has progressed.

(Visual indicator dari suatu proses operasi. Menampilkan bar

yang menunjukan seberapa jauh operasi yang sudah selesai di

proses.)

Attribute android:animationResolution

android:indeterminate

android:indeterminateBehavior

android:indeterminateDrawable

android:indeterminateDuration

android:indeterminateOnly

android:interpolator

android:max

android:maxHeight

android:maxWidth

android:minHeight

android:minWidth

74

android:progress

android:progressDrawable

android:secondaryProgress

android.view.View

XML Code

<ProgressBar android:id="@+id/ProgressBar01"


android:layout_height="wrap_content"></ProgressBar>

Result

No 15

Widget Name RadioButton

Description

Radio buttons are normally used together in a RadioGroup.

When several radio buttons live inside a radio group, checking

one radio button unchecks all the others.

(Tombol radio biasanya digunakan bersamaan dalam

RadioGroup. Ketika satu tombol radio aktif di dalam kelompok,

maka hanya boleh satu radio saja yang aktif, yang lainnya akan

dimatikan)


android.view.View

XML Code <RadioButton android:text="@+id/RadioButton01"

android:id="@+id/RadioButton01" 75


android:layout_height="wrap_content"></RadioButton>

Result

No 16

Widget Name RatingBar

Description

A RatingBar is an extension of SeekBar and ProgressBar that

shows a rating in stars. The user can touch/drag or use arrow

keys to set the rating when using the default size RatingBar.

(RatingBar merupakan kelanjutan dari SeekBar dan ProgressBar

dimana menampilkan suatu rating dalam icon bintang. Pengguna

dapat menyentuh / mendrag atau menggunakan tombol arah

untuk mengatur peringkat. Contoh penggunaan RatingBar adalah

pada lagu. Biasanya rating diberikan jika lagu tersebut memiliki

kualitas yang bagus / sering diputar.)

Attribute

android:isIndicator

android:numStars

android:rating

android:stepSize

android.view.View

XML Code <RatingBar android:id="@+id/RatingBar01"


76

android:layout_height="wrap_content"></RatingBar>

Result

No 17

Widget Name SeekBar

Description

A SeekBar is an extension of ProgressBar that adds a draggable

thumb. The user can touch the thumb and drag left or right to set

the current progress level or use the arrow keys.

(SeekBar merupakan kelanjutan dari ProgressBar yang

menambahkan thumb yang dapatdi drag. Pengguna dapat

menyentuh thumb tersebut dan mendragnya ke kiri atau ke

kanan untuk mengatur tingkat kemajuannya atau menggunakan

tombol arah. Contoh penggunaanya yaitu ketika akan membuka

kunci layar.)


XML Code

<SeekBar android:id="@+id/SeekBar01"


android:layout_height="wrap_content"></SeekBar>

Result

No 18

Widget Name Spinner

77

Description

A view that displays one child at a time and lets the user pick

among them.

(Suatu tampilan yang menyajikan lebih dari satu pilihan secara

bersamaan. Pengguna dapat memilih salah satunya untuk

melakukan suatu aksi / proses)

Attribute

android:gravity

android:prompt


android.view.View

XML Code

<Spinner android:id="@+id/Spinner01"


android:layout_height="wrap_content"></Spinner>

Result

No 19

Widget Name SurfaceView

Description Provides a dedicated drawing surface embedded inside of a view

hierarchy. You can control the format of this surface and, if you

like, its size; the SurfaceView takes care of placing the surface at

the correct location on the screen.

(Inti dari penggunaan SurfaceView adalah untuk mengkoreksi

78

penempatan widget ketika ditampilkan pada layar.)


XML Code

<SurfaceView android:id="@+id/SurfaceView01"


android:layout_height="wrap_content"></SurfaceView>

Result

No 20

Widget Name TextView

Description

Displays text to the user and optionally allows them to edit it.

(Menampilkan teks kepada pengguna dan secara opsional dapat

dilakukan pengeditan.)

Attribute android:autoLink

android:autoText

android:bufferType

android:capitalize

android:cursorVisible

android:digits

android:drawableBottom

android:drawableLeft

android:drawablePadding

android:drawableRight

android:drawableTop

79

android:editable

android:editorExtras

android:ellipsize

android:ems

android:freezesText

android:gravity

android:height

android:hint

android:imeActionId

android:imeActionLabel

android:imeOptions

android:includeFontPadding

android:inputMethod

android:inputType

android:lineSpacingExtra

android:lineSpacingMultiplier

android:lines

android:linksClickable

android:marqueeRepeatLimit

android:maxEms

android:maxHeight

android:maxLength

android:maxLines

80

android:maxWidth

android:minEms

android:minHeight

android:minLines

android:minWidth

android:numeric

android:password

android:phoneNumber

android:privateImeOptions

android:scrollHorizontally

android:selectAllOnFocus

android:shadowColor

android:shadowDx

android:shadowDy

android:shadowRadius

android:singleLine

android:text

android:textColor

android:textColorHighlight

android:textColorHint

android:textColorLink

android:textIsSelectable

android:textScaleX

81

android:textSize

android:textStyle

android:typeface

android:width

android.view.View

XML Code

<TextView android:text="@+id/TextView01"

android:id="@+id/TextView01"


android:layout_height="wrap_content"></TextView>

Result

No 21

Widget Name TimePicker

Description

A view for selecting the time of day, in either 24 hour or

AM/PM mode.

(Tampilan untuk memilih mode waktu, dimana dapat

ditampilkan dalam mode 24 jam atau dalam AM/PM)

Attribute



android.view.View

XML Code <TimePicker android:id="@+id/TimePicker01"


82

android:layout_height="wrap_content"></TimePicker>

Result

No 22

Widget Name ToggleButton

Description

Displays checked/unchecked states as a button with a "light"

indicator and by default accompanied with the text "ON" or

"OFF".

(Tombol yang digunakan untuk menghidupkan atau mematikan

suatu aksi / progress tertentu. Biasanya dalam keadaan aktif,

iconnya akan menyala)

Attribute

android:disabledAlpha

android:textOff

android:textOn


android.view.View

XML Code <ToggleButton android:text="@+id/ToggleButton01"

android:id="@+id/ToggleButton01"


83

android:layout_height="wrap_content"></ToggleButton>

Result

No 23

Widget Name TwoLineListItem

Description

A view group with two children, intended for use in ListViews.

This item has two TextViews elements (or subclasses) with the

ID values text1 and text2.

(Inti dari penggunaan TwoLineListItem adalah berfungsi untuk

menampilkan 2 buah atau lebih ListItem secara bersamaan)

Attribute

android:mode

android.widget.RelativeLayout


android.view.View

XML Code

<TwoLineListItem android:id="@+id/TwoLineListItem01"


android:layout_height="wrap_content"></TwoLineListItem>

Result

No 24

Widget Name VideoView

Description Displays a video file. The VideoView class can load images 84

from various sources (such as resources or content providers).

(Menampilkan sebuah file video. Kelas VideoView dapat

memuat gambar / file dari berbagai sumber (contoh dari memori

atau penyedia konten YouTube).)


XML Code

<VideoView android:id="@+id/VideoView01"


android:layout_height="wrap_content"></VideoView>

Result

No 25

Widget Name View

Description Provides classes that expose basic user interface classes that

handle screen layout and interaction with the user.

85

(View merupakan dasar dari kelas user interface dimana dialah

yang menangani tata letak layar / widget dan interaksi dengan

pengguna.)

Attribute

XML Code

<View android:id="@+id/View01"


android:layout_height="wrap_content"></View>

Result

No 26

Widget Name ViewStub

DescriptionA ViewStub is an invisible, zero-sized View that can be used to

lazily inflate layout resources at runtime.

Attribute

android:inflatedId

android:layout

android.view.View

XML Code

<ViewStub android:id="@+id/ViewStub01"


android:layout_height="wrap_content"></ViewStub>

Result

No 27

86

Widget Name ZoomButton

Description


android.view.View

XML Code

<ZoomButton android:id="@+id/ZoomButton01"


android:layout_height="wrap_content"></ZoomButton>

Result

No 28

Widget Name ZoomControls

Description

The ZoomControls class displays a simple set of controls used

for zooming and provides callbacks to register for events.

(Inti dari penggunaan zoom control adalah dimana widget ini

menyediakan satu set tombol untuk melakukan zooming /

memperbesar suatu tampilan, zoom out dan zoom in.)

Attribute

android.widget.LinearLayout


android.view.View

XML Code

<ZoomControls android:id="@+id/ZoomControls01"


android:layout_height="wrap_content"></ZoomControls>

87

Result

Layout Component

No 1

Layout Name AbsoluteLayout

Description

A layout that lets you specify exact locations (x/y coordinates) of

its children. Absolute layouts are less flexible and harder to

maintain than other types of layouts without absolute

positioning.

(Layout yang memungkinkan menentukan sendiri lokasi yang

tepat untuk widget (menggunakan koordinat x / y) Absolute

layout dikatakan kurang fleksibel karena penempatannya bersifat

permanen dan sulit untuk mengatur tata letak widget)

Attributeandroid.view.ViewGroup

android.view.View

XML Code

<AbsoluteLayout android:id="@+id/AbsoluteLayout01"


android:layout_height="wrap_content"></AbsoluteLayout>

Result

No 2

Layout Name DialerFilter

88

Description

Attribute

android.widget.RelativeLayout


android.view.View

XML Code

<DialerFilter android:id="@+id/DialerFilter01"


android:layout_height="wrap_content"></DialerFilter>

Result

No 3

Layout Name ExpandableListView

Description

A view that shows items in a vertically scrolling two-level list.

(Menampilkan daftar item scrolling secara vertikal dengan list

level sebanyak 2 tingkat. )

Attribute android:childDivider

android:childIndicator

android:childIndicatorLeft

android:childIndicatorRight

android:groupIndicator

android:indicatorLeft

android:indicatorRight


89



android.view.View

XML Code

<ExpandableListView

android:id="@+id/ExpandableListView01"


android:layout_height="wrap_content"></ExpandableListView

>

Result

No 4

Layout Name FrameLayout

Description

FrameLayout is designed to block out an area on the screen to

display a single item.

(FrameLayout dirancang untuk membatasi area pada layar ketika

menampilkan sebuah item.)

Attribute

android:foreground


android:measureAllChildren


android.view.View

XML Code <FrameLayout android:id="@+id/FrameLayout01"

90


android:layout_height="wrap_content"></FrameLayout>

Result

No 5

Layout Name GridView

DescriptionA view that shows items in two-dimensional scrolling grid.

(Untuk menampilkan item dalam scrolling 2 arah / dimensi.)

Attribute

android:columnWidth

android:gravity

android:horizontalSpacing

android:numColumns

android:StretchMode

android:verticalSpacing



android.view.View

XML Code

<GridView android:id="@+id/GridView01"


android:layout_height="wrap_content"></GridView>

Result

91

No 6

Layout Name HorizontalScrollView

Description

Layout container for a view hierarchy that can be scrolled by the

user, allowing it to be larger than the physical display. A

HorizontalScrollView is a FrameLayout, meaning you should

place one child in it containing the entire contents to scroll.

(Layout untuk menyimpan tampilan hirarki yang dapat di scroll

oleh pengguna, tampilan dapat diperbesar dari ukuran aslinya.

HorizontalScrollView adalah sebuah FrameLayout, artinya harus

menempatkan item kedalam sebuah tampilan agar dapat di

scroll)

Attribute

android:fillViewport



android.view.View

XML Code

<HorizontalScrollView

android:id="@+id/HorizontalScrollView01"


android:layout_height="wrap_content"></HorizontalScrollVie

w>

Result

92

No 7

Layout Name ImageSwitcher

Description

Attribute

android.widget.ViewAnimator



android.view.View

XML Code

<ImageSwitcher android:id="@+id/ImageSwitcher01"


android:layout_height="wrap_content"></ImageSwitcher>

Result

No 8

Layout Name LinearLayout

Description

A Layout that arranges its children in a single column or a single

row.

(Layout yang mengatur dan menampilkan widget=widget secara

kolom atau baris)


android.view.View

XML Code

<LinearLayout android:id="@+id/LinearLayout02"


android:layout_height="wrap_content"></LinearLayout>

93

Result

No 9

Layout Name Listview

DescriptionA view that shows items in a vertically scrolling list.

(View yang menampilkan scroll list item secara vertikal)

Attribute




android.view.View

XML Code

<ListView android:id="@+id/ListView01"


android:layout_height="wrap_content"></ListView>

Result

No 10

Layout Name MediaController

Description A view containing controls for a MediaPlayer. Typically

contains the buttons like "Play/Pause", "Rewind", "Fast

Forward" and a progress slider. It takes care of synchronizing the

controls with the state of the MediaPlayer.

(Tampilan yang berisi kontrol untuk MediaPlayer. Biasanya

berisi tombol-tombol seperti "Play / Pause", "Rewind", "Fast

94

Forward" dan slider untuk mempercepat lagu / video.

Dibutuhkan sinkronisasi dengan kontrol yang ada pada

MediaPlayer)

Attribute



android.view.View

XML Code

<MediaController android:id="@+id/MediaController01"


android:layout_height="wrap_content"></MediaController>

Result

No 11

Layout Name Merge

Description

Attribute

XML Code

Result

No 12

Layout Name RadioGroup

Description This class is used to create a multiple-exclusion scope for a set

of radio buttons.

(Kelas ini digunakan untuk membuat lingkup untuk satu set

95

tombol radio.)

Attribute



android.view.View

XML Code

<RadioGroup android:id="@+id/RadioGroup01"


android:layout_height="wrap_content"></RadioGroup>

Result

No 13

Layout Name RelativeLayout

Description

A Layout where the positions of the children can be described in

relation to each other or to the parent.

(Layout ini berbeda dengan AbsoluteLayout, jika menggunakan

layout ini, penempatan widget tidak bersifat, tetapi akan

menyesuaikan dengan keadaan layar.)


android.view.View

XML Code

<RelativeLayout android:id="@+id/RelativeLayout01"


android:layout_height="wrap_content"></RelativeLayout>

Result

96

No 14

Layout Name ScrollView

Description

Layout container for a view hierarchy that can be scrolled by the

user, allowing it to be larger than the physical display.

(Layout yang menampilkan tampilan secara hirarki sehingga

dapat di scroll oleh pengguna. Tampilan dapat diperbesar dari

ukuran asli.)

Attribute



android.view.View

XML Code

<ScrollView android:id="@+id/ScrollView01"


android:layout_height="wrap_content"></ScrollView>

Result

No 15

Layout Name SlidingDrawer

Description

SlidingDrawer hides content out of the screen and allows the

user to drag a handle to bring the content on screen.

(SlidingDrawer memungkinan menyembunyikan sementara

suatu konten dan menampilkan kembali konten tersebut ke

layar.)

Attribute android:allowSingleTap

97

android:animateOnClick

android:bottomOffSet

android:content

android:handle

android:orientation

android:topOffSet


android.view.View

XML Code

<SlidingDrawer android:id="@+id/SlidingDrawer01"


android:layout_height="wrap_content"></SlidingDrawer>

Result

No 16

Layout Name TabHost

Description Container for a tabbed window view. This object holds two

children: a set of tab labels that the user clicks to select a specific

tab, and a FrameLayout object that displays the contents of that

page.

(Jendela Tab dimana objek ini memiliki 2 buah tampilan, untuk

memindahkan dari satu tampilan ke tampilan lain dalam satu tab,

pengguna hanya mengklik pada tab tampilan mana yang akan

98

diperlihatkan)

Attribute



android.view.View

XML Code

<TabHost android:id="@+id/TabHost01"


android:layout_height="wrap_content"></TabHost>

Result

No 17

Layout Name TableLayout

DescriptionA layout that arranges its children into rows and columns.

(Menampilkan tata letak widget kedalam baris atau kolom)

Attribute

android:collapseColumns

android:shrinkColumns

android:stretchColumns



android.view.View

XML Code

<TableRow android:id="@+id/TableRow01"


android:layout_height="wrap_content"></TableRow>

99

Result

No 18

Layout Name TableRow

DescriptionA layout that arranges its children horizontally.

(Menampilkan tata letak widget secara horizontal)

Attribute



android.view.View

XML Code

<TableRow android:id="@+id/TableRow01"


android:layout_height="wrap_content"></TableRow>

Result

No 19

Layout Name TabWidget

Description

Displays a list of tab labels representing each page in the parent's

tab collection.

(Menampilkan daftar label tab mewakili setiap halaman dalam

koleksi tab.)

Attribute android:divider

android:tabStripEnabled

android:tabStripLeft

100

android:tabStripRight



android.view.View

XML Code

<TabWidget android:id="@android:id/tabs"


android:layout_height="wrap_content"></TabWidget>

Result

No 20

Layout Name TextSwitcher

Description

A TextSwitcher is useful to animate a label on screen.

(TextSwitcher adalah berguna untuk menghidupkan label pada

layar.)

Attribute




android.view.View

XML Code

<TextSwitcher android:id="@+id/TextSwitcher01"


android:layout_height="wrap_content"></TextSwitcher>

Result

101

No 21

Layout Name ViewAnimator

Description

Base class for a FrameLayout container that will perform

animations when switching between its views.

(Berfungsi untuk memberikan suatu animasi ketika berpindah

dari satu tampilan ke tampilan lain)

Attribute

android:animateFirstView

android:inAnimation

android:outAnimation



android.view.View

XML Code

<ViewAnimator android:id="@+id/ViewAnimator01"


android:layout_height="wrap_content"></ViewAnimator>

Result

No 22

Layout Name ViewFlipper

Description Simple ViewAnimator that will animate between two or more

views that have been added to it.

102

(Kelanjutan dari ViewAnimator hanya saja animasi dapat

ditambahkan tidak hanya satu, tetapi beberapa animasi, dan juga

dapat digunakan dalam 2 atau lebih perpindahan tampilan)

Attribute




android.view.View

XML Code

<ViewFlipper android:id="@+id/ViewFlipper01"


android:layout_height="wrap_content"></ViewFlipper>

Result

No 23

Layout Name ViewSwitcher

Description

ViewAnimator that switches between two views, and has a

factory from which these views are created.

(ViewSwitcher adalah animasi yang ditampilkan diantara 2 buah

tampilan. Maksudnya animasi akan muncul ketika pengguna

memindahkan dari satu tampilan ke tampilan yang lain.)

Attribute




android.view.View

103

XML Code

<ViewSwitcher android:id="@+id/ViewSwitcher01"


android:layout_height="wrap_content"></ViewSwitcher>

Result

Attribute Component

No 1

Attribute Name android.widget.AbsListView

Component Description

android:cacheColorHint

android:choiceMode

android:drawSelectorOnTop

android:fastScrollEnabled

android:listSelector

android:scrollingCache

Indicates that this list will always be

drawn on top of solid, single-color

opaque background.

Defines the choice behavior for the

view.

When set to true, the selector will be

drawn over the selected item.

Enables the fast scroll thumb that can be

dragged to quickly scroll through the

list.

Drawable used to indicate the currently

selected item in the list.

When set to true, the list uses a drawing

cache during scrolling.

104

android:smoothScrollbar

android:stackFromBottom

android:textFilterEnabled

android:transcriptMode

When set to true, the list will use a more

refined calculation method based on the

pixels height of the items visible on

screen.

Used by ListView and GridView to stack

their content from the bottom.

When set to true, the list will filter results

as the user types.

Sets the transcript mode for the list.

No 2

Attribute Name android.widget.AbsSpinner


android:entries Reference to an array resource that will

populate the Spinner.

No 3

Attribute Name android.widget.AutoCompleteTextView


android:completionHint

android:completionHintView

Defines the hint displayed in the drop

down menu.

Defines the hint view displayed in the

drop down menu.

105

android:completionThreshold

android:dropDownAnchor

android:dropDownHeight

android:dropDownHorizontalOffset

android:dropDownSelector

android:dropDownVerticalOffset

android:dropDownWidth

android:popupBackground

Defines the number of characters that the

user must type before completion

suggestions are displayed in a drop down

menu.

View to anchor the auto-complete

dropdown to.

Specifies the basic height of the

dropdown.

Amount of pixels by which the drop

down should be offset horizontally.

Selector in a drop down list.

Amount of pixels by which the drop

down should be offset vertically.

Specifies the basic width of the

dropdown.

No 4

Attribute Name android.widget.FrameLayout


android:foreground


Defines the drawable to draw over the

content.

Defines the gravity to apply to the

foreground drawable.

106

android:measureAllChildren Determines whether to measure all

children or just those in the VISIBLE or

INVISIBLE state when measuring.

No 5

Attribute Name android.widget.ImageView


android:adjustViewBounds

android:baseline

android:baselineAlignBottom

android:cropToPadding

android:maxHeight

android:maxWidth

android:scaleType

android:src

Set this to true if you want the

ImageView to adjust its bounds to

preserve the aspect ratio of its drawable.

The offset of the baseline within this

view.

If true, the image view will be baseline

aligned with based on its bottom edge.

If true, the image will be cropped to fit

within its padding.

An optional argument to supply a

maximum height for this view.

An optional argument to supply a

maximum width for this view.

Controls how the image should be

resized or moved to match the size of this

ImageView.

107

android:tint Sets a drawable as the content of this

ImageView.

Set a tinting color for the image.

No 6

Attribute Name android.widget.LinearLayout


android:baselineAligned

android:baselineAlignedChildIndex

android:gravity

android:measureWithLargestChild

android:orientation

android:weightSum

When set to false, prevents the layout

from aligning its children's baselines.

When a linear layout is part of another

layout that is baseline aligned, it can

specify which of its children to baseline

align to (that is, which child TextView).

Specifies how to place the content of an

object, both on the x- and y-axis, within

the object itself.

When set to true, all children with a

weight will be considered having the

minimum size of the largest child.

Should the layout be a column or a row?

Use "horizontal" for a row, "vertical" for

a column.

Defines the maximum weight sum.

108

No 7

Attribute Name android.widget,ListView


android:divider

android:dividerHeight

android:entries

android:footerDividersEnabled

android:headerDividersEnabled

Drawable or color to draw between list

items.

Height of the divider.

Reference to an array resource that will

populate the ListView.

When set to false, the ListView will not

draw the divider before each footer

view.

When set to false, the ListView will not

draw the divider after each header view.

No 8

Attribute Name android.widget.ProgressBar


android:progressbarStyle

android:progressBarStyleHorizontal

android:progressBarStyleLarge

android:progressBarStyleSmall

Default ProgressBar style.

Horizontal ProgressBar style.

Large ProgressBar style.

Small ProgressBar style.

109

No 9

Attribute Name android.widget.RelativeLayout


android:gravity

android:ignoreGravity

Specifies how to place the content of an

object, both on the x- and y-axis, within

the object itself.

Indicates what view should not be

affected by gravity.

No 10

Attribute Name android.widget.TextView


android:autoLink

android:autoText

android:bufferType

android:capitalize

Controls whether links such as urls and

email addresses are automatically found

and converted to clickable links.

If set, specifies that this TextView has a

textual input method and automatically

corrects some common spelling errors.

Determines the minimum type that

getText() will return.


textual input method and should

automatically capitalize what the user

110

android:cursorVisible

android:digits

android:drawableBottom

android:drawableLeft

android:drawablePadding

android:drawableRight

android:drawableTop

android:editable

android:editorExtras

types.

Makes the cursor visible (the default) or

invisible.


numeric input method and that these

specific characters are the ones that it

will accept.

The drawable to be drawn below the

text.

The drawable to be drawn to the left of

the text.

The padding between the drawables and

the text.

The drawable to be drawn to the right of

the text.

The drawable to be drawn above the

text.

If set, specifies that this TextView has an

input method.

Reference to an <input-extras> XML

resource containing additional data to

supply to an input method, which is

private to the implementation of the input

111

android:ellipsize

android:ems

android,freezesText

android:gravity

android:height

android:hint

android:imeActionId

android:imeActionLabel

method.

If set, causes words that are longer than

the view is wide to be ellipsized instead

of broken in the middle.

Makes the TextView be exactly this

many ems wide.

If set, the text view will include its

current complete text inside of its frozen

icicle in addition to meta-data such as the

current cursor position.

Specifies how to align the text by the

view's x- and/or y-axis when the text is

smaller than the view.


many pixels tall. android:hint

setHint(int) Hint text to display when the

text is empty.

Hint text to display when the text is

empty.

Supply a value for EditorInfo.actionId

used when an input method is connected

to the text view.

Supply a value for

112

android:imeOptions

android:includeFontPadding

android:inputMethod

android:inputType

android:lineSpacingExtra

android:lineSpacingMultiplier

android:lines

android:linksClickable

EditorInfo.actionLabel used when an

input method is connected to the text

view.

Additional features you can enable in an

IME associated with an editor to improve

the integration with your application.

Leave enough room for ascenders and

descenders instead of using the font

ascent and descent strictly.

If set, specifies that this TextView should

use the specified input method (specified

by fully-qualified class name).

The type of data being placed in a text

field, used to help an input method

decide how to let the user enter text.

Extra spacing between lines of text.

Extra spacing between lines of text, as a

multiplier.


many lines tall.

If set to false, keeps the movement

method from being set to the link

movement method even if autoLink

113

android:marqueeRepeatLimit

android:maxEms

android:masHeight

android:masLength

android:masLines

android:masWidth

android:minEms

android:minHeight

android:minLines

android:minWidth

android:numeric

causes links to be found.

The number of times to repeat the

marquee animation.

Makes the TextView be at most this

many ems wide.


many pixels tall.

Set an input filter to constrain the text

length to the specified number.


many lines tall.


many pixels wide.

Makes the TextView be at least this

many ems wide.


many pixels tall.


many lines tall.


many pixels wide.


numeric input method.

114

android:password

android:phoneNumber

android:privatelmeOptions

android:scrollHorizontally

android:selectAllOnFocus

android:shadowColor

android:ShadowDx

android:ShadowDy

android:shadowRadius

android:singleLine

Whether the characters of the field are

displayed as password dots instead of

themselves.


phone number input method.

An addition content type description to

supply to the input method attached to

the text view, which is private to the

implementation of the input method.

Whether the text is allowed to be wider

than the view (and therefore can be

scrolled horizontally).

If the text is selectable, select it all when

the view takes focus instead of moving

the cursor to the start or end.

Place a shadow of the specified color

behind the text.

Horizontal offset of the shadow.

Vertical offset of the shadow.

Radius of the shadow.

Constrains the text to a single

horizontally scrolling line instead of

letting it wrap onto multiple lines, and

115

android:text

android:textAppearance

android:textColor

android:textColorHighlight

android:textColorHint

android:textColorLink

android:textIsSelectable

android:textScalex

android:textSize

android:textStyle

android:typerace

android:width

advances focus instead of inserting a

newline when you press the enter key.

Text to display.

Base text color, typeface, size, and style.

Text color.

Color of the text selection highlight.

Color of the hint text.

Text color for links.

Indicates that the content of a non-

editable text can be selected.

Sets the horizontal scaling factor for the

text.

Size of the text.

Style (bold, italic, bolditalic) for the text.

Typeface (normal, sans, serif,

monospace) for the text.


many pixels wide.

No 11

Attribute Name android.widget.ViewAnimator


android:animatedFirstView Defines whether to animate the current

116

android:inAnimation

android:outAnimation

View when the ViewAnimation is first

displayed.

Identifier for the animation to use when a

view is shown.

Identifier for the animation to use when a

view is hidden.

No 12

Attribute Name android.view.View


android:alpha

android:background

android:clickable

android:contentDescription

android:drawingCacheQuality

android:duplicateParentState

Alpha property of the view, as a value

between 0 (completely transparent) and 1

(completely opaque).

A drawable to use as the background.

Defines whether this view reacts to click

events.

Defines text that briefly describes

content of the view.

Defines the quality of translucent

drawing caches.

When this attribute is set to true, the

view gets its drawable state (focused,

pressed, etc.) from its direct parent rather

117

android:fadingEdge

android:fadingEdgeLength

android:filterTouchesWhenObscured

android:fitsSystemWindows

a

ndroid:focusable

android:focusableInTouchMode

android:hapticFeedbackEnabled

android:id

android:isScrollContainer

than from itself.

Defines which edges should be fadeded

on scrolling.

Defines the length of the fading edges.

Specifies whether to filter touches when

the view's window is obscured by

another visible window.

Boolean internal attribute to adjust view

layout based on system windows such as

the status bar.

Boolean that controls whether a view can

take focus.

Boolean that controls whether a view can

take focus while in touch mode.

Boolean that controls whether a view

should have haptic feedback enabled for

events such as long presses.

Supply an identifier name for this view,

to later retrieve it with

View.findViewById() or

Activity.findViewById().

Set this if the view will serve as a

scrolling container, meaing that it can be

118

android:keepScreenOn

android:layerType

android:longClickable

android:minHeight

android:mintWidth

android:nextFocusDown

android:nextFocusForward

resized to shrink its overall window so

that there will be space for an input

method.

Controls whether the view's window

should keep the screen on while visible.

Specifies the type of layer backing this

view.

Defines whether this view reacts to long

click events.

Defines the minimum height of the

view.

Defines the minimum width of the view.

Defines the next view to give focus to

when the next focus is FOCUS_DOWN

If the reference refers to a view that does

not exist or is part of a hierarchy that is

invisible, a RuntimeException will result

when the reference is accessed.


when the next focus is FOCUS_DOWN




119

android:nextFocusLeft

android:nextFocusRight

android:nextFocusUp


android:nextFocusForward

setNextFocusForwardId(int) Defines the

next view to give focus to when the next

focus is FOCUS_FORWARD If the

reference refers to a view that does not

exist or is part of a hierarchy that is




when the next focus is FOCUS_LEFT.


when the next focus is FOCUS_RIGHT






when the next focus is FOCUS_UP If the

reference refers to a view that does not

exist or is part of a hierarchy that is



120

android:onClick

android:padding

android:paddingBottom

android:paddingLeft

android:paddingRight

android:paddingTop

android:rotation

android:rotationX

android:rotationY

android:saveEnabled

android:scaleX

android:scaleY

android:scrollX

Name of the method in this View's

context to invoke when the view is

clicked.

Sets the padding, in pixels, of all four

edges.

Sets the padding, in pixels, of the bottom

edge; see padding.

Sets the padding, in pixels, of the left

edge; see padding.

Sets the padding, in pixels, of the right

edge; see padding.

Sets the padding, in pixels, of the top

edge; see padding.

Rotation of the view, in degrees.

Rotation of the view around the x axis, in

degrees.

Rotation of the view around the y axis, in

degrees.

If unset, no state will be saved for this

view when it is being frozen.

Scale of the view in the x direction.

Scale of the view in the y direction.

The initial horizontal scroll offset, in

121

android:scrollY

android:scrollbarAlwaysDrawHorizon

talTrack

android:scrollbarAlwaysDrawVertical

Track

android:scrollbarDefaultDelayBeforeF

ade

android:scrollbarFadeDuration

android:scrollbarSize

android:scrollbarStyle

android:scrollbarThumbHorizontal

android:scrollbarThumbVertical

android:scrollbarTrackHorizontal

android:scrollbarTrackVertical

android:scrollbars

pixels.

The initial vertical scroll offset, in

pixels.

Defines whether the horizontal scrollbar

track should always be drawn.

Defines whether the vertical scrollbar

track should always be drawn.

Defines the delay in milliseconds that a

scrollbar waits before fade out.

Defines the delay in milliseconds that a

scrollbar takes to fade out.

Sets the width of vertical scrollbars and

height of horizontal scrollbars.

Controls the scrollbar style and position.

Defines the horizontal scrollbar thumb

drawable.

Defines the vertical scrollbar thumb

drawable.

Defines the horizontal scrollbar track

drawable.

Defines the vertical scrollbar track

drawable.

Defines which scrollbars should be

122

android:soundEffectEnabled

android:tag

android:transformationPivotX

android:transformationPivotY

android:translationX

android:translationY

android:visibility

displayed on scrolling or not.

Boolean that controls whether a view

should have sound effects enabled for

events such as clicking and touching.

Supply a tag for this view containing a

String, to be retrieved later with

View.getTag() or searched for with

View.findViewWithTag().

X location of the pivot point around

which the view will rotate and scale.

Y location of the pivot point around

which the view will rotate and scale.

Translation in x of the view.

Translation in y of the view.

Controls the initial visibility of the view.

No 13

Attribute Name android.view.ViewGroup


android:addStatesFromChildren

android:alwaysDrawnWithCache

Sets whether this ViewGroup's drawable

states also include its children's drawable

states.

Defines whether the ViewGroup should

123

android:animatedLayoutChanges

android:animationCache

android:clipChildren

android:clipToPadding

android:descendantFocusability

android:layoutAnimation

android:persistentDrawingCache

always draw its children using their

drawing cache or not.

Defines whether changes in layout

(caused by adding and removing items)

should cause a LayoutTransition to run.

Defines whether layout animations

should create a drawing cache for their

children.

Defines whether a child is limited to

draw inside of its bounds or not.

Defines whether the ViewGroup will clip

its drawing surface so as to exclude the

padding area.

Defines the relationship between the

ViewGroup and its descendants when

looking for a View to take focus.

Defines the layout animation to use the

first time the ViewGroup is laid out.

Defines the persistence of the drawing

cache.

Install Plugin GUI Designer Android pada Eclipse

Download dan install Android SDK dan Emulator

124

Download Android SDK di http://developer.android.com/sdk/index.html

kemudian simpan di komputer anda, setelah selesai download silahkan

extract ke drive C:\ (recommended). Hasil extract tadi menjadi C:\

android-sdk-windows agar lebih mudah mengakses nya.

Install the ADT Plugin untuk Eclipse

Buka Eclipse, klik Help > Install New Software.

- Pada dialog Available Software yang terbuka klik Add…

- Pada dialog Add Site yang muncul, masukan nama remote site (contoh:

Android Plugin) pada Name field. Pada Location field, masukkan URL

125

berikut: https://dl-ssl.google.com/android/eclipse/. Klik OK dan tunggu

sampai “pending” selesai.

Jika anda mengalami masalah saat mengunduh plugin pada langkah nomor

3, coba ganti https dengan http. Jika muncul warning pada langkah 5, klik

bahwa kita mempercayai paket yang diunduh.

- Kembali ke Available Software view, seharusnya kita bisa melihat

“Developer Tools” tertambah pada daftar. Centang checkbox pada

Developer Tools yang secara otomatis mencentang pula Android DDMS

dan Android Development Tools. Klik Next dan tunggu sebentar.

126

- Pada dialog Install Detail yang muncul, Android DDMS and Android

Development Tools features seharusnya terdaftar. Klik I accept … untuk

menyetujui perjanjian lisensi kemudian klik Finish. Tunggu sampai proses

fetching selesai. Klik Finish

- Mulai ulang (restart) Eclipse.

Setelah merestart eclipse selanjutnya kita harus menkonfigure ADT agar

di kenali oleh eclipse dengan mengarahkannya ke direktory android yang

telah kita download di langkah yang pertama, caranya klik menu windows

di eclipse, kemudian pilih preference. Klik tulisan android di sebelah kiri

kemudian pada SDK Location di jendela seblah kanan klik Browse dan

arahkan ke direktori tempat kita menyimpan SDK android yaitu di C:\

android-sdk-windows. Klik Apply – OK

127

128

DAFTAR ISI

Daftar Isi...................................................................................................................i

Daftar Gambar........................................................................................................iii

Daftar Table............................................................................................................iv

BAB I PENDAHULUAN....................................................................................1

1.1 Latar Belakang..........................................................................................1

1.2 Rumusan Masalah.....................................................................................4

1.3 Batasan Masalah.......................................................................................4

1.4 Tujuan.......................................................................................................5

1.5 Ruang Lingkup..........................................................................................6

1.6 Metodologi................................................................................................6

1.7 Sistematika Laporan..................................................................................8

BAB II LANDASAN TEORI................................................................................10

2.1 Android...................................................................................................10

1. Android GUI Component..................................................................10

2.2 Plugin......................................................................................................12

1. Mekanisme Kerja Plugin...................................................................14

2. Plugin pada Netbeans IDE................................................................15

2.3 XML........................................................................................................17

BAB III ANALISIS...............................................................................................19

3.1 Analisis Visual Designer pada NetBeans................................................19

3.2 Analisis Plugin Pada NetBeans IDE.......................................................21

3.3 Analisis Android.....................................................................................22

1. Analisis GUI Android.......................................................................23

129i

2. Widget Component...........................................................................24

3. Layout Component............................................................................38

4. Attribute dan XML Code..................................................................46

3.4 Analisis Plugin GUI Designer Android pada Eclipse dan DroidDraw...49

3.5 Analisis Pengguna Plugin GUI Designer Android.................................52

3.6 Analisis Pengembangan Plugin GUI Designer Android.........................52

3.7 Analisis Hardware...................................................................................53

3.8 Analisis Kedudukan Plugin.....................................................................53

BAB IV PERANCANGAN...................................................................................55

4.1 Use Case..................................................................................................55

1. General Design..................................................................................55

2. Use Case Diagram.............................................................................61

Daftar Pustaka........................................................................................................64

Lampiran................................................................................................................65

130ii

DAFTAR GAMBAR

Gambar 2.1 Hirarki user interface Android...........................................................11

Gambar 2.2 Plugin yang terdapat pada Netbeans IDE 6.9.1..................................13

Gambar 2.3 Mekanisme kerja plugin.....................................................................14

Gambar 3.1 Interaction widget...............................................................................24

Gambar 3.2 Contoh penggunaan widget................................................................25

Gambar 3.3 Cara kerja information widget...........................................................29

Gambar 3.4 Contoh information widget................................................................30

Gambar 3.5 Cara kerja Editable Widget................................................................33

Gambar 3.6 Contoh Editable Widget.....................................................................34

Gambar 3.7 Kinerja Container Layout...................................................................39

Gambar 3.8 Contoh Container Layout...................................................................40

Gambar 3.9 Cara Kerja ScrollLayout....................................................................43

Gambar 3.10 Contoh penggunaan Scroll Layout...................................................44

Gambar 3.11 Contoh attribute widget android.......................................................47

Gambar 3.12 Attribute background pada widget AnalogClock.............................49

Gambar 3.13 Widget android pada Eclipse...........................................................50

Gambar 3.14 Widget android pada DroidDraw.....................................................50

Gambar 3.15 Properties widget android pada Eclipse...........................................51

Gambar 3.16 Properties widget android pada DroidDraw.....................................51

Gambar 4.1 Use Case diagram plugin GUI Designer............................................61

131iii

DAFTAR TABLE

Table 3.1 Komponen pallete netbeans...................................................................20

Table 3.2 Manifest file...........................................................................................22

Table 3.3 Widget Button........................................................................................26

Table 3.4 Widget DatePicker.................................................................................27

Table 3.5 Widget ImageButton..............................................................................28

Table 3.6 Widget Spinner......................................................................................28

Table 3.7 Widget AnalogClock.............................................................................31

Table 3.8 Widget DigitalClock..............................................................................32

Table 3.10 Widget AutoCompleteTextView.........................................................35

Table 3.11 Widget CheckedTextView...................................................................36

Table 3.12 Widget EditText...................................................................................37

Table 3.13 Widget MultiAutoCompleteTextView................................................38

Table 3.14 Layout AbsoluteLayout.......................................................................41

Table 3.15 Layout FrameLayout............................................................................41

Table 3.16 Layout LinearLayout...........................................................................42

Table 3.17 Layout RelativeLayout.........................................................................42

Table 3.18 Layout ExpendableListView...............................................................45

Table 3.19 Layout GridView.................................................................................46

Table 3.21 Layout Scrollview................................................................................46

Table 4.1 General design.......................................................................................55

Table 4.2 Use case Drag and Drop View...............................................................56

Table 4.3 Use case View XML..............................................................................57

Table 4.4 Choose Widget.......................................................................................58132iv

Table 4.5 Choose Layout.......................................................................................58

Table 4.6 Edit Widget............................................................................................59

Table 4.7 Edit Layout.............................................................................................59

Table 4.8 Edit Layout.............................................................................................60

133v

Documents

Laporan-TA-2.doc