uniface 9.7 gui modernization lecture
TRANSCRIPT
![Page 1: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/1.jpg)
www.uniface.coml ectures.
l ectures.
![Page 2: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/2.jpg)
www.uniface.coml ectures.
Uniface 9.7 GUI Modernization Arjen van VlietSolution ConsultantMonday, May 1, 2023
![Page 3: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/3.jpg)
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
![Page 4: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/4.jpg)
www.uniface.coml ectures.
1. Uniface 9.7 UDE modernization
![Page 5: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/5.jpg)
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
![Page 6: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/6.jpg)
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!
![Page 7: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/7.jpg)
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
![Page 8: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/8.jpg)
www.uniface.coml ectures.
![Page 9: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/9.jpg)
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)
![Page 10: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/10.jpg)
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
![Page 11: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/11.jpg)
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>
![Page 12: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/12.jpg)
www.uniface.coml ectures.
2. Styling Entities and Area frames
![Page 13: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/13.jpg)
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)
![Page 14: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/14.jpg)
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
![Page 16: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/16.jpg)
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
![Page 17: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/17.jpg)
www.uniface.coml ectures.
1. Border PropertiesBorderType
FlatGroove
BorderColor (Name taken from W3C standards)
BorderRadius (Name taken from W3C standards)
DropShadowColor
![Page 18: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/18.jpg)
www.uniface.coml ectures.
Border Properties Example
![Page 19: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/19.jpg)
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.
![Page 20: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/20.jpg)
www.uniface.coml ectures.
Background Color Properties example
![Page 21: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/21.jpg)
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
![Page 22: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/22.jpg)
www.uniface.coml ectures.
Background Image Properties example
![Page 23: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/23.jpg)
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
![Page 24: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/24.jpg)
www.uniface.coml ectures.
Attach Property example
![Page 25: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/25.jpg)
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.
![Page 26: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/26.jpg)
www.uniface.coml ectures.
Property form / More properties
![Page 27: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/27.jpg)
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.
![Page 28: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/28.jpg)
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)
![Page 29: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/29.jpg)
www.uniface.coml ectures.
Named Area Frame example
![Page 30: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/30.jpg)
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.
![Page 31: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/31.jpg)
www.uniface.coml ectures.
Example: Same entity, different properties
Advanced Development TechnologyAdvanced Development Technology
![Page 32: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/32.jpg)
www.uniface.coml ectures.
3. Modernization in 10 easy steps
![Page 33: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/33.jpg)
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/
![Page 34: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/34.jpg)
www.uniface.coml ectures.
Start Page
Advanced Development Technology
![Page 35: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/35.jpg)
www.uniface.coml ectures.
![Page 36: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/36.jpg)
www.uniface.coml ectures.
Colors and Buttonsand menus and panels
Advanced Development Technology
![Page 37: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/37.jpg)
www.uniface.coml ectures.
White Background
![Page 38: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/38.jpg)
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)
![Page 39: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/39.jpg)
www.uniface.coml ectures.
White BackgroundBut:
Step 1: Some Forms have a color setRemove that
![Page 40: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/40.jpg)
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
![Page 41: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/41.jpg)
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
![Page 42: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/42.jpg)
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
![Page 43: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/43.jpg)
www.uniface.coml ectures.
Flat Buttons
![Page 44: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/44.jpg)
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
![Page 45: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/45.jpg)
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
![Page 46: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/46.jpg)
www.uniface.coml ectures.
Flat ButtonsSeems simple, just change INI setting, but:
Step 10: TestFunctionality should be fine, but does everything look OK?
![Page 47: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/47.jpg)
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.
![Page 48: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/48.jpg)
www.uniface.coml ectures.
FreshBlue colors were selected for:
ButtonsMenusPanelsApplication Shell
Small image buttons like >>No button shape behind those
![Page 49: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/49.jpg)
www.uniface.coml ectures.
Different from 9.6
![Page 50: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/50.jpg)
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.
![Page 51: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/51.jpg)
www.uniface.coml ectures.
More Stuff
Advanced Development Technology
![Page 52: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/52.jpg)
www.uniface.coml ectures.
Set IDF Title BarSet the title of your IDF in your ASN file
[logicals]IDFTITLE = Development ACME Project
![Page 53: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/53.jpg)
www.uniface.coml ectures.
Demo!
![Page 54: Uniface 9.7 GUI Modernization Lecture](https://reader033.vdocuments.net/reader033/viewer/2022042513/58866add1a28ab7d408b58d3/html5/thumbnails/54.jpg)
www.uniface.coml ectures.
Follow us online
uniface.comunifaceinfo.com/forum