HTMLTemplateWidget

[Taras Petrytsyn]

Here link to widget which allow use html files in your pages design
instead making design in Java classes

http://code.google.com/p/htmltemplatewidget/

I will be very greateful for your remarks to this widget.

[John Tamplin]

There doesn't appear to be any code checked in, so all there is to look at is the front page.

The big issue is how do you wire up event handling (such as the hooks to make sure no memory leaks occur in addition to type-safe onClick/etc handlers), and how you handle more complicated widgets.  For example, say you are building something you intend to hook into Tree -- the user now has to build the correct structure of a Tree widget and now the result is fragile (ie, if Tree changes, the HTML has to change as well).  What happens if the appropriate HTML elements aren't provided?

I think a better approach is declarative UI, which solves the problem you want solved in a much more general way and without exposing implementation details.

--
John A. Tamplin
Software Engineer, Google

[Taras Petrytsyn]

>
> There doesn't appear to be any code checked in, so all there is to look at
> is the front page.

Check again please, I already commit source.

> The big issue is how do you wire up event handling (such as the hooks to
> make sure no memory leaks occur in addition to type-safe onClick/etc
> handlers), and how you handle more complicated widgets. For example, say
> you are building something you intend to hook into Tree -- the user now has
> to build the correct structure of a Tree widget and now the result is
> fragile (ie, if Tree changes, the HTML has to change as well). What happens
> if the appropriate HTML elements aren't provided?

I think Tree isn't good example. It is, say , basic widget, but
HTMLTemplate is used for higher level than simple widget design.

> I think a better approach is declarative

> UI<http://code.google.com/p/google-web-toolkit/wiki/DeclarativeUi>,

> which solves the problem you want solved in a much more general way and
> without exposing implementation details.
>

May be, but HTMLTemplate can use just HTML, with inline css and
styles, without any <g:> like tags.
And in DeclarativeUi you have to create class which reflect your
*.ui.xml file, in case of HTMLTemplate there is no need to write ANY
additional classes. Much more simple.
By the way HTMLTemplate already is using in one project, but is is
pity not public.

[John Tamplin]

On Jan 27, 2008 2:17 PM, Taras Petrytsyn <pegas...@gmail.com> wrote:

I think Tree isn't good example. It is, say , basic widget, but
HTMLTemplate is used for higher level than simple widget design.

I don't see any way to attach an event handler to some HTMLTemplate instance, other than the ones inherited from HTML.  How would you propose to add a click listener on one column of a table, for example?

It still seems like this is only useful for the most simple cases.

One other issue is that by doing a separate fetch for each HTML snippett you are incurring many round trips to the server.  A more flexible approach would allow that HTML to be retrieved from an ImmutableResourceBundle (see the incubator) which would allow bundling (and localizing) many HTML snippets in one request (or zero on a browser with data:// URLs if they are small enough).
 

May be, but HTMLTemplate can use just HTML, with inline css and
styles,  without any <g:> like tags.

I will let Joel speak to the finer points of declarative UI, but you can use straight HTML as well.

[Taras Petrytsyn]

> I don't see any way to attach an event handler to some HTMLTemplate
> instance, other than the ones inherited from HTML. How would you propose to
> add a click listener on one column of a table, for example?

HTMLTemplate developed only for simplyfying of design development, and
there is no need to attach handler to it, it is just like layout. You
can attach any handlers to widgets which you add to template.

> One other issue is that by doing a separate fetch for each HTML snippett you
> are incurring many round trips to the server. A more flexible approach
> would allow that HTML to be retrieved from an ImmutableResourceBundle (see
> the incubator) which would allow bundling (and localizing) many HTML
> snippets in one request (or zero on a browser with data:// URLs if they are
> small enough).

Thank you for advice, very good idea!

[Henri Karapuu]

> Here link to widget which allow use html files in your pages design
> instead making design in Java classes

...

> I will be very greateful for your remarks to this widget.

So what is wrong with HTMLPanel? Why not just load the String from
server, pass it to HTMLPanel's constructor, and be done with it?

/Henri Karapuu

[Taras Petrytsyn]

1. HTMLTemplateWidget replace tag with enterd id from html file,
HTMLPanel insert it into enclosing tag with specified id/
And here is advantage of HTMLTemplateWidget:
for example you want insert two buttons in <td></td> in order button1
and after it button2
a) with HTMLPanel you will write something like this:
<table>
<tr><td id="buttons"></td></tr> ---- innerHTML
</table>
and then

HTMLPanel panel = new HTMLPanel(innerHTML);
panel.add(new Button("button1"),"buttons");
panel.add(new Button("button2"),"buttons");

notice that you MUST use add() method in this order and can write
panel.add(new Button("button2"),"buttons");
panel.add(new Button("button1"),"buttons");
other way is
<table>
<tr><td ><div id="button1"></div><div id="button2"></div></td></
tr> ---- innerHTML
</table>
HTMLPanel panel = new HTMLPanel(innerHTML);
panel.add(new Button("button1"),"button1");
panel.add(new Button("button2"),"button2");

here we have more flexebility, but have to write two unneeded in
design div tags.

b) with HTMLTemplateWidget you replace already existed tag with
specified id and you can put it anywhere like


<table>
<tr><td ><input type="button" id="button1"></input><input
type="button" id="button2"></input></td></tr> ---- test.html
</table>
HTMLTemplateWidget template = new HTMLTemplateWidget("test.html")
template.addWidget("button1",new Button("button1"));
template.addWidget("button2",new Button("button2"));

order of adding of Button Widgets doesn't metter, and you do not need
to write unneeded html tags(two input tags are part of true design and
even helps designer to work with HTML)

2. You can write inline css and style names in you html file and
HTMLTemplateWidget will reset it to widget itself! Now you do not need
use setStyleName and addStyleName methods in your JAVA code!

3. You can replace already added widget by newone like
<table>
<tr><td ><input type="button" id="button1"></input></td></tr>
---- test.html
</table>
HTMLTemplateWidget template = new HTMLTemplateWidget("test.html")
template.addWidget("button1",new Button("button1"));
.....
template.addWidget("button1",new Button("button2"));

in HTMLPanel there is no this like functionallity

4. HTML content which you pass in HTMLPanel doesn't look like real
html design file, becouse all input just will be added and in start it
is empty, it complicate work with such "empty" HTML for designers.
With HTMLTemplateWidget, html file looks exactly like design you want
and it simplify work with it for designers, thay work with it like
with simple html, only thing they must remember, DO NOT TOUCH id
attributes.

5. HTMLTemplateWidget supports id scoups. It means if you use two
HTMLTemplateWidgets you can use duplicated ids in different
HTMLTemplateWidgets widget, which is not allowed in HTMLPanel


6. Passing HTML content is a very bad solution, as for me, passing
file name is much more better.

Thanks

[Henri Karapuu]

> b) with HTMLTemplateWidget you replace already existed tag with
> specified id and you can put it anywhere like

Thanks for the detailed reply. Yes, the above quoted would be a good
feature. Though, wouldn't it be possible to just improve the HTMLPanel
by adding separate method for this? Perhaps something like
'replace(..)' to complement the 'add(..)?

I can also see value in the other points you make, but overall i think
this effort would be better integrated with the ongoing work of the
declarative UI, instead of starting independent, overlapping module.

> 6. Passing HTML content is a very bad solution, as for me, passing
> file name is much more better.

I think tightly coupling a Widget with specific data access protocol
is massive anti-pattern to begin with, and in this case completely
unnecessary.

Consider the following use: Our framework has data access system which
provides caching, batching, response consolidation and speculative
loading, as well as supports multiple back ends ranging from plain
filesystem to JPA persistent store. I really don't want to throw all
that away, and start using some naive 'one request per one string and
only from filesystem' -style data access that is bolted inside a
widget.

The base class should probably operate with plain html strings. You
can then add a small wrapper around the base class, extend the base
class, or provide manager/factory type class to handle the data
access.

/Henri Karapuu

[Maksym Markov]

Hi John,
At the very beginning we thought about implementing something very
close to DeclarativeUI, custom tags that create widgets and you can
even assign events in template ( very close to ASP.NET), but finally
we defined different goals:
- Use visual tools for template editing;
- separate all styles/layout routine from java code and allow changes
on fly;

So far HTMLTemplateWidget satisfy both needs in simplest way.

Thanks for your note about immutable bundle - we are aware about it,
but right now we are using this component in intranet project, so we
choose simplicity over speed.

Right now we delivered to pre-production a project with GUI on GWT 1.3
- and any change in appearance was a pain;
Our nexy GWT based project alredy contains abot 15 forms ( we heavily
use templates - we have about 30-40 templates for pages and page
parts) and it goes much easier than previous project.

The point is that you can use different templates for different parts
of page and embede it as many times as you need, so it is applicable
in pretty complex pages as well.

Unfortunately as far as I know DeclarativeUI is not publicly available
yet, we will be happy to switch to as soon as it will be ready for
production or participate in active stabilization.

Is it possible to see some preview of DeclarativeUI beyond markup
ideas? I think <g: tags should not be a problem, in worst case it is
possible to create Eclipse plugin for editing <g: pages.

with kind regards,
Maksym


On Jan 27, 10:35 pm, "John Tamplin" <j...@google.com> wrote: