4. Panduan konsep desain dan contoh prompt siap pakai Desain Menu yang Support & Responsive di LAMW

 

1. Konsep Utama Desain Menu yang Support & Responsive di LAMW

Agar menu Anda support di berbagai HP:

1. Gunakan jScrollView sebagai wadah luar (Parent utama): Agar jika menu melebihi tinggi layar (terutama di layar HP kecil/landscape), pengguna bisa menggesernya (scroll).
   
   
2. Gunakan Kombinasi jLinearLayout atau jRelativeLayout bertingkat:
   
   
   • Untuk Grid Menu (misal 2 kolom / 3 kolom): AI akan membagi lebar menggunakan lpOneHalfOfParent (2 kolom) atau lpOneThirdOfParent (3 kolom).
     
     
   • Untuk List Menu (Vertikal): Gunakan lpMatchParent dengan ikon + teks menyamping.
     
     

2. Template Prompt ke AI untuk Membuat Desain Menu

Anda bisa menggunakan salah satu dari 2 jenis prompt di bawah ini sesuai model menu yang Anda butuhkan:

A. Prompt untuk Menu Model Grid 2 Kolom (Cocok untuk Dashboard Utama)

Prompt:

"Aku sedang membuat UI Dashboard Menu di LAMW (Lazarus Android Module Wizard) menggunakan kode Pascal.

Tolong buatkan prosedur SetupDashboardMenu yang responsive dan compact.

Spesifikasi:

1. Wadah utama menggunakan jScrollView (supaya support scroll jika layar kecil).
   
   
2. Di dalam ScrollView ada jTextView1 sebagai Judul Menu ("Menu Utama").
   
   
3. Buat 4 tombol menu yang disusun dalam Grid 2 Kolom:
   
   
   • Baris 1: btnMenu1 (Kiri) dan btnMenu2 (Kanan).
     
     
   • Baris 2: btnMenu3 (Kiri, di bawah btnMenu1) dan btnMenu4 (Kanan, di bawah btnMenu2).
     
     
4. Lebar masing-masing tombol gunakan lpOneHalfOfParent agar pas membagi layar menjadi 2.
   
   
5. Berikan margin yang rapi (8px - 10px) antar tombol agar terlihat modern dan tidak menempel rapat."*
   
   

B. Prompt untuk Menu Model List Vertikal / Card Menu (Cocok untuk Menu Banyak)

Prompt:

"Tolong buatkan kode Pascal LAMW untuk desain List Menu Vertikal yang support berbagai ukuran layar HP.

Spesifikasi:

1. Gunakan jScrollView sebagai induk utama.
   
   
2. Buat 4 item menu disusun secara vertikal dari atas ke bawah: btnItem1, btnItem2, btnItem3, btnItem4.
   
   
3. Setiap tombol gunakan LayoutParamsWidth := lpMatchParent dan LayoutParamsHeight := lpWrapContent.
   
   
4. Posisikan setiap tombol di bawah tombol sebelumnya menggunakan Anchor dan PosRelativeToAnchor := [raBelow].
   
   
5. Berikan MarginTop := 10, MarginLeft := 16, dan MarginRight := 16 agar memiliki ruang jarak di kiri-kanan layar."*
   
   

3. Contoh Hasil Kode Pascal yang Dihasilkan AI (Grid 2 Kolom)

Berikut gambaran kode yang akan diberikan AI berdasarkan prompt Grid Menu di atas:

Delphi

procedure TFormDashboard.SetupDashboardMenu;

begin
  // 1. Header Judul (Paling Atas)
  txtHeader.LayoutParamsWidth := lpWrapContent;
  txtHeader.LayoutParamsHeight := lpWrapContent;
  txtHeader.PosRelativeToParent := [rpTop, rpCenterHorizontal];
  txtHeader.MarginTop := 20;

  // --- BARIS 1 ---
  // Menu 1 (Baris 1 - Kiri)
  btnMenu1.LayoutParamsWidth := lpOneHalfOfParent;
  btnMenu1.LayoutParamsHeight := lpWrapContent;
  btnMenu1.Anchor := txtHeader;
  btnMenu1.PosRelativeToAnchor := [raBelow, raAlignLeft];
  btnMenu1.MarginTop := 20;
  btnMenu1.MarginLeft := 8;

  // Menu 2 (Baris 1 - Kanan)
  btnMenu2.LayoutParamsWidth := lpOneHalfOfParent;
  btnMenu2.LayoutParamsHeight := lpWrapContent;
  btnMenu2.Anchor := btnMenu1;
  btnMenu2.PosRelativeToAnchor := [raToRightOf, raAlignTop];
  btnMenu2.MarginRight := 8;

  // --- BARIS 2 ---
  // Menu 3 (Baris 2 - Kiri, di bawah Menu 1)
  btnMenu3.LayoutParamsWidth := lpOneHalfOfParent;
  btnMenu3.LayoutParamsHeight := lpWrapContent;
  btnMenu3.Anchor := btnMenu1;
  btnMenu3.PosRelativeToAnchor := [raBelow, raAlignLeft];
  btnMenu3.MarginTop := 12;

  // Menu 4 (Baris 2 - Kanan, di bawah Menu 2)
  btnMenu4.LayoutParamsWidth := lpOneHalfOfParent;
  btnMenu4.LayoutParamsHeight := lpWrapContent;
  btnMenu4.Anchor := btnMenu3;
  btnMenu4.PosRelativeToAnchor := [raToRightOf, raAlignTop];
end;

Tips Tambahan Cepat Saat Minta AI Mendesain Menu

1. Jelaskan Komponen yang Anda Gunakan: Sebutkan nama komponen spesifik LAMW, misalnya jMarginButton, jImageView, jTextView, atau jPanel.
   
   
2. Sebutkan Kebutuhan Orientasi Layar: Jika menu ingin menyesuaikan saat rotasi HP, tambahkan kalimat: "Pastikan tata letak menggunakan persentase lpOneHalfOfParent agar saat layar di-rotate ke landscape, posisinya tetap simetris."