Morfik Application Workspace

The Morfik application workspace provides an effective way for you to interact with project documents, properties and code. Morfik uses the Ribbon interface along with document thumbnails in Project View to provide an effective design environment capable of accommodating the needs of visual programming and graphical design.

The workspace places most of the commonly executed operations onto its highly visible toolbar so that you can easily make changes to your project and documents. The application's main toolbar provides access to most of the project and document management features as well as document formatting and graphical design.

Workspace layout

The Morfik workspace is divided up into areas as indicated by the numbers in the diagram below.


The Power MenuRun ButtonQuick Access ToolbarRibbonProject ViewLeft Docking SiteRight Docking SiteBottom Docking SiteStatus Bar
Clicking on different sections of the Workspace takes you to the relevant topic

The Power Menu is accessed by clicking the dark blue button with white 'power on' symbol at the far left of the Ribbon. A drop-down menu provides immediate access to most Morfik functions related to project and document management, such as opening and closing files. Some menu options on the Power Menu are context-sensitive, and will be disabled if they are not applicable to the current state of the Integrated Development Environment (IDE).


power-menu.png
The Power Menu



The Power Menu contains the following options (sub-menu options are denoted by the | symbol):

NewProject16.png New Project | New Web Application
package16.png New Project | New Package
NewProjectWizard16.png New Project | New Project Wizard
newpage16.png New Page
form16.png New Item | New Form
Report16.png New Item | New Report
table16.png New Item | New Table
tables16.png New Item | New Query
text_code_server16.png New Item | New Module
gear16.png New Item | New Web Method
widget16.png New Item | New Widget
Open16.png Open
folder_closed16.png Close
folder_closeAll16.png Close All
Save16.png Save
save_as16.png Save As | Save As
ConvertProject16.png Save As | Save Project As
SaveAll16.png Save All
deployment16.png Deploy

2 - Run Button

The Run Button appears to the right of the Power Menu. The Run Button is used to start, stop and pause your application.


run-button.png
Morfik Run Button


The Run Button is only enabled when a project is open, and toggles between 3 different states:

GreenPlay16.png State 1—Press to compile and start the application;
Stop16.png State 2—Displays when the application is running. Press to halt the application;
media_step_forward16.png State 3—Displays when the debugger encounters a breakpoint. Press to continue application execution without stepping into/through any remaining code.

The Quick Access toolbar and Customize button are located to the right of the Power Menu button. It gives you one-click access to your most commonly used IDE functions. The toolbar is also completely configurable.

quick-access-toolbar.png
Quick Access Toolbar and Customize Button



To configure the Quick Access Toolbar, press the Customize Button (as shown above) to display the Customize drop-down menu with the following menu options:


navigate-check16.png   List of Currently Configured Commands
preferences16.png   More Commands...
up-down16.png   Show Quick Access Toolbar [Above | Below] the Ribbon
navigate_minus16.png   Minimize Ribbon

How Do I: Learn Tips and Tricks on Ribbon Menu and Toolbar?

This video is a tour of Morfik’s Ribbon style user interface. A selected number of commands in Morfik Ribbons have been explained and tips are given on how they could be used. The video also includes an overview of the Quick Access Toolbar and the Power menu.


The player will show in this paragraph

Morfik Ribbons and Quick Access Toolbar video


4 - Ribbon

The Ribbon is the main toolbar of the Morfik workspace. Morfik has adopted this taller toolbar to better display graphically rich information about themes, layouts and color selection.

The tabs on the Ribbon display the commands that are most relevant for each of the task areas in the applications. Following is a list of tabs in the Morfik Ribbon.


tabhome-projectview.png
Morfik Ribbon


tabs16.png   Home Tab
tabs16.png   Design Tab
tabs16.png   Project Tab
tabs16.png   Debug Tab
tabs16.png   View Tab
tabs16.png   External Data Tab
tabs16.png   Insert Tab

5 - Project View

The Project View displays the objects that are contained in your project such as Forms, Reports, Tables and WebMethods. It also provides a highly visual reference for managing these objects, including the ability to create new objects and edit existing ones.

project-view.png
Project View


Note: You can activate Project View at any time by using Ctrl+Alt+P keyboard shortcut.


Documents that are visual in nature are by default represented by a thumbnail image. This makes it easy and fast to locate specific Forms and Reports in projects with a moderate number of objects. The figure just above shows the Project View for a small project.

For projects with many similar documents it is sometimes best to use the filtering option that is available from the Home Tab of the Ribbon when you are in Project View. In the figure below you can see the Project View of a project and the filtering mechanism being used. In this example, documents and objects containing 'staff' in their name are displayed.

Note: In the Project View you can select one or multiple elements such as forms, tables and queries and copy and paste them from one project to another.


project-view-filter.png
Project View with filtering in use


To see many objects on screen at the same time, reduce the Zoom Factor for the Project View. This option is available from the Home Tab of the Ribbon. Reducing the zoom level will lead to all thumbnails being replaced by small icons to allow more objects on screen at the same time. The figure below shows a project view at its minimum zoom settings.


project-view-zoom.png
Zoom level control for Project View


Note: You can also hold down the control key and use the mouse wheel to zoom in and out of Project View.

Designer/Editor

The Designer/Editor enables you to perform graphical design work on your objects (such as Forms and Reports) and work on the code behind those objects using a powerful text editor.

The area at the center of the workspace is reserved for the document Designer or Editor. The content in this section changes according to document and selected view. While editing a Form, for example, a visual design and two code views would be available. The view can be changed from the Ribbon.


The Designer/Editor can be invoked for the following objects:


form16.png   Form Designer
Report16.png   Report Designer
table16.png   Table Designer
tables16.png   Query Designer
webservices16.png   WebMethod Designer
text_code_server16.png   Module Designer
relationships16.png   Relationship Designer

The Left Docking Site, which by default is along the left side of the workspace, contains the Properties, Events and Styles Inspectors. The panel hides along the left side of the screen when not in use. Clicking the mouse cursor on the panel causes it to expand fully to the right; moving the mouse cursor off the panel causes it to contract. The panel may be locked in its expanded position by 'pinning' it in place with the Pin Button. Read more...


left-dock-panels.png
Left Docking Site


An Inspector can be moved from its original location by dragging it to another location on the workspace. In order to facilitate this movement, the Inspector must first be pinned in place. To move the Inspector back to its original pinned location, double-click the Inspector's title bar. An Inspector may also be closed by pressing the Close button. If you accidentally close a panel, you can reopen it by going to the Ribbon bar's 'View | Panels | Panels' drop-down menu and selecting the appropriate panel.


The Properties, Events and Styles Inspectors function as follows:


Properties16.png   Properties Inspector Overview
flash-events-16.png   Events Inspector Overview
brush-style-16.png   Styles Inspector Overview

Along the right side of the workspace, by default, is the Right Docking Site containing the Debug Scripts and Debug Source Inspectors. Read more...


right-dock-panels.png
Right Docking Site


The panel (by default) hides along the right side of the screen when not in use. Hovering the mouse cursor over the panel causes it to fully expand to the right; moving the mouse cursor off the panel causes it to contract.

The panel may be locked in its expanded position by 'pinning' it in place; press the Pin Button to do so.

These panels are of use only when debugging an application at the platform compiler level (JavaScript and Object Pascal for the browser and server portions of the application, respectively).


The Debug Scripts and Debug Source Inspectors function as follows:

bug_yellow16.png   Debug Scripts
bug_yellow16.png   Debug Source
cpu16.png   CPU View

Along the bottom of the workspace, by default, is the Bottom Docking Site a series of panels which come into play primarily during the compiling and debugging processes. Read more...

Bottom_Docking_Site.png
Bottom Docking Site


Located, by default, across the bottom of the workspace, the Bottom Docking Site contains a series of Inspectors that can be used when performing management tasks for your project or while debugging. These Inspectors include:

NewDocument16.png   Output
Stoptest16.png   Errors
text_code_server16.png   Search
NewDocument16.png   Log
bug_yellow16.png   Watches
bug_yellow16.png   Breakpoints
bug_yellow16.png   Call Stack
document_text16.png   XML
document_text16.png   JSON
document_text16.png   SQL
document_text16.png   HTTP

The application Status Bar provides a range of contextual information about objects. It is divided into several sections showing Zoom, Position, Style, Width and Height information. Read more...


statusbar.png
Status Bar


zoom16.png   Zoom Percentage
DesignView16.png   Edit State
MoreControls16.png   Control Name and Type
TopLeft16.png   Left and Top Positions
WidthHeight16.png   Width and Height
font16.png   Font Type and Size
brush-style-16.png   Style Details

Related Topics

Back to top