EVENT DAN PROPERTY PADA VISUAL BASIC

Membuat User Interface

Pemrograman Visual Basic adalah suatu pemrograman visual, dimana pembuatan program dilakukan menggunakan media visual atau sering disebut dengan user-interface. Yang artinya bahwa pembuatan program berdasarkan tampilan yang dihasilkan program, dengan kode-kode program (Script) diletakkan masing-masing komponen.

Contoh 1:

Buat project baru dengan StandartEXE untuk membuat User Interface sederhana dengan melibatkan komponen Label, Textbox dan CommandButton yang ada di Toolbox pada sebelah kiri dari antar muka Visual Basic seperti gambar dibawah ini :

Gambar Komponen yang digunakan

Gunakan komponen-komponen seperti pada gambar diatas untuk membuat form pada gambar berikut:

Gambar Form

Untuk mengatur letaknya tinggal menggunakan “drag & drop” dengan mouse. Program ini belum selesai karena masih perlu pengaturan property dan penambahan event pada masing-masing komponen untuk dapat memberikan tampilan yang dapat diterima oleh user dan dapat menjalankan proses.

Mengatur Property

Property pada tampilan antar muka Visual Basic terletak di sebelah kanan, seperti gambar  berikut:

Gambar Tampilan property

Contoh 2:

Pada contoh 1 di atas, komponen-komponen yang sudah digunakan adalah Label1, Label 2, Text1, Command1 dan Command2. Atur property masing-masing komponen tersebut sebagai berikut, sehingga menghasilkan tampilan seperti gambar dibawah ini

Pengaturan property contoh 2

Hasil form setelah propertynya di atur adalah:

Hasil tampilan form contoh 2

Masing-masing komponen mempunyai property yang berbeda dan jumlahnya banyak, tetapi ada beberapa property yang sering digunakan pada setiap komponen, antara lain [Caption]. Property yang sering digunakan untuk Form antara lain:

· Name: menyatakan nama obyek form yang sangat berguna untuk memanggil dan menyimpan form.

· Caption: digunakan untuk memberikan title pada form.

· StartUpPosition: digunakan untuk meletakkan form ketika form tersebut dipanggil atau aktif. Ada empat pilihan yaitu: Manual, CenterOwner, CenterScreen, Windows Default,

Event Dengan Kode Program

Pemrograman visual bersifat event-driver, yang artinya program bekerja berdasarkan event yang terjadi ketika suatu object diberikan aksi misalkan tombol ditekan, option dipilih, atau setelah mengetikkan sesuatu pada text kemudian di tekan

[Enter]. Untuk membuat event ini tinggal click pada komponen dari tampilan user interface yang sudah dibuat.

Contoh 3:

Pada tampilan contoh 2, click pada form (bagian kosong yang tidak digunakan komponen-komponen lainnya), maka akan muncul tampilan seperti gambar berikut :

Tampilan untuk kode program

Perhatikan gambar 2.5, ketika form di-click maka akan muncul event Load, ini disebabkan event default untuk form adalah load. Dan secara otomatis di bagian kode program sudah disediakan fungsi untuk event load pada form yang tertulis:

Private Sub Form_Load()

End Sub

Di dalam fungsi ini dituliskan kode program. Kode program ini dijalankan ketika form dipanggil. Event ini bisa diganti di bagian [Event], perhatikan bahwa event pada setiap komponen termasuk form jumlahnya banyak, tinggal dipilih sesuai kebutuhan aplikasi.

Contoh 4:

Pada tampilan contoh 2, click pada command1, sehingga muncul event pada bagian kode program sebagai berikut:

Private Sub Command1_Click() End Sub

End Sub

Tambahkan program pada kode program ini sehingga menjadi: Private Sub Command1_Click() Label2.Caption = Text1.Text

End Sub

Program ini berarti bahwa apa yang diketikkan pada text1 akan ditampilkan pada label2.

Kemudian click pada command2, dan tambahkan kode program sehingga menjadi:

Private Sub Command2_Click() End

End Sub

Perintah End, berarti program keluar dan selesai.

Simpan form dan project ini dengan cara pilih menu [File] >> [Save Project], beri nama form dengan formLatihan21 dan nama project dengan projectLatihan21.

Jalankan dengan menekan ikon Run ( ) pada toolbar. Masukkan nama misalnya

“Muchammad Ali Nur Secha” pada text1, dan tekan tombol Ok. Hasilnya adalah seperti gambar berikut :

Membuat Project Mengatur Property

Contoh 5:

Buat project baru dengan StandardEXE untuk mencoba bermain dengan property dan event lebih jauh lagi. Tambahkan komponen-komponen Label, Text, Frame, OptionButton, CheckBox dan Command. Atur tampilannya seperti gambar berikut :

Contoh tampilan awal latihan

Bila menggunakan tampilan di dalam frame, maka frame harus dibuat terlebih dahulu baru komponen-komponen di dalamnya. Atur property setiap komponen seperti tabel berikut:

Tabel Pengaturan property latihan

Dari pengaturan ini akan dihasilkan tampilan program aplikasi seperti pada gambar dibawah ini

Tampilan untuk latihan

Click pada command1, tambahkan kode program sehingga menjadi: Private Sub Command1_Click() Label2.Caption = Text1.Text

End Sub

Click pada command2, tambahkan kode program sehingga menjadi:

Private Sub Command2_Click() End

End Sub

Click pada Option1, tambahkan kode program sehingga menjadi:

Private Sub Option1_Click() Label2.ForeColor = vbRed

End Sub

Label2.ForeColor adalah properti untuk mengganti warna teks pada label2, dan vbRed adalah warna merah yang sudah disediakan oleh Visual Basic, untuk warna yang lain seperti biru menggunakan vbBlue.

Click pada Option2, tambahkan kode program sehingga menjadi:

Private Sub Option2_Click() Label2.ForeColor = vbBlue End Sub

Click pada check1, tambahkan kode program sehingga menjadi: Private Sub Check1_Click() Label2.FontItalic = Check1.Value

End Sub

Click pada check2, tambahkan kode program sehingga menjadi:

Private Sub Check2_Click() Label2.FontBold = Check2.Value End Sub

Label2.FontItalic adalah property untuk mengatur apakah teks pada label2 dibuat

miring atau tidak, bila nilainya True maka teks menjadi miring. Label2.FontBold adalah property untuk mengatur apakah teks pada label2 dibuat tebal atau tidak, bila nilainya True maka teks menjadi tebal.

Simpan project dengan nama projectLatihan22. Dan jalankan program, masukkan nama Muchammad Ali Nur Secha, atur teksnya menjadi merah dan miring seperti gambar dibawah ini

Contoh 6:

Buat project baru dengan StandardEXE untuk membuat aplikasi yang menggunakan event dan property untuk bermain dengan command button. Tambahkan komponen-komponen Command Button. Atur tampilannya seperti gambar  berikut:

Program ini bertujuan bila ditekan OPEN maka tombol OPEN tidak kelihatan, dan tinggal tombol CLOSE. Bila ditekan CLOSE maka tombol CLOSE tidak kelihatan dan tinggal tombol OPEN.

Click pada command1, tambahkan program untuk event click sebagai berikut:

Private Sub Command1_Click() Command1.Visible = False Command2.Visible = True

End Sub

Click pada command1, tambahkan program untuk event click sebagai berikut:

Private Sub Command2_Click() Command2.Visible = False Command1.Visible = True

End Sub

Simpan form dalam formLatihan24, dan simpan project dalam projectLatihan24.

. Latihan

(1) Buat program untuk memilih menu makanan dan minuman menggunakan

OptionButton dan Label tampilan seperti gambar berikut.

Soal latihan 1

(2) Buat program untuk menampilkan judul VCD sesuai dengan jenis VCD yang dipilih menggunakan Option Button dan ListBox seperti gambar 2.11 berikut. Gunakan property Clear pada listbox untuk membersihkan tampilan sebleunya pada listbox, dan property AddItem pada listbox untuk menambahkan teks pada listbox.

Soal latihan 2

(3) Buat program untuk mengganti warna latar belakang form menggunakan Frame dan optionButton seperti gambar berikut. Gunakan event change pada combobox, dan property backcolor pada form.

Soal Latihan 3

(4) Buat program untuk Mengatur alignment teks menggunakan OptionButton dan label seperti gambar berikut. Gunakan property alignmet pada label untuk mengatur alignment.

Soal Latihan 4

Selamat Belajar

Baca Selengkapnya....

The Cute Girl

step 1

This is the result we are aiming for.
The best portrait photo is one with a frontal view, so it won't be too hard to change the features. It's easier if you can do it symmetrical.

step 2

Make a background in soft colors. It can be just one color, but here I used blue and purple with the gradient tool and lightened the middle with a big brush on low opacity.

step 3

Remove the background from the portrait and paste the girl on the new background.

step 4

Desaturate the girl.
layer>new adjustment layer>hue/saturation > -60

step 5

Select an eye, nose or mouth with the rectangular marquee tool. Copy/paste.
Then make the eyes bigger and the nose and mouth smaller
edit>transform>scale

step 6

Blend the features with a soft eraser brush and a soft paint brush on low opacity. Remove most of the eyebrows with a paint brush.

step 7

layer>flatten image
Make the iris a bit bigger and rounder with a paint brush tool. Add a pupil and some white spots with a hard brush on 100% opacity.
Paint fine eyebrows.

step 8

Make the colors a bit brighter, using red and yellow.
layer>new adjustment layer>color
Copy the lips, paste them and give that layer a bit of red.
Copy the upper part of the head, paste it, and lower it a bit with the move tool.

step 9

layer>flatten image
Copy the layer of the girl, make it smaller
edit>transform>scale
Erase everything exept the jaw and chin.
edit>transform>distort
to make the layer broader on top.

step 10

Blend both layers with the eraser tool and the brush tool.
Soften the eyebrows a bit with the brush tool.
Copy a bit of the hair and paste it a few times.
Copy the nose/mouth part and paste it. Lower it a bit to improve the proportions.
layer>flatten image

step 11

Make a background copy.
filter>artistic>watercolor
Set the opacity to 20%

step 12

Set the watercolor copy to blending mode "soft light"

Baca Selengkapnya....

Music Dreamer

Find the right Urban Vibe Illustration in this tutorial. Pure Street Style!

Create a new file (File>New) that would have 1024x768 px and 72 dpi. After that, choose the Rectangle Tool (U) to represent the background of the next picture.

The layer’s parameters: Blending Options>Gradient Overlay

Gradient’s parameters:


Download from Internet a set of ready to use brushes for Adobe Photoshop: ABSTRACT_MEGA_PACK_BRUSHES, VECTOR_ABSTRACT_2, Floral_ornaments, Clouds_brushes.
Next find in Internet a picture, representing a DJ.

Cut out the DJ’s figure:

Apply for the DJ’s layer the next parameters: Blending Options>Color Overlay



Insert also the DJ’s silhouette on the central part of our picture.

On a new layer (Create a new layer) we’ll use the brushes from the set, VECTOR_ABSTRACT_2.
We’ll use the next brushes: the fourth colored with #89AA39, the fifth colored with #B7B854 (the layers containing the brushes must be placed lower than the DJ’s layer)

Create a new layer (Create new layer) and select the floral_ornament _05 brush out of the Floral ornaments set, colored with #545B15 and the brushes from the set ABSTRACT_MEGA_PACK_BRUSHES.
We’ll use the next brushes out of this set: Circle 1, colored #949D1E, Circle 4, colored #305601.
The set VECTOR_ABSTRACT_2 gives the possibility to use here the brushes 17 and 21, colored with #4F5534 and the brush 23, colored with #363921.

(the brushes’ layers must be placed lower than the DJ’s layer).

Music dreamer effects - part 2

Create another new layer (Create new layer) and apply here the next brushes out of the Floral ornaments set: the brush floral _ornament_01, colored with #626C1A, the brush floral _ornament _03, colored with #626C1A. The set of brushes ABSTRACT_MEGA_PACK_BRUSHES is useful when using the brush Circle 14, colored with #284004 and #819E38

(the layers containing the brushes must be placed lower than the DJ’s layer).
Create one more new layer (Create new layer), where we’ll apply the next brush out of the set ABSTRACT_MEGA_PACK_BRUSHES: the brush Abstract 6, colored with #223E01.

(the layers containing the brushes must be placed lower than the DJ’s layer).
On the next new layer (Create new layer) we’ll apply the next brushes out of the set ABSTRACT_MEGA_PACK_BRUSHES: the brush Circle 15, colored with #2A4306, the brush Circle 3, colored with #B7B854, the brush Arrow 1, colored with #B7B854.

(the layer containing the brushes should be placed lower than the DJ’s layer).
Next we’ll choose the Custom Shape Tool (U), colored with #333501. Press on Shift button three times and represent a shape, like that one from below.


(the layer must be placed lower than the DJ’s layer).
Using the same instrument, try to represent one more new pattern’s element, colored with #C9E06E


Now we should turn over the pattern’s element, selecting previously the Free Transform option.

(the layer will be placed lower than the DJ’s layer).
On a new layer (Create new layer) we have to apply the brush named Texture Comb 3, colored with #BDD266, out of the set Faux Finish Brushes

Create one more new layer (Create new layer) and apply the next brushes out of the set Assorted Brushes: the brush Starburst-Small, colored with #909B46 and #B1B09A and also the brushes from the set VECTOR_ABSTRACT_2: the brush 23, colored with #89AA39. Finally apply the brush from the set ABSTRACT_MEGA_PACK_BRUSHES, brush Circle 14, colored with #6E8F34.

On the last layer (Create new layer) we’ll select the brush Pincel muestreado 9, colored with #95996B out of the set Clouds_brushes.

Finished!

Baca Selengkapnya....