This is what i have tried so far:
<----------HomePage class----------->
package com.proj.wicket.ui;
import java.util.ArrayList;
import java.util.List;
import org.apache.wicket.Component;
import org.apache.wicket.ajax.AjaxEventBehavior;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.attributes.AjaxRequestAttributes;
import
org.apache.wicket.ajax.attributes.AjaxRequestAttributes.EventPropagation;
import org.apache.wicket.behavior.AttributeAppender;
import org.apache.wicket.markup.head.IHeaderResponse;
import org.apache.wicket.markup.head.JavaScriptHeaderItem;
import org.apache.wicket.markup.head.PriorityHeaderItem;
import org.apache.wicket.markup.html.WebMarkupContainer;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.form.Radio;
import org.apache.wicket.markup.html.form.RadioGroup;
import org.apache.wicket.markup.html.list.ListItem;
import org.apache.wicket.markup.html.list.ListView;
import org.apache.wicket.model.Model;
@SuppressWarnings("unused")
public class HomePage extends WebPage {
public HomePage() {
final WebMarkupContainer mainContainer = new
WebMarkupContainer("mainContainer");
final WebMarkupContainer accordionContainer = new
WebMarkupContainer("accordion");
final List<ServiceView> persons = new ArrayList<ServiceView>();
ServiceView view1 = new ServiceView();
ServiceView view2 = new ServiceView();
ServiceView view3 = new ServiceView();
ServiceView view4 = new ServiceView();
ServiceView view5 = new ServiceView();
ServiceView view6 = new ServiceView();
ServiceView view7 = new ServiceView();
view1.setName("David,ngog 2013");
view1.setDate("31-1-2015");
view1.setDesc("This is a Demo Desc!!!");
view1.setCode("6KH9K");
view1.setStatus("Active");
view2.setName("David,ngog 2014");
view2.setDate("31-1-2015");
view2.setDesc("This is a Demo Desc!!!");
view2.setCode("6KH9K");
view2.setStatus("Active");
view3.setName("David,ngog 2015");
view3.setDate("31-1-2015");
view3.setDesc("This is a Demo Desc!!!");
view3.setCode("6KH9K");
view3.setStatus("Inactive");
view4.setName("David,ngog 2016");
view4.setDate("31-1-2015");
view4.setDesc("This is a Demo Desc!!!");
view4.setCode("6KH9K");
view4.setStatus("Active");
view5.setName("David,ngog 2017");
view5.setDate("31-1-2015");
view5.setDesc("This is a Demo Desc!!!");
view5.setCode("6KH9K");
view5.setStatus("Inactive");
view6.setName("David,ngog 2018");
view6.setDate("31-1-2015");
view6.setDesc("This is a Demo Desc!!!");
view6.setCode("6KH9K");
view6.setStatus("Inactive");
view7.setName("David,ngog 2019");
view7.setDate("31-1-2015");
view7.setDesc("This is a Demo Desc!!!");
view7.setCode("6KH9K");
view7.setStatus("Active");
persons.add(view1);
persons.add(view2);
persons.add(view3);
persons.add(view4);
persons.add(view5);
persons.add(view6);
persons.add(view7);
final ListView<ServiceView> listRepeat = new
ListView<ServiceView>("listRepeat") {
@Override
protected void populateItem(final ListItem<ServiceView>
item) {
final WebMarkupContainer listContainer = new
WebMarkupContainer("listContainer");
final Label name = new Label("name",
item.getModelObject().getName());
final Label date = new Label("date",
item.getModelObject().getDate());
final Label status = new Label("status",
item.getModelObject().getStatus());
final WebMarkupContainer descriptionContainer =
new
WebMarkupContainer("descriptionContainer");
final Label desc = new Label("desc",
item.getModelObject().getDesc());
final Label code = new Label("code",
item.getModelObject().getCode());
descriptionContainer.add(desc);
descriptionContainer.add(code);
descriptionContainer.setOutputMarkupPlaceholderTag(true);
descriptionContainer.setOutputMarkupId(true);
descriptionContainer.setVisible(false);
final RadioGroup radioGroup = new
RadioGroup("radioGroup");
final Radio selectionRadio = new
Radio("selectionRadio", new
Model(Boolean.FALSE), radioGroup);
selectionRadio.add(new
AjaxEventBehavior("onclick") {
@Override
protected void
onEvent(AjaxRequestTarget target) {
for(Component acc:
(ListView<String>)accordionContainer.get("listRepeat")){
final Component accord = (Component)
acc.get("descriptionContainer");
if(accord.isVisible()){
accord.setVisible(false);
target.add(accord);
}
}
descriptionContainer.setVisible(true);
selectionRadio.setModel(new
Model(Boolean.TRUE));
radioGroup.add(selectionRadio);
listContainer.add(radioGroup);
target.add(listContainer);
target.add(descriptionContainer);
}
@Override
protected void
updateAjaxAttributes(AjaxRequestAttributes attributes) {
super.updateAjaxAttributes(attributes);
attributes.setAllowDefault(true);
attributes.setEventPropagation(EventPropagation.STOP);
}
});
selectionRadio.setOutputMarkupPlaceholderTag(true);
radioGroup.add(selectionRadio);
radioGroup.setOutputMarkupPlaceholderTag(true);
listContainer.add(radioGroup);
listContainer.add(name);
listContainer.add(date);
listContainer.add(status);
listContainer.setOutputMarkupPlaceholderTag(true);
listContainer.add(new
AjaxEventBehavior("onclick") {
@SuppressWarnings({ "unchecked",
"rawtypes" })
@Override
protected void onEvent(final
AjaxRequestTarget target) {
for(Component acc:
(ListView<String>)accordionContainer.get("listRepeat")){
final Component accord = (Component)
acc.get("descriptionContainer");
if(accord.isVisible()){
accord.setVisible(false);
target.add(accord);
}
}
descriptionContainer.setVisible(true);
target.add(listContainer);
target.add(descriptionContainer);
}
});
listContainer.add(new
AttributeAppender("onclick", new
Model("$('"+listContainer.getMarkupId()+"').toggle('slow')")));
item.add(listContainer);
item.add(descriptionContainer);
item.setOutputMarkupPlaceholderTag(true);
}
};
listRepeat.setList(persons);
listRepeat.setOutputMarkupPlaceholderTag(true);
accordionContainer.add(listRepeat);
accordionContainer.setOutputMarkupPlaceholderTag(true);
mainContainer.add(accordionContainer);
this.add(mainContainer);
}
@Override
public void renderHead(IHeaderResponse response) {
response.render(new
PriorityHeaderItem(JavaScriptHeaderItem.forReference(getApplication().getJavaScriptLibrarySettings().getJQueryReference())));
}
}
<----------WicketApplication class------------>
package com.proj.wicket.ui;
import org.apache.wicket.protocol.http.WebApplication;
import org.apache.wicket.request.Url;
import org.apache.wicket.request.resource.UrlResourceReference;
public class WicketApplication extends WebApplication {
@Override
public Class<HomePage> getHomePage() {
return HomePage.class;
}
@Override
public void init() {
super.init();
this.getJavaScriptLibrarySettings().setJQueryReference(new
UrlResourceReference(Url.parse(("https://code.jquery.com/jquery-1.10.2.js";))));
}
}
<----------ServiceView class----------->
package com.proj.wicket.ui;
public class ServiceView {
private String name;
private String date;
private String status;
private String code;
private String desc;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getDate() {
return date;
}
public void setDate(String date) {
this.date = date;
}
public String getStatus() {
return status;
}
public void setStatus(String status) {
this.status = status;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getDesc() {
return desc;
}
public void setDesc(String desc) {
this.desc = desc;
}
}
<----------Home HTML----------->
The toggle("slow") part doesnt work.
--
View this message in context:
http://apache-wicket.1842946.n4.nabble.com/Accordion-folding-unfolding-smoothly-tp4669851p4669900.html
Sent from the Users forum mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
