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.
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.
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 trying to replace the contents of the CENTER portion of a DockLayoutPanel from a MenuBar. The MenuBar will sit at the North, but "content" (forms, reports, etc) will reside in Center.
I thought I could do it by grabbing the entire DockLayoutPanel from the RootPanel (index 0, since that's the only widget directly attached to it), then somehow remove the current contents of center and insert the new. Unfortunately, getWidget(int index) is non-static, so it's not working.
Can anyone how me with the right way to do this? Non-working code is below:
// snipped package and import details
public class menubar extends Composite {
private static menubarUiBinder uiBinder = GWT.create(menubarUiBinder.class);
interface menubarUiBinder extends UiBinder<Widget, menubar> {
}
#UiField MenuBar applicationMenuBar;
#UiField MenuBar processMenuBar;
#UiField MenuBar reportsMenuBar;
#UiField MenuItem addPowerRequirementCmd;
#UiField MenuItem powerUsageReportCmd;
public menubar() {
initWidget(uiBinder.createAndBindUi(this));
// command to replace whatever is in DockLayoutPanel.CENTER w/ AddPowerRequirement
// FormPanel
addPowerRequirementCmd.setCommand(new Command() {
#Override
public void execute() {
// get DockLayoutPanel from the RootPanel (it's the only widget, should be
// index 0
DockLayoutPanel dlp = (DockLayoutPanel) RootPanel.getWidget(0);
// clear out DockLayoutPanel.CENTER
// insert the FormLayoutPanel into DockLayoutPanel.CENTER
dlp.add(new PowerRequirementForm());
}
});
// command to replace whatever is in DockLayoutPanel.CENTER w/ power usage report
powerUsageReportCmd.setCommand(new Command() {
#Override
public void execute() {
}
});
}
}
Thanks!
Use a ui:field attribute, like you do for the MenuBar, to get a reference to the DockLayoutPanel from UiBinder:
<g:DockLayoutPanel ui:field="dockPanel"/>
and in the class:
#UiField DockLayoutPanel dockPanel;
However, it sounds like you want to have a set of widgets that are shown in the center of the panel depending on application state. A DeckPanel is a better solution for this:
<g:DockLayoutPanel>
<g:center>
<g:DeckPanel ui:field="deck">
<g:FlowPanel>Panel #0</g:FlowPanel>
<g:FlowPanel>Panel #1</g:FlowPanel>
</g:DeckPanel>
</g:center>
</g:DockLayoutPanel>
And then to switch the displayed child of the DeckPanel:
deck.showWidget(1); // Show Panel #1
deck.showWidget(0); // Show panel #0
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