render goog.ui.Button in soy template context

123 views
Skip to first unread message

Fink Mark

unread,
May 18, 2012, 1:35:44 AM5/18/12
to Closure Library Discuss
hi there,

I am new to Closure-Tools and so far I like it very much so thank you
for open sourcing this tools.

I am oriented towards the idea of separating logic and layout and
consequently I want to use soy templates. I also want to use UI
elements in my application. That means I have to somehow integrate the
two technologies. Unfortunately the examples I have seen so far and
the book avoid this topic. UI operates on elements and soy on strings
both do not integrate well.

Is there a recipe on how to integrate the two technologies?

Here is the code I am working on and I want to add a goog.ui.Button to
"controls". The ".task" template is called from within a loop to
render the whole tasklist. Part of the soy template:
/**
* Create the html for a single task
* @param overview {string}
* @param desc {string}
*/
{template .task}
<div class="task">
<div class="summary">{$overview}
<div class="controls"></div>
</div>
<div>
<div class="description">{$desc}</div>
<div style="display:none">
<textarea/>
</div>
</div>
{/template}

It would be great if you provide me with some insights.

Cheers,
Mark

Chris Price

unread,
May 18, 2012, 4:20:41 AM5/18/12
to closure-lib...@googlegroups.com
One technique could be to add whatever markup you wish to represent
the button, create a ButtonRenderer [1] for that markup and then call
decorate on that markup from the containing task Control. As far as I
know the library controls don't make use of soy templates to allow the
library to be used independently.

I created a very simplistic example of using Renderer's to create a
Todo list [2] which may give you some ideas but unfortunately doesn't
cover this exact use case.

Chris

[1] http://closure-library.googlecode.com/svn/docs/class_goog_ui_ButtonRenderer.html
[2] https://github.com/chrisprice/todomvc/tree/master/architecture-examples/closure

Fink Mark

unread,
May 18, 2012, 4:44:00 AM5/18/12
to Closure Library Discuss
I am fine with the markup the ui.Button creates (i.e. using its
decorate) and I would rather prefer to leave the ui.Button
implementation as it is. What I am asking is related to the
application of soy templates. I experience static pages tend to get a
little boring so I want to add controls like ui.Button to get some
interaction. I guess the question I am trying to ask is how to add
goog.ui interface components to a soy template. A possible answer I
see is that Soy templates and goog.ui are not integrate well so one
has to decide which one to use.

soy

unread,
May 18, 2012, 6:40:57 AM5/18/12
to Closure Library Discuss
I discovered that soy templates have their own (stale) discussion
group. So I take back my question and post it there. Sorry for the
mess.
Reply all
Reply to author
Forward
0 new messages