Creating a Branded App with Magic Software's uniPaaS Application Platform: Mastering the Z-Order of Controls

Creating a Branded App with Magic Software's uniPaaS Application Platform: Mastering the Z-Order of Controls

There is a lot of talk today about the branded app. These are usually mobile apps but sometimes a branded app needs to be a web app or at least an application delivered via the Internet such as a RIA app that floats in a window above the browser -free of all the security and reliability issues that the browser itself imposes. So recently, as the Magic teams from France, Germany, Israel and the Americas headed to Dreamforce ’11 (#DF11) I found myself wanting to keep track of all the sessions we would be participating in at the conference.  Unfortunately, the Dreamforce Chatter application didn't have that functionality. It seemed to me that I ought to be able to add meetings and appointments to the My Calendar section of the Dreamforce app, but alas, I could only add the sessions for which I was eligible to register. So with a little creative daydreaming, I started to wonder, how I might create an event calendar application in uniPaaS and make it look like a branded app for Dreamforce. That exercise got me thinking about the Z-order of controls. 


The uniPaaS Dot Net Tutorial provided the perfect sample program in Events .NET Calendar. But I wanted to make it look like a Dreamforce application. So with a little help from my browser, Photoshop and an understanding of the Z-Order of Controls in uniPaaS, I was able to get my sample application to look just the way I wanted. I wanted a branded app.

From the uniPaaS Jet Dot Net Tutorial, I clicked on the Programs Repository in the Navigation Pane in the upper right and then zoomed (F5) on the Events .NET Calendar. This opens the program in the Studio. I wanted to play with the look of the program because the Control itself was kind of a drab gray typical Windows control.

The first step was to find a couple of images that I wanted to use. My preferred graphic image editor is PhotoShop. I pasted a couple of images into PhotoShop and saved them as JPEG files.

Back in uniPaaS Studio, I selected the Forms tab and zoomed (F5) on the second form which was also named Events .NET Calendar. On the uniPaaS Studio Forms Control Pane, I selected the Image icon and then clicked on the approximate position where I wanted the upper left corner to appear.

Some tweaking of the image position was needed. So the precise X, Y coordinate can be set for the image’s Navigation Control Properties.

The Z-Order of controls in a form is the depth of the controls as you insert them. The Z-Order becomes particularly important when you superimpose controls on top of one another.

Here is an example where images and controls are partially overlayed. You will note that one of the two women in the photographic image is not visible. Why? Because the Z-order of the entire image is essentially underneath the .NET control that contains the calendar.

uniPaaS recognizes two groups of controls with regards to Z-Order:

Group I	Group II
Push buttons Check boxes Radio buttons Sliders Combo boxes List boxes OLEs RTFs Tree Control Subforms Browser Control	Images Tabs Static controls Edit controls Lines Groups

You can rearrange the Z-Order within the two groups, but not between them. uniPaaS automatically arranges the Z-Order between Group I and Group II controls. For example, if you were to place an Edit control on top of a Push Button control, the Z-Order would arrange the controls so the Push Button control would be placed in front. You cannot bring a control from the second group in front of a control from the first group. You use theArrange context menu or the Command palette to display or change the Z-Order of controls on a form.

To adjust the Z-order you have to make sure Automatic Z-Order is not selected on the Command palette. That’s the  icon shown here. You should also learn how to use the other icons to Bring Forward One Level, Send Back One Level, Bring to the Front, Send to the Back and Display the Z-order.

So with very little effort, a ho-hum control can be enhanced with the use of images and become a branded app. When I deployed my Magic Software uniPaaS Application Platform RIA program in a Window over the Dreamforce web page the result was very pleasing from an aesthetic standpoint.