www.uniface.comlectures.

lectures.

www.uniface.comlectures.

Uniface 9.7 GUI

Modernization

Arjen van Vliet

Solution Consultant

Friday, February 19, 2016

www.uniface.comlectures.

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

www.uniface.comlectures.

1. Uniface 9.7 UDE

modernization

www.uniface.comlectures.

Modernization UDEIntroduction

New look and feel UDE using (new) GUI features

Low cost high impact changes: Start Page

Attract customers to modernize apps

Demonstrate GUI features

www.uniface.comlectures.

Modernization UDEStart 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!

www.uniface.comlectures.

Modernization UDEShortcuts

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

www.uniface.comlectures.

www.uniface.comlectures.

Modernization UDECustomize – uniface\adm\usys.ini

Theme and Editor Shortcut button fonts[screen]IDFCategories=Microsoft Sans Serif,13,regular ;- Theme buttonsIDFButtonText=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)

www.uniface.comlectures.

Modernization UDECustomize – uniface\adm\usys.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

www.uniface.comlectures.

Modernization UDECustomize – common\usys\startpage.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>

www.uniface.comlectures.

2. Styling Entities and

Area frames

www.uniface.comlectures.

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)

www.uniface.comlectures.

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

www.uniface.comlectures.

www.uniface.comlectures.

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

www.uniface.comlectures.

1. Border Properties

BorderType

Flat

Groove

BorderColor (Name taken from W3C standards)

BorderRadius (Name taken from W3C standards)

DropShadowColor

www.uniface.comlectures.

Border Properties Example

www.uniface.comlectures.

2. Background Color Properties

BackColorFillSolid color (default) or gradient color

BackColorStartIf (BackcolorFill=Gradient), make the gradient start from any other color then white (default)

GradientStartIf (BackcolorFill=Gradient), define where to start the gradient Top (default), Bottom, Left or Right.

www.uniface.comlectures.

Background Color Properties example

www.uniface.comlectures.

3. Background Image Properties

BackImageSpecify image for whole Entity or Area frame

HalignSet to Left, Right or Center to position image horizontally

HscaleSet to percentage to scale image. Default = 100 = no scaling

PreserveAspectSet to True to preserve aspect ratio of image

ValignSet to Top, Bottom or Center to position image vertically

VscaleSet to percentage to scale image. Default = 100 = no scaling

www.uniface.comlectures.

Background Image Properties example

www.uniface.comlectures.

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

www.uniface.comlectures.

Attach Property example

www.uniface.comlectures.

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.

www.uniface.comlectures.

Property form / More properties

www.uniface.comlectures.

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.

www.uniface.comlectures.

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)

www.uniface.comlectures.

Named Area Frame example

www.uniface.comlectures.

Considerations

Attach PropertyWidgets inside area do not inherit property of area.

PrintingProperties are ignored while frame or entity is printed; scope is GUI only.

Color InheritanceFields/widgets on top of areaframe/entity only inherit backcolor property value and not gradient.

Form PainterForm Painter will display entity/area frames with properties from .ini file. Not visible in More Properties form.

www.uniface.comlectures.

Example: Same entity, different properties

Advanced Development TechnologyAdvanced Development Technology

www.uniface.comlectures.

3. Modernization in 10

easy steps

www.uniface.comlectures.

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/

www.uniface.comlectures.

Start Page

Advanced Development Technology

www.uniface.comlectures.

www.uniface.comlectures.

Colors and Buttonsand menus and panels

Advanced Development Technology

www.uniface.comlectures.

White Background

www.uniface.comlectures.

White BackgroundSeems 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)

www.uniface.comlectures.

White BackgroundBut:

Step 1: Some Forms have a color setRemove that

www.uniface.comlectures.

White BackgroundBut:

Step 2: Some Entities on Forms have a color setRemove that

Step 3: Some Modeled Entities have a color setRemove that

www.uniface.comlectures.

White BackgroundBut:

Step 4: Grid widget “disappears” (white on white)Apply properties to give it a border (new in 9.7)

BorderType=Flat BorderColor=Silver

www.uniface.comlectures.

White BackgroundBut:

Step 5: “Simulated grids” made from normal Entities disappearMake 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

www.uniface.comlectures.

Flat Buttons

www.uniface.comlectures.

Flat ButtonsSeems simple, just change INI setting, but:

Step 6: Determine types of buttonsSplit 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

www.uniface.comlectures.

Flat ButtonsSeems simple, just change INI setting, but:

Step 7: Match modeled widgets with painted widgetsPut most used logical widget in model

Step 8: Set properties on painted buttonsRemove as much as possible, to enable control via .ini

Step 9: Set properties on modeled buttonsRemove as much as possible, to enable control via .ini

www.uniface.comlectures.

Flat ButtonsSeems simple, just change INI setting, but:

Step 10: TestFunctionality should be fine, but does everything look OK?

www.uniface.comlectures.

DetailsSee blog post on uniface.info for:

More details on each step (part 1, part 2, part 3)

Download tools for each step

DISCLAIMERThe 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.

www.uniface.comlectures.

FreshBlue colors were selected for:

Buttons

Menus

Panels

Application Shell

Small image buttons like >>

No button shape behind those

www.uniface.comlectures.

Different from 9.6

www.uniface.comlectures.

Known IssuesSome 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.

www.uniface.comlectures.

More Stuff

Advanced Development Technology

www.uniface.comlectures.

Set IDF Title BarSet the title of your IDF in your ASN file

[logicals]IDFTITLE = Development ACME Project

www.uniface.comlectures.

Demo!

www.uniface.comlectures.

Follow us online

uniface.comunifaceinfo.com/forum

www.uniface.comlectures.

Thank You!

Q & A

arjen.van.vliet@uniface.com

nl.linkedin.com/in/arjenvanvliet