Morfik Application Workspace

Bidang kerja (workspace) aplikasi Morfik menyediakan cara efektif bagi Anda untuk
berinteraksi dengan dokumen proyek, properti dan kode. Morfik menggunakan antarmuka
Ribbon berbarengan dengan tumbnail dokumen pada Project View untuk menyediakan
lingkungan desain yang efektif yang mampu mengakomodir kebutuhan akan pemrograman
visual dan desain secara grafis. 
Bidang kerja ini meletakkan operasi yang paling umum digunakan pada toolbar yang sangat
visible sehingga Anda dapat dengan mudah melakukan perubahan pada proyek dan dokumen
Anda. Toolbar utama aplikasi menyediakan akses pada hampir seluruh fitur pengelolaan proyek
dan dokumen seperti pemformatan dokumen dan desain secara grafis.

Penataan Bidang Kerja

Bidang kerja Morfik dibagi menjadi beberapa area yang ditandai dengan angka-angka seperti
pada diagram berikut ini.
 Clicking on different sections of the Workspace takes you to the relevant topic

1 - Power Menu
Power Menu dapat diakses dengan mengeklik tombol biru tua dengan simbol 'power on' di
bagian paling kiri dari Ribbon. Sebuah menu drop-down menyediakan akses langsung pada
sebagian besar fungsi Morfik yang terkait dengan pengelolaan dokumen dan proyek, seperti
membuka dan menutup file. Beberapa pilihan menu di Power Menu ini disesuaikan dengan
konteks dan akan tidak aktif jika tidak cocok pada kondisi yang ada di dalam Integrated
Development Environment (IDE).
 The Power Menu

Power Menu berisi pilihan sebagai berikut (pilihan sub-menu ditandai dengan simbol  | ):

New Project | New Web Application

Membuat aplikasi web yang baru dengan server database bawaan (built-in).

New Project | New Package

Memanggil wizard untuk Package baru. Untuk membuat package, sebuah file Package Ticket harus diperoleh dari
Morfik.

New Project | New Project Wizard

Menjalankan wizard untuk Proyek baru, yang mencakup pilihan jenis aplikasi (aplikasi web atau browser) dan
dukungan database eksternal. 

New Page
Perintah ini membuka dialog New Page dimana Anda bisa membuat halaman baru berdasar template yang tersedia.
Berbagai kategori template halaman tersedia untuk berbagai browser untuk komputer atau perangkat genggam.

New Item | New Form

Membuat form baru untuk proyek yang sedang dikerjakan. Form adalah dasar dari sisi tampilan untuk aplikasi Anda.
Form memungkinkan pengguna berinteraksi dengan aplikasi Anda dan melakukan tugas-tugas seperti menampilkan
data, menambah dan mengubah data.
 New Item | New Report
Membuat Report baru di untuk proyek yang sedang dikerjakan. Report memungkinkan untuk menampilkan dan
mencetak informasi yang tersimpan di database. Dengan Report, informasi ini dapat diurutkan, dikelompokkan dan
direkap dengan banyak cara. Report ditampilkan lewat browser dengan format Adobe PDF, untuk memastikan yang
tampil di layar sama dengan hasil di kertas.

New Item | New Table

Membuat Table baru di proyek yang sedang dikerjakan. Table adalah mekanisme penyimpanan yang sesungguhnya di
database. Mereka berisi baris (record) dan kolom (nama field) yang mengorganisir data yang disimpan. Database bisa
berisi berbagai tabel, dan mungkin berkaitan satu sama lain.

New Item | New Query

Membuat Query baru di proyek yang sedang dikerjakan. Query adalah mekanisme untuk mencari data di tabel. Mereka
memungkinkan Anda untuk mengambil subset data di tabel database berdasarkan kriteria pencarian tertentu.

New Item | New Module

Membuat Module baru di proyek yang sedang dikerjakan. Module adalah unit yang berdiri sendiri yang dapat dipanggil
dari modul lain, termasuk modul di sisi server maupun client di Form dan Report. Mereka berguna untuk
mengorganisasikan kode program Anda menjadi unit-unit logis dan untuk berbagi kode antara berbagai bagian
berbeda dalam aplikasi (atau bahkan antar aplikasi).

New Item | New Web Method

Membuat WebMethod baru di proyek yang sedang dikerjakan. WebMethod adalah kode yang diimplementasikan dan
dijalankan di dalam aplikasi di server (bukan di dalam browser). Mereka dapat dipanggil saat dibutuhkan oleh Aplikasi
Anda (baik dari WebMethod lainnya atau dari dalam browser), atau dipublikasikan sehingga dapat dipanggil dari
aplikasi lain.

New Item | New Widget

Membuat Widget baru dan mengisinya ke dalam editor.

Open
Menampilkan kotak dialog Open File untuk membuka dokumen yang sudah ada.

Close
Menutup dokumen yang sedang dibuka (atau proyek jika dokumen yang sedang dibuka adalah halaman tab Project)

Close All
Menutup semua dokumen yang dibuka, menyisakan halaman tab Project.

Save
Menyimpan (tanpa menutup) dokumen saat ini.

Save As | Save As
Menyimpan (tanpa menutup) dokumen yang sedang dibuka dengan nama yang baru. Save As akan mengekspor
dokumen ke sebuah file XML dengan ekstensi khusus Morfik (misalnya form akan punya ekstensi .mfr). Hal ini
bermanfaat untuk keperluan sharing kode antar proyek, khususnya saat menggunakan format .MXS. Save As tidak
mengubah nama nama dokumen di dalam proyek.

Minor bug: jika ada perubahan yang belum tersimpan di dokumen ketika Save As dijalankan, ini tidak akan termasuk
dalam file hasil ekspor.

Save As | Save Project As

Menampilkan dialog Save Project As untuk mengganti nama proyek, menyimpan ke lokasi yang berbeda atau
mengubah ke bahasa Morfik yang berbeda.

Save All
Menyimpan semua (tanpa menutup) dokumen yang sedang dibuka.

Deploy
Mulai menjalankan wizard untuk Deployment

2 - Tombol Run
Tombol Run ada di samping kanan Power Menu. Tombol Run digunakan untuk menjalankan,
menghentikan atau menghentikan sebentar aplikasi Anda.

Morfik Run Button

Tombol Run hanya aktif jika ada proyek yang dibuka dan berubah-ubah antara 3 jenis kondisi:
 Kondisi 1—Tekan untuk meng-compile dan mulai menjalankan aplikasi;
 Kondisi 2—Tampil saat aplikasi sedang dijalankan. Tekan untuk menghentikan
aplikasi;
 Kondisi 3—Tampil ketika debugger berada pada posisi breakpoint. Tekan untuk
melanjutkan pelaksanaan aplikasi tanpa menjelajahi bertahap kode yang tersisa.

3 - Toolbar Quick Access

Toolbar Quick Access dan tombol Customize berada di sebelah kanan tombol Power Menu. Ini
akan menyediakan akses satu-klik untuk sebagian besar fungsi IDE yang sering digunakan.
Toolbar ini juga dapat diatur penggunaannya.

Toolbar Quick Access dan Tombol Customize

Untuk mengatur toolbar Quick Access, tekan tombol Customize Button (seperti yang tampil di
atas) untuk menapilkan menu drop-down Customize dengan pilihan menu seperti berikut:
   List of Currently Configured Commands 
Daftar tombol-tombol yang telah dikonfigurasikan. Saat diaktifkan, tombol-tombol memiliki
tanda centang di sampingnya. Untuk menonaktifkan tombol, klik pada tombol dan tanda centang
akan hilang. 
   More Commands... 
Menampilkan kotak dialog Morfik Options, dengan pilihan Customize. 
   Show Quick Access Toolbar [Above | Below] the Ribbon 
Meletakkan Quick Access Toolbar di atas atau di bawah Ribbon. 
   Minimize Ribbon 
Meminimkan bagian Ribbon, hanya menampilkan pilihan menu untuk setiap tab di bagian
Ribbon. Meletakkan kursor mouse di atas menu akan memunculkan lagi pilihan menu drop-
down; menyingkirkan kursor akan menyembunyikan lagi. .

Bagaimana Caranya: Mempelajari Tips dan Trik pada Ribbon Menu dan Toolbar?
Video ini adalah tour untuk gaya (style) antarmuka dari Ribbon-nya Morfik. Beberapa perintah
pada Ribbon Morfik ini telah dijelaskan dan tips diberikan mengenai cara mereka dapat
digunakan. Video ini juga mencakup overview tentang toolbar Quick Access dan Power Menu.

Video tentang Ribbon-nya Morfik dan toolbar Quick Access

4 - Ribbon
Ribbon adalah toolbar utama dalam bidang kerja Morfik. Morfik mengadopsi toolbar yang lebih
tinggi ini agar dapat lebih baik dalam menampilkan informasi yang penuh grafis tentang tema
(theme), penataan (layout) dan pemilihan warna.
Tab-tab pada Ribbon menampilkan perintah yang paling relevan untuk setiap bidang tugas di
aplikasi. Berikut adalah daftar tab di Ribbon Morfik.

Morfik Ribbon

   Home Tab 
Tab ini berisi operasi yang paling sering digunakan selama mendesain aplikasi atau website. Isi
tab ini berubah sesuai dengan apa yang sedang Anda kerjakan. Meski demikian, option untuk
bagian Document, Compile dan Clipboard selalu terlihat. 
   Design Tab  
Tab ini menawarkan akses langsung pada operasi yang terkait dengan tema (theme). Dari tab ini
Anda dapat mengubah tema dari proyek yang sedang dikerjakan atau membuat baru,
memodifikasi dan menghapus tema. Isi dari tab ini tidak berubah saat Anda mengubah
rancangan.  
   Project Tab 
Tab ini memungkinkan Anda mengakses berbagai pilihan yang akan mempengaruhi seluruh
proyek, seperti : import sumber data atau webservice, membuat RSS Feed, mengelola
sumberdaya, deploy dan mengelola backup-restore database.Di tab ini Anda memiliki opsi untuk
membuat dokumen proyek baru dan objek seperti Form, Report, Table dan Query yang baru.
Dari tab ini Anda dapat mengakses dialog option yang dapat Anda gunakan untuk mengatur
option. 
   Debug Tab 
Tab ini memungkinkan akses ke sejumlah fitur debugging. Dari tab ini Anda dapat
menambahkan variabel ke daftar watch, menambah atau menghapus breakpoint dan
mengumpulkan informasi yang Anda perlukan untuk memperbaiki masalah di aplikasi Anda.
Sebagian pilihan tersedia dari tab Debug hanya saat dilakukan debug. 
   View Tab  
Tab ini menawarkan akses ke berbagai tampilan objek yang saat ini sedang diedit atau tampilan
yang berlaku pada keseluruhan proyek, seperti tampilan Relationship. 
   External Data Tab 
   Insert Tab 
Tab ini hanya terlihat jika kita mengerjakan desain Form atau Report. Tab ini menawarkan daftar
control yang dapat disisipkan di dokumen yang Anda edit.Control yang tersedia saat merancang
Form dan Report tidaklah sama karena perbedaan karakteristik  dari kedua jenis dokumen
tersebut. 

5 - Project View
Project View menampilkan objek-objek yang ada di proyek Anda seperti Form, Report, Tabel
dan WebMethods. Tempat ini juga menyediakan referensi visual untuk mengelola objek-objek
ini termasuk kemampuan untuk membuat objek baru dan memodifikasi  yang sudah ada.
 Project View

Catatan: Anda dapat mengaktifkan Project View kapan saja dengan menggunakan shortcut
Ctrl+Alt+P.

Dokumen yang bisa ditampilkan secara visual secara default akan tampil dalam bentuk gambar
thumbnail. Ini membuat kita mudah dan cepat dalam menempatkan Form dan Report tertentu
dalam proyek degan jumlah objek yang cukup banyak. Gambar XX menampilkan Project View
untuk proyek kecil.
Untuk proyek yang memiliki dokumen  yang mirip terkadang sangat baik untuk menggunakan
pilihan filtering yang tersedia di Home Tab pada Ribbon ketika kita berada pada Project View.
Di gambar XX Anda dapat melihat Project View dari sebuah proyek dan mekanisme filtering
sedang digunakan. Dalam contoh ini, dokumen dan objek yang mengandung 'staff' sebagai nama
akan ditampilkan.

Project View dengan filtering

Untuk melihat banyak objek di layar pada waktu yang bersamaan, kurangi Zoom Factor pada
Project View. Pilihan ini tersedia di Home Tab pada Ribbon. Mengurangi level perbesaran akan
membuat thumbnail diganti dengan icon kecil dan memungkinkan lebih banyak objek tampil di
layar pada waktu bersamaan. Gambar 4 menampilkan Project View pada pengaturan perbesaran
yang paling minim.
 Kontrol level perbesaran Zoom untuk Project View

Catatan: Anda dapat menekan terus Ctrl dan menggunakan roda mouse untuk memperbesar
atau memperkecil Project View.

Designer/Editor
Designer/Editor memampukan Anda melakukan pekerjaan desain secara grafis pada objek Anda
(seperti Form dan Report) dan mengerjakan kode di belakang objek tersebut dengan
menggunakan text editor yang luar biasa.
Area di tengah-tengah bidang kerja disediakan khusus untuk Desainer atau Editor dari document.
Isi dari bagian ini bisa berubah sesuai dokumen dan tampilan yang dipilih. Saat mengedit Form,
contohnya, Sebuah desain visual dan tampilan dua kode akan tersedia. Tampilan dapat diubah
dari Ribbon.

Designer/Editor dipanggil dari objek-objek berikut:

   Form Designer 
   Report Designer
   Table Designer
   Query Designer
   WebMethod Designer
   Module Designer
   Relationship Designer

6 - Docking Site Sebelah Kiri

Docking Site Sebelah Kiri, yang secara default berada di sebelah kiri dari bidang kerja, berisi
Inspector untuk Properti, Event dan Style. Panel tersembunyi di sisi kiri dari layar jika tidak
digunakan. Klik pada panel akan melebarkannya ke kanan, dan saat mousenya bergeser pergi
maka akan kembali lagi. Panel itu bisa dikunci dalam posisi lebarnya dengan 'menjepit'
menggunakan Tombol Pin.
  Docking Site Sebelah Kiri

Sebuah Inspector dapat dipindah dari lokasi asalnya dengan menyeret ke lokasi lain dalam
bidang kerja. Untuk memfasilitasi perpindahan ini, Inspector harus lebih dulu dijepit di tempat.
Untuk meletakkan kembali Inspector di tempat asalnya, klik-ganda pada kotak nama Inspector.
Sebuah Inspector juga dapat ditutup dengan menekan tombol Close. Jika Anda secara tidak
sengaja menutup panel, Anda dapat membukanya kembali melalui menu drop-down 'View |
Panels | Panels'  yang ada di Ribbon dan memilih panel yang sesuai.

Fungsi Inspector untuk Properties, Events dan Styles Inspectors adalah sebagai berikut:

   Properties Inspector Overview 

Inspector ini memungkinkan Anda mengubah berbagai properti dari objek seperti Form, Report
dan kontrol visual lainnya. Setiap kali Anda memilih sebuah kontrol, inspector Properties secara
otomatis mengupdate sendiri, menampilkan properti yang sesuai. Nama properti tampil di kolom
sebelah kiri sedangkan isinya ada di kolom kanan; Daftar properti diurutkan sesuai alfabet.
Untuk mengubah properti, cukup klik pada nilainya di kolom kanan, pilih dan isi nilai yang baru.
Beberapa nilai bisa diisi langsung, terkadang ada yang diisi melalui kotak dialog, yang secara
otomatis tampil saat kita mengeklik nilai itu. 
   Events Inspector Overview 

Inspector ini memungkinkan Anda memberi tindakan (action) pada sebuah kejadian (event).
Ketika sebuah event dipanggil, event handler untuk event tersebut akan merespon dan
menjalankan kode tindakan yang ada didalamnya.
Tindakan yang terkait dengan event handler dapat diberikan melalui dua cara.
1. Memberikan kode secara manual. Ini bisa dilakukan dengan melakukan klik-ganda pada
bagian edit event, yang membuat event handler baru dalam source code dimana Anda bisa
langsung menuliskan kode program yang Anda ingin jalankan ketika event itu dipanggil.
2. Mengisikan WebAction pada event. Ini dapat dicapai dengan menekan tombol elips [..] di
bagian edit event, yang akan menampilkan wizard WebAction. WebAction adalah event handler
yang telah didefinisikan sejak awal dan berisi tindakan yang dapat meminimalisir kebutuhan
penulisan kode program sebagai respon pemanggilan event. Wizard tersebut akan menuntun
Anda melalui proses pendek pemilihan sebuah tindakan penanganan event dan parameter yang
terkait. Setelah selesai, wizard itu akan membuat event handler dan potongan kode program yang
bisa memungkinkan tindakan untuk dijalankan. Anda bisa juga mengubah atau menambah
potongan kode tersebut jika diperlukan. 
   Styles Inspector Overview 
Inspector ini memungkinkan berbagai aspek dari penampilan dan perilaku kontrol saat
dijalankan dapat dimodifikasi pada level tema (theme). Meskipun Theme digunakan oleh kontrol
untuk penampilan secara umum sepanjang aplikasi, Style dapat digunakan untuk lebih
mempertegas cara penampilan dan perilaku kontrol ketika program dijalankan (run-time).
Bekerja menggunakan Style dapat dicapai pada dua level. Pertama, sebagian besar kontrol
Morfik tersedia dengan beragam alternatif style yang telah disediakan. Jika sebuah kontrol punya
banyak style, akan ada panah di bawah atau di samping nama kontrol di Ribbon. Mengeklik
panah tersebut akan membuka daftar alternatif style yang dapat Anda pilih. 

7 - Docking Site Sebelah Kanan

Di sisi kanan bidang kerja, secara default, adalah Docking Site Sebelah Kanan yang berisi
Inspector untuk Debug Scripts dan Debug Source. 
 Docking Site Sebelah Kanan

Panel (secara default) tersembunyi di sisi kanan layar saat tidak digunakan. Mengarahkan mouse
di atas panel akan membuatnya melebar ke kanan; menyingkirkan kursor membuatnya kembali
lagi.
Panel dapat dikunci pada posisi melebarnya dengan 'menjepit' di tempatnya; tekan tombol Pin
untuk melakukannya.
Panel-panel ini digunakan hanya digunakan saat men-debug aplikasi pada level platform
compiler (Javascript dan Object Pascal untuk browser dan bagian server dari aplikasi, berturut-
turut).

Inspektor untuk Debug Scripts dan Debug Source berfungsi sebagai berikut:
   Debug Scripts : Inspector ini mampu menampilkan atau men-debug kode Javascript (di sisi browser)
yang di-generate oleh compiler. Sebagian besar objek di aplikasi, seperti Form dan WebMethod, akan memiliki

Javascript dan terdaftar di inspector. Klik-ganda file Javascript itu akan menampilkannya ke editor kode.  Kode ini

hanya bisa dilihat tanpa bisa diubah, karena di-generate oleh compiler. Anda dapat memberi breakpoint pada

baris tertentu dengan mengeklik penanda baris, atau dengan memilih menu Debug | Add Breakpoint dari Ribbon.
    Debug Source : Inspector ini mampu menampilkan atau men-debug kode Object Pascal (di sisi server)
yang di-generate oleh compiler. Cara debug kode ini sama seperti cara debug kode Javascript yang dijelaskan di

atas.

   CPU View

8 - Docking Site Sebelah Bawah

Bottom Docking Site

Berada di sebelah bawah bidang kerja, secara default, Docking Site Sebelah Bawah berisi
sekumpulan inspector yang dapat digunakan saat melakukan tugas-tugas pengelolaan bagi
proyek Anda atau ketika men-debug. Inspectors-inspector itu meliputi:
   Output 
This inspector displays the output from the compiler and the linker, including any errors encountered during the
compilation or linking steps. It also displays messages output by the DebugOut function.  
   Errors 
Inspector ini menampilkan error sintaks dan peringatan secara real-time saat Anda bekerja dalam Code Editor.  
   Search 
Inspector ini menampilkan hasil pencarian teks. Fungsi pencarian adalah melakukan pencarian teks baik dalam file kode
yang sedang dikerjakan atau pada semua file kode yang ada.  
   Log 
Inspector ini menampilkan isi dari log. Log ini dihasilkan saat run-time oleh debugger di sisi server, dan menyimpan setiap
tahap aplikasi selama awal dijalankan. Informasi yang disimpan termasuk modul-modul (DLL) yang dipanggil dan treads
yang dibuat oleh aplikasi Anda.  
   Watches 
Inspector ini menampilkan variabel yang telah ditentukan untuk diperhatikan (watched) selama run-time. Mengawasi
status aplikasi Anda dengan mengamati variabel-variabel saat aplikasi Anda dijalankan adalah teknik debug yang sangat
berguna, terutama saat variabel Anda diberi nilai yang tidak dapat diduga (mungkin pada saat yang tidak terduga juga).  
   Breakpoints 
Inspector ini menampilkan daftar breakpoint yang telah diatur pada source code aplikasi
Anda. Saat program dijalankan, ketika aplikasi sampai pada bagian breakpoint tersebut,
Code Editor akan menampilkan kode di baris tersebut. 
   Call Stack 
Inspector ini menampilkan level bercabang dari pemanggilan prosedur dan fungsi selama aplikasi dijalankan. Call Stack
bergantung pada breakpoint yang diatur karena informasi  yang ditampilkan pada Call Stact ini tergantung pada momen
waktu tertentu yang sedang dijumpai;  sebuah breakpoint adalah alat untuk menentukan kapan berhenti dan kondisi
aplikasi dapat dipelajari. Call Stack juga dapat dipelajari saat terjadi error ketika program dijalankan; mempelajari call
stack di saat seperti itu bisa menjadi teknik debug yang sangat efektif.  
   XML 
Inspector XML memungkinkan kita melihat paket XML yang dipertukarkan antara sisi server dan browser dalam aplikasi.
Komunikasi antara server dan browser dicapai melalui SOAP (Simple Object Access Protocol), yang merupakan protokol
pengiriman pesan berbasis XML. Paket XML ini hanya dibuat ketika melibatkan WebMethods dan Web Service.  
   JSON 
Inspector ini menampilkan data JSON yang diterima dan dikirim oleh server. JSON menggantikan XML sebagai format
pertukaran data internal antara browser sebagai client dengan server.  
   SQL 
Inspector ini memampukan Anda melihat pernyataan SQL yang dikirim ke server database.   
   HTTP 
Inspector ini memampukan Anda melihat semua permintaan/respon HTTP yang diterima oleh web server.

9 - Kotak Status
Kotak Status di aplikasi memberikan sejumlah informasi kontekstual tentang objek-objek.
Dibagi menjadi beberapa bagian untuk menunjukkan informasi tentang perbesaran (Zoom),
posisi, style, lebar dan tinggi.

Kotak Status

   Zoom Percentage : Menampilkan level perbesaran dokumen saat ini. 100% berarti dokumen
ditampilkan pada ukuran aslinya.
    Edit State : Menunjukkan bahwa dokumen saat ini telah dimodifikasi sejak disimpan terakhir.
   Control Name and Type : Menampilkan nama dan kelas dari kontrol yang sedang dipilih.
   Left and Top Positions : Menampilkan penempatan dari kontrol yang sedang dipilih, relatif terhadap
kontrol yang memuatnya.

   Width and Height : Menampilkan dimensi dari kontrol yang sedang dipilih.

   Font Type and Size : Menampilkan informasi tentang font yang digunakan oleh kontrol yang sedang
dipilih.

   Style Details : Menampilkan style dari kontrol yang sedang dipilih, dan menampilkan efek yang telah
ditambahkan atau dihapus dari kontrol