u97 gui modernization webinar
TRANSCRIPT
![Page 1: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/1.jpg)
www.uniface.comlectures.
lectures.
![Page 2: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/2.jpg)
www.uniface.comlectures.
Uniface 9.7 GUI
Modernization
Arjen van Vliet
Solution Consultant
Friday, February 19, 2016
![Page 3: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/3.jpg)
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
![Page 4: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/4.jpg)
www.uniface.comlectures.
1. Uniface 9.7 UDE
modernization
![Page 5: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/5.jpg)
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
![Page 6: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/6.jpg)
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!
![Page 7: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/7.jpg)
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
![Page 8: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/8.jpg)
www.uniface.comlectures.
![Page 9: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/9.jpg)
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)
![Page 10: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/10.jpg)
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
![Page 11: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/11.jpg)
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>
![Page 12: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/12.jpg)
www.uniface.comlectures.
2. Styling Entities and
Area frames
![Page 13: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/13.jpg)
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)
![Page 14: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/14.jpg)
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
![Page 15: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/15.jpg)
www.uniface.comlectures.
![Page 16: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/16.jpg)
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
![Page 17: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/17.jpg)
www.uniface.comlectures.
1. Border Properties
BorderType
Flat
Groove
BorderColor (Name taken from W3C standards)
BorderRadius (Name taken from W3C standards)
DropShadowColor
![Page 18: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/18.jpg)
www.uniface.comlectures.
Border Properties Example
![Page 19: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/19.jpg)
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.
![Page 20: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/20.jpg)
www.uniface.comlectures.
Background Color Properties example
![Page 21: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/21.jpg)
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
![Page 22: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/22.jpg)
www.uniface.comlectures.
Background Image Properties example
![Page 23: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/23.jpg)
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
![Page 24: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/24.jpg)
www.uniface.comlectures.
Attach Property example
![Page 25: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/25.jpg)
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.
![Page 26: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/26.jpg)
www.uniface.comlectures.
Property form / More properties
![Page 27: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/27.jpg)
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.
![Page 28: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/28.jpg)
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
;[email protected];valign=bottom;halign=left;PreserveAsp
ect=TRUE;hscale=50;vscale=50)
![Page 29: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/29.jpg)
www.uniface.comlectures.
Named Area Frame example
![Page 30: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/30.jpg)
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.
![Page 31: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/31.jpg)
www.uniface.comlectures.
Example: Same entity, different properties
Advanced Development TechnologyAdvanced Development Technology
![Page 32: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/32.jpg)
www.uniface.comlectures.
3. Modernization in 10
easy steps
![Page 33: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/33.jpg)
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/
![Page 34: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/34.jpg)
www.uniface.comlectures.
Start Page
Advanced Development Technology
![Page 35: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/35.jpg)
www.uniface.comlectures.
![Page 36: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/36.jpg)
www.uniface.comlectures.
Colors and Buttonsand menus and panels
Advanced Development Technology
![Page 37: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/37.jpg)
www.uniface.comlectures.
White Background
![Page 38: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/38.jpg)
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)
![Page 39: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/39.jpg)
www.uniface.comlectures.
White BackgroundBut:
Step 1: Some Forms have a color setRemove that
![Page 40: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/40.jpg)
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
![Page 41: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/41.jpg)
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
![Page 42: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/42.jpg)
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
![Page 43: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/43.jpg)
www.uniface.comlectures.
Flat Buttons
![Page 44: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/44.jpg)
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
![Page 45: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/45.jpg)
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
![Page 46: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/46.jpg)
www.uniface.comlectures.
Flat ButtonsSeems simple, just change INI setting, but:
Step 10: TestFunctionality should be fine, but does everything look OK?
![Page 47: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/47.jpg)
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.
![Page 48: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/48.jpg)
www.uniface.comlectures.
FreshBlue colors were selected for:
Buttons
Menus
Panels
Application Shell
Small image buttons like >>
No button shape behind those
![Page 49: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/49.jpg)
www.uniface.comlectures.
Different from 9.6
![Page 50: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/50.jpg)
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.
![Page 51: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/51.jpg)
www.uniface.comlectures.
More Stuff
Advanced Development Technology
![Page 52: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/52.jpg)
www.uniface.comlectures.
Set IDF Title BarSet the title of your IDF in your ASN file
[logicals]IDFTITLE = Development ACME Project
![Page 53: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/53.jpg)
www.uniface.comlectures.
Demo!
![Page 54: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/54.jpg)
www.uniface.comlectures.
Follow us online
uniface.comunifaceinfo.com/forum
![Page 55: U97 gui modernization webinar](https://reader034.vdocuments.mx/reader034/viewer/2022050614/5872feec1a28ab8c718b7d8f/html5/thumbnails/55.jpg)
www.uniface.comlectures.
Thank You!
Q & A
nl.linkedin.com/in/arjenvanvliet