CSE2207/CSE3007 Rapid Applications Programming with Windows Week 8.
-
Upload
emery-norris -
Category
Documents
-
view
222 -
download
0
Transcript of CSE2207/CSE3007 Rapid Applications Programming with Windows Week 8.
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