HTML-Anzeige

Hier könnt Ihr gute, von Euch geschriebene Codes posten. Sie müssen auf jeden Fall funktionieren und sollten möglichst effizient, elegant und beispielhaft oder einfach nur cool sein.
Antworten
Oliver13
Beiträge: 35
Registriert: 08.05.2010 15:49

HTML-Anzeige

Beitrag von Oliver13 »

Hallo zusammen,

mit dem Webgadget lassen sich ja nette Oberflächen basteln. Damit es etwas einfacher geht, habe ich nachstehende Routine gemacht:
damit kann eine Standardvorlage (CSS/HTML) genutzt werden, die man einfach als Binärdatei einbindet.

Vielleicht hat ja noch jemand ein paar schöne CSS -Beispiele (zB für Listen, Tabellen etc.), die wir hier sammeln können ?

CA
Oli

Code: Alles auswählen

Global HTMLStyle$

Procedure NavigationCallback(Gadget, Url$) 
  Protected slnk$, bRet
  If FindString(url$,"#")>0
    slnk$=StringField(URL$,2,"#")
  Else
    slnk$=Url$
  EndIf
  Debug slnk$

  Select UCase(slnk$)
    Case "COMMAND1"
      ProcedureReturn #False
     Default
  EndSelect
  ProcedureReturn #True
EndProcedure 

Procedure SetHTML (iGadget,sText$,sTemplate$="", bNoScroll=1,AltNavCallback=0)
  Protected st$, stmp$
  Protected Browser.iwebbrowser2
  ; iGadget: Webgadget
  ; sText$: anzuzeigender Text
  ; sTemplate$: HTML/CSS-Vorlage (optional)
  ; bNoScroll: rechte Scrollbar ausblenden
  ; AltNavCallback: Alternative Callbackfunction für Ereignisverarbeitung 
  
  If IsGadget(iGadget)
    Browser.iwebbrowser2=GetWindowLongPtr_(GadgetID(iGadget),#GWL_USERDATA)
    If browser
      browser\put_Silent(#True)
    EndIf
    If sTemplate$=""
      st$=HTMLStyle$
    Else
      st$=sTemplate$
    EndIf
    
    If bNoScroll=1: stmp$="scroll='no'":EndIf
    st$=ReplaceString(st$,"[SCROLL]",stmp$) 
    st$=ReplaceString(st$,"[TEXT]",sText$)
    SetGadgetItemText(iGadget,#PB_Web_HtmlCode,st$)
    If AltNavCallback=0
      SetGadgetAttribute(iGadget, #PB_Web_NavigationCallback, @NavigationCallback())
    Else
      SetGadgetAttribute(iGadget, #PB_Web_NavigationCallback, AltNavCallback)
    EndIf
  EndIf  
EndProcedure  

DataSection
  HTML_Template:
  IncludeBinary "template.htm"
  HTML_Template_End:
EndDataSection

HTMLStyle$=PeekS(?HTML_Template,?HTML_Template_End-?HTML_Template)

; Sample
If OpenWindow(0, 0, 0, 600, 300, "WebGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  id=WebGadget(#PB_Any, 10, 10, 580, 280, "")
  sSampletext$= "<b>Aber hallo</b> <p id='infobox'>Ein Kasten</p>"
  sSampletext$+"<h1>Und nun noch ein Link</h1><a href='#command1'>Befehl 1</a>"
  sSampletext$+ "<hr id='line'>"
  sSampletext$+"<h1>Und jetzt eine Linkliste</h1><p id='box' width='150'><a class='link' href='#command2'>Befehl 2</a><a class='link' href='#command3'>Befehl 3</a></p>"
  sethtml(id,sSampletext$)
  Repeat 
  Until WaitWindowEvent() = #PB_Event_CloseWindow
EndIf
template.htm:

Code: Alles auswählen

<html>
<body [SCROLL] oncontextmenu = 'javascript:return false;'>
<style type="text/css">
body { background-color:#FFFFFF;
*
{
  font-family:helvetica; 
  font-size:10pt;
}

h1 {
  font-family:helvetica; 
  font-size:12pt;
  font-weight:bold 
}

#rahmen {
  border-width:1.5px;
  border-style:solid;
  border-color:#c0c0c0;
  background-color:#e0e0e0;
  padding:0.5em;
  text-align:justify;
  font-family:helvetica; 
  font-size:small;
  width: 200px;
}

#box {
  border-width:1.5px;
  border-style:solid;
  border-color:#c0c0c0;
  text-align:justify;
  font-family:helvetica; 
  font-size:10pt;
	padding: 0px 0px 0px 0px;
	margin-left: 0px;
  width:120px;
}

#infobox {
  border-width:1.5px;
  border-style:solid;
  border-color:#c0c0c0;
  background-color:#E0E0E0;
  text-align:justify;
  font-family:helvetica; 
  font-size:10pt;
  margin-left: 0px;
}

#line {
  border-width:0.2pt;
  border-style:solid;
  border-color:blue;
}

a.link{
display:block;
width: 120px;
color:#000000;
text-align:center;
text-decoration:none;
}

a.link:hover{
color:#ffffff;
text-decoration:none;
background-color:#006699;
} 
</style>
[TEXT]
</body<
</html>
Nach oben
Benutzeravatar
TheCube
Beiträge: 169
Registriert: 20.07.2010 23:59
Computerausstattung: Risen 3400G 16MB Win10-64Bit
Wohnort: NRW

Re: HTML-Anzeige

Beitrag von TheCube »

:D Die Idee hat ja durchaus einen gewissen Charme, für mich insbesondere weil GifAnims auch ohne extra Code
animiert laufen müssten. (z.B. für schicke About-Fenster oder anderes)
Aber da ich bezüglich CSS/HTML gar nix kann wird es wohl auch nix mit selbstdesignten Fenstern. /:->
Nach oben
Benutzeravatar
Kiffi
Beiträge: 10715
Registriert: 08.09.2004 08:21
Wohnort: Amphibios 9

Re: HTML-Anzeige

Beitrag von Kiffi »

TheCube hat geschrieben:Aber da ich bezüglich CSS/HTML gar nix kann wird es wohl auch nix mit selbstdesignten Fenstern. /:->
man muss ja nicht alles von Grund auf selber machen.

html.pb:

Code: Alles auswählen

If OpenWindow(0, 0, 0, 800, 600, "WebGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered) 
  WebGadget(0, 0, 0, WindowWidth(0), WindowHeight(0), "") 
  SetGadgetItemText(0, #PB_Web_HtmlCode, PeekS(?HTML))
  Repeat 
  Until WaitWindowEvent() = #PB_Event_CloseWindow 
EndIf

DataSection
  HTML:
  IncludeBinary "html.html": Data.b 0
EndDataSection
html.html:

Code: Alles auswählen

<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Demo: Terms and Conditions</title>
		<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css" />
		<!-- load dojo and provide config via data attribute -->
		<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
		<script>
			// Require the Dialog class
			require(["dijit/registry", "dijit/Dialog","dijit/form/Button"], function(registry){
			// Show the dialog
				window.showDialog = function() {
					registry.byId("terms").show();
				}
				// Hide the dialog
				window.hideDialog = function() {
					registry.byId("terms").hide();
				}
				// Force them to provide an answer
				window.doAlert = function() {
					alert("You must agree!");
				}
			});
		</script>
	</head>
	<body class="claro">
		<h1>Demo: Terms and Conditions</h1>
		<button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:showDialog">View Terms and Conditions</button>
		<div class="dijitHidden">
		<div data-dojo-type="dijit.Dialog" style="width:600px;" data-dojo-props="title:'Terms and Conditions'" id="terms">
			<p><strong>Please agree to the following terms and conditions:</strong></p>
			<div style="height:160px;overflow-y:scroll;border:1px solid #769dc4;padding:0 10px;width:560px;"><p>
			FREIBIER F&Uuml;R ALLE! :-)
			</p></div>
			<br />
			<button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:hideDialog">I Agree</button>
			<button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:doAlert">I Don't Agree</button>
		</div>
		</div>
	</body>
</html>
Im obigen Beispiel wird der Einfachheit halber sowohl JS als auch CSS
von Google gehostet. Wer mag, kann sich die entsprechenden Daten
von der lokalen Platte laden. Damit dürfte der Aufbau im Browser ein
wenig fixer sein.

Und das hier dürfte mit Pfad-Anpassungen auch funktionieren:

http://demos.dojotoolkit.org/demos/them ... /demo.html

Wie man die Kommunikation PB <-> JavaScript hinbekommt, steht
sowohl hier im deutschen als auch im englischen Forum (bin jetzt
zu faul zu suchen)

Achja, bevor hier wieder entsprechende Kommentare gibt: JavaScript
muss im Browser natürlich zugelassen sein, sonst ist das ganze ziemlich
witzlos.

Grüße ... Kiffi
a²+b²=mc²
Nach oben
Antworten

Zurück zu „Code, Tipps und Tricks“