11340

Adding icons to an button in gwt

Question:

i have button and want to <strong><em>set an icon to it along with the text</em></strong> inside it. their is no property to add <strong>icon to button</strong> like in smartGwt .. any idea how to achieve it please help.

Answer1:

There are many ways of achieving this.

<h2>Way 1 : Easy way</h2>

Just set the background image via code. myButton.getElement().getStyle().setBackgroundImage("path");

<h2> Way 2: Another easy way </h2>

Set your own html myButton.setHtml("Pass the html string");

<h2>Way 3: Easy but gives more control</h2>

myButton.addStylename("buttonStyle")

Use css to style this

.buttonStyle{ color : red; } <h2>Way 4: Best way according to me </h2>

Create your own split button wrapping it around a <a href="http://google-web-toolkit.googlecode.com/svn/javadoc/latest/com/google/gwt/user/client/ui/FlowPanel.html" rel="nofollow">flowpanel</a> or <a href="http://google-web-toolkit.googlecode.com/svn/javadoc/latest/com/google/gwt/user/client/ui/HorizontalPanel.html" rel="nofollow">horizontalPanel</a>, 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.

Answer2:

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.

Answer3:

You can set innerhtml with image in button i.e.

Button button=new Button("<image src='abc.jpg' width='200px' height='300px' />Ok");

Answer4:

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");

Answer5:

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 <a href="https://stackoverflow.com/questions/3490216/html-css-adding-an-icon-to-a-button" rel="nofollow">here</a>.

Answer6:

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));

Recommend

  • Set UITableView BackgroundColor Universally with UIAppearance
  • Processing (too) many XML files (with TagSoup)
  • ember js subviews and didinsertelement event
  • OpenXML how to get cell in range
  • How do I calculate a grouped z score in R using dplyr?
  • wpf: update multiple controls via dispatcher
  • Does argparse support multiple exclusive arguments?
  • Codeigniter Hooks advance
  • Build Matrix of Comparisons in SQl Server
  • c++ using primitive types as a base class
  • Should a web service response include empty values?
  • Wrapping a c#/WPF GUI around c++/cli around native c++
  • Creating NSCollectionView with datasource programatically
  • Making Google Visualization - Annotation Chart to work in GWT
  • Android onKey w/ virtual keyboard
  • jQuery: add elements until a particular height is reached
  • Reduction and collapse clauses in OMP have some confusing points
  • Detect when Facebook like button is clicked
  • WPF - CanExecute dosn't fire when raising Commands from a UserControl
  • AJAX Html Editor Extender upload image appearing blank
  • How to match http request and response using Jersey ContainerRequestFilter and ContainerResponseFilt
  • Projection media query: browser support and workarounds?
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • 'TypeError' while using NSGA2 to solve Multi-objective prob. from pyopt-sparse in OpenMDAO
  • jquery mobile loadPage not working
  • R: gsub and capture
  • Data Validation Drop Down Box Arrow Disappearing
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • How do you join a server to an Active Directory (domain)?
  • JTable with a ScrollPane misbehaving
  • Angular 2 constructor injection vs direct access
  • Why joiner is not used after Sequence generator or Update statergy
  • Java static initializers and reflection
  • Exception on Android 4.0 `android.os.StrictMode$AndroidBlockGuardPolicy.onNetwork(StrictMode)`
  • Android Google Maps API OnLocationChanged only called once
  • Linking SubReports Without LinkChild/LinkMaster
  • unknown Exception android
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app