Re: Attaching Ajax Function to Java Method

2013-05-15 Thread Martin Grigorov
Hi,

You can use TextTemplate to load the JavaScript with the placeholders.
See
https://github.com/wicketstuff/core/blob/master/jdk-1.6-parent/autocomplete-tagit-parent/autocomplete-tagit/src/main/java/org/wicketstuff/tagit/TagItAjaxBehavior.java#L96
for
example.


On Wed, May 15, 2013 at 5:19 AM, William Speirs wspe...@apache.org wrote:

 @Bas Gooren that code you linked was very helpful. I have what I want
 up and working, but it's using a bunch of ugly jQuery ajax callbacks
 hacked into StringBuilders :-(

 @Don Ferguson I don't *think* this is what I'm looking for as I have
 thousands of options and I don't want them rendered at page load.
 Instead I want to register a function that will call-back to my Java
 code when someone start typing and allows me to search. However, I did
 not run it, just looked at the code.

 Here is what I have, again it's ugly. Does anyone know how I can
 clean-up the jQuery.ajax stuff? I've gotta imagine there is a way to
 do it in Wicket.

 Thanks in advance...

 Bill-

 public class TypeaheadFieldT extends TextFieldT implements
 IResourceListener {

 private static final long serialVersionUID = 1L;

 public TypeaheadField(final String id, final IModelT model) {
 super(id, model);

 setOutputMarkupId(true);
 add(new AttributeModifier(data-provide, typeahead));
 }

 @Override
 public void renderHead(final IHeaderResponse response) {
 super.renderHead(response);

 StringBuilder sb = new StringBuilder();

 sb.append($('#);
 sb.append(getMarkupId().replace(., .));
 sb.append(').typeahead();
 sb.append(getConfig());
 sb.append(););

 response.render(OnDomReadyHeaderItem.forScript(sb.toString()));
 }

 private String getConfig() {
 final StringBuilder ajaxCall = new StringBuilder();

 ajaxCall.append({ \source\: );

 ajaxCall.append(function(query, process) { $.ajax({ url: \);
 ajaxCall.append(urlFor(IResourceListener.INTERFACE, null));
 ajaxCall.append(\, data: { \query\: query }, success:
 function(data, status, jqXHR) { process(data); } }); }, );

 ajaxCall.append(items: 4 });

 return ajaxCall.toString();
 }

 @Override
 public void onResourceRequested() {
 final Request request = getRequestCycle().getRequest();
 final IRequestParameters params = request.getRequestParameters();

 final String query =
 params.getParameterValue(query).toOptionalString();

 WebResponse webResponse = (WebResponse)
 getRequestCycle().getResponse();
 webResponse.setContentType(application/json);

 OutputStreamWriter out = new
 OutputStreamWriter(webResponse.getOutputStream(),
 getRequest().getCharset());
 JSONWriter json = new JSONWriter(out);

 try {
 json.array();

 json.value(Connecticut);
 json.value(California);
 json.value(Colorado);

 json.endArray();
 } catch (JSONException e) {
 throw new WicketRuntimeException(Could not write Json
 response, e);
 }

 try {
 out.flush();
 } catch (IOException e) {
 throw new WicketRuntimeException(Could not write Json to
 servlet response, e);
 }
 }
 }



 On Tue, May 14, 2013 at 10:04 PM, Don Ferguson don.fergu...@gmail.com
 wrote:
  The following seems to work (using wicket 6.7 with the experimental
 bootstrap module).  Basically, this ajax behavior is called on page load.
 At that point, it writes out the javascript to initialize the object with
 typeahead parameters.
 
  HTML:
 
  input wicket:id=typeahead type=text
 data-provide=typeahead data-items=4
 
  JAVA:
 
  add(new TextFieldString(typeahead).add(new TypeAhead()));
 
  TypeAhead Behavior:
 
  import org.apache.wicket.Component;
  import org.apache.wicket.ajax.AbstractDefaultAjaxBehavior;
  import org.apache.wicket.ajax.AjaxRequestTarget;
  import org.apache.wicket.markup.head.IHeaderResponse;
  import org.apache.wicket.markup.head.OnDomReadyHeaderItem;
 
  import java.util.Arrays;
  import java.util.List;
 
  public  class TypeAhead extends AbstractDefaultAjaxBehavior {
  @Override
  protected void onBind() {
  super.onBind();
  getComponent().setOutputMarkupId(true);
  }
 
  @Override
  protected void respond(AjaxRequestTarget target) {
  String sources = toJSONArray(getOptions());
  String script = String.format($('#%s').typeahead( { source: %s
 } );, getComponent().getMarkupId(), sources);
  target.appendJavaScript(script);
  }
 
  @Override
  public void renderHead(Component component, IHeaderResponse
 response) {
  super.renderHead(component, response);
  response.render(OnDomReadyHeaderItem.forScript(
 this.getCallbackScript() ));
  }
 
   // OVERRIDE THIS TO SUPPLY LIST OF OPTIONS
  

Re: Attaching Ajax Function to Java Method

2013-05-15 Thread David Beer

Hi Bill

I would also suggest you take a look at the Wicket-Bootstrap project by 
agilecoders for Bootstrap integration. Is very good and has a lot of the 
bootstrap components.


http://wb.agilecoders.de/demo/ and 
https://github.com/l0rdn1kk0n/wicket-bootstrap/


Thanks

David
On 14/05/13 21:36, William Speirs wrote:

I'm trying to create a typeahead component for Wicket that uses Bootstrap's
Typeahead:

To set this up though I need to provide the .typeahead method in JavaScript
with a function that will return the results, given the query. What I'd
like to do is attach that JavaScript function to a Java method much like
what is done with an AjaxEventBehavior [2]. I cannot figure out how to go
about setting all of this up... any ideas?

Thanks...

Bill-

[1] http://twitter.github.io/bootstrap/javascript.html#typeahead
[2]
http://ci.apache.org/projects/wicket/apidocs/6.x/org/apache/wicket/ajax/AjaxEventBehavior.html





Re: Attaching Ajax Function to Java Method

2013-05-15 Thread William Speirs
On Wed, May 15, 2013 at 10:56 AM, David Beer david.m.b...@gmail.com wrote:

 Hi Bill

 I would also suggest you take a look at the Wicket-Bootstrap project by
 agilecoders for Bootstrap integration. Is very good and has a lot of the
 bootstrap components.

 http://wb.agilecoders.de/demo/ and https://github.com/l0rdn1kk0n/**
 wicket-bootstrap/ https://github.com/l0rdn1kk0n/wicket-bootstrap/


That's actually where I started, but they only support providing a list of
choices up-front instead of the callback. I was able to get the callback
working and with less StringBuilder hacky code by using
a separate javascript file and TextTemplate as suggested by Martin Grigorov.

I also tried to get the AutoCompleteTextField[1] component to work with
Bootstrap, but couldn't figure out how to make all the CSS happy. Someone
more familiar with both projects could probably pull it off though, and
that would make a nice addition to Wicket or wicket-bootstrap by the Apache
foundation [2].

Thanks for everyone's help...

Bill-

[1]
http://ci.apache.org/projects/wicket/apidocs/6.x/org/apache/wicket/extensions/ajax/markup/html/autocomplete/AutoCompleteTextField.html

[2] http://mvnrepository.com/artifact/org.apache.wicket/wicket-bootstrap


Attaching Ajax Function to Java Method

2013-05-14 Thread William Speirs
I'm trying to create a typeahead component for Wicket that uses Bootstrap's
Typeahead:

To set this up though I need to provide the .typeahead method in JavaScript
with a function that will return the results, given the query. What I'd
like to do is attach that JavaScript function to a Java method much like
what is done with an AjaxEventBehavior [2]. I cannot figure out how to go
about setting all of this up... any ideas?

Thanks...

Bill-

[1] http://twitter.github.io/bootstrap/javascript.html#typeahead
[2]
http://ci.apache.org/projects/wicket/apidocs/6.x/org/apache/wicket/ajax/AjaxEventBehavior.html


Re: Attaching Ajax Function to Java Method

2013-05-14 Thread Bas Gooren

Select2's wicket integration should provide you with some pointers [1].

It basically points down to implementing a listener interface, and 
providing the url to it to your javascript code. You can then return 
your data when the listener interface's method is called.


[1]
https://github.com/ivaynberg/wicket-select2/blob/master/wicket-select2/src/main/java/com/vaynberg/wicket/select2/AbstractSelect2Choice.java 



Met vriendelijke groet,
Kind regards,

Bas Gooren

Op 14-5-2013 22:36, schreef William Speirs:

I'm trying to create a typeahead component for Wicket that uses Bootstrap's
Typeahead:

To set this up though I need to provide the .typeahead method in JavaScript
with a function that will return the results, given the query. What I'd
like to do is attach that JavaScript function to a Java method much like
what is done with an AjaxEventBehavior [2]. I cannot figure out how to go
about setting all of this up... any ideas?

Thanks...

Bill-

[1] http://twitter.github.io/bootstrap/javascript.html#typeahead
[2]
http://ci.apache.org/projects/wicket/apidocs/6.x/org/apache/wicket/ajax/AjaxEventBehavior.html





Re: Attaching Ajax Function to Java Method

2013-05-14 Thread Don Ferguson
The following seems to work (using wicket 6.7 with the experimental bootstrap 
module).  Basically, this ajax behavior is called on page load.   At that 
point, it writes out the javascript to initialize the object with typeahead 
parameters.  

HTML:

input wicket:id=typeahead type=text data-provide=typeahead 
data-items=4

JAVA:

add(new TextFieldString(typeahead).add(new TypeAhead()));

TypeAhead Behavior:

import org.apache.wicket.Component;
import org.apache.wicket.ajax.AbstractDefaultAjaxBehavior;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.markup.head.IHeaderResponse;
import org.apache.wicket.markup.head.OnDomReadyHeaderItem;

import java.util.Arrays;
import java.util.List;

public  class TypeAhead extends AbstractDefaultAjaxBehavior {
@Override
protected void onBind() {
super.onBind();
getComponent().setOutputMarkupId(true);
}

@Override
protected void respond(AjaxRequestTarget target) {
String sources = toJSONArray(getOptions());
String script = String.format($('#%s').typeahead( { source: %s } );, 
getComponent().getMarkupId(), sources);
target.appendJavaScript(script);
}

@Override
public void renderHead(Component component, IHeaderResponse response) {
super.renderHead(component, response);
response.render(OnDomReadyHeaderItem.forScript( 
this.getCallbackScript() ));
}

 // OVERRIDE THIS TO SUPPLY LIST OF OPTIONS
public  ListString getOptions() {
return Arrays.asList( new String[] {Alabama, Aftermath, Absinth} 
);
}

 // There's probably a built-in method that does this…

private String toJSONArray(ListString strings) {
StringBuffer result = new StringBuffer([);
for (String string : strings) {
result.append(');
result.append(string);
result.append(',);
}
if (strings.size()  0) {
result.deleteCharAt(result.lastIndexOf(,));
}
result.append(]);
return result.toString();
}

}


Hope this works for you.

-- Don Ferguson


On Tuesday, May 14, 2013 at 1:36 PM, William Speirs wrote:

 I'm trying to create a typeahead component for Wicket that uses Bootstrap's
 Typeahead:
  
 To set this up though I need to provide the .typeahead method in JavaScript
 with a function that will return the results, given the query. What I'd
 like to do is attach that JavaScript function to a Java method much like
 what is done with an AjaxEventBehavior [2]. I cannot figure out how to go
 about setting all of this up... any ideas?
  
 Thanks...
  
 Bill-
  
 [1] http://twitter.github.io/bootstrap/javascript.html#typeahead
 [2]
 http://ci.apache.org/projects/wicket/apidocs/6.x/org/apache/wicket/ajax/AjaxEventBehavior.html
  
  




Re: Attaching Ajax Function to Java Method

2013-05-14 Thread William Speirs
@Bas Gooren that code you linked was very helpful. I have what I want
up and working, but it's using a bunch of ugly jQuery ajax callbacks
hacked into StringBuilders :-(

@Don Ferguson I don't *think* this is what I'm looking for as I have
thousands of options and I don't want them rendered at page load.
Instead I want to register a function that will call-back to my Java
code when someone start typing and allows me to search. However, I did
not run it, just looked at the code.

Here is what I have, again it's ugly. Does anyone know how I can
clean-up the jQuery.ajax stuff? I've gotta imagine there is a way to
do it in Wicket.

Thanks in advance...

Bill-

public class TypeaheadFieldT extends TextFieldT implements
IResourceListener {

private static final long serialVersionUID = 1L;

public TypeaheadField(final String id, final IModelT model) {
super(id, model);

setOutputMarkupId(true);
add(new AttributeModifier(data-provide, typeahead));
}

@Override
public void renderHead(final IHeaderResponse response) {
super.renderHead(response);

StringBuilder sb = new StringBuilder();

sb.append($('#);
sb.append(getMarkupId().replace(., .));
sb.append(').typeahead();
sb.append(getConfig());
sb.append(););

response.render(OnDomReadyHeaderItem.forScript(sb.toString()));
}

private String getConfig() {
final StringBuilder ajaxCall = new StringBuilder();

ajaxCall.append({ \source\: );

ajaxCall.append(function(query, process) { $.ajax({ url: \);
ajaxCall.append(urlFor(IResourceListener.INTERFACE, null));
ajaxCall.append(\, data: { \query\: query }, success:
function(data, status, jqXHR) { process(data); } }); }, );

ajaxCall.append(items: 4 });

return ajaxCall.toString();
}

@Override
public void onResourceRequested() {
final Request request = getRequestCycle().getRequest();
final IRequestParameters params = request.getRequestParameters();

final String query =
params.getParameterValue(query).toOptionalString();

WebResponse webResponse = (WebResponse) getRequestCycle().getResponse();
webResponse.setContentType(application/json);

OutputStreamWriter out = new
OutputStreamWriter(webResponse.getOutputStream(),
getRequest().getCharset());
JSONWriter json = new JSONWriter(out);

try {
json.array();

json.value(Connecticut);
json.value(California);
json.value(Colorado);

json.endArray();
} catch (JSONException e) {
throw new WicketRuntimeException(Could not write Json
response, e);
}

try {
out.flush();
} catch (IOException e) {
throw new WicketRuntimeException(Could not write Json to
servlet response, e);
}
}
}



On Tue, May 14, 2013 at 10:04 PM, Don Ferguson don.fergu...@gmail.com wrote:
 The following seems to work (using wicket 6.7 with the experimental bootstrap 
 module).  Basically, this ajax behavior is called on page load.   At that 
 point, it writes out the javascript to initialize the object with typeahead 
 parameters.

 HTML:

 input wicket:id=typeahead type=text data-provide=typeahead 
 data-items=4

 JAVA:

 add(new TextFieldString(typeahead).add(new TypeAhead()));

 TypeAhead Behavior:

 import org.apache.wicket.Component;
 import org.apache.wicket.ajax.AbstractDefaultAjaxBehavior;
 import org.apache.wicket.ajax.AjaxRequestTarget;
 import org.apache.wicket.markup.head.IHeaderResponse;
 import org.apache.wicket.markup.head.OnDomReadyHeaderItem;

 import java.util.Arrays;
 import java.util.List;

 public  class TypeAhead extends AbstractDefaultAjaxBehavior {
 @Override
 protected void onBind() {
 super.onBind();
 getComponent().setOutputMarkupId(true);
 }

 @Override
 protected void respond(AjaxRequestTarget target) {
 String sources = toJSONArray(getOptions());
 String script = String.format($('#%s').typeahead( { source: %s } 
 );, getComponent().getMarkupId(), sources);
 target.appendJavaScript(script);
 }

 @Override
 public void renderHead(Component component, IHeaderResponse response) {
 super.renderHead(component, response);
 response.render(OnDomReadyHeaderItem.forScript( 
 this.getCallbackScript() ));
 }

  // OVERRIDE THIS TO SUPPLY LIST OF OPTIONS
 public  ListString getOptions() {
 return Arrays.asList( new String[] {Alabama, Aftermath, 
 Absinth} );
 }

  // There's probably a built-in method that does this…

 private String toJSONArray(ListString strings) {
 StringBuffer result = new StringBuffer([);
 for (String string : strings) {
 result.append(');
 result.append(string);
 result.append(',);
 }
 if