Wicket: How to change label's text on textarea's onkeyup?

Question

How do I change label's text on textarea's onkeyup? I've tried this but does not work:

Form form;
TextArea ta;
MyLabel resultDiv;


  /**
   * Constructor that is invoked when page is invoked without a session.
   */
  public HomePage(final PageParameters parameters) {

      this.form = new Form("form");
      this.ta = new TextArea("text");
      this.resultDiv = new MyLabel("result");

      this.ta.add( new AjaxEventBehavior( "onKeyUp" ) {
        protected void onEvent( AjaxRequestTarget target ) {
          System.out.println( "Ajax!" );
          resultDiv.setText("Foobar");
          resultDiv.renderComponent();
        }
      } );


      form.add( ta );
      form.add( resultDiv );
      add( form );

  }// const

  public class MyLabel extends Label {
    private String text = "original";
    public String getText() {      return text;    }
    public void setText( String text ) {      this.text = text;    }
    public MyLabel( String id ) {
      super( id );
      this.setModel( new PropertyModel(this,"text") );
    }
  }

Solution

leonidv was almost there. The resulting code is:

Form form;
TextArea ta;
Label resultDiv = new Label( "result", new PropertyModel(this,"labelText") ){
  { setOutputMarkupId( true ); }
};

private String labelText = "original";


/**
 * Constructor that is invoked when page is invoked without a session.
 */
public HomePage(final PageParameters parameters) {

    this.form = new Form("form");

    this.ta = new TextArea("text");
    this.ta.add( new AjaxEventBehavior( "onKeyUp" ) {
      protected void onEvent( AjaxRequestTarget target ) {
        System.out.println( "Ajax!" );
        labelText = "Foobar";  // Doesn't even need get/set, which is great.
        target.addComponent( resultDiv );
        //resultDiv.renderComponent(); // WRONG!!
      }
    } );

    form.add( ta );
    form.add( resultDiv );
    add( form );

}// const

The last problem was my bad intuition about adding renderComponent() - that, for some reason, kept the label unchanged.

By the way, the result will serve soon as JTexy lightweight markup language sandbox.

Thanks for help!

Solution

If you want to update components after AJAX event, you must to do 2 things:

1. Updatable components must have setted flag setOutputMarkupId == true;

2. You must add this components to target onEvent method

   this.resultDiv.setMarkupOutputId(true);
   
   protected void onEvent( AjaxRequestTarget target ) {
         System.out.println( "Ajax!" );
         //resultDiv.setModel(  );
         resultDiv.setText("Foobar");
         resultDiv.renderComponent();
         target.add(resultDiv);
   }
   

PS I don't understand many parts of your code.

Comments

[leonidv]

Very great wicket feature is binding fields to components. So, you don't need to "public class MyLabel extends Label". All is requested to create PropertyModel: MyPage .. { String text = "original"; .... in constructor .... new Label("id",new PropertyModel(this,"text"); } After this wicket bind label and text field. So, when you process submit or AJAX event you don't need to write smth like a: text = label.getValue() System.out.println(text); wicket to this automatically, just write: sysout(text);

[febot]

Didn't work; IMHO modelChanged() is a callback to be overriden (just guessing from the name).