A Blog Application
From Morfikwiki.com
| Note | |
 | This topic is currently under development, being updated to reflect the latest version of Morfik AppsBuilder. If you would like to see the description for creating a blog with Morfik 07, please refer to Morfik 07 - Creating a Blog Application. |
This topic explains how to create a Blog application with Morfik AppsBuilder R2, using mostly visual development and writing as little code as possible. This was an exercise that was done for Morfik 07 and revisited for AppsBuilder R2, 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.
In the Morfik R2 version, this application adds support for an RSS Feed and a very basic kind of user authentication, to prevent unauthorized editing of the posts.
The result of this exercise can be seen in Figure 1, which shows the blog application running in the Morfik Debug Browser (Firefox based).
[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 user is to actually access this XApp through all the main web browsers. There should be no perceptible difference in the application when viewed in IE, Firefox, Safari or Opera.
Figure 1 – Blog XApp running in the Morfik Debug Browser (Firefox based).
The next Figure shows the same page being displayed in Opera.
Figure 2 – Blog XApp running in the Opera.
Figure 3 shows the Admin section of the Blog website, which is the area which will be used by the blog’s author.
Figure 3 – The Admin section of the Blog website being displayed in Apple's Safari browser.
[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] Pages and Forms, Organizing Your Information
In Morfik, Pages are the highest level organization entity for an application or Website. Pages let you put together a group of Forms in a specific layout, in order to display the your information in a nice and consistent manner.
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 large work in form composition, in order to get exactly the desired effects.
[edit] MainPage: The starting point…
In order to be able to easily switch between the two areas of the website we will create a page for each. We will start with the MainPage which will be your Website's home page.
Figure 4 – View of the MainPage page in Morfik workspace. This page is the starting point for the Blog Xapp.
This page will display the forms which have been assigned to its composing sections, properly arranged in relation to one another. When any user accesses this application with the browser, he/she gets back the MainPage, which will then bring into the browser the download five forms: MainHeader, MainFooter, ArticleSummaryList, BlogProfile and SideBar. The SideBar form, in turn, will download three additional forms that makeup the information that appears under the blog's profile data on the right side of the page.
[edit] General site layout...
The general layout of information in the website is defined by the layout applied to the MainPage page, when regular users are using the website to read recent posts or browser through the archives.
This page uses a layout with has a header and a footer and splits the area in between into three areas.
Both the MainHeader and MainFooter forms are connected (data bound) to the BlogInfo table, which holds basic information about the Author and the blog. These forms, as their names suggest, are responsible for the contents that are displayed in the Header and Footer sections of the MainPage page. In Figure 5 you can see the MainPage page with each section numbered. Sections 1 and 2 take the role of Header and Footer, respectively, while section 3 holds the main content for the home page, section 4 contains the BlogProfile form and section 5 contains the Sidebar form which will bring in three additional forms with summary information about the blog posts.
Figure 5 – MainPage page with its sections numbered.
Looking closely at the MainPage page you will notice that the area between the Header and the Footer is divided into three sections, which are statically bound to three forms: ArticleSummaryList, BlogProfile and SideBar.
In both the header and footer, the MainPage page displays information about the blog itself, such as name, description and copyright terms. It is in the MainHeader 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 AdminLink control.
Procedure MainHeader.AdminLinkClick(Event: TDOMEvent);
Begin
If AdminLink.Caption = 'Admin' Then
Begin
OpenPage('AdminPage', '');
AdminLink.Caption := 'Home';
End
Else
Begin
OpenPage('MainPage', '');
AdminLink.Caption := 'Admin';
End;
End;
The AdminLink 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 page AdminPage. Essentially, this will replace the entire website by the blog administration site. when the user is already in the Admin section of the website, this link will be showing the word "Home" and when clicked will take him back to the blog's home page.
[edit] ArticleSummaryList: Viewing the ten most recent posts…
A large section of the MainPage 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 6 – ArticleSummaryList form. Article view inside the MainPage page.
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 7 – 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 ArticleTitle and ReadMoreLink controls.
Procedure ArticleSummaryList.ArticleTitleClick(Event: TDOMEvent);
Begin
ArticleId.BandIndex := GetEventSource(Event).BandIndex;
OpenForm('ViewOneArticle','MainPage:SubForm1', '"ParamId='+ArticleId.Caption+'"');
ScrollToTop;
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 ArticleId TextLabel control 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 (ArticleTitle TextLabel) or the "Read more…" option (ReadMoreLink TextLabel), the event handler shown in listing 2 will be called and will switch the content of the SubForm1 subform in page MainPage 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 ScrollToTop procedure 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. This small procedure is defined in the project's Globals module.
[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 MainPage page’s SubForm1 section/SubForm, so that the user will be able to read a complete article.
Figure 8 – The ViewOneArticle form.
In this form the only existing code is associated with the onClick event of the "Return Home" link which is the ReturnLink control. This code returns you to the default view of the blog, by switching the content of the MainArticleArea subform in form MainPage page 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.ReturnLinkClick(Event: TDOMEvent);
Begin
OpenForm('ArticleSummaryList','MainPage:SubForm1', '');
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] BlogProfile: Information about the Blog’s Author
The BlogProfile 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 9 – The BlogProfile form.
Note that this form has symmetrical Corners effects applied to both its Header and Footer bands which gives it a "softer" appearance. This effect is used throughout this application to provide a more subtle finish to the different data regions of the Website.
[edit] SideBar: Easy access to shortcuts…
The SideBar form is used for formatting convenience, allowing us to host three different forms in a single section of the MainPage page. This form contains three SubForm controls which will display the following forms: RecentArticlesList, ArchiveList and BlogRoll. Each one of these forms will be discussed separately in further detail.
Figure 10 – The SideBar form.
[edit] FavoriteLinks: Recommended links…
The BlogRoll 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 11 – The BlogRoll 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 BlogRoll.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 12 – The 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','MainPage:SubForm1',
'"ParamId='+IdLabel.Caption+'"');
ScrollToTop;
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 13 – 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 SubForm1 Section/SubForm of the MainPage.
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','MainPage:SubForm1',
'"ParamId='+IdLabel.Caption+'"');
ScrollToTop;
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.
The AdminMain form uses a single SubForm control to host other forms. Each one of these Forms will be responsible for allowing data manipulation of one of the three tables data store all the blog application's data.
The three images that you can see in figures 15 to 17 show how each of the Forms which will be shown inside the AdminPlace SubForm of the AdminMain Form.
Figure 14 – AdminMain form showing the AdminPlace SubForm control.
The AdminMain form has basically the purpose of creating a tabbed menu for the selection of part of the blog's data will be viewed/edited. The code in the AdminMain form is associated to the OnClick event of the the three buttons which have been formatted to resemble a colored set of tabs: ArticlesTab, LinksTab and ProfileTab.
This code switches the content of the AdminPlace subform of the same form, to display the necessary Form for viewing or editing the selected type of data.
Listing 7 – Code to switch back to the main blog area of the website.
Procedure AdminMain.ViewBlogClick(Event: TDOMEvent);
Begin
OpenPage('MainPage', '');
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.
Note that this form has a green color applied to a header section that has a height of only 2 pixels. This effectively creates a line that seems to merge with the Green Tab that is associated with this Form in the AdminMain Form.
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.
Note that this form has the red color applied to a header section that has a height of only 2 pixels. This effectively creates a line that seems to merge with the Red Tab that is associated with this Form in the AdminMain Form, as the case with the previous Form.
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. As with the previous two forms, this one also has a colored band at the top, to match the corresponding tab in the AdminMain form.
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 topic was to demonstrate that it is possible to create applications which are quite sophisticated and benefit from a full Ajax implementation, in Morfik, while actually writing very little code.
Most of the code in this project is actually generated by the Morfik workspace, such as the class declarations, while only a handful of lines were actually hand coded.
