P. 1
Power Builder 8 Getting Started

Power Builder 8 Getting Started

|Views: 1.375|Likes:
Publicado porluisimtz

More info:

Published by: luisimtz on Sep 10, 2010
Direitos Autorais:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

01/17/2013

pdf

text

original

Sections

  • CHAPTER 1 Introduction to PowerBuilder
  • What PowerBuilder is
  • The PowerBuilder environment
  • PowerBuilder objects
  • CHAPTER 2 About the PowerBuilder Tutorial
  • Learning to build a client/server application
  • Learning to build a Web application
  • How you will proceed
  • How long it will take
  • What you will learn
  • Setting up for the tutorial
  • LESSON 1 Starting PowerBuilder
  • Create a new workspace
  • Create a target
  • Specify an icon for the application
  • Change the size of the main window
  • Run the application
  • LESSON 2 Customizing the PowerBuilder Environment
  • Manipulate the System Tree window
  • Open an object
  • Manipulate views
  • Add an extra Script view
  • Display view title bars
  • Float and dock views
  • Manipulate tabbed views
  • Save a view layout scheme
  • Reset the default view layout scheme
  • Set up the toolbars
  • Show labels on toolbar buttons
  • Float the toolbars
  • Reposition the toolbars
  • LESSON 3 Building a Login Window
  • Create a new window
  • Add controls to the window
  • Add a Picture control
  • Add StaticText controls
  • Specify properties of the StaticText controls
  • Add SingleLineEdit controls
  • Specify properties of the SingleLineEdit controls
  • Add CommandButton controls
  • Specify properties of the CommandButton controls
  • Change the tab order on the window
  • Code some Help events and preview the window
  • Write the script to open the window
  • Modify the frame window Open event
  • Using comments
  • Compile the script
  • LESSON 4 Connecting to the Database
  • Look at the EAS Demo DB database
  • Look at the database profile for the EAS Demo DB database
  • Look at table definitions in the EAS Demo DB database
  • About extended attributes
  • Run the Connection Object wizard
  • Declare a global variable
  • Modify the connection information
  • Modify the of_GetConnectionInfo function
  • Call the connection service manager
  • Complete the login and logout scripts
  • Set up shortcuts for AutoScript
  • Add code to the OK button Clicked event
  • Add code to the Cancel button Clicked event
  • Add code to the application Close event
  • LESSON 5 Modifying the Ancestor Window
  • Add DataWindow controls
  • Add a library to the search path
  • Add a DataWindow control for the master DataWindow
  • Add a DataWindow control for the detail DataWindow
  • View the scripts inherited from the user object
  • Add user events and event scripts
  • Add scripts to retrieve data for the DataWindow controls
  • Rebuild library objects
  • LESSON 6 Setting Up the Menus
  • Modify the frame menu
  • Modify the File menu
  • Enable Help menu items
  • Create a new sheet menu
  • Inherit and save a new menu
  • Add items to the new menu
  • Add a new toolbar for the new menu items
  • Add menu scripts to trigger user events
  • Attach the new menu and run the application
  • LESSON 7 Building DataWindow Objects
  • Create and preview a new DataWindow object
  • Save the DataWindow object
  • Make cosmetic changes to the first DataWindow object
  • Create a second DataWindow object
  • Select the data source and style
  • Select the table and columns
  • Define a retrieval argument
  • Specify a WHERE clause
  • View the DataWindow in the DataWindow painter
  • Make cosmetic changes to the second DataWindow object
  • Rearrange the columns
  • Align the labels and columns
  • Display the arrow for a dropdown DataWindow edit style
  • LESSON 8 Attaching the DataWindow Objects
  • Attach a DataWindow object to the master DataWindow control
  • Attach the DataWindow object to the detail DataWindow control
  • Attach DataWindow objects to the Product window
  • Run the completed application
  • LESSON 9 Running the Debugger
  • Add breakpoints in application scripts
  • Run in debug mode
  • Set a watch and a conditional breakpoint
  • LESSON 10 Preparing the Application for Deployment
  • Create the Project object
  • Create the executable file
  • Create a shortcut
  • Test the executable file
  • LESSON 11 Creating Web pages
  • Create a PowerDynamo Web site
  • Create and modify a basic Web page
  • Create a 4GL introductory Web page
  • Change type face
  • Add a graphic
  • Add absolute positioning to a graphic
  • Add page navigation
  • Create a product information Web page
  • Add a hyperlink
  • Add a button
  • Create a login page with validation and redirection
  • Create a basic login page
  • Add session variables
  • Add single line text controls
  • Add password validation
  • Add server redirection
  • Designate a start page
  • Deploy and run the Web site
  • LESSON 12 Using Web DataWindows
  • Set up an EAServer connection profile
  • Build a Web DataWindow Container
  • Create a Web page with a Web DataWindow Container
  • Enable a new product information button
  • Add a button to update the database
  • Add a DataWindow to an existing Web page
  • Add the ability to retrieve product information
  • Test the Web page
  • Add a new product to the database
  • Run the Web application

Getting Started

PowerBuilder

8

DOCUMENT ID: 37772-01-0800-01 LAST REVISED: June 2001 Copyright © 1989-2001 by Sybase, Inc. All rights reserved. This publication pertains to Sybase database management software and to any subsequent release until otherwise indicated in new editions or technical notes. Information in this document is subject to change without notice. The software described herein is furnished under a license agreement, and it may be used or copied only in accordance with the terms of that agreement. To order additional documents, U.S. and Canadian customers should call Customer Fulfillment at (800) 685-8225, fax (617) 229-9845. Customers in other countries with a U.S. license agreement may contact Customer Fulfillment via the above fax number. All other international customers should contact their Sybase subsidiary or local distributor. Upgrades are provided only at regularly scheduled software release dates. No part of this publication may be reproduced, transmitted, or translated in any form or by any means, electronic, mechanical, manual, optical, or otherwise, without the prior written permission of Sybase, Inc. Sybase, the Sybase logo, ADA Workbench, Adaptable Windowing Environment, Adaptive Component Architecture, Adaptive Server, Adaptive Server Anywhere, Adaptive Server Enterprise, Adaptive Server Enterprise Monitor, Adaptive Server Enterprise Replication, Adaptive Server Everywhere, Adaptive Server IQ, Adaptive Warehouse, AnswerBase, Anywhere Studio, Application Manager, AppModeler, APT Workbench, APT-Build, APT-Edit, APT-Execute, APT-FORMS, APT-Translator, APT-Library, Backup Server, ClearConnect, Client-Library, Client Services, Data Pipeline, Data Workbench, DataArchitect, Database Analyzer, DataExpress, DataServer, DataWindow, DB-Library, dbQueue, Developers Workbench, Direct Connect Anywhere, DirectConnect, Distribution Director, E-Anywhere, E-Whatever, Embedded SQL, EMS, Enterprise Application Studio, Enterprise Client/Server, Enterprise Connect, Enterprise Data Studio, Enterprise Manager, Enterprise SQL Server Manager, Enterprise Work Architecture, Enterprise Work Designer, Enterprise Work Modeler, EWA, Financial Fusion, Financial Fusion Server, Gateway Manager, ImpactNow, InfoMaker, Information Anywhere, Information Everywhere, InformationConnect, InternetBuilder, iScript, Jaguar CTS, jConnect for JDBC, KnowledgeBase, MainframeConnect, Maintenance Express, MAP, MDI Access Server, MDI Database Gateway, media.splash, MetaWorks, MySupport, Net-Gateway, Net-Library, ObjectConnect, ObjectCycle, OmniConnect, OmniSQL Access Module, OmniSQL Toolkit, Open Client, Open ClientConnect, Open Client/Server, Open Client/Server Interfaces, Open Gateway, Open Server, Open ServerConnect, Open Solutions, Optima++, PB-Gen, PC APT Execute, PC DB-Net, PC Net Library, Power++, power.stop, PowerAMC, PowerBuilder, PowerBuilder Foundation Class Library, PowerDesigner, PowerDimensions, PowerDynamo, PowerJ, PowerScript, PowerSite, PowerSocket, Powersoft, PowerStage, PowerStudio, PowerTips, Powersoft Portfolio, Powersoft Professional, PowerWare Desktop, PowerWare Enterprise, ProcessAnalyst, Report Workbench, Report-Execute, Replication Agent, Replication Driver, Replication Server, Replication Server Manager, Replication Toolkit, Resource Manager, RW-DisplayLib, RW-Library, S-Designor, SDF, Secure SQL Server, Secure SQL Toolset, Security Guardian, SKILS, smart.partners, smart.parts, smart.script, SQL Advantage, SQL Anywhere, SQL Anywhere Studio, SQL Code Checker, SQL Debug, SQL Edit, SQL Edit/TPU, SQL Everywhere, SQL Modeler, SQL Remote, SQL Server, SQL Server Manager, SQL SMART, SQL Toolset, SQL Server/CFT, SQL Server/DBM, SQL Server SNMP SubAgent, SQL Station, SQLJ, STEP, SupportNow, Sybase Central, Sybase Client/Server Interfaces, Sybase Financial Server, Sybase Gateways, Sybase MPP, Sybase SQL Desktop, Sybase SQL Lifecycle, Sybase SQL Workgroup, Sybase User Workbench, SybaseWare, Syber Financial, SyberAssist, SyBooks, System 10, System 11, System XI (logo), SystemTools, Tabular Data Stream, Transact-SQL, Translation Toolkit, UNIBOM, Unilib, Uninull, Unisep, Unistring, URK Runtime Kit for UniCode, Viewer, Visual Components, VisualSpeller, VisualWriter, VQL, WarehouseArchitect, Warehouse Control Center, Warehouse Studio, Warehouse WORKS, Watcom, Watcom SQL, Watcom SQL Server, Web Deployment Kit, Web.PB, Web.SQL, WebSights, WebViewer, WorkGroup SQL Server, XA-Library, XA-Server and XP Server are trademarks of Sybase, Inc. 3/01 Unicode and the Unicode Logo are registered trademarks of Unicode, Inc. All other company and product names used herein may be trademarks or registered trademarks of their respective companies. Use, duplication, or disclosure by the government is subject to the restrictions set forth in subparagraph (c)(1)(ii) of DFARS 52.2277013 for the DOD and as set forth in FAR 52.227-19(a)-(d) for civilian agencies. Sybase, Inc., 6475 Christie Avenue, Emeryville, CA 94608.

Contents

About This Book ........................................................................................................................... ix

PART 1
C H APTE R 1

WELCOME TO POWERBUILDER Introduction to PowerBuilder......................................................... 3 What PowerBuilder is ....................................................................... 4 The PowerBuilder environment ........................................................ 7 PowerBuilder objects ..................................................................... 12 About the PowerBuilder Tutorial ................................................. Learning to build a client/server application ................................... Learning to build a Web application ............................................... How you will proceed ..................................................................... How long it will take ................................................................. What you will learn .................................................................. Setting up for the tutorial ................................................................ BUILDING A CLIENT/SERVER APPLICATION Starting PowerBuilder .................................................................. Create a new workspace................................................................ Create a target ............................................................................... Specify an icon for the application ................................................. Change the size of the main window ............................................. Run the application ........................................................................ 29
30 33 39 41 43

C H APTE R 2

19
20 21 22 22 23 24

PART 2
L ESS O N 1

L ESS O N 2

Customizing the PowerBuilder Environment ............................. 47 Manipulate the System Tree window ............................................. 48 Open an object ............................................................................... 50

iii

Contents

Manipulate views............................................................................ Add an extra Script view.......................................................... Display view title bars.............................................................. Float and dock views............................................................... Manipulate tabbed views......................................................... Save a view layout scheme..................................................... Reset the default view layout scheme..................................... Set up the toolbars ......................................................................... Show labels on toolbar buttons ............................................... Float the toolbars..................................................................... Reposition the toolbars............................................................
LES SON 3

52 53 54 55 56 57 58 59 60 61 63

Building a Login Window .............................................................. 65 Create a new window ..................................................................... 66 Add controls to the window ............................................................ 70 Add a Picture control ............................................................... 72 Add StaticText controls ........................................................... 74 Specify properties of the StaticText controls ........................... 75 Add SingleLineEdit controls .................................................... 77 Specify properties of the SingleLineEdit controls .................... 78 Add CommandButton controls ................................................ 79 Specify properties of the CommandButton controls ................ 80 Change the tab order on the window ............................................. 81 Code some Help events and preview the window ......................... 82 Write the script to open the window ............................................... 85 Modify the frame window Open event ..................................... 86 Compile the script.................................................................... 89 Connecting to the Database ......................................................... 91 Look at the EAS Demo DB database ............................................. 92 Look at the database profile for the EAS Demo DB database 94 Look at table definitions in the EAS Demo DB database ........ 98 Run the Connection Object wizard............................................... 102 Declare a global variable.............................................................. 105 Modify the connection information ............................................... 109 Modify the of_GetConnectionInfo function ............................ 110 Call the connection service manager .................................... 112 Complete the login and logout scripts .......................................... 115 Set up shortcuts for AutoScript.............................................. 116 Add code to the OK button Clicked event ............................. 117 Add code to the Cancel button Clicked event ....................... 119 Add code to the application Close event ............................... 120 Run the application ...................................................................... 122

LES SON 4

iv

Contents

LE SSO N 5

Modifying the Ancestor Window ............................................... Add DataWindow controls............................................................ Add a library to the search path ............................................ Add a DataWindow control for the master DataWindow ....... Add a DataWindow control for the detail DataWindow.......... View the scripts inherited from the user object...................... Add user events and event scripts ............................................... Add scripts to retrieve data for the DataWindow controls ............ Rebuild library objects.................................................................. Setting Up the Menus ................................................................. Modify the frame menu ................................................................ Modify the File menu ............................................................. Enable Help menu items ....................................................... Create a new sheet menu ............................................................ Inherit and save a new menu ................................................ Add items to the new menu ................................................... Add a new toolbar for the new menu items ........................... Add menu scripts to trigger user events....................................... Attach the new menu and run the application .............................. Building DataWindow Objects ................................................... Create and preview a new DataWindow object ........................... Save the DataWindow object ....................................................... Make cosmetic changes to the first DataWindow object .............. Create a second DataWindow object........................................... Select the data source and style ........................................... Select the table and columns ................................................ Define a retrieval argument ................................................... Specify a WHERE clause ...................................................... View the DataWindow in the DataWindow painter ................ Save the DataWindow object ................................................ Make cosmetic changes to the second DataWindow object ........ Rearrange the columns ......................................................... Align the labels and columns................................................. Display the arrow for a dropdown DataWindow edit style .....

123 124 126 128 131 132 134 138 141 143 144 145 147 149 150 151 153 155 157 161 162 166 167 169 170 171 173 174 175 178 179 180 182 183

LE SSO N 6

LE SSO N 7

v

Contents

LES SON 8

Attaching the DataWindow Objects ........................................... Attach a DataWindow object to the master DataWindow control . Attach the DataWindow object to the detail DataWindow control Run the application ...................................................................... Attach DataWindow objects to the Product window ..................... Run the completed application ..................................................... Running the Debugger ................................................................ Add breakpoints in application scripts.......................................... Run in debug mode ...................................................................... Set a watch and a conditional breakpoint .................................... Preparing the Application for Deployment................................ Create the Project object.............................................................. Create the executable file ............................................................ Create a shortcut.......................................................................... Test the executable file ................................................................ BUILDING A WEB APPLICATION Creating Web pages .................................................................... Create a PowerDynamo Web site ................................................ Create and modify a basic Web page .......................................... Create a 4GL introductory Web page.................................... Change type face .................................................................. Add a graphic ........................................................................ Add absolute positioning to a graphic ................................... Add page navigation .................................................................... Create a product information Web page ............................... Add a hyperlink...................................................................... Add a button .......................................................................... Create a login page with validation and redirection ..................... Create a basic login page...................................................... Add session variables ........................................................... Add single line text controls................................................... Add password validation ....................................................... Add server redirection ........................................................... Designate a start page ................................................................. Deploy and run the Web site ........................................................

185
186 188 189 192 194

LES SON 9

197
198 202 207

LES SON 10

209 210 213 215 217

PART 3
LES SON 11

221
223 226 227 229 230 232 233 234 236 237 239 240 242 244 246 249 250 251

vi

.............................. Add the ability to retrieve product information................... Build a Web DataWindow Container.......................................................... Set up an EAServer connection profile ................................................................................ Run the Web application ............................................................................... Add a DataWindow to an existing Web page................. Test the Web page............................... Add a new product to the database .................. Add a button to update the database . Enable a new product information button........................................Contents LE SSON 12 Using Web DataWindows............................................................. 255 257 259 263 266 269 272 275 277 279 281 vii ........... Create a Web page with a Web DataWindow Container ...............................

viii .

In online Help you can see: • • • Procedures for accomplishing tasks in PowerBuilder about PowerBuilder topics or components about PowerBuilder functions or Reference information Context-sensitive information reserved words in scripts ix .About This Book Subject This book provides information that enables you to start using PowerBuilder: • • • Part 1 Part 2 is an overview of the PowerBuilder development environment is a tutorial in which you build your first PowerBuilder application Part 3 is a tutorial in which you create a Web target. you can access its extensive online Help system. deploy and run a Web site. When you have a question about using PowerBuilder. and use Web DataWindows Audience Online Help This book is for anyone building applications using PowerBuilder.

sybase. feature guide. and tutorial Book Installation Guide Description Tells you how to install PowerBuilder Provides an overview of the types of applications and components you build with PowerBuilder and the features you use to build them Introduces you to PowerBuilder and provides a tutorial you can step through to learn the basics Tells how to use the painters to build objects in PowerBuilder Presents collections of techniques for implementing many common application features.sybase. grouped by topic: Topic Installation. see Using the Online Books on the product CD. Selected books in HTML format You can jump to these books from various topics in online Help. Users in North America Call 1-800-8-SYBASE.com and navigate to Shop Online. Books on the Web • • • Go to the Sybase Web site at www. Users outside North America Call your local representative (phone numbers are listed on the Sybase international Web site at http://www.com/contact_us/worldwide/). Hardcopy books • • • To order a hardcopy documentation set: All users Go to the Sybase Web site at www.About This Book PowerBuilder documentation How to access The PowerBuilder books are available in several forms: • Online Books You probably installed them when you installed PowerBuilder. The books These are the books in the PowerBuilder documentation set. For information.sybase.com. along with deployment details and tips for cross-platform and international development and deployment Building Internet and Enterprise Applications Getting Started Application development User’s Guide Application Techniques x .

define. syntax for accessing properties and data. and properties of DataWindow controls and DataStores in all supported environments Provides reference information for objects and classes in the Web Target object model Lists properties. displaying. and related functions for PowerBuilder system objects and controls Tells how to connect to a database from PowerBuilder. debug. events. including properties and functions for expressions. statements. and run PowerBuilder Web targets Describes syntax and usage information for the PowerScript language. functions. and updating data Tells how to build. manipulating.About This Book Topic Book DataWindow Programmer’s Guide Description Explains how to use DataWindows in all the supported environments (PowerBuilder. and manage database connections accessed through the Powersoft ODBC interface or one of the native Powersoft database interfaces Working with Web Targets Programmer’s Reference PowerScript Reference DataWindow Reference Web Target Reference Objects and Controls Communicating with a database Connecting to Your Database xi . expressions. describes how to set up. including variables. and reference information for the methods. Java) and describes programming techniques for accessing. events. deploy. and events Provides reference information for the DataWindow object. Web pages.

and utilities to accelerate the application development process Describes the objects. which includes objects. and functions provided with the PFC PFC Object Reference xii . events.About This Book Topic PowerBuilder Foundation Class Library Book PFC User’s Guide Description Tells how to use and extend the PFC. services. instance variables.

.PART 1 Welcome to PowerBuilder This part is an overview of the PowerBuilder development environment.

.

CH A PTE R 1 Introduction to PowerBuilder About this chapter This chapter introduces the PowerBuilder development environment. It also describes the building blocks of a PowerBuilder application. which you use in the tutorial in Parts 2 and 3. 3 . see the PowerBuilder User’s Guide. Topic What PowerBuilder is The PowerBuilder environment PowerBuilder objects Page 4 7 12 Contents For more information For a more detailed description of the PowerBuilder development environment.

For example. Application processing logic Event and function scripts in which you code business rules. validation rules. the script for a Clicked event in a button might open another window. However. controls. triggering the Open event in that window. PowerScript language You write scripts using PowerScript. In a client application. the predefined events are all you need. The execution of an event script can also cause other events to be triggered. and other application processing. and statements that perform processing in response to an event. each button has a Clicked event associated with it and each textbox has a Modified event. the script for a button’s Clicked event might retrieve and display information from the database. in some situations. What is a PowerBuilder component? PowerBuilder applications are event driven In a multitier application. Scripts consist of PowerScript commands. and other application components you create with PowerBuilder each have a set of predefined events. For example. the script for a textbox’s Modified event might evaluate the data and perform processing based on the data. called custom class user objects. multitier. Windows. the modules that contain application processing logic can be deployed to a server. when a user clicks a button. 4 . the PowerBuilder language. windows. PowerBuilder allows you to code application processing logic as part of the user interface or in separate modules. You can build components designed to work as EAServer or COM components.What PowerBuilder is What PowerBuilder is PowerBuilder is an enterprise development tool that allows you to build many types of applications and components. or enters data into a textbox. You write scripts that specify the processing that should happen when events are triggered. What’s in a PowerBuilder application? A PowerBuilder client application can contain: • • A user interface Menus. functions. users control what happens by the actions they take. and window controls that users interact with to direct an application. one or more events are triggered. For example. Most of the time. It is one of a group of Sybase products that together provide the tools to develop client/server. chooses an item from a menu. you may want to define your own events. For example. and Internet applications.

and the DataWindow Web control for ActiveX. For example. For information about the DataWindow Web control for ActiveX. By taking advantage of object-oriented programming techniques such as encapsulation. For information about PowerBuilder plugins. and so on. 5 . see the sections on distributed application techniques in Application Techniques. For information about Web targets. and EAServer components. In all editions of PowerBuilder. see Application Techniques.Chapter 1 Introduction to PowerBuilder PowerScript functions PowerScript provides a rich assortment of built-in functions that can act on the various components of your application. and powerful. If you are using the Enterprise edition of PowerBuilder. A multitier application lets you: • • • Centralize business logic on servers (EAServer or MTS) Partition application functions between the client and the server. inheritance. you can build complex Web pages that can include clientand server-side scripting. there is a function to open a window. you can get the most out of each object you create. Internet applications Multitier applications PowerBuilder lets you build applications that run in a distributed computing environment. database content. and polymorphism. making your work more reusable. extensible. The basic building blocks of a PowerBuilder application are the objects you create. Object-oriented programming with PowerBuilder Each menu or window you create with PowerBuilder is a self-contained module called an object. a function to enable a button. and functions) that are appropriate to it. thereby reducing the client workload Build scalable applications that are easy to maintain For information about multitier applications. you can use the DataWindow and PowerBuilder window plugins. Each object contains the particular characteristics and behaviors (properties. see the DataWindow Programmer’s Guide and the DataWindow Reference. With Web targets. You can also build your own functions to define processing unique to your application. events. a function to close a window. a function to update the database. Web DataWindows. the PowerBuilder window ActiveX. you can develop PowerBuilder applications that run on the Web using Web targets technology. see Working with Web Targets.

What PowerBuilder is Database connectivity PowerBuilder provides easy access to corporate information stored in a wide variety of databases. through a middle-tier data access server like the Sybase DirectCONNECT server. 6 . or by selecting the F1 key from anywhere in PowerBuilder. see Connecting to Your Database. or through a native or direct connection to a database. There are jumps in several places from the online Help to books in HTML format. Data can be accessed through the PowerBuilder ODBC or JDBC interfaces. Manuals are also available on the Sybase Web site. For information on database connectivity. Online Help and documentation PowerBuilder online Help can be accessed through interface Help buttons and menu items.

deployment. and build and deploy multiple targets at once. Later you learn how to create a Web target. The Clip window lets you store code fragments that you use frequently. project execution. The first lesson in the tutorial shows you how to create a workspace and PowerScript target. builds. You use it to open. The output of a variety of operations (migration. Clip window Output window 7 . A Web application. debug. you work with one or more targets in a workspace. The development environment When you start PowerBuilder. and searches) displays in an Output window at the bottom of the main window. open and edit objects in multiple targets. and deployment. System Tree The System Tree window can serve as the hub of your development activities. images. scripts. and build your targets. database connections. and for drag-and-drop programming. it opens in a window that contains a menu bar and the PowerBar at the top. object saves. A PowerBuilder target can be one of two types: • • PowerScript target Web target A client/server or multitier executable application or a server component. downloaded components—as well as settings for build options. It contains all the elements you need to build a Web site—HTML files. You can add as many targets to the workspace as you want. run.Chapter 1 Introduction to PowerBuilder The PowerBuilder environment Workspaces and targets In PowerBuilder. and the System Tree and Clip windows on the left.

The PowerBuilder environment Painters Once you have created a workspace and a PowerScript target. methods. Browser PowerBar PainterBar 8 . You can use the New. The Web DataWindow DTC provides an easy way to access a database from a Web page. and deletes against the database. including the data types of all arguments and return values. Design-time controls (DTCs) create basic HTML and scripts from information you provide in property sheets. When you open a painter or editor. Web sites. you build the components of the target using painters. PowerBuilder provides a painter for each type of object you build. you can also open the Browser. Wizards Design-time controls To-Do List The To-Do List displays a list of development tasks you need to do for the current target. You can also type in entries or import them from a text file and then link them to a task that you want to complete. From the PowerBar. Editors For Web targets. such as buttons and textboxes. For example. The PowerBar is the main control point for building PowerBuilder applications. In the HTML editor you can edit pages in source or display format and preview the results. The PowerBar displays when you begin a PowerBuilder session. and structures that are defined for or available to your PowerScript target. and Web pages. you build a window in the Window painter. style sheet. Objects in the Browser can be displayed in alphabetic or hierarchical order. Wizards simplify the creation of applications. Inherit. or Open buttons on the PowerBar to open all of the PowerBuilder painters. The property sheets display when you drop a DTC on a Web page in the HTML editor. components. PowerBuilder also displays one or more PainterBars with buttons that provide easy access to the tools available in the painter or editor. and build and deploy the workspace. PowerBuilder provides HTML. variables. The Browser displays methods with their complete signatures. It displays dynamic database content in a variety of presentation styles and supports inserts. Entries on the To-Do list can be created automatically by most PowerBuilder wizards. objects. The Browser lets you see all the objects. There you define the properties of the window and add controls. debug or run the current application. PowerBuilder displays a new window that has a workspace in which you design the object you are building. Painters provide an assortment of tools for building objects. updates. You can use a standalone script editor or one that is built into the HTML editor. and frame set editors.

pipeline. Clip. target. and customize existing ones. DataWindow. PowerBar buttons The buttons in the PowerBar give you quick access to the most common PowerBuilder tasks: Button Use to Create new workspace. HTML frame. The ability to display PowerTips is toggled on and off by selecting the Show PowerTips menu item in any toolbar popup menu. you can move the toolbars around. project. set up custom layouts for each painter. choose whether PowerBuilder opens your last workspace at startup with or without painters and editors open. query.Chapter 1 Introduction to PowerBuilder StyleBar The StyleBar displays when you open any painter that can contain text controls. or script file Preview a window or DataWindow object Show or hide the System Tree window 9 . user object. HTML page. menu. Customizing the environment In addition to displaying text in toolbar buttons. window. you can modify text properties such as the font and point size. or window Open an existing application. structure. Using buttons on the StyleBar. add new toolbars. You can also include brief descriptive texts on all toolbar buttons by selecting ShowText from any toolbar popup menu. user object. You can also rearrange the System Tree. or open a tool Inherit from menu. such as the Window painter. You can add buttons for opening painters and performing other activities. component. PowerTips When you leave the mouse pointer over a button for a second or two. or other object. PowerBuilder can display a brief description of the button (a PowerTip). style sheet. customize shortcut keys. function. and Output views. and change the colors and fonts used in scripts.

and manipulate data in databases Edit a file Start an incremental build of the workspace Start a full build of the workspace Deploy the workspace When a series of operations is in progress. skip to the next operation 10 . These can be self entered or entered automatically by PowerBuilder wizards View object information (such as object properties or global variables) and copy. or print it Show or hide the Clip window Create and maintain libraries of PowerBuilder objects Specify how to connect to a database Specify how to connect to EAServer Maintain databases. such as a full deploy of the workspace. export.The PowerBuilder environment Button Use to Show or hide the Output window Move to the next line in the Output window Move to the previous line in the Output window Display a list of development tasks you need to do. control user access to databases.

Chapter 1 Introduction to PowerBuilder Button Use to Stop a build or deploy operation or series of operations Debug the current target Select a target and debug it Run the current target Select a target and run it Exit from PowerBuilder 11 .

or DataWindow object. The Application object defines application-level behavior. just like a window. 12 . The script you write for the Open event initiates the activity in the application. When the user ends the application. menu. Application object The Application object is the entry point into an application. an Open event is triggered in the Application object. the Close event in the Application object is triggered. function. either visual or nonvisual Reproduces data within a database or across databases Packages application for distribution to users These objects are described in more detail in the sections that follow. and what processing should occur when the application begins and ends. such as which fonts are used by default for text. When a user runs the application.PowerBuilder objects PowerBuilder objects The basic building blocks of a PowerScript target are objects: Object Application Window DataWindow Menu Global function Query Structure User object Pipeline Project Use Entry point into an application Primary interface between the user and a PowerBuilder application Retrieves and manipulates data from a relational database or other data source List of commands or options that a user can select in the currently active window Performs general-purpose processing SQL statement used repeatedly as the data source for a DataWindow object Collection of one or more related variables grouped under a single name Reusable processing module or set of controls. It is a discrete object that is saved in a PowerBuilder library (PBL file).

such as closing a database or writing to a preferences file. If there are serious errors during execution that are not caught using PowerBuilder’s exception handling mechanism. the Application object’s SystemError event is triggered. request information from a user. Windows can display information.Chapter 1 Introduction to PowerBuilder The script you write for the Close event typically does all the cleanup required. A window consists of: • • • Properties that define the window’s appearance and behavior (for example. Windows Windows are the primary interface between the user and a PowerBuilder application. and respond to the user’s mouse or keyboard actions. a window might have a title bar and a Minimize box) Events triggered by user actions Controls placed in the window 13 .

a check box. Presentation styles DataWindow objects also handle the way data is presented to the user. For example. DataWindow objects A DataWindow object is an object that you use to retrieve and manipulate data from a relational database or other data source (such as an Excel worksheet or dBASE file). You can choose from several presentation styles. and two smaller group boxes with radio buttons. you can display the data in a Tabular or a Freeform style. On the right is a group box that contains static text controls. Under the group box is a command button.PowerBuilder objects Windows can have various kinds of controls. as illustrated in the following picture: On the left of the window is a DataWindow control with horizontal and vertical trackbars. 14 . edit mask controls with the SpinControl property on.

pictures. Display formats. For example. and graphs that are tied directly to the data retrieved by the DataWindow.Chapter 1 Introduction to PowerBuilder There are many ways to enhance the presentation and manipulation of data in a DataWindow object. and validation You can specify how to display the values for each column. and validation rules for columns. edit styles. you can have the data appear as radio buttons in a DataWindow so users know what their choices are. For example: • If a column can take only a small number of values. you can include computed fields. You do this by defining display formats. and you can validate data entered by users in a DataWindow object. edit styles. 15 .

One of the lessons in the tutorial shows you how to use a Web DataWindow in a Web target. Menus Menus are lists of items that a user can select from a menu bar for the active window. 16 . This can spare you from writing code to make sure users enter valid data. • If a column can take numbers only in a specific range. you can specify a simple validation rule for the data. You can select menu items with the mouse or with the keyboard. salaries. Web DataWindow You can generate DataWindow objects in HTML and display them in a browser.PowerBuilder objects • If the data includes phone numbers. or use accelerator (mnemonic access) keys defined for the items. They provide the user with commands (such as Open and Save As on the PowerBuilder File menu) or alternate ways of performing a task (for example. and dates. A cascading menu is a menu that appears to the side of an item in a dropdown menu. the items on the Edit menu in the Window painter correspond to buttons in the PainterBar). using a PowerBuilder component running in either EAServer or MTS to generate the HTML. You can define your own keyboard shortcuts for any PowerBuilder menu item from a dialog box that you open with the Tools>Keyboard Shortcuts menu item. The items on a menu are usually related. A dropdown menu is a menu under an item in the menu bar. you can format the display to suit the data.

Global functions are not encapsulated within another object. Structures allow you to refer to related entities as a unit rather than individually. such as Pascal and COBOL. they perform general-purpose processing such as mathematical calculations or string handling. you can define the user’s ID. Delete. • Queries A query is a SQL statement that is saved with a name so that it can be used repeatedly as the data source for a DataWindow object. access level. but instead are stored as independent objects. Global functions PowerBuilder lets you define two types of functions: • Object-level functions are defined for a particular type of window. menu. There are two kinds of structures: • Object-level structures are associated with a particular type of object such as a window or menu. These structures can always be used in scripts for the object itself. Structures • 17 . Instead. You can also choose to make the structures accessible from other scripts. three Menu objects on the Data menu (Update. address. The preceding window shows two Menu objects on the menu bar (File and Data). structures are called records. Unlike object-level functions. Queries enhance developer productivity. You can declare an instance of the structure and reference it in any script in an application. global functions do not act on particular instances of an object. and then refer to this collection of variables as user_struct. or other object type and are encapsulated within the object for which they are defined. and a picture (bitmap) of the employee as a structure called user_struct. A structure is a collection of one or more related variables of the same or different data types grouped under a single name. For example. and two Menu objects on the cascading menu beside Update (Current Row and All Rows). In some languages. These are further divided into system functions (functions that are always available for objects of a certain object class) and user-defined functions. and Cancel). Global structures are not associated with any object or type of object in an application. because they can be coded once but reused as often as necessary.Chapter 1 Introduction to PowerBuilder Each choice in a menu is defined as a Menu object in PowerBuilder.

several applications might have a Close button that performs a certain set of operations and then closes the window. in PowerBuilder libraries (PBL files). such as windows and menus. They can be further divided into standard or custom user objects. For example. you could define a class user object. To use a class user object. Custom class user objects. To do this. The main types of user objects are: • Visual user objects These are reusable controls or sets of controls that have a consistent behavior. When you create an application. For example. or they might have DataWindow controls that perform the same type of error checking. are the foundation of PowerBuilder multitier applications. For example. You can create Project objects that build executable applications and components you can deploy to a server. You typically use class objects to define business rules and other processing that acts as a unit. you can use it as often as you need. Several applications might all require a standard file viewer. Projects 18 . as well as proxy objects you use in EAServer applications. PowerBuilder retrieves the objects from the library. a visual user object could consist of several buttons that function as a unit. User objects can be visual or nonvisual (class). you specify which libraries it uses. which define functions and variables. you should define a user object.PowerBuilder objects User objects Applications often have features in common. You define the user object once and use it as many times as you need. Applications can use as many libraries as you want. You can also use controls for external visual objects that were created outside PowerBuilder. whether visual or nonvisual. Standard user objects. • Libraries You save objects. If you find yourself using the same application feature repeatedly. you might want to calculate commissions or perform statistical analysis in several applications. The buttons could have scripts associated with them that perform standard processing. you create an instance of the object in a script and call its functions. are system objects that are always available with PowerBuilder. Once the object is defined. Class user objects These are reusable processing modules that have no visual component. When you run an application.

Topic Learning to build a client/server application Learning to build a Web application How you will proceed How long it will take What you will learn Setting up for the tutorial Page 20 21 22 22 23 24 19 .CH A PTE R 2 About the PowerBuilder Tutorial About this chapter Contents This chapter describes what you will do in the PowerBuilder tutorial and how to get set up for it.

Learning to build a client/server application Learning to build a client/server application The PowerBuilder tutorial is divided into two parts. the top half of the Maintain Products window contains a list of products with a pointer to a single product. Customer and Product windows The MDI application includes two windows that provide access to the Customer and Product tables in the EAS Demo DB database. 20 . Login window The MDI application also includes a login window that allows you to connect to the database at startup time. and delete functions against the customer and product data. the bottom half of the window displays extra detail for the current product. The first part of the tutorial is a series of ten exercises in which you build a Multiple Document Interface (MDI) database application for a fictional company called SportsWear. The application allows you to retrieve customer and product information from the database and perform insert. For example. update. Inc. Both windows are master/detail windows: each allows you to display a master list of rows in a particular table and also see detailed information for each row in the table.

The Web pages enable access to the data sources and display the Web DataWindows previously created.Chapter 2 About the PowerBuilder Tutorial Learning to build a Web application In the second set of exercises. access a Welcome page. add products to the database. you must have: • • • The Enterprise edition of PowerBuilder The Web Target option of PowerBuilder installed Access to EAServer 21 . and view product information. Web pages The Web target part of the tutorial has five Web pages that enable the user to log in. you build a Web interface that allows you to add and retrieve information from the same database. PowerBuilder Enterprise To complete the Web application portion of the tutorial. the Welcome page. but this time through a browser. Here is one example.

and menus in a PowerBuilder workspace and target Explore the PowerBuilder environment and customize the workspace Create a login window to allow the user to enter database connection parameters (user ID and password) Connect to the database using the Transaction object and user-entry parameters. and display the contents of variables Create an executable file that you can use to run the application outside the PowerBuilder development environment Create a PowerDynamo Web target. or you can stop after any lesson and continue at another time. begin familiarizing yourself with the development environment. 22 . and delete operations against the database Modify the frame menu and create a new sheet menu for the application Build the DataWindow objects that retrieve customer and product information. use the Workspace wizard and the Template Application wizard to create an Application object. see how to set breakpoints in scripts. create a login page using a validation script. Add Web DataWindows to the existing Web pages. Run the tutorial application in debug mode. add scripts to allow users to retrieve data and perform insert. and deploy and build the Web pages.How you will proceed How you will proceed Lesson 1 What you will do Start PowerBuilder. step through the code. you can use the solution provided for the first part of the tutorial as a starting point. then add them to the Customer and Product windows. How long it will take You can do the entire tutorial in about four to five hours. see how database profiles are defined in the PowerBuilder environment Change the base sheet window by adding master and detail DataWindow controls. windows. The solution is in the Tutorial\Solutions directory. update. create web pages with hyperlinks and graphics. Create the ability for the user to add product information to the data source and view information 2 3 4 5 6 7-8 9 10 11 12 If you want to complete only the Web target lessons.

Only experience building real-world applications can do that. accelerators.Chapter 2 About the PowerBuilder Tutorial What you will learn Building a client/ server application You will learn basic PowerBuilder techniques and concepts. including: How to use the Application painter Window painter To Define an Application object and application-level scripts Create SingleLineEdit controls. add server interaction. It will give you hands-on experience and provide a foundation for continued growth. Web pages. including: How to use the Web target wizards Script view Page View To Design Web pages. StaticText controls. menu items. menus. and menus Identify logic errors that may cause problems when you run the application Create an executable version of an application DataWindow painter Menu painter Layout view Script view Debugger Project painter Building a Web application You will learn basic Web target techniques and concepts. and Web controls View the WYSIWYG view of the Web target page This tutorial will not make you an expert in PowerBuilder. window controls. 23 . CommandButton controls. DataWindow controls. and shortcut keys Design how the windows. windowlevel scripts. and DataWindows will look when you run the application Define scripts for applications. windows. and control-level scripts Define selection and display options Define menus. and meet other requirements for working in the browser environment Define scripts for applications.

The Tutorial\Solutions directory The Tutorial\Solutions directory contains a PowerBuilder library called pbtutor. You can install it from the PowerBuilder CD. When you have finished the tutorial. The Tutorial directory The tutorial also uses the following files: File tutor_pb.jpg tutorial. these files are installed in the Tutorial directory. you must install it now. If you do not already have Adaptive Server Anywhere on your local machine or server.Setting up for the tutorial Setting up for the tutorial Before you start the tutorial. If you installed PowerBuilder in a nondefault location. you can delete the files. Connecting to a database The tutorial uses the EAS Demo DB V4 database that installs with PowerBuilder.pbl that contains all the objects and scripts that you create in the first part of the tutorial. See "Getting the files you need for the tutorial" on page 222.hlp tutsport.ico Contents PowerBuilder library that contains several objects that you use in the tutorial A Help file that provides context-sensitive Help to a window that you build in the tutorial A bitmap A graphic An icon When you install PowerBuilder. as well as workspace and target files.pbl pbtutor. You can also use it as a starting point if you want to complete only the Web application part of the tutorial.bmp tshirtw. You can use this solutions library as a reference while you complete the first part of the tutorial. which is a subdirectory of the PowerBuilder installation directory. you need to make sure that you can connect to a database and that you have the tutorial files. you must make sure that the odbc.ini registry entry defining the EAS Demo DB as a data source points to the correct location of the Adaptive Server Anywhere engine. 24 . This is an Adaptive Server Anywhere database and requires the Sybase Adaptive Server Anywhere engine.

1 or later PowerDynamo 3.2 or later Adaptive Server Anywhere 7.6.1 or later Web targets feature of PowerBuilder Internet Explorer 5. you must make sure the following tools are installed on your computer: • • • • • Jaguar CTS 3.Chapter 2 About the PowerBuilder Tutorial The Web targets tutorial Before you start the Web targets tutorial.5.5 (including the Microsoft Java VM from the custom setup) 25 .

Setting up for the tutorial 26 .

It provides step-by-step instructions for creating a simple database application.PART 2 Building a Client/Server Application This part is a tutorial that shows you how to get started with PowerBuilder. .

.

29 . In this lesson you: • • • • • Create a new workspace Create a target Specify an icon for the application Change the size of the main window Run the application How long does it take? About 15 minutes.LE S S O N 1 Starting PowerBuilder This lesson provides the information you need to start PowerBuilder and create an application.

1 Double-click the PowerBuilder icon (representing PB80. Now you start PowerBuilder and create a new workspace. including Web targets covered in Part 3 of this tutorial.0>PowerBuilder 8. 30 .0 path. To make sure you have all the files necessary to complete the tutorial.EXE) in the Sybase>PowerBuilder 8. First read the installation notes for this release Any last-minute items are documented there. see "Setting up for the tutorial" on page 24. edit. The PowerBuilder development environment displays. Select the Reload Last Workspace On Starting PowerBuilder checkbox to load the most recently used workspace each time you start a PowerBuilder session and click Close This Dialog. or Select Programs>Sybase>PowerBuilder 8. If the Welcome to PowerBuilder dialog box displays You can select the Don’t Show This Dialog Again checkbox to keep PowerBuilder from displaying the welcome dialog box every time you start PowerBuilder. and run PowerBuilder targets. You can build several targets within a single workspace. debug.0 from the Windows Start menu.Create a new workspace Create a new workspace Where you are > Create a new workspace Create a target Specify an icon for the application Change the size of the main window Run the application The workspace is where you build.

you see only a top-level entry in the System Tree to indicate that no workspace is currently open. or Click the New button in the PowerBar. 31 . The Workspace page of the New dialog box displays. If the New dialog box displays a different page PowerBuilder displays the page of the New dialog box that was used before the dialog box was last closed. the System Tree may show a workspace with targets and objects in it. 2 Select New from the File menu. Otherwise. make sure that the Workspace page displays by clicking the Workspace tab.Lesson 1 Starting PowerBuilder If this is the first time you are opening PowerBuilder 8 on your machine. In this exercise.

The New Workspace dialog box displays. Click OK.0 folder. 5 Type MyWorkspace in the File name textbox. Click Save. 32 . The New Workspace dialog box closes and the workspace you created appears as the first item in the System Tree. 4 Navigate to the Tutorial folder. The Tutorial folder is located directly under the PowerBuilder 8.Create a new workspace 3 Select Workspace from the Workspace page of the New dialog box.

you can press F1 to get Help on most fields. select New from the popup menu. As you step through the wizard. the Template Application wizard creates precoded events. and click the Target tab. menus. The Template Application wizard displays. 33 . 1 Select New from the File menu and click the Target tab. or Right-click MyWorkspace in the System Tree. 3 Click Next until the Specify New Application and Library page displays.Lesson 1 Starting PowerBuilder Create a target Where you are Create a new workspace > Create a target Specify an icon for the application Change the size of the main window Run the application Now you create a new target using the Template Application wizard. and user objects in addition to the application object. 2 Select the Template Application icon and click OK. windows. The first page of most wizards explains what the wizard is used for. Based on the choices you make. The Target page of the New dialog box displays.

but you specify a different name for the MDI base sheet. Menu and Service page displays. If you have clicked Next too many times You can use the wizard’s Back button to navigate back to the correct wizard page. so you do not need to change this selection. About MDI MDI stands for multiple document interface. You will create an MDI template application. The wizard automatically assigns filenames to a library and target that use this application name. It assigns the library a PBL extension and the target a PBT extension. and frame and frame menu names. library search path. 6 Click Next until the Name MDI Base Sheet. In an MDI application. The Specify Template Type page displays. Using the MDI frame menu bar. you can open additional windows known as sheet windows that display inside the frame window. The MDI Application with Microhelp radio button is selected. 34 . 5 Click Next. In this tutorial you use the default application type.Create a target 4 Type pbtutor in the Application Name textbox. the main window for the application is called the MDI frame.

PowerBuilder will generate two windows based on the w_master_detail_ancestor base sheet. 35 . w_products for Sheet 2. This is the ancestor window for windows in the tutorial application.Lesson 1 Starting PowerBuilder 7 Type w_master_detail_ancestor in the Base Sheet Window textbox. one for customers and one for products. Leave the default sheet menu and sheet manager service names. and clear the Sheet 3 textbox. On the Name Individual Sheets page. type w_customers for Sheet 1. 8 Click Next.

11 On the Specify Connectivity page. 10 Click Next twice. 36 . You will add a Connection object later. Type Maintain Customers as the display name for Sheet 1.Create a target 9 Click Next. The names you type will display in the title bars of these sheet windows. select None. Type Maintain Products as the display name for Sheet 2. You do not need to change the names of the About and Toolbar windows.

You will create a project later.Lesson 1 Starting PowerBuilder 12 Click Next twice to display the Ready To Create Application page. 37 . This is the last wizard page. It lists your current selections so that you can review them and use the Back button to go back and change them if necessary.

Click Finish. You can expand the System Tree to view all the objects that have been created by the Template Application wizard.Create a target 13 Make sure the Generate To-Do List checkbox is selected. and sets the new pbtutor application as the default application.pbt target and the pbtutor. The Template Application wizard creates the pbtutor. 38 .pbl library.

you can open it by selecting View>Properties from the Application painter menu bar. If you do not see the ICO file extension 4 You do not see ICO file extensions if the Hide File Extensions for Known File Types checkbox is selected in the Options dialog box of your Windows Explorer. Select the tutorial. If the Properties view is not open. PowerBuilder includes the icon automatically when you create an executable file. The icon appears in the workspace when you minimize the application during execution. Navigate to the Tutorial directory. 2 3 Select the Icon tab. Click Open. You can also open a Properties view by resetting the default view layout scheme. Click Browse. You specify an icon from the Properties view on the Application painter. 39 . 1 Click the Additional Properties button in the Properties view.ico file. A tabbed Application property sheet displays.Lesson 1 Starting PowerBuilder Specify an icon for the application Where you are Create a new workspace Create a target > Specify an icon for the application Change the size of the main window Run the application Now you specify an icon for the application.

5 Click OK. 40 .Specify an icon for the application The tutorial icon displays on the Icon page of the Application property sheet. Click the Close button in PainterBar1. Click the Save button in PainterBar1.

41 . When you run the application. the frame window will be centered. the main window displays in the position and size that you specify. The Window painter opens the application’s frame window. Now when you run the application. 3 Scroll down and select normal! in the WindowState dropdown listbox. 1 Double click w_pbtutor_frame in the System Tree.Lesson 1 Starting PowerBuilder Change the size of the main window Where you are Create a new workspace Create a target Specify an icon for the application > Change the size of the main window Run the application Now you change the size of the application’s main window. 2 Check the Center checkbox on the General page in the Properties view.

Click the Close button in PainterBar1. 4 Click the Other tab in the Properties view. Press the TAB key. The Window painter closes. 5 Click the Run button in PowerBar. 42 . The size of the window rectangle in the Layout view changes. Click the Yes button when you are prompted to save your changes. 6 Close the application. Type 3000 in the Width textbox and 2400 in the Height textbox.Change the size of the main window Now when you run the application. the frame window will have the size that you specify in the next step. The values you type are in PowerBuilder Units (PBUs). The application runs with the frame window centered and sized as you specified. instead of being maximized.

you can see the windows and menus that were created for you when PowerBuilder generated the application based on your choices. 1 Click the Run button on the PowerBar. By running the application. 43 . The display name that you typed in the Template Application wizard for Sheet 1 appears in the title bar.Lesson 1 Starting PowerBuilder Run the application Where you are Create a new workspace Create a target Specify an icon for the application Change the size of the main window > Run the application Now you run the application to see how it works. At this point the application does not do very much. 2 Select File>New>Maintain Customers. The application opens a sheet window. The sheet window title has a number after it to indicate the instance of the window that displays. All MDI applications created using the Wizard have a menu bar and a toolbar with some items already coded for you. The MDI frame window displays and is maximized. You will modify them later.

with the active sheet window at the top. 3 Select File>New>Maintain Products. 7 Select Top. 6 Select Floating in the Toolbars dialog box. The application displays the Toolbars dialog box. The sheet windows are arranged horizontally inside the MDI frame. The toolbar is repositioned at the top of the frame. 8 Click Done to close the Toolbars dialog box. You may need to move the Toolbars dialog box to see the floating toolbar. The code that adds the instance number to the title bar is in the ue_postopen event of the w_master_detail_ancestor base sheet window.Run the application About the number in the window title bar The number 1 appears following the window title because this is the first instance of the w_customers sheet window that is open. 4 Select Window>Tile Horizontal. A second application sheet window displays. 44 . The toolbar floats within the MDI frame. 5 Select File>Toolbars from the menu bar.

11 Make sure the Reopen Workspace on Startup and the Reload Painters when Opening Workspace checkboxes are selected. 10 Select Tools>System Options from the menu bar and then click the Workspaces tab. the last script you were working on opens at the last line you edited. you may want to have PowerBuilder in the state it was in when you exited. it opens the workspace and the painters that were open when you exited. Now when PowerBuilder starts up. 45 .Lesson 1 Starting PowerBuilder 9 Select File>Exit. with the workspace and painters you were working in open. When you exit and restart PowerBuilder. If you were coding in PowerBuilder when you exited. Click OK. The application closes and you return to the PowerBuilder development environment.

Run the application 46 .

47 .LE S S O N 2 Customizing the PowerBuilder Environment This lesson provides the information you need in order to become familiar with the PowerBuilder environment and to customize the workspace. This lesson is optional—you can skip to Lesson 3 if you want to. In this lesson you: • • • • Manipulate the System Tree window Open an object Manipulate views Set up the toolbars How long does it take? About 10 minutes.

you can see the content and structure of your target. You can work directly with all the objects in the workspace. (The other pages of the System Tree are relevant for Web targets. you can edit. 1 Click the Output window button in the PowerBar to display the Output window. You can also change the way the System Tree. It indicates the area that the System Tree would occupy if you released the mouse button. run. In this exercise you reposition.Manipulate the System Tree window Manipulate the System Tree window Where you are > Manipulate the System Tree window Open an object Manipulate views Set up the toolbars The Workspace page in the System Tree provides you with an overview of your work. and open the System Tree. or to the right of the painter workspace. 3 Click and hold the drag bar at the top of the System Tree. Clear the Horizontal Dock Windows Dominate button on the General page. search. 4 When the gray rectangular outline is positioned where you want the System Tree to display. For example. and Output windows are arranged. Drag the System Tree to position it above. but not for PowerScript targets). or regenerate a window using its popup menu in the System Tree. release the mouse button. Select Tools>System Options from the menu bar. below. close. Clip. 2 The System Tree and Clip windows now occupy the full height of the main window. By expanding the workspace and the objects it contains. 48 . a gray rectangular outline of the System Tree displays. You can reposition the System Tree in relation to the main window using its drag bar. When you start dragging. The System Tree displays in the new location.

No workspaces display in the System Tree. Closing the System Tree leaves more space for the painter workspace views. but the System Tree closes. 6 Reopen the System Tree by clicking the SysTree button in the PowerBar again. The current workspace remains open. Right-click MyWorkspace and select Close from the popup menu. 49 . 7 8 The workspace closes. Close the Clip and Output windows by clicking their buttons on the PowerBar or by clicking the small x in the corner of each window.Lesson 2 Customizing the PowerBuilder Environment 5 Close the System Tree by clicking the SysTree button in the PowerBar.

pbl. 50 . and pbtutor. select View>Layouts>Default. 2 3 The Application painter displays different views of the pbtutor application object.Open an object Open an object Where you are Manipulate the System Tree window > Open an object Manipulate views Set up the toolbars Now you open an object created by the Template Application wizard. the pbtutor target. In the System Tree. 1 Select File>Recent Workspaces from the menu bar. To display the default layout. expand MyWorkspace. Your view layout scheme may look different. Double-click the pbtutor application object. or Right-click the pbtutor application object and select Edit from the popup menu. then MyWorkspace from the cascading menu.

Lesson 2 Customizing the PowerBuilder Environment The default Application painter layout displays two stacks of tabbed panes. which opens the main window. 4 Look at the code in the Open event in the Script view. The left stack contains a Script view (Open tab—it is set to the Open event on the Application object). 51 . You will modify this code later in the tutorial. was automatically generated by the wizard. an Event List view. and the Declare Instance Variables view. This code. a Function List view. The right stack contains the Properties view and a Non-Visual Objects List view.

Now you: • • • • • • Add an extra Script view Display view title bars Float and dock views Manipulate tabbed views Save a view layout scheme Reset the default view layout scheme 52 . You can add views to a painter workspace by selecting them from the View menu in the workspace menu bar. You can resize a view by grabbing and dragging the separator bars that surround it or that surround neighboring views in the painter workspace.Manipulate views Manipulate views Where you are Manipulate the System Tree window Open an object > Manipulate views Set up the toolbars Now you learn to control the location and appearance of PowerBuilder painter views. These exercises use the Application painter to demonstrate how you can change the appearance of the painter views. but you can manipulate views in all painters in the same way. You can add multiple views of the same type and you can combine views into a stack of panes with selection tabs at the bottom.

One of the Script views displays the script for an Application object event. If another Script view is already open to the Close event.Lesson 2 Customizing the PowerBuilder Environment Add an extra Script view The default Application painter layout actually has two Script views. A new Script view displays. 2 Select the Close event from the second dropdown listbox. If an existing Script views shows the Open event. but only one of them can display a specific script. It is not attached to a stack of tabbed panes. 1 Select View>Script from the menu bar. and the second dropdown listbox is empty. an error message displays in the PowerBuilder status bar. a new Script view is empty. It lists the Application object in the first dropdown listbox. 53 . and the other Script view displays the declared variables for the object instance or the entire application. Both of these Script views are in the same stack of tabbed views (panes). Now you add a third Script view that is not part of a stack of tabbed panes. Otherwise it displays the Open event. You can add multiple Script views to your painter layout.

The pushpin button and the Pinned menu item are toggle switches. The view title bar rolls down. next to the pushpin button. 54 . 2 Click the pushpin in the title bar. It contains a pushpin button on the left and a maximize/minimize button and a close button on the right. You can click the pushpin button or the popup menu item to pin and unpin the view title bars.Manipulate views Display view title bars Now you display a view title bar by pinning it to the painter workspace background. You can see an unpinned title bar only when your cursor pauses near the top edge of a view. 1 Move the cursor to the top of the extra Script view you just added. or Right-click the view title bar and click Pinned from the popup menu. The name of the view displays at the left of the title bar.

The view returns to its original location. the Float menu item is not enabled. the Dock menu item is not enabled. Click Dock in the popup menu. 2 Click Float in the popup menu. 3 Drag the view around the screen. 55 .Lesson 2 Customizing the PowerBuilder Environment Float and dock views Now you float and dock a view in the painter workspace. 1 Right-click the title bar of an unstacked view you want to float. move the cursor over the title bar area and wait until it displays before you right-click it. Notice that the floating property allows you to move the view outside the painter workspace. If the title bar is not pinned. 4 Right-click the title bar of the floating view. When a view is docked. or Right-click the tab of a view in a stack of tabbed panes. When a view is floated. Floating a view enables you to move it around outside the painter frame.

the Function List view is no longer part of a stack. 56 . If you drag the tab too far and release it over the right stack with the Properties view and Non-Visual Object List. 2 Press and hold the mouse button on the Function List title bar. When you release the mouse button. Release the mouse button when the gray rectangular outline of the Function List view overlaps the stack. Drag it sideways over the other tabs in the same stack.Manipulate views Manipulate tabbed views Now you separate a view from a stack of tabbed panes and place it above the stack. You then return it to the stack and change its position in the stack. Drag the tab on to the separator bar that separates the two default stacks in the Application painter. the pane becomes a floating view. Release the mouse button when the small gray rectangular outline overlaps another tab in the stack of tabbed panes. Release the mouse button. the Function List becomes part of that stack. The Function List view moves to the position in the stack where you release the mouse button. 1 Press and hold the mouse button on the Function List tab. 3 Press and hold the mouse button on the Function List tab. but it is added as the last pane in the stack. Drag it over the stack from which you separated it. Alternate way to float a view from a stack If you hold the CTRL or SHIFT key down as you drag a tabbed pane from a stack. The Function List view returns to its original stack.

you see your layout listed on the cascading menu.Lesson 2 Customizing the PowerBuilder Environment Save a view layout scheme You can save view layout schemes for a PowerBuilder painter and use them every time you open the painter. 57 . 1 2 3 4 Arrange the views in the painter as you like. Your layout scheme is saved. click the background of the dialog box. Saving the toolbars and System Tree layouts PowerBuilder saves the customizations you make to the toolbars and System Tree separately from the view layout. when you select View>Layouts. It retains those settings and reapplies them to every workspace you access and every view layout you select. Enter a name for your layout in the text field. and then click the x button in the upper right corner of the dialog box to close it. Now. Click the New Layout button in the Layout dialog box. Select View>Layouts>Manage from the menu bar.

You can always reset the layout scheme to this default layout. 1 2 Select View>Layouts from the menu bar. Choose Default from the cascading menu. 58 . The default view layout scheme displays in the painter workspace.Manipulate views Reset the default view layout scheme Each PowerBuilder painter has a default view layout scheme.

Now you change the appearance of the toolbars to: • • • Show labels on toolbar buttons Float the toolbars Reposition the toolbars 59 .Lesson 2 Customizing the PowerBuilder Environment Set up the toolbars Where you are Manipulate the System Tree window Open an object Manipulate views > Set up the toolbars A painter workspace always includes the PowerBar and other PainterBar toolbars that you can use as you work. The buttons in the toolbars change depending on the type of target or object you are working with. You can also customize the toolbars to include additional functionality.

The Toolbars dialog box displays. 1 Move the pointer to any button on the PowerBar. A PowerTip is popup text that indicates a button’s function. 3 Select the Show Text checkbox. 60 . PowerBuilder displays a label on each of the buttons in the PowerBar and the PainterBars. The button’s PowerTip displays. then click the Close button. but do not click.Set up the toolbars Show labels on toolbar buttons You can learn a toolbar button’s function by placing the cursor over it to view its PowerTip. You can also display a label on each toolbar button. 2 Select Tools>Toolbars from the menu bar.

Lesson 2 Customizing the PowerBuilder Environment Float the toolbars You can float the toolbars so that you can move them around the painter workspace as you work. right. You can also set it to floating. From the popup menu you can set the toolbar’s location to the left. or bottom of the workspace. popup menus provide a fast way to do things. The popup menu for the toolbars displays. top. 2 Select Floating from the popup menu. You can adjust its shape. 1 Right-click anywhere in the PowerBar. 61 . The menu items available in the popup depend on the painter you are using and where you are in the workspace when you click the right mouse button. About popup menus Throughout PowerBuilder. The PowerBar changes to a floating toolbar.

Release the mouse button when the PowerBar becomes a vertical bar. 62 . The PowerBar is docked at the left side of the frame. Press and drag the PowerBar toward the left side of the workspace.Set up the toolbars 3 Move the pointer to an edge or border area in the PowerBar.

In this case. 4 You have swapped the locations of the two painter bars. 63 . This repositions the PowerBar at the top of the workspace. Click Close in the Toolbars dialog box. 1 Select Tools>Toolbars from the menu bar. The selected Move radio button indicates the position of the currently selected toolbar. The Toolbars dialog box displays.Lesson 2 Customizing the PowerBuilder Environment Reposition the toolbars You can customize the position of the toolbars to suit your work style. Right-click PainterBar2 and select Left from the popup menu. 2 Click Top. Radio buttons are grayed if a selected toolbar is hidden If a selected toolbar is hidden (not visible) in the painter. the radio buttons are grayed and you must first click the Show button before you can select a radio button. 3 Click PainterBar1 in the Select Toolbar listbox and select Right. you cannot select where it appears in the workspace.

Set up the toolbars 5 Arrange the toolbars to suit your preferences. You can also drag the toolbars to the top. You can click the drag bar and drag the mouse to move the toolbar around the painter workspace. it has a drag bar at the left or top of its buttons. PowerBuilder applies toolbar configuration properties to all painters and saves them for the next PowerBuilder session. left. or right of the painter workspace. When a toolbar is in a fixed location. 64 . 6 Close the Application painter. bottom.

request information from a user. 65 . In this lesson you: • • • • • Create a new window Add controls to the window Change the tab order on the window Code some Help events and preview the window Write the script to open the window How long does it take? About 20 minutes. you can create windows anytime during the application development process. In PowerBuilder. Windows are separate objects that you create using the Window painter. Windows can display information. and respond to mouse or keyboard actions.LE S S O N 3 Building a Login Window Windows are the main interface between users and PowerBuilder applications.

Select the Window icon and click OK. The Window painter opens. The login window is a response window. The default view layout scheme contains both views. You can display these views by selecting them from the View menu. The New dialog box displays. The window you create is a login window that allows the user to enter a user ID and password and connect to the database. Notice that you have two new toolbars. About response windows Response windows are dialog boxes that require information from the user. 66 . but when the user returns to the application. 1 Click the New button in the PowerBar. When a response window displays. To retrieve the default painter layout Select View>Layouts>Default from the workspace menu bar.Create a new window Create a new window Where you are > Create a new window Add controls to the window Change the tab order on the window Code some Help events and preview the window Write the script to open the window Now you create a new window for the application. 2 Click the PB Object tab. the response window is still active. If they are grayed out in the menu. The user can go to other applications. Response windows are application modal. it is the active window (it has focus) and no other window in the application is accessible until the user responds. 3 Make sure that the Layout view and the Properties view display in the Window painter. the StyleBar and PainterBar3. the views are already displayed in the painter.

If your window does not have a pegboard look If the window in your Layout view displays as a solid color.Lesson 3 Building a Login Window The rectangle in the Layout view represents the window you are building. then OK to save the change and close the dialog box. select Design>Options from the menu bar. Click Apply. Then select the Show Grid checkbox on the General page of the Options dialog box. 67 . You may need to scroll down in the Properties view to see the window type. and has the Main window type. The default properties in the Properties view indicate that the window is visible and enabled. the Show Grid option has been disabled. To enable it.

You can position the labels either to the left of all fields (as above).Create a new window 4 Type Welcome in the Title textbox on the General page of the Properties view. 68 . The ContextHelp property adds a question-mark button next to the close button in the login window’s title bar. 5 Make sure the TitleBar and ControlMenu checkboxes are selected. or on top of the text fields and to the right of the checkboxes. Select response! in the Window Type dropdown listbox. A user can click the question-mark button to trigger Help events for the window controls. Select the ContextHelp checkbox. If your Properties view looks different You can change the position of Properties view labels by right-clicking the Properties view and selecting a preference from the popup menu.

8 Type w_welcome for the window name. 9 (Optional) Type the following lines in the Comments textbox: This is the login window. you can change the size of the login window in the Layout view by moving the pointer to the bottom or right edge of the window. while you are adding controls to the window. 69 . you can see w_welcome listed under it. and it is selected. If you expand MyWorkspace. 7 Select File>Save from the menu bar. you can drag the arrow to change the window size. Alternatively. The values you type are in PowerBuilder Units (PBUs). It requires the application user to enter an ID and a password before continuing. The only library in the Application Libraries textbox is pbtutor.pbl in the system tree. and pbtutor. Press the TAB key.Lesson 3 Building a Login Window 6 Click the Other tab in the Properties view. 10 Click OK. The size of the window rectangle in the Layout view changes.pbl. When it turns into a double-headed arrow. These comments are visible in the List view of the Library painter. The prefix w_ is standard for windows. pbtutor. You may need to modify these values later. PowerBuilder saves the new login window. Type 2200 in the Width textbox and 1000 in the Height textbox. The Save Window dialog box displays. Other methods for entering position properties You can use the spin controls to enter values instead of typing them.

You set properties of these controls and later add script for control events and functions. Selecting a control button from the PainterBar You can add controls from the Insert menu or by selecting a control button in PainterBar1. there is only one control button that appears in the PainterBar. PainterBar1 includes the CommandButton control button. but it displays a picture as well as text To add text labels to the login window PictureButton StaticText StaticHyperLink To provide a link to a Web site 70 . Some of the controls you can select from the dropdown list are described in the table below: Button appearance Control type CommandButton Use in tutorial Default icon for the control button in PainterBar1. Clicking the down arrow displays a dropdown list of control buttons. Its purpose is to provide a link to a Web site Not used in tutorial. When you first open a painter. Unless you customize your toolbars. such as windows and DataWindows. It is like a command button. which has a down arrow to its right. You add command buttons later in this lesson To add a picture to the login window Picture PictureHyperLink Not used in tutorial.Add controls to the window Add controls to the window Where you are Create a new window > Add controls to the window Change the tab order on the window Code some Help events and preview the window Write the script to open the window Controls allow users to interact with PowerBuilder objects.

select Design>Options from the menu bar and make sure that the Default To 3D checkbox is selected on the General page of the Options dialog box. You can change the window background color from the default color of ButtonFace gray from the Properties view in the Window painter. Its purpose is to add a multiline edit textbox MultiLineEdit After you select a control. You: • • • • • • • Add a Picture control Add StaticText controls Specify properties of the StaticText controls Add SingleLineEdit controls Specify properties of the SingleLineEdit controls Add CommandButton controls Specify properties of the CommandButton controls 71 . Adding controls with a 3D appearance To make your controls look three dimensional. it appears in place of the CommandButton button on PainterBar1. Now you modify the login window you just created by adding controls and changing some of their properties.Lesson 3 Building a Login Window Button appearance Control type SingleLineEdit Use in tutorial To add user entry textboxes to the login window Not used in tutorial.

bmp file and click Open. 4 Click the ellipsis button next to the PictureName textbox. The Select Picture dialog box displays. or Select Insert>Control>Picture from the menu bar. the Properties view switches from displaying the window properties to displaying the control properties. and OriginalSize checkboxes are selected by default in the Properties view. The bitmap you selected appears in the control you added to the Layout view. 2 A Picture control displays at the selected location.Add controls to the window Add a Picture control Now you add a Picture control to the login window. 3 Select the text p_1 in the Name textbox on the General tab of the Properties view. The prefix p_ is standard for Picture controls. Click inside the rectangular window in the Layout view. How to delete controls If you add a control to the window and later decide you do not want it. This deletes the control and its scripts. select the control and press the DELETE key. If the Properties view does not display the control properties. If you do not see the Properties view. Select the tutsport. 5 Navigate to the Tutorial directory if it is not already selected. This names the Picture control. Enabled. Type p_sports in the Name textbox. select View>Properties from the menu bar. The Visible. At the same time you add the control. 72 . click the picture control in the Layout view. 1 Select the Picture button from the dropdown list of controls.

You may want to adjust the position of the picture control again after you preview the window at the end of this lesson. 73 . Click the Other tab in the Properties view. 7 Type 300 in the Width textbox and 250 in the Height textbox. You may want to adjust the picture size again after you preview the window. You change the size of the picture control. Type 40 in the X textbox and 50 in the Y textbox.Lesson 3 Building a Login Window 6 Make sure the picture control is selected in the Layout view. You can use the spin controls in the X and Y textboxes to enter these values.

3 Right-click the StaticText control and select Duplicate from the popup menu.Add controls to the window Add StaticText controls Now you add StaticText controls to the login window. 4 Select Duplicate from the StaticText control’s popup menu again. Click to the right of the Picture control you added in the Layout view. or Select Insert>Control>StaticText from the menu bar. 2 A StaticText control displays at the selected location. PowerBuilder creates another duplicate. You now have three StaticText controls arranged vertically at the top of the window. 74 . 1 Select the Text button from the dropdown list of controls. PowerBuilder creates a duplicate of the selected control.

You can also adjust the size by entering appropriate values on the Other page of the Properties view for this control. The prefix st_ is standard for StaticText controls.Lesson 3 Building a Login Window Specify properties of the StaticText controls Now you specify the properties of the StaticText controls (label textboxes) to define how they should appear on the login window. 5 Adjust the size of the StaticText control to fit the text you entered. Now the control has a more descriptive name. select View>Properties from the menu bar. tab to another page in the Properties view. To adjust the size. The size of the text in the control changes. drag the upper-right corner of the control toward the upper-right corner of the window in the Layout view. 1 Select the first StaticText control you added. The default typeface is Arial TrueType. If you do not see the StyleBar. You can select a different typeface and font size if this one is not available on your system. Type Welcome to SportsWear. Keep adjusting the size until you see all of the text you entered. 2 Select the text st_1 in the Name textbox on the General page of the Properties view. and click Show. If you do not see the Properties view. Inc. or click in a different view. The Properties view displays properties of the StaticText control. If you press enter. 3 Select the text none in the Text textbox. 75 . Change the TextSize property for this control to 18 points. Type st_welcome in the Name textbox. select Tools>Toolbars from the menu bar. Using the StyleBar You can also use the StyleBar to change fonts. 4 Click the Font tab in the Properties view. the text you typed replaces none in the Layout view. click StyleBar in the Select Toolbar listbox.

Add controls to the window

6

Adjust the location of the other controls so that there is plenty of space between them. Select the second StaticText control you added in the Layout view. Type st_userid in the Name textbox on the Properties view General page. Type User ID: in the Text textbox and press the TAB key.

7

The text that displays in the control changes.
8 Select the third StaticText control you added in the Layout view. Type st_password in the Name textbox on the Properties view General page. Type Password: in the Text textbox and press the TAB key.

Your changes display in the Layout view.

76

Lesson 3

Building a Login Window

Add SingleLineEdit controls
Now you add two SingleLineEdit controls to the window to allow the user to enter a user ID and password for connecting to the database. A SingleLineEdit control is a textbox in which the user can enter a single line of text. SingleLineEdit controls are typically used for the input and output of data.
1 Select the SingleLineEdit button from the dropdown list of controls. or Select Insert>Control>SingleLineEdit from the menu bar. Click to the right of the User ID: StaticText control in the Layout view.

2

A SingleLineEdit control displays where you clicked.
3 Drag the SingleLineEdit control to the right of the StaticText control. Adjust the size of the SingleLineEdit control to make it wider. Right-click the SingleLineEdit control and select Duplicate from the popup menu.

4

PowerBuilder creates a duplicate of the selected control. You now have two SingleLineEdit controls arranged vertically to the right of the text controls.

77

Add controls to the window

Specify properties of the SingleLineEdit controls
Now you define the properties of the SingleLineEdit controls you just added to the login window.
1 Select the first SingleLineEdit control you added.

The General page of the Properties view displays properties of the SingleLineEdit control. If you do not see the Properties view, select View>Properties from the menu bar.
2 Select the text sle_1 in the Name textbox. Type sle_userid in the Name textbox. Clear the default text none in the Text textbox.

The prefix sle_ is standard for SingleLineEdit controls.
3 Select the second SingleLineEdit control you added. Type sle_password in the Name textbox. Clear the default text none in the Text textbox. Select the Password checkbox.

Because you checked the Password checkbox, the password the user types displays as a string of asterisks.

78

Lesson 3

Building a Login Window

Add CommandButton controls
Now you add CommandButton controls. Later you define scripts that execute when users click these buttons.
1 Select the CommandButton button from the dropdown list of controls. or Select Insert>Control>CommandButton from the menu bar. Click to the right of the sle_userid SingleLineEdit control.

2

A CommandButton control displays where you clicked.
3 Right-click the CommandButton control and select Duplicate from the popup menu.

PowerBuilder creates a duplicate of the selected control.
4 Adjust the location of the controls as needed so that there is some space between them.

79

Add controls to the window

Specify properties of the CommandButton controls
Now you define the properties of the CommandButton controls.
1 Select the top CommandButton control.

The General page of the Properties view displays properties of the CommandButton control.
2 Type cb_ok in the Name textbox on the Properties view General page. Type OK in the Text textbox. Select the Default checkbox.

You change the default name of the control to something more descriptive and add a label to the button. Because you selected the Default checkbox, the ENTER key triggers the Clicked event for this button.
3 Select the bottom CommandButton control. Type cb_cancel in the Name textbox. Type Cancel in the Text textbox. Select the Cancel checkbox.

Because you selected the Cancel checkbox, the ESC key triggers the Clicked event for this button.

80

Lesson 3

Building a Login Window

Change the tab order on the window
Where you are Create a new window Add controls to the window > Change the tab order on the window Code some Help events and preview the window Write the script to open the window

When you place controls in a window, PowerBuilder assigns them a default tab order. The tab order determines the sequence in which focus moves from control to control when the user presses the TAB key. Now you change the tab order for the window you created.
1 Select Format>Tab Order from the menu bar.

PowerBuilder displays the default tab order. The number in red at the right of each control shows the control’s relative position in the tab order. Controls with the number zero are skipped when the user tabs in the window.
2 Click the tab order number for the sle_userid control. Type 10 as the tab order value for this control.

You can type a new tab order number only when the old number turns blue against a red background.
3 Make sure the other controls have these values: Click this control SingleLineEdit control for entering a password CommandButton control for the OK button CommandButton control for the Cancel button 4 Control name Has this value sle_password 20 cb_ok cb_cancel 30 40

Select Format>Tab Order from the menu bar.

This is a toggle switch. Selecting this menu item a second time saves your changes and clears the tab order numbers from the login window. You can also use the Tab Order button on the PainterBar.

81

Code some Help events and preview the window Code some Help events and preview the window Where you are Create a new window Add controls to the window Change the tab order on the window > Code some Help events and preview the window Write the script to open the window Now you use the Script view to add context-sensitive Help messages to the SingleLineEdit controls that you placed on the login window and you preview the window. The third dropdown listbox contains all ancestor objects of the current object. The first dropdown listbox displays the list of available controls for the current object plus the special entries. Using the Script view The Script view has three dropdown listboxes. sle_userid. and instance variables. The contents of the second dropdown listbox depend on the selection in the first dropdown listbox. appears in the first dropdown listbox in the Script view. Functions and Declare. and global and local external functions Contents of third dropdown listbox Current object and all its ancestor objects All ancestor objects with functions having the same signature as selected function Empty Declare 1 Double-click the top SingleLineEdit control in the Layout view. 82 . (New Function) displays if no editable functions exist List of declaration types: global. you can open it by double-clicking an object in the Layout view. if any. The object name. If the Script view is not currently displayed in your Window painter. Selection in first dropdown listbox An object or control name Functions Contents of second dropdown listbox List of events for the selected object or control List of editable functions. 2 Select the Help event in the second dropdown listbox in the Script view. shared.

However. Select the Help event in the second dropdown listbox. A message box prompts you to save your changes. this. variables.hlp".Lesson 3 Building a Login Window 3 Type the following lines in the script area: ShowPopupHelp("pbtutor. 4 Select sle_password from the first dropdown listbox in the Script view. this. You now add a Help event for the sle_password SingleLineEdit textbox. do not use either of these methods if you want to view the results of the Help event scripts you just entered. and comments). notice that PowerBuilder changes the text colors to show what kind of syntax element you have entered (such as keywords. As you type text in the Script view. or Click the Run/Preview Object in the PowerBar. The Run dialog box displays. 5 Type the following lines in the script area: ShowPopupHelp("pbtutor. 83 .hlp".hlp file in the Tutorial directory. 7 Click OK. 100) You can find the pbtutor. Be sure the Objects of Type listbox displays Windows and the w_welcome object is selected. PowerBuilder compiles the code you typed for the Help event of the sle_userid SingleLineEdit textbox. 200) 6 Select File>Run/Preview from the menu bar. Previewing the window You can preview the window without running scripts by selecting Design>Preview on the menu bar or the Preview button in PainterBar1 (which uses the same icon as the Run/Preview Object button in the PowerBar).

11 Click anywhere in the window to close the message. 9 Click the question-mark button in the login window title bar. This is the text you typed for the sle_password Help event. Click inside the sle_userid SingleLineEdit textbox. Click inside the sle_password SingleLineEdit textbox and press F1. A message displays: Type your password here. You return to the Window painter workspace. 12 Close the Window painter. 10 Click anywhere in the window to close the message. A message displays: Type your User ID here. Later you add code to the Clicked event for the Cancel button that closes the application. you can change the size.Code some Help events and preview the window 8 Click Yes. The login window appears as it would at runtime. and fonts of the window controls when you go back to the Window painter workspace. This is the text you typed for the sle_userid Help event. location. Click the close window button in the login window title bar. If you do not like the window layout. 84 .

In this exercise you: • • Modify the frame window Open event Compile the script 85 . the login window still displays before the frame window. This window (w_pbtutor_frame) was created by the Template Application wizard. However. The MDI frame is called by the application Open event.Lesson 3 Building a Login Window Write the script to open the window Where you are Create a new window Add controls to the window Change the tab order on the window Code some Help events and preview the window > Write the script to open the window Now you add a one-line script to open the login window as soon as the application starts executing. if you call the login from the frame window. because the login window is a response window. You add this script to the Open event of the MDI frame window.

Wizard-generated script The frame window Open event already has a script associated with it that was generated by the Template Application wizard.Write the script to open the window Modify the frame window Open event The frame window is called by the application object Open event. Make or verify the following item selections in the Open dialog box: Selection to make (or verify) pbtutor—currently your only target pbtutor. The script creates an instance of a wizard-generated user object that serves as a sheet (window) manager. The ue_postopen event registers sheet windows with the sheet manager. If the Script view is not open. 1 Select File>Open from the menu bar. Now you modify the frame window Open event script to open the login window. The Open script then calls the ue_postopen event. The event is posted to the end of the messaging queue for the window and is not processed until the remainder of the Open script (that you add in this lesson) is executed. The login window still opens before the frame window because it is a response window. 2 Click OK. 86 . you can open it by selecting View>Script in the workspace menu bar or by double-clicking inside the Layout view. The Window painter opens and displays views of the main application window in the painter workspace.pbl—currently your only library Windows w_pbtutor_frame Painter Open dialog box item Target Libraries Objects of Type Object Name Using The w_pbtutor_frame object is the main application window created by the Template Application wizard. and therefore it (temporarily) blocks execution of the remainder of the frame window Open event script.

The cursor moves to a new line following the blank line. or a slash and an asterisk (/*) at the start and an asterisk and a slash (*/) at the end of a single-line or multiline comment. Click the Comment button in PainterBar2. 87 . Comments are not parsed by the script compiler. The title bar of the Script view reads: Script . You now modify the Open event script to cause the login window to display.Post Event ue_postopen ( ) The ue_postopen event does not take any arguments. Using comments A comment in PowerScript is indicated by either two forward slashes (//) at the start of a single-line comment. 4 Click after the parentheses in the line that reads: this. 5 Press ENTER twice. 6 Type Open the login window on the new line in the Script view. You add a blank line in the Script view for legibility.w_pbtutor_frame for open returns long The PowerScript code in the Script view is preceded by comments. Two slashes appear in front of the line you typed—it is changed into a comment. Display the Script view title bar by pinning it to the painter background.Lesson 3 Building a Login Window 3 Make sure the Open event displays in the Script view.

You can always open the main Help screen by pressing F1. select the function or reserved word in the Script view and press SHIFT+F1.Write the script to open the window 7 Type open (w_welcome) on the next line in the Script view. Accessing context-sensitive Help To access context-sensitive Help for a function or reserved word (such as Open). This calls the Open function to display the login window you created. 88 .

You do not leave the Script view or the Window painter workspace. 2 Select File>Save from the menu bar. 89 . PowerBuilder compiles a script when you close the Script view or when you select a different object. You can come back later. select the entire script and click the Comment button. uncomment the code. To find an error Click on an error message to move the cursor to the line that contains that error. If you want to save a script that has errors. Select File>Close from the menu bar.Lesson 3 Building a Login Window Compile the script Now you compile the script you just typed. After you correct the error. Handling errors in scripts When there is an error in a script. The script compiles. you can try to compile the script again. The Window painter closes. and fix the problem. 1 Right-click anywhere in the Script view script area. you use a popup menu item to compile the script without closing the Script view or changing to a different script. In this exercise. Commenting out errors PowerBuilder does not save a script that has errors. an error window displays at the bottom of the Script view with the line number of the error and the error message. event. Select Compile from the popup menu. or function for display in the Script view.

Write the script to open the window 90 .

91 .LE S S O N 4 Connecting to the Database This lesson shows you how to make the application connect to the EAS Demo DB database at execution time and how to use the Database painter to look at the table definitions and database profile for this database. In this lesson you: • • • • • • Look at the EAS Demo DB database Run the Connection Object wizard Declare a global variable Modify the connection information Complete the login and logout scripts Run the application How long does it take? About 25 minutes.

The definitions of ODBC data sources are stored in the odbc. and drop tables Create. alter. database specialists maintain the database. However. you can change database profiles to connect to a different data source. Database profiles provide an easy way for you to manage database connections that you use frequently.Look at the EAS Demo DB database Look at the EAS Demo DB database Where you are > Look at the EAS Demo DB database Run the Connection Object wizard Declare a global variable Modify the connection information Complete the login and logout scripts Run the application In many organizations. to take full advantage of PowerBuilder. Using database profiles to connect Once you define a data source.ini registry key. PowerBuilder connects to a database when you open certain painters. you should know how to work with databases. when you compile or save a PowerBuilder script that contains embedded SQL statements. Defining a data source You can define a database as a data source using the ODBC administrator or other database connection utilities. or when you run a PowerBuilder application that accesses the database. alter. You can access the ODBC Administrator from the DataBase Profile dialog box. The Database painter allows you to: • • • • • Create. you can create a database profile for it. If this is true in your organization. A database profile is a named set of parameters that specifies a connection to a particular data source or database. When you are developing an application. you do most of your work using the Database painter. you may not need to create and maintain tables within the database. and drop primary and foreign keys Create and drop indexes Define and modify extended attributes for columns Drop views 92 . When database connections occur PowerBuilder can establish a connection to the database in either the design-time or runtime environment. To maintain database definitions with PowerBuilder.

Lesson 4 Connecting to the Database In this exercise you: • • Look at the database profile for the EAS Demo DB database Look at table definitions in the EAS Demo DB database 93 .

You use the EAS Demo DB database in this tutorial. PowerBuilder stores database profile parameters in the registry. PowerBuilder displays the Database Profiles dialog box. In this lesson you look at the database profile for the EAS Demo DB database.Look at the EAS Demo DB database Look at the database profile for the EAS Demo DB database If you installed PowerBuilder with standard options. PowerBuilder creates this profile during installation. which includes a tree view of the installed database interfaces and defined database profiles for each interface. 1 Click the Database Profile button in the PowerBar. The EAS Demo DB database is an Adaptive Server Anywhere database that is accessed through ODBC. 2 Select EAS Demo DB V4. 94 . or Select Tools>Database Profile from the menu bar. you already have a data source and a database profile defined for the EAS Demo DB database.

You can install it now from the product CD. select the data source from the Data Source dropdown listbox and type EAS Demo DB V4 in the Profile Name textbox. select ODBC in the tree view of the Database Profile painter and click New.Lesson 4 Connecting to the Database If you do not see the EAS Demo DB V4 database profile If there is no profile for the EAS Demo DB V4 database. 95 . then click OK to return to the painter. Type dba for the user ID and sql for the password. If you did install the database and it is defined as a data source in the ODBC Administrator. In the Database Profile Setup dialog box. you may not have installed the database.

Look at the EAS Demo DB database 3 Click Edit. The PowerScript connection syntax for each selected option is shown on the Preview tab. 96 . PowerBuilder displays the Connection page of the Database Profile Setup dialog box. A message box tells you that the connection has been successful. If you change any options. the syntax changes. 5 Click the Test Connection button. 4 Select the Preview tab.

Then check the configuration of the data source in the ODBC Administrator. Click Close to close the Database Profiles dialog box. Click Cancel to close the Database Profile Setup dialog box. 97 .Lesson 4 Connecting to the Database If the message box tells you the connection is not successful Close the message box and verify that the information on the Connection page of the Database Profile Setup dialog box is correct. 6 Click OK to close the message box.

When you open a PowerBuilder painter that accesses the database. If the Objects view is not open The Objects view is part of the default view layout scheme. PowerBuilder writes the connection parameters to the Windows registry. This helps you become familiar with the Database painter and the tables you will use in the tutorial. You can click the + signs or double-click the icons next to items in the tree view to expand or contract tree view nodes. You can also open an Objects view by selecting View>Objects from the menu bar. 98 . When you connect to a database in the development environment. 1 Click the Database button in the PowerBar. PowerBuilder connects to the database and the Database painter opens. you have to connect to the database. Each time you connect to a different database. select View>Layouts>Default. The Database painter title bar identifies the active database connection. you automatically connect to the last database used. The EAS Demo DB V4 database is visible under the ODBC node in the tree view. PowerBuilder overwrites the existing parameters in the registry with those for the new database connection.Look at the EAS Demo DB database Look at table definitions in the EAS Demo DB database Now you look at the definitions for the Customer and Product tables in the EAS Demo DB database. To reset to this scheme. PowerBuilder determines which database this is by reading the registry. What happens when you connect To look at the table definitions. The Objects view of the Database painter displays all existing database profiles in a tree view under the Installed Database Interfaces heading.

This depends on the login ID you are using. Notice the folders under the EAS Demo DB V4 database node. 99 . Table names may have a prefix The table names in the Select Tables dialog box may have a prefix such as dba or dbo. If you continue moving the cursor to a view that can accept the object. You can ignore the prefix. you can release the object.Lesson 4 Connecting to the Database 2 Expand the EAS Demo DB V4 database node in the Objects view. the pointer changes to a barred circle. 4 Right-click the customer table and select Add to Layout from the popup menu. 3 Expand the Tables folder. Dragging an object from one view to another When you start dragging an object from the Objects view to another view. or Drag the customer table from the Objects view to the Object Layout view. the barred circle changes back to a pointer with an additional arrow symbol in a small box. You see the list of tables in the database. When you see this symbol.

you can see a description for each column. If the Object Layout view is part of a stack. right-click a blank area inside the view and select Show Comments. Widening the Object Layout view You can widen the Object Layout view by dragging its separator bars toward the painter frame. you also see the data type for each column in the selected tables. The Object Layout view shows the two tables you selected. 100 . or Right-click the customer table in the Objects view and select Alter Table from the popup menu. and indexes In the Object Layout view. If you do not see this. comments. and the object identifier. The title bar and tab headings for the Object Details view change dynamically depending on the current object selection. and then Show Index Keys from the popup menu. The title bar gives the object type. 7 Right-click a column of the customer table in the Object Layout view. The Properties view in the Database painter is also called the Object Details view. If you select Show Datatypes. Show Referential Integrity. Select Properties from the popup menu. 6 Right-click the title bar of the customer table in the Object Layout view and select Alter Table from the popup menu. The Columns view displays the column definitions for the table.Look at the EAS Demo DB database 5 Repeat step 4 for the product table. as well as icons for keys and indexes. keys. Viewing table data types. you may find it easier to separate it from the stack before you change its size. the database connection.

8 Close the Database painter. initial values for columns. one for column header information. and display formats. and the others for column extended attributes.Lesson 4 Connecting to the Database The Object Details view for a column has five tabs. Extended attributes include headers and labels for columns. About extended attributes PowerBuilder stores extended attribute information in system tables of the database. validation rules. one for general database properties. 101 . You can define new extended attributes or change the definitions of existing extended attributes from the popup menus of items in the Extended Attributes view of the Database painter.

you would have created the connection service manager when you generated the application. 1 Click the To-Do List button in the PowerBar. You can use multiple wizards in building your application.Run the Connection Object wizard Run the Connection Object wizard Where you are Look at the EAS Demo DB database > Run the Connection Object wizard Declare a global variable Modify the connection information Complete the login and logout scripts Run the application Now you run the Connection Object wizard to create a connection service manager that you use to establish the runtime database connection. The To-Do List was generated by the Template Application wizard. 102 . it is a user object because it is a customized object. You use it to perform database connection processing in a PowerBuilder application. The connection service manager is a nonvisual user object. It is nonvisual because it does not have a graphic representation in the runtime application. Why you run a second wizard If you had specified connection information in the Template Application wizard.

The Choose Database Connection Profile page lists all the database profiles stored in the registry. You accept the wizard’s default selections for the destination library (pbtutor. If you just installed PowerBuilder. This is the next-to-last item in the list. You used the New dialog box to run the Template Application wizard in Lesson 1. You can also use the list to make comments to yourself or other developers working on the application.ini Name Application INI File The wizard creates the n_pbtutor_connectservice user object to manage your database connections. The first page of the wizard tells you what it can do.ini file—created by the wizard—is used for application connection information. Otherwise. The To-Do List lists what you need to do to complete the application.pbl) and the database connectivity options (SQL). 3 Click Next until the Choose Database Profile page displays. 4 Select EAS Demo DB V4 in the Database Profiles listbox if it is not already selected. 5 Click Next until the Ready To Create Connection Object page displays. 103 . If you change an instance variable in this connection service object. this is the only database profile listed. or Right-click the Run Connection Object Wizard item. the pbtutor. You could also run the Connection Object wizard from the PB Object page of the New dialog box. You accept the default settings for the following items: Wizard page Specify Connectivity Source Info Option Source of Connection Information Connection Service Object Application INI File Default selection Application INI File n_pbtutor_connectservice pbtutor. "Starting PowerBuilder". you can change the source of connection information to the registry or to a script file.Lesson 4 Connecting to the Database 2 Double-click the Run Connection Object Wizard item in the list. Select Go To Link from the popup menu.

It also creates the application INI file. The wizard creates the connection service object and opens it. The To-Do List is still open. 104 .Run the Connection Object wizard The last wizard page contains a summary of your choices. including the default selections. 6 Click Finish. 7 Close the To-Do List.

you might prefer to reference the connection service manager with local variables. In more complex applications. login ID. Establishing a connection To make it possible for an application to connect to the database at execution time. and password) that are populated by the connection service manager.Lesson 4 Connecting to the Database Declare a global variable Where you are Look at the EAS Demo DB database Run the Connection Object wizard > Declare a global variable Modify the connection information Complete the login and logout scripts Run the application You will next examine the new connection service manager and create a global variable to reference it. This would release more memory as soon as the local variable went out of scope. you can create additional Transaction objects as needed. The connection service manager is not required. SQLCA Transaction object The connection service manager uses a built-in nonvisual system object. 105 . A global variable is available to all objects in the application. the connection service manager calls a wizard-generated function to set properties for a Transaction object that serves as a communications area between the application and the database. What is required and what is not You must have a Transaction object to connect to a database. the SQL Communications Area (SQLCA) object. If an application communicates with multiple databases. as the default Transaction object. you should keep an instance of the connection service manager available as long as the database connection is open. The SQLCA object has several default properties (including database name. one for each database connection. But in the tutorial. but is used in the tutorial because it generates Transaction object properties you would otherwise have to type in an application script.

You will next look at the script for this function. The script for this function passes database connection information to the Constructor event of the connection service manager. double-click n_pbtutor_connectservice in the System Tree. The default view layout scheme for this painter includes a Script view and a Declare Instance Variables view as part of a stack of tabbed panes. the value of the is_connectfrom variable is 1. The Script view displays the script created by the Connection Object wizard for the Constructor event. 3 Select Functions in the first dropdown listbox in a Script view. The instance variable is available to all functions and events of the n_pbtutor_connectservice object. In this case. Opening the connection service manager If the n_pbtutor_connectservice object is not open in the User Object painter. Make sure the Constructor event is selected in the second dropdown listbox. 106 . 2 Make sure n_pbtutor_connectservice is selected in the first dropdown listbox of a Script view.Declare a global variable 1 Make sure n_pbtutor_connectservice is open in the User Object painter. Select of_GetConnectionInfo in the second dropdown listbox. You verify this in a moment. The script calls the function of_GetConnectionInfo to obtain connection information. The information passed depends on an instance variable.

ini file and the of_GetConnectionInfo function to make sure that user ID and password information comes from the login window instead of the INI file. Notice that the wizard-generated script for this function also opens a message box if the database connection fails. the connection service manager looks to the Database section of the named INI file to get database connection information using ProfileString function calls. 5 Select of_DisconnectDB in the second dropdown listbox. 107 . In this case. This is the connection service manager function that actually connects to the database using the SQLCA Transaction object. 6 Select Instance Variables in the second dropdown listbox of the Declare Instance Variables view if it is not already selected.ini. You created this file with the Connection Object wizard. Later you modify the pbtutor. "Building a Login Window". You call this function from the application Close event. You can now verify that the value of the is_connectfrom variable is 1. You call this function from the login window you created in Lesson 3. This is the connection service manager function that disconnects from the database.Lesson 4 Connecting to the Database Because the is_connectfrom variable is 1. 4 Select of_ConnectDB in the second dropdown listbox. Selecting Declare in Script views You cannot select Declare in the first dropdown listbox if a second Script view already displays instance variables. the named INI file is pbtutor.

Declare a global variable 7 Select Global Variables in the second dropdown listbox. If you had typed the global variable data type (instead of dragging it from the System Tree) and you made a typing error. an error message would display. it is available everywhere in the application. l for local) and the next letter or letters identify the data type (for example: s for string. Drag n_pbtutor_connectservice from the System Tree to the Script view. The first letter of the prefix identifies the scope of the variable (for example: g for global. Naming conventions for variables To make scripts easier to read. Dragging object and function names from the System Tree to the Script view saves time and helps avoid typing errors. it is best to follow a standard naming convention. l for long. or Select File>Save from the menu bar. You would then correct the error and select Save again. The recommended standard is to give each variable a 2-letter or 3-letter prefix followed by an underscore ( _ ). or nv for nonvisual object). 8 Complete the line as follows: n_pbtutor_connectservice gnv_connect Although you declare this object in the Script view for the n_pbtutor_connectservice user object. 9 Click the Save button in the PainterBar. 108 . PowerBuilder compiles the script and saves it.

ini file. Then you modify the DBParm parameter in the pbtutor. In this exercise you: • • Modify the of_GetConnectionInfo function Call the connection service manager 109 .ini file. but you should open a database connection only if the user enters a valid ID and password in the login window.Lesson 4 Connecting to the Database Modify the connection information Where you are Look at the EAS Demo DB database Run the Connection Object wizard Declare a global variable > Modify the connection information Complete the login and logout scripts Run the application You can now call the connection service manager to establish a database connection. Before you do that though. you remove or comment out the ProfileString calls that the connection service manager makes to get user ID and password information from the INI file. because it includes hard-coded user ID and password values that were copied from the pb. You will therefore add the connection service call to the Clicked event of the OK button on this window.ini file. substituting user-entered information for information from the pbtutor.

Now you comment out the information that the function returns for the user ID and password information... 3 Click the comment button in PainterBar2.) 2 The four arguments of a ProfileString call are the INI filename or variable. the INI file key.) as_dbpass = ProfileString (. you must open it again for the n_pbtutor_connectservice user object. 1 Select Functions in the first dropdown listbox in the Script view.. By commenting out these lines. section. ) 110 . 4 Click anywhere in the line that begins: as_dbparm = ProfileString ( . Select the two ProfileString assignment lines that begin: as_userid = ProfileString (.. and the default value to be used if the INI filename.ini file.. You can use the File>Recent Objects menu to redisplay it. These lines are part of the IS_USE_INIFILE case of the CHOOSE CASE statement for the of_GetConnectionInfo function. Select of_GetConnectionInfo in the second dropdown listbox.. you make sure that the user ID and password information do not come from the pbtutor. the INI file section.Modify the connection information Modify the of_GetConnectionInfo function You looked at the of_GetConnectionInfo function in the last exercise. or key is incorrect. If you closed the User Object painter.

For this DBMS.ini file includes hard-coded values for the user ID and password as well as the database name. you assign values to the DBParm parameter from user-entry information for user ID and password. The DBParm parameter in the ptutor. 111 . The SQLCA DBParm parameter Although the user ID and password are not required for the DBParm ConnectString. assigning them to the ConnectString overwrites user ID and password values in the data source definition for an Adaptive Server Anywhere database. You do not use these values. Click the Close button in PainterBar1. the DBParm parameter also takes precedence over the SQLCA UserID and DBPass parameters. Instead.Lesson 4 Connecting to the Database 5 Click the comment button in PainterBar2. 6 Click the Save button in PainterBar1.

2 Select cb_ok in the first dropdown listbox of the Script view. 112 . Using a single wizard to create the application and connection If you had created the connection service user object with the Template Application wizard. In the script for the Clicked event. it is usually better practice to use the qualifier parent than to name the object explicitly. The Window painter opens. The login window is therefore the parent of the OK button. select it. An object is considered to be the parent of the controls that are added to it. The Clicked event should be the selected event in the second dropdown listbox. you refer to the login window as parent. When referring to a parent object in a script. the code you enter in this exercise to call the connection service manager would have been generated automatically. The Clicked event script is empty. If it is not. Adding double slash marks at the front of a line turns it into a comment. not to a Clicked event in a login window.Modify the connection information Call the connection service manager You will next call the connection service manager to connect to the database. This allows the code to be more easily reused for controls placed on a different object. you add the call to the Clicked event for the OK button on this window. 3 Type these lines: // 1) Instantiate the Transaction object // 2) Close login window if connection successful These lines explain the code you add to the Clicked event. Because you eventually need to add user-entry information from the login window. It would also have used a local variable. not a global variable. but it would have been added to the application Open event. or Double-click the OK button in the Layout view. 1 Double-click w_welcome in the System Tree.

5 Type the following lines below the CREATE statement: IF gnv_connect.of_ConnectDB ( ) = 0 THEN Close (parent) END IF The of_ConnectDB function connects the application to the database. the lines that follow the IF-THEN statement line are parsed. For ease of reading. the parent window for the cb_ok control (w_welcome) closes. Because you previously commented out the lines for the user ID and password. The CREATE statement instantiates the SQLCA Transaction object with all the values retrieved by the of_GetConnectionInfo function from the pbtutor. you can add blank lines between the comments and the assignment statement for the global variable gnv_connect. The ampersand character indicates that a line of script is continued on the next line. If of_ConnectDB returns a zero (the SQLCode for a successful connection).Lesson 4 Connecting to the Database 4 Type the following assignment statement below the comments: gnv_connect = CREATE & n_pbtutor_connectservice Do not type the ampersand (&) if you combine the lines of the script into a single line. a message box opens and displays the SQL error text.ini file. if the connection fails (the SQLCode is not 0). As you saw earlier in this lesson. this information is not retrieved. In this case. 113 .

Toggling the Error window of the Script view You can show or hide the Error window by clicking the icon at the far right of the Script view just under the title bar.Modify the connection information 6 Click the Compile button in PainterBar2. You still need to code the Clicked event to instantiate the Transaction object with user-entered connection information. 114 . or Right-click inside the Script view and click Compile in the popup menu. If you get an error message. The script should compile without error. make sure you have typed object and function names correctly and saved gnv_connect as a global variable.

You can also use AutoScript to complete code. you called the connection service manager from the Clicked event for the login window OK button. You also add code to the login window Cancel button Clicked event and to the application Closed event.Lesson 4 Connecting to the Database Complete the login and logout scripts Where you are Look at the EAS Demo DB database Run the Connection Object wizard Declare a global variable Modify the connection information > Complete the login and logout scripts Run the application Earlier in this lesson. In this exercise you: • • • • Set up shortcuts for AutoScript Add code to the OK button Clicked event Add code to the Cancel button Clicked event Add code to the application Close event 115 . You can use these commands to paste statements. Minimizing typing errors in the Script view If you right-click inside the scripting area. you open a popup menu that includes Paste Special commands. This reduces the risk of typing errors. as you will see in this lesson. Next you add code to the same Clicked event to instantiate the Transaction object with information entered by the user. functions or even the contents of text files into the event script. objects.

AutoScript provides Help wherever it has enough information to determine what code to insert. If you paste in a statement or function with comments. Click OK. If they are not clear. Scroll down and select Activate AutoScript. With these settings. but it does not pop up automatically when you pause. press CTRL+SPACE. clear the Activate Only After a Dot and Automatic Popup checkboxes. With your cursor in the Press Keys for Shortcut box. AutoScript provides help by completing the statement you are typing or displaying a list of language elements that are appropriate to insert in the script at the cursor location. Expand the Go To node in the Edit menu and select Next Marker.Complete the login and logout scripts Set up shortcuts for AutoScript When you are coding scripts. Click OK. 4 5 Now whenever you want help completing code. you can press CTRL+M to move to the next comment. you can press CTRL+SPACE to pop up a list of possible completions. 3 Select Tools>Keyboard Shortcuts from the menu bar. Check all the checkboxes in the first three groupboxes. Type CTRL+M in the shortcut box. Expand the Edit node in the tree. 116 . 1 2 Select Design>Options from the menu bar and click the AutoScript tab.

text ) ls_password = Trim ( sle_password. 1 Make sure you are looking at the Clicked event script for the cb_ok control. you get some of the connection properties from an initialization file and some from user input. This is the script in which you added the call to the Connection Service object. If you type the underscore and the first letter after the underscore and then press CTRL+SPACE. Get them directly from the user in the login window and you provide the database information in a script. ls_userid. or Type only the first two lines (the local variable declarations). Use the arrow keys to move to the correct completion and the TAB key to paste it into your script. if you type the letters before the underscore in a variable name and then press CTRL+SPACE.Lesson 4 Connecting to the Database Add code to the OK button Clicked event As is often the case when you are developing production applications. ls_password //Assignment statements ls_userid = Trim ( sle_userid. you should not get the user ID and password from the tutorial INI file. //Local variable declarations string ls_database. Using AutoScript to help code the assignment statements When you type the assignment statements. Do not use blank spaces around the = signs in the ConnectString text. AutoScript pops up a list of possible completions." You declare local variables here and assign them values. 117 . AutoScript pastes the completion directly into your script. and then use AutoScript to help with typing the assignment statements. The Trim function removes leading and trailing spaces from the user ID and password values passed as arguments to the function from the SingleLineEdit boxes on the login window.text ) ls_database = "ConnectString=’DSN=EAS Demo DB V4. as long as there is a unique completion. For the tutorial application. Type the following lines. 2 Click before the IF-THEN statement.

userid = ls_userid SQLCA. 118 . The lines must be added to the script after the CREATE statement to keep them from being overwritten with blank values from the Constructor event of the connection service manager. make sure you have typed object and function names correctly. They must be added before the IFTHEN statement or their values are not used by the Transaction object when it is called by the of_ConnectDB function of the connection service manager.dbpass = ls_password SQLCA. If you get an error message.PWD=" + ls_password + "’" These lines instantiate SQLCA parameters with values from the SingleLineEdit textboxes.dbparm = ls_database + "UID=" + & ls_userid + ". or Right-click inside the Script view and click Compile in the popup menu. Type the following lines: //Instantiate with user-entry values SQLCA.Complete the login and logout scripts 3 Click after the lines you just added (and after the CREATE statement) but before the IF-THEN statement. 4 Click the Compile button in PainterBar2. The script should compile without error.

2 Type this one-line script for the Clicked event: HALT This statement terminates the application immediately when the user clicks Cancel on the login window. 3 Click the Save button in the PainterBar. or Select cb_cancel in the first dropdown listbox of the Script view. or Select File>Save from the menu bar. 1 Double-click the Cancel button in the Layout view. The Window painter closes. The script area for the Cancel button is blank. 119 . PowerBuilder compiles the script. 4 Click the Close button in the PainterBar. or Select File>Close from the menu bar.Lesson 4 Connecting to the Database Add code to the Cancel button Clicked event Now you add code to the Cancel button to stop the application when this button is clicked.

The Script view is part of a stack in the default layout. it is still available to the application and does not need to be instantiated again (as it would if you had used a local variable). 3 Type the following lines for the Close event comment: Application Close script: Disconnect from the database 4 Select all or part of the lines you just added. Click the Comment button.of_DisconnectDB ( ) 5 120 . 1 Double-click the pbtutor application icon in the System Tree. There is no code yet for the application Close event. The Application painter displays different views of the tutorial application object.Complete the login and logout scripts Add code to the application Close event Because the connection service manager was called by a global variable. but you may find it easier to detach it from the stack or open a second Script view. 2 Select close ( ) returns (none) in the second dropdown listbox of the Script view. Type the following line below the comment you typed (you can use AutoScript to complete the variable name and the function name): gnv_connect. Now you call the connection service manager disconnect function to close the database connection.

If you get an error message. PowerBuilder compiles the Close script. 121 . look carefully at the lines you typed to make sure there is no mistyped variable or object name. Click Compile in the popup menu. you could release the memory it occupies by calling the SetNull function.Lesson 4 Connecting to the Database Releasing memory by setting global variables to null If this were not the application Close event and you no longer needed an instance of the global connection variable. 8 Click Yes. 6 Right-click anywhere in the script area of the Script view. 7 Click the Close button in PainterBar1. A message box asks if you want to save your changes to the Application object in the application library file. PowerBuilder also provides a DESTROY statement to destroy object instances. PowerBuilder garbage collection removes any local variables that go out of scope. You save your changes and close the Application painter. Do not use the DESTROY statement for local or global variables for nonvisual objects.

a message box tells you that your user ID or password is not valid. 3 Click OK. The database connection is established and the MDI frame for your application displays. the ODBC Configuration dialog box displays. click Yes to save them. Because you set the tab order for this window. and then to the OK button. The workspace closes and your application runs. 122 . If you enter an invalid user ID or password If you mistyped the user ID or password. You get a second chance to enter a valid user ID and password on the Login page of this dialog box. The application terminates and you return to the development environment. The password text is displayed as asterisks. you can tab from the User ID box to the Password box. If a message box prompts you to save changes. If you click the Test Connection button on the ODBC page of the dialog box without changing this information.Run the application Run the application Where you are Look at the EAS Demo DB database Run the Connection Object wizard Declare a global variable Modify the connection information Complete the login and logout scripts > Run the application Now you run the application. 1 Click the Run button in the PowerBar. 4 Select File>Exit from the menu bar. 2 Type dba in the User ID box. Type sql in the Password box.

You: • • • • Add DataWindow controls to the ancestor sheet window Add user events and event scripts Add scripts to retrieve data for the DataWindow controls Rebuild library objects How long does it take? About 25 minutes.LE S S O N 5 Modifying the Ancestor Window In this lesson you modify the ancestor sheet window that you generated with the Application Template wizard. 123 .

Add DataWindow controls Add DataWindow controls Where you are > Add DataWindow controls Add user events and event scripts Add scripts to retrieve data for the DataWindow controls Rebuild library objects Now you open a window that you generated with the Template Application wizard and add DataWindow controls to it. The DataWindow controls you add to the ancestor window inherit their definitions from a user object that was created for the tutorial application. You would then modify the extension layer object rather than the basesheet. Using a predefined user object The user object is provided in a PBL file that is installed with PowerBuilder. Once you have defined a user object. 124 . Why use a user object You can build a user object in PowerBuilder to perform processing that you use frequently in applications. you can reuse it as many times as you need without any additional work. in turn. However. giving your application the flexibility to open sheet windows inherited from different extension layer objects that all inherit. The window you modify was generated as the ancestor to the sheet windows: w_customers and w_products. since this tutorial uses only one type of sheet window. The modifications to the tutorial application are made directly to the basesheet (ancestor window). The user object is a customized DataWindow control that includes scripts to perform standard database error checking. All you need to do to use this user object is to include its PBL in the library search path and place it in the ancestor window. it foregoes the use of this superior design strategy in the interests of brevity and rapid deployment. from the same basesheet. Tutorial design strategy In a typical application you would add an extension layer object between the ancestor basesheet and the descendent sheet windows.

Lesson 5 Modifying the Ancestor Window In this exercise you: • • • • Add a library to the search path Add a DataWindow control for the master DataWindow Add a DataWindow control for the detail DataWindow View the scripts inherited from the user object 125 .

2 Click Browse. The library you add to the current application contains some precoded objects. including the user object (u_dwstandard) that you will later add to the base sheet window. The Library List page is open. 126 . You must add all libraries on which an application depends.Add DataWindow controls Add a library to the search path Next you add a library to the tutorial application search path. The Properties of Target pbtutor dialog box displays. The Select Library dialog box displays. 1 Right-click the pbtutor target in the System Tree. Select Properties from the popup menu.

pbl file is now included in the search path for the tutorial application. The tutor_pb.Lesson 5 Modifying the Ancestor Window 3 Navigate to the Tutorial folder. Select tutor_pb.pbl and click Open. 4 Click OK. You return to the Library List page. 127 .

You change this property later. 128 . The menu is indicated in the Properties view for the window. Drag u_dwstandard from the System Tree to the w_master_detail_ancestor window.Add DataWindow controls Add a DataWindow control for the master DataWindow Now you add a DataWindow control (saved as the user object. You can then select DataWindow in the Types textbox and add user events as needed. The wizard also created and attached a menu to this window. You generated this window with the Template Application wizard. The w_master_detail_ancestor window opens in the Window painter. You see how to add user events later in this tutorial. This opens the Select Standard Visual Type dialog box. 1 Double-click w_master_detail_ancestor in the System Tree. m_pbtutor_sheet. How to create a user object like u_dwstandard You can create a user object based on a DataWindow control by clicking the New button and selecting Standard Visual from the PB Object page of the New dialog box.pbl in the System Tree. 2 3 Click the Layout tab in the stack of panes to display the window. It serves as the master DataWindow for the ancestor window and its descendants. u_dwstandard) to the w_master_detail_ancestor window. Expand tutor_pb.

Small black squares at the corners indicate that the control is selected. 5 Make sure the new control is selected in the Layout view.Lesson 5 Modifying the Ancestor Window 4 Lengthen the window in sthe Layout view so that the control is completely visible inside the window. PowerBuilder creates a DataWindow control that inherits its definition from the user object. 129 . The Properties view displays the properties of the selected control.

The prefix dw_ is standard for DataWindow controls. Type dw_master in the Name textbox. Select the Vscroll Bar checkbox. PowerBuilder adds a vertical scrollbar to the control.Add DataWindow controls 6 Select the text dw_1 in the Name textbox in the Properties view. It also changes its name to dw_master. 130 .

Lesson 5 Modifying the Ancestor Window Add a DataWindow control for the detail DataWindow Now you add a second DataWindow control that is the detail DataWindow in the application. PowerBuilder changes the name of the control to dw_detail. 1 Resize the window so that there is room for a second DataWindow control below the first. 131 . The Properties view displays the properties of the selected control. you can maximize the Layout view and enlarge the window object inside it to make more room for the DataWindow controls. 3 Make sure that the new control is selected in the Layout view. If you need to. Type dw_detail in the Name textbox. Drag u_dwstandard from the System Tree to below the dw_master control in the Layout view. 2 Move the DataWindow control so that it is completely visible inside the window. PowerBuilder creates another DataWindow control that inherits its definition from the user object u_dwstandard. 4 Select the text dw_1 in the Name textbox in the Properties view.

or Select dw_detail from the first dropdown listbox in the Script view if it is not already selected. 3 Select Edit>Go To>Ancestor Script from the menu bar. 132 . 1 Double-click the dw_detail DataWindow in the Layout view. Scripted events are listed at the top of the dropdown listbox. 2 Select dberror from the second dropdown listbox in the Script view. The ancestor script is read-only when it is accessed from the Script view for one of its descendants. This indicates that the ancestor control (u_dwstandard) has an associated script. This script is also empty. or Select u_dwstandard in the third dropdown listbox. but a script icon next to the event name is purple. The Script view opens to the script for the dw_detail control’s ItemChanged event. Unscripted events are alphabetized separately from scripted events. PowerBuilder displays the script for the DBError event in the Script view.Add DataWindow controls View the scripts inherited from the user object Now you view the scripts the DataWindow controls inherited from u_dwstandard. This script is empty. You now look at the dberror event that contains an ancestor script (so you need to scroll up in the event dropdown listbox to find it).

The third dropdown listbox again displays w_master_detail_ancestor.Lesson 5 Modifying the Ancestor Window 4 Scroll through the window to view the database error-handling logic defined for the DBError event. 5 Select Edit>Go To>Descendant Script from the menu bar. Instead. Because you used the u_dwstandard object to define both DataWindow controls in the window. this logic is automatically reused in both controls. The script suppresses the default error message that the DBError event normally displays. or Right-click inside the script area of the Script view. Select Go To>Descendant Script from the popup menu. the identifier of the object that contains the current control. The script makes calls to user events that were declared for the user object. it causes an appropriate message to be displayed for each database error that might occur. The script for the DBError event of this control (dw_detail) is still blank. 133 .

update. Instead of writing the code to update the database in each of these places. 2 The Script view displays the Prototype window for defining a new event. or Select New Event in the second dropdown listbox of the Script view. insert. Events that you define are called user events.Add user events and event scripts Add user events and event scripts Where you are Add DataWindow controls > Add user events and event scripts Add scripts to retrieve data for the DataWindow controls Rebuild library objects Windows. 1 Select w_master_detail_ancestor in the first dropdown listbox of the Script view. Now you define some user events to handle retrieval. Later in the tutorial. Most of the time. and delete operations against the tutorial database. 134 . Purpose of user events One reason to define a user event is to reduce coding in situations where an application provides several ways to perform a particular task. a task like updating the database can be performed by clicking a button. the predefined events are all you need. For example. then trigger that user event in each place you update the database. Select Insert>Event from the menu bar. you add code in the Menu painter to trigger these events. or closing a window. and controls have predefined events associated with them. you can define a user event. but there are times when you want to declare your own events. You make these changes in the Script view of the Window painter. selecting a menu item. user objects.

then press CTRL+SPACE. 135 . Press CTRL+M to jump to the next comment. It has no arguments and does not return a value. As soon as you click in the script area. the text in the second dropdown listbox of the Script view changes from New Event to ue_retrieve.Retrieve() <> -1 THEN dw_master. The script lines you enter execute the Retrieve function and place the retrieved rows in the dw_master DataWindow control. If the retrieval operation succeeds. Press TAB to paste an IF THEN statement. then press CTRL+SPACE. and type the rest of the line. then type CTRL+SPACE. Type dw_m. Type these lines (or use AutoScript as described below): IF dw_master. press TAB. Repeat steps 3.Lesson 5 Modifying the Ancestor Window The first button to the right of the third dropdown listbox is a toggle switch that displays or hides the Prototype window.SetRowFocusIndicator(Hand!) END IF Using AutoScript instead of typing You can use AutoScript to paste in the IF THEN template as well as the variables and function names: Type IF. the script sets the focus to the first row in the DataWindow control and establishes the hand pointer as the current row indicator. Scroll and select retrieve( ).SetFocus() dw_master. Click inside the Script view below the Prototype window. 4. Place the cursor after dw_master. 3 Type ue_retrieve in the Event Name textbox in the Prototype window. and 5 to insert the other function calls in the script. type a dot.

Add user events and event scripts If the retrieve fails If the retrieval operation does not succeed. identifying your error. retype the script for the ue_retrieve event. You can display or hide the compiler error area by clicking the second toggle switch at the top right of the Script view. PowerBuilder triggers the DBError event. a compiler error area displays at the bottom of the Script view. 4 Select File>Save from the menu bar. If you get an error message Mistyped or incomplete script entries generate compiler errors. The logic for the DBError event is handled in the user object u_dwstandard. The Script view displays the Prototype window for another new user event. You looked at this script in the previous exercise. If this happens. Right-click the Prototype window and select New Event from the popup menu. If you select No when prompted to ignore compilation errors. 136 . PowerBuilder compiles the script you entered for the ue_retrieve event.

changes made to the buffer are committed to the database. If the Update function returns the integer 1.Update() = 1 THEN COMMIT using SQLCA.InsertRow(0) dw_detail. the argument zero in the DeleteRow function specifies that the current row in the dw_detail control be deleted.SetFocus() IF dw_detail."Save succeeded") ELSE ROLLBACK using SQLCA. MessageBox("Save". a row is not inserted or deleted from the database unless the Update function is also called (the ue_update event calls this function). 137 .Reset() dw_detail. In the script for the ue_delete event. 6 Click the Save button. END IF dw_detail.Lesson 5 Modifying the Ancestor Window 5 Repeat steps 3 and 4 for the following entries: Event name ue_insert Script dw_detail. changes to the buffer are rolled back. The third line positions the cursor in the dw_detail control.DeleteRow(0) ue_update ue_delete What the scripts do The first line of the script for the ue_insert event clears the dw_detail DataWindow control. not on the database. If it returns a different integer. The second line inserts a new row after the last row in the DataWindow (the argument zero specifies the last row). When these events are triggered. The ue_insert and ue_delete events operate on the DataWindow buffer.

a list (of all customers or products) displays in the top DataWindow control. This allows the application to retrieve and display detail information for the first row retrieved in the master DataWindow. Select open from the second dropdown listbox in the Script view for w_master_detail_ancestor. Then you add a script for the RowFocusChanged event of dw_master to retrieve data into the dw_detail DataWindow. This retrieves data into the dw_master DataWindow as soon as the window (or one of its descendent windows) opens. When a user moves through the list in the top DataWindow control using the UP ARROW and DOWN ARROW keys or by clicking in a row. the details for the current row display in the bottom DataWindow control. you need only trigger this event to retrieve data into the dw_master DataWindow. 138 . The RowFocusChanged event is triggered each time the focus is changed inside the dw_master DataWindow. • 1 The Open event calls the ue_postopen event and posts it to the end of the window’s message queue. Here is how the script works for the w_master_detail_ancestor window and its descendants when you are done: • When a sheet window first opens. You trigger the ue_retrieve event from the sheet window Open event. Detail information for the first item in the list displays in the bottom DataWindow control.Add scripts to retrieve data for the DataWindow controls Add scripts to retrieve data for the DataWindow controls Where you are Add DataWindow controls Add user events and event scripts > Add scripts to retrieve data for the DataWindow controls Rebuild library objects The scripts you just typed have no effect on the dw_master DataWindow control. RowFocusChanged occurs upon DataWindow display The RowFocusChanged event also occurs when the w_master DataWindow is first displayed. You modify the ue_postopen event later. but now that you have a script for the ue_retrieve event.

139 .EVENT ue_retrieve() The first two lines tell the dw_master and dw_detail DataWindows to look in the SQLCA Transaction object for the values of the database variables. This script sends a retrieval request and the ID number of the selected row to the dw_detail DataWindow control. which has the long data type. Read the event name carefully Make sure you select the RowFocusChanged event. This line uses a DataWindow data expression to obtain the item number in column 1 of the currently selected row of dw_master. Select rowfocuschanged in the second dropdown listbox. 1] Use square brackets The expression shown above requires square brackets.settransobject ( sqlca ) this.settransobject ( sqlca ) dw_detail.object. and not the RowFocusChanging event.data[currentrow.Lesson 5 Modifying the Ancestor Window 2 Type these new lines in the script area below the call to the ue_postopen event: dw_master. not a number). The pronoun This refers to the current object. 5 Type this line below the variable declaration line you just typed: ll_itemnum = this. not parentheses. The third line triggers the ue_retrieve event. In this example. the w_master_detail_ancestor window is the current object. 3 Select dw_master in the first dropdown listbox of the Script view. It stores the number in the variable ll_itemnum. 4 Type this line in the script area for the RowFocusChanged event: long ll_itemnum This line declares the local variable ll_itemnum (l is a letter. You now add a script for the RowFocusChanged event of the dw_master DataWindow control.

8 Click the Close button in PainterBar1. 6 Type these lines below the data expression line you just typed: IF dw_detail. or Select File>Save from the menu bar. PowerBuilder compiles the script you typed. The current row is the row the user has selected by clicking or by scrolling with the arrow or tab keys. 140 ."Retrieve error-detail") END IF This group of lines sends a retrieval request to the dw_detail DataWindow along with the argument the DataWindow expects (an ID number stored in the ll_itemnum variable). The IF statement that encloses the Retrieve function checks for successful completion.Add scripts to retrieve data for the DataWindow controls CurrentRow is an argument passed to the RowFocusChanged event that specifies the current row in the DataWindow control. it displays an error message box. If the retrieval operation fails.Retrieve(ll_itemnum) = -1 THEN MessageBox("Retrieve". or Select File>Close from the menu bar. 7 Click the Save button in PainterBar1.

Lesson 5 Modifying the Ancestor Window Rebuild library objects Where you are Add DataWindow controls Add user events and event scripts Add scripts to retrieve data for the DataWindow controls > Rebuild library objects It is a good idea to rebuild all your objects after modifying an ancestor object. 1 Click the Full Build Workspace button in the PowerBar. 141 . 2 Close the Output view by clicking the Output button in the PowerBar. You do this now from the popup menu for the workspace object in the System Tree. You can see the status of the work in the Output view which displays below the System Tree at the bottom of the PowerBuilder main window. The build is finished when the Output view displays Finished Full build of workspace MyWorkspace. PowerBuilder rebuilds all objects in your workspace. or Right-click the Workspace icon in the System Tree and select Full Build from the popup menu.

Rebuild library objects 142 .

You: • • • • Modify the frame menu Create a new sheet menu Add menu scripts to trigger user events Attach the new menu and run the application Menus are separate objects that you create using the Menu painter.LE S S O N 6 Setting Up the Menus In this lesson you set up the menus for the application. How long does it take? About 25 minutes. You can create menus at any time during the application development process. you can attach it to as many windows as you want. 143 . After you create a menu.

you see menus as they appear when the application is running. The m_pbtutor_frame menu is the ancestor of all the other menus you work with in the tutorial. Changes you make to this menu are automatically propagated to descendent menus. In this exercise you: • • Modify the File menu Enable Help menu items 144 . In this tutorial. In the WYSIWYG (What You See Is What You Get) view of the Menu painter.Modify the frame menu Modify the frame menu Where you are > Modify the frame menu Create a new sheet menu Add menu scripts to trigger user events Attach the new menu and run the application The frame menu was created automatically by the Template Application wizard. but you can make the same changes from the Tree Menu view. you use the WYSIWYG view to make changes to the application menus. You use the Properties view to change a toolbar button.

2 Click the File menu in the WYSIWYG view of m_pbtutor_frame. Define accelerator keys with the ampersand character The character following the ampersand is used as an accelerator key (mnemonic) and appears with an underscore in the WYSIWYG display. 3 Right-click New under the File menu.Lesson 6 Setting Up the Menus Modify the File menu Now you modify the File cascading menu of the m_pbtutor_frame menu. Because m_pbtutor_sheet inherits from m_pbtutor_frame. Select Edit Menu Item Text in the popup menu. its menu items appear just as they would at runtime. or Help) and then click again on the File menu to display its menu items. When you click a menu item in the WYSIWYG view. Type &Report and press ENTER. you can select it from the View menu in the Menu painter menu bar. If a WYSIWYG view is not open. Window. You may need to click one of the other menus (Edit. The Menu painter displays the menu associated with the MDI frame window in the application. changes you make to the frame menu are propagated to the sheet menu. The menu name remains m_new and its purpose (to open new sheet windows) remains the same. If the File menu does not display its menu items The File menu is selected when you display the WYSIWYG view. In the runtime application. You change the display name of the New menu item to Report. 145 . the user can access the File>Report menu by pressing ALT+F+R. 1 Double-click m_pbtutor_frame in the System Tree.

The Toolbar page of the Properties view remains open. because you use the Report menu item to access cascading menu items rather than as a command to open a new sheet. This prevents the toolbar button for this menu item from appearing in the frame menu toolbar (a button can be included in a toolbar even if its corresponding menu item is not visible or enabled). Click the Toolbar tab in the Properties view. Clear the Visible checkbox on the General page of the Properties view. Clear the ToolbarItemVisible checkbox. You hide this item in all runtime menus. 6 Click the Toolbar tab of the Properties view. 7 Click Exit under the File menu in the WYSIWYG view. The toolbar item text is New.Modify the frame menu 4 Make sure that &Report appears in the Text box in the Properties view. Clear the Enabled checkbox on the General page of the Properties view. the WYSIWYG view displays the menu item with a dithered appearance. You do not add a toolbar button here. The ToolbarItemText and ToolbarItemName values change to show the values for the m_exit menu item. 5 Click the Open menu item under the File menu in the WYSIWYG view. Open New Sheet. It is not be visible at runtime. 146 . There is no selection in the ToolbarItemName box. so no toolbar button appears at runtime for the Report menu item. Click the General tab in the Properties view. When you clear the Visible property.

2 3 Select Clicked in the second dropdown box if it is not already selected. "") If the third argument in this call contained a string that was a keyword in the Help file.hlp file in the Tutorial directory. Repeat the preceding steps for the Search for Help On menu item. Now you enable the other menu items.Lesson 6 Setting Up the Menus Enable Help menu items The Help menu has three items. using commented-out code that was provided by the Template Application wizard and the pbtutor. but only one.hlp". passing it an enumerated value that identifies whether you want the Help contents or index to display.hlp to pbtutor. or a specific topic or keyword. Change myapp. Help About. the Help Search window displays. 147 . 4 5 Check the Enabled box on the General page in the Properties view. You call application Help topics with the ShowHelp function.hlp". Because the argument is an empty string. 1 Double-click the Help Index menu item in the Help menu in the WYSIWYG view. Index!) This displays the default topic in the Help file.m_helpindex in the first listbox in the Script view. Keyword!. ShowHelp can open Windows Help or compiled HTML Help (CHM) files. the associated topic would display. The ShowHelp call looks like this: ShowHelp ("pbtutor. The full name of the Help Index menu item includes the m_help prefix to indicate that it is in the Help menu.hlp: ShowHelp ("pbtutor. or Select m_help. is enabled. Position the cursor in the line that contains the ShowHelp function and click the Uncomment button in the PowerBar.

148 . PowerBuilder saves the m_pbtutor_frame menu. 7 Select File>Close from the menu bar.Modify the frame menu 6 Select File>Save from the menu bar.

but has some additional menu items enabled. In this exercise you: • • • Inherit and save a new menu Add items to the new menu Add a new toolbar for the new menu items 149 . In the menu you create. you add menu items that are not present in the ancestor menus. The menu you create is a descendant of the m_pbtutor_sheet menu that was generated by the Template Application wizard.Lesson 6 Setting Up the Menus Create a new sheet menu Where you are Modify the frame menu > Create a new sheet menu Add menu scripts to trigger user events Attach the new menu and run the application Now you create a new menu that displays whenever the user opens an MDI sheet to look at customer or product information. The m_pbtutor_sheet menu inherits in turn from m_pbtutor_frame.

The Save Menu dialog box displays. These characteristics were propagated through the inheritance chain from m_pbtutor_frame. just as they are for the m_pbtutor_sheet menu. 2 Make sure Menus is selected in the Objects of Type dropdown listbox. The Open item is dithered to indicate that it is not visible and is grayed to indicate that it is disabled. It is good practice to save the new menu immediately. Changes made to the MDI frame menu If you click the File menu in the WYSIWYG view. the Window menu items are enabled to allow for tiling and cascading windows. The name you just assigned to the new menu displays in the title bar of the Menu painter workspace and the m_my_sheet menu appears in the system tree. you see that the first item is now Report. 150 . 1 Click the Inherit button in the PowerBar. 4 Type m_my_sheet as the menu name in the Menus box. The Inherit From Object dialog box displays. then save it again after you modify it. On the inherited sheet menu.Create a new sheet menu Inherit and save a new menu By inheriting from the application sheet menu. Type the following line in the Comments box: New sheet menu for w_master_detail_ancestor and its descendants. 3 Select File>Save from the menu bar. you retain the sheet menu characteristics without modifying the ancestor menu. The prefix m_ is standard for menus. Select m_pbtutor_sheet in the Object listbox and click OK. This names the menu. 5 Click OK. PowerBuilder displays an untitled menu that has all the characteristics of m_pbtutor_sheet. These items are disabled on the m_pbtutor_frame menu.

Other separator lines in the menu have a unique index number preceded by the prefix m_dash. In the Properties view. Select Insert Menu Item at End from the popup menu. First however. Right-click the new separator line in the WYSIWYG view. it suggests an alternative name.(hyphen) and press ENTER. If PowerBuilder displays a message that the default name is incorrect. the menu name does not reset to m_insert).Lesson 6 Setting Up the Menus Add items to the new menu Next you add items to the Edit menu of the menu you just inherited from m_pbtutor_sheet. The list of Edit menu items appears just as it would in a runtime application. 2 Right-click a menu item in the Edit menu in the WYSIWYG view. 4 Clear the Enabled checkbox in the Properties view for the new separator line. Type &Insert in the box that appears under the new separator and press ENTER. In this case. the menu item name changes to m_-. click OK to accept the suggested name. 1 Click the Edit menu in the WYSIWYG view for the new menu. Alternative method of inserting menu item names You can type &Insert in the Text box in the Properties view instead of typing it in the box that appears in the WYSIWYG view. you have to clear the Lock Name checkbox if the Name box is grayed (otherwise. 3 Type . 151 . The cursor moves into a blank box that appears at the end of the Edit menu list. The hyphen changes into a separator line. 5 The menu item name is set automatically to m_insert. you do not need to press ENTER afterwards. You use the WYSIWYG and Properties views. In this case. All items of the Edit menu are visible but disabled (they appear gray—but not dithered—in the WYSIWYG view). Select Insert Menu Item at End from the popup menu. Even the separator lines between menu items must have unique names.

Even though it is not enabled. 7 Repeat steps 5 and 6 for the following menu items: Menu item Upd&ate &Delete Microhelp text Update the database Delete the current row You add Edit menu items for updating and deleting database records. 152 . you use the letter A for this purpose. The new menu item is visible and enabled by default.Create a new sheet menu 6 Type Insert a row in the Microhelp box in the Properties view. the Undo item already uses the letter U as an accelerator key. The text Insert a row displays in the Microhelp line at the bottom of the application window whenever the user selects the menu item. Instead. so you should not use the same accelerator key for the Update menu item.

Type 2 in the ToolbarItemBarIndex spin control. Make sure it is also selected in the Properties view. Type 1 in the ToolbarItemOrder spin control. The button text is Update. 3 Type 1 in the ToolbarItemSpace spin control. Type or select Update! in the ToolbarItemName dropdown listbox. the text Insert appears on the button. You add the Update button after the Insert button in the new toolbar. Make sure it is also selected in the Properties view.Lesson 6 Setting Up the Menus Add a new toolbar for the new menu items Now you add toolbar buttons for the menu items you just defined and then place them in a second toolbar. Click the Toolbar tab in the Properties view. 1 2 Click the new Insert menu item in the WYSIWYG view Edit menu. Type 2 in the ToolbarItemBarIndex spin control. You start a new toolbar for the added menu items and make the Insert button the first item in this toolbar. When the Show Text option in the runtime application is enabled for toolbars. This defines a toolbar button for the Insert menu item that uses the stock picture called Insert!. 7 Click the new Delete menu item in the WYSIWYG view Edit menu. Type Update in the ToolbarItemText box. 4 Click the new Update menu item in the WYSIWYG view Edit menu. Type Insert in the ToolbarItemText box. Click the Toolbar tab if the Toolbar page is not already open. Type or select Insert! in the ToolbarItemName dropdown listbox. 153 . 6 Type 2 in the ToolbarItemOrder spin control. 5 This defines a toolbar button for the Update menu item that uses the stock picture called Update!.

9 Type 3 in the ToolbarItemOrder spin control. 10 Select File>Save from the menu bar. The button text is Delete. 154 .Create a new sheet menu 8 Click the Toolbar tab if the Toolbar page is not already open. Type or select DeleteRow! in the ToolbarItemName dropdown listbox. Type Delete in the ToolbarItemText box. This defines a toolbar button for the Delete menu item that uses the stock picture called DeleteRow!. You add the Delete button after the Update button in the new toolbar. Type 2 in the ToolbarItemBarIndex spin control.

1 Double-click the Insert menu item in the WYSIWYG view.Lesson 6 Setting Up the Menus Add menu scripts to trigger user events Where you are Modify the frame menu Create a new sheet menu > Add menu scripts to trigger user events Attach the new menu and run the application Now you add scripts to trigger user events from the sheet window menu bar. The third line triggers the user event ue_insert for the active sheet. 2 Select Clicked in the second dropdown box if it is not already selected.GetActiveSheet() lw_activesheet.GetActiveSheet() lw_activesheet. or Select m_edit.GetActiveSheet() lw_activesheet.EVENT ue_insert() The first two lines determine which sheet in the MDI frame is currently active.m_insert in the first listbox in the Script view.EVENT ue_delete() 155 .m_update Script for Clicked event w_master_detail_ancestor lw_activesheet lw_activesheet=w_pbtutor_frame. 3 Repeat steps 1 and 2 for the following menu items and scripts: Menu name m_edit. Type these lines for the Clicked event: w_master_detail_ancestor lw_activesheet lw_activesheet = w_pbtutor_frame.m_delete w_master_detail_ancestor lw_activesheet lw_activesheet = w_pbtutor_frame. you can open it using the Open button in the PowerBar. The Menu painter should still be open for the m_my_sheet menu. You added these user events in Lesson 5. "Modifying the Ancestor Window". If it is not.EVENT ue_update() m_edit. The full name of the Insert menu item includes the m_edit prefix to indicate that it is in the Edit menu.

PowerBuilder compiles and saves the menu scripts. or Select File>Close from the menu bar. 156 . 5 Click the Close button in PainterBar1.Add menu scripts to trigger user events 4 Select File>Save from the menu bar.

This is the second line below the opening comments in the event script. You must now change some code in the Script view. It is now listed as the menu in the Properties view. The menu listed in the MenuName box in the Properties view of the Window painter is still m_pbtutor_sheet. 2 Click the ellipsis button next to the MenuName box. 1 Double-click w_master_detail_ancestor in the System Tree. The ue_postopen event is called by the Open event for the window. If you cannot see the Properties view Select View>Properties from the menu bar. The data type declaration is currently: m_pbtutor_frame lm_menu 157 .Lesson 6 Setting Up the Menus Attach the new menu and run the application Where you are Modify the frame menu Create a new sheet menu Add menu scripts to trigger user events > Attach the new menu and run the application Now you attach the new sheet menu and run the application again. 4 Select the ue_postopen event in the second dropdown listbox of the Script view. The first dropdown listbox in the Script view displays the window name. This is the sheet menu you modified after inheriting it from m_pbtutor_sheet. You added script to the Open event in a previous lesson. The Select Object dialog box displays. 3 Select m_my_sheet in the Menus listbox and click OK. m_master_detail_ancestor. 5 Click in the line that declares the data type for lm_menu.

The remaining code changes the variable lm_menu to the new sheet menu data type. Notice that a new menu item has been added for the sheet you just opened. and Delete options you added. This sheet cascades relative to the first sheet. The menu bar does not change. A second MDI sheet opens. Type sql in the Password box and click OK. 9 Select File>Report>Maintain Customers from the menu bar. because the DataWindow controls in the Customer window do not have DataWindow objects associated with them. the Insert. Click the Run button in the PowerBar. and the MDI frame for the application displays. Update. These options do not function yet. That is because m_my_sheet is the menu for both w_customers and w_products. Because the w_products window uses the m_my_sheet menu. 11 Select the Window menu. Notice that a second toolbar appears and the Edit and Window cascading menus include enabled menu items. 158 . The database connection is established. 10 Select the Edit menu. The Edit menu has the Insert. and Delete options are also available when the Product window is open. The application login window displays. 7 Click the Save button in PainterBar1.Attach the new menu and run the application 6 Change m_pbtutor_frame to m_my_sheet. 8 Type dba in the User ID box. 13 Select the Edit menu. 12 Select File>Report>Maintain Products from the menu bar. Update. The Open menu item is no longer visible. The File menu now includes a Report cascading menu in place of the New menu item.

The application terminates and you return to the Window painter workspace. 159 .Lesson 6 Setting Up the Menus 14 Select the Window menu. 15 Select File>Exit from the menu bar. Another menu item has been added for the second sheet you opened. The checkmark next to this menu item indicates that it is the active sheet. 16 Close the Window painter.

Attach the new menu and run the application 160 .

A DataWindow object can connect to a database. retrieve rows. and update the database. In this lesson you: • • • • Create and preview a new DataWindow object Make cosmetic changes to the first DataWindow object Create a second DataWindow object Make cosmetic changes to the second DataWindow object How long does it take? About 20 minutes.LE S S O N 7 Building DataWindow Objects The DataWindow object is one of the most powerful and useful features of PowerBuilder. 161 . display the rows in various presentation styles.

Select the Retrieve On Preview checkbox. and footer. detail. PowerBuilder connects to the EAS Demo DB Database. lines. You can modify the contents of these bands. In the Preview view of the DataWindow painter. The Design view is divided into four areas called bands: header. 162 . complete with table data. summary. add objects (controls. 1 Click the New button in the PowerBar. 2 Click the DataWindow tab. For example. 3 Select Quick Select as the data source. you can see how the object looks in an application at runtime. About the Design view of the DataWindow painter The Design view in the DataWindow painter is similar to the Layout view in other painters. text. Like other painters. boxes. you can change their sizes.About this lesson Create and preview a new DataWindow object Where you are > Create and preview a new DataWindow object Save the DataWindow object Make cosmetic changes to the first DataWindow object Create a second DataWindow object Make cosmetic changes to the second DataWindow object Next you create a new DataWindow object and display it in the DataWindow painter. Click Next. The New dialog box displays. You can open only one Design view at a time. and change colors and fonts. Select Tabular from the list of presentation styles and click OK. The Choose Data Source for Tabular Data Window page of the DataWindow wizard displays. or ovals). the DataWindow painter has an assortment of views that you can open simultaneously. and the Quick Select dialog box appears.

Now you specify sort criteria only. PowerBuilder displays the selected columns in a grid at the bottom of the Quick Select dialog box.Lesson 7 Building DataWindow Objects 4 Click the customer table in the Tables listbox. and lname in the Columns listbox in the order listed. You can use the grid area at the bottom of the dialog box to specify sort criteria (for the SQL ORDER BY clause) and selection criteria (for the SQL WHERE clause). For this DataWindow. A dropdown listbox displays. If you clicked a column by mistake. you select four columns. click in the cell next to Sort and below Id. Scroll down the list and click company_name. Selection order determines display order The order in which you select the columns determines their left-to-right display order in the DataWindow object. fname. 163 . you can click it again to clear the selection. 5 Click id. This opens the table and lists its columns. You sort the id column in ascending order. 6 In the grid area of the Quick Select dialog box.

In the Design view. 8 Click OK. This specifies that the id column is to be sorted in ascending order. By default. 10 Click Finish. there are no borders for text or for columns. The DataWindow wizard asks you to select the colors and borders for the new DataWindow object. The DataWindow wizard summarizes your selections. 9 Click Next. You accept the border and color defaults. PowerBuilder displays a Heading band with default headings and a Detail band with the columns you selected: 164 . PowerBuilder creates the new DataWindow object and opens the DataWindow painter.Create and preview a new DataWindow object 7 Select Ascending from the dropdown listbox.

You can open only one Preview view at a time. The data is sorted in ascending order by customer ID. just as you specified. 165 . select View>Preview from the menu bar. PowerBuilder displays data for all customers. Displaying the Preview view If the Preview view is not displayed. If Preview is grayed out. it is already displayed and you cannot select it.Lesson 7 Building DataWindow Objects The Preview view displays the DataWindow as it appears during execution.

The Save DataWindow dialog box displays with the insertion point in the DataWindows box. Saving to another library You can save objects to different application libraries. You can also copy or move objects from one library to another using the Library painter. PowerBuilder saves the DataWindow object and closes the Save DataWindow dialog box. 3 (Optional) Type the following comments in the Comments box: This DataWindow object retrieves customer names and company associations.Save the DataWindow object Save the DataWindow object Where you are Create and preview a new DataWindow object > Save the DataWindow object Make cosmetic changes to the first DataWindow object Create a second DataWindow object Make cosmetic changes to the second DataWindow object Now you name the DataWindow object and save it in the pbtutor.pbl is selected in the Application Libraries box. The prefix d_ is standard for DataWindow objects. This names the DataWindow object. 166 . 1 Select File>Save from the menu bar. you save all your new tutorial objects in one library. 4 Click OK. Type d_custlist in the DataWindows box.pbl library. 2 Make sure pbtutor. but to avoid complications.

which displays to the left of the currently selected row. or Press CTRL+A. Drag the object to the right about one inch. 167 . Drag the id column to the left about one-half inch. You can keep the Preview view open at the same time to see how the changes you make affect the appearance of the DataWindow at runtime. 2 Position the mouse pointer over one of the selected objects.Lesson 7 Building DataWindow Objects Make cosmetic changes to the first DataWindow object Where you are Create and preview a new DataWindow object Save the DataWindow object > Make cosmetic changes to the first DataWindow object Create a second DataWindow object Make cosmetic changes to the second DataWindow object Now you can make cosmetic changes to the DataWindow. 1 Select Edit>Select>Select All from the menu bar. All of the selected objects move together. You make these changes in the Design view. You clear the object selection. You also move some of the columns to make them line up with their headings. Hold down the CTRL key and click the id column. 4 Click the Customer ID header above the Header band. All of the controls in the DataWindow object are selected in the Design view. 3 Click in a blank area in the Design view. The column and its header move together. You reposition the columns and column headings to make room for the hand pointer.

168 . A message box asks if you want to save your changes. 6 Click the First Name header. When you have finished. PowerBuilder saves the DataWindow object and closes the DataWindow painter. you clear the object selection. 8 Click Yes. After centering the column header text and the column data. Click in a blank area in the Design view. Click the Left button in the StyleBar. Hold down the CTRL key and click the Last Name and Company Name headers. the Design view should look something like this: 7 Select File>Close from the menu bar.Make cosmetic changes to the first DataWindow object 5 Click the Center button in the StyleBar.

you will pass the customer ID. you used Quick Select to specify the table and columns. Now you: • • • • • • Select the data source and style Select the table and columns Define a retrieval argument Specify a WHERE clause View the DataWindow in the DataWindow painter Save the DataWindow object 169 . To build the second DataWindow object.Lesson 7 Building DataWindow Objects Create a second DataWindow object Where you are Create and preview a new DataWindow object Save the DataWindow object Make cosmetic changes to the first DataWindow object > Create a second DataWindow object Make cosmetic changes to the second DataWindow object When you built the first DataWindow object. You need to define a retrieval argument and WHERE criteria so you can pass an argument to the DataWindow object during execution. In this case. This let you retrieve all the customers without having to use the Select painter. you use the Select painter.

you go to the Select painter and the Select Tables dialog box displays. The New dialog box appears. 1 Click the New button in the PowerBar. Selecting the Retrieve On Preview checkbox allows you to view the data returned by a query in the development environment. 2 Click the DataWindow tab if it is not already selected. but you need to provide initial values for any retrieval arguments that you specify. Select the Retrieve On Preview if it is not already selected. Click Next. 3 Since the data source is SQL Select. Select Freeform from the list of presentation styles and click OK. Select SQL Select as the data source. 170 .Create a second DataWindow object Select the data source and style Now you select a data source and define how the data is to be presented.

You change the column presentation order later. In this case. you must click Cancel to continue. Alternative method If you double-click the customer table instead of selecting it and clicking Open. 1 Select customer in the list of tables and click Open. The column names appear in the Selection List area above the table in the Table Layout view. The Select painter displays the customer table and its columns. 171 .Lesson 7 Building DataWindow Objects Select the table and columns Now you select the table and the columns from that table to use in the DataWindow object. The column order in the Selection List reflects the order in which columns are selected. the order displayed is the original order of the columns in the database. Since you selected all the columns at once. 2 Right-click the header area of the Customer table in the Table Layout view. Select Select All from the popup menu. the Select Tables dialog box remains open.

Display the Syntax view by clicking the Syntax tab at the bottom of a stack of tabbed panes. The Syntax view displays the generated Select statement.Create a second DataWindow object You can also see the order of selection in the Syntax view. 172 .

The default data type is Number.Lesson 7 Building DataWindow Objects Define a retrieval argument Now you define a retrieval argument. 2 Type cust_id in the Name box. 3 Click OK. The Specify Retrieval Arguments dialog box displays. About retrieval argument names You can choose any name you want for the retrieval argument. Nonetheless. it is just a placeholder for the value you pass during execution. it is a good idea to make the name meaningful. 1 Select Design>Retrieval Arguments from the menu bar. which is what you want. 173 . The retrieval argument is defined.

Create a second DataWindow object

Specify a WHERE clause
Now you specify a WHERE clause using the retrieval argument to retrieve a specific customer.
1 Click the Where tab in the stack.

The Where view displays.
2 Click in the box below Column in the Where view.

A down arrow displays, and the box becomes a dropdown listbox.
3 Click the down arrow. Select "customer"."id".

Your selection displays immediately below the Column heading. An equal sign (=) appears in the Operator box. This is correct, so do not change it.

4

Click the box below Value in the Where view. Type :cust_id.

5

Click the Syntax tab in the stack.

The Syntax view displays the modified SELECT statement.
6 Scroll down until you see the generated WHERE clause.

You have now created a complete SQL SELECT statement that retrieves data from several columns in the customer table where the id column is equal to an argument that will be supplied during execution.

174

Lesson 7

Building DataWindow Objects

View the DataWindow in the DataWindow painter
Now you view the DataWindow in the DataWindow painter using the Design and the Preview views.
1 Click the Return button in the PainterBar. or Select File>Return to DataWindow Painter from the menu bar.

The DataWindow wizard asks you to select the borders and colors for the new DataWindow object.
2 Select Raised from the Border dropdown listbox for columns. Click Next.

You add raised borders to the columns, but not to the labels in the DataWindow object. The DataWindow wizard summarizes your selections.
3 Click Finish.

Because you selected the Retrieve On Preview checkbox and because the Preview view is part of the default layout scheme for the DataWindow painter, the Specify Retrieval Arguments dialog box appears. This dialog box prompts you for an argument value. When you put this DataWindow object into the tutorial application, you write a script that passes the required argument to the DataWindow object automatically.

175

Create a second DataWindow object

4

Type a customer ID (such as 101, 102, or 103) in the Value field. Click OK.

The DataWindow painter opens. The Design view displays the new DataWindow object.

Changing font sizes

If you cannot see all letters in a label, press CTRL+A to select all the items in the DataWindow, then select a smaller font size in the StyleBar. The DataWindow Preview view retrieves the requested customer data.

176

Lesson 7

Building DataWindow Objects

Retrieving other records

If you want to preview the record for another customer, you can right-click inside the DataWindow Preview view, select Retrieve from the popup menu, then specify a different customer ID in the Specify Retrieval Arguments dialog box.

177

Create a second DataWindow object

Save the DataWindow object
Now you name the DataWindow object and save it. You could wait to save it until you leave the painter, but it is good practice to save your work frequently.
1 Select File>Save from the menu bar.

The Save DataWindow dialog box displays.
2 Make sure pbtutor.pbl is selected in the Application Libraries box. Type d_customer in the DataWindows box.

Earlier you saved a DataWindow object as d_custlist.
3 (Optional) Type the following comments in the Comments box. This DataWindow retrieves all columns for the Customer table. It is useful as a detail DataWindow. 4 Click OK.

You return to the DataWindow painter.

178

Lesson 7

Building DataWindow Objects

Make cosmetic changes to the second DataWindow object
Where you are Create and preview a new DataWindow object Save the DataWindow object Make cosmetic changes to the first DataWindow object Create a second DataWindow object > Make cosmetic changes to the second DataWindow object

Now you modify the DataWindow object. You: • • • Rearrange the columns and text Align the labels and columns Display the arrow for a dropdown DataWindow edit style

Columns on freeform DataWindows

Data fields on freeform DataWindow objects are still called columns, even though they are shown in a nontabular display.

179

Position the cursor on one of the selected objects and drag it to the top-right corner of the DataWindow object. scroll down until you can see all the columns in the DataWindow. 1 Click the Address: label in the Design view. The two items are selected. 2 Keep the CTRL key pressed and click the following column labels and column controls: Label City: State: Zip Code: 3 Column city state zip Release the CTRL key. The objects move together. You can maximize the Design view for greater ease in manipulating the columns and their labels.Make cosmetic changes to the second DataWindow object Rearrange the columns Now you rearrange the columns in the new DataWindow object. 180 . Hold the CTRL key and click the address column. 4 Use the CTRL+click technique to move the following label and column controls to the location indicated: Label Company Name: Phone Number: Move with column company_name phone Move under Last Name: Company Name: If necessary.

You remove any extra space in the detail area. The DataWindow should now look like this in the Design view: The DataWindow Preview view looks like this: 181 . Some of the fields may overlap others.Lesson 7 Building DataWindow Objects 5 Drag the Detail band up below the last column label. You fix this in the next exercise.

182 . Align the address. A narrow space should separate the left edge of the label box from the right edge of the column box. PowerBuilder aligns the left edges of the selected objects with the left edge of the first item you selected (the Zip Code: label). city. City:. 4 Select the first option (Align left edges). use the CTRL+click technique to select the Address:. 5 Move the zip column so that it is next to the Zip Code: label. and State: labels. and state columns with the zip column. 3 A cascading menu of align options displays. Selecting an alignment tool from the PainterBar You can access a dropdown list of alignment tools by clicking the Align button on PainterBar2. 1 Select the Zip Code: label in the Design view.Make cosmetic changes to the second DataWindow object Align the labels and columns Now you align the labels and columns on the new DataWindow. Select Format>Align Objects from the menu bar. just as you aligned the column labels. 2 While the Zip Code: label is still selected. Move the Zip Code: label as close as possible to the company_name column.

The (dropdown) DataWindow with which the column is associated has a list of states and their two-letter postal codes. 1 Click the state column in the Design view.Lesson 7 Building DataWindow Objects Display the arrow for a dropdown DataWindow edit style The column for the customer state of residence has a DropdownDataWindow edit style. Now you change the property for the state column to show the arrow at all times. Select the Always Show Arrow checkbox. You can make the state selection list visible at all times in your application or you can display an arrow at all times to indicate that a selection list is available. 183 . The Properties view displays properties of the column. Click the Close button in PainterBar1. 4 Click the Save button in PainterBar1. 3 An arrow appears next to the state column in the Design and Preview views. This is an extended attribute associated with the State column in the EAS Demo DB database. Notice the Style Type selection is DropDownDW. Make sure the state column in the Design view is wide enough to display two characters plus the arrow symbol. 2 Click the Edit tab in the Properties view.

Make cosmetic changes to the second DataWindow object 184 .

LE S S O N

8

Attaching the DataWindow Objects

After you create and save a DataWindow object, you can use it in a window. You have already created the d_custlist and the d_customer DataWindow objects. Now you associate each of these DataWindow objects with a DataWindow control in the w_customers window. In this lesson you: • • • • • Attach a DataWindow object to the master DataWindow control Attach the DataWindow object to the detail DataWindow control Run the application Attach DataWindow objects to the Product window Run the completed application

How long does it take?

About 15 minutes.

185

Attach a DataWindow object to the master DataWindow control

Attach a DataWindow object to the master DataWindow control
Where you are

> Attach a DataWindow object to the master DataWindow control
Attach the DataWindow object to the detail DataWindow control Run the application Attach DataWindow objects to the Product window Run the completed application

Now you attach the DataWindow object to a DataWindow control in the w_customers window.
1 Expand the pbtutor.pbl branch in the System Tree.

2

Right-click w_customers and select Edit from the popup menu. or Double-click w_customers in the System Tree.

The Window painter displays the w_customers window.
3 Right-click the dw_master DataWindow control in the Layout view. Select Properties from the popup menu. Click the ellipsis button next to the DataObject box in the Properties view.

The Select Object dialog box displays.

186

Lesson 8

Attaching the DataWindow Objects

4

Select d_custlist in the DataWindows listbox and click OK.

PowerBuilder associates the d_custlist DataWindow object with the dw_master DataWindow control. The Layout view now shows the d_custlist DataWindow headings inside the dw_master control, but you do not see any data yet. The DataWindow does not execute its SELECT statement until you run the application.

Adding DataWindow objects to the window using drag and drop

In this tutorial, you use a custom DataWindow control that has built-in error handling. If you want to use the standard DataWindow control, you do not need to add the control to the window and then attach a DataWindow object to it as you did in this lesson. You can simply select the DataWindow object you want from the System Tree and drag it onto the window in the Layout view. PowerBuilder creates the DataWindow control for you.

187

Attach the DataWindow object to the detail DataWindow control

Attach the DataWindow object to the detail DataWindow control
Where you are Attach a DataWindow object to the master DataWindow control > Attach the DataWindow object to the detail DataWindow control Run the application Attach DataWindow objects to the Product window Run the completed application

Now you attach a DataWindow object to the detail DataWindow control. The Window painter should still be open for the w_customers window.
1 Select the dw_detail control in the Layout view. Click the ellipsis button next to the DataObject box in the Properties view. Select d_customer in the Select Object dialog box and click OK.

PowerBuilder associates the d_customer DataWindow object with the dw_detail DataWindow control. The Window painter workspace now shows the d_customer DataWindow object inside the dw_detail control.
2 In the Layout view, make the dw_detail control larger so that you can see all of the columns you added to the DataWindow object.

If you need to, you can also enlarge the window to make more room. If you make the dw_detail control wider, you may also want to make the dw_master control the same width.

188

Lesson 8

Attaching the DataWindow Objects

Run the application
Where you are Attach a DataWindow object to the master DataWindow control Attach the DataWindow object to the detail DataWindow control > Run the application Attach DataWindow objects to the Product window Run the completed application

Now you run the application again to test the insert, update, and delete capabilities of the second DataWindow.
1 Click the Run button in the PowerBar.

PowerBuilder prompts you to save your changes.
2 Click Yes.

The application begins running, and the login window displays.
3 Type dba in the User ID box. Type sql in the Password box and click OK.

The database connection is established, and the MDI frame for the application displays.
4 Select File>Report>Maintain Customers from the menu bar.

The Customer window displays.

189

Run the application

The top DataWindow control (dw_master) shows all of the rows retrieved from the Customer table. The hand pointer shows which row is selected. The bottom DataWindow control (dw_detail) shows further information about the selected customer.
5 Click the Insert button in the toolbar. or Select Edit>Insert from the menu bar.

This clears (resets) the dw_detail DataWindow and adds a new row to the DataWindow. The cursor is in the Customer ID box in the dw_detail control.
6 Add a new customer row by entering information in the boxes in the detail DataWindow. Typing information for a new customer

The Customer ID number must be unique. To avoid duplicate numbers, use a four-digit number for your new database entry, or scroll down the list of customers in the master DataWindow and select an ID number that does not appear in the list. The phone number and zip code use edit masks to display the information you type. You must enter numbers only for these data fields.To specify the state in which the customer resides, you must click the arrow next to the state column and select an entry from the dropdown listbox. The database allows null values only for the company name field. You must enter values for all other fields before clicking the Update button for a new customer.

7

Click the Update button in the toolbar. or Select Edit>Update from the menu bar.

This sends the new customer data to the database and displays a confirmation message, as coded in the script for the ue_update event. The new customer does not yet display in the master DataWindow. (You could add code to include this feature). However, if you open another instance of the w_customers sheet, the new customer data is visible in both the master and detail DataWindow controls.

190

because rows in other tables in the EAS Demo DB database may refer to the row that you are trying to delete. 12 Click the Delete button in the toolbar. or Select Edit>Delete from the menu bar. 13 Select File>Exit from the menu bar. the Update operation may fail. 14 Close the Window painter. This sends the revised customer data to the database and displays another confirmation message. The customer is deleted from the DataWindow immediately but is not deleted from the database unless you select the Update option on the Edit menu. That customer data displays in the lower DataWindow. In this particular situation. or Select Edit>Update from the menu bar. Select another customer in the master DataWindow. 11 Click OK in the message box. You should be able to delete any row that you have added to the database. The application terminates and you return to the Window painter. 9 Change the customer address in the detail DataWindow. Click a customer in the master DataWindow. 191 . 10 Click the Update button in the toolbar. That customer data displays in the detail DataWindow.Lesson 8 Attaching the DataWindow Objects 8 Click OK in the message box.

2 Select the dw_master DataWindow control in the Control List view. 192 . Select d_prodlist in the DataWindows box and click OK.Attach DataWindow objects to the Product window Attach DataWindow objects to the Product window Where you are Attach a DataWindow object to the master DataWindow control Attach the DataWindow object to the detail DataWindow control Run the application > Attach DataWindow objects to the Product window Run the completed application Now you add two DataWindow objects to the w_products window. PowerBuilder displays the Select Object dialog box. or Double-click w_products in the System Tree.pbl in the Application Libraries box.pbl library. The Window painter displays the w_products window. These DataWindow objects are provided for you in the tutor_pb. Click the ellipsis button next to the DataObject box in the Properties view. 3 Select tutor_pb. The Data Object box in the Properties view of the Window painter now displays d_prodlist. 1 Right-click w_products in the System Tree and select Edit from the popup menu.

Size.Lesson 8 Attaching the DataWindow Objects PowerBuilder associates the d_prodlist DataWindow object with the dw_master DataWindow control in the w_products window. Product Name. If necessary. in the Layout view. Click the ellipsis button next to the DataObject box in the Properties view. Quantity. PowerBuilder associates the d_product DataWindow object with the dw_detail DataWindow control. 4 Click the dw_detail DataWindow control in the Control List view. and Unit Price. The Layout view now shows the d_product DataWindow object inside the dw_detail control. You see the headings for the DataWindow object in the Layout view. Color. The d_product DataWindow object has seven columns labeled Product ID. Product Description.pbl in the Application Libraries box. Select d_product in the DataWindows listbox and click OK. You return to the Window painter. The Select Object dialog box displays. 5 Select tutor_pb. You may need to resize the control and/or the window. You can also enlarge the window to make more room. make the dw_detail control larger so that you can see all of the columns in the DataWindow object. 193 .

At this point the Product window should have all of the capabilities of the Customer window. and the MDI frame for the application displays. The database connection is established. providing support for retrieval. and delete operations against the database. 3 Type dba in the User ID box. and the login window displays. The application begins running. The top DataWindow control shows all of the rows retrieved from the Product table. insert. 2 Click Yes. 194 .Run the completed application Run the completed application Where you are Attach a DataWindow object to the master DataWindow control Attach the DataWindow object to the detail DataWindow control Run the application Attach DataWindow objects to the Product window > Run the completed application Now you run the application again to test the Product window. the Product window functions as a master/detail window. Type sql in the Password box and click OK. update. The Product window displays. PowerBuilder prompts you to save your changes. 4 Select File>Report>Maintain Products from the menu bar. 1 Click the Run button in the PowerBar. Like the Customer window.

5 Select Edit>Insert from the menu bar. This clears the dw_detail DataWindow and allows you to add a new row to the DataWindow. but if you open another product sheet. If you want. 195 . The cursor is in the Product ID box in the dw_detail control. That product data displays in the detail DataWindow. Click a product in the master DataWindow.Lesson 8 Attaching the DataWindow Objects The bottom DataWindow control shows information about the product selection in the top DataWindow control. as coded in the script for the ue_update event. 8 Click OK in the message box. Use the TAB key to move from box to box. This sends the new product data to the database and displays a confirmation message. The new product does not display yet in the top DataWindow. you can add code to the Clicked event of the update button to automatically refresh the data in the master DataWindow control. 7 Select Edit>Update from the menu bar. the new information displays. 6 Add a new product row by entering information in the boxes in the lower DataWindow.

The application closes and you return to the Window painter. 12 Select File>Exit from the menu bar. 11 Select Edit>Delete from the menu bar. Select another product in the master DataWindow. The product is deleted from the DataWindow immediately but is not deleted from the database until you select the Update option on the Edit menu. This sends the revised product data to the database and displays another confirmation message. That product’s data displays in the detail DataWindow. 10 Click OK in the message box. Select Edit>Update from the menu bar. 13 Close the Window painter. 196 .Run the completed application 9 Change the product’s unit price.

step through the code line by line. you can set breakpoints (stops) in scripts and functions. When you run your application in debug mode. You can then look at and change the values of variables.LE S S O N 9 Running the Debugger Sometimes your application does not behave the way you think it will. In these situations. Perhaps a variable is not being assigned the value you expect. or a script does not do what you want it to. PowerBuilder suspends execution just before it hits a line containing a breakpoint. and display the contents of variables to locate logic errors and mistakes that result in errors during execution. you can closely examine your application by running it in debug mode. In this lesson you: • • • Add breakpoints in application scripts Run in debug mode Set a watch and a conditional breakpoint How long does it take? About 15 minutes. 197 . In debug mode.

PowerBuilder opens the Debugger. it stops just before executing a line containing a breakpoint. your display may look different. When PowerBuilder runs the application in debug mode. you should select lines that contain executable statements. 1 Click the Debug button in the PowerBar. To restore the default view layout scheme. If you try to set a breakpoint in variable-declaration lines.Add breakpoints in application scripts Add breakpoints in application scripts Where you are > Add breakpoints in application scripts Run in debug mode Set a watch and a conditional breakpoint Now you open the Debugger and add breakpoints to examine the behavior of the login and Customer windows. or blank lines. PowerBuilder sets the breakpoint at the next executable line. or closed any views. comment lines. moved. If the Debug window looks different If you have opened the Debug window before and opened. There are three tabbed-pane stacks in the default view layout scheme. select View>Layouts>Default from the menu bar. When you insert breakpoints in a script. The Source view is visible in a single pane at the top left of the Debug window. 198 .

double-click the line containing the following assignment statement: this.ToolBarSheetTitle = "MDI Application Toolbar" A red symbol displays at the start of the line to show that a breakpoint has been set on the statement. 3 Expand the following node in the Source Browser view: Windows>w_welcome>cb_ok The Source Browser view lists only events which have been coded. 2 In the Source view.Lesson 9 Running the Debugger The source code for the application Open event displays in the Source view at top left. expand the Application node in the Source Browser view’s tree view and double-click the Open event under the pbtutor application. If it does not display. The code for the Clicked event displays in the Source view. 4 Double-click the Clicked event for the cb_ok button in the Source Browser view. The only event for the login window OK button is the Clicked event. 199 .

Retrieve(ll_itemnum) = -1 THEN A breakpoint symbol displays at the start of the line. 200 .Add breakpoints in application scripts 5 Double-click the following line: gnv_connect = CREATE & n_pbtutor_connectservice A breakpoint symbol displays at the start of the line. Double-click dw_master and then rowfocuschanged. PowerBuilder displays the script for the RowFocusChanged event of the dw_master DataWindow control in the Source view. 6 Double-click w_master_detail_ancestor in the Source Browser view. 7 Double-click this line: IF dw_detail.

Lesson 9 Running the Debugger 8 Select the Breakpoints tab in the lower-right stack. If you have additional breakpoints You can clear any excess breakpoints using the popup menu in the Breakpoints view. you need to have these breakpoints set correctly. You should see the breakpoints you set in the Breakpoints view. 201 . To complete this lesson.

If you have stepped into a function. You return to the next statement in the script that called the function. They have the same result except when the next statement contains a call to a function. About the Step buttons You can use either Step In or Step Over to step through an application one statement at a time. The application starts and runs until it hits a breakpoint (in this case. 2 Click the Global tab in the lower-left stack. You return to the Debug window. 1 Click the Start button in PainterBar1. The yellow arrow cursor means that this line contains the next statement to be executed. Use Step Over to execute the function as a single statement. with the line containing the breakpoint displayed. The Global Variables view displays.Run in debug mode Run in debug mode Where you are Add breakpoints in application scripts > Run in debug mode Set a watch and a conditional breakpoint Now you run the application in debug mode. Use Step In if you want to step into a function and examine the effects of each statement in the function. you can use Step Out to execute the rest of the function as a single step. 202 . or Select Debug>Start from the menu bar. the call to the assignment statement for the toolbar title for sheet windows). You step through the code line by line.

Find the dbms property. 203 . The Open event for the frame window also has a posted call to the ue_postopen function (that you stepped through without examining). Notice that this property does not yet have a value associated with it (because the Debugger interrupted execution before the ProfileString function executed).Lesson 9 Running the Debugger 3 Double-click transaction sqlca. the login window displays and the Debug window is minimized. 4 To execute the next statement. or Select Debug>Step In from the menu bar. 5 Use Step In or Step Over to step through the code until you reach this statement in the script for the frame window Open event: open(w_welcome) After PowerBuilder finishes executing this statement. The DBMS property has a String data type. These functions are processed at the end of the script for the Open event (after the login window displays). The application starts execution of the Open event for the MDI frame window. click the Step In button in PainterBar1. This in turn calls functions of the sheet manager.

When you continue to step through the code. Type dba in the User ID box of the login window. This is the first executable line in the script for the Clicked event of the cb_ok command button. If you double-click another line in the stack. 7 Select the Call Stack tab in the lower-right stack. 9 Click the Step Out button. The yellow arrow in the Source view points to the next executable statement. Now the DBMS property has a value. You step out of the Constructor event in a single step and return to the script for the OK button Clicked event. The Debugger takes you to the script for the Constructor event of the connection service object.Run in debug mode 6 Click Step Over until the login window displays and the Debugger is minimized. Click the Global tab in the lower-left stack. the Source and Variables views change to display the context of that line and a green arrow indicates the line in the Source view. DBPass. the Source and Variables views return to the current context. but the UserID. 8 Click the Step In button. You return to the Debug window. 204 . the CREATE statement for the connection service object. If you then single-click another line in the stack. and DBParm properties do not. The yellow arrow in the Call Stack view indicates the current location in the call stack. Type sql in the Password box and click OK. Look again at the Transaction object properties. a green arrow displays in the Call Stack view to indicate the line for which context is displayed.

10 Click on the Local tab in the lower-left stack. The local variables for the Clicked script have not yet been assigned values. As you step through each statement. but because you commented out the lines in the code for the UserID.Lesson 9 Running the Debugger The values were assigned during execution of the Constructor event of the connection service object after the of_GetConnectionInfo function returned information from the INI file. 205 . you can check that the values assigned to the local variables are what you expected. DBPass. and DBParm properties. these values were not retrieved. 11 Use the Step In button to step through the three assignment statements for the local variables.

The database connection is established. Use the Step In button to step through the three lines that instantiate the Transaction object (SQLCA) with user-entry values. execution stops before the Customer window is opened. As you step through each statement. The application is waiting for user input. and the MDI frame for your application displays. 206 . The RowFocusChanged event for a DataWindow occurs before the DataWindow is displayed. The application continues until it reaches the line in the RowFocusChanged event that contains the next breakpoint you added. For this reason. 13 Click the Continue button in PainterBar1. you can check that the values you entered in the login window are being assigned to the Transaction object. the login window closes. The Continue button resumes execution until the next breakpoint. 14 Select File>Report>Maintain Customers from the menu bar. You are still not connected to the database until the connection service object of_Connect function is executed.Run in debug mode 12 Click again on the Global tab in the lower-left stack and expand the Transaction object.

The application resumes execution. Displaying it in the Watch view makes it easier to observe when its value changes. Select the ll_itemnum variable in the Local view and drag it to the Watch view. 4 Click the Breakpoints tab in the lower-right stack. You return to the Debug window. 3 Select a different row in the master DataWindow of the Customer window. and Parent variables to the Watch view so that you can easily keep track of several variables of different types. The Customer window displays and shows the list of customers retrieved from the database. Double-click the rowfocuschanged breakpoint. The Edit Breakpoints dialog box opens with the breakpoint in the RowFocusChanged event selected. Instance. Click the Local tab in the lower-left stack. the ID of the first customer retrieved. The new value of ll_itemnum displays in both the Local Variables view and the Watch view. 2 Click the Continue button. 1 Click the Watch tab in the lower-right stack. You can also drag Global.Lesson 9 Running the Debugger Set a watch and a conditional breakpoint Where you are Add breakpoints in application scripts Run in debug mode > Set a watch and a conditional breakpoint Next you set a watch on a variable whose value changes when the user selects a row in the Customer window. 207 . The detail DataWindow shows information about customer 101. The ll_itemnum variable is set to 101. You then change one of the simple breakpoints you have set into a conditional breakpoint that is triggered only when a variable has a specific value.

8 Select File>Close from the menu bar. 7 Select File>Exit from the application’s menu bar. PowerBuilder suspends execution only when it reaches this statement and the value of ll_itemnum is 107. Click the Continue button. 6 Click OK to close the dialog box. Now you can select different rows in the Customer window. 208 . and the Debug window opens at the breakpoint only if you select the customer whose ID is 107. If you select customer 107. The application resumes execution. You return to the PowerBuilder development environment. click the Continue button again to return to the application.Set a watch and a conditional breakpoint 5 Type the following line in the Condition textbox and click OK: ll_itemnum = 107 The breakpoint in the RowFocusChanged event script is now a conditional breakpoint. The application terminates and you return to the Debug window.

LE S S O N 1 0 Preparing the Application for Deployment In this lesson you create an executable version of the application for distribution to users. You: • • • • Create the Project object Create the executable file Create a shortcut Test the executable file How long does it take? About 10 minutes. 209 . Users can run this executable version of the application just as they can any other application.

you open the Project painter. such as loops. and function calls. By using dynamic libraries. you do not need to use dynamic libraries. 1 Click the New button in the PowerBar.Create the Project object Create the Project object Where you are > Create the Project object Create the executable file Create a shortcut Test the executable file Now you create the PBTUTOR Project object. Select the Application Wizard icon and click OK. About dynamic libraries You can also create dynamic libraries for your application. 210 . You can make the same selections in the Project painter that you make with the wizard. floating point or integer arithmetic. For small applications like the one that you are working on now. Dynamic libraries can be used to store the objects in the application. While you are developing the application. but the wizard prompts you for this information. When you deploy an application to users. you can choose between Pcode (pseudocode) and machine code as the compile method for your project executable file. You can then use the Project object to create the executable file for the application. Using the Project painter 2 If you clicked the Application icon on the Project page instead of the Application Wizard icon. you usually use Pcode because it is faster to generate. you can break the application into smaller units that are easier to manage and also reduce the size of the executable file. Click the Project tab in the New dialog box. you may want to take advantage of the execution speed of machine code for some computations. About machine code If you are running PowerBuilder Enterprise.

The wizard will generate a project with the following default selections: Wizard property Generate machine code Build dynamic libraries 6 Default value No No If you want to. If you do not change the information on this page.pbl in the Application Libraries listbox if it is not already selected. Click Next until the Specify Version Information page displays. Click Next until the Specify Build Options page displays. The Specify Destination Library page displays. the defaults display in Windows Explorer when you look at the properties of the executable.exe none Select Incremental Build for the Rebuild Option. enter your own version information on the Specify Version Information page. 4 Select pbtutor. The wizard will generate a project with the following default selections: Wizard property Project name Executable filename Optional resource file 5 Default value p_pbtutor_exe pbtutor. 211 .Lesson 10 Preparing the Application for Deployment 3 Click Next.

Review the information on the Ready to Create Application page. you can rebuild your project quickly. PowerBuilder creates a Project object for your application and displays it in the Project painter workspace. Click the Finish button. 212 .Create the Project object 7 Click Next. Selecting incremental build means that if you make a few changes. After a project is defined. Using a project saves time when you are working on an application that includes dynamic libraries that you expect to rebuild often. rebuilding only files that have changed or files that depend on files that have changed. you can easily create an executable version of the application.

In this lesson you look at the property sheets where build and deploy options are specified and then create the executable from the PowerBar. Workspaces and targets in the System Tree have Incremental Build. Full Build. Select Properties and select the Deploy tab. If you have more than one project in the target. such as server component projects.Lesson 10 Preparing the Application for Deployment Create the executable file Where you are Create the Project object > Create the executable file Create a shortcut Test the executable file Now you create the executable file for your application. for applications like the one you built in this tutorial. 213 . The executable file you generate contains definitions for all the objects in the application. and Deploy items on their popup menus that enable you to build and deploy some or all of the projects in a target or in the whole workspace. Click Yes if prompted to save changes. 2 This page shows all the projects in this target (currently only one). creates an executable file and optional dynamic libraries. For the tutorial application. you can change the order in which they are executed and select which projects you want to build. For other projects. but usually. You can create the executable in the Project painter. once you have defined the project. Deploy compiles the code and. 1 Close the Project painter. Incremental Build and Full Build compile your code. Deploy also deploys the component and supporting files to the server. since you did not include a separate resource file with your project. you do not need to open the painter again. this includes the bitmap file used in the login window. Right-click the pbtutor target in the System Tree.

You cannot change anything on this page— you use it to check that you have set up deployment options for your workspace the way you want to. Select Properties and select the Deploy Preview tab. The process of creating the executable file may take a few moments. This workspace has only one target and only one project. click the Cancel button. Right-click MyWorkspace in the System Tree. you could click the Stop button in the PowerBar. The Deploy Preview page shows all the targets in your workspace and the projects in each that have been selected for deployment. 4 Click the Cancel button to close the property sheet. 214 .Create the executable file 3 Leaving p_pbtutor_exe checked. All the projects shown on this page are deployed when you click the Deploy button in the PowerBar. Click the Deploy button in the PowerBar. you can look at the Output window at the bottom of the screen to see what PowerBuilder is doing. in the order in which they are to be deployed. the Output window displays: Finished Deploy of workspace MyWorkspace. so you can use the Deploy button to create the executable. If you wanted to stop the deployment process. When deployment is complete. While PowerBuilder is working.

The icon serves as a shortcut to open the executable file. PowerBuilder is minimized to an icon on the taskbar. in the Select A Name For The Shortcut box. The Create Shortcut dialog box displays. type: C:\Program Files\Sybase\PowerBuilder 8.0\Tutorial \pbtutor. An icon and name display on the desktop. Type SportsWear. Click Finish. You can also change the icon. Inc. 3 Enter the full path to the EXE file in the Command Line box.exe You can also click the Browse button and locate pbtutor.Lesson 10 Preparing the Application for Deployment Create a shortcut Where you are Create the Project object Create the executable file > Create a shortcut Test the executable file Now you create a shortcut for the executable file. 215 . You can add the shortcut directly to the desktop or to the program group of your choosing. if you accepted the default installation folder. 2 Right-click on a blank area of the desktop. Select New>Shortcut from the popup menu.exe. Now you must modify a property of the shortcut so that you can run the application. For example. 1 Minimize PowerBuilder. 4 5 6 Click Next.

216 . The properties sheet for the desktop shortcut displays. Click OK.Create a shortcut 7 Right-click the SportsWear. The default location is: C:\Program Files\Sybase\Shared\PowerBuilder. About the location of the shared modules When you install PowerBuilder. the installation process puts the DLLs in a shared directory. Type the path to the PowerBuilder shared modules in the Start In box. Select Properties in the popup menu. If you want the user to be able to run the application by double-clicking the executable file. 8 Select the Shortcut tab. you must include the shared directory location in the system environment path. icon on the desktop. Inc.

4 217 . When you have finished testing the application. Notice the changes you made to the customer information.Lesson 10 Preparing the Application for Deployment Test the executable file Where you are Create the Project object Create the executable file Create a shortcut > Test the executable file Now you test the new executable file.exe executable file. 1 Make sure the pbtutor. 3 Test the application.ini file is in the same directory as the pbtutor. 2 The application begins running. select File>Exit from the menu bar. Double-click the icon for the tutorial application.

you should continue with these books: User’s Guide Building Internet And Enterprise Applications for PowerBuilder Application Techniques DataWindow Programmer’s Guide Installing the Online Books All the PowerBuilder books are available in the Online Books and on the Sybase Web site at www. PowerBuilder books to use next The Preface to this book includes a guide to the PowerBuilder documentation. Now you know the basics of application development with PowerBuilder. see the Installation Guide.sybase. 218 . For information on how to install the Online Books. If you are a PowerBuilder Enterprise developer. you can continue to the Web targets lessons.What to do next What to do next Congratulations. To further your education.com. You have completed the first two parts of the tutorial.

. It provides step-by-step instructions for creating a simple Web application.PART 3 Building a Web Application This part is a tutorial that shows you how to get started using Web targets.

.

221 . and links to data from various sources. multimedia.LE S S O N 11 Creating Web pages Using PowerBuilder Web targets. scripts. you can develop a Web site in a workspace that stores Web pages. images. In this lesson you: • • • • • • Create a PowerDynamo Web site Create and modify a basic Web page Add page navigation Create a login page with validation and redirection Designate a start page Deploy and run the Web site How long does it take? About 40 minutes.

Before you begin.5 or later Getting the files you need for the tutorial Part 3 of the tutorial requires you to use several files created in Part 2.pbt.1 or later PowerDynamo 3.ico. and Tutorial. pbtutor. If you are completing only Part 3 of the tutorial 222 .2 Internet Explorer 5. tutor_pb. make sure you have the following files in your Tutorial directory: myworkspace. and pbtutor.pbl into your Tutorial directory.jpg. If you recently completed Part 2 of the tutorial The files you need should already be available. The files you need are in the Solutions directory. copy myworkspace.Before you begin this tutorial Before you begin this tutorial What must be installed Part 3 of the tutorial requires that the following be available on your local machine: • • • Jaguar CTS 3. pbtutor.pbw. tshirtw.5.pbt.6. Before you begin.pbw.pbl.pbl. pbtutor.

the deployment configuration processes the HTML pages to make them compatible with the format used by the application server. It updates links in HTML elements to reflect the actual deployment file structure. It processes these instructions when an HTML or Web client views or interacts with the page. PowerDynamo provides an application server that links to your database and your Web server. When you deploy to PowerDynamo. PowerDynamo lets you embed instructions into a Web page. This processing includes: • • Mapping the Web target objects used in your server scripts to objects and methods (object models) on the application server Replacing the delimiters in the HTML editor for server scripts (<% and %>) with the correct delimiters for the specified application server 223 . and a Personal Web server that lets you work off-line with dynamic Web content. store.Lesson 11 Creating Web pages Create a PowerDynamo Web site Where you are > Create a PowerDynamo Web site Create and modify a basic Web page Add page navigation Create a login page with validation and redirection Designate a start page Deploy and run the Web site A PowerDynamo Web site is a database repository where you can create. manage and access HTML documents and data.

If you did not. 2 Click the New button in the PowerBar. Specifying localhost means that the Web site you create is located on your local machine. You accept the default settings for the following items: Wizard Option URL Prefix Mapping ODBC Data Source Name New Local Database Filename User ID and Password Load PowerDynamo Help Files and Samples Deployment Configuration Name and Description 6 Default /Customer Customer Customer. 224 . The introductory page of the Dynamo Web Site wizard displays. The default name for the Web target is Target1. 4 5 Type Customer. select File>Open Workspace and navigate to the Tutorial folder.db dba. 3 Click Next. and you cannot find MyWorkspace. Click OK. The Select Target Location and Folders wizard page displays. If you recently completed the first tutorial. Accept the default port: 80.pbt in place of Target1.pbw and click Open. this workspace may already be open.Create a PowerDynamo Web site 1 In PowerBuilder. *** No CustomerDeployConfiguration1 Deployment Configuration Type localhost for the HTTP Server Name in the Specify HTTP Server Information page.pbw. Select MyWorkspace. Click the Target tab in the New dialog box and select Dynamo Web Site. make sure you follow the instructions in "Setting up for the tutorial" on page 24.pbt. Click Next until the Specify HTTP Server Information page displays.

a directory structure that stores your files. you can see Customer. listed under it. a PowerDynamo Web site that uses an Adaptive Server Anywhere database. The wizard creates the Customer target. The deployment engine converts the source to the appropriate syntax for these target platforms. 225 . 8 Review your selections on the Ready to Create Dynamo Web Site page. You accept the default settings for the following items: Wizard option Object Model Enable Debugging Deploy What Rebuild Copy Folder Default Default Object Model No Debugging Deploy All or Nothing Incremental Program Files\Sybase\PowerBuilder 8. and a deployment configuration. Click Finish to accept the selections.Lesson 11 Creating Web pages 7 Click Next until the Ready to Create Dynamo Web Site page displays.0\Tutorial \Customer\CustomerDeployConfiguration1 By accepting the default Web Target object model. you can write serverside logic that can be deployed to several server platforms from a single source. your new Web target. If you expand MyWorkspace in the System Tree.

The purpose is to demonstrate how easy it is to create a working Web site. Not all functionality is added at this time. • • • • Create a 4GL introductory Web page Change type face Add a graphic Add absolute positioning to a graphic 226 .Create and modify a basic Web page Create and modify a basic Web page Where you are Create a PowerDynamo Web site > Create and modify a basic Web page Add page navigation Create a login page with validation and redirection Designate a start page Deploy and run the Web site In this lesson you create an introductory Web page and modify the look and feel of the page.

Click Next. and Web DataWindow Page wizards. 4GL Web pages rely on the object model to handle data transfer. 4GL Web Page. 2 3 Double-click the 4GL Web Page icon. and JavaScript generation for server scripts. In this tutorial.Lesson 11 Creating Web pages Create a 4GL introductory Web page In this lesson you create a Welcome. This page provides access to other pages you create in this tutorial. Web Page. Five wizards are available to create Web pages: Quick Web Page. 4GL Web Page. You use the 4GL Web Page wizard to create the Welcome page. Web DataWindow Page. HTML generation.htm page. 4GL capabilities make it easy to develop pages with dynamic user-driven content. 227 . Review the Target Name Targets created by the Target wizards are added to the Target listbox at the bottom of the New dialog box. The filename in the File Name textbox defaults to Welcome. and Frameset Page. you use the Web Page. Type the Title Welcome in the Title textbox and press TAB.htm. 1 Right-click on the Customer target icon and select New. Click the Web tab in the New dialog box. The Customer target you created displays. 4GL Web pages are enhanced Web pages that incorporate extensions to the Web Target object model to produce template (source) files for dynamic Web pages (where part of the Web page content changes without changing the Web page).

Click Finish. 8 In Page view. 228 . Select the Skip EAServer Components checkbox.htm. accepting the wizard defaults. 5 6 You add EAServer information in the next lesson. Type: Welcome to Sportswear Inc. 7 Click Next. The filename is Welcome. Type ID for the Parameter Name and leave the Default value empty. Click Next until the Define Page Parameters page displays. 9 Select File>Save from the menu bar to save the changes. select the default text Put your data here. The wizard creates the new Web page and the page opens in Page view. Specify yellow as the background color. Click Next.Create and modify a basic Web page 4 Click Next until the Specify Background Characteristics page displays.

Click the Relative radio button. Select center from the dropdown listbox under Horizontal and Vertical. Select Red from the Color Selection dropdown listbox. Select Inline and click the Edit button. Place the cursor in the text Welcome to Sportswear Inc. 1 Place the cursor at the end of the text and press ENTER. 2 3 4 5 6 7 Your type face changes are applied to the text. Type 20 and select pt (point size) from the box next to the Specific radio button. In Font Size click the Specific radio button. Scroll through the Available Fonts list. 229 . Select the Comic Sans MS font. 8 Select File>Save from the menu bar. Click the Inline Styles tab. Right-click and select Paragraph Properties from the dropdown listbox.Lesson 11 Creating Web pages Change type face It is easy to change the look of a Web page in the HTML editor. Select Blue from the dropdown listbox next to Background Color. Click the arrow button to move Comic Sans MS to the Selected Fonts. Click the Font tab. Click the Background tab. Click OK twice.

Right-click on the Graphics folder and select Import Files. 2 3 4 The image file is copied to the Graphics folder.) next to the Image Location textbox. Select tshirtw. Select New Folder from the popup menu. Type Graphics for the folder name and press ENTER. Select Insert >Image from the menu bar.jpg and click Open. 5 Click in the Welcome. 1 Right-click on the Customer target in the System Tree. Click the browse button (. Open the Graphics folder on the Target page of the Choose URL dialog box... Select All Files from the Files of Type dropdown listbox. Press ENTER to add more space below the title. Select Image Files for the file type. Place the cursor in the paragraph below the Welcome title. Place the cursor again in the paragraph below the Welcome title.Create and modify a basic Web page Add a graphic Next you add an image file to the Welcome page.htm page. Navigate to the Tutorial folder. 6 7 8 230 .

jpg from the folder. 10 Click OK in the Choose URL dialog box. The white T-shirt (tshirtw. and again in the Image Properties dialog box.Lesson 11 Creating Web pages 9 Select the filename tshirtw. 231 .jpg) image displays on the Welcome page.

3 4 Click the Preview tab to view what the page looks like when deployed. Absolute positioning lets you fix where the graphic displays on the page regardless of screen size. 1 Right-click on the T-shirt graphic and select Position>Use Absolute Positioning from the dropdown listbox. 2 Drag the graphic below the heading. 232 . Select File>Save from the menu bar. centering it under the blue bar.Create and modify a basic Web page Add absolute positioning to a graphic Now you fix the image at a specific location on your page.

Lastly you add a button to the new page that eventually navigates to a Web page in which you can add new product information. • • • Create a product information Web page Add a hyperlink Add a button 233 . Additional features are added to this Web page in a later lesson. You also add a hyperlink to the Welcome page to access this new page.Lesson 11 Creating Web pages Add page navigation Where you are Create a PowerDynamo Web site Create and modify a basic Web page > Add page navigation Create a login page with validation and redirection Designate a start page Deploy and run the Web site In this lesson you add a new Web page for displaying product information.

5 234 . Click the 4GL Web Page icon and click OK. 4 Click Next until the Define Page Parameters page displays (accept the wizard defaults). Type the Title Product in the Title textbox and press TAB. Select the Skip EAServer Components checkbox. Select New from the popup menu. Click Next.htm. The filename in the File Name textbox defaults to Product. 3 Click Next.Add page navigation Create a product information Web page Now you create a Web page for viewing and adding product information. Type ID for the Parameter Name and leave the Default Value empty. This new page could be created without the 4GL wizard. 1 Right-click the Customer target in the System Tree. You access the new Web page from the Welcome page. but using a 4GL Web page embeds server-side scripting capabilities and makes it easier to access database information. 2 The About the 4GL Web Page Wizard page displays.

8 Select File>Save to save these changes. Type the words Product Information. 235 . Press ENTER. 7 Highlight the default text Put your data here. The Product.Lesson 11 Creating Web pages 6 Click Next.htm page displays in Page view. Review the summary of page properties and click Finish.

Select Format>Hyperlink from the menu bar. 1 Display the Welcome page (Welcome.. Place the cursor in the paragraph below Welcome to Sportswear Inc..htm and click OK. 2 The Hyperlink Properties dialog box displays. 6 7 Select File>Save from the menu bar. Click the browse (.htm). The Choose URL dialog box opens and displays the Web pages already created in the Customer target.Add page navigation Add a hyperlink Next you add a hyperlink in the Welcome page to access the Product Web page. Close the Welcome page. 236 . The Welcome page displays an underlined View Product Information hyperlink. 3 Type View Product Information in the Text of the Hyperlink textbox. 5 Click OK again to add the hyperlink to the Web page.) button next to the Destination textbox. 4 Select Product..

you add navigation logic to this button.htm). 4 Click OK. Later in the tutorial.Lesson 11 Creating Web pages Add a button Next you add a button to the Product page. 237 . Place the cursor in the paragraph under the heading Product Information.htm page. Select Insert>Form Field>Push Button from the menu bar. Type cb_addproduct in the Name textbox. Buttons are a typical navigation tool on Web pages. 1 Display the Product page (Product. 3 Select the Button Type Button from the dropdown list. You will connect this button to a Web page in the next lesson. Type Add New Product in the Label textbox. The button displays on the Product. 2 The Button Properties dialog box displays.

Close the Product page. 238 .Add page navigation 5 6 Select File>Save from the menu bar.

In production applications you want to use more sophisticated validation logic.htm) with 4GL capabilities. a server-side validation script determines if the username and password are the same. For the purposes of this tutorial.Lesson 11 Creating Web pages Create a login page with validation and redirection Where you are Create a PowerDynamo Web site Create and modify a basic Web page Add page navigation > Create a login page with validation and redirection Designate a start page Deploy and run the Web site Now you add a Login Web page (Login. In this lesson you: • • • • • Create a basic login page Add session variables Add single line text controls Add password validation Add server redirection 239 . The username and password are saved as session variables that are valid for the entire Web session. The login page is a simple design. This is determined with validation logic. Once the login information has passed validation. you add server redirection to move the user to the Welcome page.

Click the Web tab. Click the 4GL Web Page icon. 2 The About the 4GL Web Page Wizard page displays. Type the Title Login in the Title textbox and press TAB. Select the Skip EAServer Components checkbox. Click Next. Click OK. 5 6 240 . 4 Click Next until the Define Page Parameters page displays (accept the wizard defaults). 3 Click Next.Create a login page with validation and redirection Create a basic login page First you create a login page using the 4GL wizard.htm. select File>New from the menu bar. Type ID for the Parameter Name and leave the Default Value empty. The filename in the File Name textbox defaults to Login. 1 With the Customer target selected.

241 . 8 Select File>Save from the menu bar.htm page displays in Page view. The Login. Review the summary of page properties and click Finish.Lesson 11 Creating Web pages 7 Click Next.

Create a login page with validation and redirection Add session variables A session variable can keep track of user login information and other data that you want available to all the pages in your Web application during a user’s browser session. On a new line. and type user for the new variable name. Click the Variables tab. 1 In Page view. Click under Variable Name. Click under user in the Variable Name column. Replace this highlighted text with the following: Log in. 4 5 6 242 . please: 2 Press ENTER. type the following text. Name Password 3 Right-click the Login. Tab to the Client Access column and select Read/Write from the dropdown listbox.htm page and select Page Properties from the popup menu. pressing ENTER after each line. Tab to the Life Time column and select session from the dropdown listbox. highlight the default text Put your data here. click again. click again. and type pswd for the new variable name.

243 . Two session variables for the user login information are now defined. Tab to the Client Access column and select Read/Write from the dropdown listbox. 8 Click OK.Lesson 11 Creating Web pages 7 Tab to the Life Time column and select session from the dropdown listbox.

Select Insert>Form Field>Single Line Text.htm page. The Text Control Properties dialog box displays. Click the Bind tab. The client cannot change the value of this text. place the cursor in the paragraph after the word Name and type two spaces. Select Insert>Form Field>Single Line Text from the menu bar. It is available only on 4GL Web pages. 4 In the Page view. 3 A textbox is inserted after the text Name. You cannot add this ability after the text box is added to the Web page.Create a login page with validation and redirection Add single line text controls Text controls are specialized text fields that can be manipulated by server scripts. 5 Selecting the Password checkbox causes the user-entered password to display as asterisks. 2 Type sle_user in the Name textbox and make sure the Server Side Scriptable checkbox is selected. Click OK. Type sle_pswd in the Name textbox. 244 . place the cursor in the paragraph after the word Password and type two spaces. Select Session Variable from the Component name dropdown listbox. Select the Password checkbox. 1 On the Login. Select user from the Property name dropdown listbox. Make sure the Server Side Scriptable checkbox is selected.

Select pswd from the Property name dropdown listbox. A textbox is inserted after the text Password. Click OK. 245 .Lesson 11 Creating Web pages 6 Click the Bind tab. Select <Session Variable> from the Component Name dropdown listbox. 7 Select File>Save from the menu bar.

a submit button type and a standard button type (button) work in the same way. 246 . Type cb_login in the Name textbox. Select Insert>Form Field>Push Button from the menu bar. In this exercise. 2 Select the Button Type Button from the dropdown listbox. 1 Place the cursor on the page in the paragraph below the Password textbox and press ENTER. You add code in the next lesson to display the Welcome page after login is complete. Type Login in the Label textbox.Create a login page with validation and redirection Add password validation Validation can be done using client-side or server-side scripting. If the username and password are not the same. asking the user to try again. you use a server-side script to determine whether the user-entered username is the same as the user-entered password. an error message displays. The Button Properties dialog box displays. On a 4GL Web page. both have client-side onclick events and server-side Server Action events.

5 Server-side events display in blue text. This script tests to see whether the username and password are the same. 247 .value. 6 Type the following in the Script editor: if (sle_user. 4 In the Script editor at the bottom of Page view. select cb_login in the first dropdown listbox.value == sle_pswd.Lesson 11 Creating Web pages 3 Click OK. The new Login button displays under the Password textbox. scroll to the bottom of the list and select ServerAction(). In the center dropdown listbox.value){ user = sle_user. It assigns the client-entered values for username and password to the session variables.value. pswd = sle_pswd.

248 .Create a login page with validation and redirection 7 Press ENTER.Alert("User name and Password are invalid. 8 Press ENTER twice. Type the following comment line below the script just entered: //Add Redirection here You add a redirection call in the next lesson of the tutorial. Please try again"). } 9 Click the Save button in the PainterBar. Type the else statement as shown below to add the error message: } else { psPage.

Server redirection is used when a parameter value passed to another page relies on user input. 2 Click the browse button (. Right-click and select Insert Redirect from the popup menu.) next to the Destination textbox. The Redirect Properties dialog box displays. Click OK twice. 1 In the Script editor at the bottom of the Login. The ability to modify or remove this block of code using the Edit Redirect or Delete Redirect commands is available in the popup menu.htm from the Contents of Customer tree view.. place the cursor after the comment line //Add redirection here. 4 Select File>Save from the menu bar. 3 The Script editor inserts a block of code. Select Welcome.Lesson 11 Creating Web pages Add server redirection Most 4GL Web pages navigate to other pages by server redirection..htm page. Server redirection is the most flexible way to navigate from one page to another. 249 . Now you alter your 4GL Login page to include a server script that specifies the target (Welcome) page and validates the user-input values of the Login page. or when you want to validate user input.

) next to the Start page textbox. In the Target page of the Choose URL dialog box.. EAS Demo DB V4. Look at the EAS Demo DB database. right-click Customer. see Lesson 3. 2 Click the Run/Debug tab and click the browse button (. 250 .. Select the EAS Demo DB V4 checkbox in the Profile Name list. Select Properties from the popup menu. Click OK. For more information. 3 4 5 The customer database created with the Dynamo Web Site wizard contains metadata for the Web. 6 Select File>Save from the menu bar. Click the Database tab in the Properties Target Customer dialog box.htm and click OK.Designate a start page Designate a start page Where you are Create a PowerDynamo Web site Create and modify a basic Web page Add page navigation Create a login page with validation and redirection > Designate a start page Deploy and run the Web site Now you select a start page from which you can test and run your Web site directly from PowerBuilder. as your application database. select Login. Setting up your database profile The EAS Demo DB V4 is a database profile that is available when you install PowerBuilder. The Properties of Target Customer dialog box displays. Use the EAS Demo database. The Customer target is now ready to deploy. 1 In the System Tree.

5>Personal Web Server. Deployment is done when the Output view displays Finished Deploy of Target Customer. right-click the Customer target. Your PowerDynamo Personal Web Server starts. 2 Click the Windows Start menu and then select Programs>Sybase>PowerDynamo 3. The Personal Web Server icon displays on the Windows taskbar. Select Deploy from the popup menu.Lesson 11 Creating Web pages Deploy and run the Web site Where you are Create a PowerDynamo Web site Create and modify a basic Web page Add page navigation Create a login page with validation and redirection Designate a start page > Deploy and run the Web site Now you deploy the Web site. 251 . 1 In the System Tree.

An error message displays since the username and password are not the same.htm Web page. Click OK.Deploy and run the Web site 3 Select Run>Select and Run from the menu bar. 4 Type Hello in the Name textbox and Good-bye in the Password textbox. Your login page displays. The URL address box contains the file path for your Login. Select Customer in the Select a Target dialog box. Click the Login button. Your default browser opens. 252 .

Type Hello in both the Name and Password textboxes. 7 Close the Browser. Now the Welcome page displays. In the next lesson.htm) displays. The Product Information Web page (Product. you add a Web DataWindow to the Product Information page. 6 Click the View Product Information hyperlink. Click the Login button. 253 .Lesson 11 Creating Web pages 5 Click OK.

Deploy and run the Web site 254 .

LE S S O N 1 2 Using Web DataWindows Web DataWindows provide an interface between a data source and a client browser. In this lesson you: • • • • • • • • • • Set up an EAServer connection profile Build a Web DataWindow Container Create a Web page with a Web DataWindow Container Enable a new product information button Add a button to update the database Add a DataWindow to an existing Web page Add the ability to retrieve product information Test the Web page Add a new product to the database Run the Web application How long does it take? About 40 minutes. 255 . displaying a result set from the data source on a Web page.

PowerDynamo is using the correct version of the Java VM.1 (the default) You should also make sure that: • • The Sybase\Shared\Sun\Jdk118\Bin directory is listed in the system PATH environment variable. where nnn represents the version of the JDK you are using. • 256 .5\Html\Classes folder is listed in your system PATH environment variable. and select Sun Java VM 1.Before you begin this lesson Before you begin this lesson To prevent problems during this Web DataWindow lesson.zip is in the system CLASSPATH environment variable. Double-click Default Java Settings in the left pane and Java VM in the right pane. If you are using JDK 1. Sybase\Shared\Sun\Jdk118\Lib\Classes. open Sybase Central and expand the Utilities and Configuration folders under PowerDynamo 3. You should also make sure that: If you are using JDK 1. To check. make sure that the Sybase\Jaguar CTS 3.2 from the dropdown listbox.2 or later • The Sybase\Shared\Sun\Jdknnn\JRE\Bin\Classic directory is listed in the system PATH environment variable.5.

This tutorial assumes that you are using EAServer on your local machine. You can minimize this window when it displays the message Accepting Connections. 257 . 1 From the Windows Start menu. select Tools>EAServer Profile. select Programs>Sybase>Jaguar CTS>Jaguar Server to start EAServer. A DOS window displays as the server starts. The following screen displays.Lesson 12 Using Web DataWindows Set up an EAServer connection profile Where you are > Set up an EAServer connection profile Build a Web DataWindow Container Create a Web page with a Web DataWindow Container Enable a new product information button Add a button to update the database Add a DataWindow to an existing Web page Add the ability to retrieve product information Test the Web page Add a new product to the database Run the Web application Now you set up a connection profile to EAServer. 2 From the PowerBuilder menu bar.

258 . 6 Click OK twice and click Done. 4 Enter the following information. The Edit EAServer Profile dialog box opens.Set up an EAServer connection profile 3 Click Add. A Connection Successful message displays. Profile Property Profile Name Server Name Port Number Login Password Type this value local localhost 9000 jagadmin leave blank 5 Click Test when complete.

1 Select File>New from the menu bar. Click OK. and you deploy the component directly to the server for use by your Web application. In this lesson you build a Web DataWindow container using the Web DataWindow Container wizard. 2 259 . Click the Project tab. The New dialog box displays.Lesson 12 Using Web DataWindows Build a Web DataWindow Container Where you are Set up an EAServer connection profile > Build a Web DataWindow Container Create a Web page with a Web DataWindow Container Enable a new product information button Add a button to update the database Add a DataWindow to an existing Web page Add the ability to retrieve product information Test the Web page Add a new product to the database Run the Web application A Web DataWindow container gathers all the supporting files and properties that your page needs into a single area installed on the server. Click the Web DW Container Wizard. Click Next. The Web DataWindow Container wizard creates a custom EAServer component that implements the HTMLGenerator80 interface and packages all the DataWindow objects together with database connection information.

4 Click Next. The Specify Project Object window displays.pbl file in the Application libraries list. Here you create a name for the project.Build a Web DataWindow Container 3 Select pbtutor. Accept the default project name. 260 .

Select the EAS Demo DB V4 from the Database Profiles list.pbd 261 .Lesson 12 Using Web DataWindows 5 Click Next. accepting the defaults as listed: Wizard Options Choose EAServer Profile Specify EAServer Container and Package Name Specify Instance Pooling Options Specify Other Component Options Specify Dynamic Library Options Default Value local pbtutor_component pbtutor_package Supported None pbtutor. 6 Click Next until the final wizard page displays.

8 Select Design>Deploy Project from the menu bar. This deploys the Web DataWindow Container in the pbtutor target to the EAServer on your local machine. 262 .Build a Web DataWindow Container 7 Click Finish. The p_pbtutor_webdw project displays in the Project painter. 9 Select File>Close from the menu bar to close the project.

Click Next. Select New. 4 Select the local EAServer profile. Click the Web tab in the New dialog box. 3 Type Addproduct in the Title textbox. 1 Right-click the Customer target in the System Tree. 263 . Addproduct. Addproduct. Click Next. 2 The Specify New HTML File page displays. Click Next. Double-click the Web DataWindow Page icon. The Choose Web DW Component Type page displays.Lesson 12 Using Web DataWindows Create a Web page with a Web DataWindow Container Where you are Set up an EAServer connection profile Build a Web DataWindow Container > Create a Web page with a Web DataWindow Container Enable a new product information button Add a button to update the database Add a DataWindow to an existing Web page Add the ability to retrieve product information Test the Web page Add a new product to the database Run the Web application In this lesson you use the Web DataWindow Container you just created when you create a new Web page.htm is now the name of your Web page file.htm.

Create a Web page with a Web DataWindow Container 5 Select the Web DW Container radio button and click Next. 6 Expand the items below the local server. 264 . The Choose DataWindow Object page displays. 7 Click Next. select the pbtutor_component. Under pbtutor_package.

Click Finish to accept your selections. 9 Click Next. 265 .htm Web page displays in Page view. The Addproduct.Lesson 12 Using Web DataWindows 8 Select d_product.

and link to the product. The Button Properties page displays.htm page contains a Web DataWindow. 266 . 3 Press ENTER after the text. The page is now 4GL enabled. link to the database.htm page where users can view the information they have added. 2 Place the cursor to the left of the DataWindow (in the lower left corner) and press ENTER. Select Insert>Form Field>Push Button from the menu bar. enable users to add product information to the database. This allows you to code server-side events and to bind variables and components to controls on your Web page. Click the box next to Enable 4GL Web Server Side Event Model and click OK. Now you add text. Insert the following text in the paragraph above the Web DataWindow: Click here to add new product information Under this text you will add a new button which will display a blank row in the DataWindow.htm page and select Page Properties from the popup menu.Enable a new product information button Enable a new product information button Where you are Set up an EAServer connection profile Build a Web DataWindow Container Create a Web page with a Web DataWindow Container > Enable a new product information button Add a button to update the database Add a DataWindow to an existing Web page Add the ability to retrieve product information Test the Web page Add a new product to the database Run the Web application So far the addproduct. 1 Right-click on the addproduct.

InsertRow(0).Lesson 12 Using Web DataWindows 4 Select Button from the Button Type dropdown listbox. Type Add New Product Information in the Label textbox. 6 When the end user clicks the Add New Product Information button on the Web page. Enter information into all the textboxes and click Update Database. Select cb_addproduct from the first dropdown listbox in the Script editor. or Click the Add New Product Information button in page view to have the Script editor display cb_addproduct in the first dropdown listbox. the Web DataWindow displays with empty textboxes for user input. 7 Place the cursor after the paragraph icon at the right end of the Add New Product button. 267 . Add the following script: dw_1. Select ServerAction() from the center dropdown listbox. 5 Click OK. Type cb_addproduct in the Button Name textbox. Press ENTER. Type the following text on one line: Add a new product.

When building a Web page. 12 Click OK. Click the Control tab. 11 Click the Retrieval tab. Check the Override box next to the Weight panel. Clear the Automatic Retrieval option. 10 Click the Override checkbox for Rows Per Page field. check only the features you need. Check all the items in the Weight panel. 268 . Click the Save button in the PainterBar. Size of the generated page Each feature selected generates JavaScript code for the Web page. this limits the size of the page. 9 The HTML page generated will include JavaScript code that supports all the client-side features checked.Enable a new product information button 8 Right-click on the Web DataWindow. Type 1 in the Rows Per Page box. This limits the amount of product information displayed to one record. Select Sybase Web DataWindow DTC Properties from the dropdown listbox.

you must update the database. Select Insert>Form Field>Push Button from the menu bar. so now you add a button for updating the database. The Button Properties page displays. Type Update Database in the Label textbox. Type cb_update in the Name textbox. You also add a link to the product information so that you can view it. 2 Select Button from the Button Type dropdown listbox.Lesson 12 Using Web DataWindows Add a button to update the database Where you are Set up an EAServer connection profile Build a Web DataWindow Container Create a Web page with a Web DataWindow Container Enable a new product information button > Add a button to update the database Add a DataWindow to an existing Web page Add the ability to retrieve product information Test the Web page Add a new product to the database Run the Web application After you add product information. 1 Place the cursor in the paragraph at the bottom right of the Web DataWindow and press ENTER. 269 .

Update(). Press ENTER. Type Product Information in the Text of the Hyperlink textbox. 7 The window opens to display the target list of Web pages already created. 6 Place the cursor in the paragraph under the Update Database button and select Format>Hyperlink. 270 .Add a button to update the database 3 Click OK..htm). 4 5 Pressing the Update Database button from the Web page adds the information entered by the end user to the database. 8 Select the Product Information page (Product. Select cb_update in the first dropdown listbox of the Script editor.) button next to the Destination textbox.. type: dw_1. Click the browse (. Select ServerAction() from the center dropdown listbox. In the Script editor window.

Product Information appears on the Addproduct. 271 .htm page as an underlined hyperlink. 10 Select File>Save from the menu bar.Lesson 12 Using Web DataWindows 9 Click OK twice to add the hyperlink to the Web page.

The Sybase Web DataWindow DTC Properties dialog box displays. This prevents automatic insertion into your page of the script that accesses the Web DataWindow. 272 . You clear the automatic retrieval checkbox for this DataWindow.htm file. You then link a specific DataWindow retrieval argument to a parameter on the Web page and retrieve the DataWindow programmatically. 1 2 Open the product. Press ENTER. Select Insert>Form Field> DataWindow from the menu bar. 3 Select the Library radio button on the DataWindow page.Add a DataWindow to an existing Web page Add a DataWindow to an existing Web page Where you are Set up an EAServer connection profile Build a Web DataWindow Container Create a Web page with a Web DataWindow Container Enable a new product information button Add a button to update the database > Add a DataWindow to an existing Web page Add the ability to retrieve product information Test the Web page Add a new product to the database Run the Web application Now you add a DataWindow to an existing Web page. Place the cursor at the end of the Product Information paragraph.

Lesson 12 Using Web DataWindows 4 Click the browse button (. Select the Generate Absolute Path in Script checkbox. you should use the actual file location. 273 . In a production environment. Generate absolute path is used here for the purposes of the tutorial only.. Select EAS Demo DB V4 from the dropdown listbox.pbl. Double-click tutor_pb.) next to the DataWindow Library textbox.. 5 Click the Connection tab. Select d_product from the DataWindow dropdown listbox.

Select ServerAction() from the second dropdown listbox. 274 .) button next to the Destination textbox. 11 Click OK twice. Clear the Automatic Retrieval option. Select Insert Redirect from the dropdown listbox. Later you will write a script to retrieve product data using a button clicked event. 9 10 Click the browse (. 12 Select File>Save from the menu bar.. Now you add a link from this page to the new product page. 7 Click OK. Right-click inside the Script editor. Select Addproduct.Add a DataWindow to an existing Web page 6 Click the Retrieval tab..htm from the Contents of Customer listbox. 8 Select the cb_addproduct button in the first dropdown listbox in the Script editor.

htm in Page view if it is not already open. 2 A table displays on the Web page. It will allow you to request the product ID for any product in the database and display the product information on the page. 1 Open product. Click Finish and OK. Type 1 in the Number of Rows. 275 .htm page. Select Table>Table Wizard from the menu bar. 3 Highlight the word Cell in the first column and type Display Product Information by Product ID. Type 2 in the Number of Columns. Place the cursor at the end of the paragraph above the Web DataWindow. 4 Highlight the word Cell in the second column. Click Next. Select Insert >Form Field >Single Line Text. Press ENTER.Lesson 12 Using Web DataWindows Add the ability to retrieve product information Where you are Set up an EAServer connection profile Build a Web DataWindow Container Create a Web page with a Web DataWindow Container Enable a new product information button Add a button to update the database Add a DataWindow to an existing Web page > Add the ability to retrieve product information Test the Web page Add a new product to the database Run the Web application Now you add a retrieve function to the product.

Type cb_get in the Name textbox. 7 Click OK. Add the following code to the script window: dw_1. Select cb_get in the first dropdown listbox of the Script editor.Reset().value).Add the ability to retrieve product information 5 Click OK.Retrieve(sle_1. 8 9 Select File>Save from the menu bar. Place the cursor after the table. Type Product by ID in the Label textbox. The Button Properties page displays. Select Insert>Form Field>Push Button from the menu bar. Select ServerAction() from the center dropdown listbox. dw_1. 276 . Press the ENTER key once to move to the next line. 6 Select Button Type Button.

. To do this. ending with Finished Deploy of target customer.. 3 4 5 The Output window opens and displays informational messages. right-click Customer. 2 Click the Run/Debug tab and click the browse (. Select Addproduct. In the System Tree. The Properties of Target Customer dialog box displays. right-click Customer.htm from the Contents of Customer listbox and click OK twice. it is useful to first test the Addproduct. and then you deploy and run the Customer target. you specify that the start page for the Customer target is Addproduct. Click the Target tab in the Choose URL dialog box. Check to see that your Personal Web Server and the local EAServer are running. 277 .) button.Lesson 12 Using Web DataWindows Test the Web page Where you are Set up an EAServer connection profile Build a Web DataWindow Container Create a Web page with a Web DataWindow Container Enable a new product information button Add a button to update the database Add a DataWindow to an existing Web page Add the ability to retrieve product information > Test the Web page Add a new product to the database Run the Web application Before you test your Web application. Select Deploy from the popup menu. 1 In the System Tree. Select Properties from the popup menu.htm.htm Web page to see if you can add a product.

The URL address box contains the file path for the Addproduct. Next you add new product information using this Web page. Your default browser opens.Test the Web page 6 Return to the System Tree. 278 . and again right-click Customer.htm Web page. Select Run from the popup menu.

1 Click the Add New Product Information button on the Addproduct.htm page.Lesson 12 Using Web DataWindows Add a new product to the database Where you are Set up an EAServer connection profile Build a Web DataWindow Container Create a Web page with a Web DataWindow Container Enable a new product information button Add a button to update the database Add a DataWindow to an existing Web page Add the ability to retrieve product information Test the Web page > Add a new product to the database Run the Web application Next you add new product information and update the database with the new information. 279 . The Web page is reloaded and an empty Web DataWindow row displays.

htm page displays.95 3 Click the Update Database button. Click the Product by ID button. 280 .Add a new product to the database 2 Type the following information in the Web DataWindow: Textbox Product ID Product Name Product Description Size Color Quantity Unit Price Value 9999 Shirt Denim shirt Large Blue (select from dropdown list) 6 27.htm Web page is reloaded with the product information you entered in the previous exercise. 5 Type 9999 in the Display Product information by Product ID textbox. 4 Click the Product Information hyperlink. You review the information next. The product. This information is now in the database. The product.

281 .htm page. the redeploy. 1 In the System Tree. Click the Target tab in the Choose URL dialog box. In the System Tree.. 2 Click the Run/Debug tab and click the browse (.. Check to see that your Personal Web Server and the local EAServer are running. and test the Web application. Select Deploy from the popup menu.) button. right-click Customer. Now you change the start page back to the Login. 3 4 5 When the Output window displays the Finished Deploy of target customer message. right-click Customer. you run the application. The Properties of Target Customer dialog box displays.Lesson 12 Using Web DataWindows Run the Web application Where you are Set up an EAServer connection profile Build a Web DataWindow Container Create a Web page with a Web DataWindow Container Enable a new product information button Add a button to update the database Add a DataWindow to an existing Web page Add the ability to retrieve product information Test the Web page Add a new product to the database > Run the Web application You have completed the development of your Web application. Select Properties from the popup menu. run. Select Login.htm from the Contents of Customer listbox and click OK twice.

Run the Web application

6

Click the Run button in the PowerBar.

Your default browser displays the Login.htm page.

7

Type your first name in both the Name and Password textboxes. Click the Login button.

The Welcome page displays.

282

Lesson 12

Using Web DataWindows

8

Click the View Product Information hyperlink.

The Product Information Web page (Product.htm) displays.

9

Click the Add New Product button.

The Addproduct.htm page displays.

283

Run the Web application

10 Click the Add New Product Information button.

The Web DataWindow displays with an empty row.

11 Type the following information in the Web DataWindow: Textbox Product ID Product Name Product Description Size Color Quantity Unit Price Value 4321 Tee Shirt Cotton tee shirt Small White (select from dropdown list) 100 15.95

12 Click the Update Database button. 13 Click the Product Information hyperlink.

The product.htm page displays.

284

Lesson 12

Using Web DataWindows

14 Type 4321 in the Display Product information by Product ID textbox. Click the Product by ID button.

The product.htm Web page is reloaded with the product information you just entered.

15 Close the Browser.

285

What to do next

What to do next
Congratulations. You have completed Part 3 of the tutorial. Now you know the basics of working with Web targets in PowerBuilder.
Web target books to use next

The Preface to this book includes a guide to the PowerBuilder documentation. To further your education in Web targets and Web DataWindows, you should continue with these books: Working with Web Targets Web Targets Reference DataWindow Programmer’s Guide DataWindow Reference

Installing the Online Books

All the PowerBuilder books are available in the Online Books and on the Sybase Web site at www.sybase.com. For information on how to install the Online Books, see the Installation Guide.

Looking at the Web target sample

To see examples of PowerBuilder 8 code, including a Web target sample, you should look at the examples that are available on the Sybase Web site at www.sybase.com/pb8examples.

286

Index

A
aligning columns in DataWindow objects ampersand (&) menu item accelerator key 145 ancestor scripts 132 windows 123 Application object definition 12 icon 39, 41 Open event 50 applications building 209 debugging 197 definition 12 distributed 5 internet 5 MDI 20, 21 running 43, 257 AutoScript setting up shortcuts for 116 using 117, 135 182

columns on DataWindow objects aligning 182 rearranging 180 comments DataWindow 166, 178 menu 150 Script view 87 window 69 COMMIT statement 137 connection service manager 102 Constructor event, user object 106 context Help, adding 82 controls CommandButton 79 deleting 72 duplicating 74 Picture 72 specifying properties for 75, 78, 80 StaticText 74 Creating Web pages 221

D B
background color, window breakpoints 198 Button, adding 269 67 data source Quick Select 162 SQL Select 170 database connectivity about 6, 92 Transaction object 105 Database painter, using 98 database profiles 92 databases connecting to 6 connecting to at execution time 105 extended attributes 101 retrieving, presenting, and manipulating data table definitions in 98 update 279, 281 DataWindow controls 124

C
class user objects 18 Clicked event CommandButton control 117, 119 menu item 155 Clip window 7 Close event, Application object 120

14

287

183 F floating toolbars 61 views 55 footer band in DataWindow objects format button 237 graphic 232 type face 239 frame window 86 Freeform presentation style columns 179 DataWindow definition 170 functions about 5 DeleteRow 137 GetActiveSheet 155 global 17 InsertRow 137 object-level 17 ProfileString 107 Reset 137 Retrieve 135 SetFocus 135. 188. 192 creating 162. 136 DBParm parameter 111 debugging about 197 adding breakpoints 198 running in debug mode 202 setting a watch 207 stepping through code 202 declaring global variables 107 default to 3D window option 71 DeleteRow function 137 deleting controls 72 detail band in DataWindow objects 162 docking views 55 dropdown DataWindow edit style 183 dropdown menus adding items 144 description 16 edit style. 170 display order 163 enhancing 179 overview 14 presentation style 162.Index DataWindow data expressions 139 DataWindow objects about 161 aligning columns 182 attaching to DataWindow controls 186. 178 selecting columns with Quick Select 163 WHERE clause 174 DataWindow painter bands 162 retrieval argument 173 WHERE clause 174 DBError event 132. 155 Close 120 Constructor 106 DBError 132 RowFocusChanged 138 triggering from menu scripts 155 executable file application icon 39. 170 rearranging columns 180 retrieval arguments 173 saving 166. dropdown DataWindow 183 events about 5 Clicked 115. 170 data source 162. 137 SetRowFocusIndicator 135 SetTransObject 139 Update 137 162 E EAS Demo DB Database connecting to 91 setting up 24 EAServer 257 288 . 41 generating machine code 210 regenerating objects 213 extended attributes 101.

description 16 menu items adding scripts for 155 defining 144 description 16 Menu painter. 164 I icons. 153 creating 149 inheriting 149 menu items 144 saving 150 MicroHelp 152 H HALT statement 119 header band in DataWindow objects Help context messages 82 Microhelp 152 162.ini 92 pb. 21 menu bars. size 41 manager connection service 102 MDI applications 20.ini 98 pbtutor.ini 107 InsertRow function 137 O 5 object orientation 5 object-level functions 17 structures 17 Open event frame window 86 sheet window 138 Output window 7 L libraries about 18 dynamic 210 rebuild objects in 141 search path for application P PainterBar adding controls from 70 popup menus 61 using 8 painters 8 Parent (PowerScript pronoun) 112 Parent (pronoun) 113 PBL see PowerBuilder Library (PBL) Pcode (pseudocode) 210 126 289 . using 144 menus about 16 adding scripts for 155 and toolbars 146. application 39 Information add 266 inheritance and menus 149 and object-oriented programming and user objects 124 and windows 123 initialization files odbc.Index G GetActiveSheet function global functions 17 structures 17 variables 107 graphics 230 155 M machine code 210 main window.

vertical 130 Select painter about 171 tab area 172 SELECT statement 172 SetFocus function 135. 137 SetRowFocusIndicator function 135 SetTransObject function 139 setup for tutorial 24 sheet windows menus 150 size. in Select painter 172 SQLCA (SQL Communications Area) 105. 139 structures 17 StyleBar 9 summary band in DataWindow objects 162 System Tree 7 61 T tab order 81 Tabular presentation style 162 targets 7 This (PowerScript pronoun) 139 To-Do List 102 S Script view description 82 error window 89 290 . 135 scrollbars. main window 41 SQL painter 170 SQL Select 170 SQL statements COMMIT 137 ROLLBACK 137 SELECT 172 SQL syntax.Index popup menus about 61 PainterBar 61 PowerBar 8 PowerBuilder Library (PBL) 18 PowerDynamo Web site 223 PowerScript 5 PowerTips 9 presentation styles DataWindow object 162. PowerScript Parent 112. 170 Freeform 170 Tabular 162 Profile String function 107 Project wizards 210 pronouns. 113 This 139 Q queries 17 Quick Select sort criteria 164 using 162 R retrieval arguments creating 173 WHERE clause 174 Retrieve function about 135 specifying an argument for 140 Retrive data from database 275 right mouse button. and popup menus ROLLBACK statement 137 RowFocusChanged event 138 Paste Special commands 115 prototype area 136 using comments 87 scripts about 5 compiling 89 displaying ancestor scripts 132 error window 89 for user events 134 setting up shortcuts for AutoScript 116 using AutoScript 117.

deleting a control 72 window size 41 windows about 13 ancestor 123 CommandButton controls on 79 creating 66 DataWindow controls on 124 deleting a control 72 opening in a script 85 Picture controls on 72 previewing 83 response 66 saving 66 StaticText controls on 74 tab order in 81 wizards 4GL 240 Connection Object 102 DataWindow 162 Project 210 Web page 227.Index toolbars runtime application 153 showing text 60 Transaction object 105. about 7 WHERE clause 174 Window painter. 139 tutorial files 24 initialization file 107 setup 24 views docking 55 floating 55 manipulating 52 pinning 54 saving layout schemes stacks 56 visual user objects 18 57 U Update function 137 user events adding scripts for 134 defining 134 triggering from menu scripts user objects about 18 using 124 W Web DataWindow 272 Web DataWindow Container 259 Web page deploy 277 graphic 230 with DataWindow 263 Web pages. types of Design (DataWindow painter) 162 HTML Preview (DataWindow painter) 165 Layout 67 Object Details (Database painter) 100 Object Layout (Database painter) 100 Objects (Database painter) 98 Preview (DataWindow painter) 165 Properties 67 Script 82 Syntax (Select painter) 172 Table Layout (Select painter) 171 WYSIWYG (Menu painter) 144 291 . introduction 221 Web targets. 263 workspaces 7 155 V validation 246 variables global 107 gnv_connect 108 instance 107 lm_menu 157 naming conventions 108 validation 246 vertical scrollbars 130 view.

You're Reading a Free Preview

Descarregar
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->