All posts by Jasper

Since 1990 developing the GUI driver of UNIFACE. Started with OS/2 and moved later to Windows. Also developer of Android apps. Jasper de Keijzer GUI developer, UNIFACE Compuware b.v.

Uniface Modernization: Modern buttons are flat

New button properties are welcome

During the modernization of IDF 9.7 it became clear that 3D buttons could not be used anymore. Windows has gone flat and all the office applications as well. So we needed to address this with some simple properties on the command button widget. The defaults stay untouched even though the new properties make the button more appealing. So we don’t break the look and feel of the existing applications but open the possibilities to a modern user interface.

Properties explained

These new properties make the difference and allow the UNIFACE developer to change the looks of the entire application in a wink. You need to set the button representation to “UNIFACE” is you want to make use of the new properties.

Uniface

With the new properties we were able to completely mimic the Windows 8 tiles as well as the common flat buttons.

Some examples

In the following example the “Transparent” property is set while the button is placed on a form with a very colorful image. Not very user friendly, since it looks like a label, but it shows the possibilities.

A button with transparency set to TRUE.

Uniface

The following table shows a button with an image which is styled in different ways:

Uniface

New property value

Unifac

During the modernization of IDF we missed the option to create big buttons with an image big enough to fill up the button. The “imgsize” property has a new value to accommodate the workspace buttons in IDF.

Uniface

Example the UNIFACE Journey planner

If we start making changes to GUI widgets or the GUI driver, we always look to other applications and try to make the user interface in UNIFACE. For the buttons I took the Android application made by the Dutch national railway company NS. With the new button properties we could mimic the user interface completely. Following picture shows the UNIFACE Journey planner which uses flat buttons.

Uniface

To make designing the application more easy, I created logical widgets with the necessary properties, so I was able to paint the Journey planner very quickly. Creating the logical widgets was some work but after this you can develop an application following a certain theme. You can paste the following buttons into you usys.ini to get the looks as shown in the sample.

pltimebutton=ucmdbutton(representation=uniface;transparency=true;forecolor=white;frametype=bottom;framecolor=#9bd1f3;framewidth=2;font=SansLarge)

plheadbutton=ucmdbutton(representation=uniface;backcolor=#ffcc33;transparency=false;forecolor=black;frametype=bottom;framecolor
=#dcab1e;framewidth=5;font=SansHuge)

plplanbutton=ucmdbutton(representation=uniface;backcolor=#3395e4;transparency=false;forecolor=white;frametype=bottom;framecolor
=#1762cc;framewidth=5;font=SansHuge)

pldepariv=ucmdbutton(representation=uniface;backcolor=#1b8ee1;backcolorhover=#349ae5;backcolorfocus=#349ae5;transparency=false;
forecolor=white;frametype=bottom;framecolor=#9bd1f3;framewidth=4;font=SansHuge)

pldfromto=ucmdbutton(representation=uniface;backcolor=white;backcolorhover=#349ae5;backcolorfocus=#349ae5;transparency=false;
forecolor=#272775;frametype=off;framecolor=;framewidth=1;font=SansHuge;imgsize=img_xlarge;halign=left)

I hope this helps you in creating modern looking UNIFACE applications and modernizing existing applications.

Styling entities and area frames in Uniface 9.7

In Uniface 9.7 we added powerful options to modernize your Uniface application without having to change your code.

Many applications need to run on many desktops and for our Value Added Resellers it may even run at various customer sites. Sometimes it is even a requirement that these sites use different color settings and logo’s. If you have to maintain this customized look using the Property Forms of the Uniface Development Environment it takes a lot of effort.

In Uniface 9.7 we took steps to make this easier:

  • We added new properties on the entity level that will enable you to make an entity (area) look nice.
  • We added a mechanisme to set these properties for individual entities in the .ini file, so outside of your code.
  • We made all graphical entity properties available for Area Frames too. These are only available  from the .ini file.

Bookstore Form without styling:

bookstore_old

Same Form with styling in .Ini file:

bookstore_new

The following example shows how areas on a form can be highlighted with a kind of card layout:

cards2

The Properties

There are properties for the border, the color, and image for the area frames and entities. Some of them are already exists for Shells, Windows or Entities in Uniface. The new property names “borderradius” and “bordercolor” are taken from the W3C standards on CSS.

Border Properties

BorderType
You can give your Entity or Area Frame different types of border.

  • Flat
    The border is one pixel in size and falls inside the area frame. This means that fields painted at the inner edge of a frame area overwrite the border. By default the border is darkgray. You can customize a Flat border with the BorderColor and BorderRadius properties.
  • Groove
    A groove border shows an edged border with a width of 2 pixels and falls inside the area frame. There is no gap between the colored area and the border.

The border that you can set in the Form Painter is separate from this and still works as it did. If you have a border in the Form Painter and have specfied the BorderType property, you will see both.

BorderColor
When you have specified BorderType=Flat, you can set the color of the border with BorderColor.
BorderRadius
When you have specified BorderType=Flat, you can set BorderRadius to give the border round corners by specify the number of pixels for the radius.
DropShadowColor
When you specify a DropShadowColor, your frame will be displayed with a shadow effect in the specified color.
borders2

Background Color Properties

BackColorFill
Defines whether the BackColor is shown as a solid color (BackColorFill=Flat) or as a gradient color (BackColorFill=Gradient). Flat is the default.
BackColorStart
When BackColorFill has been set to gradient, the color by default runs from white to the specified background color. With BackColorStart you can make the gradient start from any other color.
GradientStart
When you have specified BackColorFill=Gradient, you can use GradientStart to specify whether you want to start the gradient from the Top (default), Bottom, Left or Right.
colors2

Background Image Properties

BackImage
With BackImage you can specify an image that will be displayed as the background for the whole Entity or Area Frame. (Not per occurrence.)
HAlign
Set HAlign to Left, Right or Center to position the image horizontally.
HScale
Set HScale to a percentage to scale the image. Default is 100 (no scaling is applied).
PreserveAspect
Set PreserveAspect to True to preserve the aspect ratio of the image. The default is False.
VAlign
Set VAlign to Top, Bottom or Center to position the image vertically.
VScale
Set HScale to a percentage to scale the image. Default is 100 (no scaling is applied).

images

Attach Property

The Attach property now also works on entity and area frames.
All values (left,right,top,bottom, hmove, vmove, hsize, vsize) are supported. So in combination with setting the attach properties on fields, you can make resizable areas on your Forms:

attachframe

Setting the Properties

Altough the Entities and Area Frames have the same new properties, there are differences in the ways in which you can apply these properties.

Setting the Properties on Entities

Proc Code
You can set properties on entities using the familiar $entityproperties function. All new properties are dynamic so you can change colors etc. at runtime.

Property Form
For the Entity, some of the properties that are discussed in this blog already exist. You can set them on the Property Form for the Entity in the Development Environment. The really new properties can be set on the More Properties form.
entprops

.Ini file
In the .Ini file, the properties for entities can be set in the [entities] section.

Assigning properties to DefEntity applies them to all Entities in your application:

[entities]
DefEntity=udefentity(Properties)

For example, give ALL entities a border:
DefEntity=udefentity(BorderType=Flat;BorderColor=Black)

The practical value of setting the same properties on all entities is quite limited in a real application, so we also made it possible to set the properties in a more precise manner:

Entity{.Model{.ComponentName}}=udefentity(Properties)

For example, give the Customer entity a color on all Forms:
CUSTOMER.INSURANCE=udefentity(backcolor=powderblue;bordertype=Flat;bordercolor=navy;borderradius=6px)

This really allows you to control the look of your application without having to recode.

Setting the Properties on Area Frames

For Area Frames, the properties are exclusively controlled through the .Ini file. You set them in the [areaframes] section.

One option is to assign properties to “Frame”. The name “frame” is a special frame. This one is used for all frames that do not have a name or are not in the list of area frames in the usys.ini. This is necessary to allow an existing application to be “pimped” without renaming existing area frames. In most cases, the area frame does not have a name because the developer never gave it one.

[areaframes]
Frame=uframe(properties)

For example make all Area Frames blue:
Frame=uframe(backcolor=powderblue)

We also made it possible to set the properties in a more precise manner:

[areaframes]
FrameName{.ComponentName}=uframe(Properties)

For example give the INFO Area Frame a border on every Form:
INFO=uframe(BorderType=Flat;BorderColor=DodgerBlue)
Or give all Area Frames on Form CUST001 a shadow:
Frame.CUST001=uframe(DropShadowColor=Navy)
Or give the INFO Area Frame on CUST001 some properties:
INFO.CUST001=uframe(BorderType=Flat;BorderColor=DodgerBlue;DropShadowColor=Navy)

This really allows you to control the look of your application without having to recode.

 

Named Area Frames
The concept of named Area Frames may not sound familiar to you. In Uniface it always has been possible to rename area frames in the Form Painter, but it had practical use only when printing.

Area frames can have a name, which is used to address them from the usys.ini. The name can be changed in the Form Painter, and does not have to be unique.

In the Form Painter you paint an area frame:
areaframe_before
Then right click it:
areaframe_rename
Then select Rename:
areaframe_newname
Assuming that we have this in our .Ini file:

[areaframes]
bok=uframe(backcolor=dodgerblue;backcolorfill=gradient;dropshadowcolor=gray;backcolorstart=lightyellow;borderradius=20px;backimage=@4balls.png;valign=bottom;halign=left;PreserveAspect=TRUE;hscale=50;vscale=50)

When you click OK, you get the following in the GFP:
areaframe_after

Considerations

Attach Property
The widgets inside the area do NOT inherit the Attach property of the area.
So if the widgets need to move with the area, you need to give them an Attach property too.
Printing
The properties are ignored when the area frame or entity is printed. The scope is the GUI only.
Color Inheritance
Fields or widgets on top of the areaframe or entity will only inherit the backcolor property value and do NOT take the gradient into account when inheriting the color.
Form Painter
The Form Painter will display entity and area frames with the properties that are set in the .ini file. You will NOT see the effect of the properties set in the More Properties form.

Example

Same Entity, different properties:
different

 

HTML Widget with a Java Applet: How to stop security warnings

Security warnings are hindering the end user when starting a Java applet in the Uniface HTML widget. This document provides a step-by-step guide on how to stop the security warning and even block them with a so called “rule set”.

Security warnings the old way

According to the documentation of Oracle, the end user will in almost all cases be presented with a warning when starting a Java applet in the browser for the first time. Even the lowest possible security setting in the Java console explains:

Medium – All applications are allowed to run with security prompts.

See http://docs.oracle.com/javase/7/docs/technotes/guides/jweb/jcp/jcp.html

Also the list of exceptions shows in the java console that you can be prompted by a security warning:

Image 1

By switching the cache ON in the Java console the warning is only displayed once. After this the application runs without warnings and can even be re-started.

Image 2

Other options

Keep the security settings in the Java console on High which by default blocks the applet completely.

Image 3

Add the URL to the list of exceptions:

Image 4

In my case this was:

file:///D:\usys91\HTML_JavaApplet\mx04\dynamic\applet_ComponentArch_DynamicTreeDemo\build\classes\AppletPage_WithAppletTagUsingJNLP.html

Including the page name!

This means that the security is not compromised and the warning is only shown once when the cache is on.

Rule set and no warnings at all

As explained earlier, you can run a java applet without security warnings by using a rule set however the applet must be signed for this and a so called deployment rule set jar file must be added. In the following places you can find some documentation. In the next chapters I describe a step by step process to get the Java applet running in a UNIFACE html widget without warnings.

https://blogs.oracle.com/java-platform-group/entry/introducing_deployment_rule_sets

http://wraithhacker.com/java-deployment-rule-set/

How to stop the security warnings for a known applet

In the following chapters I will take a step by step approach to make it possible to run a known applet in the UNIFACE html widget without bothering the end user with security warnings. The applet JAR file, in this sample, is on the end user computer as well as the html file referring to this applet. Of course the file:/// can be replaced by a server site location like http://

This small manual on how to get the “rule set” working is based on the Dynamictree sample of Oracle. You can find this sample on the following address:

http://docs.oracle.com/javase/tutorial/deployment/applet/examplesIndex.html

Download the zip file with all the bits and pieces you need:

http://docs.oracle.com/javase/tutorial/deployment/applet/examples/zipfiles/applet_ComponentArch_DynamicTreeDemo.zip

Before you start, be sure that you have your path variable set to the java bin folder otherwise the command lines shown in the steps won’t work.

Used command line tools

Command Description
Jar Creates a Jar archive
Keytool To create a keystore, certificate
Jarsigner To sign a jar archive with a keystore file.

 

Download the step-by-step document

Tab widget extensions for 9.6.04

The new tab widget also known as the TabEx has got some new properties. This small article shows how they work and what it looks like. The new properties are introduced to allow developers to mimic a kind of browser look and feel whereby tabs can be closed or opened based on events in the programming language. For this purpose we introduced a tab button which lives on top of the selected tab. Some developer talk about a close button but this depends on the programming code in the extended trigger of the Tab.

The UNIFACE lab has chosen to follow the MS Internet explorer look and feel. This means that the button is only shown on the active tab.  There is no standard definition in Windows for showing the button on a tab se we had to choose.

The new properties should be defined in the more properties form.

Property TabButton
A button on top of the active tab is shown when this property is set to true.

Property name: “TabButton”

Values: TRUE | FALSE (default)

The active tab shows a small cross when this property is set. By default the button is a cross with the foreground color of the tab. So it follows the label color. When hovered it shows a small button with a red cross.

Tab Widget Image 1

The lab added some extra properties to allow the 4GL developer to design its own tab button.  By default the tab works and looks nice however a developer who wants to be in control can use the following new properties to design a distinct look.

Property TabButtonImg
Defines the image on top of a tab button.

Property name: TabButtonImg

Value:

When a valid image is defined the button will show this instead of default cross. Following image shows the tab widget with the tabbuttonimg=@ball.png and tabbutton=true

Tab Widget Image 2

Property TabButtonImgHover
Defines the image on top of a tab button when the button is hovered by the mouse pointer.

Property name: TabButtonImgHover

Value:

Defines the image which is shown when the tab button is hovered.

Extended trigger onTabButton

When the button is clicked the tab widget fires the onTabButton extended trigger. There are no parameters. The developer can use the current field value to act on the active tab.

; -- start triggers for tab widget 
trigger onTabButton

end ; trigger onTabButton

Overview of the sample
Following picture shows an overview of the used tabs in this document and the opened form.

Tab Widget Image 3

Overview of what is Possible with the TabEx Widget

TabEx Widget

The new TabEx widget has so many properties that I thought that it would be nice to have an overview what is possible and what the default behavior of this modern widget is.

History

The tab widget implementation started in the UNIFACE lab after many requests from customers to have different colors on the tabs. The Windows tab control cannot handle this option. To see whether it was feasible to write a control from scratch I started to program at the max for one hour a day to see whether this would work. After half a year there was something what could be shown to product marketing and so the story started. There was enthusiasm and this caused the start of an official project with extra developers, testers and a technical writer.  During this complete project, even from the trial, I looked at hundreds of tab widgets on the Web and other Windows applications and each time I found something the new tab could not do. The design changed until all possible tabs could be realized. So at the end, almost all possible tab widgets, how strange they may look, can be made with the new TabEx widget. After more than four thousand lines of C++ code with the use of the standard label widget implementation and shared code, the TabEx was born.  This document will show you some examples and gives hints on how it works and what the best approach is to take.

Basic idea of the TabEx

If you do not specify a single property, it just works. It is by default a no brainer.

What is what

The following picture gives an overview of a selection of the properties supported in the new tab widget.

Image Aug 7_1

Who is the boss on a standard tab configuration with an horizontal tab strip?

The text in the label is the boss in all circumstances, this is the information which should be displayed correct and complete. What does this mean? It means that the size of a tab is defined by the length and height of the label text. The bigger the label is, the bigger the tab gets. There is one exception to this. If the tab has the property “imgdefault” set and the image is bigger than the text , the image takes over.

This means we can do a trick with this information

For the images on the tab it is not necessary to be big. If the text defines the size of the tab the image will be stretched. So the following small image:

Image Aug 7_2

Can be used to get green tabs. And you can even make it one pixel in width. That will make it difficult to maintain, but in theory this is possible. And of course you don’t do this when the corners need to be rounded for instance, in this case you make an image which is about the size you need.

The tab will look as follows:

Image Aug 7_3

Here we see that the width has been defined by the label text and the height by the image. So let’s try the following image:

Image Aug 7_4

If we use that in the same tab it will look as follows:

Jasper blog small image

Now the height and the width of the label is bigger than the image and so the label defines the final size.  The label has some default padding around it and this make it look correct.

TabStrip image property

Of course this property is described in the user documentation, but it is always nice to see what you can do with this property.

Look at this image:

Image Aug 7_5

The tabstrip image is the dark blue background. The image default for the tabs is a transparent image. The selection image is the light blue image shown in the selected tab with the label text, “Library”.

Transparent images to make the impossible possible

In the following tab uses a blue circular  PNG image as the default. Red for the selected and green for the hovered tab. As you can see the sky is the limit. You can even make a stack based tab strip and by this place these balls in a column.

Image Aug 7_6

Colors versus images

You can specify an image to be displayed on the tab or use colors. Recommended  is the use of an image when the shape is irregular, or when the texture cannot be met with a color. Otherwise the use of colors is recommended to avoid maintenance overhead with all the different images.

Gradient and default color fill

The following picture shows an accordion type tab with as tab colors “dodgerblue”. The images in front of the labels are defined in the valrep.

<value>=<imagename>∙!<labeltext>

Image Aug 7_7

Some examples

The following picture shows a default tabEx widget and a version showing images together with the label text.

Image Aug 7_8

The following picture uses a selection image with a small triangular white area to emphasize the selection. For completeness the image shows a UNIFACE version of the tab and a Microsoft Office version.

Image Aug 7_9

List of recommendations

  • Use colors when possible on the tabs. Use images when shape or a texture is needed.
  • Use light text on dark tabs and even consider a special tab font with bold in it.
  • If you have a common look and feel for tabs, define your own logical tab in the usys.ini.  This makes the styling after the application is released a breeze.
  • Avoid in all circumstances more tabs than the tab widget can show. The tab widget will show scroll buttons but the end user will not have an overview of all possible options.
  • When each tab has its own color and the selection does not stand out, use the “activetablinecolor” property to emphasize the selected tab.