www.uniface.coml ectures.
l ectures.
www.uniface.coml ectures.
Uniface 9.7 GUI Modernization Arjen van VlietSolution ConsultantMonday, May 1, 2023
www.uniface.coml ectures.
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
www.uniface.coml ectures.
1. Uniface 9.7 UDE modernization
www.uniface.coml ectures.
Modernization UDEIntroduction
New look and feel UDE using (new) GUI featuresLow cost high impact changes: Start Page
Attract customers to modernize appsDemonstrate GUI features
www.uniface.coml ectures.
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!
www.uniface.coml ectures.
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
www.uniface.coml ectures.
www.uniface.coml ectures.
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.coml ectures.
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
www.uniface.coml ectures.
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.coml ectures.
2. Styling Entities and Area frames
www.uniface.coml ectures.
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)
www.uniface.coml ectures.
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
www.uniface.coml ectures.
www.uniface.coml ectures.
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
www.uniface.coml ectures.
1. Border PropertiesBorderType
FlatGroove
BorderColor (Name taken from W3C standards)
BorderRadius (Name taken from W3C standards)
DropShadowColor
www.uniface.coml ectures.
Border Properties Example
www.uniface.coml ectures.
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.
www.uniface.coml ectures.
Background Color Properties example
www.uniface.coml ectures.
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
www.uniface.coml ectures.
Background Image Properties example
www.uniface.coml ectures.
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
www.uniface.coml ectures.
Attach Property example
www.uniface.coml ectures.
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.coml ectures.
Property form / More properties
www.uniface.coml ectures.
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.coml ectures.
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)
www.uniface.coml ectures.
Named Area Frame example
www.uniface.coml ectures.
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.
www.uniface.coml ectures.
Example: Same entity, different properties
Advanced Development TechnologyAdvanced Development Technology
www.uniface.coml ectures.
3. Modernization in 10 easy steps
www.uniface.coml ectures.
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/
www.uniface.coml ectures.
Start Page
Advanced Development Technology
www.uniface.coml ectures.
www.uniface.coml ectures.
Colors and Buttonsand menus and panels
Advanced Development Technology
www.uniface.coml ectures.
White Background
www.uniface.coml ectures.
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)
www.uniface.coml ectures.
White BackgroundBut:
Step 1: Some Forms have a color setRemove that
www.uniface.coml ectures.
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.coml ectures.
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.coml ectures.
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.coml ectures.
Flat Buttons
www.uniface.coml ectures.
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
www.uniface.coml ectures.
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.coml ectures.
Flat ButtonsSeems simple, just change INI setting, but:
Step 10: TestFunctionality should be fine, but does everything look OK?
www.uniface.coml ectures.
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.coml ectures.
FreshBlue colors were selected for:
ButtonsMenusPanelsApplication Shell
Small image buttons like >>No button shape behind those
www.uniface.coml ectures.
Different from 9.6
www.uniface.coml ectures.
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.coml ectures.
More Stuff
Advanced Development Technology
www.uniface.coml ectures.
Set IDF Title BarSet the title of your IDF in your ASN file
[logicals]IDFTITLE = Development ACME Project
www.uniface.coml ectures.
Demo!
www.uniface.coml ectures.
Follow us online
uniface.comunifaceinfo.com/forum
Top Related