I'm trying to create a GWT button that includes both an image and text like this:
I can create and set the button image like this:
PushButton button = new PushButton();
button.getUpFace().setImage(new Image(icon));
but if I do this the image disappears:
button.setText("ABC");
How can I keep both? I would prefer not to use the setHtml method because that would create a new HTTP request
EDIT: The problem with calling setHTML() is that it causes the browser to send another HTTP request to the server. This means that when I change the icon the button is blank for a second or two while the browser waits for a response from the server - obviously this not ideal. I'm looking for a way to use the image that is in memory in the form of a ImageResource object. Thanks!
There are lots of ways to achieve this.
Please have a look at below post asked in the same context:
HTML/CSS - Adding an Icon to a button
Adding icons to an button in gwt
GWT Custom Button with Icon above Text
Sample code:
Button button = new Button();
// get image form CSS resource
String url = new Image(Resources.INSTANCE.cut()).getUrl();
// get image from url
String url = "https://cdn3.iconfinder.com/data/icons/tango-icon-library/48/edit-cut-64.png";
// get image from the project war/images folder
String url = GWT.getHostPageBaseURL() + "images/cut.png";
String html = "<div><center><img src = '" + url
+ "'></img></center><label>Cut</label></br></div>";
button.setHTML(html);
Note: you can move it to CSS as well and append in HTML.
___________-
EDIT
You can achieve it using PushButton as well using setInnerHTML()method that will benefit from ImageResource as well.
final PushButton pushButton = new PushButton(new Image(Resources.INSTANCE.old_cut_icon()));
pushButton.getElement().setInnerHTML("<div><center>"+pushButton.getElement().getInnerHTML()+"</center><label><center>Cut</center></label></div>");
now simply call setImage() whenever needed to change the icon only.
pushButton.getUpFace().setImage(new Image(Resources.INSTANCE.new_cut_icon()));
Screenshot
Set a text on your button. Also set a CSS style:
.myButton {
background-image:url('/images/icon/cut.png');
background-position:center top;
padding: 28px 2px 2px;
}
Adjust padding depending on the size of your image.
An alternative approach is to create a widget that combines a button with a label, and either (1) put them in a LayoutPanel, specifying the position that you want, or (2) use CSS to move the label on top of the button (better).
Related
I have a Panel and a Image inside this Panel.
In onAfterRender I want to change the defaultModel of the Image.
#Override
protected void onAfterRender() {
super.onAfterRender();
previewImage.setDefaultModel(new Model<String>(newUrl));
}
But this has no effect. The purpose is to display a placeholder and when the Panel is rendered, then change its src
onAfterRender() is a callback executed right after the current Component has been rendered, i.e. it has contributed its part of the final HTML sent to the browser.
It is not very clear what you want to achieve with this placeholder.
In case you want to show a placeholder and then lazily load the real image then you can use AjaxLazyLoadPanel from wicket-extensions. Or you can use JavaScript to replace the placeholder once the image is loaded by the browser (img.addEventListener('load', ...).
onAfterRender() is usually used to render something right after the content/body rendered by this Component, but it cannot be used to change it.
How to click on Button hiding inside my text box in the form of image at the corner for Appium mobile testing
I need to click on the image. If I click on that image, it will display
one popup and i am unable to find locator separately for the image using
UIAUTOMATOR VIEWER because image is inside my textbox so please help me
to overcome from this i am not able to proceed.
I am using UIautomator viewer tool avalible to find the locator more unique?
You can use TouchAction and click by coordinates:
WebElement accountTextBox = driver.findElement(By.id("account_edit_text"));
Point point = accountTextBox.getLocation();
int shiftX = accountTextBox.getSize().width - 5; // you can adjust it
int shiftY = accountTextBox.getSize().height/2;
new TouchAction(driver)
.press(point.x + shiftX, point.y + shiftY)
.waitAction(ofSeconds(1))
.release()
.perform();
Also you can use Appium-desktop and try automationName capability set to UIAutomator2 and check what XML its gonna build: it might parse button as separate element.
Is there a way to add text next to the action icon in the toolbar of an eclipse RCP UI Form? If you do not assign the Action an ImageDescriptor, the action will be displayed containing only text. If you do give it an ImageDescriptor, it displays only the image. I want to display both side by side, within one button - is there a way to do this?
This will have only the text "Description" in the button on the toolbar:
myAction = new Action("Description", SWT.PUSH) {
#Override
public void run() {}
};
myForm.getToolBarManager().add(myAction);
But adding an image will cause the the text to be replaced:
myAction.setImageDescriptor(newImage);
I was eventually able to find an answer to my issue, hopefully it's helpful to anyone else who runs into this problem. I found this in the Eclipse Rich Client Platform (2nd Ed.) book.
The Action must be converted to an ActionContributionItem with its mode set to MODE_FORCE_TEXT. This will display both the text and the image in the toolbar.
ActionContributionItem aCI = new ActionContributionItem(myAction);
aCI.setMode(ActionContributionItem.MODE_FORCE_TEXT);
myForm.getToolBarManager().add(aCI);
i have button and want to set an icon to it along with the text inside it. their is no property to add icon to button like in smartGwt .. any idea how to achieve it please help.
There are many ways of achieving this.
Way 1 : Easy way
Just set the background image via code.
myButton.getElement().getStyle().setBackgroundImage("path");
Way 2: Another easy way
Set your own html
myButton.setHtml("Pass the html string");
Way 3: Easy but gives more control
myButton.addStylename("buttonStyle")
Use css to style this
.buttonStyle{
color : red;
}
Way 4: Best way according to me
Create your own split button wrapping it around a flowpanel or horizontalPanel, with image as your first widget and button as your another widget. This gives you additional control on image and as well as button. You can have your click handler on image as well as button and you can style each one of them individually.
This is how I achieved setting an icon in my get:button.
Add an extra style class hook, mine below is btn-fa-group to your gwt button. If you use the attribute 'addStyleNames' you can define them in your stylesheet and have multiple classes.
<g:Button text=" Post Your Answer" enabled="false" ui:field="showPostButton" addStyleNames="btn btn-default btn-fa-group" />
Now in your CSS define the following declaration:
btn-fa-group:before {
color: #333333;
content: "\f0c0";
display: inline-block;
font-family: "fontawesome";
}
Some important things to note; don't forget the before selector, make sure the unicode starts with a slash and have fontAwesome installed. Alternatively you can use another glyph icon if you have the font installed.
You can set innerhtml with image in button i.e.
Button button=new Button("<image src='abc.jpg' width='200px' height='300px' />Ok");
Button bt = new Button();
bt.getElement().getStyle().setBackgroundImage("url('path/to/ur/image/imagename.extention')");
also set size of background image wrt to the size of button
bt.getElement().getStyle().setProperty("backgroundSize","30px");
Add a Css Class to your Button is probalby the best solution.
button.addStyleName("ButtonIcon");
How to define the CSS and HTML you can read here.
Yes ,you can .Gwt have a SmartGwt type button called push buttopn
com.google.gwt.user.client.ui.PushButton
You can pass Image object to it as below
Image image = new Image(GWT.getModuleBaseURL() + "/images/search-arrow.png");
RootPanel.get().add(new PushButton(image));
I have a form with an Image widget and a FileUpload widget.
I can use file upolad to change images.
I'd like to visualise a changed image right after a new image is submited to a servlet. But how can I force an Image widget to grab a new image from server ? (image's url doesn't change, content does) .
If you can't/don't want to change the URL on the server, you can alternatively add a query parameter like:
version++;
image.setUrl(url + "?v" + version);
The query parameter will be ignored on the server (except if you want to use it somehow), but it forces a reload, because the browser doesn't know, if the image might be generated dynamically.
Or better: just set the URL to "" then back to the original URL. Tested in Chrome.
String url = image.getUrl();
image.setUrl("");
image.setUrl(url);