Can CellWidgets contain custom composite widgets ?

[zixzigma]

Can I create custom composite widgets ( panels containing label, button, edit box),
and include these custom widgets within the CellWidgets (CellTable, CellTree) ?

for example, when clicking on a node, instead of displaying just a text,
be able to display a composite widget,
or including drop-down panels (similar to disclosure panel) in the CellTable rows.
example: http://code.google.com/p/google-web-toolkit/updates/list

is this possible with CellWidgets?

Thank You

[Y2i]

May bey CompositeCell?

[zixzigma]

after investigating CompositeCell or directly extending AbstractCell,
it is my understanding that to create custom cell,
the only option at the moment is to embed HTML markup in the render method as below.

in other words, we cannot create a custom composite widget with UiBinder,
and add it to the cell.

am I correct on this ?



    @Override
    public void render(Context context, Contact value, SafeHtmlBuilder sb) {
      /*
       * Always do a null check on the value. Cell widgets can pass null to
       * cells if the underlying data contains a null, or if the data arrives
       * out of order.
       */
      if (value == null) {
        return;
      }

      // Add a checkbox. If the contact is a favorite, the box will be checked.
      sb.appendHtmlConstant("<table><tr><td valign=\"top\">");
      if (favorites.contains(value)) {
        sb.appendHtmlConstant("<input type=\"checkbox\" checked=checked/>");
      } else {
        sb.appendHtmlConstant("<input type=\"checkbox\" />");
      }
      sb.appendHtmlConstant("</td><td>");

      // Display the name in big letters.
      sb.appendHtmlConstant("<div style=\"size:200%;font-weight:bold;\">");
      sb.appendEscaped(value.name);
      sb.appendHtmlConstant("</div>");

      // Display the address in normal text.
      sb.appendHtmlConstant("<div style=\"padding-left:10px;\">");
      sb.appendEscaped(value.address);
      sb.appendHtmlConstant("</div>");

      sb.appendHtmlConstant("</td></tr></table>");
    }

[Thomas Broyer]

On Tuesday, February 1, 2011 11:40:27 PM UTC+1, zixzigma wrote:

after investigating CompositeCell or directly extending AbstractCell,
it is my understanding that to create custom cell,
the only option at the moment is to embed HTML markup in the render method as below.

in other words, we cannot create a custom composite widget with UiBinder,
and add it to the cell.

am I correct on this ?

Yes, Cell widgets are much more low-level than widget containers. They're built with performance in mind, and it rules out using child widgets. 

[Prashant Hegde]

We have extended the AbstractCell and did the following.

Have a widget created using UiBinder XML for the content of a cell. In the render method,  instantiate the widget, set the data and getHTML. Once you get HTML, it is business as usual. You can also respond to the events inside the widget by overriding onBrowserEvent. We only had anchors inside the widget, so we listened to "click" events and responded it to it by delegating the event to presenters. This approach eliminated having to write HTML mark up in Java code. 

Not sure if this is the answer you are looking for.

Prashant

    }

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[zixzigma]

Thank You.

Prashant, I am following your suggestion,
I am a bit unclear about this part of your comment: "set the data and getHTML"

should my custom widget implement HasHTML ?
http://google-web-toolkit.googlecode.com/svn/javadoc/1.5/com/google/gwt/user/client/ui/HasHTML.html

could you please explain that part a bit more ?
I see that HasHTML has methods setHTML getText that I need to implement.
do you think I need to put html markup in this setHTML ?

Thank You

[Prashant Hegde]

Sorry, I should have been more clearer. Its not getHTML as I had stated. Should have said getInnerHtml(). Your custom widget need not implement HasHTML. Instead, its basically a standard UiBinder based composite with public methods to set the required  data to be rendered ( not the markup just the data like any other setters/getters of a view ). Your markup is inside the UIBinder XML. Once you set the data, you can call getElement().getInnerHTML() on the composite to get the HTML equivalent of the composite. 

One more improvement (more lightweight I guess) over the above approach is, You need not extend the UiBinder widget from Composite. You can just have a reference to a Widget inside the UiBinder Java file. Initialize this reference to the  object returned from createAndBindUi. In this case, you will have to call widget.getElement().getInnerHtml() for the HTML equivalent.

Hope this helps.

Prashant

[zixzigma]

THANK YOU!
it worked !!
what a wonderful solution !

one other question,
in your experience,
- do you think it is possible to change a cell once it's rendered ?
for example, implement onClick event, in a way that upon a click,
another widget is added to the currently displayed row.

I am trying to implement something similar to this:
http://code.google.com/p/google-web-toolkit/updates/list

which is basically a celltable, when you click on a row,
the row expands.

I am not asking for the solution, although any tips are really appreciated,
I want to know if it is possible with CellTable.

Thank you for the solution you offered.

[Prashant Hegde]

From what I know (hope others can comment/correct):

You get influence rendering in the "render" method of a cell. If your click event, updates the table in some fashion that leads to re-rendering of the table then you should get the control to render method of the cell. Based on a conditional logic inside the render method, should be able to plug in a different widget HTML in the same cell area ( should work, never tried ). 

Prashant

[zixzigma]

Thank You,
I tried your suggestion.

In the onBrowseEvent, I capture the click event,
but just capturing event does not result in re-rendering the table.

I assume I need to somehow update the table for the re-rendering to happen,
but I don't know how

">> If your click event, updates the table in some fashion that leads to re-rendering of the table"

I also put a flag(conditional) inside onBrowseEvent method, and changed it upon click event,
and directly called render from within onBrowseEvent (as you can see below).
to somehow force the render method.
with this explicit call to render, upon on click, the flag is set and log statements in render method
confirm that the flag is actually set, but the table remains the same.
in other words the table is not re-rendered.

do you know how I can make the click event to update the table ?
or how is it possible to re-render just a row of the table ?
is it wrong to call render from within onBrowseEvent ?
 public void onBrowserEvent(.....

if ("click".equals(event.getType())) {

isFieldXVisible = true; // setting a flag so that render method can check for it
render(context,value,null); // forcing to re-rerender, does not seem to work

}

}

Thank You

[zixzigma]

I realized what I was doing wrong.

I was trying to do everything in the custom cell.
I decided to handle things at CelLTable level, instead of cell level.
so I defined a SingleSelectionModel, and when the row is selected,
I change the flag within this selectionModel, which is related to the CellTable,
instead of capturing low level click event in the cell.

still I need to work on some of its details,
since there are some minor problems.

Thank you for your insights, it helped a lot.

[John LaBanca]

Instead of appending raw HTML, you can use SafeHtml Templates.  See the dev guide on "Creating HTML using the SafeHtmlTemplates Interface":

http://code.google.com/webtoolkit/doc/latest/DevGuideSecuritySafeHtml.html#Creating_SafeHtml_Values

Also, we're working on a variation of UiBinder that can generate HTML strings and works with Cells.  That should make it easier to template complex cells using HTML/XML.

Thanks,
John LaBanca
jlab...@google.com

[Jeff Schwartz]

On Wed, Feb 2, 2011 at 10:06 AM, John LaBanca <jlab...@google.com> wrote:

+1

Also, we're working on a variation of UiBinder that can generate HTML strings and works with Cells.  That should make it easier to template complex cells using HTML/XML.

Thanks,
John LaBanca
jlab...@google.com

On Wed, Feb 2, 2011 at 2:46 AM, zixzigma <zixz...@gmail.com> wrote:

I realized what I was doing wrong.

I was trying to do everything in the custom cell.
I decided to handle things at CelLTable level, instead of cell level.
so I defined a SingleSelectionModel, and when the row is selected,
I change the flag within this selectionModel, which is related to the CellTable,
instead of capturing low level click event in the cell.

still I need to work on some of its details,
since there are some minor problems.

Thank you for your insights, it helped a lot.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Jeff Schwartz

[zixzigma]

Thank You.

However I found what Prashant suggested to be easier to work with, than SafeHtml Templates.

with current UiBinder, we can create custom widget as we would,
by extending Composite, having Java code which is UiBinder owner,
and corresponding UiBinder, just like a typical composite,

we can then use this widget in our Custom Cell,
using getElement().getInnerHTML()

EmployeeWidget widget = new EmployeeWidget();
widget.setNameLabel("John");
widget.setAddressLabel("London");
sb.appendEscaped(widget.getElement.getInnerHTML());

this already works, and is much cleaner than using SafeHTML Templates.

I have not tried it with buttons and text-box yet, but using g:HTMLPanel and g:Label worked.

[dilbert]

Is the UiBinder variation available in GWT 2.2? If it is, is there any example on how to use it ?

Thanks.

[Stephanie Brubaker]

Cell support in UiBinder is not available in GWT 2.2, but it will be included in an upcoming release.  Stay tuned!

--Stephanie

[Robert Pazurek]

Could anyone please explain why it is not possible to use edit widgets in a cell?

If can see the solution with the getElement() working, but it is at best
cumbersome and at worst a lot of hacking getting your custom widgets to work
properly.

The high performance argument can not really convince me, as it should not
throttle your application all to much if it has to manage one active edit widget.