Morfik 07 - Creating a Blog Application
From Morfikwiki.com
This chapter explains how to create a Blog application with Morfik, using mostly visual development and writing as little code as possible. This was an exercise I put myself up to, in order to demonstrate how visual application development can be applied to Web application development, drastically reducing the effort necessary to create a reasonably good looking application.
The result of this exercise can be seen in Figure 1, which shows the blog application running in IE 7, as a normal user will see it.
[edit] Focus on Code
In describing in this chapter how the application was created, I have not gone into all the details of how all the visual effects, such as the dotted lines, were implemented. They are all done visually, through the use of the form designer and can easily be reproduced.
Since it would not be practical to try do describe, in writing, all the steps necessary to reproduce the visual styling of the application, I will leave it as an exercise to the reader to download the project from the blog website, from labs.morfik.com, and study how the effects were implemented. Our focus on this chapter will be on the code necessary to make this application work; what little of it there is.
[edit] Multi-browser Compatibility
Another exercise which might be of interest to the reader is to actually access this XApp through all the main web browsers. I have done so with all the browsers I personally have access to, and there is not even a minor difference in what is displayed with Internet Explorer 7, Firefox 2 and Opera 9.
In verifying this I used a 19" LCD monitor, in portrait mode, showing the entire length of the blog’s start page to look for inconsistencies. I also placed the browser windows side by side (2 at a time) to check for discrepancies. I found nothing. Considering that this application, though simple in the amount of code it requires, is quite complex as far as element positioning and style is concerned, I was very impressed by this.
Figure 1 – Blog XApp running in IE 7.
The next Figure shows the Admin section of the Blog website, which is the area which will be used by the blog’s author.
Figure 2 – The Admin section of the Blog website.
[edit] Structure of the Blog Application
Since the goal of this project was to create this sample application in as simple a manner as possible, but whose techniques would be usable to just about everyone, this application relies only on three tables: Articles, BlogInfo and Links. It also relies on three queries. We will see all these data sources in use, further along, as we see how the application is visually designed.
The blog website is divided into two Areas: Blog and Admin. The Blog area is where users will go to read the posts in the blog and navigate through its archives. The Admin area is for use by the blog owner and is designed for creating new posts and editing existing ones, updating the author’s profile and blog parameters as well as the favorite links displayed on the website.
The entire website can be said to be divided into different information views. At all times, what you see in the browser is a combination of several information views. Morfik is especially good at creating such information centric applications, as we will see.
[edit] Forms, Organizing Your Information
Forms are the pieces from which you put together the interface for your application/website. In most cases forms are views into specific information which you want to display to the users of your site/application. Our whole application is a big work in form composition, in order to get exactly the desired effects.
[edit] Index: The starting point…
In order to be able to easily switch between one of these areas and the other, a root form called Index was created in this project. This form has only one subform control, which will contain the entire website in it, and it covers its entire detail band. When the user first accesses this site, the subform control is statically bound to the BlogMain form. When any user attempts to access this application with the browser, he/she gets back the Index form, which will then bring into the browser the BlogMain form, which will in turn, download three other forms.
The purpose of having this form is to allow you to change the entire content of the page in one action. This way, we can easily move back and forth from the blog interface (implemented in form BlogMain) to its Admin interface (implemented in form AdminMain).
Figure 3 – Index form. Starting point for the Blog Xapp.
[edit] BlogMain: General site layout...
The BlogMain form is responsible for the general layout of information in the website, when regular users are using the website to read recent posts or browser through the archives.
This form uses all three of the standard bands: header, details and footer. The BlogMain form is connected (data bound) to the BlogInfo table, which holds basic information about the Author and the blog.
Figure 4 – BlogMain form. Main layout of the website.
Looking closely at the BlogMain form you will notice that it has three subform controls, in its details band, which are statically bound to three forms: ArticleSummaryList, AuthorProfile and SideBar.
In both the header and footer, the BlogMain form displays information about the blog itself, such as name, description and copyright terms. It is in the BlogMain form that we add our first snippet of code to the Blog XApp, as shown in listing 1.
Listing 1 – Event Handler for the OnClick event of the TextLabel4 control.
Procedure BlogMain.TextLabel4Click(Event: TDOMEvent);
Begin
OpenForm('AdminMain', 'Index:FullSite', '');
End;
The TextLabel4 control is a label that can be seen in the top/right corner of the form with the text "Admin". This label, when clicked, will load up the form AdminMain inside the FullSite subform of the the BlogMain form. Essentially, this will replace the entire website by the blog administration site.
[edit] ArticleSummaryList: Viewing the five most recent posts…
A large section of the area covered by the BlogMain form is occupied by the ArticleSummaryList form. This form presents the title and summary of the five most recent posts to the blog, grouped by date.
Figure 4 – ArticleSummaryList form. Article view inside the BlogMain form.
The ArticleSummaryList form is ordered and grouped by the date in which a post was published. In order to appropriately handle the grouping for this view a special calculated column had to be added to the RecentArticles query. This column, defined as: "x : xsDay("DatePublished")" extracts just the day, in which the article was published.
The resulting SQL command is as follows:
SELECT ALL
"Articles"."Title",
"Articles"."Summary",
"Articles"."DatePublished",
xsDay("DatePublished") AS "x",
"Articles"."Id"
FROM
"Articles"
This command was created visually, through the Query Builder.
Once the query is correctly prepared you create the desired group bands in the form by choosing the "Sorting and Grouping" option under the "Edit" menu. This will bring up the dialog that appears in the following Figure.
Figure 5 – Defining sorting and grouping for the ArticleSummaryList form.
It is in the ArticleSummaryList form that we will add the second code snippet to our application. The code you can see in Listing 2 is used to handle the OnClick event of two different controls and basically replaces the view with the most recent posts with a new one which contains the detailed view of the specific article on which the user clicked.
Listing 2 – Event Handler for the OnClick event of the TextLabel1 and TextLabel4 controls.
Procedure ArticleSummaryList.TextLabel1Click(Event: TDOMEvent);
Begin
TextLabel5.BandIndex := GetEventSource(Event).BandIndex;
OpenForm('ViewOneArticle','BlogMain:MainArticleArea',
'"ParamId='+TextLabel5.Caption+'"');
window.scrollTo(0,0);
End;
When working with continuous forms it is important to ensure that the referenced controls contain information from the desired band. This is achieved by setting the BandIndex property of the controls, as in the code in listing 2.
It is interesting to note that the TextLabel5 which is located in the form has its visible property set to be invisible and is only on the form so as to make it easy for us to have access to Id of each article.
When you click on either the title for the article (TextLabel1) or the "Read more…" option (TextLabel4), the event handler shown in listing 2 will be called and will switch the content of the MainArticleArea subform in form BlogMain from the ArticleSummaryList form to the ViewOneArticle form. This will allow the user to read the full article, instead of its summary.
Also, of interest in this small code sample is the use of the window.scrollTo method which scrolls the browser window back to the top. This ensures that the user will be able to start reading the desired article, without having to scroll back to the top, manually.
[edit] ViewOneArticle: Reading a full article…
The ViewOneArticle form is very simple, displaying the Article’s title and full body. It is through this form, when it is displayed inside the BlogMain form’s MainArticleArea subform, that the user will be able to read a complete article.
Figure 6 – The ViewOneArticle form.
In this form the only existing code is associated with the onClick event of the "Return to Home" link which is the TextLabel4 control. This code returns you to the default view of the blog, by switching the content of the MainArticleArea subform in form BlogMain from the ViewOneArticle form to the ArticleSummaryList form. You can see this code in Listing 3.
Listing 3 – Code for the "Return to Home" option in the ViewOneArticle form.
Procedure ViewOneArticle.TextLabel4Click(Event: TDOMEvent);
Begin
OpenForm('ArticleSummaryList','BlogMain:MainArticleArea', '');
End;
This form uses a Query called GetOneArticle as its data source. This query has one parameter which is passed to the form when it is opened as can be seen in Listing 2.
This query is visually designed and defined as:
SELECT ALL
"Articles"."Title", "Articles"."DatePublished",
"Articles"."Id", "Articles"."Body"
FROM
"Articles"
WHERE
"Articles"."Id" = ParamId
[edit] AuthorProfile: Information about the Blog’s Author
The AuthorProfile form is very simple in nature. All this form does is display a couple of fields from the BlogInfo table which contain the author’s name and a short bio. This information is displayed in a separate form just for formatting convenience.
Figure 7 – AuthorProfile form.
[edit] SideBar: Easy access to shortcuts…
The SideBar form is used for formatting convenience, providing a thin border around the forms it will host in its subforms. This form contains three subforms which will display the following forms: FavoriteLinks, RecentArticlesList and ArchiveList. Each one of these forms will be discussed separately in further detail.
Figure 8 – SideBar form.
[edit] FavoriteLinks: Recommended links…
The FavoriteLinks form is used for displaying a list of links which the Author is recommending. This form follows an exact formatting standard along with forms RecentArticleList and ArchiveList.
Figure 9 – FavoriteLinks form.
In this form you can see a TextLabel control displaying the text "LinkURL". This control, (URL TextLabel) is data-bound to the LinkURL field of the Links table and has its visible property set to false. This is useful when the LinkLabel TextLabel that shows the name of the link is clicked, so that the appropriate URL is available. The code for handling the OnClick event of LinkLabel is as follows.
Listing 4 – Code for the '''OnClick 'event of the '''LinkLabel 'control.
Procedure FavoriteLinks.LinkLabelClick(Event: TDOMEvent);
Begin
Url.BandIndex := GetEventSource(Event).BandIndex;
Window.open(Url.Caption, '_self', '');
End;
[edit] RecentArticlesList: Recommended links…
The RecentArticlesList form is used for displaying a list of the 10 most recent posts in the blog. This form follows an exact formatting standard along with forms FavoriteLinks and ArchiveList.
Figure 10 – RecentArticleList form.
In this form you can see a TextLabel control displaying the text "Id". This control, (IDLabel TextLabel) is data-bound to the Id field of the Links table and has its visible property set to false. This is useful when the IdLabel TextLabel that shows the name of the link is clicked, so that the appropriate URL is available. The code for handling the OnClick event of IdLabel is as follows.
Listing 5 – Code for the '''OnClick 'event of the '''IdLabel 'control.
Procedure RecentArticlesList.LinkLabelClick(Event: TDOMEvent);
Begin
IdLabel.BandIndex := GetEventSource(Event).BandIndex;
OpenForm('ViewOneArticle','BlogMain:MainArticleArea',
'"ParamId='+IdLabel.Caption+'"');
window.scrollTo(0,0);
End;
[edit] ArchiveList: Archive of old articles…
The ArchiveList form is used for displaying a list of all the years and months in which posts were made in the blog. This form follows an exact formatting standard along with forms FavoriteLinks and RecentArticlesList.
Figure 11 – ArchiveList form, showing a grouping header and footer.
As you can see in Figure 11 this form also employs sorting and grouping in order to present the desired interface elements to the end user of the blog. The ArchiveList form will display a list of years with an indented list of months, for all the dates in which a post was made to the blog.
This form uses as its data source the visually designed query ArchiveQuery, which is defined as:
SELECT ALL
"Articles"."Title",
"Articles"."Summary",
"Articles"."DatePublished",
xsDay("DatePublished") AS "x",
"Articles"."Id",
xsYear("DatePublished") AS "y"
FROM
"Articles"
As in the other we have just seen, ArchiveList also has an invisible TextLabel control which is data-bound to the Id field of the Articles table. This is useful when a user clicks on the title of an article, to specify which article should be brought up in the ViewOneArticle form, inside the MainArticleArea subform of form BlogMain.
In this form, the LinkLabel control has the following code associated to its onClick event.
Listing 6 – Code for the '''OnClick 'event of the '''LinkLabel 'control in form '''ArchiveList'''.
Procedure ArchiveList.LinkLabelClick(Event: TDOMEvent);
Begin
IdLabel.BandIndex := GetEventSource(Event).BandIndex;
OpenForm('ViewOneArticle','BlogMain:MainArticleArea',
'"ParamId='+IdLabel.Caption+'"');
window.scrollto(0,0);
End;
[edit] AdminMain: General site administration...
The AdminMain form is responsible for the general layout of information in the administration portion of the blog website. This form employs a TabControl in order to allow for easy access to all the necessary options for maintaining the website.
Just as with the BlogMain form, the AdminMain form uses several subform controls to host other forms. The three images that you can see in figures 12 to 14 show how each of the tabs in the TabControl are laid out, each TabSheet with a subform control taking all its internal space.
Figure 12 – AdminMain form showing the Posts TabSheet.
Figure 13 – AdminMain form showing the Profile TabSheet.
Figure 14 – AdminMain form showing the Links TabSheet.
The AdminMain form has basically a layout definition purpose. The only code in the AdminMain form is associated to the OnClick event of the ViewBlog TextLabel control which can be found inside its header band, on the right hand side. This code switches the content of the FullSite subform of the Index form, to BlogMain, thus leaving the Administration part of the website. In order to make sure that the blog’s interface correctly displays any data that was changed while in the Administration section, a refresh of the blog’s main form, BlogMain, is requested by usage of the "OpenMode=Refresh" parameter on the call to OpenForm.
Listing 7 – Code to switch back to the main blog area of the website.
Procedure AdminMain.ViewBlogClick(Event: TDOMEvent);
Begin
OpenForm('BlogMain', 'Index:FullSite', '"OpenMode=Refresh"');
End;
Each of the TabSheets in the TabControl in form AdminMain contains a subform which is statically bound to one of the following forms: CreateEditPosts, CreateEditLinks and EditProfile.
[edit] CreateEditPosts: Adding and maintaining articles of the blog
This form is bound to the Articles table and allows you to add new articles or edit pre-existing ones.
Figure 15 – The CreateEditPosts form.
The CreateEditPosts form displays the Navigator in its footer band, allowing for a full range of database functions. In order to display the Navigator of a data bound form, configure the Navigator property of the footer band of the form.
[edit] EditProfile: Maintaining the author’s profile
The EditProfile form allows for the editing of a single record in the BlogInfo table. This table holds some basic information about the blog and its author and should never have more than one record.
Figure 16 – The EditProfile form.
As you can see in Figure 16, the EditProfile form displays a reduced version of the Navigator in its footer band. In order to achieve this sort of effect you should configure the navigator property of the footer band, as previously mentioned.
[edit] CreateEditLinks: Adding and maintaining favorite links
This form is bound to the Links table and allows you to add new articles or edit pre-existing ones.
Figure 17 – The CreateEditLinks form.
The CreateEditLinks form is very simple, only allowing the author to maintain a list of links described by a name and a URL.
[edit] Wrapping it up
The main objective of creating the application shown in this chapter was to demonstrate that it is possible to create applications which are quite sophisticated and benefit from a full Ajax implementation, in Morfik, while writing very little code.
Most of the code in this project is actually IDE generated, such as the class declarations, while only a handful of lines were actually hand coded.
