Simplest dhtml for ui elements.. :)

Share your advanced PureBasic knowledge/code with the community.
User avatar
utopiomania
Addict
Addict
Posts: 1655
Joined: Tue May 10, 2005 10:00 pm
Location: Norway

Simplest dhtml for ui elements.. :)

Post by utopiomania »

I think this is the least amount of coding you can get away with to code dhtml ui elements, one
central eventhandler, and inline code to swap classes.. ?

Right click to view source, it's not blocked in this demo.

Code: Select all

;-program notes
;-initialize
;-
Enumeration
  #WIN
  #WEB
EndEnumeration

Global winW = 1024, winH = 768

Declare openMainWindow()
Declare navigationCallback(id, url.s)
Declare.s userInterfacePage1()

;-program entry
openMainWindow()

;-program event handler
Repeat
  event = WaitWindowEvent()
  Select event
    Case #PB_Event_SizeWindow
;        winW = WindowWidth(#WIN)
;        winH = WindowHeight(#WIN)
;        ResizeGadget(#WEB, 0, 0, winW, winH)
    Case #PB_Event_CloseWindow
      ;-program exit
      ;-
      End
  EndSelect
ForEver

Procedure openMainWindow()
  ;$CF0001
  ExamineDesktops()
  winW = DesktopWidth(0)
  winH = DesktopHeight(0)
  If OpenWindow(#WIN, 0, 0, winW, winH, "", #PB_Window_BorderLess | #PB_Window_Maximize)
    WebGadget(#WEB, 0, 0, winW, winH, "")
    ;load the html
    SetGadgetItemText(#WEB, #PB_Web_HtmlCode, userInterfacePage1())
    ;callback to monitor navigation
    SetGadgetAttribute(#WEB, #PB_Web_NavigationCallback, @navigationCallback())
    ;SetGadgetAttribute(#WEB, #PB_Web_BlockPopupMenu, 1)
  EndIf
EndProcedure

Procedure navigationCallback(id, url.s)
  url = LCase(url)
  If FindString(url, "button01_clicked")
    MessageRequester("UI Event handler", url)
  ElseIf FindString(url, "button02_clicked")
    MessageRequester("UI Event handler", url)
    End
  EndIf
  ;block drag-drop
  ProcedureReturn 0
EndProcedure

Procedure.s userInterfacePage1()
  ;html
  s.s + "<!doctype html>" + Chr(13)
	s + "<html>" + Chr(13)
	s + "<head>" + Chr(13)
	s + "" + Chr(13)
	s + "<style>" + Chr(13)
	s + "<!-- body -->" + Chr(13)
	s + "body " + Chr(13)
	s + "{ background-color: #000000; color: #FFFFFF; " + Chr(13)
	s + "font-family:'consolas'; font-size:20px; font-style:bold }" + Chr(13)
	s + "" + Chr(13)
	s + "<!-- div classes -->" + Chr(13)
	s + ".norm { background-color: #000000; color:#808080; position:fixed }" + Chr(13)
	s + ".over { background-color: #4040FF; color:#FFFFFF; position:fixed; cursor:hand }" + Chr(13)
	s + "</style>" + Chr(13)
	s + "" + Chr(13)
	s + "<script language=JavaScript>" + Chr(13)
	s + "" + Chr(13)
	s + "<!-- user interface event handler -->" + Chr(13)
	s + "function eventhandler(event)" + Chr(13)
	s + "{" + Chr(13)
	s + "	<!--	alert(event) -->" + Chr(13)
	s + "	window.navigate(event)" + Chr(13)
	s + "}" + Chr(13)
	s + "</script>" + Chr(13)
	s + "" + Chr(13)
	s + "</head>" + Chr(13)
	s + "<body scroll='no'>" + Chr(13)
	s + "" + Chr(13)
	s + "<!-- Button 1 -->" + Chr(13)
	s + "<div 	style = " + Chr(34) + "left:40%; top:4px; width:100px; height:24px;" + Chr(34) + " " + Chr(13)
	s + "	class = " + Chr(34) + "norm" + Chr(34) + "; " + Chr(13)
	s + "	onmouseover = " + Chr(34) + "this.className = 'over'" + Chr(34) + "; " + Chr(13)
	s + "	onmouseout = " + Chr(34) + "this.className = 'norm'" + Chr(34) + ";" + Chr(13)
	s + "	onclick = eventhandler(" + Chr(34) + "Button01_CLICKED" + Chr(34) + "); >" + Chr(13)
	s + "	" + Chr(13)
	s + "	<center>Button01" + Chr(13)
	s + "</div>" + Chr(13)
	s + "" + Chr(13)
	s + "<!-- Button 2 -->" + Chr(13)
	s + "<div style = " + Chr(34) + "left:48%; top:4px; width:100px; height:24px;" + Chr(34) + " " + Chr(13)
	s + "	class = " + Chr(34) + "norm" + Chr(34) + " " + Chr(13)
	s + "	onmouseover = " + Chr(34) + "this.className='over'" + Chr(34) + "; " + Chr(13)
	s + "	onmouseout = " + Chr(34) + "this.className='norm'" + Chr(34) + ";" + Chr(13)
	s + "	onclick = eventhandler(" + Chr(34) + "Button02_CLICKED" + Chr(34) + "); >" + Chr(13)
	s + "	" + Chr(13)
	s + "	<center>Button02" + Chr(13)
	s + "</div>" + Chr(13)
	s + "" + Chr(13)
	s + "</body>" + Chr(13)
	s + "</html>" + Chr(13)	
	ProcedureReturn s
EndProcedure