Web DataWindow

1
IA318Web DataWindow Design Considerations
Larry Cermak lcermak_at_ctpartners.com
2
Design Considerations

• 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
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!

6
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!

7
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!

8
Summary Of Course

• Purpose of This Presentation
• Use of Web DataWindows
• Cascading Style Sheets
• Internet Explorer vs Netscape Navigator
• What To Avoid
• What To Definitely Do
• Customizing the Component

9
Purpose of This Presentation
10
Purpose of This Presentation

• The intent of this presentation is to
• Discuss web design
• Design how to make DataWindows to adhere to this
  design
• Several key points that will be made
• Good design is mostly a matter of opinion
• Dont try to use a browser to mimic your
  client/server look and feel
• Browser processing is different that a
  client/server application
• Internet Explorer is different that Netscape

11
Purpose of This Presentation

• Good design is mostly a matter of opinion
• Everyone has opinions about what colors, fonts,
  sizes, images, etc. look good
• Everyone has opinions about scrolling up/down and
  left/right
• However, just as with a client/server
  application, consistency is important

12
Purpose of This Presentation

• Dont try to use a browser to mimic your
  client/server look and feel
• Windows applications are a rich GUI
• Browsers are limited to what HTML can do
• You also have to be concerned about the size of
  the HTML download that is generated with each
  page
• Do all the computers that will be accessing your
  web application have fast T1 connections?
• Will the computers be using dial-up connections?
• If you travel enough you find out that some areas
  of the country have slow dial-up speeds, 28K for
  example
• If you create a 500K HTML page how long will it
  take to load?
• I have been teaching and recommending that nobody
  should wait more than a few seconds for any page
  to load, windows application or browser

13
Purpose of This Presentation

• Browser processing is different that a
  client/server application
• One of the biggest differences is that the
  browser does not have a database connection
• You cannot call anything that goes to the
  database without doing a round-trip to the server
• This is a performance consideration
• Service-Classes are how Sybase designed the Web
  DataWindow
• This is a PowerBuilder NVO with predefined events
  that fires on the server when action is applied
• UpdateStart, RetrieveStart, RetrieveEnd, etc.

14
Use of Web DataWindows
15
Use of Web DataWindows

• Just because Sybase has given us this tremendous
  technology does not mean we have to use it
  everywhere!

16
Use of Web DataWindows

• Something to consider is when to use DataWindows
  to build web applications and when not to not use
  them
• There is no correct answer for this question
• It depends on several things
• The application you are building
• The type of functionality necessary
• Design standards
• Remember that you do not have to build an entire
  application of Web DataWindows
• Sometimes a simple PowerDynamo script is all that
  is necessary

17
Use of Web DataWindows

• Some recommendations for when NOT to use a Web
  DataWindow
• To display static text
• To display a simple database query with basic
  formatting
• If you want to be able to use functionality that
  has to do with browser events that are not yet
  implemented with the Web DataWindow
• For example, mouseover and mouseout
• The following screens show mouseover
  functionality to display a text message about a
  status
• It was not implemented with a DataWindow for this
  reason

18
Use of Web DataWindows
19
Use of Web DataWindows
Displayed as the mouse passes over the status
20
Use of Web DataWindows

• Some recommendations for when NOT to use a Web
  DataWindow
• If you want to embed HTML tags in text for such
  things as formatting
• ltBRgt as an example
• The generator overrides these tags, so they are
  not useful in the output
• This feature was added in release 7.02 C3 which
  is discussed in the Advanced Web DataWindows
  presentation

21
Use of Web DataWindows

• Some recommendations for when TO use a Web
  DataWindow
• You want to move an existing PowerBuilder
  application to the web
• Be careful, dont assume every DataWindow will
  look nice in a browser
• Remember browser applications process differently
  than Client/Server applications
• This will probably require design changes
• Data entry screens
• The DataWindow is easier than writing the HTML
  yourself
• It is also easier to interface with the database
• Queries

22
Cascaded Style Sheets
23
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

24
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

25
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

26
Cascaded Style Sheets
27
Cascaded Style Sheets
28
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.html

29
Cascaded Style Sheets

• OK, so how can I implement things like background
  color and images in Netscape?
• As an example, how can we implement all our
  screens use the same background color?

30
Cascaded Style Sheets

• First, you must determine the browser type
• Check for Internet Explorer, if not assume it is
  Netscape
• Use the PowerDynamo GetServerVariables method to
  get the browser type
• Remember, this gives the complete type, it does
  not say Microsoft or Netscape
• btypedocument.GetServerVariable("HTTP_USER_AGENT"
  )
• See if the characters MSIE exist in the browser
  type string
• if (browser_type.indexOf("MSIE") lt 0)
• //take appropriate action or set session
  variable

31
Cascaded Style Sheets

• Second, if it is not MSIE, write out a body tag
• document.write("ltBODY bgcolor0033CCgt" )
• This tag is dynamically written into your
  JavaScript code before the Web DataWindow is
  generated
• Since this is server-side JavaScript, you can do
  things like
• Read the setting(s) from a file
• Read the setting(s) from the database

32
Cascaded Style Sheets

• if (browser.indexOf("MSIE") lt 0)
• document.write('ltBODY bgcolor9999FFgt')
  
• else
• document.write('ltBODY backgroundred.jpg"
  gt')

33
Cascaded Style Sheets
34
Cascaded Style Sheets

• You can use images as background in Netscape as
  well, but not with CSS
• if (browser.indexOf("MSIE") lt 0)
• document.write('ltBODY background"clouds.j
  pg"gt')

35
Cascaded Style Sheets
36
Cascaded Style Sheets

• One last thing to remember, and it is VERY
  important!
• Dont code the logic to check for the browser
  type everywhere
• Code it somewhere early in your application and
  store it in the session
• Just as with object oriented programming, put the
  code in 1 place for easy maintenance

37
Internet Explorer vs Netscape Navigator
38
IE vs Netscape

• When designing web applications, dont do all
  your design and testing on 1 browser and expect
  it to work on the other
• I have done EXTENSIVE work making applications
  work well in both browsers
• You can make it look OK in Netscape without
  customization of the component, but it takes a
  lot of playing with the DataWindows
• The CTP component allows customizing the
  generated HTML for Netscape!
• This took a lot of time and effort!

39
IE vs Netscape

• Some differences
• Scripting
• IE is much more forgiving
• Absolute positioning
• Not supported in Netscape how it was implemented
• Height and width attributes
• Not supported in Netscape how it was implemented
• Can be customized (with great effort)!
• Netscape implemented with tables
• Not the best implementation for Netscape
• Hopefully it will get better with the Maui
  release
• Tabbing to dropdown DataWindow columns
• Does not work in IE (fixed in PB 7.02, build 8022)

40
IE vs Netscape

• The following items are not in any particular
  order
• Tabbing between fields skips dropdown datawindows
  in IE (fixed in PB 7.02, build 8022)
• Works fine in Netscape
• Dropdown datawindows position better in Netscape
  so more data is displayed in list
• HTML is not generated correctly for IE4
• Due to absolute positioning
• Sybase will not be fixing this, only supports IE5
• Netscape needs to be 4.x or better

41
IE vs Netscape

• Expressions confuse the HTML generated for
  Netscape
• Protected
• Visible
• Width/Height
• This will sometimes cause you to have multiple
  DataWindows for the same object
• I have only had to do this with a handful of
  objects at all the client sites I have done
• Expressions are fine in IE

42
IE vs Netscape

• You need to have at least 1 editable field in
  order for client-side events to fire
• You can have 1 display only field with a tab
  order
• IE will allow you to place a field under the band
  or with an expression of 0 width and height and
  it will not display in the generated HTML
• Netscape will display these fields

43
IE vs Netscape

• You cannot place a field smaller than its
  database size on the screen with Netscape
• It will make it the size it thinks correct
• For example, if you have a char(10), you cannot
  make it have a very small width
• Vertical spacing is poor with Netscape
• IE displays as it looks in the DataWindow painter
• Netscape spreads the fields quite far vertically
• Customization can help this somewhat
• Buttons placed on a DataWindow generate as
  different sizes in IE and Netscape

44
IE vs Netscape
45
IE vs Netscape
46
IE vs Netscape

• IE does not move up empty space in text fields
• So if you have a char(300) column and you display
  a specific message followed by a button it will
  look differently

47
IE vs Netscape
48
IE vs Netscape
49
IE vs Netscape

• A busy freeform DataWindow is difficult to get to
  work in both
• IE looks pretty much the same as in the painter
• Netscape needs work. Sometimes changing the
  spacing or width of a column will affect the
  positioning of columns on the same line or
  different lines.
• As Ive already mentioned several times if you
  spend the time and analyze the HTML you can parse
  it and make adjustments

50
IE vs Netscape

• Netscape reloads pages from the web server better
  than IE
• IE seems to cache pages more frequently
• You must use meta tags to tell IE to reload the
  pages from the web server
• These should be placed in the beginning and end
  of the server-side script in the ltHEADgt tag
• ltMETA HTTP-EQUIV'Expires' CONTENT'0'gt
• ltMETA HTTP-EQUIV'Pragma' CONTENT'no-cache'gt
• ltMETA HTTP-EQUIV'Cache-Control'
  CONTENT'no-cache'gt

51
IE vs Netscape

• There are scripting differences
• www.irt.org is a good site to read about HTML and
  Javascript and these differences
• IE is more forgiving in terms of syntax and
  functionality
• In client-side script, if you want to capture the
  buttonclicked event and return to the previous
  page
• history.go(-1) only works in IE
• history.back() works in both IE and NS

52
IE vs Netscape

• One more time
• You can dissect the generated HTML by
  PowerBuilder and understand what it is doing
• It can be customized to fix some of the problems
• This opinion is from someone who has done it!
• This takes a lot of time and effort
• What happens when Sybase changes the generation?
• Ill talk about this more later

53
What To Avoid
54
What To Avoid

• Keep pages small
• The more data and text you display, the larger
  the HTML that is generated
• Dont make users wait a long time for screens to
  load
• More than a few seconds is too long in my opinion
• If you know all the clients accessing your
  application have fast connections, like an
  intranet, then it might not be as big of an issue
• If not, consider the users with 28.8K modems or
  those in parts of the country with slow dial up
  access lines

55
What To Avoid

• Dont just make 1 large page that the user
  scrolls down to enter all their information
• The following screen is a web site that has 1
  screen to enter all a users application
  information
• I only printed the first screen
• It scrolls down 6 pages
• Not much design was put into this page

56
What To Avoid
57
What To Avoid

• Horizontal scrolling
• Present everything to the user on the screen
• Do not make them grab the mouse and click to
  scroll horizontally to enter or view information

58
What To Avoid

• Test your screens in IE and Netscape as well as
  in different resolutions
• If you are on an intranet you can probably
  control these things
• If it is an e-commerce site you will have to
  support various configurations
• Dont use graphics heavily
• These have to download
• Remember those dial-up users

59
What To Avoid

• This was said earlier but it is worth repeating
• Do not try and recreate the GUI from your
  client/server application
• HTML does not have a tab control
• It can be simulated with images
• The drawback is that when each tab (image) is
  clicked on, a new page is loaded
• This is a performance problem
• HTML does not have a treeview control
• These can be created in DHTML (Dynamic HTML) and
  can be done without a trip to the server
• You will write this code, it will not be done
  with a DataWindow

60
What To Avoid

• Always avoid returning to the server frequently
• Learn the correct ways with JavaScript and DHTML
  to avoid this
• For example, if you are doing a mywhatever.com
  user configuration screen, only return to the
  server once they have made all their selections
• The following screen does this even when moving
  items to and from the selected and sorting up and
  down

61
What To Avoid
62
What To Avoid

• Yes it works in both IE and Netscape
• You thought you would catch me huh?

63
What To Avoid
64
What To Definitely Do
65
What To Definitely Do

• Review many web sites out on the Internet
• See what you and your team or company like and do
  not like
• Just like when you built your first PowerBuilder
  application, allow enough time to learn how to do
  web applications
• HTML
• JavaScript
• DHTML
• How long did it take you to learn object oriented
  programming at first?

66
What To Definitely Do

• Implement a portal approach
• This means to allow each user to customize their
  options
• Even if you only have a few options at first
• Some basic things
• What news and events to view
• Return to the last page when logging onto the
  site
• Present the users name when they log on
• This makes them feel important and its a great
  demo tool
• Users think its cool and behind the screens you
  and I know its simple to do

67
What To Definitely Do
Present the users name after logon
68
What To Definitely Do

• Use email for confirmation
• Site registration
• Order confirmation
• Other specific things for your application
• It is easy to send out email with the PowerDynamo
  mailpiece object
• You can place any text, links, and URLs into the
  email message
• What I do is use a database table to store the
  message text
• The following slide is a confirmation email where
  the content comes from a table
• Yes it is from my email because it was during beta

69
What To Definitely Do
70
What To Definitely Do

• How do you use the MailPiece object?
• Create an object of type Mail Piece
• Set the attributes
• Subject
• From
• Body (text)
• smtpHost
• Use the AddRecipient method to add a recipient to
  send the email to
• Use the Send method to send the email

71
What Definitely To Do

• mp new MailPiece()
• mp.subject TechWave2000
• mp.from info_at_ctpartners.com
• var lv_body
• lv_body This is a test message of several
  lines
• lv_body \nThis is the second line.
• lv_body \nthis is the thide line.
• mp.body lv_body
• mp.smtpHost email_smtphost
• mp.AddRecipient(email_address)
• if( !mp.Send() )
• // an error occurred, take appropriate action

72
What Definitely To Do
73
Customizing The Component
74
Customizing The Component

• What if the Web DataWindow does not do everything
  you need as is
• Create your own component
• Customize the HTMLGenerator component
• At least review the code provided to get some
  ideas of how it was architected

75
Customizing The Component

• What functionality is missing from the
  HTMLGenerator component?
• Loading dropdown DataWindows that have retrieval
  arguments
• Inserting a new record if no record is retrieved
• And passing default values for the new record
• Required field logic
• Insert a new record
• Setting static text
• Think about a title line that changes based on a
  condition
• Debugging
• Data Caching
• Other?

76
Customizing The Component

• Lets take one example and code it
• Loading dropdown DataWindows that have retrieval
  arguments
• Since this is PowerScript code, it is simple
• Open the nv_remote_datawindow object
• Create a new function, of_load_dddw
• 5 string arguments
• s_column, column name to load
• s_argument1, argument for the dddw
• s_argument2, argument for the dddw
• s_argument3, argument for the dddw
• s_filter, in case a filter for the dddw is needed
• returns int (1success, -1fail)

77
Customizing The Component

• DataWindowChild ldwc_1
• int li_rtn
• long ll_tot
• ids_datastore.GetChild(s_column,ldwc_1)
• ldwc_1.SetTrans(SQLCA)
• if ldwc_1.Retrieve(s_arg1,s_arg2,s_arg3) -1
  then
• li_rtn -1
• else
• li_rtn 1
• // if no records returned, then insert an empty
  one so they are not prompted
• ll_tot ldwc_1.RowCount()
• if ll_tot 0 then ldwc_1.InsertRow(0)
• end if
• //
• // if filter passed, apply it
• //
• if Trim(s_filter) ltgt "" AND Lower(s_filter) ltgt
  "null" then
• ldwc_1.SetFilter(s_filter)

78
Customizing The Component

• After the customization is complete, you need to
  deploy the new component
• Create a Jaguar component generator project
• Set the various attributes for the component
  based on your business rules
• Change the package and component name
• Package name, Web_DataWindow
• Component name, Web_HTMLGenerator
• Now review the new component in the Jaguar
  Manager
• Notice the method names are all lower case
• As mentioned earlier, if you want the case
  maintained, you have to edit the idl yourself

79
HTMLGenerator component
80
Web_HTMLGenerator component
81
Customizing The Component

• After the component has been created, you must
  create the stubs
• This is done from Jaguar Manager
• RMB on the package name
• Choose Generate Stub/Skeleton
• Select Generate Stubs Java Stubs
• This is because we did a java.CreateComponent to
  create the component from PowerDynamo

82
Customizing The Component
83
Customizing The Component

• The Java stubs must be compiled
• The .java files are created in a directory
  structure where Jaguar is installed
• d\sybase\Jaguar CTS 3.0\html\classes\packagename
• javac is the Java compiler
• javac .java
• Make sure the classpath setting contains the
  following path or it will not compile
• d\sybase\Jaguar CTS 3.0\html\classes
• A successful compile is indicated with no
  messages, the prompt comes back

84
The Generated HTML

• Currently there is little customization you can
  do to the generated HTML
• Basic table attributes (border, cell spacing,
  etc.)
• Events, scripting, validation
• Can you do anything about this?
• Of course or I would not have asked
• Do I recommend it?
• Yes, with caution!

85
The Generated HTML

• Most changes to the HTML are for Netscape
• Every client I have visited since the Web
  DataWindow was introduced said they have to
  support IE and Netscape
• Until the Netscape HTML does NOT use tables, this
  is the only way to make the screens look better
• Unless you write your own generator

86
The Generated HTML

• Take a look at the generated HTML
• Sybase has placed a disclaimer there saying that
  they are not responsible if you alter the
  generated HTML
• I MUST POINT THIS OUT!!!

87
The Generated HTML
88
The Generated HTML

• One of the easiest settings to adjust is the
  table width
• This will help text labels be wider and align
  better
• Another setting that helps by removing it is the
  line to define the columns
• Doing this and the table width help align
  freeform DataWindows in Netscape

89
This is the unchanged HTML
90
This is the altered HTML
91
The Generated HTML

• What do we look for in the HTML to change?
• To change the width, search the HTML for
• ltTABLE CLASS
• Then find WIDTH and replace the value with a
  width you specify
• WIDTHxxx, as an example, WIDTH500
• The width will always be 3 characters in length

92
The Generated HTML

• What do we look for in the HTML to remove the
  column width settings
• Find the line by searching for
• ltTRgtltTD WIDTH
• Once you find that, search for
• lt/TRgt
• Replace the entire section, inclusively with
  spaces

93
The Generated HTML

• These are 2 simple things you can do to make the
  Netscape screens look better
• You can also alter things or add options such as
• COLSPAN
• ROWSPAN
• WIDTH (columns only)
• What this takes is reviewing the generated HTML,
  understanding it, and then writing code to alter
  it
• Yes it can all be done with PowerBuilder !

94
Questions

• Any questions
• Web DataWindow?
• PowerBuilder?
• PowerDynamo?
• Jaguar?
• PowerSite?
• JavaScript?
• Microsoft IE vs Netscape?
• Other?
• Comments
• About the course
• About the Sybase products

95
Thank You

• lcermak_at_ctpartners.com
• www.ctpartners.com
• 630 428-2650
• Web DataWindow Training
• Can be customized
• EAServer Training
• Consulting/Mentoring