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;imgselect=@tabdefaultOutLook.png;backcolor=lightyellow;forecolor=red;forecolorselect=green;backcolorselect=lightskyblue;imgsidebar=@offv2007.bmp)

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) = “imgdefault=@BlueGlass-Rnd-150x36.png;imghover=@WhiteGlass-Rnd-150x36.png;imgselect=@YellowGlass-Rnd-150x36.png;imgfocus=@GreyGlass-Rnd-150x36.png”

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

global.uniface.challenge@compuware.com