Tag Archives: design

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

 

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

 

When thinking Desktop “first” still matters

By Clive Howard, Principal AnalystCreative Intellect Consulting

A few months back, I registered for Mobile World Congress 2015 in Barcelona. As an Analyst, there is a different registration process to the one used for regular attendees. This is so the organisers can validate that someone is a legitimate industry analyst. As well as entering a significant amount of personal data, additional information such as links to published work and document uploads are also required. Crucially, there are a number of screens to complete the registration and accreditation process. But more to the point, many different types of data must be entered – from single and multiple line text entry to file uploads. Some data (such as hyperlinks) requires cut and pasting.

I’m sure that I could have done this using a mobile phone but it would have taken a long time, been awkward and irritating and probably highly prone to mistakes. In short, I would never have considered doing something like this using my phone. Could I have used a tablet? Without a keyboard and mouse it would have been problematic, especially if the screen is small. Using a tablet only Operating System might also have had its problems in places: such as uploading documents from centrally managed systems. Actually I did use a tablet but one connected to a 20inch monitor, keyboard and mouse and running Windows. In that traditional desktop looking environment the process was relatively quick and painless.

Rumours of the desktop’s demise are greatly exaggerated

It is not just complex data entry scenarios such as this that challenge mobile devices. Increasingly I see people attach keyboards to their tablets and even phones. Once one moves beyond writing a Tweet or one line email many mobile devices start to become a pain to use. The reality of our lives, especially at work, is that we often have to enter data into complex processes. Mobile can be an excellent complement, but not a replacement. This is why we see so many mobile business apps providing only a tiny subset of functionality found in the desktop alternative; or they are apps that extend desktop application capabilities rather than replicate or replace them.

One vendor known for their mobile first mantra recently showed off a preview version for one of its best known applications. This upgrade has been redesigned from the ground up. When I asked if it worked on mobile the answer was no, they added (quite rightly) no one is going to use this application on a mobile device. These situations made me think about how over the last couple of years we have heard relentlessly about designing “mobile first”. As developers we should build for mobile and then expand out to the desktop. The clear implication has been that the desktop’s days are over.

This is very far from the truth. Not only will people continue to support the vast number of legacy desktop applications but will definitely be building new ones. Essentially, there will continue to be applications that are inherently “desktop first”. This statement should not be taken to mean that desktop application development remains business as usual. A new desktop application may still spawn mobile apps and need to support multiple operating systems and form factors. It may even need to engage in the Internet of Things.

The days of building just for the desktop safe in the knowledge that all users will be running the same PC environment (down to the keyboard style and monitor size) are gone in many if not the majority of cases. Remember that a desktop application may still be a browser based application, but one that works best on a desktop. And with the growth of devices such as hybrid laptop/tablet combinations, a desktop application could still have to work on a smaller screen that has touch capabilities.

It’s the desktop, but not as we know it

This means that architects, developers and designers need to modernise. Architects will need to design modern Service Orientated Architectures (SOA) that both expose and consume APIs (Application Programming Interfaces). SOA has been around for some time but has become more complex in recent years. For many years it meant creating a layer of SOAP (Simple Object Access Protocol) Web Services that your in-house development teams would consume. Now it is likely to mean RESTful services utilising JSON (JavaScript Object Notation) formatted data and potentially being consumed by developers outside of your organisation. API management, security, discovery, introspection and versioning will all be critical considerations.

Developers will equally need to become familiar with working against web services APIs instead of the more traditional approach where application code talked directly to a database. They will also need to be able to create APIs for others to consume. Pulling applications together from a disparate collection of micro services (some hosted in the cloud) will become de rigueur. If they do not have skills that span different development platforms then they will at least need to have an appreciation for them. One of the problems with mobile development inside enterprise has been developers building SOAP Web Services without knowing how difficult these have been to consume from iOS apps. Different developers communities will need to engage with one another far more than they have done in the past.

Those who work with the data layer will not be spared change. Big Data will affect the way in which some data is stored, managed and queried, while NoSQL data stores will become more commonplace. The burden placed on data stores by major increases in the levels of access caused by having more requests coming from more places will require highly optimised data access operations. The difference between data that is accessed a lot for read-only purposes and data which needs to be changed will be highly significant. We are seeing this with banking apps where certain data such as a customer’s balance will be handled differently compared to data involved in transactions. Data caching, perhaps in the cloud, is a popular mechanism for handling the read-only data.

Continuation of the Testing challenge

Testing will need to take into account the new architecture, design paradigms and potential end user scenarios. Test methodologies and tools will need to adapt and change to do this. The application stack is becoming increasingly complex. A time delay experienced within the application UI may be the result of a micro service deep in the system’s backend. Testing therefore needs to cover the whole stack – a long time challenge for many tools out there on the market – and the architects and developers will need to make sure that failures in third party services are managed gracefully. One major vendor had a significant outage of a new Cloud product within the first few days of launch due to a dependency on a third party service and they had not accounted for failure.