Getting the most out of Popup forms

Morfik AppsBuilder makes it very easy to use popups, but knowing exactly how to get the desired effect or appearance might not be immediately obvious. I noticed this, just this week, during a conversation with a friend.

I've, personally, developed my own pattern for using popups in my applications and handn't really stopped to consider that I was not touching all aspects of what you can do with them. When this friend showed me his application and asked me how to do somethings he hadn't figured out himself, it hit me that I hadn't really taken the time to exercise all the possibilities of popup forms.

With that perception and after a few consultations I set about looking up all the special parameters that can be used for customizing popups. The following is a list of these parameters.

• Modal - this is a boolean parameter which darkens the page outside of the popup and blocks user clicks to anything else. (Ex.: "modal=true")
• Title - this is a string parameter that allows you to set the title that will be displayed on the popup's caption. (Ex.: "title=Warning")
• Closable - this is a boolean parameter which allows you to disable the close button on the upper right corner of the popup. (Ex.: "closable=false")
• Draggable - boolean parameter which allows you to restrict the user's ability to drag the popup around the page. (Ex.: "draggable=false")
• NoBorder - boolean parameter which allows the form to be displayed without a border. (Ex.: "noborder=true")
• Center - this is a boolean parameter which allows the user to specify that the popup should appear at the center of the page. (Ex.: "center=true")
• Left - this is an integer parameter that allows the horizontal position where the popup will be displayed to be specified. (Ex.: "left=10")
• Top - this is an integer parameter that allows the vertical position where the popup will be displayed to be specified. (Ex.: "top=20")

I suggest you play around with these options in a call to OpenForm in order to see how the popup form behaves and looks.

Popup forms can be extremely valuable in allowing you handle data input and message display. These forms also open up entirely new interface possibilities.

New Tree control and utilities available from PannonRex

This week, as I mentioned in a previous post, a new, Morfik-specific, custom control was released by PannonRex, a long standing Morfik partner. The first control to come out is the visual equivalent of a treeview and it comes with a nice load of utility functions.

Though I have had the package for a couple of days, I haven't yet been able to sit down and do a careful review of what is included in the pack. It is a bit frustrating not being able to jump right in and go through the all the code, but the last few days have been extremely busy for me as I have had to take over the duties of Head of It for a small financial group. This combined with the fact that I was also making the final push in my move to the Mac to produce caos in my writing work.

The following figure shows a screenshot of the demo application that is bundled in the Pack


The tree control can show just about any well formatted HTML content for its nodes. This offers a good degree of freedom for creativity when planning your application's interface.

The PannonRex PMAP pack offers a nice touch of non-vendor-supplied technogy for those that want to dive deeper into building powerful Web-based applications.

New Morfik site: hidden clues of what is to come...

Doing a quick scan of the new Morfik website, searching for a specific bit of information I noticed that as I moved my mouse over links, their corresponding URLs/Paths were shown in the statusbar. If you haven't yet noticed, this is not only unusual, but totally out of character for a regular Morfik application.

Your everyday Morfik application uses a JavaScript event handler to treat clicks on on hyperlinks and therefore does not display any information on the statusbar. This made me curious and so I started passing my mouse pointer over just about anything I could find that remotely resembled a hyperlink. To my surprise, this was not an isolated event. Pretty much all links, I passed the pointer over, displayed such paths on the statusbar.

This seems like a great step forward for Morfik as whatever the technique that is being used, it should make Morfik-built websites that much more friendly to the search engines. The other main issue with getting a Morfik application indexed by a search engine was the fact that a Morfik website/App is extremely heavy on JavaScript, with very little actual HTML text to be indexed.

With this thought in mind I decided to run a test on the new website. I disabled JavaScript in my Safari browser and keyed to reload the website. The result was nothing short of phenomenal as very similar version of the JavaScript-heavy website came up. I was so astonished that the first thing I did was take a couple of screen shots, just to make sure I had this documented if they decided to make any changes that prevented me from loading this page in the future.

The following screenshots show two versions of the new Morfik website loaded, side-by-side. The screenshot on the left is with JavaScript enabled and the one on the left has it disabled.


Notice, how dispite having a few differences, both screen shots are quite similar.

It is clear that some new technique is being employed in the construction of this new website and the widespread presence of such large functional changes leads me to believe that the website is the result of some serious tweaking to the Morfik Framework or the Morfik compiler, or even both.

Whatever internal version of AppsBuilder Morfik may have used to create the new website, it is clear to me that Morfik has made a new breakthrough in how the browser side of an application is generated. I'll continue to look for new details I might have overlooked when I was searching the website for signs of other changes or new features.

Regardless of finding anything else, this new website seems to indicate that Morfik is moving its research and development into solving some of the structural limitations related to Ajax usage, just as when they were the first to solve the history (back/forward) list navigation issue.

New custom controls and utilities for Morfik 2.0

I received notice today of a company that is going ot make available a library with custom controls and utility libraries. This is a nice turn of events as it will allow us to see the first results from the new custom control/IDE interface and how it behaves.

I am waiting to receive download instructions for a trial/test version of this package and as soon as it is available I will write up a review/comment.

Sample Review: How2Videos

The new How2Videos sample project for Morfik 2.0 is a very interesting application to go through, if you are want to extend your Morfik development skills. To begin with, this applications mirrors most of the functionality you find in YouTube, which in it self is already interesting.

In order to duplicate YouTube's core functionality, this application relies on Flash, to provide the video playing capabilities. Flash is also used by that website, which means that the video playback quality is the same, which means that it is pretty much dependent on the quality of the videos you upload into it. Uploading the videos is another interesting point. To accomplish this the How2Videos sample uses the new FlashUploader control which was introduced with the release of AppsBuilder 2.0. Since the site's entire functionality must, almost by definition, rely on Flash there is no harm in using Flash to handle uploads.

The following screenshot shows the video management portion of the applications administrative area. Assuming there was no real reason to change these bits of the application, while digging around this sample, developers also get an insight at how Morfik staff manage this portion of their website.

Video Management portion of the How2Video sample's interface.

Another interesting aspect of application development which is covered in this sample is also related to this portion of the management interface: uploading files. Many websites and web-based applications depend on uploading specific content to the server for publishing. This is specially true in the case of adding or changing images published by the application. These sample handles this task in the simplest of ways: linking the FlashUploader control directly to a database table field.

The How2Videos application does not handle the upload of its own videos. This seemed a bit strange at first, but simply going over the data of the few sample videos which are in the project's database and looking at their URLs, it then became clear. Morfik uses this application in combination with a specialized file hosting service to speed transfer of the content, worldwide.

There is a code module in this application called Common, which is worth looking into. This module implements a class, called TXAppCookies, to support the usage of cookies in your application. This same class is present in likewise named module of the Issue Tracker application, also figured in a previous review. In both cases, though other specific utility functions were added to the module, this class seems to be the same. Perhaps this class could be added directly to the Morfik framework in a future release.

On the subject of coding, while going over some of the modules for this application, I ran into a nifty little trick. Morfik allows the user to create functions which are entirely written in JavaScript, regardless of the language they are coding in. Both in Morfik Pascal and Basic you can create a subroutine who's body is all JavaScript, but you cannot directly insert inline JavaScript code. By creating a nested JavaScript subroutine, this sample shows how you can execute a single line of JavaScript code right in the middle of your Pascal or Basic code. The following Pascal code snippet shows an example of this.

{................................................................}
Procedure frmHomeMainVideo.FullScreenLabelClick(Event: TDOMEvent);

Procedure StopPlayer(Id : String); Javascript;
(*! document.getElementById(Id).sendEvent('STOP'); *)

Begin
StopPlayer(FlashContainer.Name + '_FLV_player');
OpenForm('frmMainVideoPopup','popup','"prmVideoID=' +
prmVideoID + '","title=' + TitleLabel.Caption + '","modal=true"');
End;
{................................................................}

As nested subroutines are not a common practice in many programming languages, this little trick might not occur to developers coming into Morfik development from other languages and tools.

Overall this sample helps extend quite a bit the base reference you can draw upon when starting to create a new Morfik project. As with the Issue Tracker sample, the difference in size and complexity of the project pretty much ensures that a lot of new insights can be derived from it, if all you previously had to work with were the smallish samples that are bundled with both Morfik 2.0 versions. It should certainly be worth taking off a couple of hours to run the application and browse through its source code.

Sample Review: Issue Tracker

I'm going to start the series of reviews of the new sample applications, with the Issue Tracker. I chose this application because it clearly has real life applications and as such it seemed like a good place to start looking into what these new samples demonstrate.

Even though this is an obvious difference, the project's size is one of the most interesting aspects as a sample. Due to the restrictions of Morfik's new trial versions, which limit the number of objects in a project, the few bundled samples are quite small. Since these new samples are available only to registered customers, this is not an issue and the Issue Tracker project has 30 forms, 12 tables, 12 queries, 6 modules and 10 web method modules. Reviewing this application you will be able to get a better feel for how to organize a larger Morfik project.

This application has a nice example of how to implement Web Methods directly in code, without the need to create a specific module for each one of them. Despite implementing several Web Methods in the LogonWebMethods module, the Issue Tracker still has ten Web Methods implemented in the traditional way: one per Web Method module.

If you have used the Issue Tracker in Morfik's website, you should feel right at home exploring this application. It is essentially the same application that is used on their website, thought the login form that is used to grant access to all areas of the Morfik website has been replaced by a new one. This, of course, was to be expected.

Another interesting aspect of this application is the small rectagle with an animated image it displays while portions of the interface are loaded. The rectangle itself is created using a container with an animated GIF image and its visibility is controled through some code added to the OnBeginLoad and OnEndLoad events of the IssueTrackerXApp class. These events can be accessed throught the events side panel when in the Project View of the Morfik 2.0 workspace.

Considering its publication as a Sample application, it would be nice to have more comments in the source code, to make it easier for the new users to understand how to adapt the code to their projects. The source code is generally clear, however, and should be pretty much self explanatory to anyone willing to take a couple of hours to read through it.

When all is considered, this is an interesting project to look into, if your are just starting into Morfik programming as it shows some interesting code snippets.

Working with the new build and samples

I just started to work with the new build of AppsBuilder (2.0.5.27) and with some of the newly available samples.

I recommend that, as you start do work with the updated version, you should do a build of your projects, when recompiling them for the first time. If you don't do a full build, you might get some compile time errors. Doing a full build, once, does away with this problem and you are home free.

In the next couple of days I will be doing posts commenting on the some of the new samples, individually. My focus will be letting people know what they can expect to learn, if they dive into each of these applications.