First Application

thumbnail-browser.png Building your first application with Morfik
The best approach to mastering a new software development tool such as Morfik is to 'learn by doing'—so here is your chance to do just that. In this chapter, you will create your first web application from start to finish using some of the core features found in Morfik. No prior knowledge of Morfik is necessary.



Introduction

This article focuses on what you can do with Morfik. At this stage you do not need to know how or why—you will learn about those later.

Creating your first application—a guest book

At this stage, you might be saying to yourself, “Hey, wait a minute! I don't know anything about Morfik, or building a web application for that matter!” Well, fear not! We're not only going to show you how to build a web application from start to finish, we're going to prove how quick and easy it can be—even if you know nothing about application development!

We're going to build an online guest book application that lets users post messages to a message board. These tasks require a table(to store users and comments) and the user interfaces to view and add comments.

During the process of creating this application—with its specific functionality—you will be exposed to many of Morfik's core features.

If you haven't already done so, please first install Morfik. Complete instructions are available here. Otherwise, start Morfik and let's begin!

Step 1—create the project

To build an application with Morfik, you must first create a project for the application. To create the project, click on the 'New Project' command on the Home|New tab of the Ribbon bar.


new-project-m3.png
Figure 1: New Project Dialog


Note: The Ribbon bar changes dynamically depending on the context. If you have a project open, the 'New Project' button will not be visible. Either close the project, or access the New Project command or New Project Wizard through the Power Menu Button.

From the available list of templates on the New Project dialog choose a template that suits your project best. We select the 'Rocking Green' template, call the project 'GuestBook' and leave the location in its default state and within a new folder.

If the "Create sample pages" checkbox is ticked, the new project will include a number of sample Pages (including pages for hand held devices). These pages can also be added after the project is created using the "New Page" command.

Press the OK button and wait a moment as the new project is created. Your new project includes the main page template for the project called Index and a template page for an Apple iPhone (Figure 2). In this article we will focus on the Index page template. In a Morfik project Pages define your application's interface and internal organization as they define the placement of content and navigational structure.

new-project-projecttab-m3.png
Figure 2: A New Project is successfully created.


Congratulations! You've successfully created a web application! Granted, it doesn't really do anything useful, but that's not the point. By specifying the basic settings, and without having written a single line of code, you now have an application that can be compiled, executed, deployed and has a built-in high-performance database!

Step 2 - Create and configure Guests Comments Table

We will create a table to store information about guests and their comments. We use the Table Wizard to create the table and will call the table 'Guests'.

Press the 'Table' button on the Ribbon Bar's 'Project|Document Wizards' tab to display the Table Wizard. Enter "Guests" as the table name as shown in Figure 3.


table-wizard1-m3.png
Figure 3: New Table Wizard - Table Name


Press the Next button to continue.

We now need to label the various columns of the 'Guests' table. Press the 'Add' button to create a new column. Set Name to GuestID and the Type to AutoNumber (Figure 4) and then press the OK button to close the Field dialog box.


new-table-wizard2-m3.png
Figure 4: Defining fields (columns) in the New Table Wizard


Press the Add button again to create another new column. Set Name to FullName and Type to Text and then press the OK button to close the Field dialog box. Repeat the above steps to create three more columns:


COLUMN TYPE
EmailAddress Text
Comment Memo
ContactMe Yes/No


Once the above fields are added to the table, you should have the list of fields shown in Figure 5.


table-wizard-fieldlist.png
Figure 5: Completed list of fields


Press the Next button to continue.

You can now specify that the GuestID should be used as the primary key to uniquely identify each record in the table (Figure 6). Select the 'Yes, use the following field(s) as the primary key' radio button and then press the ellipsis button to display the Define Primary Key dialog box. Select 'GuestID' column in the "Define Primary Key" dialog and then press the OK button to close the dialog box.


table-wizard-pk.png
Figure 6: Defining the Primary Key in the Table Wizard.


Press the Next button to continue.

We're done defining the Guests table. Press the Finish button on the Wizard to close it (Figure 7).


new-table-wizard6-short.png
Figure 7: Completed New Table Wizard Complete


You will see the table and the fields that you just created in the Table Design View (Figure 8). Any further adjustments to the fields can be applied from here, but we will leave the default settings for this application.


table-guests-design.png
Figure 8: Table Design View


While we are here, let's add a dummy record to the Guests table for testing purposes. Press the [F12] key to switch to Table Data View (Figure 9). Answer 'Yes' if asked for confirmation on saving the table.

On the Home|Records tab of the Ribbon bar, click on the New Record command.

Add the following values in the record:

FullName : Jon Citizen
EmailAddress: jon@citizen.com
Comment: This is cool and I am very happy to have the first comments in this Guestbook sample project. Keep up the good job.
ContactMe: 1


table-guests-dataview.png
Figure 9: Table Data View


The GuestID column will automatically be assigned the value 1 when the record is updated. On the Home|Records tab of the Ribbon Bar, press the Update button to save the new record.

Close the Guests table. The table is now ready to be used in your project and you should be able to see the new table under the 'Tables' category in the Project Panel.

Step 3—Configure the Application User Interface

Any work on the user interface of the project can start from a Page that is created as part of the selected template. Depending on the project, we could either choose one of the existing pages in the template as the home Page or create a new Page with a layout closer to our project and use it as the home Page.

Since GuestBook is a relatively simple project, we use the existing Index Page in the project and start our user interface design.


new-project-projecttab-m3.png
Figure 10: Using the Index Page in the project


When working with Pages, the portion of a Page that is part of the Master Form (the very top level of the UI) is dimmed down (marked with 1 in Figure 11). The remaining part of the Page are divided into sections using subforms (marked with 2 in figure 11) with the subform containing a form. Forms are the canvas upon which you will do most of the work to create application visual interface.


page-new-index_M3.png
Figure 11: New Index Page


Double clicking on a subform or the dimmed area of Index page will open the form within the subform or the project master form respectively.

Start with double clicking on the header section of the page (part of the Master Form) to view the Master Form (Figure 12).


frmroot-orig.png
Figure 12: Project Master Form (frmRoot)


Customize the Master form header to suit our project with the following changes to the Caption and Width properties of TextLabel1 and TextLabel2:


TextLabel1 : TextLabel
Caption Guestbook


TextLabel2 : TextLabel
Caption Welcome to our guestbook, we'd love to hear from you
Width 500px


GuestBook is a simple project with only one Page and no need for navigation so we remove the list of links. We also remove the links in the Footer of the Master Form by deleting "Container6" which includes all the Footer links. Save and Close the frmRoot form. The Index Page header is now updated (Figure 13).


frmroot-updated.png
Figure 13: Index Page in an updated Master Form


Pages in Morfik projects are composed of one or more forms which are placed in specific locations of the page through the usage of a control called SubForm. The SubForm control defines an area of a page (or form) where another form will be inserted. Pages are thus created through the aggregation, formatting and layout of various forms. Double click on the Subform in your Index page to start designing the Form within the subform.

This form will be used to display a list of existing comments as well as allowing guests to add new comments. Dock the Property Inspector as shown in Figure 14:


page-frmempty-original.png
Figure 14: Form to be designed for viewing and adding comments


Start with setting up the following properties of the form:


frmEmpty
View Mode vmContinuousEditable
Data Source Guests
Page Size 50


The "vmContinuousEditable" view mode for forms allows viewing multiple records, as well as the ability to add or edit records at run time with grid-like behaviour.

Go to the Insert Ribbon and click on TextLabel control in Standard section. Then click on the Details Band of the Form to place a TextLabel on the form. While selected, switch to the Home Ribbon, then click on the "Style" command (in Appearance section) and from the drop-down list select "Heading6". Now we set some properties of the new TextLabel to display the guest full name.


TextLabel1 : TextLabel
Data Field FullName
Left 45px
Top 15px
Width 500px


Place a second TextLabel for the comments and position it under the guest full name TextLabel and while selected, apply the following property changes:


TextLabel2 : TextLabel
Can Grow Yes
Data Field Comments
Left 45px
Top 42px
Width 800px
Word Wrap Checked


We also draw a Line in between each entry by placing a Rectangle control from the Insert Tab(within the Extended section) under the comments TextLabel and apply the following changes through the Rectangle properties.


Rectangle1 : Rectangle
Border Sides Un-check "bs Bottom", "bs Left", "bs right"
Border Width 1px
Color None
Height 7px
Left 65px
Width 785px


Click on the Details band of the form and set the following property:


Detail : Band
Height 94px


Following the above changes, your form should look like the screenshot shown in Figure 14:

page-frmempty-updated.png
Figure 14: Updated Comments List Form

Step 4—Data Entry and project Preview

The current databound form will give us a list of guests and their comments from the Guests table but how do guests add new comments you may ask!

If you recall, we changed the "View Mode" for the above form to "vmContinuousEditable" which makes it a "Continuous Editable" form. These forms include record editing functionalities through the usage of a special editing band. The editing feature in Continuous Editable forms are automatically enabled and by double clicking on a record at run time it is possible to do in-place editing of the displayed records.

However there are still a couple of functionalities that we need to add to the form in order to do data entry at run time. Let's customize the "Edit Band" by right clicking on the Form and from the Form context menu, select “Customize Edit Band” (Figure 15).


form-editcont-setup.png
Figure 15: Customize Edit band in Continuous Editable forms


The above action makes the Edit band visible during design and allow us to customize it for Data entry. Please note that the Edit band is visible at Design time and is only displayed at run time when a new record command is called.

As you note, by default, the Edit band only include the editing controls for the fields that are shown in the Details band. We will customize the Edit band to show and allow data entry for all fields, except for the "GuestID" field which is of Auto-Number data type and is automatically incremented by the system.

Click on the Edit band and change it's height property as suggested below:


DetailEditable : Band
Height 232px


Select the existing edit control for FullName field (Edit_TextLabel1) and change the following properties:


Edit_TextLabel1 : TextEdit
Left 161px
Top 18px
Width 600px


Next, select the the edit control for Comments field (Edit_TextLabel2) and change the following properties:


Edit_TextLabel2 : TextEdit
Left 161px
Height 92px
Top 53px
Width 600px


It is now time to add editing controls for the fields that are not included in the Edit band by adding a new TextEdit control and setting it's Data Field to the EmailAddress field from the Guests table.

To save time, we make a copy of the existing TextEdit control. Click on the Edit control for FullName field (Edit_TextLabel1), then right click and select Copy (or use Ctrl+C) to make a copy of the control. Right click on the form and click on Paste (or use Ctrl+V) to add the new TextEdit control to the form.

Apply the following property changes to the new TextEdit control:


Edit_TextLabel3 : TextEdit
Data Field EmailAddress
Left 161px
Top 155px
Width 600px


The last control to add for editing is for the "Contact Me" field which is of type Boolean. Click on the Insert Ribbon tab and in the list of controls in the Standard section, click on Checkbox control. Move the cursor down under the EmailAddress edit control and click again. Make sure the new checkbox is selected and apply the following property changes:


Edit_Checkbox1 : CheckBox
Caption Contact Me
Data Field ContactMe
Left 161px
Top 189px


In the final stage of customizing the Edit band we add titles for each editing control. Click on TextLabel control in Insert Ribbon tab and place it next to the edit control for the Fullname field. While selected, go to the Home Ribbon, click on "Style" drop-down and select "Heading6" to apply formatting to the TextLabel and make the following suggest property changes:


TextLabel7 : TextLabel
Caption Guest Name
Left 45px
Top 19px


Follow the above steps to place titles next to each Edit control and update the Caption and Top properties according to the field they represent.

The Edit band customization is now complete and the last thing to do before we preview the project is to add a Navigation bar in the footer of the form.

Expand the Footer band by placing the mouse over the border of the Details and the Footer bands and click and hold down the left mouse button when the cursor looks like a double sided arrow and drag the Footer down till the height is around 45px.

Click on the empty Footer band and in the list of properties for the Footer, click on "Navigation Bar" ellipces. This opens the Navigation Bar dialog. Tick the "Enabled" and "Large Buttons" Checkboxes (as shown in Figure 16) and click on OK button.


form-navigationbar.png
Figure 16: Form Navigation Bar Dialog


You should now be able to see the navigation bar in the Form Footer which includes commands for Adding, Deleting, Editing and Submitting of records. All commands on the navigation bar are customizable or can be hidden.

Following the above Edit band customizations and changes to the form, your form should look like the screenshot shown in Figure 17.


form-editcont-final.png
Figure 17: Guest Comments form at design time


We have now completed our first application and can have preview by clicking on the Run button. Shortly after clicking on the Run button, you should see your application in the built-in browser (Figure 18).


Note: On systems protected by a Firewall, the 'Windows Security Alert' is displayed at the time of running the project or Previewing a form. You should not get this dialog if you click on "Unblock".


site-preview.png
Figure 18: Guestbook application at run time


Try Adding, Editing and Deleting some test comments to ensure all functionalities are in place and work as expected. Of course you can further customize the navigation bar and hide commands such as Delete or Editing of records.


Note: The built-in Morfik Debug Browser is used to display your application at run time. There are links to 5 major browsers and mobile devices on the debug browser that lets you view your application in different browsers and mobile devices. In order to use these browsers, you will need to have them installed on your system.

Step 5—Data Entry Validation

There are simple routines that we could apply to this project to improve its data integrity and functionality.

For example in the data entry form, we can check the entered values in the TextEdit controls before submitting the data and show a message if no valid information is entered. To do this, in the data entry form, double click in 'On Before Submit' event and add the following code:

FX Code

Procedure frmEmpty.WebFormBeforeSubmit(Var Cancel: Boolean);
Begin
    If (Edit_TextLabel1.Text.Trim = '') OR
       (Edit_TextLabel2.Text.Trim = '') OR
       (Edit_TextLabel3.Text.Trim = '') Then
       Begin
           Cancel := True;
           ShowMessage('All fields require data!')
       End;
End;

Conclusion

Congratulations! You've just completed your first Morfik application! To further empower the notion of 'learning by doing', we suggest you go through the sample projects that are installed with Morfik. Looking at the inner workings of a professionally developed application is another great learning approach.

Related Topics

Back to top