How can i add a button without text only with marker for forward and backward action for example for widget ListBox in gwt? i tried something like this:
Button btn = new Button("Forward");
btn.setHTML(("<img border='0' src='image\\B_forwards.png' />"));
but can't get the picture to show on button.
You don't need a button. Add an Image widget, and add a ClickHandler to it.
If you just want to add an image to a normal GWT Button, then PushButton is the way to go:
PushButton pushButton = new PushButton(new Image("test.png"));
Otherwise, if you just want to have a clickable image, you still can do that:
public interface MyResources extends ClientBundle{
MyResources INSTANCE = GWT.create(AppImages.class);
#Source("image.gif")
ImageResource image();
}
Image image = new Image( MyResources.INSTANCE.image() );
image.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
// do whatever you want
}
} );
Related
I am currently working on a school project where we are creating a GWT web application which uses a GeoChart widget to display information about the servers we have crawled. Simply put, I would wish to create a text box on top of our GeoChart widget which shows an interactive world map that takes up the whole screen right now to input information. I have searched quite extensively but I have been unable to come up with an answer.
Here is the code as follows:
#Override
public void onModuleLoad() {
dataReader = (DataReaderAsync) GWT.create(DataReader.class);
RootLayoutPanel.get().add(getSimpleLayoutPanel());
// Create the API Loader
ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
chartLoader.loadApi(new Runnable() {
#Override
public void run() {
getSimpleLayoutPanel().setWidget(getGeoChart());
drawGeoChart();
}
});
}
As GeoChart is a widget, it is wrapped under(i am not sure if this is the right word) a SimpleLayoutPanel right now which will display it into a full screen. As stated above, I would wish to include text above the geoChart. From my understanding, I would need to create another widget containing my text and add both the GeoChart widget and the text box widget into it. What would be the best way to go about doing this?
I believe DialogBox could solve your problem. People usually program the DialogBox in a way that it only pops up into display when certain event is triggered and disappears after user finishes some operation. In your particular case, you can simply make the DialogBox shows up from the beginning and never disappears. And the best part of it: you don't need to add the DialogBox widget to the geoChart widget. Calling dialogBox.center() or dialogBox.show() will do the magic for you.
Here is the sample code.
#Override
public void onModuleLoad() {
dataReader = (DataReaderAsync) GWT.create(DataReader.class);
RootLayoutPanel.get().add(getSimpleLayoutPanel());
// Create the API Loader
ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
chartLoader.loadApi(new Runnable() {
#Override
public void run() {
getSimpleLayoutPanel().setWidget(getGeoChart());
drawGeoChart();
}
});
// NOTE: the first argument 'false' makes sure that this dialog box
// will not disappear when user clicks outside of it
// NOTE: the second argument 'false' makes sure that mouse and keyboard
// events outside of the dialog box will NOT be ignored
DialogBox dialogBox = new DialogBox(false, false);
DialogBox.setText("Demo");
HorizontalPanel panel = new HorizontalPanel();
panel.setSpacing(5);
InlineLabel labelOfTextBox = new InlineLabel("Label");
TextBox textBox = new TextBox();
panel.add(labelOfTextBox);
panel.add(textBox);
dialogBox.setWidget(panel);
// show up in the center
dialogBox.center();
}
Dear all thanks for answering my question. To rectify this problem, I have made use of the custom widget API within GWT(known as Composite). Here's the code as below:
private static class CombinedWidget extends Composite {
public CombinedWidget() {
// place the check above the text box using a vertical panel.
VerticalPanel panel = new VerticalPanel();
DockLayoutPanel dPanel = new DockLayoutPanel(Unit.EM);
panel.setSpacing(13);
panel.add(nameProject);
nameProject.setStyleName("gwt-Group-Label");
panel.add(className);
panel.add(nameKs);
panel.add(nameEsmond);
panel.add(nameBowen);
panel.add(nameAaron);
dPanel.addWest(panel, 13);
dPanel.add(getGeoChart());
// all composites must call initWidget() in their constructors.
initWidget(dPanel);
setWidth("100%");
}
Actually I sort of changed from the original idea. Instead of putting it on the very top, I attached the labels into a VerticalPanel and then created a CombinedWidget(custom widget) which adds both a VerticalPanel and DockLayoutPanel together. I then added the VerticalPanel(containing all the labels) and the GeoChart into the DockLayoutPanel.
This solved my problem of displaying both the labels and the GeoChart on the same page(as originally i added it into a VerticalPanel but it would not work as the app would not read the GeoChart due to the VerticalPanel being overlayed on top of the GeoChart).
If you guys want a picture of my app to visualise, please say so!
There is plenty of online resource on how to add a graphic to a JavaFX button.
However I would like to know if there is a way to add a second (or any number, but more than 2 images probably woudn't make much sense in most situations) image.
My use case : i have a button with a square icon on the left, followed by a text label. The image is a representation of some real-life concept that button is linked with (could e.g. a car or a person). I would like to add a small icon to the right of some buttons, a "right chevron" to indicate the nature of the interaction.
I was thinking maybe to use a HBox with the full width as the graphic node of the button, and add the 2 images to it, but I don't think it is possible to put the text on top of the graphic node.
Any idea ?
Create your own custom node with icons and text and set it as graphic. Of course you don't show the button text because it's already in your custom graphic node.
Here's a simple example. You need to provide the files icon1.png and icon2.png.
public class ButtonWithMultipleIcons extends Application {
#Override
public void start(Stage primaryStage) {
try {
Group group = new Group();
Button button = new Button();
button.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
HBox hBox = new HBox();
ImageView icon1 = new ImageView( getClass().getResource( "icon1.png").toExternalForm());
ImageView icon2 = new ImageView( getClass().getResource( "icon2.png").toExternalForm());
Label label = new Label("Text");
//make the button grow if you want the right icon to always be on the right of the button :
label.setMaxWidth(Long.MAX_VALUE);
HBox.setHgrow(label, Priority.ALWAYS);
hBox.getChildren().addAll( icon1, label, icon2);
button.setGraphic(hBox);
group.getChildren().add( button);
Scene scene = new Scene(group,400,400);
primaryStage.setScene(scene);
primaryStage.show();
} catch(Exception e) {
e.printStackTrace();
}
}
public static void main(String[] args) {
launch(args);
}
}
You can try using html formatting in your button and adding an image with the tag before and after your text.
You can find more information about it in here:http://docs.oracle.com/javase/tutorial/uiswing/components/html.html
I had the same thing to get along with. You describing the solution with using a HBox. I think this would also be the best way.
Do the following:
Create a new CustomButton with your own specific layout maybe using a HBox and extending Button class from JavaFX. Style it your way you need it and you can add as many images you want to have in your custom button. Maybe it can look like this:
public class CustomButton extends Button
{
private HBox hbox;
private ImageView image1;
private ImageView image2;
public CustomButton()
{
super();
// Here add your specific images to global or local variables and then add all the children (images) to your HBox layout and this one to the button.
}
}
The problem ist, that JavaFX provides normal buttons and not such deeply customized components. If you want to style it, you can use CSS anyway.
Is it possible to create a horizontal panel with 2 buttons, one in GWT and one in JavaScript?
For example, I have this object:
HorizontalPanel panelHeader = new HorizontalPanel();
Button buttonexample = new Button();
Now, I have created a .js file with the button:
function javascriptbutton(){
document.write('<input type="button" name="try" value="try">');
}
and created a jsni method to call
public native static void javascriptTest() /*-{
$wnd.javascriptbutton(); // JSNI
}-*/;
My question is: how can I add the jsni method that contains a button on horizontal panel? Usually for GWT, I do panelheadr.add(button), but how can I do it for a javascript button?
You have to separate JS from HTML.
Create both buttons in GWT. Assign an id to your button that needs an external JavaScript. Attach a click handler to your button, and call your native JS from this click handler:
myButton.getElement().setId("jsButton");
myButton.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
// Here you call your JSNI native method
javascriptTest();
}
});
In your native JS method you can reference this button by its id.
Creating such a simple widget like Button in javascript and using in GWT should be your last resort and tricky as it might cause a cross-browser compatibility issues. In addition it will be difficult if you have to debug that code. Anyway there is a better solution.
Your custom button should be a GWT widget in order to add it to layout containers. That means the button class should implement at least IsWidget this allows the layout container which the button will be added to call asWidget method and return a simple wrapper container for button which allows you to layout the button easily. The following example uses a SimplePanel as the wrapper.
public class MyTextButton implements IsWidget, HasClickHandlers
{
private SimplePanel panel = new SimplePanel();
private Button button;
public MyTextButton()
{
button = Button.create(panel.getElement());
}
#Override
public Widget asWidget()
{
return panel;
}
//Use JavaScriptObject to create the DOM element for button which resides in the SimplePanel
private static class Button extends JavaScriptObject
{
private static native Button create(Element parent)/*-{
//create your javascript button here using parent element as the wrapper.
//ex: if your function is correct
//$wnd.javascriptbutton(parent);
}-*/;
}
#Override
public void fireEvent(GwtEvent<?> event)
{
}
#Override
public HandlerRegistration addClickHandler(ClickHandler handler)
{
//bind this handler to native button's onClick, return the registration for removal, on remove you need to reset the onClick
return null;
}
}
But ideally the MyTextButton class can be extended by UIObject or any other specific class if you want to get built in features.
I'm looking for tips/tutorials for displaying an image in a SWT/JFace dialog box.
Can someone please point me to the right way?
Take a look at the official tutorial.
If it is clickable:
Image image = new Image(display,
ShellWithButtonShowingEclipseLogo.class.getResourceAsStream(
"yourpicture"));
Button button = new Button(shell,SWT.PUSH);
button.setImage(image);
If it is not clickable then you can use Label instead of Button.
From your question i understood that you are trying to display
an image in the title area of the daialog Box.
You can make use of the "setTitleImage(Image image)" function in
your main class (class which extends the Dialog )
example:
class DemoDialog extends TitleAreaDialog {
public DemoDialog(Shell parentShell) {
super(parentShell);
}
protected Control createDialogArea(Composite parent) {
setTitle("Demo dialog...");
setTitleImage(ImageObject) // Image to be displayed in your Dialog
}
}
Basically I have a page with a button and listbox on it. When the button is clicked, I use a ClickHandler to add another item to the listbox. However, the listbox is not refreshed unless I use the browser refresh button. Is there a way to do this programmatically without refreshing the entire Window?
Thank you
The following code works for me without any manual refresh (tested on Firefox 3.6.12 and Safari 5.0.2 with GWT 2.0.3):
public void onModuleLoad() {
final RootPanel rootPanel = RootPanel.get();
final ListBox listBox = new ListBox();
listBox.addItem("Alpha");
rootPanel.add(listBox);
final Button button = new Button("Button");
button.addClickHandler(new ClickHandler() {
#Override
public void onClick(final ClickEvent event) {
listBox.addItem("Beta");
}
});
rootPanel.add(button);
}
Please test, if my code works for you, too. Is there something special about your code (or maybe you're using a different browser that behaves differently?)