Tuesday, June 15, 2010

SERi 2 : a simPle samPle oF VisuaL midLET - PART 4

PART 4 : melengkapi kode

Merupakan bagian terakhir adalah melengkapi kode untuk menyempurnakan midlet.
di bagian ini hal yang perlu ditambahkan adalah
a) membaca data yang diinputkan ke dalam textfield
b) membaca pilihan dari list
c) menampilkan nama dan sapaan yang sesuai dengan gender pada alert

untuk kepentingan tersebut gunakan source view :

3 poin di atas terjadi sesuai dengan eventnya masing - masing.semua event tersebut terjadi pada saat tombol tertentu ditekan.
gunakan navigator dan pilih method(lambangnya lingkaran merah) commandAction,

dan otomatis kode program untuk mengatur event akan muncul.


kira2 akan terlihat seperti di atas.
untuk poin a, tambahkan dulu variabel nama untuk menyimpan nama yang diinput. tempatnya saat event untuk cmdSubmit, seperti di gambar berikut:

untuk memperoleh data dari textfield digunakan method getString().
data kemudian disimpan ke variabel nama.

setelah alert ditampilkan akan ditentukan kalimat yang tampil berdasarkan
gender yang dipilih. untuk mengetahui gender yang dipilih index pada list perlu dibaca
dengan method getSelectedIndex() dan tulisan pada alert dapat diatur/dirubah dengan method setString().

jika laki - laki/ male(yang berarti index yang terpilih adalah satu)
tampilkan "Selamat datang MR. BLa - bLa - bLa (sesuai input nama)" pada alert

kemungkinan lain saat yang dipilih gender wanita/ female tampilkan "Selamat datang MRs. BLa - bLa - bLa (sesuai input nama)" pada alert


Kode sudah ditambahkan dan run kembali midletnya, kurang lebih berikut hasilnya :

SERi 2 : a simPle samPle oF VisuaL midLET - PART 3

PART 3: membuaT FLOW(ALUR) MIDlet di flow view

dengan adanya tombol di tampilan maka alur dan arah perpindahan tampilan dapat dibuat. Pembuatan alur dilakukan dengan memilih tombol dan mengarahkan ke tampilan tujuan. Setelah tampilan dilengkapi dengan komponen2, berikut hasil yang terlihat pada flow view :



pertama ketika pertama aplikasi dijalankan yang tampil adalah form. maka hubungkan started pada mobile device ke form.

Dan agar dapat kembali ke menu aplikasi saat tombol exit pada form ditekan maka hubungkan tombol exit dengan mobile device.


tombol next pada form akan menuju ke list dibuat dengan memilih tombol next dan mengarahkannya ke list.

untuk kembali dari list menuju ke form pilih tombol back arahkan ke form.

lengkapi alur dari list menuju ke alert saat tombol submit ditekan dan alur dari alert menuju form saat tombol ok ditekan.
kurang lebih hasilnya akan terlihat sebagi berikut :


setelah membuat alur jalannya midlet selanjutnya midlet di-run untuk memastikan alur yang berjalan sudah sesuai dengan alur yang direncanakan.

Alur perpindahan midlet sudah berhasil dibuat selanjutnya di PART 4 dijelaskan melengkapi kode program

Sunday, June 13, 2010

SERi 2 : a simPle samPle oF VisuaL midLET - PART 2


di PART 2, tamPiLan 2 di MidLET bakaL diLenGKAPi denGan komPonen2.


komponen2 untuk tampilan sudah siap, Mari Isi degan komponen2 pelengkap dengan berpindah ke Screen view.

1) mulai dari form, aktifkan form yang akan diisi dengan memilih combo box di samping analyzer

form aktif lalu tambahkan komponen textfield (sebagai kotak isian nama),
tombol Ok dan exit. selain dengan drag komponen dari pallete, untuk menambahkan komponen bisa langsung dengan klik kanan pada tampilan yang aktif seperti berikut:


aktifkan tab properties untuk mengganti label yang akan tampil.

pilih dulu komponen yang akan dirubah lalu pada bagian label ganti sehingga tampil seperti gambar berikut :

ganti label pada textfield dengan "Your name :".

2) Rubah nama komponen dengan rename. komponen textfield dan tombol ok akan diakses saat coding, dan nama baru akan memudahkan untuk mengakses komponen tersebut. merubah nama komponen degan pilih komponen

klik kanan dan pilih rename, muncul kotak isian dan isikan nama baru untuk komponen.
rubah nama textfield menjadi txtNama
dan tombol ok menjadi cmdNext


perubahan nama komponen dapat dilihat melalui navigator.


3) Dengan step yang ada pi poin 2, langkah2 berikut dapat dilaksanakan.

pindah ke tampilan list tambahkan komponen 2 ListElement dan 2 tombol(tombol back dan tombol ok)

rubah judul list(title pada properties) menjadi OPsi gender:
ganti label listElement1 menjadi Male
ganti label listElement2 menjadi Female
ganti label tombol ok menjadi submit
rubah nama tombol ok menjadi cmdSubmit.


Lalu pindah ke tampilan alert,

tambahkan komponen tombol ok dan
rubah nama tombol ok menjadi cmdOk


cek navigator untuk memastikan perubahan komponen.



PART 2 selesai dan setiap tampilan telah dilengkapi dengan komponen2nya masing2 selanjutnya di PART 3 akan diperlihatkan cara membuat alur midlet pada flow view

SERi 2 : a simPle samPle oF VisuaL midLET - PART 1

SERI 2 - Sample visual midlet Yang simpel plus basic steps yg penting
mengupas pembuatan midlet dengan visual beserta steps basic nan mudah namun penting.

Seperti yang sudah dikemukakan di seri 1, visual midlet is more design,
more drag - drop n lesser coding
. Pake visual midlet beban mikirin wujud tampilan midlet bisa dikurangi, tinggal pikir desain alur midletnya saja.

di Seri kedua ini akan dibuat contoh midlet yang simple n steps yang simpel namun penting. So Let's mulai bikin midletnya :

1) Skenario untuk alur midlet:

Alkisah midlet yang dibuat akan dimulai dari sebuah form isian untuk mengisi nama, kemudian saat tombol next ditekan, akan ada pilihan jenis kelamin. kemudian pilihan disubmit lalu sapaan serta nama yang diisikan akan ditampilkan melalui alert.


2) Komponen2 dari skenario di atas :

saat aplikasi mulai dijalankan ada form dengan textfield, tombol next(untuk melanjutkan ke pilihan gender) serta tombol exit (untuk keluat dari midlet)
lalu tampilan untuk memilih gender yang berupa list dengan tombol submit(untuk lanjut ke alert) dan back(kembali ke pengisian nama)
dan yang terkhir alert yang menampilkan nama serta sapaan degan tombol ok (kembali ke tampilan pengisian nama)

3) Design sudah didapatkan n komponen2 sudah ditemukan, Lanjutkan ke pembuatan.
buat project baru, klik kanan di source package, pilih visualMidlet,


isi dengan Nama SampleVisMIDlet klik finish.
akan muncul tampilan visual midlet default dengan flow view yang aktif

4) menuju ke Pallete di sisi kanan layar di bagian Displayables
Drag komponen list, alert dan form untuk tampilan lalu drop ke flow view berikut hasilnya :


BeRsambunG ke PART 2 : meLenGKAPi KomPonen.

Visual MidLeT : easieR waY 2 bikin MIDlet

NGiRiT waktu n Tenaga dengan Visual Midlet (Seri 1)
[Tulisan ini based on NETBEANS IDE 6.8 n Java(TM) Platform Micro Edition SDK 3.0]

Alkisah :

salah satu fitur yang ada di netbeans adalah visual midlet.visual midlet merupakan tampilan untuk menghasilkan kode program yang dipakai untuk membuat midlet(aplikasi yang bisa dipake di hape).


Yang namanya visual, nilai plusnya adalah more drag-drop, more design and lesser coding. And I Think bisa jadi alternatif yang Sangat baik buat sodara2 yg alergi coding but pengen bikin midlet(apalagi buat project wajib kuliah :D).

SERi 1 : Interfaces - antarmuka yang keliatan pas pake visual midlet

mengakrabi tampilan bakal sangat membantu penggunaan visual midlet. ada 4 buah view di visual midlet : source, screen, flow, analyzer

source : ini buat melihat kode yang dihasilkan oleh visual midlet,

Ga beda dengan kode program yang bisa dipake buat bikin aplikasi J2ME, cuma yang ini lebih terstruktur.

screen : merupakan preview dari tampilan yang kita buat
(misalkan form, alert, list, dll) n bisa dilihat juga detail komponen2nya(tombol2 yang ada di tampilan, n komponen2 laen seperti textfield, stringitem).

menambahkan komponen bisa lebih mudah melalui screen view(bisa diliat di seri 2: simple basic steps Later)

flow : tampilan untuk mengatur aliran midlet yang dibuat. pada flow view dapat ditentukan jalannya midlet mulai dari start n arah perpindahan tampilan midlet saat tombol ditekan. defaultnya seperti
gambar di bawah :


tampilan tersebut merupakan tampilan awal yang menunjukkan kondisi di hape saat start and paused.

analyzer : tampilan untuk memeriksa midlet yang dibuat, komponen yang ga kepake alias mubadzir bisa ketahuan lewat analyzer view.

itulah 4 view yang bisa dipake di visual midlet, so ada lagi tampilan di sisi kanan berupa pallete n properties.

pallete berisi komponen2 yang bisa dipakai untuk membuat midlet.
sedangkan properties bisa dipake untuk mengutak - atik komponen yang ada di midlet.

berikutnya Let's berkenalan dengan tab navigator.
barang ini biasanya terletak di sisi kiri bawah,bisa juga diaktifkan lewat menu window pilih menu navigating.

di flow n screen view, navigator dipakai untuk memeriksa komponen yang dibuat.

dari navigator jelas terlihat nama komponen dan tipe komponen di midlet.

sedangkan pas source view, navigator bakal sangat berguna buat meneliti dan menjelajahi kode program yang dihasilkan oleh visual midlet.

So demikian seri perdana visual midlet. dengan tulisan ini Penulis berHaRAP pembaca sekalian yang budiman dapat berkenalan dengan baik dengan tampilan di visual midlet sehingga kemudian hari dapat bekerja dengan intim bin mesra dengan tampilan2 tersebut.


SUMMARY :

1) Visual midlet bisa dipake untuk membuat midlet dengan lebih,
cukup mendesain dan kode program bakal dihasilkan

2) Antarmuka(interface) di visual midlet ada 4 view (tampilan) :
source : bagian 'kode program'nya midlet
screen : preview tiap tampilan yang dibuat beserta komponen2nya
flow : alur jalannya midlet n arah perpindahan tampilan pada midlet
analyzer : bagian untuk meneliti komponen mubadzir pada midlet yang dibuat

3) selain 4 view tersebut ada juga navigator, pallete n properties untuk memudahkan kerja membuat midlet.


selanjutnya SERI 2
mengupas pembuatan midlet dengan visual beserta steps basic nan mudah namun penting.

Thursday, December 24, 2009

SummaRY oF OOP(obJect oriented PROGRaminG)

Ringkasan Pemrograman Berorientasi Object(PBO) :
----------------------------------------------------------------------------
class yang telah dibuat dapat digunakan kembali sebagai object - object.
class dalam program mewakili obyek yang ada di dunia nyata.

misalkan Siswa, setiap siswa pasti memiliki nama, kelas dan nilai.
dan siswa dapat melakukan suatu hal, misalkan memperkenalkan diri.
hal - hal yang dimiliki siswa dalam program disebut attribut/ field,
sedang hal - hal yang dapat dilakukan siswa disebut method/fungsi.


class Siswa {

//attribut class:
String nama;
int kelas;
int nilai;

//method class
void perkenalan(){

System.out.println("Hi, my name is:"+this.nama);
System.out.println("from class: "+this.kelas);

}

}



--------------------------------------------------------------------------
istilah - istilah yang sering ditemui:

attribut
merupakan variabel-variabel dalam class

method
merupakan fungsi-fungsi dalam class. selalu disertai
sepasang tanda kurung() di akhir namanya

constructor
fungsi/method yang digunakan untuk membentuk object dari class yang telah ada.
constructor memiliki nama yang sama persis dengan nama class

getter dan setter
getter adalah fungsi untuk mengetahui nilai/data dalam attribut class.
kata get biasa dipakai untuk menandai getter, sedangkan untuk setter
memakai kata set

---------------------------------------------------------------------------
contoh :
class siswa dibuat dengan attribut nama, kelas, dan nilai
dan method getNama, getKelas, getNilai, setNilai, setNama dan setKelas
Class tersebut dapat dibuat dengan Kode berikut:
----------------------------------------------------------------------------

class Siswa {

//attribut class:
String nama;
int kelas;
int nilai;


//constructor Default
public Siswa(){

this.nama = "Jamie";
this.kelas = 1;
this.nilai = 0;
}

//Constructor kedua
//Untuk mengisi attribut class dengan nilai baru
public Siswa(String nm, int kls, int nil){

this.nama = nm;
this.kelas = kls;
this.nilai = nil;
}

void perkenalan(){

System.out.println("Hi, my name is:"+this.nama);
System.out.println("from class: "+this.kelas);

}


//getter untuk mengetahui nilai pada attribut class
String getNama(){

return this.nama;
}

int getKelas(){

return this.kelas;
}

int getNilai(){

return this.nilai;
}

//setter untuk merubah nilai pada attribut class
void setNaMa(String nm){

this.nama=nm;
}

void setKeLas(int kls){

this.kelas=kls;
}

void setNilai(int nil){

this.nilai=nil;
}


}

-------------------------------------------------------------------------

Penggunaan class siswa :
dari class siswa dibuat tiga siswa
dengan data sebagai berikut:

nama kelas nilai
Dante 2 90
Mario 9 50
Rosie 12 70

kode programnya ada di class cobaSiswa
------------------------------------------------------------------------

class cobaSiswa{

public static void main(String[] args){

//data pada attribut class diisi dengan constructor kedua
Siswa dante = new Siswa("Dante", 2, 90);
Siswa mario = new Siswa("Mario", 9, 50);

//dengan constructor default
Siswa rosie = new Siswa();

//Menampilkan data di setiap object
System.out.println("Data Siswa :");

System.out.println("Siswa pertama:");
System.out.println("Nama: "+dante.getNama()+" ,kelas: "+dante.getKelas());

System.out.println("Siswa kedua:");
System.out.println("Nama: "+mario.getNama()+" ,kelas: "+mario.getKelas());

System.out.println("Siswa ketiga:");
System.out.println("Nama: "+rosie.getNama()+" ,kelas: "+rosie.getKelas());

}
}

----------------------------------------------------------------------------

compile dan eksekusi dengan JCreator versi terbaru dan Hasilnya akan tampak seperti berikut:


Tapi, kenapa object rosie malah bernama Jamie???

Tuesday, November 24, 2009

How to make an input to program

Bagian ketiga dalam Bahasa Pemrograman.
sesudah menampilkan kalimat ke monitor
serta menggunakan variabel untuk menyimpan data.
sekarang waktunya level up, sedikit berjalan menanjak dengan
proses input.

Ya benar, Input alias menerima masukan.
sehingga ada data dari luar yang bisa masuk dan diolah ke program.
proses input sangatlah mudah dengan bahasa pemrograman java,
cukup gunakan fitur yang disediakan java, yaitu JOptionPane.
JOptionPane akan menyiapkan tampilan untuk input datanya. Kode programnya ringkas,
selain itu JOptionPane juga menyediakan tampilan yang cerah berwarna.

well, mari bereksperimen
dengan JOptionPane untuk mencatat nama user.

selanjutnya nama tersebut akan digunakan untuk menyapa usernya.

dengan kemampuan JOptionPane untuk menampilkan dialog input,
meminta user mengisikan namanya. berikut perintahnya:

JOptionPane.showInputDialog(null,"Your name?");

dalam perintah tersebut JOptionPane dipanggil
dan .showInputDialog berarti kemampuan (fungsi) JOptionPane
digunakan untuk menampilkan dialog input.
sedangkan Pertanyaan yang ditampilakan adalah kalimat "Your name?".

Perlu dicatat bahwa setiap data yang diinput bertipe String.
sehingga data dari dialog input perlu disimpan ke variabel bertipe String,
sebut saja nama.

String nama;

well, lalu isi variabel nama dari input melalui dialog input,
berikut perintahnya:

String nama = JOptionPane.showInputDialog("Your name?");

Hmm, variabel sudah dibuat dan proses input sudah dilakukan.
yang belum dilakukan adalah membuat class dengan fungsi utama
dan perintah menampilkan kalimat untuk menyapa.

Buat class ExperimenInput, dan fungsi utama:

Isi fungsi utama dengan perintah untuk melakukan proses input

dan yang terakhir kita panggil lagi JOptionPane untuk
menampilkan kalimat sapaan ke user.

JOptionPane.showMessageDialog(null,"Hi "+nama+",Nice to meet You");

kemampuan(fungsi) .showMessageDialog berguan untuk menampilkan
kotak pesan yang berisi kalimat "Hi ... ,Nice to meet You :)".
data pada variabel nama akan melengkapi nama usernya.

Satu lagi bagian yang terpenting,
JOptionPane perlu di-import dahulu sebelum digunakan.
jadi tambahakan perintah importnya di bagian awal kode program.

So Simpan classnya, compile dan eksekusi untuk meLihat hasilnya.
Mudah saja kan, melakukan proses input dengan JOptionPane???

About Me

ORanG YAnG doYan ReadinG n BeTah PARkiR di GRamed Lama2, LiV TYLeR aLso NaTaLie PoRTman LoveR YanG GemaR maen PES. maSiH KUL n Do'ain Me biAR LEkaS KeLAR kUL n LEkas Jadi PenGusaha biaR biSA buka LaPanGan keRJa seLuas-LuasnYA di Indo,

Followers