i have one window panel and i want to set image in it.so i do,
Window window = new Window();
Panel panel = new Panel();
AbsolutePanel absolutePanel = new AbsolutePanel();
Image image = new Image("img/heat_map.jpg");
absolutePanel.add(image);
Image ap1Image = new Image("img/end.PNG");
ap1Image.getElement().getStyle().setMargin(1, Unit.PX);
absolutePanel.add(ap1Image);
panel.add(absolutePanel);
window.add(panel);
but i stuck in code as i can't overlap another small icon image on main image(heat_map).
i want onclick event on that icon image.but i can't overlap images in window panel.please help me out.
It seems that you using something like GXT not pure GWT. But anyway - AbsolutePanel should implement something like add(Widget, int left, int top) method so you need use it instead of simple add(widget)
First thing is in your code is you can not instantiate GWT Window Class since the constructor Window() is not visible.
Second thing is there is no add method in window class.
And finally to overlap your images one on another you need to apply Some CSS
(Z-index..positions )
CSS Divs overlapping, how do I force one above the other?
And finally
you can simply add a click handler to image.
imageIcon.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
// Do something....
}
});
Good luck.
Related
I am trying to add 100 dynamically created buttons to a scroll view in Unity, but I have a problem letting the scroll view automatically adjust the width of the buttons to match the width of my screen.
When I tried to add the buttons manually it worked fine , but when I do this by code I get another results.
The code I am using :
public GameObject button;
public GameObject scrollviewcontents;
void Start()
{
for (int i =0; i<=100;i++) {
GameObject dbutton = Instantiate(button);
dbutton.name = i.ToString();
dbutton.transform.parent = scrollviewcontents.transform;
}
}
and The results I get :
Results
Results with comments
I just want the buttons to look like as they are added manually, any help ???
By default when instantiating an object the object keeps the same world space position, rotation and scale as before. try this instead:
dbutton.transform.SetParent(scrollviewcontents.transform, false);
I have .jpg file that I want to display. I have some Horizontal and Vertical panels and I would like to have it somewhere in there. It is a fairly large image but I would like to make a class or an object that will scale it down for me.
My first thought was to just put it in a Horizontal Panel like so but that does not seem to work as I intended
HorizontalPanel picturePanel = new HorizontalPanel();
picturePanel.setPixelSize(600, 300);
picturePanel.addStyleName("pic");
Css.css
.pic
{
background: url(images/mypic.jpg);
height: auto;
width: auto;
}
I'd like to set the pixel size of an object (panel) and add an image to that panel so that it fits within the bounds (while making sure the ratio is the same as in the picture) so I can programatically add it to a panel somewhere.
public interface MyResources extends ClientBundle {
MyResources INSTANCE = GWT.create(MyResources.class);
#Source("logo.png")
ImageResource logo();
}
in your view class
Image logo = new Image(MyResources.INSTANCE.logo());
add image to panel;
set resolution to your panel and also set the same to your image by using
setPixelSize(int,int);
This works:
Image image = new Image();
Image.setWidth("100px");
image.setUrl('http://127.0.0.1:8888/images/accounts.png');
Loads image form local server and will limit size of image.
My Goal is to have a Button with a background image and ontop of these a Label.
I want to position the label in the centre of the button and vertically allign it's text. I want the button to expand in propotion to the number of characters in the label. What is the best type of panel to use to build this type of composite widget as I am running into problems with using an AbsolutePanel as it doesn't dynamically grow with it's child elements.
private PushButton button;
private Label label = new Label();
private AbsolutePanel panel = new AbsolutePanel();
private Image image = new Image("images/rectangle_blue.png");
public ExpandingRectangularButton(String text)
{
label.setText(text);
String width = "120px";
String height = "160px";
image.setWidth(width);
image.setHeight(height);
button = new PushButton(image);
panel.add(button, 0, 0);
panel.setWidth(width);
panel.setHeight(height);
initWidget( panel );
}
What is the best type of panel to use in this case? I have tried flow, horizontal and flextables but I can't get these to stack widgets on top of each other correctly
FlowPanel??.
A FlowPanel arranges components in a directional flow, much like lines of text in a paragraph.
If I create a ScrollPanel like this:
public class BoardPanel extends ScrollPanel {
public BoardPanel(Game game) {
AbsolutePanel abs = new AbsolutePanel();
setHeight("100px");
setWidth("100px");
setAlwaysShowScrollBars(true);
abs.add(new Image(game.getMap().getImageUrl()));
add(abs);
}
}
I got my picture with a scrollbar on the right, which is scrollable.
The bottom one is only shown, if I use setAlwaysShowScrollBars(true);
My question is, how can I get the bottom one scrollable? It is just grey.
If the bottom one is shown only if you use the setAlwaysShowScrollBars(true) then it most probably means the image is being fully displayed and there is nothing left to scroll
public class BoardPanel extends ScrollPanel {
AbsolutePanel abs = new AbsolutePanel();
private GameCtrl gameCtrl;
public BoardPanel(Game game) {
setSize("100px", "100px");
abs.add(new Image(game.getMap().getImageUrl()));
abs.setPixelSize(768,576);
add(abs);
for (Player player : game.getPlayerList()) {
drawRobot(player);
}
}
I have fixed it, your hint was right, because he thinks that the whole image is displayed.
If I set the size of the AbsolutePanel, the bottom scrollbar appears and it looks like it should.
I'm using gwt-dnd to implement drag-and-drop functionality in my GWT program. To get scrolling to work right, I need
<ScrollPanel>
<AbsolutePanel>
<VerticalPanel>
<!-- lots of draggable widgets -->
</VerticalPanel>
</AbsolutePanel>
</ScrollPanel>
I have to manually set the size of the AbsolutePanel to be large enough to contain the VerticalPanel. When I add widgets to the VerticalPanel, though, the size reported by VerticalPanel.getOffsetHeight() isn't immediately updated - I guess it has to be rendered by the browser first. So I can't immediately update the AbsolutePanel's size, and it ends up being too small. Argh!
My stop-gap solution is to set up a timer to resize the panel 500ms later. By then, getOffsetHeight will usually be returning the updated values. Is there any way to immediately preview the size change, or anything? Or, alternatively, can I force a render loop immediately so that I can get the new size without setting up a timer that's bound to be error-prone?
This is a common problem with DOM manipulations. The offsetHeight doesn't update until a short time after components are added. I like to handle this using a recursive timer until a pre-condition is violated. E.g. In your case let there be a function which adds components and will be defined as below:
public void addComponent(Widget w)
{
final int verticalPanelHeight = verticalPanel.getOffsetHeight();
verticalPanel.add(w);
final Timer t = new Timer(){
public void run()
{
if(verticalPanelHeight != verticalPanel.getOffsetHeight())
absolutePanel.setHeight(verticalPanel.getOffsetHeight() + 10 + "px");
else
this.schedule(100);
}
};
t.schedule(100);
}