(Original creator: thenees)
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.
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:
To this:
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.
| 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:
And the Go To menu had to change as well:
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.
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)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?