Web DataWindow

1
AM34 Web DataWindow
Larry Cermak lcermak_at_ctpartners.com
2
Web DataWindow

• Larry Cermak
• 630 428-2650
• lcermak_at_ctpartners.com
• www.ctpartners.com

3
About Your Instructor

• VP of Technology, Corporate Technology Partners,
  Inc.
• Member of Team Sybase
• Writer for Sybase Developer Network and
  PowerTimes magazine
• CPD Professional
• CPD Review Board Committee Member
• 1997 Chicago PowerBuilder User Group VP
• Started building systems in 1984
• PowerBuilder development since version 2

4
About Your Instructor

• I believe in the KISS methodology
• (K)eep
• (I)t
• (S)imple
• (S)tupid

5
Corporate Technology Partners

• Offices in Denver, Chicago, and Connecticut
• Sybase Premier Channel Partner
• eMap Partner
• Consulting and mentoring services
• Training
• EAStudio
• EAServer
• Web DataWindow
• 3 Members of Team Sybase on staff

6
Introduction

• How technical will this session be?
• Detailed code and techniques
• Intended for beginners and experienced developers
• Sample code will be explained
• Lots of examples
• Real world techniques, not necessarily what the
  textbooks say!

7
Introduction

• Audience participation encouraged!
• Feel free to ask questions.
• Interaction makes the session more exciting.
• No question is stupid!!!
• I will make it as lively as possible!

8
Who Is In Attendance

• Managers vs developers
• PowerBuilder experience
• Less than 6 months
• Less than 1 year
• 1-2 years
• More than 2 years
• More than 5 years
• Feel free to ask questions!

9
Summary Of Course

• Web DataWindow overview
• Web DataWindow architecture
• Configuring the DataWindow
• Configuring Jaguar
• Configuring PowerDynamo
• JavaScript Coding Basics
• Advanced JavaScript Coding
• Client-Side Events
• Changing The SQL Statement
• Linking
• Server-Side Events

10
Summary Of Course

• Other Configurations
• Cascading Style Sheets
• Internet Explorer vs Netscape Navigator
• Advanced Features
• Jaguar Overview
• Basic review of packages and components and how
  this applies to the Web DataWindow

11
Summary Of Course

• HTMLGenerator component
• Review
• Architecture
• Customizing the component
• PowerSite DTC

12
Overview
13
Overview

• This is one of the, if not the most important
  feature of PowerBuilder 7!
• This is what PowerBuilder developers have been
  waiting for!

14
Overview

• Provides the ability to run a DataWindow in a web
  browser without the PowerBuilder runtime DLLs
• Total thin client solution
• Provides most DataWindow functionality
• Presentation
• Manipulation
• Updates to the database
• Client and server side scripting
• DataWindow event model

15
Overview
Animated GIFs
Links
16
Architecture
17
Architecture
Web Browser
Web Server
Jaguar
Page Server
PowerDynamo
HTML
18
Architecture

• Now that we know the overview of how it works,
  what are the different implementation options?
• There are 4 ways, each having a specific purpose
• DataWindow plug-in
• DataWindow Web ActiveX
• Web DataWindow control
• PowerSite DataWindow DTC

19
Architecture

• DataWindow plug-in
• Basically this is a PSR viewer
• Typically used for predefined reports
• No database access or updates
• Browser must install the plug-in

20
Architecture

• DataWindow plug-in
• Positive
• No client side configuration required (other than
  putting the plug-in in the plug-in directory)
• PSRs are the most compact representation of the
  definition and full data
• Allows for viewing of batch produced reports
• Can be used in both Netscape and Internet Explorer

21
Architecture

• DataWindow plug-in
• Negative
• No auto install of plug-in
• SaveAs() and print are not really secure on the
  client side
• Read only

22
Architecture

• DataWindow Web ActiveX
• ActiveX control hosted in Internet Explorer
• Fully functional DataWindow control that can be
  scripted on the client using JavaScript or
  VBScript

23
Architecture

• DataWindow Web ActiveX
• Supports the following
• Full event model
• Many DataWindow functions
• DataWindow sync for 3 tier computing
• JDBC for database access
• Packaged as a CAB file so can be downloaded from
  the server

24
Architecture

• DataWindow Web ActiveX
• Positive
• Fully functional DataWindow control (including
  events, functions and dynamic modification)
• Can update the database
• Negative
• The one time download of the CAB file (a little
  more than a Meg).
• Only works in Microsoft Internet Explorer

25
Architecture

• Web DataWindow control
• Server component and page server work together to
  translate a DataWindow into HTML
• The server can run directly in the server or in a
  transaction server (Jaguar/MTS)
• Provides most of the functionality and look of
  the DataWindow on the client
• The majority of the processing occurs on the
  server

26
Architecture

• Web DataWindow control
• Positive
• Pure thin-client solution
• Works a page at a time
• Supports modification and update
• All database connectivity runs on server (no
  client side configuration required)
• Some client side scripting and events

27
Architecture

• Web DataWindow control
• Negative
• Causes an added load on the component server
• Full DataWindow API not available
• Full DataWindow event model not available
• All page navigation, insert and delete involves
  round trips to the server

28
Architecture

• PowerSite DataWindow DTC
• Reads a DataWindow definition out of a PBL and
  generates server side JavaScript that
• Does a database retrieve
• Generates the HTML that resembles the DataWindow
  definition
• Does some server side scripting for updates

29
Architecture

• PowerSite DataWindow DTC
• Positive
• Same as Web DataWindow control except no
  scripting or DW events
• No PowerBuilder DLLs required on web server or
  client machines

30
Architecture

• PowerSite DataWindow DTC
• Negative
• Same as Web DataWindow control plus the following
• HTML generation is not complete and is separate
  from DataWindow generation (two separate code
  lines)
• Complexity of HTML generation is limited by its
  implementation in JavaScript
• No client side scripting or DataWindow events
  (form controls can trigger events)
• Can only update using Freeform presentation style

31
Configuring The DataWindow
32
Configuring The DataWindow

• DataWindow settings
• Create or take an existing DataWindow
• Decide where you want the processing to occur
  (client/server/combination)
• Set the various HTML options
• HTML DataWindow
• HTML Table options
• HTML Generation options
• All these settings can be done in the DataWindow
  painter or in JavaScript code

33
Configuring The DataWindow
Indicates the DataWindow will interface with a
server component
34
Configuring The DataWindow

• HTML DataWindow
• If checked, the HTML generation will use the HTML
  Generator properties to generate an editable HTML
  page with user interaction via HTML and
  JavaScript
• If not checked, it will generate an HTML read
  only table

35
Configuring The DataWindow
HTML table generation options
36
Configuring The DataWindow

• HTML Table options tell the DataWindow how to
  display in an HTML table
• Border
• Self explanatory, border of each column
• Cell spacing
• Spacing between each cell of the table
• Cell padding
• How much each cell is padded with spaces

37
Configuring The DataWindow

• HTML Table options tell the DataWindow how to
  display in an HTML table
• Width
• No Wrap
• Will not wrap long text to the next line of the
  table
• Generate CSS (Cascaded Style Sheets)
• Not supported in 7.0 or 7.1
• Style Sheet
• Not supported in 7.0 or 7.1

38
Configuring The DataWindow
HTML generation options
39
Configuring The DataWindow

• HTML Generation options
• Rows Per Page
• Indicates how many records or rows to display in
  the browser
• 0 will display all rows retrieved
• Be careful with this option. The component will
  still retrieve the entire result set and then
  generate HTML for the number specified!
• Generate JavaScript
• Generates JavaScript even if the browser is not
  recognized
• Portable, does not use browser specific features
• You must use this to update data!

40
Configuring The DataWindow

• HTML Generation options
• Client Events
• JavaScript code to generate events is generated
  in the HTML
• You need this if you want to capture the
  DataWindow events as they are fired on the client
• Client Validation
• Generated JavaScript code for the DataWindow
  validation expressions
• This runs the validation from the DataWindow to
  be run in the client (no round trip to the
  server)
• It is included in the HTML
• Remember that the client has no connection to the
  database, so the validation is somewhat limited

41
Configuring The DataWindow

• HTML Generation options
• Client Computed Fields
• Generates JavaScript for computed fields and
  computed in the client browser
• Client Formatting
• Generated JavaScript for display formats of
  fields that do not have focus

42
Configuring The DataWindow

• HTML Generation options
• Client Scriptable
• Allows client-side JavaScript to interface with
  the DataWindow
• This provides access to many DataWindow functions
  and events
• You need to check this option if you want to
  write client-side script to interact with the
  DataWindow
• This will be demonstrated later!
• Browser
• Specifies a specific browser
• This will generate browser specific language

43
Configuring The DataWindow

• HTML Generation Options
• HTML Version
• Generate HTML optimized for a specified browser
• Browser identification strings are sent by the
  client to the server in the HTTP header

44
Configuring The DataWindow

• HTML Generation Options
• Object Name
• A string specifying a name used in generated code
  for the Web DataWindow client control, page
  parameters, and client side events
• You must specify a unique object name when there
  will be more than one Web DataWindow on a web
  page so names will not conflict
• Remember, this name is case sensitive!

45
Configuring The DataWindow

• HTML Generate Options
• Self Link
• Specifies the URL for the current page
• document.name represents the current page, not
  the absolute URL
• If you specify the absolute URL you would have to
  change it if you renamed the page
• This is used to generate URLs for buttons that
  navigate the result set or reload the page such
  as Update and Retrieve

46
Configuring The DataWindow

• HTML Generate Options
• Self Link Arguments
• Included in the generated HTML as hidden fields
• These supply information that the server needs to
  render additional pages of the result set such as
  retrieval arguments
• If you pass arguments into the page, they must be
  specified here. The format must evaluate to a
  string and must match the following format
• arg_nmstring_expressionarg_nmstring_expressi
  on
• education'string(education_id)'profession'Strin
  g(profession_id)'person'String(person_id)'schoo
  l_type'String(school_type)'obtainby'String(stg_
  uid_obtain_by)'

47
Configuring The DataWindow

• Thats all we need to do for the DataWindow
• Is it that simple?
• What else needs to be done?
• Configure the component server
• Configure the page server
• For this example, EAServer (Jaguar PowerDynamo)
  will be used

48
Configure Jaguar
49
Configure Jaguar

• First, what is Jaguar CTS?
• Component Transaction Server
• Provides a framework for deploying the
  middle-tier logic of distributed component-based
  applications
• This is the middleware for a distributed
  application
• Repository for business logic

50
Configure Jaguar

• Configuring Jaguar
• If Jaguar is not set up as a service, start it
• Start the Jaguar Manager
• Connect to Jaguar
• Tools/Connect/Jaguar Manager
• Default connection information
• User Name jagadmin
• No password
• Host Name localhost
• Port Number 9000

51
Configure Jaguar
52
Configure Jaguar

• Under packages, check if the DataWindow package
  exists
• HTMLGenerator component
• If not, install the existing package DataWindow
• RMB on Packages and select New Package
• If you are using the standard Web DataWindow
  option, that is all you need to do
• You can customize this package to add additional
  functionality
• This will be covered later in detail
• The location of the PBL(s) that will be used must
  exist in the system path

53
Configure Jaguar
Methods/functions
54
Configure Jaguar

• One final note
• Turn off instance pooling for the HTMLGenerator
  component in Jaguar while in development
• This will allow you to change the object in
  PowerBuilder and test it at the same time
• If not disabled, you will need to shut down
  Jaguar in order to save the DataWindow object in
  PowerBuilder
• Turn it on before deployment for better
  performance
• Note There are still times when Jaguar will
  lock the PBL even with instance pooling turned
  off.

55
Configure PowerDynamo
56
Configure PowerDynamo

• First, what is PowerDynamo?
• HTML page server
• Its purpose is to dynamically generate HTML pages
• Typically this is done via SQL statements
• It is also used in conjunction with the
  application server, Jaguar, to call component
  methods

57
Configure PowerDynamo

• Creating a site
• Use Sybase Central, Tools, Configuration Profiles
• This displays the list of created profiles
• Click New to create a new profile

58
Configure PowerDynamo

• After the new button is clicked
• Enter the connection profile name
• Select the type (PowerDynamo or ASA)

59
Configure PowerDynamo

• The next window specifies the connection type and
  specifics
• Connection type
• ODBC, stores the web site in an ODBC database
• Open client, stores the web site in an open
  client database
• Dynamic File, stores the web site in a file
  directory
• Dynamic file is the preferred, and best
  performing
• Choose the path to the site as shown on the next
  slide

60
Configure PowerDynamo
61
Configure PowerDynamo

• At this point, the connection profile has been
  created
• The site will not be created until it is
  connected for the first time

62
Configure PowerDynamo

• Several settings you should be aware of
• These are found in Sybase Central, under
  PowerDynamo, Utilities, Configuration
• Default General Settings
• Java VM, make sure the default general settings
  section has the Sun Java VM chosen
• This is because we will create an instance of a
  Java component that exists in Jaguar
• Connection timeout (minutes)
• This indicates how long the PowerDynamo database
  connections will stay active before timing out

63
Configure PowerDynamo

• Default General Settings cont.
• Cookie timeout (minutes)
• How long the session remains active if no
  activity occurs
• It is implemented with cookies

64
Configure PowerDynamo
65
Configure PowerDynamo

• Mappings
• These indicate which web site the browser is
  indicating
• http//localhost/ctpsite/index.html
• ctpsite is the mapping

66
Configure PowerDynamo
67
Configure PowerDynamo

• Creating a mapping
• PowerDynamo, Utilities, Configuration, Mappings
• Click on Add Mapping

68
Configure PowerDynamo
69
Configure PowerDynamo

• URL Prefix for browsers to reference
• Make sure to prefix this with slash (/)
• Select the type of site
• Database, dynamic file, static file
• Select the site the mapping refers to
• This is either a datasource or a directory where
  the site was create
• The following settings are rarely changed
• Maximum size of the document cache
• Maximum size of the Java class
• Classpath for the mapping

70
JavaScript Coding Basics
71
JavaScript Coding

• Now that the pieces have been configured, we need
  to pull these pieces together with code
• We use PowerDynamo to write JavaScript code
• This is actually DynaScript which is a subset of
  JavaScript
• One note about JavaScript before starting
• It is case sensitive!!
• dwlocal is different than dwLocal

72
JavaScript Coding

• Another note before starting
• The examples in the EAStudio help files uses
  dwMine as the reference to the server component
  as well as the client-side HTML object name
• This is confusing
• Come up with a naming standard for your
  application
• CTP recommends the following
• dwServer or dwLocal represents the server
  component
• dwMine represents the client-side HTML object name

73
JavaScript Coding

• A basic DataWindow can be coded with as little as
  5 lines of JavaScript code
• Naturally, production code requires proper error
  checking
• Steps
• Create an instance of the Jaguar component
• Pass the PBL and dataobject to the component
• Pass the database connection information to the
  component
• Retrieve the information
• Generate the HTML

74
JavaScript Coding

• dwLocal java.CreateComponent("DataWindow/HTMLGene
  rator","iiop//localhost9000","jagadmin", ")
• dwLocal.SetDWObject ("eas_training.pbl","d_departm
  ent")
• dwLocal.SetTrans("ODBC","ConnectString'DSNEAS
  Demo DB V3UIDdbaPWDsql'", "", "", "", "", "")
• dwLocal.Retrieve()
• document.Write(dwLocal.Generate())

75
JavaScript Coding

• What does each line of code do?
• We will dissect each line of code
• This will include each piece of each line
• This is an advanced class!!

76
JavaScript Coding

• Line 1
• dwLocal java.CreateComponent("DataWindow/HTMLGen
  erator", "iiop//localhost9000", "jagadmin",
  "")
• Creates a Java instance of a Jaguar component
• dwLocal is the local variable that is created
  which identifies the instance
• java indicates this will be a Java instance
• CreateComponent is the DynaScript method call
• DataWindow/HTMLGenerator is the Jaguar
  package/component
• iiop//localhost9000 specifies the protocol,
  machine name and port
• jagadmin is the Jaguar password
• The Jaguar password is empty

77
JavaScript Coding

• Line 2
• dwLocal.SetDWObject ("eas_training.pbl","d_departm
  ent")
• Specifies the PBL and dataobject
• eas_training.pbl is the PowerBuilder library to
  use
• d_department is the dataobject name

78
JavaScript Coding

• Line 3
• dwLocal.SetTrans("ODBC","ConnectString'DSNEAS
  Demo DB V3UIDdbaPWDsql'", "", "", "", "", "")
• Specifies the database connection information
• Different arguments are passed based on the
  database
• dwLocal references our component
• SetTrans is the Jaguar component method call with
  the following arguments
• Database Management System (DBMS)
• Database parameters (dbParm)
• Lock, LogID, LogPass
• Database, Servername

79
JavaScript Coding

• Line 4
• dwLocal.Retrieve()
• Retrieves the data on the Jaguar server
• dwLocal references our component
• Retrieve is the component method call to retrieve
  the data
• No arguments for this method

80
JavaScript Coding

• Line 5
• document.Write(dwLocal.Generate())
• This generates the HTML and applies it into our
  browser
• document is an attribute of an HTML page
• Write is an HTML method that indicates to display
  text into the browser
• dwLocal references our component
• Generate is the component method call to generate
  the HTML for the data
• No arguments for this method

81
Web DataWindow Lab 1
82
Web DataWindow Lab 1

• Take 60 minutes to complete the first lab
• Create a DataWindow
• Verify the Jaguar settings
• Verify the PowerDynamo settings
• Create a simple Web DataWindow script to do a
  simple data retrieval
• The directions are located in the lab workbook
• Page 1

83
Advanced JavaScript Coding
84
Advanced JavaScript Coding

• The previous section reviewed some basic
  JavaScript functionality
• This section will look at more JavaScript coding
  including the following
• Error handling
• More HTMLGenerator component methods
• Some browser events

85
Advanced JavaScript Coding

• Error handling
• The webdw_5lines.html script had no error
  handling
• Naturally, this is not a good idea in a
  production system
• DynaScript functions and Jaguar component methods
  can have return values just like functions in any
  language
• Use these return values to make sure something
  was successful before processing continues
• Determine how you want your application to act
  when an error occurs. Some examples
• Display an alert message
• Jump to an error page

86
Advanced JavaScript Coding

• The DynaScript function CreateComponent returns a
  variable of the type being created
• The following code checks if the component was
  created and if not, displays an error to the
  screen
• GetErrorInfo gets the error code from the site
• document.Write displays information to the screen
• dwLocal java.CreateComponent("DataWindow/HTMLGen
  erator", "iiop//localhost9000", "jagadmin", "",
  "DataWindow/HTMLGenerator")
• if (dwLocal null)
• jagError site.GetErrorInfo ()
• ls_msg "Error creating Jaguar component.
  jagError ltBRgt\n
• document.Write (ls_msg)

87
Advanced JavaScript Coding

• Retrieve is a method from the Jaguar component
• This returns the same as the PowerScript Retrieve
  function
• It actually is the PowerScript Retrieve function!
• It returns the number of rows retrieved
• The following code writes an informational
  message to the screen if no rows are retrieved
• retVal dwLocal.Retrieve()
• if (retVal 0)
• document.Write(No records retrieved. ltBRgt\n)

88
Advanced JavaScript Coding

• Browser window events
• In browsers, just like a windows program, events
  fire at certain times
• One event is the window.onload event
• This event fires each time the window is loaded
• One example of something that can be done during
  this event is to insert an empty record into a
  DataWindow
• ltBODY languageJavaScript onload"if
  (dwMine.RowCount() 0)dwMine.InsertRow(0)"gt

89
Changing The SQL Statement
90
Changing The SQL Statement

• A PowerBuilder developer will probably ask if you
  can alter the DataWindow characteristics
• Yes, definitely
• Notice on the Jaguar manager, for the
  HTMLGenerator component the familiar functions
• Describe
• Modify
• Retrieve

91
Changing The SQL Statement
92
Changing The SQL Statement

• Use the Describe and Modify functions
• Just like in your PowerBuilder application
• As an example, lets add a where clause to a SQL
  statement
• First, when you save the DataWindow, switch to
  syntax mode
• If you do not do this, then doing
  Describe(DataWindow.Table.Select) returns
  PBSELECT
• This is because the transaction object has not
  been set
• Remember, you are connecting to the component
  server, not the database server

93
Changing The SQL Statement

• Write JavaScript code
• Get the existing SQL statement
• ls_sql dwLocal.Describe("DataWindow.Table.Select
  ")
• Declare a variable for quote
• var quote'\"'
• Add a where clause
• ls_wc where dept_id gt 300
• ls_mod "Datawindow.Table.Select quote
  ls_sql
• ls_mod ls_wc quote
• retVal2 dwLocal.Modify(sql)
• See webdw_where_clause.html for sample code

94
Changing The SQL Statement
95
Client-Side Events
96
Client-Side Events

• Can you trap DataWindow events on the client?
• Yes, definitely
• ButtonClicking
• ButtonClicked
• Clicked
• ItemChanged
• ItemError
• ItemFocusChanged
• RowFocusChanged
• RowFocusChanging
• UpdateStart

97
Client-Side Events

• How, by doing several things
• Create a reference to the DataWindow for
  JavaScript coding
• Specify this in either
• The DataWindow painter, HTML Generation tab,
  Objectname
• Script with the SetHTMLObjectName method
• dwLocal.SetHTMLObjectName(dwMine)
• Remember, this is case sensitive!
• Enable client events and client scriptable for
  the DataWindow
• Specify this in either
• The DataWindow painter, HTML Generation tab
• Script with the SetWeight method
• dwLocal.SetWeight(false,false,true,true,false)

98
Client-Side Events

• Add a client-side event tag in the script
• ltSCRIPT LanguageJavaScriptgt
• Define the events you want to trap
• Follow the naming convention
• function dwreference_eventname(arguments)
• Remember, we coded dwMine as the reference
• function dwMine_Clicked(row,objName)
• alert(client-side event)
• Have the same arguments as they do in a
  DataWindow control placed on a window

99
Client-Side Events

• Here is some client side scripts for events
• Each issues an alert JavaScript function (similar
  to MessageBox in PB)
• ltSCRIPT LanguageJavaScriptgt
• function dwMine_ButtonClicking(row,objName)
• alert("ButtonClicking(" row ","
  objName ")\n")
• function dwMine_ItemChanged(row, colName,
  newValue)
• alert("ItemChanged(" row "," colName
  "," newValue ")\n")
• lt/SCRIPTgt

100
Client-Side Events

• Notice the tag
• ltSCRIPT LanguageJavaScriptgt
• This indicates client-side JavaScript will be
  included in the HTML
• The server will include this code, as is, at the
  end of the generated HTML
• Remember to end the tag
• lt/SCRIPTgt
• All lines from the tag beginning to the end of
  the tag will be included in the generated HTML
• See webdw_client_events.html for sample code

101
Client-Side Events

• Which DataWindow functions are implemented with
  the Web DataWindow
• AcceptText DeletedCount DeleteRow
• GetClickedRow GetClickedColumn GetColumn
• GetNextModified GetRow GetItem
• GetItemStatus InsertRow ModifiedCount
• Retrieve RowCount ScrollFirstPage
• ScrollLastPage ScrollNextPage
  ScrollPriorPage
• SetItem SetColumn SetRow
• SetSort Sort Update
• These events reload the page

102
Web DataWindow Lab 2
103
Web DataWindow Lab 2

• Take 60 minutes to complete the second lab
• Add error handling to a template
• Verify return values from method calls
• Add a where clause to the DataWindow before
  retrieving
• Trap client-side events
• Clicked
• Itemchanged
• The directions are located in the lab workbook
• Page 6

104
Linking
105
Linking

• How can we retrieve one DataWindow based on the
  contents of another
• This can be done with DataWindow attributes
• Link
• URL to link to (i.e. link_page.html)
• Link target
• This attribute is used to have master/detail on
  the same page
• Frame name where the URL should open in
• If no target is specified, a new page will open
• You can have multiple DataWindows on the same
  page
• If you do, remember to give them each a name with
  the SetHTMLObjectName method call

106
Linking
107
Linking

• Link arguments
• Field names and values to be passed to the detail
  page
• The expression must evaluate to a string
• idString(id)
• Multiple fields must follow the format shown
  below
• idString(id)sequenceString(seqn)
• Hit ltENTERgt with focus in the link argument field
  to validate the expression
• If the expression is invalid, a message will
  appear in red background color in the MicroHelp
  line

108
Linking
109
Linking

• Create a master DataWindow
• Retrieve the sales_order table
• Add a where clause to retrieve a certain customer
• There are too many records in this table to
  retrieve all of them into 1 page
• Place a link on a column or computed field
• webdw_sales_order_items.html
• Pass a single argument
• Named order_id
• Pass the id column as the value

110
Linking
Link to the detail page on the gif
111
Linking

• Set up a retrieval argument on the detail
  DataWindow
• Create the detail web page
• webdw_sales_order_items.html
• This is like any other Web DataWindow page
  created with JavaScript
• The only difference is that the RetrieveEx()
  method is used instead of Retrieve()
• This issues a retrieve with a retrieval argument
• retVal dwLocal.RetrieveEx(document.value.order_i
  d)
• document.value.order_id is the passed value which
  is part of the active page or document

112
Linking
113
Linking

• What if we want the details on the same page?
• Use HTML frames
• A frame divides the window into sections
• Each section is a target and can be treated
  like a separate window
• ltHTMLgt
• ltHEADgtlt/HEADgt
• ltFRAMESET SCROLLINGNO COLS"50,50" border10 gt
• ltFRAME NAMEleft SRC"webdw_sales_order.html" gt
• ltFRAME NAMEright SRC"webdw_sales_order_items.htm
  l" gt
• lt/FRAMESETgt
• lt/HTMLgt

114
Linking
Notice the error on the detail frame
115
Linking

• Notice the error on the detail page, right frame
• Warning undefined variable document.value.order_i
  dorder_id near line 32 in "/webdw_sales_order_it
  ems.html"
• It is expecting an argument to be passed
• Initially it is not passed because you need to
  click on the link on the master DataWindow
• We can correct this error by checking to see if
  that variable exists
• if ! exists(document.value.order_id)
• return

116
Linking
117
Linking

• Now that the error is gone in the right frame,
  click on the link to load the detail page
• Notice on the following slide that the detail
  loads in the left side of the frame
• This is because a target was not specified
• Without a target, the page is loaded in the
  active window

118
Linking
119
Linking

• This is corrected with the Link Target attribute
  on the master DataWindow
• Specify the frame name where to load the link
  window
• In our frame HTML, we called the frame
• right
• ltFRAME NAMEright SRC"webdw_sales_order_items.htm
  l" gt
• It is identified with the NAME tag

120
Linking
121
Linking
122
Linking

• What if you dont know how to create a frame set
  with HTML?
• Use PowerSite
• It has a wizard that lets you draw the frames
• The HTML is generated for you
• After we review how to create frames with
  PowerSite, we will enhance our example to have 3
  DataWindows on 1 screen
• Orders
• Items
• Product description

123
Linking

• The assumption is that PowerSite is configured on
  your machine
• Choose File/New to open the wizard
• Select Frame Set

124
Linking

• Step through the wizard and answer the questions
• Project, select the current project

125
Linking

• Enter the name of the frame

126
Linking

• Use the buttons to split the screen and create as
  many frames as you want
• Name each frame
• Size each frame

127
Linking

• After the frame code is generated, you can modify
  it
• With PowerSite
• Manually with PowerDynamo
• ltHTMLgt
• ltHEADgt lt/HEADgt
• ltFRAMESET COLS"33,33,"gt
• ltFRAME NAMEleft SRC"webdw_sales_order.html"gt
• ltFRAME NAMEmiddle SRC"webdw_sales_order_items
  .html"gt
• ltFRAME NAMEright SRC""gt
• lt/FRAMESETgtlt/HTMLgt

128
Linking

• Adding a third DataWindow on the screen
• The screen we created currently has 2 DataWindows
  on the screen
• Orders
• Items
• Now lets add a third DataWindow
• Product description

129
Linking

• First, create a DataWindow from the product table
• Display the fields you want to see
• Retrieval argument of id
• Second, create a template in PowerDynamo to
  display the DataWindow
• webdw_product.html
• This will be almost identical to
  webdw_sales_order_items.html

130
Linking

• Third, create a frame set to display all three
  DataWindows
• f_second.html
• ltHTMLgt
• ltHEADgt lt/HEADgt
• ltFRAMESET COLS"33,33,"gt
• ltFRAME NAMEleft SRC"webdw_sales_order.html"gt
• ltFRAME NAMEmiddle SRC"webdw_sales_order_items.ht
  ml"gt
• ltFRAME NAMEright SRC"webdw_product.html"gt
• lt/FRAMESETgt
• lt/HTMLgt

131
Linking

• Fourth, change the link from the sales order
  DataWindow to point to the middle frame as the
  target
• Link Target middle
• Fifth, add a link on the item DataWindow
• webdw_product.html
• Target of right
• Argument product_idString(prod_id)

132
Linking
133
Linking

• One quick note before the lab
• If any resources like pictures do not show up in
  the browser, they must be added into the web site
• RMB on the site and choose Import
• Do file browse, and select the file(s) to import

134
Web DataWindow Lab 3
135
Web DataWindow Lab 3

• Take 60 minutes to complete the second lab
• Create a master/detail application
• First, display the data on separate screens
• Second, display the data on the same screen
• Third, add a third section on the same screen
• The directions are located in the lab workbook
• Page 16

136
Server-Side Events
137
Server-Side Events

• PowerBuilder developers need to start thinking
  differently about web development
• Thin client applications function differently
  than rich GUI applications
• Server-side events are used when functionality
  needs to occur on the server
• Remember, this is the component server, not the
  database server
• Also, any server-side processing will refresh the
  current HTML page

138
Server-Side Events

• Server-side events
• Used to perform complex validation that cannot be
  done with DataWindow validation rules
• As an example, consider validating a customer
  number to make sure it exists in the customer
  master table
• As another example, I want to set the primary key
  field for new records
• This cannot be done with client-side validation

139
Server-Side Events

• This is done with service classes
• PowerBuilder custom class user objects
• Inheritance can be used!
• They must exist in the same PBL or PBD as the
  DataWindow object for the server component
• Implements user defined events with predefined
  signatures which correspond to standard
  DataWindow events
• Validate the data and specify the return code
  that tells the server component whether to cancel
  the event

140
Server-Side Events

• Server-side events
• The events have the same arguments as standard
  DataWindow events followed by an argument of
  DataStore
• The events and arguments are listed on the
  following slide

141
Server-Side Events

• DBError (long SQLDBCode, string SQLErrText,
  string SQLSyntax, DWBuffer buffer, long row,
  DataStore ds)
• HTMLContextApplied (string action, DataStore ds)
• RetrieveEnd (DataStore ds)
• RetrieveStart (DataStore ds)
• SQLPreview (SQLPreviewFunction request,
  SQLPreviewType sqltype, string sqlsyntax,
  DWBuffer buffer, long row, DataStore ds)
• UpdateEnd (long rowsinserted, long rowsupdated,
  long rowsdeleted, DataStore ds)
• UpdateStart (DataStore ds)

142
Server-Side Events

• First, add a property to the component in Jaguar.
  This is done in the Jaguar Manager
• com.sybase.datawindow.serverServiceClasses
• Second, set the value to the names of the user
  objects separated by semicolons
• nv_1nv_2
• You can also call a function in JavaScript to set
  the server classes
• This is the preferred method in case you want to
  use different service classes for different
  DataWindows
• dwLocal.SetServerServiceClasses(nv_1nv_2)
• Finally, write your business logic into the NVO(s)

143
Server-Side Events

• As an example, create an updateable DataWindow
  for the department table
• New and Update buttons
• Protect the dept_id field so it cannot be entered

144
Server-Side Events
145
Server-Side Events

• In the JavaScript code, you must call the
  SetAction method in order for an update to occur
• Note that a message will appear if an error
  occurs
• var dwLocal_action GetParam("dwMine_action")
• var dwLocal_context GetParam("dwMine_context")
• if ("undefined" ! "" dwLocal_action)
• retVal Local.SetAction(dwLocal_action,dwLocal_co
  ntext)
• if (retVal ! 1)
• document.Write("An update error has
  occurred.")

146
Server-Side Events

• GetParam is a function that is placed in the
  JavaScript code
• It gets the action and context from the Web
  DataWindow
• lt!--SCRIPT
• function GetParam( envparam )
• for (el in document.value)
• if (el envparam)
• return document.valueenvparam
• return "undefined"

147
Server-Side Events

• The service class datastore events will fire on
  the server
• Use the UpdateStart event to set the primary key
  before the update occurs
• The following slide has code for the UpdateStart
  event to set the dept_id field in the department
  table
• It assumes that is the only DataWindow being
  processed
• One hundred is added to the maximum dept_id to
  get the new key

148
Server-Side Events

• long ll_id
• datastore lds_1
• lds_1 create datastore
• lds_1.dataobject "d_max_dept_id"
• lds_1.SetTrans(SQLCA)
• if SQLCA.DBHandle() lt 0 then
• Connect Using SQLCA
• end if
• ll_tot ds.RowCount()
• FOR ll_cnt 1 to ll_tot
• if ds.GetItemStatus(ll_cnt,0,Primary!) ltgt
  NewModified! then CONTINUE
• lds_1.Retrieve()
• ll_id lds_1.GetItemNumber(1,"compute_0001")
• if isNull(ll_id) then ll_id 0
• ll_id 100
• ds.SetItem(ll_cnt,"dept_id",ll_id)
• NEXT

149
Web DataWindow Lab 4
150
Web DataWindow Lab 4

• Take 60 minutes to complete the fourth lab
• Create a DataWindow that has update capabilities
• Protect the key field(s) from entry
• Use a Service Class DataStore to set the key
  field(s) for any new records
• The directions are located in the lab workbook
• Page 29

151
Other Configurations
152
Other Configurations

• This section is used to cover other topics
  related to Web DataWindows
• Build a report criteria screen
• Lets build another real world example
• This is functionality that many applications need
• PowerDynamo import statement
• This is used to promote code reuse
• Automatically linking to another page upon a
  successful update
• This is a common practice in web processing

153
Other Configurations

• Report criteria screen
• Build a tabular DataWindow to list customers
• No where clause
• We will add it at runtime
• Use an external DataWindow to enter criteria
• Enter city, state, and zip code
• The arguments are passed with client-side
  JavaScript
• The reason you cannot use link arguments in this
  case is that the arguments are evaluated when the
  DataWindow is generated
• At this point, the data has not been entered
• This has been requested as an enhancement for the
  Maui release

154
Other Configurations

• Client-side JavaScript to link with arguments
• Use the GetItem function to get the data
• Create the link
• ltSCRIPT LanguageJavaScriptgt
• function dwMine_Clicked(row, objName)
• if (objName "b_submit")
• value_city dwMine.GetItem(1,"city")
• value_state dwMine.GetItem(1,"state")
• value_zipcode dwMine.GetItem(1,"zipcode
  ")
• link "webdw_customer_report.html?city"
  value_city
• link "state" value_state
  "zipcode" value_zipcode
• document.location.href link
• lt/SCRIPTgt

155
Other Configurations
156
Other Configurations
157
Other Configurations

• DynaScript import statement
• This is not a Web DataWindow detail, however it
  is worth discussing so that people learn to reuse
  code as much as possible as soon as possible
• It helps to know this type of thing when you get
  started with PowerDynamo
• This imports the text from another script into
  the executing script
• Used to promote code reuse

158
Other Configurations

• An example
• When you create the HTMLGenerator component, it
  is usually the same syntax
• Why not place that code in 1 place so that it can
  be changed once if your configuration changes
• For example, when you deploy, it will most likely
  be to a different machine for Jaguar
• In every template or script that creates the
  component, the following line is coded
• dwLocal java.CreateComponent("DataWindow/HTMLGen
  erator", "iiop//localhost9000", "jagadmin",
  "")
• Naturally, this is to a local machine

159
Other Configurations

• Instead of coding that in each template or script
• Create an include script file named connect.ssc
• lt!--SCRIPT
• dwLocal java.CreateComponent("DataWindow/HTMLG
  enerator", "iiop//localhost9000", "jagadmin",
  "")
• --gt
• Place an import statement in any template or
  script that needs to create the component
• import connect.ssc" useContext
• useContext indicates the script to use the same
  program space as the calling template
• dwLocal will be available to the calling template

160
Cascading Style Sheets
161
Cascading Style Sheets

• A cascading style sheet is a way to enhance the
  abilities of HTML
• CSS defines how HTML should look in a browser
  window
• Caution Many CSS attributes are not supported
  by Netscape
• Define the characteristics of how you want an
  HTML page to look and include these
  characteristics in any HTML page without writing
  the same code in multiple places
• Some of the following characteristics are common
  things set in CSS
• Background color
• Background image
• Link colors (active, visited)

162
Cascaded Style Sheets

• How is this implemented
• Create a file with the extension of .CSS
• Place the characteristics you want in the file
• lt!--
• BODY
• background-image url(light_blue_background.jp
  g)
• alink text-decoration none color black
• avisited text-decoration none color black
  
• aactive text-decoration nonecolor blue
• ahover color blue
• --gt
• The above CSS specifies the background image and
  link characteristics for the BODY of the document

163
Cascaded Style Sheets

• This is specified in any HTML document that
  should use these characteristics
• ltHEADgt
• ltLINK RELStyleSheet HREF"datawindow.css"
  TYPE"text/css" MEDIAscreengt
• lt/HEADgt
• This imports the stylesheet into the HTML page

164
Cascaded Style Sheets

• How are these implemented with the Web
  DataWindow?
• First, the DataWindow has a checkbox for CSS and
  an attribute of CSS name
• HTML Table tab
• As of 4/30/2000 it has not been implemented
• Second, you can include the CSS in your
  JavaScript code before the Web DataWindow is
  generated
• Add the following line in the ltHEADgt section
• ltLINK RELStyleSheet HREF"datawindow.css"
  TYPE"text/css" MEDIAscreengt

165
Cascaded Style Sheets
Currently does not work!
166
Cascaded Style Sheets

• The following 2 slides are the menu created
  earlier in the class
• The first does not use CSS
• The second uses the CSS defined in earlier slides
• Note the background color
• Note the links
• Not underlined
• Color changes as the mouse passes over

167
Cascaded Style Sheets
168
Cascaded Style Sheets
169
Cascaded Style Sheets

• Now try this with Netscape
• Were the results the same?
• Netcape support for CSS properties is not nearly
  as good as Internet Explorer
• Check out the following site for a complete list
  of what works and what does not
• http//webreview.com/pub/guides/style/style.h