Was working with painting an image with gwt to modify how a tab would look and am now curious about the gwt package in general and more specifically in the browser. Haven't been able to find any docs explaining how the intended use of this package is supposed to be other than just the methods and types themselves.

I have successfully used Image.makePainted to change the tab image and from another post I found I had to add Desktop.bounds() before I could even call that method. Still don't know why that works or what a GfxEnv is but I know without it I will get the error:

sys::Err: No GfxEnv is active

Once I add in Desktop.bounds() before painting the image, the images to tabs change as expected on the desktop but when loading in the browser, it just loads a blank page. If I remove the Desktop.bounds from the code, it'll load in the browser but the images don't show up.

The gfx API is how you can do custom rendering/painting. In the fantom open source we have backings of it for JavaScript Canvas (and SWT). But in SkySpark we also have implementations of it for PDF and SVG. So if you have code which wants to custom paint something, then you can get benefit of rendering all three ways (Canvas, SVG, and PDF). It is how we do all our charting for example.

For really good example look in the js demo under examples - you use a Canvas widget in fwt to do custom rendering.

I don't see any Canvas widget in use in that example.

I want to use the Image.makePainted (gfx in general really) method so I can pretty up the look and feel of a tab but to use that method, I have to use Desktop.bounds which breaks JavaScript implementation. Haven't been able to find the equivalent JavaScript compliant method when you want to use the gfx package which is odd since there is no warning about it not being compiled to Js.

I take it you mean FWT (Fantom Widget Toolkit) and not GWT (Google Web Toolkit)?

Calling Desktop.bounds() is just a workaround to initialise a internal class that is otherwise not accessible to the main Fantom API. I believe the call is only required when running desktop SWT implementation of FWT, so you could wrap the call in an if statement:

if (Env.cur.runtime != 'js')
    Desktop.bounds()

use Image.makePainted() to change the tab image

I really doubt this will work in the JS implementation of FWT.

Tab images are simple HTML img tags with a src URL (*) - to swap it out with a manually created image would require the JS impl to serialise the image to a data URL. That said, I've just noticed the HTMLCanvasElement.toDataURL() method, so a patch may be possible.

there is no warning about it not being compiled to Js

I find that the JS implementation of FWT can be a bit sketchy with some methods on some classes not having native implementations. (I agree it would be nicer if they were implemented with stub that just threw an UnsupportedErr).

Make sure you have your browser debugging console window open and watch it for JS errors.

UPDATE: (*) Actually, I think I just made that bit up!

I actually meant GFX, not GFW, working with both gfx and fwt, just mixed up together when I made the post and can't change the title.

I can easily do the if statement to handle when I want to launch on the Desktop but once I want to load the same UI in the browser, that's where i'm stuck. I played around with just drawing something on a canvas and adding it to the tab to simulate the image but that will overwrite the existing data on the tab. I looked around trying to find some way to grab the root graphics object from a widget so I can maybe just redraw the entire tab onto a canvas with the super repaint method on the tab and add in my additions manually with the graphics class but no luck so far.

Does any of that sound like the right approach? Is there a way to draw FWT widgets onto a canvas and then add then use gwt methods to modify so they are compatible in both Desktop and javascript?

Since the fwt was originally written as a desktop toolkit some things don't work that well for JS browser. That is basically the whole reason we decided to drop FWT and move to domkit which is 100% targeted towards the browser environment.

In the JS environment its hard to mix b/w the Canvas and Image, since images are really designed for use by the <img> tag using a URI. We have a backdoor hook we use in SkySpark to turn a Canvas into a data URI though with a JS native method. Code below if you want to try it out.

** Write canvas to PNG data URL string
static native Str canvasToPng(Canvas canvas)

** JS implementation
fan.chart.GfxUtilPeer.canvasToPng = function(canvas)
{
  var div = document.createElement("div");
  var elem = canvas.peer.create(div, canvas);
  canvas.peer.attachTo(canvas, elem);
  canvas.relayout();
  return canvas.peer.elem.firstChild.toDataURL("image/png");
}

Really we need probably need to get you to start spinning up on domkit though in next week or two. Have some ideas on that

I can start to look at the domkit, i'm just trying to find where all the limitations are so I know what I can and can't do in each environment.

How close are all the new domkit features from getting released and coming out of beta so development on it won't be broken? Similar question on further documentation on the domkit. Seems a bit lacking for a new user (which I am/will be) to be able to get started.