modernizing client/server apps with uniface 9.6
DESCRIPTION
Modernizing existing applications is frequently the most cost-effective and productive way for an organization to meet the demand for enhanced and innovative applications. Uniface 9.6 will allow you to take your client/server apps to an entirely new level. Uniface 9.6 will enable you to achieve a modern, functional user experience, which is now a critical application feature.TRANSCRIPT
Modernization of the C/S GUI
Berry Kuijer Saat
Solution Consultant
January 24, 2013
Agenda
� Image Enhancements� Menu and Panels Enhancements� GUI Controls� Containers
PNG Images in UnifaceAdded Image support for PNG
� Higher, better resolution images GDI+
� Graduated levels of opacity (Alpha Channel)
� Is loss less (Edits well without loss of quality)
� Flexible and multiple graphic edge options
� Interlacing support (Fuzzy loading big images, slow connections)
Free background images for buttonshttp://www.altawebworks.com/free-buttons.htmlBackground transparency, gradients, other effects gimp (free) http://www.gimp.org/
Menus and PanelsImages in Menus and panels
� Font� BackColor� BackColorSelect� BackColorSelectBorder� BackColorSidebar� BackColorFill� ForeColor� ForeColorSelect� ForeColorDisabled� Image Properties� ImgSelect� ImgSidebar� ImgSize
User defined characteristics
MenusSet via “ini” fileThe addition or absence of “menu” setting turns
images and formatting on/off
[application]
; Example of a menu definition
;menu=umenu(backcolorselect=#aecff7;Backcolorfill=gradient)
menu=umenu(imgsize=IMG_MEDIUM;font=SansLarge;[email protected];backcolor=lightyellow;forecolor=red;forecolorselect=green;backcolorselect=lightskyblue;[email protected])
PanelsNew ‘user’ setting in setup to define toolbar style
Along with existing settings
Defined in ‘ini’ file under section [Application]
panel=upanel(font=SansLarge;backcolor=green;forecolor=red;forecolorselect=green;backcolorselect=lightskyblue;Backcolorfill=gradient)
Menus
GUI Controls - Command Button
Enhanced “Uniface” type command buttonButton State indicated by Color or Images
States are:� Default (Unselected)� Hover (Mouse over)� Selected (Mouse down)� Active (Field has focus)
Defining ButtonsColors:
Define color of “Text” button type stringBackground ForegroundActive textHover ForegroundFocus Text
Images: Define image Representation “Uniface”
Default – Image background normalActive – Image on mouse-down or clickHover – Image on mouse-overFocus – Image when field has focus
Dynamic properties
$fieldproperties(field) = “[email protected];[email protected];[email protected];[email protected]”
Defining ButtonsCan combine Image and text/label for different effects
Standard button no Images, text message: burgundy background color white forground
Button with image background text message
Button with Image background and Image type overlay
Button with Image Background and Image type overlay with additional ‘text’ label merged to right of button
Buttons
GUI Controls - Enhanced TabNew widget utabex but existing utab stays
Multiple Representation
Horizontal (Regular Tab)Accordion (Skype options)
Stacked (Outlook Style)
Enhanced Tab
� Tab Position � Tab Orientation� Tabs Alignment� Label Alignment� Label Image Alignment� Image Size� Default Image� Hover Image� Active Image� Tab Strip Image� Background Color � Gradient� Foreground Color� Active Tab Background
Color� Active Foreground Color� Hover Background Color� Hover Foreground Color� Tab Line Color� Frame Color� Tab Colors
Properties:� Frame� Multiple Rows � Fixed Tab Width� Justified Tab � Attach to Window Border � Page Name and Tab Label
Text � Widget Font � Label Font � Style � Tab Width� Tab Height� Tab Offset� Tab Space� Tab Line Width� Frame Width
You can do a lot with this new widget!
Enhanced Tab uses
Enhanced Tab
GUI Controls – Form Types
Form Types have changed
Old Tabform is now ‘contained’
New form type ‘popup’
GUI Controls POP-ups� A temporary form “pops up” and can “autoclose”
� Usually associated with a Button or field
� “popup” location configurable� Left, right, up, down, bottom,top
� Or set your own position/field
� $fieldproperties(Field) = "popuprect=5,1,100px,10px“
� Form types� Normal – Can create a popup ‘window’
instantiated via newinstance extension “windowtype=popup”� InheritWinProps=T inherits form properties.
� Popup – Simple undecorated form
POP-ups
Form Container
A field that is a container for other forms
Unlike a Tab can ‘blend’ with existing form
Acts like Uniface TAB
Can be nested
Can be moved and resized ($paintedfieldproperties)
HTML5 Container
Rendering engine for HTML5
‘Webkits’ engine
Bi-directional control� Reference and pass parameters to JavaScript
� JavaScript call-out to Uniface extended trigger with parameters
HTML5 Container
Can load entire web pages or ‘snippits’ of html
Example use of animated Gifs or png sprites
Widget operations Loadurl, loadhtml, and JS
Supports JavaScript
New $fieldhandle to reference field
Example:
$fieldhandle(GE)->$widgetoperation("JS:UNavto", Location)
Will cause the html5 widget called ‘GE’ to invoke the JavaScript function
‘UNavto’ pasing the contents of the field ‘location’ as a parameter.
Responds to JavaScript via extended triggers
Example:
In JavaScript this function:
function CallUnifaceTrigger(ButtonClicked)
{
var vid = ButtonClicked.id;
window.unifaceTriggers('ButtonClick', vid);
}
calls a ‘trigger’ named ‘ButtonClick’ in the extended trigger field passing parameter ‘vid’
HTML5 Container
HTML5 Container
Additional EnhancementsColor Inheritance
Inherit parent colors
Applies to Labels and Edit boxes
$fieldproperties(MyField)= "InheritColors=true“
foreground/background colors of entity to be used
If foreground/background colors of form are used
Modernization following Microsoft
Putting it all together9.6 Enhancements enable you to create
functional and visually appealing applications.
http://unifaceinfo.com/samples/
Thanks