Uniface

Modernizing Uniface 9.7 in 10 easy steps

I have been talking about modernizing the look and feel of Uniface applications for many years. And ever since I switched from the Uniface Services department to the Uniface Lab my hands have been itching to do something with the look and feel of the Uniface Development Environment, as that is (for a large part) a Uniface application. But with Uniface 10 on the horizon there was never much room to work on the Development Environment of Uniface 9. With Uniface 9.7 we finally got the green light to do a small project to make it look more fresh against a modest budget.

Intro

We decided to follow the advice that we often give to our customers: completely redesign one important screen and just change colors, buttons etc. for all other screens.

Adrian and Mike, our product managers,  gave us the following brief:

  • New start page.
    Styling should lean towards Windows 10 Metro theme.
  • All screens should get a white background.
    Grey applications are perceived to be old, other colors tend to look less professional.
  • We should use flat buttons.
    Flat buttons are very popular now and we want to show that you can make them in Uniface 9.7.
  • It needs to look fresh and noticeably different from Uniface 9.6.
    A fresh color scheme and a new start page should take care of that.
  • Against minimal cost
    That meant that code changes in individual forms were out of the question. The testing effort alone would already be quite big.

With these not so S.M.A.R.T. requirements, Jonke and I went to work.

The new start page was fun to make. While doing it, we were a bit surprised how much functionality there is on this screen, which looks so simple at first sight. But since it is only one screen the challenge remained manageable.

Maybe there will be some more posts about the specific new GUI features that are available in Uniface 9.7.  But in this series of posts I will limit myself to the changes that we made to the start page and all Uniface forms. It may be of help to you when you want to modernize your own Uniface application.

In 10 steps I will take you through the process that we followed for changing the start page, the colors of the screens and the look of the buttons.

Today I will tell you about Step 1, the new Start Page for Uniface 9.7.

Step 1: The Start Page

Goal

A new start page that:

  • Is very different from the one that we have in Uniface 9.6 and earlier.
  • Leans towards the Windows 10 Metro theme

Challenges

While working toward the goal we found that there are a lot of functional details we needed to take care of, more that we initially expected from this screen. The other challenging aspects were the UI  and usability design.

Result

We went from this:

Startpage Old

To this:

Startpage New

The Workspaces

Instead of the Construction, Integration and Workflow workspaces we now have Mobile, Web, Desktop and Integration workspaces. We had to make a change here anyway because the Workflow workspace was not relevant anymore. This gave us the opportunity to better present the capabilities of Uniface.

Each workspace only shows a limited set of Editors, the ones we think are the most used in that workspace. All Editors are still accessible through the menus, in exactly the same way as before.

We have used the new Command Button properties that are available in Uniface 9.7 to make the big workspace buttons like tiles.

Startpage Workspace

For the fonts on the big workspace buttons and the editor buttons we created two fonts in the .ini file:

[screen]
IDFCategories=Microsoft Sans Serif,13,regular
IDFButtonText=Segoe UI,Western,8,bold

 

Of course we also changed the Presentation Preferences to reflect this change:

Startpage Presentation Preferences

And the Go To menu had to change as well:

Startpage Go To menu

Psst! I’ll let you in on a secret!

There is a way to customize the workspaces. It is not supported or documented, but we don’t mind if you play with it:

The file common\usys\startpage.def is an XML file that contains the definition of the start page. Since the file is tied to specific code in the development environment it is not fully customizable but you can use it to change the icons for the workspaces, and the Editors that are shown for a workspace. The icons are in the <BUTTONIMAGE> tag within the <CAT> tag. The Editors are in the <TYPES> tag within the <CAT> tag. You can choose from the editors that are defined in the <OBJTYPE> tags. For the Editors you can modify the icon, the name and the description. It is not possible to add new editors or workspaces.

The Shortcuts

The shortcuts are now presented in a grid. You can sort them on each column and you can search on the shortcut name. Please note that in the past there was different set of shortcuts per workspace, and there is now only set of shortcuts. There no longer is a limit to the number of shortcuts that you can have. The creation and handling of the shortcuts is unchanged.

Startpage Shortcuts

We used some new functionality of Uniface 9.7 to improve the presentation of the shortcuts. The colored area you see around the grid is an area frame. In Uniface 9.7 you can give an area frame a name and assign properties to it in the .ini file.  For details please see the uLibrary. For the cells of the grid and the search box above the grid we created logical widgets so they could be styled from the .ini file too. We used:

[areaframes]
SHORTCUTS=uframe(backcolor=#66B2E6;attach=hsize,vsize)[widgets] IDFSpeedSearch=ueditbox(font=editfont;onedit=T)
IDFTextCell=ueditbox(font=editfont)

 

Psst! I’ll let you in on a little secret!

We have hidden the logical widgets that we use in the IDF, so you don’t have to scroll through them every time you want to select a widget for your application. If you do want to see the logical widgets that start with IDF in the form painter in the development environment, put this in your .ini file:

[developer]
ShowFilteredWidgets = IDF

We do not guarantee that these widgets remain unchanged in future releases.

 

That’s it for now. Next post will be on how we changed the color of all IDF windows. Sounds simple hey?

 

 

10 thoughts on “Modernizing Uniface 9.7 in 10 easy steps”

  1. Hi Stijn,

    Nice to hear that you like the changes.

    We do not test components compiled in one Uniface version against a runtime engine of another Uniface version, so we cannot offer support on that. There are no major changes in the compiler or runtime so it will probably work, but there is no guarantee or support from Uniface BV.

    Regards,

    Theo

  2. Any chance of changes to the editor and IDE? Real Intellisense, Better position of cursor, Tabbed windows, Navigate to entry or operation (and back), Better search, Code generation, Customizable snippets, Hooks for third party software developers, etc?

    1. I’d settle for decent integration with decent text editors like Sublime, Atom or VIM.
      They have all the required features already hence the reason I still have to copy/paste all my trigger code changes to a decent editor then back again to recompile.
      Just having an “edit in external tool” option for the trigger editor pane would be very useful.
      I don’t think the built-in one can be easily fixed – there’s too much functionality missing.

  3. Old fogeys like myself can get to the colour scheme and tone it down a bit from the current eye searing primary colours I hope. Three screens full of that will make me (more) blind.

    Iain

    1. In this regard, having background and foreground properties for the ProcBox would be nice, to be able to code triggers and html layouts with a dark background.

  4. It would be nice to have the possibility to add a workspace; I would like to implement a “Utility” workspace for all those functionalities able to read/manage the Uniface Repository as well as a “VersionControl” one for some customers.
    It would be acceptable IMHO those workspaces to be limited to functionalities included into AccessControl system embedded in Uniface Development.

  5. For those who would want to customize their IDF startpage, you can do it safely:

    Copy common\usys\startpage.def in your adm directory (by default uniface\adm) to startpage.xml (to have a syntax highlighting in a text editor)
    Add in the [FILES] section of idf.asn :
    usys:startpage.def = usysadm:startpage.xml

    Now modify it to your needs, you will always have the default backup.

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.