Uniface GUI Sample: Accordion and Stack TabEx Widget

Uniface 9.6.01
Sample Version: 1.0
December 2012


Description

The sample consists of a form with a TabEx widget oriented as an Accordion, which you can switch to a Stack.
The Accordion uses images for the tabs.
The Stack uses gradient colors for the tabs.

Demonstrated Functionality

This sample demonstrates the flexibility of the TabEx widget. It shows how to:

This sample does not demonstrate how to:

Files

This sample consists of the following files:

File name

Description

u96_accordion_readme.htm


u96_accordion.xml

Uniface export file containing:

Object

Name

Description

Forms    



U96_ACCORDION       


The main form for this sample

U96_ACCORDION1
U96_ACCORDION2
U96_ACCORDION3
U96_ACCORDION4

The forms displayed by the TabEx widget   


u96_accordion_accordion.png
u96_accordion_accordion1.png
u96_accordion_calendar.png
u96_accordion_contacts.png
u96_accordion_mail.png
u96_accordion_notes.png
u96_accordion_notes2.png
u96_accordion_other.png
u96_accordion_pm.png
u96_accordion_po.png
u96_accordion_screen.png
u96_accordion_stack.png
u96_accordion_stack1.png
u96_accordion_tabactive.png
u96_accordion_tabdefault.png
u96_accordion_tabhover.png

Pictures that are used in the sample.


u96_accordion_PM.dat
u96_accordion_PO.dat
u96_accordion_OT.dat

Test data used in this sample.
Do not import! The sample reads the files directly.


Knowledge Prerequisites

To use this sample, knowledge of the following topics is assumed:

Uniface Subject

Knowledge Level

Uniface development

Basic

Uniface Proc code

Basic   

Widgets
Basic


Steps

  1. Add the following line as the first line in the [FILES] section of your IDF assignment file.
    u96*.*     .\samples\u96*.*
  2. Create a subfolder samples in your projects folder.
  3. Unzip u96_accordion.zip and place all files in your samples folder.
  4. Import the Uniface sources.
    /imp u96_accordion.xml
  5. Compile the Uniface sources.
    /all u96_accordion*
  6. Run the sample from outside the Uniface Development Environment
    /tst u96_accordion
  7. Examine the forms in the Component Editor.
    Pay attention to the widget properties of the TabEx widgets.

TabEx widget 1: Accordion

The left part of the screen is implemented as a TabEx widget.
It uses the Accordion orientation and custom images.
An accordion is a vertical tab in which the active tab Form is shown below (or above) its tab header.

Field properties Widget Type: TabEx
Data Type: String
Widget properties Orientation: Accordion
Position: Bottom
Image Default: Background image for normal state of the tab
Image Hover: Background image for when the mouse is over the tab
Image Active: Background image for when the tab is open
ValRep The ValRep contains the foreground images and text that goes on the tabs.
The syntax is @Filename!Text or ^Glyph!Text
Default image
Hover image
Active image

TabEx Widget 2: Stack

The left part of the screen is implemented as a TabEx widget.
It uses the Stack orientation and gradient colors.
A Stack is a vertical tab in which the active tab Form is shown above (or below) all tab headers.
Gradient colors give a pleasing effect and require less development effort than images.
Instead of having to create an image you just specify a color and set the Gradient property.

Field properties Widget Type=TabEx
Data Type=String
Widget properties Orientation=Stack
Position=Top
BackColorSelect=Color for the selected tab
BackColorHover=Color for the tab where the mouse is over
TabColors=Default color for the tabs
Gradient=Whether a gradient is applied to the colors
ValRep The ValRep contains the foreground images and text that go on the tabs.
The syntax is @Filename!Text or ^Glyph!Text

More Information