#1078 Fan and Websites

jason Sat 17 Apr 2010

Hi All

Please excuse my noob-iness. :)

I am trying to build a website in Fan. And I am wondering how to position elements in a page, for example, some images, text and buttons. Can somebody please demonstrate this? Just something small so I can see for myself. I'm finding it a little hard to get my head around.

Thank you very much!

jase

andy Sat 17 Apr 2010

I assume you mean with FWT - take a look at examples/js/ in your fantom installation. For the most part works just like normal desktop FWT.

The trick is wiring it up to your page via a Weblet. An example of how to do that is here: /doc/examples/js-demo.html

The two key things that script does is:

  1. Expose my pod dependencies in JavaScript
  2. Provide an entry-point to your application using web::WebUtil.jsMain

rfeldman Thu 22 Apr 2010

Hi Andy,

Looking at that link to js-demo.html, I am not seeing how FWT fits into the picture. (Clearly that particular source file is not intended to be an FWT example, as it lacks "using fwt" at the top.)

What I would really like to see is how, for example, /doc/examples/fwt-hello.html would translate into a JavaScript app.

I am starting a new project with several collaborators, an in-browser MMORPG with planned supported platforms of (at least) HTML, Android, and iPhone/iPad, and being able to have a single code base that could trivially generate both HTML and Android App UIs would be fantastic, even if Apple's new policy of banning apps not natively written in Objective C makes that one a pipe dream.

Still, it seems like Fantom is the only game in town that might be equal to the task of Android+HTML in one fell swoop. (I haven't dug around to see if FWT can compile to something that could run on Android's VM, but it seems like it would be doable in principle, no?)

So, to get back to the original question: how would you implement FWT Hello World (using an actual Label Widget, not HTML) in JavaScript?

Thanks!

tactics Thu 22 Apr 2010

@refldman About Android + Fantom, we haven't started any work on such a target for the language, but it's definitely on the radar. It is our intention, though, to make FWT a platform in the original spirit of Java's Swing: "write once, run anywhere."

DanielFath Thu 22 Apr 2010

I guess since the IPhone 3.3.1. clause change there is no point in trying to do a build for iPhone/iPad, right?

andy Fri 23 Apr 2010

The examples/js/demo.fan script illustrates how to "mount" a FWT application from a WebReq using a Weblet. The important part is ShowScript.onGet. Here you can see how it loads the dependencies (one js file per pod). And then executes the entry-point into your Fantom code with WebUtil.jsMain. The jsMain works just like Fantom does from the commandline - takes a pod/type/qname - either static or instance-based.

Typically you will have just one of these Weblets running in your web server - and you launch different code by adjusting your "main" method.

Client-side, however, FWT looks pretty much just like normal desktop code. These examples are the *.fwt files. See examples/js/hello.fwt in particualr. You can see how it extends Window and sets up his content normally. And then uses his main method to "open" the Window in the browser.

andy Fri 23 Apr 2010

Also - just FYI - you can run normal fantom code out of pods from jsMain. The *.fwt files are just there to make it easy to see/modify/reload on the fly for documentation purposes.

rfeldman Sat 24 Apr 2010

Excellent! I am up and running, thanks.

Login or Signup to reply.