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 ApplicationMembuat aplikasi web yang baru dengan server database bawaan (built-in).

New Project | New PackageMemanggil wizard untuk Package baru. Untuk membuat package, sebuah file Package Ticket harus diperoleh dari Morfik.

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

New PagePerintah 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 FormMembuat 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 ReportMembuat 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 TableMembuat 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 QueryMembuat 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 ModuleMembuat 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 MethodMembuat 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 WidgetMembuat Widget baru dan mengisinya ke dalam editor.

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

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

Close AllMenutup semua dokumen yang dibuka, menyisakan halaman tab Project.

SaveMenyimpan (tanpa menutup) dokumen saat ini.

Save As | Save AsMenyimpan (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 AsMenampilkan dialog Save Project As untuk mengganti nama proyek, menyimpan ke lokasi yang berbeda atau mengubah ke bahasa Morfik yang berbeda.

Save AllMenyimpan semua (tanpa menutup) dokumen yang sedang dibuka.

DeployMulai 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