Container Widgets Container widgets can be used to combine other widgets into composite panels. Examples: – XmMessageBox – XmForm – XmBulletinBoard – XmRowColumn.

Slides:



Advertisements
Similar presentations
JustinMind: Dynamic Panels
Advertisements

Using Motif with C++ X and Motif are written in C
Ch. 6 Web Page Design – Absolute Positioning, Image Maps, and Navigation Bars Mr. Ursone.
GUI and Swing, part 2 The illustrated edition. Scroll bars As we have previously seen, a JTextArea has a fixed size, but the amount of text that can be.
© by Pearson Education, Inc. All Rights Reserved. continued …
Creating Custom Forms. 2 Design and create a custom form You can create a custom form by modifying an existing form or creating a new form. Either way,
Swinging Into Swing Leo S. Primero III. Understanding what Swing Is Swing is a package that lets you create applications that use a flashy Graphical User.
Automating Tasks With Macros. 2 Design a switchboard and dialog box for a graphical user interface Database developers interact directly with Access.
1 Introduction to the Visual Studio.NET IDE Powerpoint slides modified from Deitel & Deitel.
GUI For the 8-Puzzle A minimal layout: All background colors and fonts are specified in a resource file.
A Simple Motif Widget The basic steps involved in creating and displaying this or any other Motif widget are essentially the same. This is a shell widget.
GUIs and Color Here's a first crack at an 8-puzzle widget:
3.2 Presentation Software End Show Creating slide shows including audio,video and digital images End Show.
Pasewark & Pasewark 1 Access Lesson 4 Creating and Modifying Forms Microsoft Office 2007: Introductory.
Access Lesson 4 Creating and Modifying Forms
1 Access Lesson 5 Creating and Modifying Reports Microsoft Office 2010 Introductory Pasewark & Pasewark.
© 2011 Delmar, Cengage Learning Chapter 8 Building Complex Animations.
Chapter 3 Working with Symbols and Interactivity.
Tutorial 4: Using CSS for Page Layout. 2 Objectives Session 4.1 Explore CSS layout Compare types of floating layouts Examine code for CSS layouts View.
XP New Perspectives on Microsoft Office FrontPage 2003 Tutorial 4 1 Microsoft Office FrontPage 2003 Tutorial 4 – Using Shared Borders and Themes.
Introduction to Visual Basic. Quick Links Windows Application Programming Event-Driven Application Becoming familiar with VB Control Objects Saving and.
Chapter 12: Using Controls. Examining the IDE’s Automatically Generated Code A new Windows Forms project has been started and given the name FormWithALabelAndAButton.
MagicInfo Pro Scheduler Now that a template has been created from content imported into the Library, the user is ready to begin scheduling content to.
Java Software Solutions Lewis and Loftus Chapter 10 1 Copyright 1997 by John Lewis and William Loftus. All rights reserved. Graphical User Interfaces --
Creating your own form from scratch.. To create a custom form, you can modify an existing form or design and create a form from scratch. In either case,
© 2011 Delmar, Cengage Learning Chapter 3 Working with Symbols and Interactivity.
Getting Started The structure of a simple wxWidgets program, Look at where and how a wxWidgets application starts and ends, how to show the main window,
Power Point Presentations A Step by Step Guide. Contents The very first step Choosing slide layout Adding text boxes Custom Animation Changing slide design.
Microsoft Visual Basic 2005 CHAPTER 7 Creating Web Applications.
Chapter 9 - VB.Net by Schneider1 Chapter 9 – Additional Controls and Objects 9.1 List Boxes, Combo Boxes, and the File-Opening Control The List Box Control.
Chapter One An Introduction to Visual Basic 2010 Programming with Microsoft Visual Basic th Edition.
Pasewark & Pasewark 1 Access Lesson 5 Creating and Modifying Reports Microsoft Office 2007: Introductory.
C# GUI - Basics. Objectives.NET supports two types: WinForms, traditional, desktop GUI apps. WebForms – newer, for Web apps. Visual Studio.NET supports.
Chapter 2 – Introduction to the Visual Studio .NET IDE
1 Chapter Ten Using Controls. 2 Objectives Learn about Controls How to create a Form containing Labels How to set a Label’s Font How to add Color to a.
Present by Wu Kun-Tse Simplifying Preference Pages with Field Editors.
© Copyright 2012 by Pearson Education, Inc. All Rights Reserved. Chapter 9 GUI Programming Using Tkinter 1.
Microsoft Access 2000 Presentation 3 Creating Databases Part II (Creating Forms)
Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif.
XP New Perspectives on Microsoft Office Access 2003 Tutorial 10 1 Microsoft Office Access 2003 Tutorial 10 – Automating Tasks With Macros.
Pasewark & Pasewark 1 Access Lesson 5 Creating and Modifying Reports Microsoft Office 2007: Introductory.
Class 2 Remote Instruction Review of Working with Buttons EDU 556 Programming for Instruction Dr. Steve Broskoske This is an audio PowerCast. Make sure.
Microsoft Access 2010 Chapter 4 Creating Reports and Forms.
Tkinter Basics. Initial Stuff To get the package: from tkinter import * To make a window, give it a title and operate it: windowVar = Tk() windowVar.title(“your.
FIRST COURSE PowerPoint Tutorial 2 Applying and Modifying Text and Graphic Objects.
COMPUTER PROGRAMMING I 3.02 Apply Properties Associated with the Controls.
Adding Text and Navigation to the Home Page – Lesson 51 Adding Text and Navigation to the Home Page Lesson 5.
Using Microsoft Word Drawing Tools. Word Drawing Tools to Create Navigation Diagram Using Microsoft Word Drawing Tools, Slide 2Copyright © 2004, Jim Schwab,
Dialog Widgets Dialog widgets present information and collect input from the user: Dialogs are windows that are often displayed for a relatively short.
1 Android Development Lean and mean introduction Based on a presentation by Mihail L. Sichitiu.
Progress and Outcome Measures - Part 3 Progress and Outcome Measures Part 3, Slide 1Copyright © 2004, Jim Schwab, University of Texas at Austin.
XP New Perspectives on Microsoft Office Access 2003, Second Edition- Tutorial 6 1 Microsoft Office Access 2003 Tutorial 6 – Creating Custom Forms.
®® Microsoft Windows 7 Windows Tutorial 7 Managing Multimedia Files.
Integrating Components and Dynamic Text Boxes with the Animated Map– Lesson 101 Integrating Components and Dynamic Text Boxes with the Animated Map Lesson.
XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 1 Creating Dynamic Pages.
Using Custom Submission Questions and Questionnaires in Editorial Manager™ Created by J. Strusz (9/21/2010)
 You won’t write a single line of program code.  Instead, you’ll use visual programming techniques.  Visual Studio processes your actions (such as mouse.
Microsoft Visual Basic 2005 BASICS
Chapter 2 – Introduction to the Visual Studio .NET IDE
Java Swing.
Chap 7. Building Java Graphical User Interfaces
GUI Using Python.
Graphical User Interfaces -- Introduction
Microsoft Office Access 2003
Microsoft Office Access 2003
DREAMWEAVER MX 2004 Chapter 7 Working with Layers
Working with Symbols and Interactivity
Topics Graphical User Interfaces Using the tkinter Module
Creating and Sending Saved Messages
Presentation transcript:

Container Widgets Container widgets can be used to combine other widgets into composite panels. Examples: – XmMessageBox – XmForm – XmBulletinBoard – XmRowColumn – XmPanedWindow – XmFrame – XmMainWindow – XmScrolledWindow

An XmForm Widget This widget collects four XmPushButton widgets into a form in which the relationships between the button widgets and the form are explicitly defined.

Creating Widgets for a Form #include... // Create a form and four children Widget form, widgetA, widgetB, widgetC, widgetD; form = XtCreateManagedWidget ( "form", xmFormWidgetClass, parent, NULL, 0); widgetA = XtCreateManagedWidget ( "widgetA", xmPushButtonWidgetClass, form, NULL, 0 ); widgetB = XtCreateManagedWidget ( "widgetB", xmPushButtonWidgetClass, form, NULL, 0 ); widgetC = XtCreateManagedWidget ( "widgetC", xmPushButtonWidgetClass, form, NULL, 0 ); widgetD = XtCreateManagedWidget ( "widgetD", xmPushButtonWidgetClass, form, NULL, 0 );

Widget Relationships At this point the parent-child relationships have been established: toplevel form widgetBwidgetCwidgetDwidgetA However, their relationships within the form have not been established.

Defining Form Relationships widgetA widgetB widgetD widgetC Form Note that if an attachment X Y is defined, Y X must not be, or you will have a circular constraint.

Relationships For widgetA ● Top attached to: form ● Bottom attached to: form ● Left attached to: form ● Right attached to: none

Relationships For widgetB ● Top attached to: form ● Bottom attached to: widgetC ● Left attached to: widgetA ● Right attached to: widgetD

Setting Attachment Resources XtVaSetValues ( widgetA, XmNtopAttachment, XmATTACH_FORM, XmNbottomAttachment, XmATTACH_FORM, XmNleftAttachment, XmATTACH_FORM, XmNrightAttachment, XmATTACH_NONE, NULL ); XtVaSetValues ( widgetB, XmNtopAttachment, XmATTACH_FORM, XmNbottomAttachment, XmATTACH_WIDGET, XmNbottomWidget, widgetC, XmNleftAttachment, XmATTACH_WIDGET, XmNleftWidget, widgetA, XmNrightAttachment, XmATTACH_WIDGET, XmNrightWidget, widgetD, NULL ); // continued... Similarly for widgetC and widgetD.

Resizing Form Widgets Here is the form widget as displayed by KDE: Suppose the widget is resized by pulling down here.

Resizing Form Widgets (cont'd) Result:

Form Widgets and the 8-Puzzle Q: Is an XmForm widget the way to display an 8- puzzle? A: Probably not, because the tiles would be attached to the form and to each other. While it would be possible to change attachments in callbacks, it would probably be messy and error-prone. A better container widget for tiles might be the XmBulletinBoard widget.

XmBulletinBoard Widgets ● The XmBulletinBoard widget is used when an application needs to explicitly control the position and sizes of a collection of widgets, and... ●... also when the application does not need to support resizable windows. ● Children of an XmBulletinBoard widget must be explicitly positioned by setting the XmNx and XmNy resources of each child.

An Empty XmBulletinBoard Widget This is a 200 x 200 pixel bulletin board widget with no children.

Creating an Empty Bulletin Board #include... Widget bboard; bboard = XtVaCreateManagedWidget ( "bboard", xmBulletinBoardWidgetClass, parent, XmNwidth, 200, XmNheight, 200, NULL );

A BulletinBoard Widget with Children This BulletinBoard widget contains three Label children widgets placed in specific positions. The upper left corner of the BulletinBoard is position (x,y) = (0,0), which is the default position of any child.

Adding Children to the Bulletin Board Widget label1, label2, label3; label1 = XtVaCreateManagedWidget( "label1", xmLabelWidgetClass, bboard, XmNlabelString, XmStringCreateLocalized("foo"), NULL ); label2 = XtVaCreateManagedWidget( "label2", xmLabelWidgetClass, bboard, XmNlabelString, XmStringCreateLocalized("bar"), XmNx, 75, XmNy, 75, NULL ); label3 = XtVaCreateManagedWidget( "label3", xmLabelWidgetClass, bboard, XmNlabelString, XmStringCreateLocalized("baz"), XmNx, 150, XmNy, 150, NULL );

Tic-Tac-Toe Example ● Suppose we want to modify the Tic-Tac-Toe game display so that: – A title TIC-TAC-TOE appears to the right of the grid – A HELP button appears beneath the title, and – Clicking on the HELP button displays a message box describing the game and rules ● We will accomplish this in stages: – First, create a form widget and put the canvas (drawing area) and title label in it

BoardInfo Class class BoardInfo { public: BoardInfo(Widget parent, Game g); void drawGrid(); // draw game grid void drawX ( Integer x, Integer y); // Draw an X at (x,y) void drawO ( Integer x, Integer y); // Draw an O at (x,y) void manage(); // expose the drawing area void unManage(); // hide the drawing area void asciiDisplay(); // display for debugging private: DECL_CALLBACK(drawBoard); // draw board whenever it is exposed DECL_CALLBACK(boardClick); // get board coordinates when clicked Game game; // the game state Widget form; // Manager Widget title; // label for title Widget canvas; // drawing area Display* display; // display device for this app GC gc; // graphics context };

Adding A Label Widget in the BoardInfo Constructor... form = XtCreateManagedWidget("form", xmFormWidgetClass, parent, NULL, 0); canvas = XtVaCreateManagedWidget ( "canvas", xmDrawingAreaWidgetClass, form, XmNsensitive, FALSE, // to start XmNheight, 300, XmNwidth, 300, NULL ); XmString xmstr = XmStringCreateLocalized("TIC-TAC-TOE"); title = XtVaCreateManagedWidget("title", xmLabelWidgetClass, form, XmNlabelString, xmstr, XmNtopAttachment, XmATTACH_FORM, XmNbottomAttachment, XmATTACH_NONE, XmNleftAttachment, XmATTACH_WIDGET, XmNleftWidget, canvas, XmNrightAttachment, XmATTACH_FORM, NULL);...

New Display Note: Larger font is achieved using the X Resource Manager (described later). Presentation would be improved if the drawing area were contained within a frame.

Modified BoardInfo Class class BoardInfo { public: BoardInfo(Widget parent, Game g); void drawGrid(); // draw game grid void drawX ( Integer x, Integer y); // Draw an X at (x,y) void drawO ( Integer x, Integer y); // Draw an O at (x,y) void manage(); // expose the drawing area void unManage(); // hide the drawing area void asciiDisplay(); // display for debugging private: DECL_CALLBACK(drawBoard); // draw board whenever it is exposed DECL_CALLBACK(boardClick); // get board coordinates when clicked Game game; // the game state Widget form; // Manager Widget title; // label for title Widget canvas; // drawing area Widget frame; // frame for drawing area Display* display; // display device for this app GC gc; // graphics context };

Using the Frame Widget Class form = XtCreateManagedWidget("form", xmFormWidgetClass, parent, NULL, 0); frame = XtVaCreateManagedWidget( "frame", xmFrameWidgetClass, form, XmNtopAttachment, XmATTACH_FORM, XmNbottomAttachment, XmATTACH_NONE, XmNleftAttachment, XmATTACH_FORM, XmNrightAttachment, XmATTACH_NONE, NULL); canvas = XtVaCreateManagedWidget( "canvas", XmDrawingAreaWidgetClass, frame,... ); XmString xmstr = XmStringCreateLocalized("TIC-TAC-TOE"); title = XtVaCreateManagedWidget( "title", xmLabelWidgetClass, form,...);

New Display Now we can add the HELP button to the form.

Modified BoardInfo Class class BoardInfo { public: BoardInfo(Widget parent, Game g); void drawGrid(); // draw game grid void drawX ( Integer x, Integer y); // Draw an X at (x,y) void drawO ( Integer x, Integer y); // Draw an O at (x,y) void manage(); // expose the drawing area void unManage(); // hide the drawing area void asciiDisplay(); // display for debugging private: DECL_CALLBACK(drawBoard); // draw board whenever it is exposed DECL_CALLBACK(boardClick); // get board coordinates when clicked Game game; // the game state Widget form; // Manager Widget title; // label for title Widget canvas; // drawing area Widget frame; // frame for drawing area Widget helpButton; Display* display; // display device for this app GC gc; // graphics context };

Adding A HELP Button form = XtCreateManagedWidget("form", xmFormWidgetClass, parent, NULL, 0); frame = XtVaCreateManagedWidget( "frame", xmFrameWidgetClass, form,...); canvas = XtVaCreateManagedWidget( "canvas", XmDrawingAreaWidgetClass, frame,... ); XmString xmstr = XmStringCreateLocalized("TIC-TAC-TOE"); title = XtVaCreateManagedWidget( "title", xmLabelWidgetClass, form,...); xmstr = XmStringCreateLocalized("HELP"); helpButton = XtVaCreateManagedWidget( "help", xmPushButtonWidgetClass, form, XmNlabelString, xmstr, XmNtopAttachment, XmATTACH_WIDGET, XmNtopWidget, title, XmNleftAttachment, XmATTACH_WIDGET, XmNleftWidget, frame, NULL);

New Display Note: Color was added using the X Resource Manager. If the HELP button does not have a left or right attachment, it will not appear.

Implementing the HELP Button ● Desired behavior: – Pop up a message box containing a scrolled window of help text – Allow user to dismiss window when not needed ● This is the behavior of a dialog, but none of the pre-defined dialogs contain scrolled windows ● Approach: – Use a pre-defined message dialog – Remove unnecessary children (icon and message) – Add a scrolled window as child – Shell and buttons are retained

Removing Children From A Container ● Use the convenience function: – XtUnmanageChild( ) ● To accesss the children of a dialog: – XmGetMessageBoxChild(, ) – where is one of: ● XmDIALOG_SYMBOL_LABEL ● XmDIALOG_MESSAGE_LABEL ● XmDIALOG_SEPARATOR ● XmDIALOG_OK_BUTTON ● XmDIALOG_CANCEL_BUTTON ● XmDIALOG_HELP_BUTTON

Modified BoardInfo Class class BoardInfo { public: BoardInfo(Widget parent, Game g); void drawGrid(); // draw game grid void drawX ( Integer x, Integer y); // Draw an X at (x,y) void drawO ( Integer x, Integer y); // Draw an O at (x,y) void manage(); // expose the drawing area void unManage(); // hide the drawing area void asciiDisplay(); // display for debugging private: DECL_CALLBACK(drawBoard); // draw board whenever it is exposed DECL_CALLBACK(boardClick); // get board coordinates when clicked DECL_CALLBACK(help); // pop up help message box Game game; // the game state Widget form; // Manager Widget title; // label for title Widget canvas; // drawing area Widget frame; // frame for drawing area Widget helpButton; Widget helpDialog; // help message box Display* display; // display device for this app GC gc; // graphics context };

Customizing and Testing the Help Dialog in the BoardInfo Constructor... helpDialog = XmCreateMessageDialog(form, "helpDialog", NULL, 0); XtUnmanageChild(XmMessageBoxGetChild(helpDialog, XmDIALOG_SYMBOL_LABEL)); XtUnmanageChild(XmMessageBoxGetChild(helpDialog, XmDIALOG_MESSAGE_LABEL)); xmstr = XmStringCreateLocalized("This is a test help message"); XtVaCreateManagedWidget( "helpTest", xmLabelWidgetClass, helpDialog, XmNlabelString, xmstr, NULL); XtAddCallback(helpButton, XmNactivateCallback, &BoardInfo::helpCallback, (XtPointer) this);...

The (Simple) Help Button Callback and Behavior IMPL_CALLBACK(BoardInfo, help) { XtManageChild(helpDialog); }

Text Widgets ● A realistic HELP message would contain multiple lines of text ● For this we can use the XmText widget class: – Functions as a complete text editor – Can be set to read-only with XmNeditable resource – Text to be displayed set with the XmNvalue resource – XmTextField is a subclass for more efficient handling of one-line text fields

Using A Text Widget for Help... String helpstr = "Here is a multi-line help message. It should be displayed within an XmText widget. If this were a long message it may need to be scrolled."; XtVaCreateManagedWidget( "helpTest", xmTextWidgetClass, helpDialog, XmNvalue, helpstr, XmNresizeWidth, TRUE, // Without these, full XmNresizeHeight, TRUE, // message will not show XmNeditable, FALSE, // So contents cannot // be changed NULL);...

New Help Button Behavior