Tutorial 3: Mendesain Gaya Aplikasi Anda

Widget Tombol Keterampilan App Maker tingkat dasar hingga menengah

Sekitar 30 menit

Apa yang akan Anda buat

Anda akan membuat sebagian kecil aplikasi pelacakan project. Tujuannya bukan untuk sekadar memiliki aplikasi yang berfungsi sepenuhnya, tetapi juga untuk belajar tentang mendesain aplikasi. Pengguna aplikasi tersebut dapat:

  • Membuat record project baru dan memasukkan data di dalamnya
  • Mengedit record project
  • Beralih dari satu record ke record lainnya

Apa yang akan Anda pelajari

Tutorial ini mengajarkan cara:

  • Mendesain aplikasi Anda di editor App Maker tanpa menggunakan cascading style sheets (CSS). Pilih tema gaya keseluruhan dan pilih di antara variasi gaya App Maker bawaan untuk widget.
  • Mendesain aplikasi Anda dengan menulis bahasa CSS di Editor Gaya. Secara opsional, gunakan lembar gaya eksternal. CSS memberikan kontrol penuh atas tampilan aplikasi Anda.

Persiapan

Buat sebagian kecil aplikasi pelacakan project yang akan Anda desain.

Membuat aplikasi Anda

  1. Login ke akun G Suite yang diberikan oleh perusahaan atau sekolah Anda.
  2. Buka App Maker.
  3. Buat aplikasi kosong:
    • Jika App Maker menampilkan dialog selamat datang, klik Buat Aplikasi Baru.
    • Jika tidak, klik Menu Baru Aplikasi Kosong.
  4. Ganti nama aplikasi. Hapus nama defaultnya, Aplikasi Tanpa Judul, dan masukkan Mendesain Aplikasi Anda.

Membuat model data

  1. Arahkan kursor ke Data dan klik untuk menambahkan model.
  2. Buat model data Google Cloud SQL. Beri nama model data ProjectData.

Menambahkan kolom ke model data

  1. Di toolbar tab untuk model data ProjectData, klik tab Kolom.
  2. Tambahkan kolom ini ke model data ProjectData:

    Nama kolom Jenis kolom
    Project String
    Owner String
    DueDate Tanggal

Mengganti nama halaman untuk UI dan memilih sumber data

  1. Ganti nama NewPage menjadi Project.
  2. Di Editor Properti, setel properti sumber data untuk halaman Project ke ProjectData.

Menambahkan formulir dan tabel edit

  1. Klik Widget dan tarik Formulir Widget Formulir ke halaman. Pilih Formulir edit.
  2. Dari Widget , tarik Tabel Widget Tabel ke halaman di bawah formulir edit. Sejajarkan tepi kiri formulir dan tabel edit secara horizontal.
  3. Klik Tutup untuk menutup Widget.

Melihat pratinjau aplikasi Anda

Sebelum mendesain aplikasi, pratinjau terlebih dahulu. Aplikasi Anda sekarang menggunakan variasi gaya default untuk widget pada tema Material.

  1. Di pojok kanan atas, klik Pratinjau untuk menjalankan aplikasi Anda di tab browser baru.
  2. Klik Izinkan untuk mengizinkan aplikasi Anda menggunakan informasi khusus.

Mendesain aplikasi Anda tanpa menggunakan CSS

App Maker memungkinkan Anda mendesain aplikasi tanpa menulis bahasa CSS. Anda dapat:

  • Memilih tema, serangkaian gaya bawaan untuk semua widget di aplikasi Anda
  • Memilih di antara rangkaian variasi (variasi gaya untuk setiap jenis widget). Tema default, Material, memiliki variasi bawaan dalam jumlah besar. Misalnya, untuk sebuah tombol, Anda dapat memilih di antara gaya yang memiliki warna latar belakang yang berbeda. Untuk label, Anda dapat memilih di antara berbagai ukuran font. Semua widget memiliki variasi default.

Memilih tema

App Maker memiliki tema-tema ini:

  • Material—Rangkaian gaya sederhana namun elegan, dengan pilihan di antara beberapa variasi gaya untuk setiap jenis widget. Anda dapat menggunakan tema Material apa adanya, atau menyesuaikannya lebih lanjut.
  • Plain—Rangkaian gaya yang sangat polos, dengan beberapa pilihan di antara variasi gaya. Jika Anda terampil dengan CSS dan berencana menggunakan CSS guna membuat gaya Anda sendiri untuk semua widget, Anda bisa menggunakan tema Plain.

Mengubah tema aplikasi Anda:

  1. Di sidebar kiri, klik halaman Project.
  2. Di panel tab di atas Editor Properti, pilih Editor Gaya.
  3. Dari drop-down Tema, pilih Plain. Ingat bahwa gaya yang digunakan dalam formulir dan tabel lebih sederhana. Untuk label dan tombol, hanya ada satu variasi bawaan.
  4. Dalam tutorial ini, Anda akan menggunakan tema Material. Dari daftar drop-down Tema, pilih Material.

Memilih variasi gaya untuk widget tertentu

Pilih variasi gaya dan amati efeknya:

  1. Di pojok kiri bawah, klik Tampilkan outline untuk membingkai widget. Ketika memilih variasi, widget mungkin hilang, misalnya, jika kotak teks putih ada di panel putih. Outline ini memungkinkan Anda menemukan widget.
  2. Klik formulir Edit Project. Pastikan seluruh formulir dipilih. Kotak pilihan biru harus mengurung seluruh formulir. Di tab Outline, Panel: Form1 harus dipilih.
  3. Di pojok kiri atas, perhatikan menu drop-drown Variasi dengan Kertas yang dipilih.
  4. Dari menu drop-drown Variasi, pilih Utama. Seluruh formulir menjadi biru. Ingat bahwa label Edit Project secara otomatis menjadi putih. Perubahan otomatis ini tidak mengubah variasi label. Ingat bahwa widget Project, Pemilik, dan Tanggal Target tidak berubah secara otomatis. (Anda bisa menjadikan widget berwarna putih dengan memilih variasi Gelap. Jangan lakukan sekarang.)
  5. Klik label Edit Project.
  6. Dari menu drop-drown Variasi, pilih DisplayOne. Hal ini meningkatkan ukuran label Edit Project.
  7. Klik tombol Buat. Ini adalah widget di ujung kanan label Edit Project. Anda tidak dapat melihat teksnya karena berwarna biru di atas biru. Dengan tombol dalam kondisi dipilih, item terakhir di breadcrumb adalah Button: Form1CreateButton.
  8. Dari menu drop-drown Variasi, scroll ke seluruh pilihan variasi untuk tombol. Ingat bahwa beberapa variasi menggunakan ikon Material. Pilih variasi IconDark.
  9. Pratinjau aplikasi Anda.
  10. Klik Urungkan tiga kali untuk membatalkan perubahan variasi Anda.

Mendesain aplikasi Anda dengan CSS

Di sini, Anda belajar cara menggunakan CSS untuk mendesain aplikasi. Untuk mendesain aplikasi, Anda dapat menulis penetapan aturan CSS. Biasanya ketika mengembangkan aplikasi web, selektor dalam set-aturan mereferensikan elemen HTML. Di App Maker, selektor mereferensikan widget atau Anda menggunakan properti styleClasses guna menerapkan set-aturan untuk widget.

Tentang CSS

CSS sebagian besar terdiri dari unit bahasa yang disebut set-aturan, yang menentukan tempat untuk menerapkan gaya dan gaya mana yang akan diterapkan.

Ini adalah contoh set-aturan:

.app-Projects-Form1CreateButton {
  background-color: #B2FF59;
  color: #03A9F4;
}

Dalam set-aturan:

  • Satu atau beberapa selektor menentukan tempat menerapkan gaya. Pada contoh di atas, selektornya adalah .app-Projects-Form1CreateButton. Hal ini memberi tahu App Maker untuk menerapkan gaya ke tombol Form1CreateButton pada halaman Projects.
  • Deklarasi menentukan gaya yang akan diterapkan. Pada contoh di atas, deklarasi menyetel warna latar belakang dan warna.

Lembar gaya mengalir dengan tiga cara:

  • App Maker mengevaluasi set-aturan dari atas ke bawah, untuk file CSS eksternal maupun konten Editor Gaya. Jika lebih dari satu selektor menerapkan deklarasi yang sama untuk widget tertentu, deklarasi dalam set-aturan yang lebih jauh ke bawah dalam file CSS akan menimpa deklarasi di atasnya.

    Misalnya, dalam dua set-aturan ini, pertama-tama Anda menetapkan bahwa semua tombol berwarna biru muda, tetapi kemudian Anda menetapkan bahwa tombol Form1CreateButton berwarna jingga. Jadi, Form1CreateButton button akan berwarna jingga. Warna teks pada semua tombol adalah berwarna abu-abu gelap. Warna tersebut tidak ditimpa untuk tombol Form1CreateButton.

    .app-Button {
      background-color: #A1C2FA;
      color: #212121;
     }
    .app-Projects-Form1CreateButton {
      background-color: #FFB74D;
    }
    
  • App Maker mengevaluasi file CSS eksternal sesuai urutan yang Anda tambahkan di Setelan Umum.

  • App Maker mengevaluasi konten Editor Gaya terakhir setelah mengevaluasi file CSS eksternal.

Membuat variasi gaya khusus

Anda dapat membuat variasi gaya kustom untuk jenis widget, misalnya, untuk menyediakan tampilan kustom untuk tombol atau panel. Setelah menentukan variasi kustom, Anda memilihnya dari menu drop-drown Variasi.

Sintaks untuk selektor kelas untuk variasi kustom adalah:

.app-widget_type--widget_style

Perhatikan tanda hubung ganda. Ini adalah sinyal bagi App Maker bahwa yang mengikutinya adalah nama variasi.

Contoh:

.app-Button--Orange

Membuat variasi gaya kustom untuk jenis widget:

  1. Di panel tab di atas Editor Properti, pilih Editor Gaya untuk membuka Editor Gaya. Di sinilah Anda dapat membuat lembar gaya CSS yang mendesain aplikasi Anda. Di beberapa kasus, penyelesaian kode akan tersedia saat Anda mengetik. Anda juga dapat menekan Ctrl+Spasi untuk melihat penyelesaian kode.

  2. Tambahkan variasi Jingga untuk tombol. Salin dan tempel kode ini ke Editor Gaya:

    .app-Button--Orange {
      background-color: #FFB74D;
    }
    
  3. Di aplikasi, klik tombol Buat.

  4. Dari menu drop-drown Variasi, pilih variasi Jingga. Tombol Buat berubah warna menjadi jingga.

  5. Dari menu drop-drown Variasi, pilih variasi FlatColor.

    Tips: Sebagai alternatif untuk membuat variasi kustom, Anda dapat menimpa variasi yang ada. Misalnya untuk tombol, tambahkan set-aturan dengan selektor .app-Button--Icon dan tentukan warna latar belakang yang berbeda (misalnya, sian):

    .app-Button--Icon {
      background-color: #4DD0E1;
    }
    

    Semua tombol yang Anda pilih variasi Ikon akan memiliki warna latar belakang sian.

Mendesain widget tertentu menggunakan properti styles

Properti styles dari widget menyediakan cara mudah untuk menerapkan satu atau beberapa gaya pada widget tertentu. Di value properti styles, Anda mereferensikan set-aturan CSS berdasarkan nama kelas. Anda dapat menentukan gaya di Editor Gaya, di lembar gaya eksternal, atau keduanya.

  1. Tambahkan set-aturan untuk gaya di Editor Gaya. Beri nama-nama kelas gaya yang tidak mendesain bagian-bagian aplikasi secara langsung (yaitu, jangan mereferensikan app-). Misalnya, tambahkan set-aturan CSS ini:

    .Green {
      background-color: #0F9D58;
      border-style: double;
      border-width: 4px;
      border-color: #000000;
      border-radius: 7px;
    }
    .Border {
      border: 4px solid #000000;
      box-shadow: 5px 5px 10px #BDBDBD;
      margin: 15px;
    }
    
  2. Pilih widget yang ingin Anda desain. Di formulir edit, klik tombol Buat.

  3. Sebagai nilai properti styles, masukkan nama kelas gaya yang ingin Anda terapkan (dipisahkan oleh spasi):

    1. Di Editor Properti , perluas bagian Tampilan. Seharusnya Anda melihat nilai yang sudah dipilih di samping ikon menu drop-drown .
    2. Di properti styles, masukkan nama kelas Green dan Border.

Menggunakan lembar gaya eksternal

Anda dapat menggunakan lembar gaya eksternal untuk mendesain widget. Seperti di Editor Gaya, lembar gaya eksternal harus berisi set-aturan CSS yang menerapkan gaya untuk widget atau yang Anda terapkan untuk widget menggunakan properti styleClasses dari widget. Lembar gaya eksternal dengan set-aturan yang menerapkan gaya untuk elemen HTML tidak akan mendesain widget App Maker.

Lembar gaya eksternal harus ditempatkan di URL yang dapat diakses App Maker di Google Cloud. Anda memberikan URL di Setelan Umum. Misalnya, Anda dapat memberikan URL file CSS untuk font Google:

https://fonts.googleapis.com/css?family=Roboto+Condensed:regular,bold

Menempatkan lembar gaya di URL di Google Cloud

Jika file CSS Anda belum ada di Google Cloud, App Maker menyediakan cara mudah untuk memasukannya di sana:

  1. Di file manager, cari file CSS.
  2. Di App Maker, klik Setelan Resource .
  3. Tarik file teks ke area Tambahkan .
  4. Klik Salin URL resource .
  5. Klik Setelan Setelan umum.
  6. Di URL CSS, tempel URL resource dan klik Tambahkan CSS.
  7. Untuk file CSS tambahan, ulangi langkah 2 hingga 6.

Menambahkan referensi dari aplikasi Anda ke lembar gaya

Untuk menggunakan lembar gaya eksternal yang terdapat di URL di Google Cloud:

  1. Dapatkan URL resource dari file CSS.
  2. Klik Setelan Setelan umum .
  3. Di URL CSS, tempel URL resource dan klik Tambahkan CSS.
  4. Untuk file CSS tambahan, ulangi langkah 1 hingga 3.

Langkah berikutnya