enableHTML/disableHTML ?

utopiomania · Post by **utopiomania** » Thu Jan 03, 2008 11:11 pm

Imagine developing html/scripts for the webGadget by editing procedures like the one below:

By adding @DQUOTES and things like: html + "" to every change you make to the script..

procedure.s web2Page1()
  ;html
  html.s + "<html>" + #CR$
  html.s + "<head>" + #CR$
  html.s + "<title></title>" + #CR$

  html + "<style type = 'text/css'>" + #CR$
  html + "  body{font-family:system; font-size:18px; font-weight:800}" + #CR$
  html + "</style>" + #CR$ + #CR$

  html + "<script language=" + #DQUOTE$ +"vbscript" + #DQUOTE$ +">" + #CR$
  html + "dim visible :visible = " + #DQUOTE$ +"" + #DQUOTE$ +"" + #CR$
  html + "dim hidden :hidden = " + #DQUOTE$ +"none" + #DQUOTE$ +"" + #CR$

  html + "dim headerBg :headerBg = " + #DQUOTE$ +"white" + #DQUOTE$ +"" + #CR$
  html + "dim headerFg :headerFg = " + #DQUOTE$ +"red" + #DQUOTE$ +"" + #CR$

  html + "// HEADER1 EVENTS" + #CR$
  html + "sub header1_onClick()" + #CR$
  html + "	if content1.style.display = visible then" + #CR$
  html + "		//close it" + #CR$
  html + "		content1.style.display = hidden" + #CR$
  html + "	else" + #CR$
  html + "		//open it" + #CR$
  html + "		content1.style.display = visible" + #CR$
  html + "		//close the other headers" + #CR$
  html + "		content2.style.display = hidden" + #CR$
  html + "	end if" + #CR$
  html + "end sub" + #CR$

  html + "sub header1_onMouseOver()" + #CR$
  html + "	header1.style.cursor = " + #DQUOTE$ +"hand" + #DQUOTE$ +"" + #CR$
  html + "	header1.style.backgroundcolor = headerBg" + #CR$
  html + "	header1.style.color = headerFg" + #CR$
  html + "end sub" + #CR$

  html + "sub header1_onMouseOut()" + #CR$
  html + "	header1.style.cursor = " + #DQUOTE$ +"arrow" + #DQUOTE$ +"" + #CR$
  html + "	header1.style.backgroundcolor = " + #DQUOTE$ +"white" + #DQUOTE$ +"" + #CR$
  html + "	header1.style.color = " + #DQUOTE$ +"black" + #DQUOTE$ +"" + #CR$
  html + "end sub" + #CR$

  html + "// HEADER2 EVENTS" + #CR$
  html + "sub header2_onClick()" + #CR$
  html + "	if content2.style.display = visible then" + #CR$
  html + "		//close it" + #CR$
  html + "		content2.style.display = hidden" + #CR$
  html + "	else" + #CR$
  html + "		//open it" + #CR$
  html + "		content2.style.display = visible" + #CR$
  html + "		//close the other headers" + #CR$
  html + "		content1.style.display = hidden" + #CR$
  html + "	end if" + #CR$
  html + "end sub" + #CR$

  html + "sub header2_onMouseOver()" + #CR$
  html + "	header2.style.cursor = " + #DQUOTE$ +"hand" + #DQUOTE$ +"" + #CR$
  html + "	header2.style.backgroundcolor = headerBg" + #CR$
  html + "	header2.style.color = headerFg" + #CR$
  html + "end sub" + #CR$

  html + "sub header2_onMouseOut()" + #CR$
  html + "	header2.style.cursor = " + #DQUOTE$ +"arrow" + #DQUOTE$ +"" + #CR$
  html + "	header2.style.backgroundcolor = " + #DQUOTE$ +"white" + #DQUOTE$ +"" + #CR$
  html + "	header2.style.color = " + #DQUOTE$ +"black" + #DQUOTE$ +"" + #CR$
  html + "end sub" + #CR$

  html + "</script>" + #CR$
  html + "</head>" + #CR$

  html + "<body bgcolor = '#FAFAFA' scroll = 'no'>" + #CR$
  html + "<span id = 'header1'>ITEM 1</span>" + #CR$
  html + "	<span id = 'content1' style = " + #DQUOTE$ +"display:none; background-color:'#fefefe'" + #DQUOTE$ +">" + #CR$
  html + "	<br><a href = '#'>1.1</a>" + #CR$
  html + "	<br><a href = '#'>1.2</a>" + #CR$
  html + "	<br><a href = '#'>1.3</a>" + #CR$
  html + "	<br><a href = '#'>1.4</a>" + #CR$
  html + "</span>" + #CR$
  html + "<br>" + #CR$
  html + "<span id = 'header2'>ITEM 2</span>" + #CR$
  html + "	<span id = 'content2' style = " + #DQUOTE$ +"display:none; background-color:'#fefefe'" + #DQUOTE$ +">" + #CR$
  html + "	<br><a href = '#'>2.1</a>" + #CR$
  html + "	<br><a href = '#'>2.2</a>" + #CR$
  html + "	<br><a href = '#'>2.3</a>" + #CR$
  html + "	<br><a href = '#'>2.4</a>" + #CR$
  html + "</span>" + #CR$


  html + "</body>" + #CR$
  html + "</html>" + #CR$
  
  procedureReturn html
endProcedure

So.. my wish is that the html could be inserted this way instead:

Code: Select all

procedure.s web2Page1()
EnableHTML
<html>
<head>
<title></title>
<script language="vbscript">

dim visible :visible = ""
dim hidden :hidden = "none"

dim headerBg :headerBg = "white"
dim headerFg :headerFg = "red"

// HEADER1 EVENTS
sub header1_onClick()
	if content1.style.display = visible then
		//close it
		content1.style.display = hidden
	else
		//open it
		content1.style.display = visible
		//close the other headers
		content2.style.display = hidden
	end if
end sub

sub header1_onMouseOver()
	header1.style.cursor = "hand"
	header1.style.backgroundcolor = headerBg
	header1.style.color = headerFg
end sub

sub header1_onMouseOut()
	header1.style.cursor = "arrow"
	header1.style.backgroundcolor = "white"
	header1.style.color = "black"
end sub


// HEADER2 EVENTS
sub header2_onClick()
	if content2.style.display = visible then
		//close it
		content2.style.display = hidden
	else
		//open it
		content2.style.display = visible
		//close the other headers
		content1.style.display = hidden
	end if
end sub

sub header2_onMouseOver()
	header2.style.cursor = "hand"
	header2.style.backgroundcolor = headerBg
	header2.style.color = headerFg
end sub

sub header2_onMouseOut()
	header2.style.cursor = "arrow"
	header2.style.backgroundcolor = "white"
	header2.style.color = "black"
end sub

</script>
</head>

<body>
<span id = "header1">THIS IS HEADER 1</span>
	<span id = "content1" style = "display:none; background-color:'#fefefe'">
	<br><a href = '#'>This is a line of text</a>
	<br><a href = '#'>This is a line of text</a>
	<br><a href = '#'>This is a line of text</a>
	<br><a href = '#'>This is a line of text</a>
</span>
<br>
<span id = "header2">THIS IS HEADER 2</span>
	<span id = "content2" style = "display:none; background-color:'#fefefe'">
	<br><a href = '#'>This is a line of text</a>
	<br><a href = '#'>This is a line of text</a>
	<br><a href = '#'>This is a line of text</a>
	<br><a href = '#'>This is a line of text</a>
</span>


</body>
</html>
disableHTML
  procedureReturn html
endProcedure

Would make the webgadget thingie a lot more useful right from the inside of the PB IDE

Post by **Kiffi** » Thu Jan 03, 2008 11:42 pm

utopiomania wrote:Imagine developing html/scripts for the webGadget by editing procedures like the one below:

for this case i always use external text-files and include them
via BinaryInclude into the pb-exe.

Code: Select all

Procedure.s web2Page1() 
 ProcedureReturn PeekS(?MainTemplate, #PB_Any, #PB_Ascii)
EndProcedure

DataSection
  MainTemplate:
  IncludeBinary "templates\MainTemplate.html"
  Data.b 0
EndDataSection

Greetings ... Kiffi

Dare · Post by **Dare** » Thu Jan 03, 2008 11:49 pm

@kiffi - snap!

It would be nice, though, if there was a way to support quotes within quotes.

Either """" or (as single quotes are in use already) some embracing characters that provide alternatives to quotes and thus allow quotes to be embedded. Eg

Code: Select all

myStr = {They said "WTF! Are these people NEVER satisfied". To which the response was "Seems not!"}

or

Code: Select all

myStr = #ALTQThey said "WTF! Are these people NEVER satisfied". To which the response was "Seems not!"#ALTQ

utopiomania · Post by **utopiomania** » Sat Jan 05, 2008 9:17 pm

Kiffi, can you load html into the wbgadget directly this way by using 'setGadgetItemText(web1, #PB_WEB_HTMLCODE, html)' ?

without dealing with embedded '"''s?

Dare · Post by **Dare** » Sat Jan 05, 2008 11:57 pm

Kiffi probably has a smarter way, but I use this:

Code: Select all

..
  n = ?licenceEnd - ?licence
  w=Space(n)
  CopyMemory(?licence,@w,n)
  SetGadgetItemText(#WebInfo, #PB_Web_HtmlCode,w)
..
DataSection
..
 licence:
  IncludeBinary "licence.txt"
 licenceEnd:
..
EndDataSection

The included file can have things like <a href="whereever">link</a>

utopiomania · Post by **utopiomania** » Sun Jan 06, 2008 3:09 am

Hmm.. Thanks to Kiffi and Dare!. Works like a charm. Using this I can edit the html for the different parts of
my UI in separate files/tabs in the IDE as easy as editing the .pb source itself.

Forgot to say, thanks to the team who seems to have figured this out pretty well, and sorry to have bothered you with a silly request

Seymour Clufley · Post by **Seymour Clufley** » Sat Feb 07, 2009 10:34 am

Just for the sake of +1, I'm going to say that I think the original idea (EnableHTML/DisableHTML) would be a really cool feature.

Little John · Post by **Little John** » Sat Feb 07, 2009 11:35 am

Seymour Clufley wrote:Just for the sake of +1, I'm going to say that I think the original idea (EnableHTML/DisableHTML) would be a really cool feature.

The idea is useful in principle. There is no need to restrict such a feature only to HTML, though. Much better -- with the same effect -- would be say StringSection / EndStringSection or so. There are other languages that have something like this built-in.

Regards, Little John

Seymour Clufley · Post by **Seymour Clufley** » Sat Feb 07, 2009 2:14 pm

Well, yes, I was thinking other languages would be useful. Even just with reference to the webgadget - PHP, JavaScript and Perl.

But what about syntax highlighting within such a section?

Little John · Post by **Little John** » Sat Feb 07, 2009 2:50 pm

Seymour Clufley wrote:But what about syntax highlighting within such a section?

In the PB editor, I only expect highlighting for PB syntax.
In a special section for long text (such as [[ ... ]] in Lua), I personally do not need syntax highlighting for the text entered there.

Regards, Little John

utopiomania · Post by **utopiomania** » Wed Feb 11, 2009 7:39 pm

I use this to test out the html in another editor, copy it to the clipboard and then paste the result into the right procedures
in my PB programs.

Code: Select all

;-program notes
;PB4.10, 20080104, converts html on the clipboard 
;into string statements and puts them back
enumeration
  #WIN
  #FRAME
  #TEXT
  #EDIT
  #CONVERT
  #CANCEL
endEnumeration

declare openMainWindow()
declare convertTostring()

;-program entry
openMainWindow()
 
;-program event handler
repeat
  event = waitWindowEvent()
  select event 
    case #PB_EVENT_GADGET
      select eventGadget()
        case #CONVERT
          convertTostring()
          messageRequester("Done", "Converted html is placed on the clipboard")
          setWindowState(#WIN, #PB_WINDOW_MINIMIZE)
        case #CANCEL
          end
      endSelect
    case #PB_EVENT_CLOSEWINDOW
      end
  endSelect
forever

procedure openMainWindow()
  flags = #PB_WINDOW_SCREENCENTERED | #PB_WINDOW_SYSTEMMENU | #PB_WINDOW_MINIMIZEGADGET
  if openWindow(#WIN, 0, 0, 540, 380, "Converter", flags)
    stickyWindow(#WIN, 1)
    frame3DGadget(#FRAME, 20, 10, 500, 350, "Html To String Converter")
    textGadget(#TEXT, 60, 50, 420, 100, "Click 'Convert' to convert clipboard data to string statements")
    editorGadget(#EDIT, 0, 0, 0, 0)
    buttonGadget(#CONVERT, 330, 320, 80, 22, "Convert")
    buttonGadget(#CANCEL, 420, 320, 80, 22, "Cancel")
  endIf
endProcedure

procedure convertToString()
  ;get clipboard text
  sendMessage_(gadgetId(#EDIT), #EM_PASTESPECIAL, #CF_TEXT, 0)
  lines = countGadgetItems(#EDIT)
  for line = 0 to lines - 1
    text.s = getGadgetItemText(#EDIT, line)
    text = replaceString(text, chr(34), chr(34) + " + chr(34) + " + chr(34))
    ;add dquotes and cr
    if line = 0
      text = chr(9) + "s.s + " + chr(34) + text + chr(34) + " + chr(13)"
    else
      text = chr(9) + "s + " + chr(34) + text + chr(34) + " + chr(13)"
    endIf
    ;put it back
    setGAdgetItemText(#EDIT, line, text)
  next line
  ;copy converted text back to the clipboard
  sendMessage_(gadgetId(#EDIT), #EM_SETSEL, 0, -1)
  sendMessage_(gadgetId(#EDIT), #WM_CUT, 0, 0)
endProcedure

AND51 · Post by **AND51** » Wed Feb 11, 2009 8:50 pm

I would also appreciate "here documents", as they are called in Perl, for example.

But please, keep in mind that implementing such a feature requests several things.
E. g. the code must be readable and 'clean', so I depreciate suggestions like using [] or curly brackets.

In my opinion, we could try it with a syntax similar to DataSection+EndDataSection:

Code: Select all

EnableExplicit


startLabel:
TextSection
<html>
<head>
<title>TextSection  - suggestion</title>
<body>Example HTML page</body>
<html>
EndTextSection
endLabel:


testA:
TextSection
of course,
you can also put plain text and / or binary data into here...
EndTextSection
testB:


Debug Peeks(?startLabel, ?endLabel-?startLabel)

Reading those blocks might be done with labels and PeekS(). Perhaps Fred would even be so kind to implement some kind of CatchTextSection()-command?

Well but there is one problem: What if I want to use the word "EndTextSextion" within such a section, e. g. for a PB manual? Perl solves this problem by making use of userdefined "string terminators", so it lets you define your end-keyword yourself.
I would find this not a convenient, but a stisfying solution. But you must pay attention to the fact, that (Pure)Basic must not get Perl-Like or Interpreter-like!

PureBasic Forums - English

enableHTML/disableHTML ?

enableHTML/disableHTML ?

Re: enableHTML/disableHTML ?