Page 1 of 1

wizard template

Posted: Mon Nov 13, 2006 10:31 pm
by utopiomania
Allo' Allo!

I just edited my wizard template and thought I should share it since its only a few hundred lines long.

I like wizard-style programs, and who knows, maybe there are som newbies here that can use it too.

The template takes care of basic navigation etc, and can become any type of wizard type program with a
few edits and tweaks, and with your own code added of course.

Edit code near UPPERCASE COMMENTS to check it out. It has a few styles to choose from, and the headers
are all webgadgets, so a tip is to add background images/sounds(intro's)/dhtml whatever to make your
wizard program stand out from the crowd.

Here you go:

Code: Select all

;-program notes
;-
;PB 4.02
;utopiomania, 20070529
;'requires' panel.png, header.png graphics
;edit/insert code at UPPERCASE comments

;-initialise
;-
;WIZARD STYLE 0, 1, 2:
global style = 1

;TEMPLATE AUTO-ADJUSTS TO EDITING winW, winH, panelW, webH, btnW:
;window widht, height
global winW = 550, winH = 400
;style 1, 2 panel width, header height
global panelW = 160, webH = 60
;button sizes
global btnW = 90, btnH = 24
;cancel(lft3), next(lft2), prev(lft1) button placement
global lft3 = winW - btnW - 20, lft2 = lft3 - btnW - 10, lft1 = lft2 - btnW - 10 
global top = winH - 40

;RETURNS PANEL AND HEADER HTML:
declare.s step1panel()
declare.s step1header()
declare.s step2header()
declare.s step3header()
declare.s step4header()
declare.s step5header()

;Used in the event handler
global exit, completed = #True

declare openMainWindow()
declare disableContextMenu(nCode, wParam, lParam)

;Gadget id's
enumeration
  ;main Window
  #win1
  ;step1
  #web0
  #web1
  #img1
  #step1
  #next1
  #cancel1
  ;step2
  #web2
  #img2
  #step2
  #prev2
  #next2
  #cancel2
  ;step3
  #web3
  #img3
  #step3
  #prev3
  #next3
  #cancel3
  ;step4
  #web4
  #img4
  #step4
  #prev4
  #next4
  #cancel4
  ;step5
  #web5
  #img5
  #step5
  #done
endEnumeration

;-program entry
openMainWindow()

;-program event handler
repeat
  select waitWindowEvent()
    case #PB_Event_Gadget
      select eventGadget()
        ;SET CANCEL BEHAVIOUR:
        case #cancel1, #cancel2, #cancel3, #cancel4
          exit = #True

        case #next1
          ;step1 --> step2
          hideGadget(#step1, #True)
          hideGadget(#step2, #False)
          setActiveGadget(#next2)
          ;DISABLE [X] SHUTDOWN
          completed = #False

        case #prev2
          ;step2 --> step1
          hideGadget(#step2, #True)
          hideGadget(#step1, #False)
          setActiveGadget(#next1)
          ;ENABLE [X] SHUTDOWN
          completed = #True

        case #next2
          ;step2 --> step3
          hideGadget(#step2, #True)
          hideGadget(#step3, #False)
          setActiveGadget(#next3)

        case #prev3
          ;step3 --> step2
          hideGadget(#step3, #True)
          hideGadget(#step2, #False)
          setActiveGadget(#next2)

        case #next3
          ;step3 --> step4
          hideGadget(#step3, #True)
          hideGadget(#step4, #False)
          setActiveGadget(#next4)

        case #prev4
          ;step4 --> step3
          hideGadget(#step4, #True)
          hideGadget(#step3, #False)
          setActiveGadget(#next3)

        case #next4
          ;step4 --> step5
          hideGadget(#step4, #True)
          hideGadget(#step5, #False)
          setActiveGadget(#done)
          ;COMPLETE TASKS HERE...
          ;
          ;ENABLE [X] SHUTDOWN
          completed = #True

        case #done
          ;step5, done
          exit = #True

        ;OTHER GADGET EVENTS:
        ;case ...
      endSelect

    case #PB_Event_CloseWindow
      if completed
        ;[X] SHUTDOWN ALLOWED
        exit = #True
      endIf
  endSelect
until exit = #True

;-program exit
;-
;remove the webgadget context menu hook
UnhookWindowsHookEx_(hHook)
end

procedure openMainWindow()
  flags = #PB_Window_ScreenCentered | #PB_Window_SystemMenu
  if openWindow(#win1, 0, 0, winW, winH, "Wizard template", flags)
    ;stickyWindow(#win1, #True)
    ;create a new gadget list for the current window
    if createGadgetList(windowID(#win1))
      ;default font
      idFont = loadFont(#PB_Any, "tahoma", 10)
      setGadgetFont(#PB_Default, fontID(idFont))

      ;wizard step1
      containerGadget(#step1, 0, 0, winW, winH)
      ;new gadget list:
        select style
          case 0
            webGadget(#web1, 0, 0, winW, webH, step1header())
          case 1
            webGadget(#web0, 0, 0, panelW, winH - webH, step1panel())
            webGadget(#web1, panelW + 1, 0, winW - panelW - 2, webH, step1header())
          case 2
            webGadget(#web0, 0, webH, panelW, winH - webH - webH, step1panel())
            webGadget(#web1, 0, 0, winW, webH - 1, step1header())
        endSelect
        frame3DGadget(#img1, 0, winH - webH, winW, 2, "", #PB_FRAME3D_SINGLE)
        buttonGadget(#next1, lft2, top, btnW, btnH, "Next >")
        buttonGadget(#cancel1, lft3, top, btnW, btnH, "Cancel")
        ;STEP1 OTHER GADGETS:
        ;
      closeGadgetList()
      hideGadget(#step1, #False)
      setActiveGadget(#next1)

      ;wizard step2
      containerGadget(#step2, 0, 0, winW, winH)   
      ;new gadget list:
        webGadget(#web2, 0, 0, winW, webH, step2header())
        frame3DGadget(#img2, 0, winH - webH, winW, 2, "", #PB_FRAME3D_SINGLE)
        buttonGadget(#prev2, lft1, top, btnW, btnH, "< Previous")
        buttonGadget(#next2, lft2, top, btnW, btnH, "Next >")
        buttonGadget(#cancel2, lft3, top, btnW, btnH, "Cancel")
        ;STEP2 OTHER GADGETS:
        ;
      closeGadgetList()
      hideGadget(#step2, #True)

      ;wizard step3
      containerGadget(#step3, 0, 0, winW, winH)
      ;new gadget list:
        webGadget(#web3, 0, 0, winW, webH, step3header())
        frame3DGadget(#img3, 0, winH - webH, winW, 2, "", #PB_FRAME3D_SINGLE)
        buttonGadget(#prev3, lft1, top, btnW, btnH, "< Previous")
        buttonGadget(#next3, lft2, top, btnW, btnH, "Next >")
        buttonGadget(#cancel3, lft3, top, btnW, btnH, "Cancel")
        ;STEP3 OTHER GADGETS:
        ;
      closeGadgetList()
      hideGadget(#step3, #True)

      ;wizard step4
      containerGadget(#step4, 0, 0, winW, winH)
      ;new gadget list:
        webGadget(#web4, 0, 0, winW, webH, step4header())
        frame3DGadget(#img4, 0, winH - webH, winW, 2, "", #PB_FRAME3D_SINGLE)
        buttonGadget(#next4, lft2, top, btnW, btnH, "Finish")
        buttonGadget(#cancel4, lft3, top, btnW, btnH, "Cancel")
        ;STEP4 OTHER GADGETS:
        ;
      closeGadgetList()
      hideGadget(#step4, #True)

      ;wizard step5
      containerGadget(#step5, 0, 0, winW, winH)   
      ;new gadget list:
        webGadget(#web5, 0, 0, winW, webH, step5header())
        frame3DGadget(#img5, 0, winH - webH, winW, 2, "", #PB_FRAME3D_SINGLE)
        buttonGadget(#done, lft3, top, btnW, btnH, "Done")
        ;STEP5 OTHER GADGETS:
        ;
      closeGadgetList()
      hideGadget(#step5, #True)
    endIf
  endIf
endProcedure

procedure.s step1panel()
  ;this returns html for the panel that shows if style is set to 1 or 2
  bg.s = GetPathPart(ProgramFileName()) + "panel.png"
  s.s = "about:<body background = '" + bg + "' scroll = 'no'"
  s + " oncontextmenu = 'return false;'>"
  s + "<font face = 'courier new' color = '#4080ff'>"
  s + "<h4>Style " + str(style) + "</h4></body>"
  
  procedureReturn s
endProcedure

procedure.s step1header()
  ;returns html for step1 header graphics
  bg.s = GetPathPart(ProgramFileName()) + "header.png"
  s.s = "about:<body background = '" + bg + "' scroll = 'no'"
  s + " oncontextmenu = 'return false;'>"
  s + "<font face = 'courier new' color = '#4080ff'>"
  s + "<h4>Step 1/5 - Welcome</h4></body>"
  procedureReturn s
endProcedure

procedure.s step2header()
  ;returns html for step2 header graphics
  bg.s = GetPathPart(ProgramFileName()) + "header.png"
  s.s = "about:<body background = '" + bg + "' scroll = 'no'"
  s + " oncontextmenu = 'return false;'>"
  s + "<font face = 'courier new' color = '#4080ff'>"
  s + "<h4>Step 2/5</h4></body>"
  procedureReturn s
endProcedure

procedure.s step3header()
  ;returns html for step3 header graphics
  bg.s = GetPathPart(ProgramFileName()) + "header.png"
  s.s = "about:<body background = '" + bg + "' scroll = 'no'"
  s + " oncontextmenu = 'return false;'>"
  s + "<font face = 'courier new' color = '#4080ff'>"
  s + "<h4>Step 3/5</h4></body>"
  procedureReturn s
endProcedure

procedure.s step4header()
  ;returns html for step4 header graphics
  bg.s = GetPathPart(ProgramFileName()) + "header.png"
  s.s = "about:<body background = '" + bg + "' scroll = 'no'"
  s + " oncontextmenu = 'return false;'>"
  s + "<font face = 'courier new' color = '#4080ff'>"
  s + "<h4>Step 4/5 - Finish</h4></body>"
  procedureReturn s
endProcedure

procedure.s step5header()
  ;returns html for step5 header graphics
  bg.s = GetPathPart(ProgramFileName()) + "header.png"
  s.s = "about:<body background = '" + bg + "' scroll = 'no'"
  s + " oncontextmenu = 'return false;'>"
  s + "<font face = 'courier new' color = '#4080ff'>"
  s + "<h4>Step 5/5 - Done</h4></body>"
  procedureReturn s
endProcedure

Posted: Mon Nov 13, 2006 10:38 pm
by Konne
Nice but u realize that Webgadgets need tonns of Resources.

Posted: Mon Nov 13, 2006 11:44 pm
by rsts
Looks very interesting.

Are those graphics supposed to be common somewhere or are we to make our own?

Just wondering what sort of graphic I needed to provide?

cheers

Posted: Tue Nov 14, 2006 7:48 am
by utopiomania
Hi, the graphics are used for background so they will be tiled by the webgadgets in case they are too small, or
they can be made the size of the gadgets, in this case 550 x 60 for the upper, and 120 x 340 for the left
graphics, and you will probably have to make your own, or find them on the net and adjust sizes to match:

http://www.deviantart.com/deviation/27070050/

Posted: Tue Nov 14, 2006 10:03 am
by Pantcho!!
Great one! thanks a lot :)

Posted: Thu Nov 16, 2006 11:36 pm
by utopiomania
You're wellcome, Pantcho! :)

Posted: Fri Nov 17, 2006 9:10 am
by kinglestat
just a slight correction for line 180

If IsGadget ( #web1 )
SetGadgetText(#web1, step1header())
EndIf

really excellent work

cheers

Terence

Posted: Sun Nov 19, 2006 8:24 pm
by utopiomania
Thanks, Terence! :) Line 180 should simply be deleted. It is a leftover from some editing and tries to
load a webgadget that is created a few lines below. I've updated the code.

Posted: Fri May 25, 2007 4:25 pm
by abc123
Can you please tell me where or how can i create another divider line image under the headerWeb gadgetm thanks in advance!?

Posted: Tue Dec 04, 2007 11:41 am
by utopiomania
Here's another wizard template, this time using the new webgadget features to make up the user interface.

It uses css to place controls, and some vbscript and the 'window.location' method to send events to the
callback eventhandler.

Code: Select all

;-program notes
;-initialize
;-
enumeration
  #WIN
  #WEB
endEnumeration

;window widht, height
global winW = 660, winH = 480
global expertMode = 1

global css.s
css + "<html><! use xp themes: >" + #CR$
css + "<meta http-equiv = 'msThemeCompatible' content = 'yes'>"
css + "<style type = 'text/css'>" + #CR$
css + " body{font-family:calibri; font-size:14px; font-weight:800;" + #CR$
css + " color:#808080; background-color:#ffffff}" + #CR$
css + "</style>" + #CR$ + #CR$

declare openMainWindow()
declare navigationCallback(id, url.s)
declare.s wizardStep1()
declare.s wizardStep2()
declare.s wizardStep3()
declare.s wizardStep4()
declare.s wizardStep5()

;-program entry
openMainWindow()

;-program event handler
repeat
  event = waitWindowEvent()
  select event
    case #PB_EVENT_CLOSEWINDOW
      ;-program exit
      ;-
      end
  endSelect
forever

procedure openMainWindow()
  if openWindow(#WIN, 0, 0, winW, winH, "wizard template", $CA0001)
    if createGadgetList(windowID(#WIN))
      webGadget(#WEB, 0, 0, winW, winH, "")
      setGadgetItemText(#WEB, #PB_WEB_HTMLCODE, wizardStep1())
      ;set callback to monitor navigation
      setGadgetAttribute(#WEB, #PB_WEB_NAVIGATIONCALLBACK, @navigationCallback())
    endIf
  endIf
endProcedure

procedure navigationCallback(id, url.s)
  url = lcase(url)

  if findString(url, "checkbox1_checked", 1)
    expertMode = 1
  elseIf findString(url, "checkbox1_unchecked", 1)
    expertMode = 0
  elseIf findString(url, "step1_next", 1)
      ;handle event...
      if expertMode = 1
        setGadgetItemText(#WEB, #PB_WEB_HTMLCODE, wizardStep2())
      else
        setGadgetItemText(#WEB, #PB_WEB_HTMLCODE, wizardStep4())
      endIf
      ;cancel navigation
      procedureReturn 0
  elseIf findString(url, "step1_cancel", 1)
      end
      procedureReturn 0

  elseIf findString(url, "step2_previous", 1)
      setGadgetItemText(#WEB, #PB_WEB_HTMLCODE, wizardStep1())
      procedureReturn 0
  elseIf findString(url, "step2_next", 1)
      setGadgetItemText(#WEB, #PB_WEB_HTMLCODE, wizardStep3())
      procedureReturn 0
  elseIf findString(url, "step2_cancel", 1)
      end
      procedureReturn 0

  elseIf findString(url, "step3_previous", 1)
      setGadgetItemText(#WEB, #PB_WEB_HTMLCODE, wizardStep2())
      procedureReturn 0
  elseIf findString(url, "step3_next", 1)
      setGadgetItemText(#WEB, #PB_WEB_HTMLCODE, wizardStep4())
      procedureReturn 0
  elseIf findString(url, "step3_cancel", 1)
      end
      procedureReturn 0

  elseIf findString(url, "step4_previous", 1)
      if expertMode = 1
        setGadgetItemText(#WEB, #PB_WEB_HTMLCODE, wizardStep3())
      else
        setGadgetItemText(#WEB, #PB_WEB_HTMLCODE, wizardStep1())
      endIf
      procedureReturn 0
  elseIf findString(url, "step4_finish", 1)
      setGadgetItemText(#WEB, #PB_WEB_HTMLCODE, wizardStep5())
      procedureReturn 0
  elseIf findString(url, "step4_cancel", 1)
      end
      procedureReturn 0

  elseIf findString(url, "step5_done", 1)
      end
      procedureReturn 0
  else
    ;allow navigation
    procedureReturn 1
  endIf
endProcedure

procedure.s wizardStep1()
  ;html
  html.s + css

  html + "<script language = 'vbscript'>" + #CR$
  html + "sub button2_onClick()" + #CR$
  html + "  window.location = " + #DQUOTE$ +"step1_next" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$
  
  html + "sub checkbox1_onClick()" + #CR$
  html + "  if checkbox1.checked then" + #CR$
  html + "    window.location = " + #DQUOTE$ +"checkbox1_checked" + #DQUOTE$ + #CR$
	html + "  else" + #CR$
  html + "    window.location = " + #DQUOTE$ +"checkbox1_unchecked" + #DQUOTE$ + #CR$
	html + "  end if" + #CR$
  html + "end sub" + #CR$

  html + "sub checkbox1_onMouseOver()" + #CR$
	html + "  checkbox1.style.cursor = " + #DQUOTE$ +"hand" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub checkbox1_onMouseOut()" + #CR$
	html + "  checkbox1.style.cursor = " + #DQUOTE$ +"arrow" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub button2_onMouseOver()" + #CR$
	html + "  button2.style.cursor = " + #DQUOTE$ +"hand" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub button2_onMouseOut()" + #CR$
	html + "  button2.style.cursor = " + #DQUOTE$ +"arrow" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub button3_onClick()" + #CR$
  html + "  window.location = " + #DQUOTE$ +"step1_cancel" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub button3_onMouseOver()" + #CR$
	html + "  button3.style.cursor = " + #DQUOTE$ +"hand" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub button3_onMouseOut()" + #CR$
	html + "  button3.style.cursor = " + #DQUOTE$ + "arrow" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$
  html + "</script>" + #CR$
  
  html + "<body scroll = 'no' oncontextmenu = 'javascript:return false;'>" + #CR$
  html + "<h3>STEP 1</h3>" + #CR$

  html + "<hr style = 'position:absolute; left:0; top:415; width:660px; height:1px; color:#efefef'>" + #CR$

  if expertMode
    state.s = "checked"
  else
    state.s = "unchecked"
  endIf
  html + "<input id = 'checkbox1' type = 'checkbox' value = 'Expert Mode' " + state + "" + #CR$ 
  html + "  style = 'position:absolute; left:30; top:440; width:20; height:20'" + #CR$
  html + "</input>" + #CR$
  
  html + "<span style = 'position:absolute; left:55; top:442; width:100; height:22; color:#808080;'>" + #CR$
  html + "Expert Mode" + #CR$
  html + "</span>" + #CR$

  html + "<input id = 'button2' type = 'button' value = 'Next >'" + #CR$ 
  html + "  style = 'position:absolute; left:448; top:440; width:90; height:22'" + #CR$
  html + "</input>" + #CR$

  html + "<input id = 'button3' type = 'button' value = 'Cancel'" + #CR$ 
  html + "  style = 'position:absolute; left:550; top:440; width:90; height:22'" + #CR$
  html + "</input>" + #CR$

  html + "</body></html>"
  procedureReturn html
endProcedure

procedure.s wizardStep2()
  ;html
  html.s + css

  html + "<script language = 'vbscript'>" + #CR$
  html + "sub button1_onClick()" + #CR$
  html + "  window.location = " + #DQUOTE$ +"step2_previous" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub button1_onMouseOver()" + #CR$
	html + "  button1.style.cursor = " + #DQUOTE$ +"hand" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub button1_onMouseOut()" + #CR$
	html + "  button1.style.cursor = " + #DQUOTE$ +"arrow" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub button2_onClick()" + #CR$
  html + "  window.location = " + #DQUOTE$ +"step2_next" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub button2_onMouseOver()" + #CR$
	html + "  button2.style.cursor = " + #DQUOTE$ +"hand" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub button2_onMouseOut()" + #CR$
	html + "  button2.style.cursor = " + #DQUOTE$ +"arrow" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub button3_onClick()" + #CR$
  html + "  window.location = " + #DQUOTE$ +"step2_cancel" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub button3_onMouseOver()" + #CR$
	html + "  button3.style.cursor = " + #DQUOTE$ +"hand" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub button3_onMouseOut()" + #CR$
	html + "  button3.style.cursor = " + #DQUOTE$ +"arrow" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$
  html + "</script>" + #CR$

  html + "<body scroll = 'no' oncontextmenu = 'javascript:return false;'>" + #CR$
  html + "<h3>STEP 2</h3>" + #CR$

  html + "<hr style = 'position:absolute; left:0; top:415; width:660px; height:1px; color:#efefef'>" + #CR$

  html + "<input id = 'button1' type = 'button' value = '< Previous'" + #CR$ 
  html + "  style = 'position:absolute; left:353; top:440; width:90; height:22'" + #CR$
  html + "</input>" + #CR$

  html + "<input id = 'button2' type = 'button' value = 'Next >'" + #CR$ 
  html + "  style = 'position:absolute; left:448; top:440; width:90; height:22'" + #CR$
  html + "</input>" + #CR$

  html + "<input id = 'button3' type = 'button' value = 'Cancel'" + #CR$ 
  html + "  style = 'position:absolute; left:550; top:440; width:90; height:22'" + #CR$
  html + "</input>" + #CR$

  html + "</body></html>"
  procedureReturn html
endProcedure

procedure.s wizardStep3()
  ;html
  html.s + css

  html + "<script language = 'vbscript'>" + #CR$
  html + "sub button1_onClick()" + #CR$
  html + "  window.location = " + #DQUOTE$ +"step3_previous" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub button1_onMouseOver()" + #CR$
	html + "  button1.style.cursor = " + #DQUOTE$ +"hand" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub button1_onMouseOut()" + #CR$
	html + "  button1.style.cursor = " + #DQUOTE$ +"arrow" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub button2_onClick()" + #CR$
  html + "  window.location = " + #DQUOTE$ +"step3_next" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub button2_onMouseOver()" + #CR$
	html + "  button2.style.cursor = " + #DQUOTE$ +"hand" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub button2_onMouseOut()" + #CR$
	html + "  button2.style.cursor = " + #DQUOTE$ +"arrow" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub button3_onClick()" + #CR$
  html + "  window.location = " + #DQUOTE$ +"step3_cancel" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub button3_onMouseOver()" + #CR$
	html + "  button3.style.cursor = " + #DQUOTE$ +"hand" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub button3_onMouseOut()" + #CR$
	html + "  button3.style.cursor = " + #DQUOTE$ +"arrow" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$
  html + "</script>" + #CR$

  html + "<body scroll = 'no' oncontextmenu = 'javascript:return false;'>" + #CR$
  html + "<h3>STEP 3</h3>" + #CR$

  html + "<hr style = 'position:absolute; left:0; top:415; width:660px; height:1px; color:#efefef'>" + #CR$

  html + "<input id = 'button1' type = 'button' value = '< Previous'" + #CR$ 
  html + "  style = 'position:absolute; left:353; top:440; width:90; height:22'" + #CR$
  html + "</input>" + #CR$

  html + "<input id = 'button2' type = 'button' value = 'Next >'" + #CR$ 
  html + "  style = 'position:absolute; left:448; top:440; width:90; height:22'" + #CR$
  html + "</input>" + #CR$

  html + "<input id = 'button3' type = 'button' value = 'Cancel'" + #CR$ 
  html + "  style = 'position:absolute; left:550; top:440; width:90; height:22'" + #CR$
  html + "</input>" + #CR$

  html + "</body></html>"
  procedureReturn html
endProcedure

procedure.s wizardStep4()
  ;html
  html.s + css

  html + "<script language = 'vbscript'>" + #CR$
  html + "sub button1_onClick()" + #CR$
  html + "  window.location = " + #DQUOTE$ +"step4_previous" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub button1_onMouseOver()" + #CR$
	html + "  button1.style.cursor = " + #DQUOTE$ +"hand" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub button1_onMouseOut()" + #CR$
	html + "  button1.style.cursor = " + #DQUOTE$ +"arrow" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub button2_onClick()" + #CR$
  html + "  window.location = " + #DQUOTE$ +"step4_finish" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub button2_onMouseOver()" + #CR$
	html + "  button2.style.cursor = " + #DQUOTE$ +"hand" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub button2_onMouseOut()" + #CR$
	html + "  button2.style.cursor = " + #DQUOTE$ +"arrow" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub button3_onClick()" + #CR$
  html + "  window.location = " + #DQUOTE$ +"step4_cancel" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub button3_onMouseOver()" + #CR$
	html + "  button3.style.cursor = " + #DQUOTE$ +"hand" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub button3_onMouseOut()" + #CR$
	html + "  button3.style.cursor = " + #DQUOTE$ +"arrow" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$
  html + "</script>" + #CR$

  html + "<body scroll = 'no' oncontextmenu = 'javascript:return false;'>" + #CR$
  html + "<h3>STEP 4</h3>" + #CR$

  html + "<hr style = 'position:absolute; left:0; top:415; width:660px; height:1px; color:#efefef'>" + #CR$

  html + "<input id = 'button1' type = 'button' value = '< Previous'" + #CR$ 
  html + "  style = 'position:absolute; left:353; top:440; width:90; height:22'" + #CR$
  html + "</input>" + #CR$

  html + "<input id = 'button2' type = 'button' value = 'Finish'" + #CR$ 
  html + "  style = 'position:absolute; left:448; top:440; width:90; height:22'" + #CR$
  html + "</input>" + #CR$

  html + "<input id = 'button3' type = 'button' value = 'Cancel'" + #CR$ 
  html + "  style = 'position:absolute; left:550; top:440; width:90; height:22'" + #CR$
  html + "</input>" + #CR$

  html + "</body></html>"
  procedureReturn html
endProcedure

procedure.s wizardStep5()
  ;html
  html.s + css

  html + "<script language = 'vbscript'>" + #CR$
  html + "sub button3_onClick()" + #CR$
  html + "  window.location = " + #DQUOTE$ +"step5_done" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub button3_onMouseOver()" + #CR$
	html + "  button3.style.cursor = " + #DQUOTE$ +"hand" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$

  html + "sub button3_onMouseOut()" + #CR$
	html + "  button3.style.cursor = " + #DQUOTE$ +"arrow" + #DQUOTE$ + #CR$
  html + "end sub" + #CR$
  html + "</script>" + #CR$

  html + "<body scroll = 'no' oncontextmenu = 'javascript:return false;'>" + #CR$
  html + "<h3>STEP 5</h3>" + #CR$

  html + "<hr style = 'position:absolute; left:0; top:415; width:660px; height:1px; color:#efefef'>" + #CR$

  html + "<input id = 'button3' type = 'button' value = 'Done'" + #CR$ 
  html + "  style = 'position:absolute; left:550; top:440; width:90; height:22'" + #CR$
  html + "</input>" + #CR$

  html + "</body></html>"
  procedureReturn html
endProcedure