Thanks pete!
Your solution is great and simple, and i worked that out too, but I
havn't tested if you can still size the image after it has been
attached to the button. Would be very interesting to try that some
time.
Also, it didn't work for me when i tried to declare all the widgets in
the entry point part of the class.
Actually, i gave it a few hours and got exactly what i wanted.
What i did was solve the floating issue first, then the image size
issue fell in place pretty easily.
I wanted to have was buttons with semi-transparent images over the top
of another image.
Like a left arrow on the left and a right arrow on the right.
I found some tutorials on how to add CSS fixed headers and footers and
then applied the principals to left and right.
Then i noticed the z-index function, so i just did the same with an
image widget and just put it under the button.
The result is that its all done with CSS.
/* left and right button placement */
/* scaleing and floating */
.mainleftbutton, .mainrightbutton {
clear: both;
position: relative;
width: 3em;
height: 3em;
margin-top:240px;
}
/* left, right difference */
.mainleftbutton { margin-right: -3em; }
.mainrightbutton { margin-left: -3em; }
/* places button over the image */
img.mainrightbutton, img.mainleftbutton { z-index: 9; }
div.mainrightbutton, div.mainleftbutton { z-index: 10; }
Then you just add these styles to both the images and the buttons and
they pick up the width,heights and placements independantly!
LeftButton.setStyleName("mainleftbutton");
LeftArrow.setStyleName("mainleftbutton");
RightArrow.setStyleName("mainrightbutton");
RightButton.setStyleName("mainrightbutton");
Very happy.
Thanks for your advice about the loading times too, need to keep that
in mind.
/David
On Nov 3, 5:51 pm, pete <[email protected]> wrote:
> As far as I remembered, I instinctively tried to resize the image that
> is assigned to the button and that worked...
>
> I.e. Image image = new Image(source);
> image.setWidth("100px");
> image.setHeight("50px");
> PushButton button = new PushButton(image);
>
> I think if your image is really huge and only used for the button, it
> is indeed smarter though, to make a smaller copy and resize that,
> since if you let the browser resize, it still needs to load the full
> image from the server (if I'm not mistaken...)
>
> I don't understand what exactly you mean by "button floating over the
> image" though, so I can't give you any tip about that...
>
> Greetz
>
> On Nov 2, 10:33 pm,DavidCox<[email protected]> wrote:
>
> > Hi everyone
>
> > I thought I would pick up gwt and play around with trying to make some
> > pretty standard stuff. But, I have been bashing my head on this one
> > for a bit.
>
> > I have a horizontal layout with [button - image - button] and have
> > managed to make the buttons cycle through a number of images.
> > Now I want to pretty up the buttons by making them into images of
> > arrows. This is fine using code like:
>
> > private PushButton LeftButton = new PushButton(new Image("images/gui/
> > left.png"));
> > or
> > LeftButton.setStyleName("mainleftbutton"); and then doing it in CSS.
>
> > However, my arrow pictures are huge and (while i could make many
> > copies with photoshop) what I would really like to do is be able to
> > code it so that the button (and image) is scaled to a specific width.
> > ie: like 100px high.
>
> > I guess the end goal here, would eventually have the buttons floating
> > over the image, but i suppose that is a long way off for me.
>
> > Any suggestions?
> >David
--
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.
