Uniface GUI Sample: Command Buttons

Uniface 9.6.01
Sample Version: 1.0
December 2012


Description

The sample consists of a form that shows a variety of command buttons, from a very basic button with just text, to a button that is styled like a Windows 7 ribbon bar button. The sample demonstrates how to define different types of buttons.

Demonstrated Functionality

This sample demonstrates how to:

This sample does not demonstrate how to:


Files

This sample consists of the following files:

File name

Description

u96_buttons_readme.htm

This file

u96_button.xml

Uniface export file containing:

Object

Name

Description

Forms


U96_BUTTON

Main form

U96_BUTTON1
U96_BUTTON2
U96_BUTTON3
U96_BUTTON4
U96_BUTTON5
U96_BUTTON6
U96_BUTTON7
U96_BUTTON8
U96_BUTTON9
U96_BUTTON10

Forms showing a button style in its four different states

u96_button_glassy_active.png
u96_button_glassy_default.png
u96_button_glassy_focus.png
u96_button_glassy_hover.png
u96_button_iconsave.png
u96_button_iconsave_active.png
u96_button_iconsave_focus.png
u96_button_iconsave_hover.png
u96_button_ribbon_active.png
u96_button_ribbon_default.png
u96_button_ribbon_focus.png
u96_button_ribbon_hover.png
u96_button_s1.png
u96_button_s2.png
u96_button_s3.png
u96_button_s4.png
u96_button_s5.png
u96_button_s6.png
u96_button_s7.png
u96_button_s8.png
u96_button_s9.png
u96_button_s10.png
u96_button_screen.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

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_button.zip and place all files from it in your samples folder.
  4. Import the Uniface sources.
    /imp u96_button.xml
  5. Compile the Uniface sources.
    /all u96_button*
  6. Run the sample from outside the Uniface Development Environment
    /tst u96_button
  7. Test the form.
    The form will show the different types of buttons. Click each button to see the four states of the button and the relevant section of this file.
  8. Examine the forms in the Component Editor.
    • Look at the field properties Initial Value, Widget Type and Data Type.
    • Look at the widget properties Representation, Colors and Images.

Style 1: Simple Button with Text

     This is a simple Uniface button. It differs from a Windows button in that it does not follow the Windows GUI.
The background color has been set to green with a gradient, and four different foreground colors have been set for the different button states.
Text The text comes from the field value
Background image Not applicable
Foreground image Not applicable
Field properties
  • Inital Value (to set the text)
  • Data Type: String
Widget properties
  • Representation: Uniface
  • Gradient: True
  • Background Color: RGB (0,170,0)
  • Foreground Color: white
  • Focus Foreground: yellow
  • Hover Foreground: darkgreen
  • Select Foreground: black

Style 2: Simple Button with Image and Text (Old)

This is a Uniface button with both an image and text.
To create a button like this, you need to paint a label directly adjacent to the button and attach the label to the field. This makes the text of the label appear on the button.
Text The text comes from the label
Background image Not applicable
Foreground image The foreground image comes from the field value
Field properties
  • Inital Value (to set the foreground image)
  • Data Type=Image
Widget properties
  • Representation=Uniface

Style 3: Simple Button with Image and Text (New)

This is a Uniface button with both an image and text.
To create a button like this, you can specify a picture and the text as a Uniface list in the field value.
For example:  @u96_button_iconsave.png·!Save.
Text The text comes from the field value
Background image Not applicable
Foreground image The foreground image comes from the field value
Field properties
  • Inital Value (to set the text and the foreground image)
  • Data Type: String
Widget properties
  • Representation: Uniface
  • Label Image Align: Left (to put the image to the left of the text)
  • Label Image Size: Large

Style 4: Button is an Image

If you do not like the shape of the Uniface or Windows buttons, you can use any image as a button. In this case,  it is a picture of a floppy disk, but it can be a cute little puppy or anything else. You can specify four different images for the four states of the button.
Text Not applicable
Background image The background images come from the widget properties
Foreground image Not applicable
Field properties
  • Data Type: String
Widget properties
  • Representation: Uniface
  • Images (to set the images for the four states)

Style 5: Text on Image

This a Uniface button is represented by an image and it has text on it. The image can be anything; in this case, it is a classic button-shaped image, but it could also be a picture of a race car or something else. You can specify four different images for the four states of the button.
Text Comes from the field value
Background image The background images come from the widget properties
Foreground image Not applicable
Field properties
  • Inital Value (to set the text)
  • Data Type: String
Widget properties
  • Representation: Uniface
  • Color properties (to set the four text colors for the four states)
  • Image properties (to set the images for the four states)

Style 6: Picture on Image

This is a Uniface button represented by an image, with another picture on it. In this case, the button is a classic button shape (but it could also be a picture of a rocket ship), and field value specifies a picture of a floppy disk, which is displayed on top. You can specify four different images for the four states of the button, but only one image for the picture on top.
Text Not applicable
Background image The background images come from the widget properties
Foreground image The foreground image comes from the field value
Field properties
  • Inital Value (to set the foreground image)
  • Data Type: Image
Widget properties
  • Representation: Uniface
  • Image properties (to set the images for the four states)

Style 7: Picture and Text on Image (Old)

This is a Uniface button represented by an image. It has both a picture and text on it. To put the text on the button, you need to paint a label directly adjacent to the button and attach it.
You can make many different types of buttons using this technique. It is not difficult to make a row of Uniface buttons look like a Microsoft ribbon bar.
Text The text comes from the attached label
Background image The background images come from the widget properties
Foreground image The foreground image comes from the field value
Field properties
  • Inital Value (to set the foreground image)
  • Data Type: Image
Widget properties
  • Representation: Uniface
  • Images (to set the images for the four states)

Style 8: Picture and Text on Image (New)

This is a Uniface button represented by an image. It has both an image and text on it.
To create a button like this, you can specify a picture and the text as a Uniface list in the field value. For example: @u96_button_iconsave.png·!Save
You can make many different types of buttons using this technique. It is not difficult to make a row of Uniface buttons look like a Microsoft ribbon bar.
Text The text comes from the field value
Background image The background images come from the widget properties
Foreground image The foreground image comes from the field value
Field properties
  • Inital Value (to set the foreground image)
  • Data Type: Image
Widget properties
  • Representation: Uniface
  • Image properties (to set the images for the four states)

Style 9: Windows Button

This is a Windows button that follows the look and feel of your Windows settings. Most of the properties of a button are not available when the Representation is set to Windows, because Windows handles the look and feel of the button. Use this type of button to create consistency between the different applications that a user uses.
Text The text comes from the field value
Background image Not applicable
Foreground image Not applicable
Field properties
  • Inital Value (to set the text)
  • Data Type: String
Widget properties
  • Representation: Windows

Style 10: Header Button

This is a header button, which follows the look and feel of your Windows settings. Most of the properties of a button are not available when the Representation is set to Header, because Windows handles the look and feel of the button. A Header button is typically used when you want to create something that looks like a grid, without using the grid widget.
Text The text comes from the field value
Background image Not applicable
Foreground image Not applicable
Field properties
  • Inital Value (to set the text)
  • Data Type: String
Widget properties
  • Representation: Header

More Information