Modernization exercise: new main screen for IDF

At Compuware we talk a lot about modernizing Uniface applications. I have found that changing just the main screen often has a big impact on how end users perceive an application. So I decided to have a go at the main screen of our Uniface 9.6 IDF. This screen has not been changed since it was introduced in Uniface 9.1 in the year 2004:

blog1

This screen has a couple of things that I tried to improve on:

  1. It looks dated (subjective, I know)
  2. The clickable elements to the left do not resemble the shortcuts on the right
  3. It offers no guidance to inexperienced users to what is what
  4. It is not customizable
  5. It was tuned for a 640×480 resolution.

I did not want to change too much. My changes needed to stay limited to only this Uniface Form. So I came up with this:

blog2

BIG DISCLAIMER
This is experimental code. There is no support whatsoever on this code. This is not a preview of any future Uniface version. Use at your own risk. Backup your original UUWKSP36 form and USCUT.DICT table before use.

It probably is not perfect. This was just a small pet project, an experimental prototype at best. But it still is a nice thing to play with.

There are a couple of customization options on this form. I made four custom settings, one generic and three for how it could look like for some companies that use Uniface. You need to add or replace the  settings mentioned below in your .ini and .asn file.

Generic Settings

INI file:

[widgets]
WorkSpaceImage=udragdrop(parentdraw=on)
WorkSpaceTitle=uhyperlink(transparency=on;font=SansSmall;halign=left)
WorkSpaceText=uhyperlink(transparency=on;font=SansSmall;halign=left;valign=top;ForeColor=GrayText)
WorkSpaceDDown=udropdownlist(font=SansSmall)

[application]
menu=umenu()
panel=upanel()
window=uwindow(backcolor=white)
shell=ushell(backcolor=white)

[upi]
buttonstyle=9

ASN file:

[FILES]
usys:WorkSpaceLogo.png .\Compuware.png

[LOGICALS]
UU_IDFTITLE = My repository name

These settings will result in this:

blog3

“DHL” Settings

INI file:

[widgets]
WorkSpaceImage=udragdrop(parentdraw=on)
WorkSpaceTitle=uhyperlink(transparency;font=WorkSpace;halign=left;forecolor=#CC0000)
WorkSpaceText=uhyperlink(transparency=on;font=WorkSpace;halign=left;valign=top;ForeColor=GrayText)
WorkSpaceDDown=udropdownlist(font=WorkSpace;backcolor=#FFCC00;forecolor=#CC0000;backcolorselect=#CC0000;forecolorselect=#FFCC00)

[application]
menu=umenu(font=WorkSpaceMenu;backcolor=#FFCC00;forecolor=black;backcolorselect=#CC0000;forecolorselect=white;backcolorfill=flat)
panel=upanel(backcolor=#FFCC00;backcolorselect=#CC0000;backcolorfill=flat;bordercolorselect=#CC0000)
window=uwindow(backcolor=#FFCC00)
shell=ushell(backcolor=#CC0000)

[upi]
buttonstyle=9

ASN file:

[FILES]
usys:WorkSpaceLogo.png .\dhl.png

[LOGICALS]
UU_IDFTITLE = Tracking and Tracing

These settings will result in this:
blog4

“KLM” Settings

INI file:

[widgets]
WorkSpaceImage=udragdrop(parentdraw=on)
WorkSpaceTitle=uhyperlink(transparency=on;font=SansSmall;halign=left;Forecolor=#005B82)
WorkSpaceText=uhyperlink(transparency=on;font=SansSmall;halign=left;valign=top;ForeColor=#00A1DE)
WorkSpaceDDown=udropdownlist(font=SansSmall;backcolor=#DCF2FB;Forecolor=#005B82;backcolorselect=#C1E9F7;forecolorselect=black;backcolorfill=gradient)

[application]
menu=umenu(backcolor=#DCF2FB;Forecolor=#005B82;backcolorselect=#C1E9F7)
panel=upanel(backcolor=#C1E9F7)
window=uwindow(backcolor=#F1FAFD)
shell=ushell(backcolor=#F1FAFD)

[upi]
buttonstyle=9

ASN file:

[FILES]
usys:WorkSpaceLogo.png .\KLM.png

[LOGICALS]
UU_IDFTITLE = Aircraft Maintenance Planning

These settings will result in this:
blog5

“Saarstahl” Settings

INI file:

[widgets]
WorkSpaceImage=udragdrop(parentdraw=on)
WorkSpaceTitle=uhyperlink(transparency;font=SansSmall;halign=left;forecolor=#FE7119)
WorkSpaceText=uhyperlink(transparency=on;font=SansSmall;halign=left;valign=top;ForeColor=GrayText)
WorkSpaceDDown=udropdownlist(font=SansSmall;backcolor=#F2F2F2;forecolorselect=#FE7119;backcolorselect=#F2F2F2;backcolorfill=gradient)

[application]
menu=umenu(backcolor=#F2F2F2;backcolorselect=#F2F2F2;bordercolorselect=#FE7119;backcolorsidebar=#F2F2F2)
panel=upanel(backcolor=#F2F2F2;backcolorhover=#FE7119;bordercolorhover=#F2F2F2)
window=uwindow(backcolor=#F2F2F2)
shell=ushell()

[upi]
buttonstyle=9

ASN file:

[FILES]
usys:WorkSpaceLogo.png .\saarstahl.png

[LOGICALS]
UU_IDFTITLE = Meisterbüro Adjustage

These settings will result in this:
blog6

Some remarks

At the moment we can’t make flat buttons. That are buttons where you only see the stuff that you have put on top of the button, but no real button surrounding it. A workaround using a button with a fully transparent default image gave the desired effect but caused a lot of flickering. I found another workaround using drop target widgets for the images and hyperlinks for the texts. A bug has been registered for the flickering. An enhancement request has been registered for flat buttons.

There was drag and drop functionality to change the order of the shortcuts. I have removed it. The code behind it was quite cumbersome and had some flaws. The shortcuts are now simply retrieved from the database and displayed. I have added a dropdown list where you can select the sort order for the shortcuts.

The biggest risk when trying this form in a production environment are your shortcuts. If you rely on them please make a backup of your USCUT table before installing this form.

BIG DISCLAIMER
This is experimental code. There is no support whatsoever on this code. This is not a preview of any future Uniface version. Use at your own risk. Backup your original UUWKSP36 form and USCUT.DICT table before use.

Click here to download the form 

BIG DISCLAIMER
This is experimental code. There is no support whatsoever on this code. This is not a preview of any future Uniface version. Use at your own risk. Backup your original UUWKSP36 form and USCUT.DICT table before use.

10 thoughts on “Modernization exercise: new main screen for IDF”

  1. Hi Theo, think the “Cube, Pyramid, Ball” has its origing in Uniface Seven. I really use the drag and drop feature to cluster shortcuts into separate tasks, but the landing positions are limited (I think in some older versions you could select the resolution of these shortcuts: smaller icons, more positions). So your modification into a simple multi-occurence of USCUT would provide a scrollbar to handle “more shortcuts”. For sure, I can put cluster names in front of the properties text so sorting “by name” will  be “by cluster”. BTW: There are different sets of shortcuts for the workbenches Integration and Construction, do you plan to combine these into a single display?

    1. Hi Uli,

      No plans to develop this any further, just a demonstration of what you can achieve with a few simple changes.

      To answer your question: all types of shortcuts go on the same single display. And yes a scroll bar appears when you have a lot of shortcuts. But having over 50 shortcuts maybe defeats the point of having shortcuts anyway.

      Implementing drag and drop could be a bit tricky now every shortcuts is an occurrence. In the “normal” screen everything is continually translated to dummy fields. Although that works fine, it is quite a complex implementation. I am also thinking of a new drag and drop sample (waiting for some bugs to be fixed). When that’s done I maybe (!) give this screen another try. 

      1. Hi Theo,

        thank you for your kind reply. As I mentioned, the drag&drop is nice to visualise clusters, but because of the complex implementation not necessary (so dont’t waste time to put it to the intro screen); prefixes in the text will serve the same purpose.

        Because implementing a functionality usually affects a couple of uniface objects, even 3 or 4 tasks-in-progress end up with some 40+ shortcuts, because I even use a shortcut for a dedicated export of all dependencies of a task.

        Perhaps you can include the “Global Actions” UUBACT49 functionality I use when I know the name of a component, but not the component type: just enter “MYFORM” and press “edit” will take you straight to the information you need, compile all components starting ABF* etc.

  2. Hi Theo.

    I like it a lot. A great step should this be considered in the future.

    I will definitely like to have a play around with this.

     

     

  3. Hi Theo. I am a beginner for uniface,So I need your help and  We can always contact.Could you tell me the other, more convenient way to contact? Waiting your response,Thanks million.

  4. Hey Theo,great work on the enhancement! I really like it.

    Now to make this form “opensource” so maybe the developers can customize this 🙂

    Cheers,
    Shorty

    1. Would love to post the sources too but that would give away too much of the internal structure of the IDF which was not set up to be user extensible.

Leave a Reply

Your email address will not be published. Required fields are marked *

Please fill in the right answer to this question * Time limit is exhausted. Please reload CAPTCHA.