Uniface Sample: Simple Ribbon Bar

Uniface 9.6.01
Sample Version: 1.0
December 2012

Demonstrated Functionality
Files
Knowledge Prerequisites
Environment Dependencies
Steps
TabEx widget 1: Tabs at the top
TabEx widget 2: Buttons at the bottom
More Information



Demonstrated Functionality

This sample demonstrates how to:

This sample does not demonstrate how to:

Sample Description

The sample consists of two tabs that together form a simplified version of a ribbon bar. It shows four very different versions. The purpose is to show the flexibility of the TabEx widget.

Screen:

Files

This sample consists of the following files:

File name

Description

u96_simplerib_readme.htm

This file

u96_simplerib.xml

Uniface export file containing:

Object

Name

Description

Form

U96_SIMPLERIB

The main form of this sample. Contains the outer TabEx widget and the HTML widget for the Readme information.

Form

U96_SIMPLERIB1

The form with the inner TabEx widget.

Form

U96_SIMPLERIB2

Dummy form to indicate where the data would show.

u96_simplerib_1.png
u96_simplerib_1active.png
u96_simplerib_1default.png
u96_simplerib_1hover.png
u96_simplerib_1strip.png
u96_simplerib_2details.png
u96_simplerib_2location.png
u96_simplerib_2roles.png
u96_simplerib_2tasks.png
u96_simplerib_2.png
u96_simplerib_2active.png
u96_simplerib_2default.png
u96_simplerib_2focus.png
u96_simplerib_2hover.png
u96_simplerib_2strip.png
u96_simplerib_3.png
u96_simplerib_3active.png
u96_simplerib_3default.png
u96_simplerib_3focus.png
u96_simplerib_3hover.png
u96_simplerib_3strip.png
u96_simplerib_4.png
u96_simplerib_5.png

Pictures that are used in this sample.

Knowledge Prerequisites

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

Uniface Subject

Knowledge Level

Uniface development

Basic

Uniface Proc code

Basic

Environment Dependencies

This sample runs only on Microsoft Windows platforms.


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. Place the file u96_simplerib.zip in your samples folder.
  4. Unzip the file u96_simplerib.zip.
  5. Import the Uniface sources.
    /imp u96_simplerib.xml
  6. Compile the Uniface sources.
    /all u96_simplerib*
  7. Run the sample from outside the IDF
    /tst u96_simplerib
  8. Test the form.
    The form will show a simplified ribbon bar at the top and sections from this readme file at the bottom. Click on the various tabs to see how it works.
  9. Examine the form in the Component Editor.
    Pay attention to the properties of the TabEx widgets

Tab Widget 1: Tabs at the top

The tabs at the top are implemented as a TabEx widget. It uses custom images that are specified in the widget properties.

Field properties Widget Type=TabEx
Data Type=String
Widget properties The ValRep contains the labels that go on the tabs.
The images are the images for the three states of a tab and the remaining strip.
Default image
Hover image
Active image
Tab strip image

Tab widget 2: Buttons at the bottom

The "buttons" in the bottom tab strip are implemented as a TabEx widget. In this sample shows four different styles using images or colors. You invoke them by pressing the Yellow / Red / Blue / Colorful tabs buttons.
The text and the foreground images are specifed in the valrep of the TabEx widget and are the same for all four styles.
Operation opChangeTheme contains the Proc code that dynamically changes the images and colors.

Field properties Widget=Type TabEx
Date Type=String
Widget properties The ValRep contains the labels that go on the tabs.
The labels contain both the foreground image and the label text.
Details Label @u96_simplerib_2details.png·!Details
Location Label @u96_simplerib_2location.png·!Location
Roles Label @u96_simplerib_2roles.png·!Roles
Tasks Label @u96_simplerib_2tasks.png·!Tasks

Yellow tabs: Inspired by the Microsoft Office ribbon bar.

Widget properties The images properties have the (background) images for the three states of a tab and the remaining strip.
Default (background) image
Hover (background) image
Active (background) image
Tab strip (background) image

Red tabs: Metallic buttons with a red accent.

Widget properties The images properties have the (background) images for the three states of a tab and the remaining strip.
Default (background) image
Hover (background) image
Active (background) image
Tab strip (background) image

Blue tabs: Using colors instead of images.

Widget properties The color properties are used.
Gradient BackColorFill=gradient
Tab color(s) TabColors=cornflowerblue
Background color BackColor=cornflowerblue
Active tab color BackColorSelect=#2671E2
Hover tab color BackColorHover=#4382E8

Colorful tabs: go crazy with colors.

Widget properties The color properties are used.
Gradient BackColorFill=gradient
Tab color(s) TabColors=gray,gray,gray,gray,yellow,red,blue,gray
Background color BackColor=white
Active tab color BackColorSelect=darkred
Hover tab color BackColorHover=darkgray

More information