Using Graphical Effects to enhance presentation

The one part of your application that gets exposed to its users it the interface. Other than the application's overall performance, nothing else has as much influence on how users perceive your application as how good your interface looks and works. Aware of this, Morfik put a lot of effort into creating a development environment that allows visual design to fully expressed without the need of recourse to other applications.

Morfik offers a wide variety of special formatting effects that can be applied to bands, containers and controls allowing their appearance to be highly customized by the user. These effects can be used to great effectiveness in enhancing the user interface of your website or web-based application.

Effects Can Make a Difference

If have had no training or experience in design, you might not be immediately aware of just what a difference the careful addition of a visual effect or a touch of color can have in the overall impression that users get from your application. Using Morfik's visual form designer you can experiment with visual effects in truly WYSIWYG fashion, applying and modifying control, and band formatting to match your desired outcome.

In Figure 1 you can see some examples of what controls look by default and how they can look just through the simple application of one or more visual effects and formatting options.


using-graphical-effects-control-effects-sample01.png
Figure 1: Three pairs of controls with the default format/style and with some nice looking formatting applied.


Types of Effects Available

The following effects are available to be applied to different types of controls. Each control has a different set of effects that can be applied to it, according to how they are used in an application.

Glow

This effect creates a tight fitting halo around the control based on a selected color. This, when combined with bright colors, causes the impression that the object is glowing.

Applies to: Container, Rectangle, Button, TextEdit, ComboBox, ListBox, Image, DateTimeEdit;

Morfik offers many different ways to configure the glow effect for the controls to which it can be applied. In Figure 2 you can see all the options available in the Glow effect gallery. There are different variation on the size of the glow area combined with variations in the colors supported in the current theme.


using-graphical-effects-glow-gallery.png
Figure 2: The glow effect gallery options as shown in the Home tab of the Ribbon when a compatible control is selected.


In Figure 3 you can see a container with a glow effect applied to it.


using-graphical-effects-container-with-glow.png
Figure 3: A container with the glow effect applied.


In some situations you might wish to use the Shadow Effect instead of the Glow effect.

Shadow

This effect creates a tight fitting shaded area around the control based on a selected color. This, when combined with dark colors, causes the impression that the object is projecting a shadow.

Applies to: Container, Rectangle, Button, TextEdit, ComboBox, ListBox, Image, DateTimeEdit, Form Bands;


using-graphical-effects-shadow-gallery.png
Figure 4: The Shadow effect gallery as shown in the Home tab of the Ribbon when a compatible control is selected.


In figure 4 you can see three containers with different types of shadows applied to them. The first one has an inner shadow applied while the other two containers have variations of the outer shadow applied to them.


using-graphical-effects-three-kinds-of-shadow.png
Figure 5: Three containers with different types of Shadows.


In some situations you may wish to use the Glow effect instead of the shadow effect.

Reflection

This effect creates a mirror image of the control to which it is applied, underneath it. The distance and size of the reflected image is selectable from the Reflection gallery which is shown in the Home tab of the Ribbon when a compatible control is selected.

Applies to: Container, Rectangle, Button, TextEdit, ComboBox, ListBox, Image, DateTimeEdit;


using-graphical-effects-reflection-gallery.png
Figure 6: The reflection effect gallery as seen on the Home tab of the Ribbon when a compatible control is selected.


using-graphical-effects-reflection-sample.png
Figure 7: A TextLabel control with the reflection effect applied to it.


Note: When using the Reflection effect on TextLabel controls, especially when using large sized fonts, you might wish to combine them with the Antialiasing effect for better results.

Though the Reflection effect can be applied to a wide variety of controls it is most commonly used with the TextLabel and Image controls. In figure 8 you can see an Image control being reflected.


using-graphical-effects-reflection-sample-image.png
Figure 8: An Image control with the reflection effect applied to it.


using-graphical-effects-reflection-sample-buttons.png
Figure 9: A set of Button controls with the reflection effect applied to them. These Buttons are also using the Gradient effect and in some cases the Corners effect.


Gradient

This effect creates a smooth gradient fill for the control, based on the control's color. There are two sets of gradient options: Darker and Lighter. The Darker gradients form a transition from the control's selected color to black, while the Lighter gradients form a transition from the control's selected color to white.

Applies to: Container, Rectangle, Button, TextEdit, ComboBox, ListBox, Image, DateTimeEdit, Form Bands;


using-graphical-effects-gradient-gallery-red.png
Figure 10: The Gradient gallery as displayed in the Home tab of the Ribbon when an compatible control is selected.


using-graphical-effects-blue-button.png
Figure 11: A Button with a Darker gradient applied on top of a blue color.



Image controls have a different range of options available for creating gradients. In image control gradients are defined between two gradient specific colors, instead of between the control's selected color and black or white. In figure 12 you can see the Image control's Gradient effect gallery.


using-graphical-effects-image-gradient-gallery.png
Figure 12: The Gradient gallery as displayed in the Home tab of the Ribbon when an Image control is selected.



You select the two colors for the Image control gradient effect from the Effects Options dialog which can be accessed by clicking in the small icon on the bottom right corner of the Appearance group on the Home tab of the ribbon. It is also possible to set the opacity for each of the colors used as a base for the Image control gradient, which will give you a different effect as the resulting image will become partially transparent.


using-graphical-effects-gradient-light-over-blue.png
Figure 13: A container with a Lighter gradient over a blue color.


using-graphical-effects-gradient-over-picture.png
Figure 14: An Image control with a radial gradient of black to whiter over a picture, on the left and of light grey to white on the right.


With the appropriate opacity levels set, the effects shown in Figure 14 either darken the edges of the picture, or make it fade into the surrounding background. These effect options can be used very effectively in support of an overall page design.

Antialiasing

This effect creates softens the transition between the foreground and background color around the edges of the text of selected controls. Antialiasing greatly reduces the raggedness of the edges in characters and is recommended for titles in your website which will not change as it converts the text into an image. This is something to keep in mind as transforming too many labels into images will make for a "heavier" page to download.

Applies to: TextLabel, Button;

Antialiasing is the easiest of the effects to use as it is essentially an on/off toggle. The control is either using or not the effect with no options to configure.


using-graphical-effects-antialiasing.png
Figure 15: Two TextLabel controls showing the same text.
The control on the bottom has Antialiasing on while the one on the top has the effect off.


Note: The Antialiasing effect allows you to achieve better looking results when large text is presented over contrasting colors, however it should be used sparingly as each TextLabel or Button control to which the effect is applied generates a new image in the project. Usage of too many images in a page may result in longer page loading times.

Corners

This effect allows you to select a set of corners in a control that will be "rounded". This effect allows you to soften your layout by eliminating some of the right angles.

Applies to: Container, Rectangle, Button, TextEdit, ComboBox, ListBox;


using-graphical-effects-corners-gallery.png
Figure 16: The Corners effect gallery as shown in the Home Tab of the Ribbon when a compatible control is selected.



Morfik offers a large number of options for configuring the corners of your controls, as you can see in the picture in Figure 16. The following are some examples of what you can achieve by applying the Corners effect to Morfik controls.


using-graphical-effects-different-corner-style-buttons.png
Figure 17: Several buttons with different variations of the Corners effect applied. These buttons are also using the Gradient effect.



These are just some of the ways in which the Corners effect can be used and combined with other effects to help you achieve great looking results in your website or application. Similar effects can be applied to other controls such as the Rectangle and the Container to establish a certain style which is specific to the application being created.

Combining Effects

All of these effects can be effectively combined in the same control (according to which ones are available for a specific control) in order to achieve a desired result. If fact, it is quite frequently the case for some controls. Button controls, for example, frequently have the Gradient and Corners effects applied to them. Figures 9 and 17 show good examples of combining the Gradient and Corners and even adding Reflection effects in Button controls.

Applying effects to dynamically created controls

Morfik effects are determined at compile time and the corresponding images are generated at that point. This means that you cannot just have these effects applied to a control you create dynamically at runtime. You can, however, copy the background image of a pre-existing control to another control.

The following code snippet shows the browser side code to achieve this.

Procedure Content.Button1Click(Event: TDOMEvent);
Var
   cnt : Container;
Begin
   Button1.ControlStyle.Clear;
   Button1.ControlStyle.Assign(Button2.ControlStyle);
End;


The following code snippet shows the server side code to achieve this.

Procedure Content.Button1Click(Event: TDOMEvent);
Var
   cnt : Container;
Begin
   Button1.ControlStyles.Clear;
   Button1.ControlStyles.Assign(Button2.ControlStyles);
   Button1.ControlBackground.Assign(Button2.ControlBackground);
End;

Changing the Image Associated with a Button's Style

The following code snippet shows how to change the image associated with a button at runtime.

Procedure ChangeIcon(btn : Button; icon : String);
Var
    back : THTML_ElementExt;
Begin
    back := THTML_ElementExt(btn.DomHandle.GetElementsByTagName('div')[0]);
    back.Style.backgroundPosition := '0 0';
    back.Style.backgroundImage    := 'url("' + icon + '")';
End;

As show in a previous example you may what to clear all style information from the control, if you are making extensive modification. This can be achieved with the following code which works on both the server and browser side.

Button1.ControlStyle.Clear;

Visual Design with Control Effects

Morfik makes the creation of great looking designs very easy. In fact it makes it so easy that care must be taken not to overindulge. Careful application of visual effects to certain controls can help you achieve a great look for your application while too much can lead pages that look "heavy".

Not infrequently, applying a gradient or a shadow will be enough to completely change your user's perception of a web page. The following two screenshots show the same content but with different effects applied.


using-graphical-effects-siteframe-with-no-effects.png
Figure 18: CMS sample application with a blank SiteFrame form.



using-graphical-effects-siteframe-with-effects.png
Figure 19: CMS sample application with a formatted SiteFrame form.


By comparing the pictures in the two Figures immediately above you should notice that the website's contents in Figure 18 do not present the same sense of order and neatness as what you can perceive from Figure 19. A very thin border with a slight shadow effect have been added to help define where the site's actual content starts from what is purely the browser window's background. To avoid giving the site a rough or unprofessional feel, slightly rounded corners were introduced to the bottom of the border and shadow line.

Visual Effects and Images

Most, if not all, of the effects that can be applied to a control will imply on the usage of one or more images by your application. Morfik automatically generates the required images as part of the application compilation and in the process of doing so it places a lot of effort into doing so intelligently. Morfik will avoid creating twice the same image when applying effects such as gradients and can apply image bundling automatically, if the user enables that option

Image bundling automatically combines several images into a larger so as to provide faster download times for the end user and then automatically splits the combined image as appropriate on the browser side of your application. All this is handled transparently by the Morfik development environment and the Morfik Framework.

It is important to note that even with the much increased bandwidth generally available today and with all the effort that Morfik automatically puts in making as few images as possible and making these as small as possible, images do increase the overall number of bytes that need to be downloaded by a user that is accessing your website of web based application. This can make your application take longer to load, when accessed from low bandwidth locations.

See also

Related Topics


Back to top