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.
Related
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.
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.
My purpose is to draw in the CENTER of the composite. Actually, I have an rcp view and I'm drawing some shapes inside it. this is the code that I use :
display = parent.getDisplay();
white= display.getSystemColor(SWT.COLOR_WHITE);
parent.setLayout(new FillLayout(SWT.VERTICAL));
// Create the ScrolledComposite to scroll horizontally and vertically
final ScrolledComposite sc =new ScrolledComposite(parent, SWT.H_SCROLL | SWT.V_SCROLL | SWT.BORDER);
sc.setExpandHorizontal(true);
sc.setExpandVertical(true);
sc.setMinHeight(100);
sc.setMinWidth(100);
sc.setSize(100,100);
Composite child = new Composite(sc,SWT.NONE);
child.setLayout(new FillLayout());
child.layout(true);
parent.addListener (SWT.Resize, new Listener () {
public void handleEvent (Event e) {
x = child.getBounds().width/2;
y = child.getBounds().height/2;
child.addPaintListener(new PaintListener() {
public void paintControl(PaintEvent event) {
dessin(gc); // to raw the circle
}
});
sc.getDisplay().update();
}
});
I defined the view with a ratio (so when the view is empty I get the wanted size)...I don't know the exact size of the view since it can be resized by the user at anymoment, or when an editor is opened... So, my problem is how to draw just in the center of the view and keep the drawings in the center even if the view is resized...
PS: Using (Point.x and point.y), I get (0,0) when the view appears first, then I get other values...
Pleaaaaaaaaaaaaaase help
You can use getOrigin() method on ScrolledComposite, which will return Point instance with the point in the content that currently appears in the top left corner of the scrolled composite. See docs getOrigin method on ScrolledComposite.
With that information and size of the component which you'll get from getBounds() method you can easily calculate the 'real' center.
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 am trying to place a widget (composite) within a DockLayoutPanel, i want this to be at
center (vertical as wellas horizontal) . Not using uibinder . How to do it?
Note that the UIBinder notation of "center" when laying out a DockLayoutPanel does not refer to the widget being physically centered in the panel but to the center widget taking up all space in the containing panel not used by those widgets added to the sides. I.e. in the following layout the widget C is the "center" panel even though it flows all the way to the right of its container.
<g:DockLayoutPanel>
<g:north><g:Label>A</g:Label></g:north>
<g:west><g:Label>B</g:Label></g:north>
<g:center><g:Label>C</g:Label></g:center>
<g:south><g:Label>D</g:Label></g:south>
</g:DockLayoutPanel>
----------------
| A |
----------------
|B| C |
----------------
| D |
----------------
If you were to add a single child "center" widget to a DockLayoutPanel it would use up all vertical and horizontal space in the panel - it would not be centered.
If you want to achieve physical centering using one of the absolute positioning layout panels I suggest just using LayoutPanel:
LayoutPanel panel = new LayoutPanel();
MyWidget myWidget = new MyWidget();
panel.add(myWidget);
// Note that this assumes that both widgets are attached and have meaningful
// sizes - use the RequiresResize interface to get notification of when the
// positioning of myWidget needs change. Note also that if panel or myWidget
// have any decoration that modifies its offsetWidth (margin, border, padding)
// that will need to be taken into account to correctly center myWidget.
int top = panel.getOffsetHeight() - (myWidget.getOffsetHeight() / 2);
int left = panel.getOffsetWidth() - (myWidget.getOffsetWidth() / 2);
panel.setWidgetTopHeight(myWidget, top, Unit.PX, myWidget.getOffsetHeight(), Unit.PX);
panel.setWidgetLeftWidth(myWidget, left, Unit.PX, myWidget.getOffsetWidth(), Unit.px);
The problem is that unless you make assumptions that the window will not be resized it is not possible to solve this problem in a LayoutPanel without a WindowResizeHandler, however it can easily be solved with a table.
DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.EM);
// some code here
Button button = new Button("center");
FlexTable wrapper = new FlexTable();
wrapper.setSize("100%", "100%");
wrapper.setWidget(0, 0, button);
wrapper.getFlexCellFormatter().setVerticalAlignment(0, 0, HasVerticalAlignment.ALIGN_MIDDLE);
wrapper.getFlexCellFormatter().setHorizontalAlignment(0, 0, HasHorizontalAlignment.ALIGN_CENTER);
dockLayoutPanel.add(wrapper);