Generating Hyperlink / HTML / 'Please suggest' in a loop in GWT ?

Question

Hi, So my question is the following :

Say, I am displaying data in in a flextable after getting it from a database, am doing this in a routine manner using loops.

Now, in the entire First Column, the text should be clickable, i.e. I should be able to add a Click Handler to First Column values (as I gotta load another table upon clicking any of the first column text vals.)

Question : How can I generate such Hyperlink tags while in a loop ? The problem comes when I try to do so as I don't know how to name them as the loop runs and use the same concept while adding ClickHandlers.

Should I use something else other than Hyperlink for this task. Kindly explain how ?

I really appreciate help in this as I am a very new GWT coder.

-- Chirayu

Answer 1

Using a Hyperlink is maybe not the best way to do something like this, because you shouldn't use a ClickHandler with a Hyperlink. A Hyperlink sets a HistoryToken and you should respond to the change of the History.
I would use a Label and maybe style it as a normal link if you want to have the same look and feel. (I will use a Label in the following example but you could change it to a Hyperlink if you want to.)

I would create a class that extends Label. This class would have an ID you set in the constructor. You would send this Id to the server to get the new FlexTable. In the constructor you add a ClickHandler that reads the id field and sends it to the server to get the new FlexTable.

public class FlexTableLabel extends Label implements ClickHandler {
    int id=0;  
    public FlexTableLabel(String text, int id) {
        this.id=id;
        this.setText=text;
        this.addCickHandler(this);
    }

    public void onClick(ClickEvent event) {
        //sends the id to the server, of course you need to replace it with your 
        //service
        yourService.getNewFlexTable(this.id);
    }     
 }

In your loop you would just create objects of the new class and give it the appropriate parameters(I assume you have an ArrayList with the result. The Objects in this ArrayList would have text and id):

for(int i=0; i<result.size;i++) {
    FlexTable.setWidget(i,0, new FlexTableLabel(result.get(i).text, result.get(i).id);
}

I hope this gives you at least something to start, if something is still unclear leave a comment and I will try to help make things clear.

Edit based on Chirayu's post:

It's hard to explain something like this without knowing your application. I normally implement the Singleton Pattern to get a specific widget. So I would create a class like this:

public static YourPanel extends Panel {
    private static YourPanel instance=null;

    public static YourPanel getInstance() {
        if(instance==null) {
            instance=new YourPanel();
        }
        return instance;
    }
}

In your EntryPointClass you would have something like this:

public class YourEntryClass extends EntryPoint {
    public void onModuleLoad() {
        RootPanel.get().add(YourPanel.getInstance());
    }
}

You can now call the YourPanel.getInstance() method in the onSuccess() part of your service to change the content of the panel:

yourService.getNewFlexTable(this.id, new AsyncCallback<ArrayList<String>>() {
    public void onSuccess(ArrayList<String> result) {
    For(int i=0;i<result.size;i++) {
            YourPanel.getInstance().add(result.get(i);
        } 
    }
});

I hope that helps. Leave a comment if it doesn't.

Sample app
Sample app running
Sample app source code

Answer 2

I'd suggest using Anchor, more specifically, via the Anchor(java.lang.String text) constructor:

Creates an anchor for scripting. The anchor's href is set to javascript:;, based on the expectation that listeners will be added to the anchor.

So, you'll get a good ol' <a> that on click doesn't do anything, but you can add a ClickHandler to it, as such:

Anchor anchor = new Anchor("Click me!"); // At this point clicking it won't do a thing
anchor.addClickHandler(new ClickHandler() {
    @Override
    public void onClick (ClickEvent event){
        // Do something cool here
    }
});

// Insert the anchor into the table

One more tip: it'd be best if you could create the ClickHandler once and then add it to every Anchor, instead of creating a new anonymous class for every Anchor you add to the table (like in the example above) - depending on the number of rows, it could really speed up things.

Answer 3

NOT AN ANSWER...more of a call to Chris and Igor from above as could not fit this much thing in a comment.

Hey @Chris, one question, if you come to read this again (hopefully) ... I am confused about one thing, so I did as you explained above, but now if my panel is defined in my EntryPoint class, which has the 'for loop' given by you above...

then in other class FlexTablelabel, in the part where I add the services, i.e. onClick part...how am I supposed to add stuff into my panel's which are defined in the EntryPoint class ?

In,

public void onClick(ClickEvent event) {

        //sends the id to the server, of course you need to replace it with your 
        //service
        yourService.getNewFlexTable(this.id);
    }     
}

How to access panels, methods etc. from the EntryPoint class. I know I can do EntrypointClass EC = new EntrypointClass(), but it does not function as its supposed to.