i'm using gwt and want to create my own onClickHandler.
at the google docs i found a good example:
public class HandlerExample extends Composite implements ClickHandler {
private FlowPanel fp = new FlowPanel();
private Button b1 = new Button("Button 1");
private Button b2 = new Button("Button 2");
public HandlerExample() {
initWidget(fp);
fp.add(b1);
fp.add(b2);
b1.addClickHandler(this);
b2.addClickHandler(this);
}
public void onClick(ClickEvent event) {
// note that in general, events can have sources that are not Widgets.
Widget sender = (Widget) event.getSource();
if (sender == b1) {
// handle b1 being clicked
} else if (sender == b2) {
// handle b2 being clicked
}
}
}
but in my project the clickhandlermethod is out of the file with the buttons. Is there a way to handle buttons with different function with one handler?
greetz
You can do something like this:
public class HandlerExample extends Composite {
private FlowPanel fp = new FlowPanel();
private Button b1 = new Button("Button 1");
private Button b2 = new Button("Button 2");
public HandlerExample() {
initWidget(fp);
fp.add(b1);
fp.add(b2);
}
public List< HandlerRegistration > addClickHandlerToAllButtons( ClickHandler handler ) {
List< HandlerRegistration > handlerRegistrations = new ArrayList< HandlerRegistration >();
handlerRegistrations.add( b1.addClickHandler( handler ) );
handlerRegistrations.add( b2.addClickHandler( handler ) );
return handlerRegistrations;
}
}
Implement HasClickHandlers instead. Then you can set your implementations of ClickHanlder from outside your widget code.
Do you need to have different ClickHandler's for different buttons? If so, then maybe you could just have public/protected methods to set ClickHandler's for each button.
Related
I have a for loop that displays a list of text fields and radio buttons.
What is the best way to reference the widgets so that I can read the text fields and aslo find which radio button is checked.
Here is my loop
for(int x = 0; x<getLoopCount(); x++)
{
answerTable.setWidget(x,0, new Label("Answer:"));
answerTable.setWidget(x,1, new TextBox());
answerTable.setWidget(x,2, new RadioButton(""));
}
Is there a way to ID each widget so I can reference it?
I would recommend grouping the three widgets together in a composite widget like this:
class AnswerComposite extends Composite {
private final Label label;
private final TextBox textBox;
private final RadioButton radioButton;
public AnswerComposite() {
label = new Label("Answer:");
textBox = new TextBox();
radioButton = new RadioButton("answerGroup");
HorizontalPanel contentPanel = new HorizontalPanel();
contentPanel.add(label);
contentPanel.add(textBox);
contentPanel.add(radioButton);
initWidget(contentPanel);
}
public String getText() {
return textBox.getValue();
}
public boolean isSelected() {
return radioButton.getValue();
}
}
You can then add them to a panel and/or put them in a list like this:
VerticalPanel answersPanel = new VerticalPanel();
List<AnswerComposite> answerComposites = new ArrayList<AnswerComposite>();
for (int i = 0; i < getLoopCount(); i++) {
AnswerComposite answerComposite = new AnswerComposite();
answersPanel.add(answerComposite);
answerComposites.add(answersComposite);
}
Checking your widgets then becomes very easy:
answerComposites.get(i).getText();
answerComposites.get(i).isSelected();
It will probably also be convenient to add a ValueChangeHandler to your RadioButtons (see enrybo's answer).
You can add a ValueChangeHandler to your RadioButton when you are creating them.
for(int x = 0; x<getLoopCount(); x++){
answerTable.setWidget(x,0, new Label("Answer:"));
answerTable.setWidget(x,1, new TextBox());
RadioButton rb = new RadioButton("");
rb.addValueChangeHandler(new ValueChangeHandler(){
#Override
void onValueChange(ValueChangeEvent<Boolean> event){
// Do something
}
});
answerTable.setWidget(x,2, rb);
}
The ValueChangeEvent will only be fired when the RadioButton is checked. It will not fire if another RadioButton in the same group is checked.
Since you're adding the ValueChangeHandler as you're creating your RadioButton you should know what is to be done with it without having to create an ID for it.
Let me give you an adhoc answer, so don't care about the syntax but the algorithmic idea.
Extend GWT button.
abstract class MyButton
extends Button{
// provide the appropriate constructor in impl class,
// especially if using uibinder
abstract public void helloDolly(... args ...);
}
Instantiate all those buttons using MyButton.
MyButton[] buttons = {
new MyButton(){
public void helloDolly(... args ...){
Window.alert("allo allo #1");
}
},
new MyButton(){
public void helloDolly(... args ...){
Window.alert("allo allo #2");
}
},
// blah blah black sheep ....
}
Use clickEvent.getSource() when defining handler.
buttons[i].addEventHandler(
new ClickHandler(ClickEvent click){
Object src = click.getSource();
if (src !instanceOf MyButton){
throw new MyAngryException("For goodness' sake, pls use MyButton");
// or ignore
return;
}
((MyButton)src).helloDolly(... args ...);
}
)
I have a Navigation panel with Back/Forward buttons ( Function not important, just want to get my head around swapping Panels in and out of a GWT page )
NavigationButtonsPanel
public class NavigationButtonsPanel extends HTMLPanel
{
private Button btnA = new Button("Go back");
private Button btnB = new Button("Go forward");
public NavigationButtonsPanel( )
{
super("Navigation Panel");
add(btnA);
add(btnB);
}
public void setBackHandler( ClickHandler handler )
{
btnA.addClickHandler(handler);
}
public void setForwardHandler( ClickHandler handler )
{
btnB.addClickHandler(handler);
}
}
I then have 3 basic panels, A B and C which use this. My Navigation from A-B-C and back to B-A works fine.
I now simulate a user changing something before they go to Panel B. In this case a Label in PanelB.
My final app will obviously be more complex than this but would this be typical of how an app would work. You modify some fields in a Panel through a users interaction in the same panel or a different one, load the new panel, more interaction, load in different panel etc?
I will only want a user to use a very well defined navigation path so there is only one path to a certain panel.
PanelA
public class PanelA extends HTMLPanel
{
private static PanelA panel;
private PanelA()
{
super("Panel A");
final RootPanel rootPanel = RootPanel.get();
NavigationButtonsPanel btnPanel = new NavigationButtonsPanel();
btnPanel.setForwardHandler(new ClickHandler() {
public void onClick(ClickEvent event)
{
rootPanel.clear();
PanelB.setMessageFromPreviousPage("Message set in Panel AAAAA");
rootPanel.add( PanelB.getInstance() );
}
});
add( btnPanel );
}
public static PanelA getInstance()
{
if (panel == null)
{
panel = new PanelA();
}
return panel;
}
}
PanelB
public class PanelB extends HTMLPanel
{
private static PanelB panel;
private static String messageFromPreviousPage;
private PanelB()
{
super("Panel B");
final RootPanel rootPanel = RootPanel.get();
Label messageLabel = new Label(messageFromPreviousPage);
NavigationButtonsPanel btnPanel = new NavigationButtonsPanel();
btnPanel.setBackHandler(new ClickHandler() {
public void onClick(ClickEvent event)
{
rootPanel.clear();
rootPanel.add( PanelA.getInstance() );
}
});
btnPanel.setForwardHandler(new ClickHandler() {
public void onClick(ClickEvent event)
{
rootPanel.clear();
rootPanel.add( PanelC.getInstance() );
}
});
add( btnPanel );
add(messageLabel);
}
public static PanelB getInstance()
{
if (panel == null)
{
panel = new PanelB();
}
return panel;
}
public static void setMessageFromPreviousPage(
String message)
{
messageFromPreviousPage = message;
}
}
PanelC
public class PanelC extends HTMLPanel
{
private static PanelC panel;
private PanelC()
{
super("Panel C");
final RootPanel rootPanel = RootPanel.get();
NavigationButtonsPanel btnPanel = new NavigationButtonsPanel();
btnPanel.setBackHandler(new ClickHandler() {
public void onClick(ClickEvent event)
{
rootPanel.clear();
PanelB.setMessageFromPreviousPage("Message set in Panel CCCCCC");
rootPanel.add( PanelB.getInstance() );
}
});
add( btnPanel );
}
public static PanelC getInstance()
{
if (panel == null)
{
panel = new PanelC();
}
return panel;
}
}
Any idea why Panel B does not update its UI?
Because when first time PanelB instance created using PanelB.getInstance() , then messageLabel created and it also set value. while you are calling second time same method from PanelC after changing the message, At that time, it's using same instance of PanelB instead of new object. and as per your coding, you are changing the value of messageFromPreviousPage variable instead of label text. so you didn't find any changes on UI.
If you want to change the label text, then declare messageLabel as a globel variable static and change label. i.e.
private static Label messageLabel;
private PanelB()
{
//your code
}
public static PanelB getInstance()
{
if (panel == null)
{
panel = new PanelB();
}
else
{
messageLabel.setText(messageFromPreviousPage); //Require to set Text Again
}
return panel;
}
I have created Login Class:
public class LoginPage extends VerticalPanel implements ClickHandler {
ApplicationMethods appMthd;
private RootPanel rootPanel;
TextBox txtUserEmail;
PasswordTextBox txtPassword;
Button btnLogin;
String strEmail, strPass;
public LoginPage(ApplicationMethods appMthd) {
this.appMthd = appMthd;
rootPanel = RootPanel.get();
rootPanel.setSize("320", "480");
btnLogin = new Button("Login");
btnLogin.setText("Login");
rootPanel.add(btnLogin, 224, 256);
btnLogin.setSize("79px", "35px");
btnLogin.addClickHandler(this);
txtUserEmail = new TextBox();
rootPanel.add(txtUserEmail, 36, 161);
txtUserEmail.setSize("240px", "20px");
txtPassword = new PasswordTextBox();
rootPanel.add(txtPassword, 36, 207);
txtPassword.setSize("240px", "20px");
}
#Override
public void onClick(ClickEvent event) {
// TODO Auto-generated method stub
if(event.getSource() == btnLogin)
{
strEmail = txtUserEmail.getText().toString();
strPass = txtPassword.getText().toString();
appMthd.onLogin(strEmail, strPass);
}
else
{
Window.alert("Coming Soon..!!");
}
}
}
But I can't access any textbox or click on button.
Because Parent class is RootPanel.
If I am using :
add(txtUserEmail);
add(txtPassword);
add(btnReg);
add(btnLogin);
btnLogin.addClickHandler(this);
Then, it is accessible. In this, parent class is VerticalPanel.
So, how can I resolve this problem for RootPanel.?
Please help me for this.
Thanks in advance.
When you use VerticalPanel you can't specify the x,y
You can of course extend AbsolutePanel if you want to specify x,y
but since you're programming for mobile, that's a good thing.
If you want to create mobile applications with phonegap and gwt
you should check the mgwt and hello world mgwt
public LoginPage() {
rootPanel = RootPanel.get();
rootPanel.setSize("320", "480");
rootPanel.add(this);
btnLogin = new Button("Login");
btnLogin.setText("Login");
add(btnLogin);
btnLogin.setSize("79px", "35px");
btnLogin.addClickHandler(this);
txtUserEmail = new TextBox();
add(txtUserEmail);
txtUserEmail.setSize("240px", "20px");
txtPassword = new PasswordTextBox();
add(txtPassword);
txtPassword.setSize("240px", "20px");
}
My gwt project have flexTable show data of image and button on each row and coll.
But my button won't work properly. this is my current code:
private Button[] b = new Button[]{new Button("a"),...,new Button("j")};
private int z=0;
...
public void UpdateTabelGallery(JsArray str){
for(int i=0; i str.length(); i++){
b[i].setText(str.gettitle());
UpdateTabelGallery(str.get(i));
}
}
public void UpdateTabelGallery(GalleryData str){
Image img = new Image();
img.setUrl(str.getthumburl());
HTML himage= new HTML("a href="+str.geturl()+">"+ img +"/a>" + b[z] );
TabelGaleri.setWidget(y, x, himage);
//is here th right place?
b[z].addClickHandler(new ClickHandler(){
#Override
public void onClick(ClickEvent event) {
Window.alert("I wan to show the clicked button text" + b[z].getText());
}
});
z++;
}
I'm still confuse where I should put my button handler. With this current code seems the clickhandler didn't work inside a looping. And if I put it outside loop its not working because I need to know which button clicked. I need to get my index button.but how? Is there any option than array button?
thanks
I was using this method me too, then I've created a new Button with an additional argument.
When I add the ButtonArg I set also the argument:
Panel.add(new ButtonArg("B1", i));
...
// Create a handler for the A-Z buttons
class MyHandler implements ClickHandler {
public void onClick(ClickEvent e) {
ButtonArg btn=(ButtonArg) e.getSource();
Window.alert("Button Text="+btn.getArgument());
}
}
public class ButtonArg extends Button {
int argument;
public ButtonArg(String html, int arg) {
super(html);
setArgument(arg);
}
public int getArgument() {
return argument;
}
public void setArgument(int argument) {
this.argument = argument;
}
[...]
The problem is that you refer to 'z' in your click handler, but the value of z changes, so that when your click handler is actually called the value of z is wrong.
You need a local final variable in UpdateTabelGallery which you assign the current value of z to to allow it to be captured by the handler you create. Even better, get rid of z entirely and pass i to UpdateTableGallery:
public void updateTableGallery(GalleryData str, final int i){
Image img = new Image();
img.setUrl(str.getthumburl());
HTML himage= new HTML("a href="+str.geturl()+">"+ img +"/a>" + b[i] );
TabelGaleri.setWidget(y, x, himage);
//is here th right place?
b[i].addClickHandler(new ClickHandler(){
#Override
public void onClick(ClickEvent event) {
Window.alert("I wan't to show the clicked button text" + b[i].getText());
}
});
}
But what do you expect:
HTML himage= new HTML("a href="+str.geturl()+">"+ img +"/a>" + b[i] );
to do? Aside from the incorrect HTML syntax, I don't think adding ypur button to the string will work.
I know this is old, but it didn't look answered and I was looking to do the same thing. Here's one solution:
public void onModuleLoad() {
Button[] b=new Button[26];
RootPanel rp=RootPanel.get("body");
// Create a handler for the A-Z buttons
class MyHandler implements ClickHandler {
public void onClick(ClickEvent e) {
Button btn=(Button) e.getSource();
Window.alert("Button Text="+btn.getText());
}
}
MyHandler handler = new MyHandler();
for(int i=0;i<26;i++) {
b[i] = new Button(String.valueOf((char)(65+i)));
b[i].addStyleName("sendButton");
rp.add(b[i]);
b[i].addClickHandler(handler);
}
SimplePanel sPanel = new SimplePanel();
}
I am trying to get a proper method for days to select multiple cells in a flextable's column.
So far i only managed to do it with clicks which works well, but a drag selection would be much better. I have been reading docs and searching, but all the stuff i found was based on deprecated code. I use GWT 2.0 .
I know i need some event handler which would run when drag selection mouse gesture occurs, and that handler needs to know the cell's index where the selection start and of course the cell's index where the selection ends.
Any advice || code would be much appreciated.
This needs to be improved but it should give you the basic idea. First you need to create a CustomTable that listens to MouseEvents. You can do this by extending composite to wrap a focuspanel and a flextable as such :
public class CustomTable extends Composite implements MouseDownHandler, MouseMoveHandler, MouseUpHandler{
List<CellWidget> widgets = new ArrayList<CellWidget>();
FlexTable table = new FlexTable();
FocusPanel focusPanel = new FocusPanel();
boolean selecting= false;
Point selectStart,selectEnd;
public CustomTable(){
focusPanel.setWidget(table);
focusPanel.addMouseDownHandler(this);
focusPanel.addMouseMoveHandler(this);
focusPanel.addMouseUpHandler(this);
initWidget(focusPanel);
}
public void setWidget(int row, int column, CellWidget widget){
widgets.add(widget);
table.setWidget(row, column, widget);
}
#Override
public void onMouseUp(MouseUpEvent event) {
event.preventDefault();
if (selecting){
selecting=false;
DOM.releaseCapture(this.getElement());
selectEnd = new Point(event.getClientX(),event.getClientY());
for (CellWidget widget : widgets){
if (widget.isIn(selectStart,selectEnd))
widget.say();
}
selectStart = selectEnd = null;
}
}
#Override
public void onMouseMove(MouseMoveEvent event) {
event.preventDefault();
if (selecting){
//do some fancy layout
}
}
#Override
public void onMouseDown(MouseDownEvent event) {
event.preventDefault();
selecting = true;
DOM.setCapture(this.getElement());
selectStart = new Point(event.getClientX(),event.getClientY());
}
}
Next you define a CellWidget which basically encapsulates what you would like to add to your cells. When added to DOM, CellWidget calculates and stores its position later to determine if it is in the selected area :
public class CellWidget extends Composite{
Widget content;
Point topLeft,topRight,bottomLeft,bottomRight;
public CellWidget(Widget w){
this.content = w;
initWidget(w);
}
#Override
protected void onLoad() {
topLeft = new Point(getAbsoluteLeft(),getAbsoluteTop());
topRight = new Point(getAbsoluteLeft()+getOffsetWidth(),getAbsoluteTop());
bottomLeft = new Point(getAbsoluteLeft(),getAbsoluteTop()+getOffsetHeight());
bottomRight = new Point(getAbsoluteLeft()+getOffsetWidth(),getAbsoluteTop()+getOffsetHeight());
}
public void say(){
Window.alert(content + " is selected!");
}
public boolean isIn(Point start, Point end){
if (topLeft.isBetween(start, end) || topRight.isBetween(start, end)
|| bottomLeft.isBetween(start, end) || bottomRight.isBetween(start, end))
return true;
else
return false;
}
}
A simple point implementation to make things easier :
public class Point {
int x,y;
public Point(int x,int y){
this.x=x;
this.y=y;
}
public int getX() {
return x;
}
public int getY() {
return y;
}
#Override
public String toString() {
return x+","+y;
}
public boolean isBetween(Point p1,Point p2){
if (p1.getX() < x && p2.getX() > x && p1.getY() < y && p2.getY() > y)
return true;
return false;
}
}
Finally at your EntryPoint module you wrap things up by :
public void onModuleLoad() {
RootPanel rootPanel = RootPanel.get();
CustomTable table = new CustomTable();
table.setWidget(0, 0, new CellWidget(new Label("hello 0,0")));
table.setWidget(0, 1, new CellWidget(new Label("hello 0,1")));
table.setWidget(1, 0, new CellWidget(new Label("hello 1,0")));
table.setWidget(1, 1, new CellWidget(new Label("hello 1,1")));
rootPanel.add(table);
}
I know that the actual logic to determine if the widgets fall within the selected area is incomplete and needs to be improved but i think this solution is clear enough to give the basic idea. Cheers