I have a GWT dialog box that looks like the following:
public class FooDialog extends DialogBox {
public FooDialog() {
setText("Foo Dialog");
VerticalPanel outer = new VerticalPanel();
outer.setBorderWidth(3);
outer.setSize("400px", "200px");
outer.setHorizontalAlignment(HasAlignment.ALIGN_CENTER);
outer.setVerticalAlignment(HasAlignment.ALIGN_MIDDLE);
Button cancelButton = new Button("Cancel", new ClickHandler() {
public void onClick(ClickEvent event) {
hide();
}
});
HorizontalPanel buttons = new HorizontalPanel();
buttons.setBorderWidth(3);
buttons.add(cancelButton);
outer.add(buttons);
setWidget(outer);
}
}
For some reason the 'buttons' panel does not obey the horizontalAlignment setting; it sticks to the left side of the outer panel. It does, however, obey the vertialAlignment setting. Any ideas? Thanks!
Tables don't respect the parent's horizontal alignment property. Instead, set the left & right margins of the child table to "auto".
buttons.getElement().getStyle().setProperty("marginLeft", "auto");
buttons.getElement().getStyle().setProperty("marginRight", "auto");
More Info: Center a table with CSS
Related
How Can i position Popup at the mouse clicked position in GWT. I tried using the getX, and getY on the flextable and set the Popup to that position but that isn't working.
Quick example:
final RootLayoutPanel rootLayoutPanel = RootLayoutPanel.get();
final FocusPanel focusPanel = new FocusPanel();
/* just to make the clickable area visible */
focusPanel.getElement().getStyle().setBackgroundColor("red");
rootLayoutPanel.add(focusPanel);
final PopupPanel popupPanel = new PopupPanel();
popupPanel.add(new Label("Popup"));
popupPanel.show();
focusPanel.addClickHandler(new ClickHandler() {
#Override
public void onClick(final ClickEvent event) {
final int left = event.getClientX();
final int top = event.getClientY();
popupPanel.setPopupPosition(left, top);
}
});
Notes:
Make sure to show the PopupPanel after adding the focusPanel, otherwise it will be behind the focusPanel.
I'm using the RootLayoutPanel here, but you could also work relative to a different element (use left = event.getRelativeX(myContextElem); etc.)
If you don't want to use a FocusPanel (which has ClickHandlers), you could alternatively use a MouseDownHandler, but in that case you then need to call sinkEvents(Event.ONMOUSEDOWN).
i created a dialog box using uiBinder in gwt app, it works fine except it cannot move around. i don't know what's wrong with it, do i have to set caption in order to move it around?
here is my code:
myDialog.ui.xml
<g:HTMLPanel ui:field="_glossaryPanel">
<div class="dialogBox">
<h3>content goes here..</h3>
<p>More content...</p>
</div>
</g:HTMLPanel>
myDialog.java
public class MyDialog extends DialogBox {
private static MyDialogUiBinder uiBinder = GWT.create(MyDialogUiBinder.class);
interface MyDialogUiBinder extends UiBinder<Widget, MyDialog> {
}
public MyDialog() {
setWidget(uiBinder.createAndBindUi(this));
this.setModal(true);
this.setAutoHideEnabled(true);
}
FooterView.java
public class FooterView extends Composite implements FooterPresenter.Display {
interface Binder extends UiBinder<Widget, FooterView> {
}
private static final Binder BINDER = GWT.create(Binder.class);
#UiField
Anchor _glossary;
#UiHandler("_glossary")
public void handleGlossaryClick(ClickEvent event) {
MyDialog mDialog = new MyDialog();
mDialog.setGlassEnabled(true);
mDialog.setAnimationEnabled(true);
mDialog.center();
mDialog.show();
}
See http://gwt.google.com/samples/Showcase/Showcase.html#!CwDialogBox You have to use a DialogBox (not a PopupPanel) to move the thing around.
EDIT:
I tried your code and it worked for me. Have you tried clicking in the border (not content!) to drag the dialog box around?
GWT Dialogs can't be moved around like a desktop window. There was a projected called gwt-windows that would let you do that, but it hasn't been updated in years.
Maybe you could try in your ui.xml file to change the root element type
from HTMLpanel to a FlowPanel
I saw somewhere that was saying something like this. where ? I can't remember :-(
your <div clas="dialogBox"> is, in my opinion, a bit confusing, maybe yould consider renaming to something more personal and less in gwt keywords' like.
Here is the Solution,
VerticalPanel panel;
DialogBox dialogbox;
PopupPanel glass;
VerticalPanel DialogBoxContents;
ClickListener listener;
HTML message;
Button button;
SimplePanel holder;
public void demo()
{
// Create a panel and add it to the screen
panel = new VerticalPanel();
RootPanel.get("demo").add(panel);
panel.setStyleName("table-center");
//
// Create a DialogBox with a button to close it
dialogbox = new DialogBox(false);
dialogbox.setStyleName("demo-DialogBox");
DialogBoxContents = new VerticalPanel();
dialogbox.setText("DialogBox");
message = new HTML("Click 'Close' to close");
message.setStyleName("demo-DialogBox-message");
listener = new ClickListener()
{
public void onClick(Widget sender)
{
dialogbox.hide();
}
};
button = new Button("Close", listener);
holder = new SimplePanel();
holder.add(button);
holder.setStyleName("demo-DialogBox-footer");
DialogBoxContents.add(message);
DialogBoxContents.add(holder);
dialogbox.setWidget(DialogBoxContents);
//
// Add a button to the demo to show the above DialogBox
listener = new ClickListener()
{
public void onClick(Widget sender)
{
dialogbox.center();
}
};
button = new Button("Show DialogBox", listener);
panel.add(button);
}
Check out the DEMO AT http://examples.roughian.com/index.htm#Widgets~DialogBox
"do i have to set caption in order to move it around?"
Yes.
dialogbox.setText("DialogBox");
You may drag only catpion div;
When you drag caption div, whole dialog box will move.
Is there a way to add image or icon inside a GWT TextBox widget?
EDIT: The image is required to have a ClickHandler.
If you are only interested in visually adding an icon , you can add it using css such as :
background-image:url('icon.png');
background-repeat:no-repeat;
UPDATE :
If you need to add events to image, you can bind an image and a textbox in a horizontal panel as in #Sandro Munda's answer. Also another method is to use an absolute panel and css to make the image and the textbox overlap as such :
public class TextBoxWithImage extends Composite {
public TextBoxWithImage() {
AbsolutePanel p = new AbsolutePanel();
p.add(new TextBox());
Image image = new Image("images/down.png");
image.getElement().getStyle().setMarginLeft(-20, Unit.PX);
p.add(image);
image.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
Window.alert("Clicked!");
}
});
initWidget(p);
}
}
Not directly.
You can extend an HorizontalPanel and create your new widget like the ValueSpinner class does (from the Gwt Mosaic project).
ValueSpinner.java
As you can see, the ValueSpinner joins a TextBox and an Image inside a HorizontalPanel to create the widget.
I am building an application in GWT. I have a decorated tabpanel in
my application.Where in am adding panels to it dynamically.Now i want
to achieve the closing of these tabs. I want to add a close image to
the tab bar and event to that image for closing. I am using UIbinder.
the working code is like that;
private Widget getTabTitle(final Widget widget, final String title) {
final HorizontalPanel hPanel = new HorizontalPanel();
final Label label = new Label(title);
DOM.setStyleAttribute(label.getElement(), "whiteSpace", "nowrap");
ImageAnchor closeBtn = new ImageAnchor();
closeBtn.setResource(images.cross());
closeBtn.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
int widgetIndex = tabs.getWidgetIndex(widget);
if (widgetIndex == tabs.getSelectedIndex()) {
tabs.selectTab(widgetIndex - 1);
}
tabs.remove(widgetIndex);
}
});
hPanel.add(label);
hPanel.add(new HTML("   "));
hPanel.add(closeBtn);
hPanel.setStyleName("gwt-TabLayoutPanelTab");
return hPanel;
}
In order to add tab,
public void addTab() {
TabWriting tw = new TabWriting(); /* TabWriting in my case, this can be any widget */
tabs.add(tw, getTabTitle(tw, "Writing"));
tabs.selectTab(tw);
}
You'll going to need, ImageAnchorClass
public class ImageAnchor extends Anchor {
public ImageAnchor() {
}
public void setResource(ImageResource imageResource) {
Image img = new Image(imageResource);
img.setStyleName("navbarimg");
DOM.insertBefore(getElement(), img.getElement(), DOM
.getFirstChild(getElement()));
}}
It isn't supported natively in GWT.
You can manually try to add it.
Read this - http://groups.google.com/group/google-web-toolkit/browse_thread/thread/006bc886c1ccf5e1?pli=1
I haven't tried it personally, but look at the solution by gregor (last one).
You kinda need to do something along the lines of this
GWT Close button in title bar of DialogBox
First you need to pass in the tab header when you create the new tab. The header you pass in should have your tab text and also an X image or text label to click on. Then add a event handler on the close object that gets the widget you are adding to the tabPanel and removes it. Here is some inline code that works
public void loadTab(final Widget widget, String headingText, String tooltip) {
HorizontalPanel panel = new HorizontalPanel();
panel.setStyleName("tabHeader");
panel.setTitle(tooltip);
Label text = new Label();
text.setText(headingText);
text.setStyleDependentName("text", true);
Label close = new Label();
close.setText("X");
close.setTitle(closeText_ + headingText);
text.setStyleDependentName("close", true);
close.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
Window.alert("close this tab");
ClientGlobal.LOG.info("widget : " + tabPanel_.getWidgetIndex(widget));
tabPanel_.remove(tabPanel_.getWidgetIndex(widget));
}
});
panel.add(text);
panel.add(close);
panel.setCellHorizontalAlignment(text, HasHorizontalAlignment.ALIGN_LEFT);
panel.setCellHorizontalAlignment(close, HasHorizontalAlignment.ALIGN_RIGHT);
tabPanel_.add(widget, panel);
tabPanel_.getTabWidget(widget).setTitle(tooltip);
tabPanel_.selectTab(widget);
}
I'm new to GWT programming. So far I have a DialogBox which is supposed to collect a login and a password, which can if required launch another DialogBox that allows someone to create a new account.
The first of these two DialogBoxes always appears at the top left of the browser screen, and can't be dragged, although part of the definition of a DialogBox is that it can be dragged. However, the second DialogBox can be dragged about the screen without any problem.
What I'd really like is for the first DialogBox to appear in the middle of the screen & be draggable, both of which I thought would happen automatically, but there's not.
So, what things can stop a DialogBox from being draggable? There is nothing on the RootPanel yet. Does that make a difference?
Code fragments available if they help, but perhaps this general outline is enough for some pointers.
Thanks
Neil
Use dialogBox.center() This will center your DialogBox in the middle of the screen. Normally a DialogBox is by default draggable.
Just tried it out and it doens't matter if your RootPanel is empty our not. When I just show the DialogBox on ModuleLoad it is draggable and it is centered. Probably the problem is situated somewhere else.
This is the example of google itself:
public class DialogBoxExample implements EntryPoint, ClickListener {
private static class MyDialog extends DialogBox {
public MyDialog() {
// Set the dialog box's caption.
setText("My First Dialog");
// DialogBox is a SimplePanel, so you have to set its widget property to
// whatever you want its contents to be.
Button ok = new Button("OK");
ok.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
MyDialog.this.hide();
}
});
setWidget(ok);
}
}
public void onModuleLoad() {
Button b = new Button("Click me");
b.addClickListener(this);
RootPanel.get().add(b);
}
public void onClick(Widget sender) {
// Instantiate the dialog box and show it.
new MyDialog().show();
}
}
Here more information about the DialogBox.
Without seeing any of your code it's hard to tell what's going wrong. The following code works for me (ignore the missing styling...):
public void onModuleLoad() {
FlowPanel login = new FlowPanel();
Button create = new Button("create");
login.add(new TextBox());
login.add(new TextBox());
login.add(create);
create.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
final DialogBox box = new DialogBox();
FlowPanel panel = new FlowPanel();
Button close = new Button("close");
close.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
box.hide();
}
});
panel.add(new Label("some content"));
panel.add(close);
box.setWidget(panel);
box.center();
}
});
DialogBox firstBox = new DialogBox(false, true);
firstBox.setWidget(login);
firstBox.center();
}
Both boxes are draggable and shown in the center of your browser window.
Looks like you're overriding this method in Widget:
public void fireEvent(GwtEvent<?> event) {
if (handlerManager != null) {
handlerManager.fireEvent(event);
}
}
In Widget, handlerManager refers to a private HandlerManager.
Either add super.fireEvent(event) to your method or as you have done rename it.
Well, with vast amounts of trial and error I have found the problem, which was just this: I had a method in an object I'd based on DialogBox called fireEvent, which looked like this:
public void fireEvent(GwtEvent<?> event)
{
handlerManager.fireEvent(event);
}
Then, when a button was clicked on the DialogBox, an event would be created and sent off to the handlerManager to be fired properly.
And it turns out that if I change it to this (LoginEvent is a custom-built event):
public void fireEvent(LoginEvent event)
{
handlerManager.fireEvent(event);
}
... or to this ....
public void fireAnEvent(GwtEvent<?> event)
{
handlerManager.fireEvent(event);
}
the DialogBox is draggable. However, if the method begins with the line
public void fireEvent(GwtEvent<?> event)
then the result is a DialogBox which can't be dragged.
I'm a bit unsettled by this, because I can't fathom a reason why my choice of name of a method should affect the draggability of a DialogBox, or why using a base class (GwtEvent) instead of a custom class that extends it should affect the draggability. And I suspect there are dozens of similar pitfalls for a naive novice like me.
(Expecting the DialogBox to centre itself was simply my mistake.)