uniface 9.7 gui modernization lecture

www.uniface.coml ectures.

l ectures.


Uniface 9.7 GUI Modernization Arjen van VlietSolution ConsultantMonday, May 1, 2023


Lecture overview1. Uniface 9.7 UDE modernization2. Styling Entities and Area frames3. Modernization in 10 easy steps4. Demo

Please ask your questions in the chat, during the presentation


1. Uniface 9.7 UDE modernization


Modernization UDEIntroduction

New look and feel UDE using (new) GUI featuresLow cost high impact changes: Start Page

Attract customers to modernize appsDemonstrate GUI features


Modernization UDEStart Page

Inspiration: Windows 10, 8 styling and color schemesFour Themes: Mobile, Web, Desktop, IntegrationEditor Shortcuts to most used editors per ThemeRe-styled Shortcut areaDifferent!Customizable!


Modernization UDEShortcuts

Shortcut creation and handling unchangedAs many shortcuts as you need!Filtering on NameSorting on all columns in GridOne set, not one per Theme


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)


Modernization UDECustomize – uniface\adm\usys.ini

Split between common and uniface ini fileNew 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 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>


2. Styling Entities and Area frames


Uniface 9.7 Powerful optionsIn 9.7 powerful options got added

Modernize app without changing code

Interesting forApplications running on different desktopsApplications running for different customer site’s (VAR’s)


Steps to make this easierNew 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


http://unifaceinfo.com/wp-content/uploads/2015/11/cards2.png


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 Properties2. Background Color Properties3. Background Image Properties4. Attach Property


1. Border PropertiesBorderType

FlatGroove

BorderColor (Name taken from W3C standards)

BorderRadius (Name taken from W3C standards)

DropShadowColor


Border Properties Example

http://unifaceinfo.com/wp-content/uploads/2015/11/borders2.png


2. Background Color PropertiesBackColorFillSolid color (default) or gradient colorBackColorStartIf (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.


Background Color Properties example

http://unifaceinfo.com/wp-content/uploads/2015/11/colors2.png


3. Background Image PropertiesBackImageSpecify 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


Background Image Properties example

http://unifaceinfo.com/wp-content/uploads/2015/11/images.png


4. Attach PropertyNow also works on entity and area framesAll values are supported:

Left, Right, Top, BottomHmove, Vmove, Hsize, Vsize

In combination with attach properties on fields:Resizeable area’s on your forms


Attach Property example

http://unifaceinfo.com/wp-content/uploads/2015/11/attachframe.png


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

http://unifaceinfo.com/wp-content/uploads/2015/11/entprops.png


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 FramesWas 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;dropshadowcolor=gray;backcolorstart=lightyellow;borderradius=20px;[email protected];valign=bottom;halign=left;PreserveAspect=TRUE;hscale=50;vscale=50)



Named Area Frame example

http://unifaceinfo.com/wp-content/uploads/2015/11/areaframe_after.png


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



Example: Same entity, different properties

Advanced Development TechnologyAdvanced Development Technology

http://unifaceinfo.com/wp-content/uploads/2015/11/different.png


3. Modernization in 10 easy steps


Requirements:New Start PageWhite BackgroundFlat ButtonsFreshDifferent from 9.6Low cost

Blog post and tools to encourage our customers to modernize their applications:http://unifaceinfo.com/modernizing-uniface-9-7-in-10-easy-steps/

http://unifaceinfo.com/modernizing-uniface-9-7-in-10-easy-steps/



Start Page

Advanced Development Technology


Colors and Buttonsand menus and panels



White Background


White BackgroundSeems simple, just change INI setting:[application]

window=uwindow(backcolor=white)

shell=ushell(backcolor=#F9FCFF)

menu=umenu(backcolor=white;forecolor=black;backcolorselect=#0084CC;forecolorselect=white;backcolorfill=flat)panel=upanel(backcolor=white;backcolorhover=white;backcolorlocked=#55C1E8;backcolorselect=#97D5EC;bordercolorhover=#55C1E8;bordercolorlocked=#0084CC;bordercolorselect=#0084CC)


White BackgroundBut:

Step 1: Some Forms have a color setRemove that



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

Step 3: Some Modeled Entities have a color setRemove that



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

BorderType=Flat BorderColor=Silver



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


Flat Buttons


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 FormsIDFButtonSpecial, for the buttons that do not fall in any of the other categoriesIDFButtonImage, for the very small buttons with an image on them, like the >> buttonIDFButtonHeader, for the buttons that form the headers of simulated grids



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



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


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.


http://unifaceinfo.com/modernizing-uniface-9-7-part-2/

http://unifaceinfo.com/modernizing-uniface-9-7-the-buttons/

http://unifaceinfo.com/downloads/download-info/9-7-modernization-tool-zip/

http://unifaceinfo.com/downloads/download-info/9-7-modernization-tool-zip/


FreshBlue colors were selected for:

ButtonsMenusPanelsApplication Shell

Small image buttons like >>No button shape behind those


Different from 9.6


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.


More Stuff



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

[logicals]IDFTITLE = Development ACME Project


Demo!


Follow us online

uniface.comunifaceinfo.com/forum

http://www.uniface.com/

http://unifaceinfo.com/forum/


Thank You!Q & A

[email protected]/in/arjenvanvliet

mailto:[email protected]

https://nl.linkedin.com/in/arjenvanvliet

https://nl.linkedin.com/in/arjenvanvliet

uniface 9.7 gui modernization lecture

Business