Antarmuka Aplikasi Sketchware | Halaman Editor - Panduan Sketchware 002

Halo teman-teman setelah kita bahas halaman utama di artikel sebelumnya sekarang kita akan lanjutkan pembahasan antarmuka aplikasi Sketchware ini pada bagian halaman edit yaitu halaman dimana kita akan merangkai part per-part aplikasi yang kita.

Antarmuka Hahlaman Edit

Ok teman-teman setelah kita membuat projek baru seperti yang sudah saya bahas di artikel sebelumnya maka kita akan dibawa pada halam edit yang akan kita bahas sekarang. Untuk tampilannya sediri akan terlihat seperti gambar berikut.

Dari gambar diatas terlihat banyak sekali opsi yang bisa kita gunakan dan dengan banyaknya opsi tersebut tentunya pembahasan kita kali ini akan sangat panjang teman-teman, jadi bacalah artikel ini dengan santai... tidak perlu membacanya sekaligus, kamu bisa baca artikel panduan ini secara berkala atau ambil saja pembahasan yang kamu perlukan saja.

Baiklah teman-teman kita langsung saja bahas panduan Sketchware hahlaman edit yang sangat panjang ini. Ok dari gambar diatas ada beberapa opsi yang sudah saya tandai dengan nomor dan warna agar teman-teman dapat memahami objek mana yang sedangsaya bahas. Dan berikut ini adalah list yang akan kita bahas sesuai dengan tanda seperti yang ada pada gambar diatas.

• Area [ Edit Area ].
• No 0 Exit Button
• No 1 Tab View.
• No 2 Tab Event.
• No 3 Tab Component.
• No 4 Options Menu.
• No 5 Save Button.
• No 6 Undo Redo.
• No 7 Tab Wigdget.
• No 8 Widget Collections.
• No 9 Activity Selections
• No 10 Settings
• No 11 Run App

EDIT AREA

Edit Area atau yang saya tandai dengan kata Area dengan warna biru pada gambar ialah area kosong yang nantinya bisa kita isi dengan berbagai elemen dan widget yang akan ditampilkan pada aplikasi kita nantinya.

Berbagai Elemen dan widget yang akan digunakan bisa kamu pilih dan tarik dari tab samping kiri layar seperti yang saya tandai dengan kotak warna merah di gambar untuk kemudian kamu tempel pada area kosong tersebut.

EXIT BUTTON

Untuk opsi yang satu ini seharusnya tidak perlu saya bahas karena saya yakin teman-teman semua sudah tahu artinya yaitu tombol keluar.

TAB VIEW

Selanjutnya yang saya kasih tanda nomor satu ialah tab view. Tab View ini secara default menjadi Tab utama dari salah satu tab lainnya yaitu Tab Event dan Tab Component. Tab view ini mencakup beberapa opsi seperti yang tampil pada gambar diatas yaitu Area Edit, Tab Widget dan Tab Widget Collections jadi sebelum saya bahas Tab Event dan Tab Component saya akan lompat dulu pada opsi nomor 7 dan 8 atau Tab Widget dan Widget Collections karena masih berada dalam cakupan Tab View.

TAB WIDGET

Tab Widget adalah Tabel yang akan menampilkan berbagai Widget dan elemen seperti yang saya tandai warna merah pada gambar diatas, pada Tab Widget tersebut berisi banyak sekali pilihan widget ataupun elemen yang ingin kamu gunakan untuk tampilan aplikasi kamu seperti contohnya "gambar" Kamu bisa gunakan widget ImageView untuk menampilkan gambar atau widget lainnya seperti progressbar, webview, textview, edittex atau widget lainnya.

Selain widget, Tab tersebut juga menampilkan elemen lainnya seperti pilihan Layout, List, Library dan lainya, Semua elemen tersebut berada pada Tab Widget ini dan kamu dapat menggulirnya kebawah untuk melihat lebih banyak widget dan elemen yang disediakan. Mungkin jika dijejerkan akan terlihat seperti gambar berikut.

Banyaknya Fitur yang diberikan tergantung versi Sketchware yang kita gunakan, sebagai catatan disini saya menggunakan Sketchware v6.0.4-rc05 dengan SDK minimal Api26 dan untuk mengetahui fungsi-fungsi elemen dan widget kamu bisa lihat pembahasan mengenai Elemen dan Widget.

WIDGET COLLECTIONS

Selanjutnya untuk Tab Widget Collections ialah Tabel yang akan menampilkan Widget dan Elemen yang kita simpan untuk dapat kita gunakan kembali karena ketika kita menyimpan elemen yang kita pilih maka elemen tersebut akan disimpan beserta isi dan pengaturan yang telah kita terapkan pada elemen tersebut.

Gambar tersebut adalah contoh ketika saya membuat Layout Header yang di isi dengan edittext untuk kemudian saya fungsikan sebagai kolom pencarian yang saya save kemudian saya gunakan kembali, dan hasilnya widget yang saya ambil kembali tersebut tampil sepenuhnya seperti saat saya menyimpannya.

Kemudian untuk cara menyimpannya pun sangat mudah yaitu kita tinggal klik pada elemen dasar yang ingin kita simpan maka akan muncul menu dari sisi bawah dengan beberapa opsi didalamnya kemudian kita klik saja pada icon save yang tampil dengan gambar disket di pojok kanan maka akan muncul dialog untuk menamai widget yang akan kita simpan kemudian klik Save maka dengan begitu widget telah berhasil kita simpan.

TAB EVENT

Selanjutnya ada Tab Event yang mana tabel ini akan kita gunakan untuk membuat program aplikasi kita atau lebih tepatnya tabel untuk menambahkan skrip-skrip untuk menjalankan setiap elemen yang kita pasang sebagai tampilan aplikasi kita, pada tab event ini memiliki beberapa opsi seperti yang terlihat pada gambar dibawah ini.

Disamping kiri layar Tab Event terdapat 5 opsi pilihan yang diantaranya yaitu Aktivity, View, Component, Drawer dan Moreblock.

1. Aktivity
   Pada tab Activity ini sudah terdapat opsi onCreate dan dapat ditambah lagi dengan menekan tombol tambah yang ada di samping kanan bawah layar seperti yang terlihat digambar karena pada tombol tersebut terdapat banyak opsi tambahan yang bisa kita gunakan.
   
   
   Opsi onCreate sendiri merupakan opsi untuk menambahkan aksi ketika aplikasi pertamakali diluncurkan, etah itu tampilan, timer animasi atau lainnya yang akan dijalankan saat pertama kali aplikasi diluncurkan. Pembahasan lengkap mengenai onCreate ini bisa kamu lihat disini.
   
   
2. View
   Tabel kedua ialah View, tabel ini akan menampilkan setiap aksi Klik ataupun Tekan lama pada objek atau element yang sudah kita tambahkan di edit area pada tab view. adapun tombol tambah yang kita tekan akan menampilkan opsi tambahan untuk Opsi view ini seperti yang terlihat pada gambar.
   
   Aksi klik pada opsi view ini tidak hanya berlaku untuk sebagian elemen melainkan objek atau elemen apapun yang kita tambahkan dapat kita isikan aksi klik ini. Lebih lengkap tentang Action Click
   
   
3. Component
   Tabel ketiga adalah tabel yang akan menampilkan aksi dari komponen yang kita tambahkan pada Tab Component.
   
   Pada tabel ini akan banyak kamu temukan aksi-aksi dari banyaknya komponen yang bisa kita pilih dari tombol tambah pada Tab Component seperti yang terlihat pada gambar.
   
   
4. Drawer
   Selanjutnya ada tab untuk membuat aksi pada Drawer, Drawer sendiri adalah elemen atau layout tambahan yang biasanya akan muncul di sisi kiri sebagai options menu ketika kita klik icon menu atau bisa juga dengan cara gerakan gestur seperti heser kanan atau kiri.
   
   
   Pada tabel ini kita bisa menambah aksi klik pada elemen attau objek yang berada didalam drawer karena aksi untuk drawer ini agak sedikit khusus seperti halnya pada ListView. Lebih lengkap tentang Drawer.
   
   
5. Moreblock
   Tabel selanjutnya ialah Moreblock, moreblock ini bisa kita gunakan untuk menambah skrip atau kode layaknya seperti halaman Block Manager hanya saja moreblock ini lebih eksplisit dalam menerima skrip yang tidak memungkinkan untuk diterapkan di halaman lain. Lebih lengkap tentang MoreBlock.
   
   

TAB COMPONENT

Balik lagi ke tampilan halaman edit dan untuk oplsi selanjutnya ialah tab komponen. Tab Component ini mmerupakan tabel untuk menambah beberapa komponen yang yang sudah tersedia di aplikasi maupun komponen yang kamu buat sendiri, dan untuk menambah komponen yang kamu butuhkan cukup klik pada tombol tambah yang ada pada tab komnponen maka akan muncul jendela mengambang yang menampilkan banyak komponen yang bisa kamu gunakan dari Timer, Intent, File Picker dan komponen lainnya seperti yang terlihat pada gambar berikut.

Berbagai komponen tersebut memiliki fungsinya masing-masing tentunya dan akan dibutuhkan disetiap activity untuk terhubung dengan activity lainya bahkan activity diluar aplikasi kamu. lebih jelas tentang Component.

OPTIONS MENU

Selanjutnya ada Options Menu dengan ikon titik tiga yang mana jika kita klik opsi tersebut maka akan muncul tampilan dengan berbagai konfigurasi tambahan yang juga memiliki opsi lainnya dan kegunaannya masing-masing.

Seperti yang terlihat pada gambar diatas opsi ini memiliki banyak sekali konfigurasi yang tidak mungkin saya bahas satu persatu disini, tetapi kamu dapat membaca semuanya dari daftar pembahasan berikut.

1. LIBRARY
2. VIEW
3. IMAGE
4. SOUND
5. FONT
6. JAVA/KOLTIN
7. RESOURCE
8. ASSET
9. PERMISSIONS
10. APPCOMPAT
11. ANDROID MANIFEST
12. CUSTOM BLOCKS
13. LOCAL LIBRARY
14. NATIVE LIBRARY
15. PROGUARD
16. STRINGFOG
17. SHOW SOURCE CODE
18. LOGCAT RAEDER
19. COLLECTION

SAVE BUTTON

Selanjutnya Opsi Save Button yaang bisa kita gunakkan untuk menyimpan setiap perubahan yang telah kita buuat, opsi ini sangat penting karena aplikasi Sketchware ini bisa berhenti mendadak kapan saja karena berbagai faktor atau bisa saja ketika kita membersihkan taks yang berjalan pada ponsel kita dan hal tersebut mengakibatkan terhentinya aplikasi sehingga ketika kita memuat kembali aplikasi Sketchware ini semua perubahan yang belum tersimpan akan hilang.

Jadi saran saya setelah melakukan perubahan pada projek kita pastikan untuk meng-klik ikon simpan ini agar situasi yang saya sebutkan sebelumnya tidak terjadi pada projek kamu karena Automaticly Saved atau fitur yang saya bahas pada bab sebelumnya tidak akan berfungsi untuk kejadian yang saya sebutkan diatas, Fitur Automaticly Saved hanya akan berfungsi ketika kita klik keluar untuk meninggalkan projek.

UNDO REDO

Opsi ini berfungsi layaknya undo redo disetiap aplikasi yaitu mengembalikan ke perubahan terakhir yang dibuat atau sebagai contoh jika kita tidak sengaja menghapus elemen Layout yang berisi widget-widget penting, maka kita dapat memulihkan kembali elemen tersebut. Akan tetapi fitur ini hanya akan bekerja ketika kita masih di halam yang sama dengan kata lain jika kita pindah ke tab lain maka elemen yang terhapus tidak dapat dipulihkan.

ACTIVITY SELECTIONS

Jika opsi ini kita klik maka akan muncul jendela melayang yang menampilkan 2 Tab yaitu View dan Custom View, kemudian ada juga tombol tambah dan activity yang telah dibuat, dalam hal ini ialah main.xml atau MainActivity.

Jika ingin membuat Activity baru kamu tinggal klik saja icon tambahan maka akan muncul pop up baru dengan menampilkan beberapa opsi yang bisa kamu sesuaikan dengan kebutuhan tampilan aplikasi kamu seperti penggunaan Toolbar, StatusBar, Floating Action Button dan lainnya. lebih lengkap tentang New Activity

Kemudian jika ingin merubah pengaturan aktivitas yang sudah ada, kamu bisa klik pada bagian kiri Activity seperti yang ditunjuk pada gambar diatas maka akan muncul pop up yang sama seperti saat kita ingin membuat activity baru, disana kamu tinggal ubah apa yang ingin kamu terapkan.

Selanjutnya untuk tab Custom View, opsi ini biasa digunakan sebagai tampilan kostum untuk widget List yang diantaranya seperti ListView, RecyclerView, ViewPager dan lainnya. dan ketika kita menambahkan Custom View ini PopUp yang tampil hanya akan menampilkan form untuk mengisi nama custom saja atau tanpa opsi lanjutan. lebih lengkap tentang Custom View

SETTINGS

Selanjutnya adalah tombol setting yang mana tombol ini memiliki 4 opsi yang bisa kamu pilih yang diantaranya sebagai berikut.

1. Build settings
   
   Menampilkan berbagai pengaturan path, jar, Dexer, Java Version dan lainnya
   
   
2. Clear temporary files
   
   Opsi ini digunakan untuk menghapus file-file sisa dari elemen yang sebelumnya dihapus.
   
   
3. Show lash compile error
   
   Opsi ini digunakan untuk melihat error terakhir yaang muncul.
   
   
4. Show source code
   
   Opsi ini akan menampilkan susunan elemen dari apa yang telah kita terapkan pada edit area namun dalam bentuk kode / skrip.
   
   

RUN APP

Kemudian opsi terakhir ialah tombol RUN, opsi ini adalah puncak dari apa yang telah kita rangkai dari setiap halama, setelah semua program dan tampilan telah tersusun saatnya kita mencoba aplikasi yang kita dengan cara klik tombol run ini, dan jika terdapat error kita akan diberi tahukan aktivas, objek atau elemen mana yang bermasalah dalam prjek kita tapi jika semua sudah sesuai maka aplikasi kita akan dapat langsung diinstal.