Creating a table with PresenterWidgets as rows

[Jim Potter]

Hi team,

I'm trying to create a table in which each row is a presenterWidget.
I've followed Dani's tutorial and got the content working fine, but
can't get the columns in the table to line up.

I'd like a table of 4 columns (2 containting text, 2 containing
buttons), and as many rows as presenterWidgets that are created.

Here are excerpts from my ui.xml files:

The presenter:
<g:HTMLPanel>
<h2>Date list</h2>
<h3>some kind of filter</h3>
<hr />
<g:HTMLPanel ui:field="dateListPanel"/>
</g:HTMLPanel>

The presenterWidget:
<g:HTMLPanel>
<g:Label ui:field="name" />
<g:Label ui:field="date" />
<g:Button ui:field="select" text="Edit" />
<g:Button ui:field="drop" text="Delete" />
</g:HTMLPanel>

What I'd like is something like (in html):

<table>
<tr>
<td>name</td><td>date</td><td>#button#</td><td>#button#</td>
</tr>
<tr>
<td>name</td><td>date</td><td>#button#</td><td>#button#</td>
</tr>
</table>

Can anyone point me in the right direction? I've not had any luck with
Grids as the <g:row> elements apear to need to be within a <g:Grid> tag.

thanks in advance,

Jim Potter
UK

PS. I'd been banging my head against GWTP for a couple of months until I
wathced Dani's tutorials, and now I've more or less got it - thanks Dani!

[Fabian Gebert]

Hi Jim

Lining up presenter widgets in some sort of containing panel is easy,
simply call .add(content) in your addToSlot implementation. However, I
suppose that is not, what you want.

Could you explain in more detail, where in the table the presenter
widgets are to be put?

Best
Fabian

[Jim Potter]

Hi Fabian,

Sorry - I'll try to be clearer...

I'd like output something like this:

<table>
<tr>
<td>name</td><td>date</td><td>#button#</td><td>#button#</td>
</tr>
<tr>
<td>name</td><td>date</td><td>#button#</td><td>#button#</td>
</tr>
</table>

the table would be created by the presenter, but each <tr>...</tr> would
be an individual presenterWidget (2 of them in this example)

The problem I have is that the names and dates in above example are
different lengths so the buttons don't line up neatly left to right. I
get something more like:

<table>
<tr>
<td>name</td><td>date</td><td>#button#</td><td>#button#</td>
</tr>

</table>

<table>
<tr>
<td>name</td><td>date</td><td>#button#</td><td>#button#</td>
</tr>

</table>

I've got them stacking up underneath each other fine, as in Dani's examples.

I hope that's clearer...

Jim

[Fabian Gebert]

Okay, I got what you're trying to achieve.

Unless you want to support IE 7 and IE 6, the following approach will work:

Use simple/flow panels rather than table, tr and td elements in the
following way:

<div class="table">

<div class="row">
<div class="cell">name</div><div class="cell">date</div><div
class="cell">#button#</div><div class="cell">#button#</div>
</div>
...
</div>

each "row"-div will be the presenterwidget representation
simply put all of them in a flow panel.

Now the "table" "row" and "cell" classes should get the following CSS:

.table { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }

and you're done

Note this doesn't work in IE 7 and lower as mentioned above.

Best
Fabian

[Jim Potter]

Thanks Fabian, I'll give it a go.

thanks

Jim

[Jim Potter]

Hi Fabian,

I got this working as you described in the end - thanks.

Is there anywhere to post code examples of how folks solved specific
problems like this? I'd be happy to do a sample app to demonstrate it.

cheers

Jim

On 03/03/2012 22:12, Fabian Gebert wrote:

[Fabian Gebert]

Hi Jim,

On 03/18/2012 10:25 AM, Jim Potter wrote:
> I got this working as you described in the end - thanks.

That's cool!

>
> Is there anywhere to post code examples of how folks solved specific
> problems like this? I'd be happy to do a sample app to demonstrate it.

Why not post it on your blog?

Fabian