#2561 FWT to HTML

jhughes Thu 1 Sep 2016

Is there a defined process for using FWT to make an HTML application? I can't seem to find any supporting documentation on the how to perform this, only the claim that it's possible.

I tried to run the FwtDemo that has a method in there called "makeWebBrowser" and wanted to see what that looked like in case that was the direction to take but the demo won't run.

sys::NullErr: Coerce to non-null
fan.sys.NullErr.makeCoerce (NullErr.java:38)
FantomExamples::FwtDemo.instance$init$FantomExamples$FwtDemo (FwtDemo.fan:638)
FantomExamples::FwtDemo.make$ (FwtDemo.fan:16)
FantomExamples::FwtDemo.make (FwtDemo.fan:16)
java.lang.reflect.Method.invoke (Unknown)
fan.sys.Method.invoke (Method.java:559)
fan.sys.Method$MethodFunc.callList (Method.java:198)
fan.sys.Type.make (Type.java:246)
fan.sys.ClassType.make (ClassType.java:110)
fan.sys.Type.make (Type.java:236)
fanx.tools.Fan.callMain (Fan.java:185)
fanx.tools.Fan.executeType (Fan.java:147)
fanx.tools.Fan.execute (Fan.java:41)
fanx.tools.Fan.run (Fan.java:308)
fanx.tools.Fan.main (Fan.java:346)

SlimerDude Thu 1 Sep 2016

I had a look at line FwtDemo.fan:638:

File scriptDir  := File.make(this.typeof->sourceFile.toStr.toUri).parent

Not that it's mentioned, but it seems dmeo.fan is only meant to be run as an individual script, and not from a Fantom pod.

Try running demo.fan directly (as a script) from a command prompt:

C:\> cd C:\Apps\fantom-1.0.69\examples\fwt

C:\Apps\fantom-1.0.69\examples\fwt> fan demo.fan

jhughes Thu 1 Sep 2016

That let me run the demo, thanks. Didn't seem to be the solution I was hoping unfortunately.

Any guidance on the intended procedure for using FWT to build an HTML application?

andy Thu 1 Sep 2016

If you're beginning a new app - I'd recommend you start with domkit - which is intended to replace FWT-JS

Its not quite as mature as FWT but will get alot of TLC over the next few months (and maybe more importantly FWT-JS won't :)

jhughes Thu 1 Sep 2016

I've looked at the domkit and while there's various examples of how to create single instances of things, there's no clear definition of how you put all the pieces together.

What is the design for using the domkit within fantom to deploy to an html application? I have yet to find a clear description of this i.e.

  1. Create something in fantom with the domkit (still not entirely sure how to do that yet)
  2. Do something with it here
  3. Access it via a browser.

What is step 2?

SlimerDude Thu 1 Sep 2016

Step 2 is to create a web server that serves up static files, and your compiled Fantom javascript files.

It is talked about here: Javascript running in Browsers and there's a quick demo of an FWT widget running in a browser in /examples/js

C:\> cd C:\Apps\fantom-1.0.69\examples\js

C:\Apps\fantom-1.0.69\examples\js> fan mount.fan

[info] [web] http started on port 8080

Although the demo runs FWT, the same principles should apply for domkit.

andy Fri 2 Sep 2016

Yeah as @SlimerDude noted - bootstrapping the parent HTML page works pretty much the same as FWT (also anyone can serve that JS - doesn't need to be Fan/Wisp)

We have a whole test suite for how domkit works with lots of examples we still need to open source - thats on the list - as well as lots of docs on how to build and use domkit.

I'm sorta thinking there will be a new docDomkit or something.

Timeline for that is within the next month or two.

jhughes Fri 2 Sep 2016

Still struggling a bit on making FWT run in browser. I modified the demo to work with my wisp server and is failing to load my FWT pod in browser. I can see all the pods get loaded in the browser console so I know it's not a resource issue. After the files load, I get three errors but have no idea how to troubleshoot them since nothing in the FWT project has any errors or warnings about js incompatibility and runs just fine outside of a browser.

Error 1: Uncaught TypeError: Cannot read property TypeCoercer of undefined

Error 2: Uncaught sys::UnknownPodErr: afJson (anonymous function) @ APIDashboard.fan:4

Error 3: Uncaught sys::UnknownTypeErr: webAPI::main

I feel like i'm missing something in the implementation of this line of the documentation but have no idea what.

WebUtil.jsMain(out, "myPod::Main")

That's also just a complete guess at this point since I am out of ideas right now on getting this to work.

jhughes Sat 3 Sep 2016

After abandoning the afJson pod completely and rewriting my own JSON parsing classes using the JsonInStream and JsonOutStream at the core, I was able to remove the first two errors. After re-reading the WebUtil docs I figured out the proper way to create that jsMain portion and my FWT now runs in the browser!

Thanks for the help.

SlimerDude Mon 5 Sep 2016

Hi, I'm pleased you got FWT to run in a browser!

With regards to errors 1 and 2 in your list (for future reference), it sounds like you just hadn't included the JS code for afJson and it's dependencies in the HTML page.

jhughes Fri 9 Sep 2016

It wasn't a missing dependency for afJson, it was afJson. I don't have version control setup yet so I can't get my code back to recreate the same errors but if i just go ahead and re-add the afJson to the header:

out.includeJs(/pod/afJson/afJson.js)

The first error comes back even if there's not a single reference to afJson anywhere.

Shows it resolving afJson in the browser: fan logo

This error only shows up as long as afJson is included in the header: fan logo

Login or Signup to reply.