1 / 95

IA318 Web DataWindow Design Considerations

IA318 Web DataWindow Design Considerations. Larry Cermak lcermak@ctpartners.com. Larry Cermak 630 428-2650 lcermak@ctpartners.com www.ctpartners.com. Design Considerations. VP of Technology, Corporate Technology Partners, Inc. Member of Team Sybase

thyra
Download Presentation

IA318 Web DataWindow Design Considerations

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. IA318Web DataWindow Design Considerations • Larry Cermak • lcermak@ctpartners.com

  2. Larry Cermak 630 428-2650 lcermak@ctpartners.com www.ctpartners.com Design Considerations

  3. 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 About Your Instructor

  4. I believe in the KISS methodology (K)eep (I)t (S)imple (S)tupid About Your Instructor

  5. 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! Introduction

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

  7. 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! Who Is In Attendance

  8. 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 Summary Of Course

  9. Purpose of This Presentation

  10. 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 Don’t 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 Purpose of This Presentation

  11. 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 Purpose of This Presentation

  12. Don’t 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 Purpose of This Presentation

  13. 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. Purpose of This Presentation

  14. Use of Web DataWindows

  15. Just because Sybase has given us this tremendous technology does not mean we have to use it everywhere! Use of Web DataWindows

  16. 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 Use of Web DataWindows

  17. 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 Use of Web DataWindows

  18. Use of Web DataWindows

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

  20. Some recommendations for when NOT to use a Web DataWindow If you want to embed HTML tags in text for such things as formatting <BR> 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 Use of Web DataWindows

  21. Some recommendations for when TO use a Web DataWindow You want to move an existing PowerBuilder application to the web Be careful, don’t 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 Use of Web DataWindows

  22. Cascaded Style Sheets

  23. How is this implemented Create a file with the extension of .CSS Place the characteristics you want in the file <!-- BODY { { background-image: url(light_blue_background.jpg) } a:link {text-decoration: none; color: black } a:visited {text-decoration: none; color: black } a:active {text-decoration: none;color: blue } a:hover {color: blue} } --> The above CSS specifies the background image and link characteristics for the BODY of the document Cascaded Style Sheets

  24. This is specified in any HTML document that should use these characteristics <HEAD> <LINK REL=StyleSheet HREF="datawindow.css" TYPE="text/css" MEDIA=screen> </HEAD> This “imports” the stylesheet into the HTML page Cascaded Style Sheets

  25. 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 Cascaded Style Sheets

  26. Cascaded Style Sheets

  27. Cascaded Style Sheets

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

  29. 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? Cascaded Style Sheets

  30. 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 btype=document.GetServerVariable("HTTP_USER_AGENT") See if the characters “MSIE” exist in the browser type string if (browser_type.indexOf("MSIE") <= 0) { //take appropriate action or set session variable } Cascaded Style Sheets

  31. Second, if it is not MSIE, write out a body tag document.write("<BODY bgcolor=#0033CC>" ); 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 Cascaded Style Sheets

  32. if (browser.indexOf("MSIE") <= 0) { document.write('<BODY bgcolor=#9999FF>'); } else { document.write('<BODY background=”red.jpg">'); } Cascaded Style Sheets

  33. Cascaded Style Sheets

  34. You can use images as background in Netscape as well, but not with CSS if (browser.indexOf("MSIE") <= 0) { document.write('<BODY background="clouds.jpg">'); } Cascaded Style Sheets

  35. Cascaded Style Sheets

  36. One last thing to remember, and it is VERY important! Don’t 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 Cascaded Style Sheets

  37. Internet Explorer vs Netscape Navigator

  38. When designing web applications, don’t 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! IE vs Netscape

  39. 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) IE vs Netscape

  40. 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 IE vs Netscape

  41. 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 IE vs Netscape

  42. 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 IE vs Netscape

  43. 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 IE vs Netscape

  44. IE vs Netscape

  45. IE vs Netscape

  46. 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 IE vs Netscape

  47. IE vs Netscape

  48. IE vs Netscape

  49. 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 I’ve already mentioned several times if you spend the time and analyze the HTML you can parse it and make adjustments IE vs Netscape

  50. 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 <HEAD> tag <META HTTP-EQUIV='Expires' CONTENT='0'> <META HTTP-EQUIV='Pragma' CONTENT='no-cache'> <META HTTP-EQUIV='Cache-Control' CONTENT='no-cache'> IE vs Netscape

More Related