All Topics

#2571 How to Create a SashBox and attach it to the DOM in a Webserver

JohnNuccio Mon 17 Oct 2016

I am having trouble creating a SashBox( or anything from the domkit) and than attaching it to the DOM in a Webserver. Does anyone have a really in depth example that illustrates how to accomplish this task.

andy Mon 17 Oct 2016

We'll hopefully be adding lots of docs here soon. But a domkit node is just a normal HTML DOM element - so you can add it anywhere:

sash := SashBox
{
  it.dir = Dir.right
  it.sizes = ["40%", "60%"]
  Box { it.text="Left Side" },
  Box { it.text="Right Side" }, 
}

// add as main content
Win.cur.doc.body.add(sash)   

// add under a specific node
Win.cur.doc.querySelector("div.foobar").add(sash)

But make sure you are actually loading domkit.css - you'll need that to get it working properly.

JohnNuccio Tue 18 Oct 2016

I have a Wisp Web Server. And I am trying to modify the Out Stream. How do I use Win to modify my Out Stream with a Sash Box. Also I am using domkit.

Void onIndex()
{

sash := SashBox {

it.dir = Dir.right
it.sizes = ["40%", "60%"]
Box { it.text="Left Side" },
Box { it.text="Right Side" },

}

if (req.method != "GET") { res.sendErr(501); return }
res.headers["Content-Type"] = "text/html; charset=utf-8"
out := res.out
out.docType
out.html
out.head
  .title.w("Title").titleEnd
  .headEnd
out.body
Win.cur.doc.body.add(sash) 
out.bodyEnd.htmlEnd
}

SlimerDude Tue 18 Oct 2016

Hi John,

Andy's code snippet is Fantom (Javascript) code that is meant to be run in the browser, after your HTML content has been delivered.

So your HTML first needs to be modified to include Fantom JS code from all the dependent pods. This little snippet shows something like what your HTML should look like:

http://eggbox.fantomfactory.org/pods/afDuvet/doc/#nonRequireJSUsage:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="/pods/sys/sys.js"></script>
    <script type="text/javascript" src="/pods/gfx/gfx.js"></script>
    <script type="text/javascript" src="/pods/web/web.js"></script>
    <script type="text/javascript" src="/pods/dom/dom.js"></script>
</head>
<body>
    <h1>Old Skool Example</h1>

    <script type="text/javascript">
        fan.dom.Win.cur().alert("Hello Mum!");
    </script>
</body>
</html>

Your Wisp server then need to respond to, and serve up, the URLs listed above.

Personally, I find it all a lot of work, so if you're feeling brave you could try BedSheet and Duvet to do all this for you.

This article then guides you through running FWT in a browser: Run Fantom Code In a Browser!.

(Note I still need to update it for domkit.)

JohnNuccio Tue 18 Oct 2016

This is the result in the browser.

<!DOCTYPE html>
<html>
<head>
     <script type="text/javascript" src="/pods/sys/sys.js"></script>
     <script type="text/javascript" src="/pods/gfx/gfx.js"></script>
     <script type="text/javascript" src="/pods/web/web.js"></script>
     <script type="text/javascript" src="/pods/dom/dom.js"></script>
</head>
  <body>
     <h1>Old Skool Example</h1>

      <script type="text/javascript">
         fan.dom.Win.cur().alert("Hello Mum!");
      </script>
  </body>
</html>

But how do you write this in Fantom to get this result in the Browser?

SlimerDude Tue 18 Oct 2016

Anyway you want, it's just a HTML string!

Here's the simplest:

res.headers["Content-Type"] = "text/html; charset=utf-8"
out := res.out
out.print("""<!DOCTYPE html>
             <html>
             <head>
                  <script type="text/javascript" src="/pods/sys/sys.js"></script>
                  <script type="text/javascript" src="/pods/gfx/gfx.js"></script>
                  <script type="text/javascript" src="/pods/web/web.js"></script>
                  <script type="text/javascript" src="/pods/dom/dom.js"></script>
             </head>
               <body>
                  <h1>Old Skool Example</h1>
             
                   <script type="text/javascript">
                      fan.dom.Win.cur().alert("Hello Mum!");
                   </script>
               </body>
             </html>""")

Or you could continue to use WebOutStream:

res.headers["Content-Type"] = "text/html; charset=utf-8"
out := res.out
out.docType
out.html
out.head
   .script("type='text/javascript' src='/pods/sys/sys.js'").scriptEnd
   .script("type='text/javascript' src='/pods/gfx/gfx.js'").scriptEnd
   ...
   ...

JohnNuccio Wed 19 Oct 2016

I got the WebOutStream to load the SashBox, Thanks SlimerDude.

Also the HTML String version worked well too,but for anyone else wanting to try out the string example change the script to this.

<script type="text/javascript">
   alert("Hello Mum!");
</script