CSE2207/CSE3007 Rapid Applications

Programming with Windows

Week 8

Visual Basic 6.0 and the Web

The Web Browser controlDHTML ApplicationsIIS ApplicationsHTML Help

The Web Browser Control

Add to your project: Project|Components|Microsoft Internet Controls

Needs IE 4 running on the client computer Is effectively a ‘wrapper’ around IE4, allowing

a developer to embed a web browser (with limited functionality) on a standard VB form allows control over which documents are viewed can display anything displayed by IE4 e.g. HTML

(with frames), ActiveX controls, Video, Audio, VRML 3-D

Can use it to browse folders on a local hard disk or local area network, maintains a history list

The Web Browser Control...

Private Sub Form_Load()WebBrowser1.GoHome

End SubPrivate Sub cmdRetrieve_Click()

WebBrowser.Navigate txtURL.TextEnd SubPrivate WebBrowser_StatusTextChange(ByVal Text

As String)lblStatus.Caption = Text): End Sub

Private Sub cmdBack_Click()WebBrowser1.GoBack: End Sub

The WebBrowser Control...Check out all its properties, methods and events

in MSDN Help under WebBrowser Object in the Properties window in the the Code Editor

See Code Example 1NB. If your application uses a Web Browser Control, users of

your application must have the full version of Internet Explorer installed on their computers

“

DHTML Applications Use a combination of Dynamic HTML (an

extension on IE4) and compiled VB code in an interactive, browser-based application.

IE4 and the DHTML application both reside on the browser (client) computer

DHTML Application can:display static web pagesrespond to user-initiated actions e.g. mouse-clicksrespond to browser actions e.g. opening a pagedynamically update page’s appearance, behaviourretrieve data from a page, use it to query a DB

DHTML Applications...

DHTML applications are designed to work optimally on intranets most of the processing is on the client (faster) minimised network traffic allows companies to distribute sensitive data,

applications for employees onlyUse VB code, replacing CGI processing, script

etcCan use existing HTML pages then modify them,

or create your own.

Create a DHTML Application in VB6.0Project|New|DHTML Application (see code)Open the designer by double-clicking on

DHTMLPage1 in the Project ExplorerClick the DHTML Page Designer Properties

button on the page designer’s toolbar to choose save options for the HTMl pages: Save it within the designer file (.dsr). OK for

sharing files between developers or development machines BUT prevents viewing/editing of HTML via Launch Editor etc

Save as a separate HTML file (path auto. entered in designer’s SourceFile property)

DHTML Applications...

Structure of a DHTML Application One or more HTML Pages (the interface)

for each page, there is a page designer file (.dsr) VB Code that handles events from the HTML pages A run-time component that hosts each page in

the browser or Web browser control Compiling produces a project DLL with the

compiled VB code:used by the run-time component You cannot use the page designer as a single-

threaded DLL. To create an DHTML application , set the project to be apartment-threaded via the General tab of the Project Properties dialog box.

DHTML Applications...

Design ConsiderationsHTML page consists of elements

(objects) headings, paragraphs of text, images form fields, tables, buttons, ActiveX controls

e.g. the DTPicker can access, change attributes, methods,

events of elements PROVIDED THEY HAVE A VALUE FOR THE ID ATTRIBUTEall ID’s must be unique

use relative URL’s

Relative URL’s

All of the project files — including the designer and any files the templates reference — should be located either in the project directory or in a subdirectory beneath it. The .htm files for the templates must be in the main project directory. Example:

File Final Location

feedback.vbp c:\vb98\myproject\

thankyou.htmc:\vb98\myproject\

logo.gif c:\vb98\myproject\graphics\

banner.gif c:\vb98\myproject\graphics\

Relative URL’s...Example: Using Relative Paths

After copying the graphics files to the subdirectory as shown above, you must make sure that your references to these images in the .htm file and in your Visual Basic code use relative paths that accurately reflect the files' location after deployment. For example, in the .htm file any references to the logo graphic should be:

graphics/logo.gif This is considered a relative URL because it does not

provide the full server and directory path to the file. Instead, it indicates that the file can be found in a graphics subdirectory of the Web server directory from which the current page was drawn.

Design Considerations...

Some common DHTML elements: Button, checkbox, Option, Select, TextField,

TextArea, Hyperlink Some objects cannot be moved once you place

them on the page e.g. the Common Dialog control (an ActiveX component): select the control in Treeview and delete it or access its properties.

Check OFF the Absolute Position toolbar button immediately after dropping a control on the form, to help keep the position of the control relative to text on the page.

Sharing Data between Pages, Dynamic content

Typically, browser applications are ‘stateless’, i.e. information is not retained/remembered between requests, pages

PutProperty/GetProperty functions store/restore data while user’s browser window is open part of modDHTML module in DHTML app browser stores the data in a client-side cookie See Example 2

Dynamic content: innerText, outerText, innerHTML, outerHTML See Example 3

DHTML ApplicationsKey Objects The BaseWindow object represents an instance of

the browser and is used to display the Document object.

The Document object represents the HTML page the end user views in the Web browser or Web browser control. You use events in the Document object to handle user actions in the browser. The Document object contains a reference to the DHTMLPage object

The DHTMLPage object represents a run-time utility that hooks up the page to its Visual Basic code when the application runs. The DHTMLPage object provides functionality for load, unload, initialize, and terminate events for your HTML pages.

The Document Object

The Document object is available at all times. It represents the body of the page

The Style collection does not apply to itDocument.bgcolor = “lightyellow” ‘fgcolor

foreground color Check for a document title and displays the title (if

not null) in an alert (message) box.

if (document.title!="") alert("The title is " + document.title)

DHTML Applications...

Key EventsThe DHTMLPage object manages the lifetime of your

HTML pages with the following sequence of events: The Initialize event occurs early in the loading

process, whenever the run-time DLL for the application is created or recreated by the system. It is always the first event in a DHTML application. When the Initialize event is fired, not all objects on the page have been loaded, so object references may not be valid. Because of this, you should not use the Initialize event to reference and set properties for elements on the page.

DHTML Applications...

DHTML Page Object events (contd)The Load event occurs later in the loading

process, after the Initialize event. You can use the Load event to set information on the page.

The Unload event occurs when the end user moves to another page or closes the application. During unload, all of the objects on the HTML page still exist. Use this event to do any state management, cleanup, or other processing that needs to reference items on the page.

DHTML Applications... The Terminate event occurs when the HTML page

is about to be destroyed. None of the page objects exist.

DHTML Events:

onabort Fires when the user aborts the download of an image or page element by pressing the Stop button.

onreset Fires when the user selects a Reset button on a form.

onsubmit Fires when the user selects a Submit button on a form. Can be used to perform validation of data on the client before sending it to the server.

Navigation Programming

Use a hyperlink element Drag a Hyperlink icon from the toolbox onto

the page and set its ID OR Convert existing text to a hyperlink by

selecting it, then click Make Selection into Link icon from the designer toolbar

Then set the HREF property, using a full or relative path: use a full path for external Web site pages, relative for your own page e.g.

http://www.server.com/directory/page.htmfile:///c:/work/vb6/loan.htm OR JUST loan.htm

Navigation Programming

Write code for any programmable element (must have an ID)

Private Function Button1_onclick() As BooleanBaseWindow.navigate “File:///c:/work/loan.htm”

End Function Change physical properties of Page Elements via

the Style collection:Button1.style.backgroundColor = “blue” Other style properties common to Page

elements:border, color, font, margin, padding, textdecoration

Accessing a Database

In the DHTMLPage Initialize event, create an ADO Connection and Recordset, and initialise the properties of the Recordset.

In the DHTMLPage Load event, open the Recordset, and fill the DHTMLPage TextFields with data

Use AddNew, Update, Delete, Close etc recordset methods to manipulate the data

In the DHTMLPage Terminate event clean up the ADO objects:

Private Sub DHTMLPage_Terminate()Set rstTitles = NothingconBiblio.Close: End Sub

Accessing a Database To persist the data, use PutProperty(), GetProperty() Store the data as each field loses focus:Private Sub EmpName_onblur()PutProperty BaseWindow.Document, “EmpName”,

EmpName.ValueEnd Sub etc etc for each field Restore the data in the fields in the Page Load event

e.g.Private Sub DHTMLPage_Load()

FillFormEmpName.focus

End Sub

Accessing a Database

Private Sub FillForm() Dim strValue As String ErrorMsg.Style.Color = “red” ErrorMsg.InnerText = “” EmpName.Value =

GetProperty(BaseWindow.Document, “EmpName”) strValue = GetProperty(BaseWindow.Document,

“EmpHours”) EmpHours.Value = IIf(strValue <> “”, strValue, “0”) BaseWindow.Alert “Data Restored!” End Sub

Building, Deploying the DHTML Application

Project|Make creates a DLL file. For each page designer, VB creates one .dsr file for each HTML page. Plain text files

containing source code for the designer, and references to the HTML pages

one .dsx file (binary info about the designer) the HTML pages are saved separately where you

specify - must be deployed with the DLL any other files used in the project e.g. image

files must be deployed with the project.

Use the VB Package and Deployment Wizard to create a cabinet file (.cab) for Web deployment

IIS, ASP Applications

Internet Information Server applicationsUse HTML (or ASP) for the interface, and

compiled VB code as separate units.Can run in any browser, intranet, internetreside on a Web server

Active Server Applicationsreside on the serveruse VBScript or Jscript (not VB code)HTML and application code (script) are

combined on the same page.

Help Systems

VB supports 2 Help Systems: Windows Help (WinHelp) HTML Help

Enables the user to select an item from the Help Contents, then view, search and navigate various Help screens

Provides ‘links’ between help topicsProvides an index of keywordsProvides context-level help for more

detailed information about an object

HTML Help Systems

Help Developer’s Workshop run the hhw.exe file (under VB Tools)

Or Download HTML Help Workshop from Microsoft and run the file HtmlHelp.exe to install the workshop

Other HTML Help Editors: Download EasyHelp from EasyHelp.com

and run ezy300.exeSearch Google.com for Html Help

Workshop tutorials

HTML Help Systems

Structure of a HTML Help SystemHTML Help project file. (.hhp).

Contains references to the other files:

Topic Files. (.htm) Contain the text that appears on the Web

page. Can include hyperlinks to other pages Use the HTML Help ActiveX control to

create buttons, insert tags in Topic files

HTML Help Systems

Table of Contents File (.hhc). Contains the entries that will appear

under the Contents tab. Each entry links to a URL

An index File (.hhk) Contains a searchable index of keywords

that will appear under the Index tab. Each keyword is linked to a URL

Context-Sensitive Help Unique ID(Map) for each CS Help topic

HTML Help Systems

Structure of a HTML Help System (contd)Possibly some Graphics files, where links

to graphics and multimedia files are stored.

Start by creating the HTML Help Project: File|New, then select Project. This invokes the New Project Wizard Destination Dialog defines where files will be

created Existing Files Dialog allows files to be added

to the project (e.g. .htm files already created)

HTML Help SystemsContents Tab is used to create the TOC

file TOC is organised hierarchically as folders

(headings), each with 1-to-many pages Every entry is associated with an existing

HTML pageIndex Tab is used to create the Index file

Insert keywords, each associated with an existing HTML page

File|Compile creates a .chm file

HTML Help Systems

Create hyperlinks directly in the HTML document: double-click a .htm file in the Project Tab to open a code window.

Use the HTML Help ActiveX control to insert (selected) HTML tags automatically in the HTML document: position the cursor in the document where the tag is to be inserted, then click the HTML Help ActiveX control button on the toolbar

Context-Sensitive Help

Invoked when the user selects F1Lowest level topic file that applies will be

displayed: control:frame:form:applicationCreate a text file and save as a .h file (Ex4)Select the Project tab in HHW, then click the

HTMLHelp API information button.Use the Map tab to include the .h fileUse the Alias tab to link the CONSTANTS in

the .h file with their associated HTML file

HTML Help Systems

Connect the Help system to the VB Project Set the HelpFile property of the App object

At design time via Project propertiesAt run-time e.g. Form Load for the Splash screenApp.HelpFile = App.Path & “\MyProject.chm”

Set the HelpContext ID property for each of the objects you have created context-sensitive help for (as a HTML topic file).The ID is the number defined in the .h file definition.

ToolTips, Status Bar ToolTipText property of (most) controls

displays a yellow rectangle with text provider by the developer.

Status BarDistributed in file MSCOMCTL.OCXTypically appears across the bottom of a

form, but can also be placed across the top.

Provides information about the current task, environment e.g. number of records read, system date and time

Status Bar...The StatusBar custom control

creates a window with up to 16 Panel objects

Panel object properties allow display of text, predefined data(automatically updated date and time), pictures, etc

Click on Custom property, and complete the information on the different tabs of the StatusBar Control Properties dialog box.

Can reconfigure the Panel objects at run-time to reflect the current state of the application e.g. date/time, form # etc

Building and Distributing the ApplicationA VB Application can consist of:

1 file for each form (.FRM) 1 file for each class module (.CLS) 1 file for each standard (code) module (.BAS) 1 or more files containing custom controls

(.VBX, .OCX) 1 resource file (.RES) 1 project file (.VBP)

list of all files and objects associated with the project

information on the environment options you set

Building and Distributing the Application...

Project settings are saved to the .VBP file Project|Properties

Startup FormProject NameHelp File Name (For the Project)HelpContextID (for the Help topic assoc with “?”)Application Description ( user-friendly name for

the project. Displayed in the References and Object Browser dialog boxes)

Building and Distributing the Application...

Create an Executable File (.EXE) File|Make EXE Make Project dialog box, Options button

specify Major, Minor, Revision release numbersname, icon for applicationversion-specific information relating to e.g.

company name, legal trademarks, product name etc

Current project directory is the default directory for the .EXE file

Building and Distributing the Application...Use the Package and Deployment

Wizard helps you determine which files you need

to distribute with your application e.g.custom control files (.VBX, .OCX)files for the data control (ADO…..DLL)

creates a setup program SETUP.EXE compresses all required files writes the compressed files to your chosen

distribution media (floppy, CD, etc)

Building and Distributing the Application...

Use the Package and Deployment Wizard In design mode, select Project|

References and remove any unused references

Start by saving all the form, code and class modules, then closing the project

See the Wizard steps in Example 5