U97 gui modernization webinar

www.uniface.comlectures.
lectures.

Uniface 9.7 GUI
Modernization
Arjen van Vliet
Solution Consultant
Friday, February 19, 2016

Lecture overview
1. Uniface 9.7 UDE modernization
2. Styling Entities and Area frames
3. Modernization in 10 easy steps
4. Demo
Please ask your questions in the chat,
during the presentation

1. Uniface 9.7 UDE
modernization

Modernization UDE
Introduction
New look and feel UDE using (new) GUI features
Low cost high impact changes: Start Page
Attract customers to modernize apps
Demonstrate GUI features

Modernization UDE
Start Page
Inspiration: Windows 10, 8 styling and color schemes
Four Themes: Mobile, Web, Desktop, Integration
Editor Shortcuts to most used editors per Theme
Re-styled Shortcut area
Different!
Customizable!

Modernization UDE
Shortcuts
Shortcut creation and handling unchanged
As many shortcuts as you need!
Filtering on Name
Sorting on all columns in Grid
One set, not one per Theme

Modernization UDE
Customize – unifaceadmusys.ini
Theme and Editor Shortcut button fonts
[screen]
IDFCategories=Microsoft Sans Serif,13,regular ;- Theme buttons
IDFButtonText=Segoe UI,Western,8,bold ;- Editor shortcut buttons
Color of shortcut area frame
[areaframes]
SHORTCUTS=uframe(backcolor=#66B2E6;attach=hsize,vsize)
Profile and Shortcut fields properties
[widgets]
IDFSpeedSearch=ueditbox(font=editfont;onedit=T)
IDFTextCell=ueditbox(font=editfont)

Modernization UDE
Customize – unifaceadmusys.ini
Split between common and uniface ini file
New IDF logical widgets are not visible in editors
Not to be used by customer apps, we can change or remove these.
To unhide the secret widgets:
[developer]
ShowFilteredWidgets = IDF

Modernization UDE
Customize – commonusysstartpage.def (xml)
Theming buttons and Editor Shortcuts
<CAT>MOBILE</CAT>
<BUTTONTEXT>Mobile</BUTTONTEXT>
<BUTTONIMAGE>^U9_MOBILE</BUTTONIMAGE>
<TYPES>CONC,APPL,EXTD,EXTS,RESO</TYPES>
Editor shortcuts
<OBJTYPE>APPL</OBJTYPE>
<ICON>^U9_SC_APPL</ICON>
<NAME>Startup Shell</NAME>
<DESCRIPTION>Define the properties of the startup shell used to
execute the application</DESCRIPTION>

2. Styling Entities and
Area frames

Uniface 9.7 Powerful options
In 9.7 powerful options got added
Modernize app without changing code
Interesting for
Applications running on different desktops
Applications running for different customer
site’s (VAR’s)

Steps to make this easier
New properties on entity level to make entity
area look nice.
Added mechanism to set properties for
individual entities in the .ini file, so outside
your code.
Graphical entity properties available for Area
Frames. Only available from .ini file

The Properties (main groups)
New properties for the border, color and
image of Area frames and Entities.
Some already existed for Shells, Windows or
Entities
Main groups:
1. Border Properties
2. Background Color Properties
3. Background Image Properties
4. Attach Property

1. Border Properties
BorderType
Flat
Groove
BorderColor (Name taken from W3C standards)
BorderRadius (Name taken from W3C standards)
DropShadowColor

Border Properties Example

2. Background Color Properties
BackColorFill
Solid color (default) or gradient color
BackColorStart
If (BackcolorFill=Gradient), make the gradient
start from any other color then white (default)
GradientStart
If (BackcolorFill=Gradient), define where to
start the gradient  Top (default), Bottom, Left
or Right.

Background Color Properties example

3. Background Image Properties
BackImage
Specify image for whole Entity or Area frame
Halign
Set to Left, Right or Center to position image horizontally
Hscale
Set to percentage to scale image. Default = 100 = no scaling
PreserveAspect
Set to True to preserve aspect ratio of image
Valign
Set to Top, Bottom or Center to position image vertically
Vscale
Set to percentage to scale image. Default = 100 = no scaling

Background Image Properties example

4. Attach Property
Now also works on entity and area frames
All values are supported:
Left, Right, Top, Bottom
Hmove, Vmove, Hsize, Vsize
In combination with attach properties on fields:
Resizeable area’s on your forms

Attach Property example

Setting the Properties [1]
Setting the properties on Entities
Proc Code ($entityproperties)
Property form (new properties behind ‘More’ button)
see example on next slide
.ini file
[entities]
DefEntity=udefentity(BorderType=Flat;BorderColor=Black)
This really allows you to control the look of
your application without having to recode.

Property form / More properties

Setting the Properties [2]
Setting the properties on Area Frames
Exclusively controlled through .ini file
[areaframes]
Frame=uframe(properties)
Frame=uframe(backcolor=powderblue)
More precise:
FrameName{.ComponentName}=uframe(Properties)
Give the INFO Area Frame a border on every Form:
INFO=uframe(BorderType=Flat;BorderColor=DodgerBlue)
Give all Area Frames on Form CUST001 a shadow:
Frame.CUST001=uframe(DropShadowColor=Navy)
This really allows you to control the look of
your application without having to recode.

Named Area Frames
Was possible already in Form Painter (including
rename), but only useful when printing.
Now Named Area Frames can be renamed in
the Form Painter, and addressed from the
usys.ini
[areaframes]
bok=uframe(backcolor=dodgerblue;backcolorfill=gradient;drops
hadowcolor=gray;backcolorstart=lightyellow;borderradius=20px
;backimage=@4balls.png;valign=bottom;halign=left;PreserveAsp
ect=TRUE;hscale=50;vscale=50)

Named Area Frame example

Considerations
Attach Property
Widgets inside area do not inherit property of area.
Printing
Properties are ignored while frame or entity is printed;
scope is GUI only.
Color Inheritance
Fields/widgets on top of areaframe/entity only inherit
backcolor property value and not gradient.
Form Painter
Form Painter will display entity/area frames with
properties from .ini file. Not visible in More Properties
form.

Example: Same entity, different properties
Advanced Development TechnologyAdvanced Development Technology

3. Modernization in 10
easy steps

Requirements:
New Start Page
White Background
Flat Buttons
Fresh
Different from 9.6
Low cost
Blog post and tools to encourage our customers to
modernize their applications:
http://unifaceinfo.com/modernizing-uniface-9-7-in-10-easy-steps/

Start Page
Advanced Development Technology

Colors and Buttons
and menus and panels

White Background

White Background
Seems simple, just change INI setting:
[application]
window=uwindow(backcolor=white)
shell=ushell(backcolor=#F9FCFF)
menu=umenu(backcolor=white;forecolor=black;backcol
orselect=#0084CC;forecolorselect=white;backcolorfi
ll=flat)
panel=upanel(backcolor=white;backcolorhover=white;
backcolorlocked=#55C1E8;backcolorselect=#97D5EC;bo
rdercolorhover=#55C1E8;bordercolorlocked=#0084CC;b
ordercolorselect=#0084CC)

White Background
But:
Step 1: Some Forms have a color set
Remove that

White Background
But:
Step 2: Some Entities on Forms have a color set
Remove that
Step 3: Some Modeled Entities have a color set
Remove that

White Background
But:
Step 4: Grid widget “disappears” (white on white)
Apply properties to give it a border (new in 9.7)
BorderType=Flat
BorderColor=Silver

White Background
But:
Step 5: “Simulated grids” made from normal Entities
disappear
Make these white again and apply border properties (new in 9.7)
BorderType=Flat
BorderColor=Silver
New entity properties:
BorderColor, BorderType, BorderRadius, DropShadowColor, BackColorStart,
BackColorFill, GradientStart, Attach, AttachMargin

Flat Buttons

Flat Buttons
Seems simple, just change INI setting, but:
Step 6: Determine types of buttons
Split Command Button in five logical widgets
IDFButtonBottom, for the big text buttons at the bottom of Forms
IDFButtonSide, for the big text buttons at the right-hand side of
Forms
IDFButtonSpecial, for the buttons that do not fall in any of the other
categories
IDFButtonImage, for the very small buttons with an image on them,
like the >> button
IDFButtonHeader, for the buttons that form the headers of
simulated grids

Flat Buttons
Step 7: Match modeled widgets with painted widgets
Put most used logical widget in model
Step 8: Set properties on painted buttons
Remove as much as possible, to enable control via .ini
Step 9: Set properties on modeled buttons
Remove as much as possible, to enable control via .ini

Flat Buttons
Step 10: Test
Functionality should be fine, but does everything look OK?

Details
See blog post on uniface.info for:
More details on each step (part 1, part 2, part 3)
Download tools for each step
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 the
tools here. If you make an improvement to these tools
that might be useful to the community, please share it.

Fresh
Blue colors were selected for:
Buttons
Menus
Panels
Application Shell
Small image buttons like >>
No button shape behind those

Different from 9.6

Known Issues
Some things to keep in mind
Frames of our widgets are not fully consistent. Was
camouflaged by grey background of forms, shows more
clearly on white.
New entity frame properties work fine but in a multi-
occurrence situation where the entity is made to look like
a grid they have some visual imperfections.
Buttons in IDF had images on them in Uniface 7 but not
since then. These still are image buttons. In 9.6 that was
not a problem, we used representation = Windows. Flat
buttons have representation = Uniface. Now the “image”
prevents correct centering of text.

More Stuff

Set IDF Title Bar
Set the title of your IDF in your ASN file
[logicals]
IDFTITLE = Development ACME Project

Demo!

Follow us online
uniface.com
unifaceinfo.com/forum

Thank You!
Q & A
arjen.van.vliet@uniface.com
nl.linkedin.com/in/arjenvanvliet

U97 gui modernization webinar

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

Similar to U97 gui modernization webinar

Similar to U97 gui modernization webinar (20)

More from Uniface

More from Uniface (20)

Recently uploaded

Recently uploaded (20)

U97 gui modernization webinar