You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by avchavan <av...@yahoo.co.in> on 2015/03/09 07:57:21 UTC
Re: Accordion folding unfolding smoothly
any workaround possible?
--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/Accordion-folding-unfolding-smoothly-tp4669851p4669891.html
Sent from the Users forum mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Accordion folding unfolding smoothly
Posted by Sebastien <se...@gmail.com>.
Hi,
I agree with Maxim, jQuery selector for IDs is '#'.
If you are not able to use dependencies (personnaly I would have challenged
this with your hierarchy because Wicket jQuery UI is stable and already 3
years old...), you can at least see how it works/is implemented:
https://github.com/sebfz1/wicket-jquery-ui
Best regards,
Sebastien.
On Tue, Mar 10, 2015 at 3:02 PM, Maxim Solodovnik <so...@gmail.com>
wrote:
> I guess this line:
> listContainer.add(new AttributeAppender("onclick", new
> Model("$('"+listContainer.getMarkupId()+"').toggle('slow')")));
>
> should be
> listContainer.add(new AttributeAppender("onclick", new
> Model("$('#"+listContainer.getMarkupId()+"').toggle('slow')")));
>
>
> On Tue, Mar 10, 2015 at 7:39 PM, avchavan <av...@yahoo.co.in>
> wrote:
>
> > Not allowed to have dependency. :/
> >
> > --
> > View this message in context:
> >
> http://apache-wicket.1842946.n4.nabble.com/Accordion-folding-unfolding-smoothly-tp4669851p4669905.html
> > Sent from the Users forum mailing list archive at Nabble.com.
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > For additional commands, e-mail: users-help@wicket.apache.org
> >
> >
>
>
> --
> WBR
> Maxim aka solomax
>
Re: Accordion folding unfolding smoothly
Posted by Maxim Solodovnik <so...@gmail.com>.
I guess this line:
listContainer.add(new AttributeAppender("onclick", new
Model("$('"+listContainer.getMarkupId()+"').toggle('slow')")));
should be
listContainer.add(new AttributeAppender("onclick", new
Model("$('#"+listContainer.getMarkupId()+"').toggle('slow')")));
On Tue, Mar 10, 2015 at 7:39 PM, avchavan <av...@yahoo.co.in>
wrote:
> Not allowed to have dependency. :/
>
> --
> View this message in context:
> http://apache-wicket.1842946.n4.nabble.com/Accordion-folding-unfolding-smoothly-tp4669851p4669905.html
> Sent from the Users forum mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
--
WBR
Maxim aka solomax
Re: Accordion folding unfolding smoothly
Posted by avchavan <av...@yahoo.co.in>.
Not allowed to have dependency. :/
--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/Accordion-folding-unfolding-smoothly-tp4669851p4669905.html
Sent from the Users forum mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Accordion folding unfolding smoothly
Posted by Maxim Solodovnik <so...@gmail.com>.
you can try to use
http://7thweb.net/wicket-jquery-ui/effect/DefaultEffectPage
On Tue, Mar 10, 2015 at 5:28 PM, avchavan <av...@yahoo.co.in>
wrote:
> I have checked that already. but i am not allowed to use it.
> Hence had write the entire code for accordion.
> Is it possible to just add the toggle effect?
>
> Thanks.
>
> --
> View this message in context:
> http://apache-wicket.1842946.n4.nabble.com/Accordion-folding-unfolding-smoothly-tp4669851p4669903.html
> Sent from the Users forum mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
--
WBR
Maxim aka solomax
Re: Accordion folding unfolding smoothly
Posted by avchavan <av...@yahoo.co.in>.
I have checked that already. but i am not allowed to use it.
Hence had write the entire code for accordion.
Is it possible to just add the toggle effect?
Thanks.
--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/Accordion-folding-unfolding-smoothly-tp4669851p4669903.html
Sent from the Users forum mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Accordion folding unfolding smoothly
Posted by Maxim Solodovnik <so...@gmail.com>.
I would recommend you to try:
http://7thweb.net/wicket-jquery-ui/accordion/DefaultAccordionPage
The code will be much simplier :)
On Tue, Mar 10, 2015 at 5:02 PM, avchavan <av...@yahoo.co.in>
wrote:
> 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: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
--
WBR
Maxim aka solomax
Re: Accordion folding unfolding smoothly
Posted by avchavan <av...@yahoo.co.in>.
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: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Accordion folding unfolding smoothly
Posted by Sebastien <se...@gmail.com>.
Hi,
What component/library are you referring to?
Best regards,
Sebastien
On Mon, Mar 9, 2015 at 7:57 AM, avchavan <av...@yahoo.co.in> wrote:
> any workaround possible?
>
> --
> View this message in context:
> http://apache-wicket.1842946.n4.nabble.com/Accordion-folding-unfolding-smoothly-tp4669851p4669891.html
> Sent from the Users forum mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>