Re: Problem specifying Grid's cell size
Hi,
Can anyone help me out explaining how to add a hyperlink in a cell for any
grid?
I could set simple data into my grid but unable to find out how to add a
hyperlink in one of the columns.
Please let me know.
On Tue, Jun 30, 2009 at 8:21 AM, hezjing wrote:
> Hi Ian,
>
> You example works fine except that I have to include myGrid when setting
> the styles into the cells like the following:
>
> f.setStyleName(0, 0, "myGrid my-Grid-ne my-Grid-border-row
> my-Grid-border-col");
> f.setStyleName(0, 1, "myGrid my-Grid-n my-Grid-border-row");
> f.setStyleName(0, 2, "myGrid my-Grid-nw my-Grid-border-row
> my-Grid-border-col");
> f.setStyleName(1, 0, "myGrid my-Grid-e my-Grid-border-col")
>
>
> For some reasons, the myGrid style specified in Grid has no effect in the
> cells.
>
> Thanks Ian, you shown me a good CSS example and it is very helpful for a
> Java Swing developer like me ;-)
>
>
>
> On Mon, Jun 29, 2009 at 8:06 PM, Ian Bambury wrote:
>
>> You can apply border-spacing to a table (e.g. your grid) which adjusts the
>> spacing between cells. To get rid of it completely, you need to set
>> border-collapse:collapse to the *table* (not the cells - i.e.not the td
>> elements)
>> I think you can get away with setting font-size on the table/grid and to
>> make the css easier, you might like to set style something like below. It
>> makes the code easier to read (e.g. every cell has ne. n, nw to indicate
>> where it is in the grid) and the css is so much simpler - you set all the
>> widths/heights in one place and therefore don't miss any if you change from
>> 5px to 3px, say.
>>
>> Grid grid = new Grid(3, 3);
>> grid.setStylePrimaryName("my-Grid");
>> CellFormatter f = grid.getCellFormatter();
>> f.setStyleName(0, 0, "my-Grid-ne my-Grid-border-row
>> my-Grid-border-col");
>> f.setStyleName(0, 1, "my-Grid-n my-Grid-border-row");
>> f.setStyleName(0, 1, "my-Grid-nw my-Grid-border-row
>> my-Grid-border-col");
>> f.setStyleName(1, 0, "my-Grid-e my-Grid-border-col");
>> .
>> .
>> .
>> and then the css is simpler
>>
>> .my-Grid
>> {
>> font-size : 1px;
>> border-collapse : collapse;
>> }
>> .my-Grid-border-row
>> {
>> height :5px;
>> }
>> .my-Grid-border-col
>> {
>> width :5px;
>> }
>> .my-Grid-ne
>> {
>> /* put the north-east corner image here */
>> }
>> etc
>>
>> Ian
>>
>> http://examples.roughian.com
>>
>>
>>
>>
>>
>
>
> --
>
> Hez
>
> >
>
--
-Regards,
Sowjanya.
--~--~-~--~~~---~--~~
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-Web-Toolkit@googlegroups.com
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/Google-Web-Toolkit?hl=en
-~--~~~~--~~--~--~---
Re: Problem specifying Grid's cell size
Hi Ian,
You example works fine except that I have to include myGrid when setting the
styles into the cells like the following:
f.setStyleName(0, 0, "myGrid my-Grid-ne my-Grid-border-row
my-Grid-border-col");
f.setStyleName(0, 1, "myGrid my-Grid-n my-Grid-border-row");
f.setStyleName(0, 2, "myGrid my-Grid-nw my-Grid-border-row
my-Grid-border-col");
f.setStyleName(1, 0, "myGrid my-Grid-e my-Grid-border-col")
For some reasons, the myGrid style specified in Grid has no effect in the
cells.
Thanks Ian, you shown me a good CSS example and it is very helpful for a
Java Swing developer like me ;-)
On Mon, Jun 29, 2009 at 8:06 PM, Ian Bambury wrote:
> You can apply border-spacing to a table (e.g. your grid) which adjusts the
> spacing between cells. To get rid of it completely, you need to set
> border-collapse:collapse to the *table* (not the cells - i.e.not the td
> elements)
> I think you can get away with setting font-size on the table/grid and to
> make the css easier, you might like to set style something like below. It
> makes the code easier to read (e.g. every cell has ne. n, nw to indicate
> where it is in the grid) and the css is so much simpler - you set all the
> widths/heights in one place and therefore don't miss any if you change from
> 5px to 3px, say.
>
> Grid grid = new Grid(3, 3);
> grid.setStylePrimaryName("my-Grid");
> CellFormatter f = grid.getCellFormatter();
> f.setStyleName(0, 0, "my-Grid-ne my-Grid-border-row
> my-Grid-border-col");
> f.setStyleName(0, 1, "my-Grid-n my-Grid-border-row");
> f.setStyleName(0, 1, "my-Grid-nw my-Grid-border-row
> my-Grid-border-col");
> f.setStyleName(1, 0, "my-Grid-e my-Grid-border-col");
> .
> .
> .
> and then the css is simpler
>
> .my-Grid
> {
> font-size : 1px;
> border-collapse : collapse;
> }
> .my-Grid-border-row
> {
> height :5px;
> }
> .my-Grid-border-col
> {
> width :5px;
> }
> .my-Grid-ne
> {
> /* put the north-east corner image here */
> }
> etc
>
> Ian
>
> http://examples.roughian.com
>
>
>
> >
>
--
Hez
--~--~-~--~~~---~--~~
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-Web-Toolkit@googlegroups.com
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/Google-Web-Toolkit?hl=en
-~--~~~~--~~--~--~---
Re: Problem specifying Grid's cell size
You can apply border-spacing to a table (e.g. your grid) which adjusts the
spacing between cells. To get rid of it completely, you need to set
border-collapse:collapse to the *table* (not the cells - i.e.not the td
elements)
I think you can get away with setting font-size on the table/grid and to
make the css easier, you might like to set style something like below. It
makes the code easier to read (e.g. every cell has ne. n, nw to indicate
where it is in the grid) and the css is so much simpler - you set all the
widths/heights in one place and therefore don't miss any if you change from
5px to 3px, say.
Grid grid = new Grid(3, 3);
grid.setStylePrimaryName("my-Grid");
CellFormatter f = grid.getCellFormatter();
f.setStyleName(0, 0, "my-Grid-ne my-Grid-border-row
my-Grid-border-col");
f.setStyleName(0, 1, "my-Grid-n my-Grid-border-row");
f.setStyleName(0, 1, "my-Grid-nw my-Grid-border-row
my-Grid-border-col");
f.setStyleName(1, 0, "my-Grid-e my-Grid-border-col");
.
.
.
and then the css is simpler
.my-Grid
{
font-size : 1px;
border-collapse : collapse;
}
.my-Grid-border-row
{
height :5px;
}
.my-Grid-border-col
{
width :5px;
}
.my-Grid-ne
{
/* put the north-east corner image here */
}
etc
Ian
http://examples.roughian.com
--~--~-~--~~~---~--~~
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-Web-Toolkit@googlegroups.com
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/Google-Web-Toolkit?hl=en
-~--~~~~--~~--~--~---
Re: Problem specifying Grid's cell size
Thanks Ian, the problem is resolved by setting the font size really small.
Note also that we don't have to set the font size for all the cells, only
setting the font size of the 1st row will do.
So here is my CSS for the cells in the 1st row:
.my-topLeft {
background: url(images/wb-corner.png) no-repeat 0px 0px;
width: 5px;
height: 5px;
font-size: 1px;
}
.my-topCenter {
background: url(images/wb-hborder-top.png) repeat-x;
width: 100%;
height: 5px;
font-size: 1px;
}
.my-topRight {
background: url(images/wb-corner.png) no-repeat -5px 0px;
width: 5px;
height: 5px;
font-size: 1px;
}
Then, I specify the above CSS into the grid to get a rounded corner effect:
Grid grid = new Grid(3, 3);
grid.setCellSpacing(0);
grid.setText(1, 1, "My Title");
CellFormatter formatter = grid.getCellFormatter();
formatter.setStyleName(0, 0, "my-topLeft");
formatter.setStyleName(0, 1, "my-topCenter");
formatter.setStyleName(0, 2, "my-topRight");
The above code is working fine, I have my rounded corner rectangle!
Here come with another question: I have to specify the cell spacing by
calling grid.setCellSpacing(0)
How can I move this cell spacing into the CSS?
I tried to create and set the CSS like the following:
.my {
margin: 0px;
padding: 0px;
}
Grid grid = new Grid(3, 3);
// grid.setCellSpacing(0);
grid.setStyleName("my");
But the above code doesn't work, I still have to specify the cell spacing in
the Java code :-(
Appreciate your advice, thank you!
On Mon, Jun 29, 2009 at 3:46 AM, Ian Bambury wrote:
> Yep. There's an in the cell so you will have to set the font size
> really small.
> You'd be better off doing all this by setting style classes and doing it in
> css.
>
> Ian
>
> http://examples.roughian.com
>
>
> 2009/6/28 hezjing
>
> Hi
>>
>> I want to achieve a rounded corner rectangle using Grid.
>>
>> Here I create a 3x3 grid:
>>
>> Grid grid = new Grid(3, 3);
>> grid.setCellPadding(0);
>> grid.setCellSpacing(0);
>> // display the border for debugging
>> grid.setBorderWidth(1);
>>
>>
>> Imagine that I have a 5x5 pixel corner images, so I specify the width and
>> height of the top row like the following:
>>
>> CellFormatter formatter = grid.getCellFormatter();
>> // top left corner
>> formatter.setWidth(0, 0, "5px");
>> formatter.setHeight(0, 0, "5px");
>> // top center
>> formatter.setWidth(0, 1, "100%");
>> formatter.setHeight(0, 1, "5px");
>> // top right corner
>> formatter.setWidth(0, 2, "5px");
>> formatter.setHeight(0, 2, "5px");
>>
>>
>> The problem is when tested in hosted mode, the cell doesn't display in the
>> specified height!
>>
>> Did I miss anything here?
>>
>>
>> Please help, thank you!
>>
>>
>> --
>>
>> Hez
>>
>>
>>
>
> >
>
--
Hez
--~--~-~--~~~---~--~~
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-Web-Toolkit@googlegroups.com
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/Google-Web-Toolkit?hl=en
-~--~~~~--~~--~--~---
Re: Problem specifying Grid's cell size
Yep. There's an in the cell so you will have to set the font size really small. You'd be better off doing all this by setting style classes and doing it in css. Ian http://examples.roughian.com 2009/6/28 hezjing > Hi > > I want to achieve a rounded corner rectangle using Grid. > > Here I create a 3x3 grid: > > Grid grid = new Grid(3, 3); > grid.setCellPadding(0); > grid.setCellSpacing(0); > // display the border for debugging > grid.setBorderWidth(1); > > > Imagine that I have a 5x5 pixel corner images, so I specify the width and > height of the top row like the following: > > CellFormatter formatter = grid.getCellFormatter(); > // top left corner > formatter.setWidth(0, 0, "5px"); > formatter.setHeight(0, 0, "5px"); > // top center > formatter.setWidth(0, 1, "100%"); > formatter.setHeight(0, 1, "5px"); > // top right corner > formatter.setWidth(0, 2, "5px"); > formatter.setHeight(0, 2, "5px"); > > > The problem is when tested in hosted mode, the cell doesn't display in the > specified height! > > Did I miss anything here? > > > Please help, thank you! > > > -- > > Hez > > > > --~--~-~--~~~---~--~~ 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-Web-Toolkit@googlegroups.com To unsubscribe from this group, send email to google-web-toolkit+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/Google-Web-Toolkit?hl=en -~--~~~~--~~--~--~---
