Displaying a Striped List

It is quite common for lists of information displayed in a web page to present a striped color pattern.  Such a pattern is useful for enhancing the reader's ability to keep track of what is written in a single line.

The picture bellow is a screenshot of an application that is using this technique.

It is quite easy to produce such an effect using a Morfik continuous form, by adding a few lines of code to a server side event of the Detail Band.  The basic trick is to have a Rectangle control behind everything that is on the Detail band and then make it visible or not, on a per row basis.

The following code snipped, assigned to the band's OnBeforePrint event does exactly that.

Procedure ListArticles.DetailBeforePrint(Sender: TWebControl; Canvas: TWebCanvas; Var Print: Boolean);

Begin

    If LineNo mod 2 = 0 then

        DetailStripedBackground.Visible := true

    else

        DetailStripedBackground.Visible := False;

End;

Understanding and Using Morfik Helper Methods

Morfik AppsBuilder 2.0 introduced a very interesting feature for those of us that have an interest in writing elegant code. This feature is called Helper Methods and it pretty much allows you to add methods to any type in the Morfik language.

With Morfik Helper Methods you can add new functionality even to primitive types of the language such as integers, strings and booleans. The following code snippet is a short Helper Method written in Morfik Pascal.

function Boolean.ToString: string;
begin
   if Self then
       Result := 'True'
   else
       Result := 'False';
end;

The same methods could be written in Morfik Basic as shown in the following code snippet.

function Boolean.ToString as string
  if Me then
     Return "True"
  else
     Return "False"
  end if
end function

This topic is a bit too extensive to go into all the detail in a regular post, so I decided to make available for download a PDF version of longer article called Understanding and Using Helper Methods.

The information contained in this article is part of the material I have been putting together for the new book I am currently writing.

Copying Forms from Browser to Web Projects

Morfik AppsBuilder 2.0 allows you to work with two kinds of projects: Browser and Web. Browser projects are strictly client side, running entirely inside the browser and Web projects include both browser and server side code.

If you created a Browser project and found out that you are really going to need some server side code, there is no need to despair. Though there is no way to convert a project from one type to the other, you can create a new project and copy your objects from the other.

Copying objects between objects can be achieved in the simplest possible way, just Copy in one and then Paste into the other. This works flawlessly for just about all types of objects and all in types of projects, except for a small problem when you try to copy a form from a Browser project and paste it into a Web project.

Since Browser project Forms do not have any server side code, the IDE creates the server side module and class declaration and your form has been moved across. There is a small glitch in AppsBuilder build 2.0.4.78 (the first release build of AppsBuilder 2.0) that causes the member declaration for the controls in the form to be omitted from the generated server side code. It is very easy to get around this small issue. All you need to do is copy the member declarations for the controls from the Browser side form class declaration and paste them in the appropriate place in the server side version of the corresponding class.

This tiny issue taken care of, you are all ready to go.

Using a watermark in a Morfik application...

As I mentioned before, Morfik AppsBuilder 2.0 introduced several new design oriented features. Among these features are the ability to create fully transparent forms and to regulate the opacity of individual controls. By combining these two new features you can very easily create a watermark effect for your application or website.

The following picture shows a sample application I am updating to take advantage of Morfik 2.0 features. As you can see it uses stylized world map as its watermark.

To achieve this result I stated by creating placing an image control within a container and loading it with the picture chosen for the watermark.  This image had its opacity dialed down so that it would show through some of the white background, fading the image which would otherwise get in the way of the user actually reading the text.

To complete the effect forms with NoColor selected as background were used in conjunction with rectangles which had their own opacity died down so as to provide a good enough background for reading the text but not totally hiding the watermark.  Though you might be tempted to use containers instead of rectangles that would not be a good idea.  In the case of rectangles, when you lower the value of their opacity all included controls have their opacity level reduced as well.

Now that you have seen the sort of effect that can be achieved I you try it out for your self to see just how far you go in creating an application which is both aesthetically pleasing and functional, at the same time.

Thoughts on how Morfik AppsBuilder 2.0 came to be and where it is going...

Through all of the current decade, application implementations have continuously moved to a web-centric model. Most applications created are now “web-based” even when their sole purpose is to be usage inside a corporate environment. This choice mainly derives from the ease of use of web interfaces, from the familiarity that most users get from using the word wide web, and from the ease of deployment.

Web applications, however, though not difficult to create when very simple in nature become increasingly hard to code when their complexity grows. Most Web related technologies were developed as mechanisms for document definition and not really suited for the development of applications, making some aspects of their use cumbersome. This began to change some years ago with a set of technologies collectively known as Ajax, which allows for a much more sophisticated communication between the code running on the browser and the server. The use of these technologies, however, further complicates the development process requiring extensive specialized knowledge on several different standards (HTML, HTTP, XML, CSS, SOAP, WDSL, etc) from application developers.

Into this scenario came Morfik. Morfik AppsBuilder 1.x was an application development tool that allows developers to create sophisticated Ajax applications without needing to have any knowledge whatsoever of the underlying technologies. The Morfik AppsBuilder 1.x’s Integrated Development Environment (IDE) directly supported several dialects of commonly used programming languages making it easy for many seasoned application developers to have complex web based applications up and running in a very short time. Morfik also makes it possible for these developers to reuse their extensive experience and segments of existing code, instead of having to learn an entirely new set of skills.

Having established an initial position for AppsBuilder as an environment for experienced software developers to create sophisticated Web based applications Morfik moved on to create AppsBuilder 2.0. AppsBuilder moved into previously unexplored country by adding an extensive list of visual design oriented features, making it much easier and simple, as well as much faster, to create a visually compelling Web applications.

At the same time, apparently based on user feedback, Morfik decided to consolidate the number of language syntaxes they supported in Object Pascal (Morfik FX) and Basic (Morfik BX). Both of these languages have been in use in visually oriented development tools for the creation of desktop and client/server applications for well over a decade and thus have large user communities who seem to be very interested in the prospect of having the same kind tools they used to create Windows applications for creating Web applications.

Morfik AppsBuilder 2.0 goes way beyond what you could achieve in the Windows tools, while going out of its way to remain easy to use. I guess the best way to describe the new Morfik IDE is as a MASHUP of Access (for the database creation parts), Delphi (for the programming parts) and PowerPoint 2007 (for the visual design parts). This combination of features from such disparate applications actually yields an amazingly well integrated and easy to use design and development environment.

From my perspective Morfik AppsBuilder is an ideal tool for startup companies to quickly develop their prototypes and take their applications to production. It is also perfectly suited for independent software vendors with its high-performance natively compiled server code and its non-reproducible obfuscation for browser code which combine with a highly productive development environment and a reliable open source (and thus having no licensing costs) relational database server.

Of course, there are many other uses for Morfik AppsBuilder that range from creating plain websites (something which version 2.0 made possible) to fast prototyping applications (even if implemented in other tools due to pre-existing corporate standards).

Morfik has certainly raised the bar for how you design and build highly interactive web applications, with its next generation environment. At a time when even Microsoft haters seem to believe that all development tools need to look and behave like Visual Studio, Morfik takes a totally different direction tightly integrating visual design with application creation and making it all easy to use.

AppsBuilder 2.0 brings some much needed and very refreshing innovation to development tools.

How did we get to this point?

Quickly going over the first items posted here, on MorfikWatch, I noticed that perhaps it was time to write a little about how Morfik AppsBuilder 2.0 came to be and how it has been positioned in the Market up to this point.

My next post will be a short review of this history and of my own personal perspective on the tool's appeal to certain groups of developers.

The best way to do Ajax is not to know what Ajax is...

I believe that anyone who tries out Morfik AppsBuilder, specially release 2.0, will agree that the best way to create an Ajax based application is to use this incredible tool and its great visual designer.

As you don't really need to know anything about Ajax to create a great looking web based application with Morfik AppsBuilder...

First third party custom control for Morfik 2.0

The first third party custom control for Morfik 2.0 has been created by PannonRex, a consulting and development company from Hungary. Mr. Péter Illés, the company's CEO and an experienced Morfik developer told me over a quick Skype chat, that he had just finished porting the old Analog Clock control for Morfik 1.x to Morfik 2.x.

The overall time for porting the Analog Clock control to the new custom control infrastructure was just a few short hours of work. (Four hours approximately.)

A short post has been published on the PannonRex blog.

Using overlays for creating a glossy reflex

Many websites use a glossy look on some or all of their buttons.  This glossy like look is one effect you will not find on the Morfik 2 Ribbon.  You can, however, as you will see, reproduce this same look using a simple technique: applying an overlay.   In this case, a semi-transparent rectangle which is placed over the control to add this glass-like feel to it.

As an example, the following image is a small strip of buttons that is used as a top level menu for a small application.  The buttons in this image just have a simple gradient effect applied to them.

The next picture shows the very same buttons, with four rectangle controls which are semi-transparent applied over the four buttons.  The rectangles, where appropriate, have been configured to have rounded corners.

You can see this technique applied in the BookCollector sample that is bundled with Morfik AppsBuilder 2.0 (both FX and BX).

Overlaying rectangles over buttons, while yielding a good looking visual effect does present a small problem when the user tries o click on the button but actually clicks on the rectangle.  This same issue shows itself if you define different states for the buttons to have a rollover appearance change.

In order to get around this issue you can use the HandleEffect method in the events of the rectangle control to cause the respective button to visually and logically react to the appropriate state change.

The following code snippet shows the event handler for the MouseOver event of one of the rectangle controls.

Procedure MainForm.GlossyRect1MouseOver(Event: TDOMEvent);

Begin

    Button1.HandleEffect('mouseover');

End; 

Creating a glow using a custom shadow

Among the most noticeable new features of Morfik AppsBuilder 2.0 are the visual effects.  These effects allow us to create great looking websites and applications with much greater ease than with any previously available design tool. These effects allow us to work at the control level, instead of working with a lot of small loose images.

Since Morfik 2.0 is such a new tool, most of us are still learning what we can accomplish with individual effects and with their combination.  Recently, while experimenting with the use of custom shadow configurations on a button, I stumbled upon an interesting glow-like effect.  You can see the difference between two versions of a button in the picture bellow:

 

As you can see in the above images the shadow can make a huge difference on how the button looks, without looking remotely like an actual shadow.  The following picture shows the custom configuration for this button's shadow.

As this experience demonstrates there might be some nice effects hiding under the most obvious ones.  I recommend that you do your own experiments with Morfik AppsBuilder 2.0 and check out what you can accomplish.

Morfik Videos - Learning Morfik YouTube style

With the release of version 2.0 of AppsBuilder and the unveiling of a totally new company website Morfik is also introducing Morfik Videos.

This new website is a Morfik Built YouTube look-alike which is filled with interesting videos showing different aspects of how the product can used. This site is worth checking out for both its video content and to see that you can implement an application very similar to YouTube entirely in Morfik.

The picture bellow is a screenshot of the Morfik Videos site running in Safari for Windows.

Morfik Hosting coming your way

From the recently unveiled Morfik website we can already see one of the new directions in which the company is moving: hosting.

The Morfik AppsBuilder 2.0 IDE sports a Deploy button on its Ribbon toolbar and on clicking on it a dialog pops up asking for several parameters, including a domain name. The suggested domain name: morfikspace.com is a nice hint, but the new company website goes as far as setting prices for different hosting plans.

In a quick chat, Morfik's Shahram Besharati told me that the hosting service is undergoing testing and will be available to the public in the near future, but no date has been set yet.

Theme Support in Morfik 2 - A Quick Look

Morfik AppsBuilder 2.0 has extensive support for themes. This allows a website or application to be created in such a way as to be possible to radically alter the set of colors, fonts and control styles used in it.

The following screenshots show: first the default look of the main form of the BookCollector sample that comes bundled with Morfik AppsBuilder 2, and then the same form with a new theme being selected.

Default look for the main form of the BookCollector Sample.

Main form of the BookCollector sample while a new Theme is being chosen.

As you can see the application looks quite different in the second screen shot, while maintaining the same character as the original look had.

Morfik 2 comes in two flavors

Morfik AppsBuilder 2.0 comes in two flavors: BX for developers used to working with the Basic languages and FX for users used to working Object Pascal.

Differently from Morfik 1.x, where a single product allowed you to create projects in any supported language, Morfik 2 has a different version for each language. While this might seem like a step back from the previous version it has been my experience that people seldonly alternate between languages.

It is important to highlight that in my first tests the BX version was quite capable of opening a project created with FX and vice versa. You can open, compile and run a project created in a language different from the one which is the standard for that specific edition.

The only restriction in this new language scheme seems to be regarding project creation. You can even create new modules for projects in the other language and they will be created in the default language of the project even if it is different from the standard for your edition of Morfik 2.

One other important aspect of the newly announced Morfik AppsBuilder, which might be related to this change, is that the cost of joining the party is now significantly lower. You can get Morfik AppsBuilder 2.0, either BX or FX, for only $499.00.

Morfik 2 Popup Customization

Morfik AppsBuilder 2.0 allows you to extensively customize what HTML popups will look like.  This is done by inserting a Popup control onto a form, changing its formatting and properties to reflect what you want it to look like and then updating the default style for the control.

Since this control will not be visible in your application, but you might want to make changes to what the popups look like, you will probably want to keep it.  In this case I recommend creating a separate form in which to place such "model/template" controls.

In a future note I will discuss styles in a bit more detail as they are one of the more interesting aspects of the new version (2.0).

Morfik AppsBuilder 2.0 has been released!

This is a great day for Web application developers. Morfik is releasing version 2.0 of its great web development tool: Morfik AppsBuider (codenamed M2).

The first thing that you will notice when you see the new version of Morfik is that the interface has been entirely redesigned. The change is so tremendous that you will be hard pressed to believe it is the same application. The new IDE employs some of the interface design elements of Microsoft Office 2007 such as a Ribbon-style toolbar. As far as I know it is the first development environment to embrace such a radical change in interface but the result is surprisingly good. The new interface is a great fit with the new enhanced design features and visual effects, though I have to admit that I could be a bit biased, having been present when some portions of it were originally created.

The second incarnation of this great web development tool has received a large number of new features, specially in the area of visual design and effects. In fact, there are so many effect combinations that you can apply to controls that AppsBuilder 2.0 might actually cause designers to retire Photoshop or similar tools for casual web design.

One other feature of version 2 which might interest designers is the ability to create pure browser based applications. These browser-only applications do not require any server side code or special server support of any kind. When working on with browser-only Morfik projects it is possible to create great looking websites. This extends the possible roles in which Morfik AppsBuilder 2.0 can be used.

There are, also, some new features which are not visual in nature but that should be well received by developers such as helper methods that allow the extension of all of types in the Morfik programming languages. This feature is more likely to interest hard core developers than web designers, but is just goes to show that no one was left out when new features were being added to AppsBuilder 2.0.

Following this note I will post several others which will briefly highlight some of the most interesting features of Morfik AppsBuilder 2.0.