Tutorial Cara Membuat Metro UI Menu di Delphi 7 Seperti Windows 10

Tutorial Cara Membuat Metro UI Menu di Delphi 7 Seperti Windows 10 – Pernahkah kalian memperhatikan bagaimana perubahan yang secara signifikan tampil pada Microsoft Windows 8, 8.1 dan 10? Yah, perubahan yang paling eksplisit adalah pada bagian tampilan Start Menu. Perubahan yang menuai pro dan kontra bagi kalangan pengguna Microsoft Windows dimana lebih dari 10 tahun Start Menu yang melegenda akhirnya digantikan dengan tampilan yang “katanya” lebih modern, yang disebut dengan nama Metro UI atau Modern UI ala Windows 10. Tampilan menu kotak persegi maupun persegi panjang dengan warna-warni yang sangat kontras menjadikan tampilan ini tampil lebih fresh dan tentunya disukai bagi anak-anak pula.

Tutorial Cara Membuat Metro UI Menu di Delphi 7 Seperti Windows 10
Tutorial Cara Membuat Metro UI Menu di Delphi 7 Seperti Windows 10

Button dan icon yang digunakan untuk mengakses berbagai aplikasi akhirnya disulap dengan Menu Metro UI yang desainnya Flat. Perubahan besar ini bahkan memberikan dampak positif bagi dunia desain grafis dan akhirnya Windows 10 diberikan penghargaan desain terbaik.

Baca Juga : Windows 10 Mendapatkan Penghargaan Desain Terbaik

Dengan latar belakang ini, penulis ingin membagikan kepada pembaca tentang cara membuat Menu Metro UI pada aplikasi Borland Delphi 7, yang tentunya mengadopsi dari desain Flat ala Windows 10 tersebut.

  • Buka aplikasi Borland Delphi 7.
  • Buat sebuah project dengan nama “prjmetro_menu”.
  • Tambahkan sebuah form dengan nama “frmmetro_menu”.
  • Atur form dengan format sebagai berikut.
Properties
Value
Caption
Metro Menu
Color
clBtnFace
+ Font
Color
Name
Size
clWhite
Trebuchet MS
12
Height
473
Name
Frmmetro_menu
Width
830

  • Tambahkan empat buah panel dimana panel-panel tersebut berperan sebagai wadah untuk Flat Menu.
  • Berikut ini adalah format dari keempat Panel tersebut.

Panel 1

Properties
Value
BevelOuter
bvNone
Caption
.
Color
$00800040
Ctl3D
True
Cursor
crHandPoint
+ Font
Color
Name
Size
clWhite
Wingdings 2
40
+ Style
fsBold
True
Height
377
Left
24
Name
pnllaporan_dan_statistik
ParentCl3D
False
ParentFont
False
Top
24
Width
377

Panel 2

Properties
Value
BevelOuter
bvNone
Caption
N
Color
$00800040
Ctl3D
True
Cursor
crHandPoint
+ Font
Color
Name
Size
clWhite
Wingdings 2
40
+ Style
fsBold
True
Height
184
Left
408
Name
pnltentang_pengguna
ParentCl3D
False
ParentFont
False
Top
24
Width
377

Panel 3

Properties
Value
BevelOuter
bvNone
Caption
V
Color
$00800040
Ctl3D
True
Cursor
crHandPoint
+ Font
Color
Name
Size
clWhite
Webdings
35
+ Style
fsBold
True
Height
185
Left
408
Name
pnlnotifikasi
ParentCl3D
False
ParentFont
False
Top
216
Width
185

Panel 4

Properties
Value
BevelOuter
bvNone
Caption
]
Color
$00800040
Ctl3D
True
Cursor
crHandPoint
+ Font
Color
Name
Size
clWhite
Wingdings
40
+ Style
fsBold
True
Height
185
Left
600
Name
pnlpengaturan
ParentCl3D
False
ParentFont
False
Top
216
Width
185

Jika panel-panel tersebut selesai diatur, maka akan tampil seperti gambar dibawah ini.

Tutorial Cara Membuat Metro UI Menu di Delphi 7 Seperti Windows 10
Panel Metro UI
  • Tambahkan empat buat label, masing-masing label diletakkan didalam panelnya masing-masing. Ingat diletakkan kedalam panel, bukan hanya ditimpakkan ke atas panel. 

Label 1

Properties
Value
Align
alBottom
Alignment
taCenter
Autosize
False
Caption
Laporan && Statistik
Color
$00800040
Ctl3D
True
Cursor
crHandPoint
+ Font
Color
Name
Size
clWhite
Trebuchet MS
12
Height
33
Layout
tlCenter
Left
0
Name
Label1
Transparent
True
Width
377

Label 2

Properties
Value
Align
alBottom
Alignment
taCenter
Autosize
False
Caption
Tentang Pengguna
Color
$00800040
Ctl3D
True
Cursor
crHandPoint
+ Font
Color
Name
Size
clWhite
Trebuchet MS
12
Height
33
Layout
tlCenter
Left
0
Name
Label2
Transparent
True
Width
377

Label 3

Properties
Value
Align
alBottom
Alignment
taCenter
Autosize
False
Caption
Notifikasi
Color
$00800040
Ctl3D
True
Cursor
crHandPoint
+ Font
Color
Name
Size
clWhite
Trebuchet MS
12
Height
33
Layout
tlCenter
Left
0
Name
Label3
Transparent
True
Width
185

Label 4

Properties
Value
Align
alBottom
Alignment
taCenter
Autosize
False
Caption
Pengaturan
Color
$00800040
Ctl3D
True
Cursor
crHandPoint
+ Font
Color
Name
Size
clWhite
Trebuchet MS
12
Height
33
Layout
tlCenter
Left
0
Name
Label4
Transparent
True
Width
185

Setelah label ditambahkan kedalam Panel, maka tampilannya akan tampak seperti gambar dibawah ini.

Tutorial Cara Membuat Metro UI Menu di Delphi 7 Seperti Windows 10
Label didalam Panel
  • Terakhir jalankan program tersebut dengan menekan tombol F9 pada keyboard.
  • Pembaca juga dapat mengganti font icon pada Panel tersebut dengan menggunakan icon buatan sendiri dengan dibantu software editing gambar seperti Adobe Photoshop, Illustrator maupun CorelDraw.

Follow blog ini jika ingin mendapatkan informasi seputar dunia teknologi. Tetap Ikhtiar, Tawakal dan Berdoa agar #KamekJadiHero.

My Contact :
Facebook : Rangga Saputra
Fanspage : Teknoborneocom
Instagram : @teknoborneo
HP/WA/Telegram : +628 988282 108

<< Kembali : Ke Artikel yang Lebih Lengkap

Tutorial Cara Membuat Sidebar Menu di Delphi 7 Sederhana Keren Menarik

Tutorial Cara Membuat Sidebar Menu di Delphi 7 Sederhana Keren Menarik – Pernahkan pembaca melihat menu navigasi yang terletak disebelah kanan atau kiri dari form aplikasi? Jika belum mari buka Smartphone Android pembaca kemudian buka aplikasi misalnya BBM atau telegram. Kalaupun tidak punya keduanya mungkin pembaca dapat membuka aplikasi Google Mail (Gmail) yang pastinya sudah terinstall secara default di smartphone Android.
Pada bagian pojok kiri atas, terdapat icon (gambar) yang mana icon ini memiliki arti Open Menu Navigation. Nah, saat terbuka akan tampak begitu banyak menu yang tersaji disana. Saat diklik, menu tersebut akan membuka form lain yang tentunya sesuai dengan nama pada button menu tersebut. Maka dari itu, model menu inilah yang penulis sebut dengan nama “Sidebar Menu”.
Tutorial Cara Membuat Sidebar Menu di Delphi 7 Sederhana Keren Menarik
Tutorial Cara Membuat Sidebar Menu di Delphi 7 Sederhana Keren Menarik

Untuk membuat menu ini, pembaca hanya memerlukan Panel dan Label yang akan dijelaskan secara rinci dibawah ini.

  • Buka aplikasi Borland Delphi 7.
  • Buat sebuah project dengan nama “prjsidebar_menu”.
  • Tambahkan sebuah form dengan nama “frmsidebar_menu”.
  • Atur form frmsidebar dengan detail sebagai berikut.
Properties
Value
Caption
Sidebar Menu
Color
clBtnFace
+ Font
Color
Name
Size
clWindowText
Trebuchet MS
13
Height
476
Name
frmsidebar_menu
Width
928

  • Jika sudah dibuat, kemudian tambahkan sebuah Panel yang kemudian diletakkan ke posisi paling kiri pada form. Berikut ini detail pengaturannya.
Properties
Value
BevelOuter
bvNone
Caption
Color
clWhite
Height
437
Left
0
ParentFont
False
Top
0
Name
pnlmenu
Width
217
Maka akan tampil seperti gambar dibawah ini.
Tutorial Cara Membuat Sidebar Menu di Delphi 7 Sederhana Keren Menarik
Peletakan Panel pnlmenu
  • Tambahkan 6 buah label dengan beberapa pengaturan properties yang sama. 6 buah label ini disimpan kedalam Panel pnlmenu, jangan diluarnya. Adapun nilai yang dapat di set adalah sebagai berikut.

Pengaturan Semua Label
Properties
Value
Autosize
False
Color
cl3DLight
Cursor
crHandPoint
Height
52
Layout
tlCenter
Left
-1
ParentColor
False
ParentFont
False
Transparant
True
Width
217
Pengaturan Label 1
Properties
Value
Caption
  Beranda
Name
btnberanda
Top
8

Pengaturan Label 2
Properties
Value
Caption
  Simpan Halaman
Name
btnsimpan_halaman
Top
64

Pengaturan Label 3
Properties
Value
Caption
  Halaman Koran
Name
btnhalaman_koran
Top
120

Pengaturan Label 4
Properties
Value
Caption
  Edisi Khusus
Name
btnedisi_khusus
Top
176

Pengaturan Label 5
Properties
Value
Caption
  Pengguna
Name
btnpengguna
Top
237

Pengaturan Label 6
Properties
Value
Caption
  Pengaturan
Name
btnpengaturan
Top
293
Catatan : Tambahkan dua spasi didepan Caption agar tulisan tidak tampak menempel pada bingkai form.
  • Tambahkan lagi Label didalam Panel pnlmenu yang fungsinya sebagai garis batas sisi kanan.
Properties
Value
Align
alRight
Autosize
False
Color
clMoneyGreen
Height
437
Left
216
ParentColor
False
Top
0
Width
1
  • Setelah itu tambahkan lagi label untuk pembatas antar menu yang berbeda jenisnya.
Properties
Value
Autosize
False
Color
clMoneyGreen
Height
1
Left
0
ParentColor
False
ParentFont
False
Top
232
Width
217
  • Terakhir tambahkan lagi sebuah Label yang digunakan untuk signature application.
Properties
Value
Align
alCustom
Alignment
taCenter
Autosize
False
Caption
Copyright © 2017 | Rangga Saputra Teknoborneo.com
Color
cl3Dlight
+ Font
Color
Name
Size
clGray
Trebuchet MS
8
Height
35
Left
0
ParentColor
False
ParentFont
False
Top
390
Transparent
True
Width
217
WordWrap
True

Jika langkah-langkah diatas telah diselesaikan, maka tampilan Sidebar Menu Navigation akan tampak seperti gambar dibawah ini.
Tutorial Cara Membuat Sidebar Menu di Delphi 7 Sederhana Keren Menarik
Sidebar Menu yang telah selesai dibuat
Pembaca bisa mendapatkan project ini pada blog Tekno Borneo ini.

<< Kembali : Ke artikel yang lebih lengkap

Follow blog ini jika ingin mendapatkan informasi seputar dunia teknologi. Tetap Ikhtiar, Tawakal dan Berdoa agar #KamekJadiHero.

My Contact :
Facebook : Rangga Saputra
Fanspage : Teknoborneocom
Instagram : @teknoborneo
HP/WA/Telegram : +628 988282 108

Cara Membuat Menubar, MainMenu, Menu di atas Form Pada Delphi 7

Cara Membuat Menubar, MainMenu, Menu di atas Form Pada Delphi 7 – Menu jenis ini sangat cocok untuk memanggil form yang terdapat sub formnya. Misalnya menu “Kendaraan” >> memiliki sub menu “Kendaraan Masuk”, “Kendaraan Keluar” dan “Laporan Kendaraan”.

  1. Buka Aplikasi Borland Delphi 7.
  2. Buat sebuah project baru dengan nama “prjmenubar” dan sebuah form dengan nama “frmmenubar”.
  3. Klik tab Toolbar Standar pada Component Palette, kemudian pilih komponen MainMenu (Menus).
    Komponen MainMenu (Menus) pada Component Palette
  4. Letakkan komponen MainMenu kedalam form frmmenubar yang mana posisi peletakan bebas dimanapun asal tetap dalam bingkai form tersebut.
  5. Klik kanan pada komponen MainMenu tadi, kemudian pilih Menu Designer sehingga akan tampil jendela PopUp.
    Menu Designer komponen MainMenu
  6. Atur properties seperti panduan berikut ini.
    Atur Properties Komponen MainMenu
Menu 1
Properties
Value
Caption
File
Name
File1

Sub Menu 1
Properties
Value
Caption
&Open
Name
Open1

Sub Menu 1
Properties
Value
Caption
&Exit
Name
Exit1

Menu 2
Properties
Value
Caption
Kendaraan
Name
Kendaraan1

Sub Menu 2
Properties
Value
Caption
Kendaraan Masuk
Name
KendaraanMasuk1

Sub Menu 2
Properties
Value
Caption
Kendaraan Keluar
Name
KendaraanKeluar1

Menu 3
Properties
Value
Caption
Bantuan
Name
Bantuan1

Sub Menu 3
Properties
Value
Caption
Tentang Aplikasi
Name
TentangAplikasi1

Sub Menu 3
Properties
Value
Caption
Kontak Kami
Name
KontakKami1

Jika semua langkah telah dilakukan maka hasilnya akan tampak seperti gambar dibawah ini
Hasil yang telah jadi
Pembaca bisa mendapatkan project ini pada blog Tekno Borneo
Perlu diketahui bahwa sebelum membuat MenuBar ada baiknya pembaca melakukan riset terlebih dahulu mengenai banyaknya form maupun sub form yang akan digunakan. Riset ini memerlukan analisis yang baik sebab menurut pengalaman pribadi, terkadang setelah menubar telah selesai dibuat bahkan telah selesai juga dikoding, ternyata ada form-form yang mesti ditambah. Hal ini mungkin tidak terlalu menjadi masalah jika aplikasi yang dibangun masih dalam skala kecil. Namun bagaimana jika aplikasi yang dibangun memiliki skala yang besar? Bayangkan jika salah penempatan saat membuat menu. Dimana sub menu X seharusnya pada menu A, ternyata salah letak dan dibuat pada Menu B. Kemudian semuanya telah di koding sempurna, tentu akan menjadi hal berbahaya.
Maka dari itu fokus, perhatikan dan catat terlebih dahulu apa yang akan dibuat.
Berikut ini Contoh MenuBar yang Standar dibuat :
File | Data Entry | Help | LogOut
Keterangan :
File > Exit
Data Entry > Form 1, Form 2, Form 3 …
Help > About Application, Contact Us
Logout > Logout

<< Kembali Ke Artikel Lengkap

Follow blog ini jika ingin mendapatkan informasi seputar dunia teknologi. Tetap Ikhtiar, Tawakal dan Berdoa agar #KamekJadiHero.

My Contact :
Facebook : Rangga Saputra
Fanspage : Teknoborneocom
Instagram : @teknoborneo
HP/WA/Telegram : +628 988282 108

Cara Membuat Menu di Delphi 7 Sederhana, Keren dan Modern

Cara Membuat Menu di Delphi 7 Sederhana, Keren dan Modern – Begitu banyaknya form aplikasi yang dibuat sehingga application designer harus menemukan cara baru dalam mengaksesnya. Cara yang paling ideal dalam mengakses form-form aplikasi adalah dengan membuat Menu Navigasi yang mana konsepnya sama seperti Menu Navigasi pada sebuah Website.
Jika dalam mengakses tiap-tiap laman website harus membutuhkan alamat addressnya, maka berbeda dengan mengakses form-form aplikasi pada Delphi. Kita hanya membutuhkan name dari setiap form yang akan kita panggil, kemudian menyematkannya pada Menu Navigasi yang akan kita buat nantinya.

Cara Membuat Menu di Delphi 7 Sederhana, Keren dan Modern
Metro UI Menu

Materi Bahasan :
  1. MainMenu atau Menubar
  2. SideBar Menu
  3. Metro UI Menu
*Klik nomor bahasan diatas untuk menuju ke artikel yang bersangkutan

Sedikit gambaran, bahwa dalam membuat Menu Navigasi terbagi menjadi 2 jenis :
  1. Menu Navigasi Utama
  2. Sub Menu Navigasi
Menu yang dimaksud disini adalah bukan Ribbon Menu yang seperti terdapat pada Microsoft Office yang pada notabenenya digunakan untuk memanggil fitur-fitur, sedangkan Menu yang akan kita buat adalah Menu Navigasi yang dikhususkan untuk memanggil Form-form.
Mengenai perbedaan antara Menu Utama dan Sub Menu yang dirasa tidak begitu penting, ternyata sangat berpengaruh terhadap desain yang akan kita buat. Bagaimana tidak, jika sebuah Menu Utama yang hanya terdiri dari satu form utama misalnya “Menu Pengguna” dibandingkan dengan menu yang terdiri dari banyak sub menu misalnya “Report” yang terdiri dari puluhan “sub menu report” maka diperlukan perlakuan berbeda antara kedua jenis Menu ini. Sebab jika salah desain maka hasilnya akan menyebabkan kumuhnya tampilan Interface yang dibuat.


MENU NAVIGASI DENGAN MAINMENU ATAU MENUBAR DI DELPHI 7

Menu ini sangat cocok untuk memanggil form yang terdapat sub formnya. Misalnya Menu “Kendaraan” > Memiliki Sub Menu “Kendaraan Masuk”, “Kendaraan Keluar”, “Laporan Kendaraan”
  1. Buka aplikasi Borland Delphi 7.
  2. Buat sebuah project baru dengan nama “prjmenubar” dan sebuah form dengan nama “frmmenubar”.
  3. Klik tab Toolbar Standard pada Component Palette, kemudian pilih komponen MainMenu (Menus).
  4. Letakkan komponen tersebut kedalam form frmmenu. Posisi peletakan bebas dimanapun.
  5. Klik kanan pada komponen MainMenu tadi, kemudian klik Menu Designer sehingga tampil jendela PopUp. Maka Aturlah sesuai keinginan.
  6. Berikut ini adalah tampilan yang telah penulis buat.
    Cara Membuat Menu di Delphi 7 Sederhana, Keren dan Modern
    Main Menu / Menubar
  7. Jalankan program tersebut dengan menekan tombol F9 pada Keyboard.


MENU NAVIGASI DENGAN PANEL ATAU SIDEBAR MENU DI DELPHI 7

Menu ini sangat cocok untuk pemanggilan form induk atau form yang hanya terdiri dari satu buah form tanpa ada lagi sub form lainnya. Misalnya Menu “Petugas”.
  1. Buka aplikasi Borland Delphi 7.
  2. Buat sebuah project baru dengan nama “prjsidebar_menu” dan sebuah form dengan nama “frmsidebar_menu”.
  3. Klik tab Toolbar Standar pada Component Palette, kemudian pilih komponen Panel.
  4. Letakkan komponen panel tersebut kedalam form frmsidebar_menu. Karena ini meripakan Menu Navigasi pada bagian Sidebar, maka posisikan menu tersebut pada sebelah kiri. Pembaca juga dapat meletakkannya disebelah kanan jika ingin tampil beda.
  5. Aturlah jumlah, posisi dan properti pada masing-masing panel.
  6. Menu Navigasi yang telah jadi akan tampak seperti gambar dibawah ini.
    Cara Membuat Menu di Delphi 7 Sederhana, Keren dan Modern
    Sidebar Menu
  7. Jalankan program tersebut dengan menekan tombol F9 pada Keyboard.
  8. Nah, bagaimana? Begitu modern kan? Tampilan ini dapat pembaca improvisasi sendiri seperti gambar dibawah ini.
    Cara Membuat Menu di Delphi 7 Sederhana, Keren dan Modern
    Sidebar Menu Modern



MENU NAVIGASI DENGAN PANEL ALA METRO UI/ MODERN UI WINDOWS 10

Menu ini begitu futuristik dengan desain yang tegas. Penggunaan komponen Panel yang sisinya sama besar membuat tampilannya ini seperti Start Menu pada Windows 10. Jika pembaca memiliki keahlian dalam membuat gambar vektor dengan desain flat, maka hal tersebut dapat menjadi nilai plus untuk menjadikan menu ini begitu indah dipandang.
  1. Buka aplikasi Borland Delphi 7.
  2. Buat sebuah project baru dengan nama “prjmetro_menu” dan sebuah form dengan nama “frmmetro_menu”.
  3. Klik tab Toolbar Standar pada Component Palette, kemudian pilih komponen Panel.
  4. Pembaca harus memiliki keahlian atau kemampuan dalam meletakkan panel-panel ini agar tidak tampak kumuh atau tumpang tindih.
  5. Sebagai desainer yang profesional, penulis mengharapkan pembaca untuk memiliki keterampilan dalam menggunakan aplikasi editing gambar seperti Adobe Photoshop, Illustrator, Corel atau sejenisnya untuk membuat gambar verktor dengan desain Flat. Langkah ini digunakan untuk membubuhkan icon pada tiap-tiap Panel yang tersedia.
  6. Menu Navigasi yang telah jadi akan tampak seperti gambar dibawah ini.
    Cara Membuat Menu di Delphi 7 Sederhana, Keren dan Modern
    Metro UI Menu
  7. Jalankan program tersebut dengan menekan tombol F9 pada Keyboard.
Pembaca juga bisa mengkolaborasikan ketiga jenis menu diatas jika diperlukan, tentunya dengan kreatifitas masing-masing.

Lihat Artikel Serupa >>

Follow blog ini jika ingin mendapatkan informasi seputar dunia teknologi. Tetap Ikhtiar, Tawakal dan Berdoa agar #KamekJadiHero.

My Contact :
Facebook : Rangga Saputra
Fanspage : Teknoborneocom
Instagram : @teknoborneo
HP/WA/Telegram : +628 988282 108