Title: Arial 28pt'

1
PWB501 HTMLBridge - Moving a Client Server
Application to the Web
Franck Fasolin Application Development Division
Manager Fasolin_at_utac.com August 15-19, 2004
2
UTAC

• private laboratory, 250 staff, 30M revenue
• customers governement agencies, manufacturers,
  related industries
• skills
• agreement of road vehicles and equipment
• engine pollution efficiency
• noise, vibrations, electromagnetic emissions
• active and passive security
• others fluids, standards, certification

3
UTACs application farm

• Local network
• PowerBuilder Client/server applications
• Client/server C ERP applications
• HTML Intranet applications using ASP, ASP.NET,
  HTMLBridge
• Laptop
• Not connected PowerBuilder Client/server
  applications with database synchro
• Internet connected HTML Intranet applications
  using HTMLBridge.
• Extranet
• JSP/J2EE applications with SAS Software data
  mining solutions
• HTML applications using HTMLBridge
• www.utac.com
• HTML dynamic Web site using ASP

4
Franck Fasolin

• Been using PowerBuilder for 12 years
• Created many partner tools for PowerBuilder
  (commercial framework, security tool, translation
  tool, makeup tool)
• Created HTMLBridge 7 years ago

5
Creating a Web application

• Employees management Process
• 1- Search for employees
• 2- Display the resulting employee List
• 3- Display the employee Form

1
2
3
6
Creating a Web application

• The asp/jsp approach

Employee_search_srv
Employee_Query.xsp
Of_get_html_for_query_page() Of_search_for_employe
e(criterias) Of_get_html_for_employee_list()
Employee_list.xsp
Employee_form.xsp
Employee
Of_get_html_for_master_page(employee_data) Of_get_
html_for_detail_form() Of_get_html_for_tab_1_page(
) Of_get_html_for_tab_2_page() Of_save_employee()
Employee_save.xsp
7
Creating a Web application

• The Client/server approach

Employee_List_window
Employee_form_window
Dw_employee_list Search button Query button
Dw_employee_master Tab_employee Dw_tabpage_1 Dw_ta
bpage_2 Save button
Clicked for search button Clicked for query
button DoubleClicked for dw_employee_list
Clicked for search button Clicked for query
button DoubleClicked for dw_employee_list
8
Creating a Web application

• The HTMLBridge / ASP.Net / JSF approach
• Nearly the same that the client/server approach
• Introducting  Web windows  (web forms for
  ASP.net, faces for JSF)
• Instroducing  Web controls 
• Intruducing  Server events

Employee_List_Web_window
Employee_form_web_window
Dw_employee_list Search button Query button
Dw_employee_master Tab_employee Dw_tabpage_1 Dw_ta
bpage_2 Save button
Clicked for search button Clicked for query
button Hyperlinkclicked for dw_employee_list Of_Ge
tHTML()
Clicked for search button Clicked for query
button DoubleClicked for dw_employee_list Of_get_H
TML()
9
Web windows

• Each single process becomes a Web window (same as
  the client server approach)
• Each Web window inherits from an ancestor class
  that is a NVO
• The web window ancestor class has a of_get_html
  () method that generates the needed code to
  display what the user should see depending on his
  actions
• Each Web window holds Web controls
• A Web window is displayed as a HTML page in the
  Web Browser.
• Specific to HTMLBridge Each HTML page
  displaying a Web window is made of frames in
  order to refresh only the part that has changed
  when the user made an action that needs the GUI
  to be refreshed.

10
Web controls

• Each Web window includes Web controls
• Each Web controls inherits from a specific
  ancestor class that is a NVO.
• Each Web control ancestor class holds its own
  attributes declared as instance variables (.text,
  .x, .y, .width, .height, .dataobject)
• Each ancestor of a Web control has a
  of_get_html() method that generated the needed
  code to display the control.

11
Server events

• Each Web controls reacts to events depending on
  its ancestor class).
• Those events can be triggerred by the end user
  from the graphical interface or by the
  application on the server
• Example clicked, constructor, retrieveend
  ,open, any userevent defined by a developper

12
Creating the components

• Create all ancestor NVOs (Web window ancestor,
  Web controls). They should have the same methods
  and instance variables than the PowerBuilder
  ones, plus a of_get_html() method that returns
  the needed HTML code to display the object.
• Create a component that centralize all calls made
  by the Web browser from ASP or JSP pages and that
  instanciates all the needed objects (this would
  be the equivalent of the PowerBuilder application
  object and the PowerBuilder open() method).
• Edit all your PowerBuilder windows source code
  and replace all Powerbuilder graphical ancestor
  classes (window,datawindow, command button) by
  your new NVO ancestor classes.
• Rebuild your application.
• You now have a Web application based on the Web
  window technology similar to ASP.NET Web forms.

13
Use HTMLBridge

• Step 1 Describe your application logic by
  building a classic client-server application with
  PowerBuilder.

14
Use HTMLBridge

• Step 2 Describe how it should look in a Web
  browser with HTMLBridges theme painter and
  Webzard Painter

15

• Step 3 Ask HTMLBridge to generate non visual
  components that include all your application
  logic and that generate the needed HTML code for
  your application GUI.

16
Use HTMLBridge

• Step 4 Deploy the generated components on your
  target web http server and your target
  application server. Access your application from
  any Web browser.

17
HTMLBridge coding restrictions

• Only use datawindows or treeviews/listviews for
  data input, data display or reporting, avoid
  standard controls.
• Do not use response windows with a
  closewithreturn statement.
• Only one datawindow per tabpage (no other
  control).
• Use command buttons for user actions (not only
  popmenus, menus or drag and drop).
• Don 't display messageboxes that have more than
  one button.
• Don 't overlay graphical objects.
• Do not open more than one window at a time.
• Only use datawindow controls for printing.
• Don 't use custom graphical userobjects.
• Do not refresh the screen display too often.
• Dont use the PowerBuilder getfocus() function.
• Prefer single menu MDI applications.
• No edit mask for data input.
• All input fields must be specified as "empty
  string is null".

18
HTMLbridge Supported features

• All PowerBuilder object oriented features
  (inheritance, polymorphism, encapsulation)
• Event driven applications (userevents)
• PowerScript
• Global variables, global functions
• Main PowerBuilder datawindow features
• PowerBuilders HTML Datawindow features
• Data retrieval / update / sort / filter / XML
  support
• Reporting, n-up, composite, Rich text mailing
  features, OLE support
• Dropdown datawindows
• Master/details datawindows
• Sharedata datawindows
• Treeviews, listviews, tabs, menus
• Windows programming (DLL access, OLE Access to
  Microsoft office)
• Corba Component server access (EAServer, Web
  sphere, Web logic)
• COM component server access (Microsoft MTS)
• Web services access

19
Benefits

• Productivity (.powerbuilder)
• Same source code for windows GUI and Web GUI
• Ultra thin client (no javascript files
  downloaded, no activeX, no java applets).
  Applications can be accessed using a modem.
• Web looking and behaving client
• Customizable GUI (Set your own Web standards)
• Clean Reporting (PDF files)
• Ready for the future (Target GUI could be Windows
  longhorns XAML)
• Microsoft world and Suns world (ASP or JSP)
• Average learning time One day
• Development process up to 1000 faster than other
  web technologies (for complex applications)
• Average migration process time for existing
  PowerBuilder applications 10 to 20 of
  original development time
• And much more