Tag Archives: UX

Innovation doesn’t always have to be a revolution

On October 19th I will be presenting at QUBE’s inspiration session. I would like to invite you to join the virtual event. For more information and to register visit: http://qube.cc/inspiration/

I would expect that any business could innovate incrementally in the way I’ve just been describing in my blog series, and many would find it vital to do so. Yet organizations can easily find themselves stuck when it comes to innovation. They don’t always realize how much they can gain right now from moving forward, or how much they have to lose should others overtake them.

For many businesses, when it comes to IT, the type of innovation to focus on could be improving user experience, making them more efficient, by creatively using and connecting what is already there. This in turn can contribute to a virtuous circle of growing business agility and innovation. By becoming more agile about the way they innovate with technology, companies can become more responsive, freeing themselves up for business innovation.

Mobile is one of the most important ways to unlock innovation. The first step of moving existing capabilities to mobile isn’t necessarily very innovative; however, it can lead to many innovative possibilities.

Could moving some functionality to mobile unlock innovation and hence agility for your business? Is there some other evolutionary step you could take that would do the same?

This series is based on the paper: Agility and Innovation in Application and Mobile Development.

You can download the paper here.

Keeping up-to-date: Mobile security & Native UI

To catch-up on the latest mobile security and native UI trends, the Uniface mobile development team recently attended the appDevcon conference. A conference by app developers, for app developers. An event which targets developers for Apple iOS and Google Android, Windows, Web, TV and IoT devices in multiple tracks.

In advance, we were especially interested in two main topics: smartphone security and sharing code between web and native apps.

Mobile security

The mobile security presentations were given by Daniel Zucker, a software engineer manager at Google, and Jan-Felix Schmakeit, an Android engineer also at Google. In their – in my view – impressive presentation, they confirmed what I already thought: securing mobile phones is not something which you do after you have designed and developed your apps. It is a key area of app development to consider in advance.

Securing mobile phones starts with a good understanding of the architecture of at least the Android and iOS platforms. How is it built up? For example, as Android is based on the Linux kernel, you get all the Linux security artefacts, like Process isolation, SELinux, verified boot and cryptography. While some security services provided to mobile apps have a platform specific nature, others are platform independent.  An example of the first one is the new Android Permissions, which have now become more transparent to users, as they now get permission requests ‘in context’. An example of the platform independent security artefacts is the certificate validation, which done in an incorrect way, would still make your app vulnerable.


Native UI

Sharing code between native and web apps promised to be an interesting session. Some context: mobile users tend to spend significant more time on native UI enriched apps than on web apps, while web apps are attracting more unique visitors than native apps, as web apps are more widely approachable using different devices.

The best way to share code between native and web apps is simply by writing them as much as possible in the same code. Of course! But how do you do that? In this session the solution was to write fully native apps using a mix of NativeScript (an open-source framework to develop apps on iOS and Android platforms) and AngularJS (JavaScript-based open-source front-end web application framework). These native apps are built using platform agnostic programming languages such as JavaScript or TypeScript. They result in fully native Apps, which use the same APIs as if they were developed in Xcode or Android Studio. That is quite interesting! So using JavaScript you can develop fully native apps. That sounds like music to my ears.

Looking at this trend, it promises a lot. The mobile community seems to put a lot of effort in trying to simplify the creation of fully native enriched apps using plain JavaScript and HTML5 functionalities. Until now, we support our users in creating native/hybrid apps with fully native functionality with our Dynamic Server Page (DSP) technology. As we are looking into ways to enrich this technology further, we will follow the developments on this trend as it is fully in-line with our philosophy to share code between applications (client-server, web and mobile apps) and to support rapid application development, which saves our users time and resources in developing and maintaining fully enriched and cool applications. 

 

Modernizing Uniface 9.7: The Buttons

In this final episode of the story about modernizing the Uniface 9.7 IDF in 10 easy steps I will explain how we changed the look of the buttons.

button teaser2

If you want to start reading from the beginning part 1 and 2 of the story can be found here:
The first post was about the changes to the start page.
The second post was about the work that was done to make the screens white.

Again, in theory, it should be possible to do this by just changing a few properties in a configurations file. But as you will see it takes a bit more effort to do it in a nice way in an existing Uniface application. Don’t get me wrong, even with the additional work it still was not much effort to do it.

The small tools that I made to make my life easier are available for download, but:

DISCLAIMER

The tools described in this posting are not supported Uniface software. You can download them and use them, modify to your own taste and use them at your own risk. You need the DICT model to be present in your repository before you can compile and use the tool. Be absolutely sure you have a backup of your dictionary before using any of these tools! You can download them here:

http://unifaceinfo.com/download/5737/

When you make an improvement to these tools that might be useful to the community please share it.

Step 7 Determine types of buttons

Goal

Now that we changed the color of the Forms and fixed what was needed for that, we focused on the Command Buttons. The requirement was to use flat buttons.

In theory you would only need to change the properties for the Command Button in the .ini file for that. But we have different types of buttons in the IDF and we do not want to style them all in the same way. So we wanted to split up the Command Button in five logical widgets.

Logical Widgets

The first step was to split all buttons into groups and create logical widgets for them in the .ini file so they can styled as a group. These are the logical widgets that we used for the buttons:

IDFButtonBottom, for the big text buttons at the bottom of Forms
IDFButtonBottomIDFButtonBottom=ucmdbutton(representation=Uniface;cursor=uhand;frametype=off;frame=off;font=IDFButtonText;labelfont=IDFButtonText;backcolor=#01A7E1;backcolorselect=#97D5EC;backcolorhover=#55C1E8;backcolorfocus=#0084CC;forecolor=white;forecolorselect=black;vsize=80;autolabel=F;position=center;valign=center)

 

IDFButtonSide, for the big text buttons at the right-hand side of Forms
IDFButtonSide
IDFButtonSide=ucmdbutton(representation=Uniface;cursor=uhand;frametype=off;font=IDFButtonText;labelfont=IDFButtonText;backcolor=#01A7E1;backcolorselect=#97D5EC;backcolorhover=#55C1E8;backcolorfocus=#0084CC;forecolor=white;forecolorselect=black;vsize=80;autolabel=F;position=top)

Nearly the same as the bottom buttons.

 

IDFButtonSpecial, for the buttons that do not fall in any of the other categories
IDFButtonSpecial
IDFButtonSpecial=ucmdbutton(representation=Uniface;cursor=uhand;frametype=off;frame=off;font=IDFButtonText;labelfont=IDFButtonText;backcolor=#01A7E1;backcolorselect=#97D5EC;backcolorhover=#55C1E8;backcolorfocus=#0084CC;forecolor=white;forecolorselect=black;vsize=80;POSITION=CENTER)
Most of these buttons are somewhere in the middle of the window and need to look like a Bottom or Side Button. So we set the most common properties here and overrule them in the Forms when needed.

 

IDFButtonImage, for the very small buttons with an image on them, like the >> button
IDFButtonImage
IDFButtonImage=ucmdbutton(representation=Uniface;cursor=uhand;frametype=off;frame=off;transparency=T)
Here we make the button disappear, leaving just a clickable image.

 

IDFButtonHeader, for the buttons that form the headers of simulated grids
IDFButtonHeader
IDFButtonHeader=ucmdbutton(representation=Header;cursor=uhand;halign=left;valign=center;font=label)
These buttons are simple Windows header buttons.

Since flat buttons and clickable images may not look clickable to people who are not used to them, we added cursor=uhand to each button so the mouse arrow changes to a hand when you go over a button.
hand_pointer

Tool

Splitting the Command Buttons in these five logical widgets was a lot of work so I made a tool to assist in this mostly-manual step. I used the tool to query for fields with a Command Button widget, and in another window I looked in the IDF what new logical widget it should be. The main advantage of the tool for this step was making sure that I did not miss any buttons.

The tool is called U97_FRMWIDGETS. You can enter a retrieve profile and then work on the properties of the found painted fields. You can delete a property regardless of its value, or only when it has a specific value. You can also Add (or replace) properties in four ways: apply it to all records, do not replace existing values, only replace existing values, only replace a specific existing value. You can also apply a new widget type to all records.
U97_FRMWIDGETS

Step 8 Match modeled widgets with painted widgets

Goal

In the previous step we determined what painted button should get which new logical widget. But the Development Environment also uses buttons that are modeled in dummy entities in the application model. We want to give them a new logical widget too.

Challenge

You would expect that a modeled button is always used for that same purpose. But in an older application, such programming standards have not always been followed. So now one button in the application model needs to be represented by multiple logical widgets. The only affordable solution was to change the logical widget in the model to the one that is most often used for this button in the Forms.

Tool

The tool and the SQL that I used for this step was of such a ‘quick and dirty’ quality that I will not share this one with you. But it did the trick anyway, and you can easily come up with something similar (or better!)

Step 9 Set the properties on the painted buttons

Goal

We have split the buttons in logical groups by using logical widgets. Now we needed to remove the local properties so they do not override those set in the .ini file.

Widget property inheritance

Challenge

It would be simple if we could just delete all properties of all buttons, but that was not feasible as there was a mix of properties that should be the same on each button and of properties that are specific for a certain button.

Tool

I used my tool U97_FRMWIDGETS from step 7 to remove all properties except ROLE and VSIZE from the IDFButtonsBottom. And I removed all properties except TOOLTIP and VSIZE from the small image buttons. This now allows us to control all other properties from the .ini file.

Step 10 Set the properties on the modeled buttons

Goal

For the modeled buttons we also needed to remove many properties. As they often did not have properties on the Form, the properties from the Model took precedence over the .ini file instead.

Widget property inheritance

Challenge

The challenge was to efficiently change the properties of modeled buttons.

Tool

The tool is called U97_MODWIDGETS. It is similar to the tool of step 7, but acts on a different entity of the DICT model. For more details see step 7.

U97_MODWIDGETS

Conclusion

We here at Uniface B.V. have a big Uniface 10 project running to change the architecture of the Uniface Development environment. But we still wanted to do a very small project to freshen up the appearance of Uniface 9 as well. I think we succeeded in that, thereby proving that it is affordable to apply some lipstick to an existing Uniface application.

Wishes

Making the background of all screens white showed up some things in our GUI that can be improved in the future.

  1. The frames and sizes of our widgets are not fully consistent. That was nicely camouflaged by the grey background of the forms, but it shows more clearly on a white background.
  2. The new entity frame properties work fine and allow you to really spice up your application. We will get a blog post up on this soon. But in a multi-occurrence situation, where the entity is made to look like a grid, there is room for further development. There is no room for the frame, causing some visual imperfections.
  3. We have buttons that used to have an image on them in Uniface 7, but not since then. These are still image buttons. In previous Uniface versions that was not a problem as we used a Windows representation for the buttons and that ignores the image. But in Uniface 9.7 we use flat buttons with a Uniface representation and there the image prevents correct centering of the text. We could not find an affordable risk-free solution within the scope of the project so we decided to deliver with this imperfection in place. We will let you know when we have a good approach for this.

These and some smaller issues have been logged during the project and have been put in our backlog for resolution at a later date according to priority.

I hope these posts on how we changed the look of our Uniface application were useful for you. Have fun modernizing your Uniface application!

With kind regards,

Theo Neeskens

Modernizing Uniface 9.7, Part 2

In my previous post, I started explaining what we have done to give the Uniface Development Environment a fresh look.

The previous post was about the changes to the start page.

This post is about the steps that were needed to make screens white. In theory that can be done by changing just one setting in your .ini file. But in real life there are always some small differences between theory and practise.

old_new

The small tools that I made to make my life easier are available for download, but:

DISCLAIMER

The tools described in this posting are not supported Uniface software. You can download them and use them, modify to your own taste and use them at your own risk. You need the DICT model to be present in your repository before you can compile and use the tool. Be absolutely sure you have a backup of your dictionary before using any of these tools! You can download them here:

http://unifaceinfo.com/download/5737/

When you make an improvement to these tools that might be useful to the community please share it.

 

Step 1: Make the background of all Forms white

Goal

Making all Forms white can be accomplished by a simple change in the .ini file. Included in this step is altering the Application Shell, the Menu’s and the Panels so they look nice in combination with the white Forms.

[application]
shell=ushell(backcolor=#F9FCFF)

window=uwindow(backcolor=white)menu=umenu(backcolor=white;forecolor=black;backcolorselect=#0084CC;forecolorselect=white;backcolorfill=flat)panel=upanel(backcolor=white;backcolorhover=white;backcolorlocked=#55C1E8;backcolorselect=#97D5EC;bordercolorhover=#55C1E8;bordercolorlocked=#0084CC;bordercolorselect=#0084CC)

 

As you can see we made the Application Shell a very light blue for a subtle color difference between the Forms and the Application Shell. The Forms were given a white background. The Menus are now white with a blue selection color and the Panels are white with blue accepts. This was all done with properties that already exist in Uniface 9.6.

Challenge

In theory changing .ini settings should be enough. But unfortunately a small percentage of the Forms had either an index color or a foreground or background color set. That was never noticed before because these were set to the default grey background and black foreground. So after changing the .ini file these Forms remained grey. The challenge is to find all forms with a color and remove the color with minimal effort.

Tool

The tool is called U97_FORMCOLOR. When you press Retrieve it will show all Forms in your dictionary that have an Index color or form property color set. It uses your current settings in the [foreground]/normal and [background]/normal sections of your current .ini file to translate the index color to a foreground and background color.  It will also show what window color you have set in the .ini file. There are buttons to convert RGB to HEX colors and vice versa. It did not add a translation of Web colors as that was too much work and I did not need it. There are buttons to put the Index colors in the Window Properties and remove the Index color. One that only does that when there is no window property color and one that does it always. And there is a button to remove the property color when it is the same as the .ini color. Nothing gets stored until you press the Store button so you can play around a little.

Please feel free to change the tool for your own purposes.
U97_FORMCOLOR

Step 2: Remove the color from the painted entities

Goal

After step 1 we saw strange grey blobs on some of our nice white screens.

grey blob

Some of our painted entities had an index color or foreground or background color set, and were painted as markers for referential integrity or other technical reasons. To be precise these only show up when they are painted three or more character cells wide. We needed to remove these colors as well.

Challenge

The challenge is to find all painted entities on all forms that have a color set and to remove the colors with minimal effort. Using SQL is not an option as the index color for the painted entities is stored in the paint area (FORMPIC).

Tool

I build a small tool to search for a painted entities with a color with a few additional buttons to manipulate or remove the color. Since the Index color of a painted entity is stored in the form paint tableau I had some fun deciphering and manipulating that.
The tool is called U97_ENTCOLORFRM. When your press Retrieve it will retrieve all painted entities that have an index color or an entity property color set. On a large dictionary this can take some time as it have to search the paint areas (FORMPIC) for the index colors. All buttons have the same function as the previous tool.
U97_ENTCOLORFRM

Step 3: Remove the color from the modelled entities

Goal

After step 2 we unfortunately still saw grey blobs.
grey blob
Some entities had a foreground or background color set in the Application Model (no index color there), and were painted as markers for referential integrity or other technical reasons. These colors needed to be removed as well.

Challenge

The challenge is to find all entities in all models that have a color set, and remove it with minimal effort.

Tool

The tool is called U97_ENTCOLORMOD. It searches for modelled entities with a color and has a few additional buttons to manipulate or remove the color. It works very similar to the previous tools. The differences are caused by Entities in the Application Model not having Index colors.
U97_ENTCOLORMOD

Step 4: Visibility of Grids

Goal

A Grid always has a white background and on our now white Forms it was not so clear to see what area a Grid was occupying on a Form.
grid_noborder
We needed borders around the Grids.

In Uniface 9.7 there are new properties that you can use to give the Grid widget a border:
·         BorderType
·         BorderColor
·         BorderWidth

We want to apply BorderType=Flat and BorderColor=Silver to all painted Grids.
grid_border

Challenge

The challenge is to find all painted Grids, and to apply the change with minimal effort.

Tool

The tool is called U97_GRIDBORDER. This one was kept very simple. It just retrieves all entities that are painted as Grids and has a button to add properties to them.
U97_GRIDBORDER

Step 5: Multi-occurrence entities

Goal

This was an issue that was specific for our project but I have included it since in your application you may want to update properties of non-Grid entities too.

Earlier we removed the color from all entities, but in the Development Environment there are multi-occurrence entities that need to look similar to Grids. Since Grids do not follow the background color of the Form but always stay white we had to make these multi-occurrence entities consistent with that.

ent_noborder

Like in Step 4, a white data area on a white form does not look so good without some kind of border. So we wanted to add new properties for the entity frame too.

In Uniface 9.7 there are new properties for the default entity:
·         BorderColor
·         BorderType
·         BorderRadius
·         DropShadowColor
·         BackColorStart
·         BackColorFill
·         GradientStart
·         Attach
·         AttachMargin

We want to set BorderColor=Silver and BorderType=Flat on all non-Grid, multi-occurrence entities.

ent_border

Challenge

Finding the all painted entities that are not using a grid widget and are painted with a vertical repetition of occurrences. This information is stored in the form paint. Apply BorderColor=Silver and BorderType=Flat to those entities.

Tool

The tool is call U97_MULTI_OCC. When you press retrieve it shows all entities that are painted with an occurrence repetition and that is not a Grid. It can be a bit slow on large dictionaries as it needs to look in the paint area of the Form for each painted Entity. The functionality is simple, just a button to add some properties to all painted entities found.

NB: We are aware that in this first release the frame does not look quite right yet when a multi-occurrence entity is painted to look like a grid, as there is no room for the frame.  An alternative for your application could be to give the entities and the form background different colors.

In the next (final) post I will explain what we did with the buttons.

button teaser

 

Re-inventing the Uniface customer events

Our Uniface customer event season has just started, and several of us have been busy preparing content which we will be delivering at various events around the world. We have decided to make some changes to the events which we (Uniface) run ourselves although we always make the content available to the various independent user groups such as Face to Face in the Netherlands and UnifaceBenutzerGruppe, or UBG in Germany

The thinking started last year (2014) at the US Event in Las Vegas, where we ran the ever popular ‘Speed Networking sessions’ which are a cross between round table discussions and speed dating. One of the topics was ‘The Future of the NAUUG’, chaired by Zulayka. (NAUUG being North American Uniface User Group). 

The feedback we got was interesting, and we’ve taken a lot of it onboard. The primary points being that there was a desire for the content to be more technical, and code, techniques and techie stuff is the most interesting. (We also see that technically oriented blog posts on Uniface.info are generally the most popular.)

Uniface
Uniface

The result is that this year, the user events that we are running are Developer Conferences, with a focus on the technical content. We’ve also been working hard on the technical content, which will cover a variety of topics, such as UX, integration, development techniques, etc and will include getting into the code, with the source code being made available for future reference, use and enhancement. The sessions are delivered by various members of the Uniface technical team, and it should add up to be a really compelling reason to attend the events. 

We have Developer Conferences already scheduled for the UK, France and the US which is always our biggest event over three days, and this week a few of us are in Japan, with one event in Tokyo and one in Osaka (both of which are sold out), and I’m sure we will have more events in 2016. The technical content is available to be used at the other customer events which we don’t run ourselves, for example some of the Uniface team are in Israel this week and we usually have events in Latin America and Australia, although we’ve not booked anything at this time.