The HTML generated for the above code is:
<TABLE style="WIDTH: 100%; HEIGHT: 100%" cellSpacing=0 cellPadding=0
border=2>
<TBODY>
<TR>
<TD style="VERTICAL-ALIGN: top" align=left>
<DIV class=back-blue style="WIDTH: 223px; HEIGHT:
100%">Left</DIV>
</TD>
<TD style="VERTICAL-ALIGN: top" align=left width="100%">
<DIV class=back-red style="HEIGHT: 100%">right</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
You can see where all the style attributes allocated in the code are
placed. Now it is a simple matter to replace the in code style
instructions for the left and right widgets themselves, e.g.
left.setSize("223px","100%"); with CSS - you simply create a CSS
style, replace the current code with e.g. left.setStyleName(".left-
style") and put the sizing instruction there.
However it is not so simple to replace the code instruction
hPan.setCellWidth(right,"100%"); which corresponds to <TD
style="VERTICAL-ALIGN: top" align=left width="100%"> with CSS. I
believe the standard way to do this in HTML is to give the table a
style, e.g. .my-Table {}, and then use a secondary style .my-Table .td
{}, and I think you can do this in GWT using a style assigned to the
CellPanel (i.e. the HP in this case). However this will style each TD/
Cell the same, and this is not what you want. There is no GWT
CellPanel method getCell() that you could use to allocate individual
CSS styles to each individual TD in the table AFAIK. (the cells
themselves, the TD's, are not Widgets just HTML elements, therefore
the parent, the CellPanel, provides an abstraction over them in its
API, i.e. setCellHeight(..) etc.)
I think it would be possible to do it by writing code to access the
table Element, chase down to the individual TD Elements and use the
DOM class to allocate individual CSS style to them - the code to
allocate the CSS styles would look something like:
DOM.setElementProperty(aTdElement, "className", styleName);
However all this seems a ridiculous amount of work to do when you can
just write a line of Java. Can I ask why you need to do this?
regards
gregor
On Dec 16, 4:44 am, aragorn <[email protected]> wrote:
> Thanks again Gregor
>
> But here again i need to use CSS for all positioning and layout. No
> positioning or layout is supposed to be performed in the actual code.
>
> On Dec 15, 6:09 pm, gregor <[email protected]> wrote:
>
> > Hi Aragorn,
>
> > In this case I had to explicitly size the left component to 223px
> > otherwise it just gets squashed to the width of "left" because of the
> > right cell's 100% width. You can change this to work on percentages by
> > changing the cell width argument for the right cell, but then the
> > width of left will be variable proportional to the overall screen
> > size. But in this case you can't just write left.setCellSize
> > ("223px","1%) in the way I did for the VP example. HTML sometimes
> > treats widths slightly differently to heights.
>
> > I would avoid direct pixel size calculations like the plague. You just
> > need to get your head around basic HTML behaviour. Using noddy
> > programs like this to sort out the behaviour you want is a good way to
> > proceed. Start with a layout design, then do a simple test like this,
> > then it is easy to put the layout into your real app.
>
> > regards
> > gregor
>
> > public class SandBox implements EntryPoint {
>
> > private HorizontalPanel hPan = new HorizontalPanel();
> > private HTML left = new HTML("Left");
> > private HTML right = new HTML("right");
>
> > public void onModuleLoad() {
>
> > left.setStyleName("back-blue");
> > right.setStyleName("back-red");
> > // comment out for % wise spacing
> > left.setSize("223px","100%");
> > // comment in for % wise spacing
> > //left.setHeight("100%");
> > right.setHeight("100%");
>
> > hPan.add(left);
> > hPan.add(right);
>
> > // switch statements for % style spacing
> > hPan.setCellWidth(right,"100%");
> > //hPan.setCellWidth(right,"70%");
>
> > hPan.setBorderWidth(2);
> > hPan.setSize("100%","100%");
> > RootPanel.get().add(hPan);
> > }
>
> > }
>
> > .back-blue {
> > background-color: lightblue;
>
> > }
>
> > .back-red {
> > background-color: red;
>
> > }
>
> > .back-green {
> > background-color: green;
>
> > }
>
> > On Dec 15, 4:38 am, aragorn <[email protected]> wrote:
>
> > > I tried using a horizontal panel as a main panel with wisth and height
> > > to 100%. Inside it i created two different verticalpanels. The one on
> > > left hand side has fixed width set to 233 pixels using css. Now the
> > > right child panel should occupy the remainng space in the screen. I
> > > tried setting width to 100% in css as well as in gwt code. It doesnt
> > > work. By default a panel occupies only the space its content requires.
> > > So an empty panel doesnt have much width even if it occupies the
> > > entire height.
> > > Inside the rightside panel i have to use 2 child widgets which occupy
> > > entire width. How should i got about it?Is there a way to get window
> > > dimesnions in css so that i can calculate the width in pixels in the
> > > css itself?
>
> > > On Dec 15, 2:10 am, gregor <[email protected]> wrote:
>
> > > > AFAIK there is no way you can disable the internal ScrollPanels in
> > > > HSP. HSP internally puts each widget (left & right) inside a
> > > > ScollPanel automatically for you, and if either left of right widgets
> > > > grow they will kick in, end of. HSP is also declared final, so it is
> > > > impossible to extend the class to attempt to modify this behaviour.
>
> > > > If you want to completely disable HSP resizing (i.e you do not want
> > > > the user to able to move the splitter) why use HSP? Why not use a 2
> > > > cell HorizontalPanel with a fixed left cell size and the right 100%
> > > > width?
>
> > > > On Dec 14, 10:32 am, aragorn <[email protected]> wrote:
>
> > > > > I am using a horizontalSplitPanel to divide my window into two parts-
> > > > > left part has fixed width while the right one occupies the entire
> > > > > remaining space. I want to hide the fact that i have used SplitPanel
> > > > > by removing the default scrollbars the appear whenever the inner
> > > > > panels go out of size and disabling resizing capability of the
> > > > > splitPanel. Is there a way to achieve it? I definitely need a way to
> > > > > remove the scrollbars.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/Google-Web-Toolkit?hl=en
-~----------~----~----~----~------~----~------~--~---
