Slider behaviours - Githubissues

RichLiv commented 11 years ago

Great library but I want to be able to add Javascript behaviours to the slider as can be done in JQWicket. Specifically, I want to be able, when a slide happens, to gather a Javascript variable value and send it up as a URL parameter using Wicket.ajax.get/post. I can then use this to update a model and display this value. The value actually comes from a YouTube chromeless player so short of creating my own YouTube Wicket component (which is the other option, I guess), this is the simplest way to achieve this.

sebfz1 commented 11 years ago

Hi,

Did you see the AjaxSlider component? The value can be get back through ajax (once slided) and also displayed (fired client side only, on change).

I think for now you can override #onConfigure() to provide your own JQueryAjaxBehavior for the change event (triggered once slided), like this:

@Override
protected void onConfigure(JQueryBehavior behavior)
{
    super.onConfigure(behavior); //important!
    behavior.setOption("change", this.myChangeBehavior.getCallbackFunction());
}

Then, you have to provide your behavior, you can look at AjaxSlider code for the behavior, and AutoCompleteTextField to see how to deal with variable...

@Override
protected CallbackParameter[] getCallbackParameters()
{
return new CallbackParameter[] { CallbackParameter.context("event"), CallbackParameter.context("ui"), CallbackParameter.resolved("my.var", "youtube.value") };
}

In a second time I will make AjaxSlider#newOnChangeBehavior() public so you do not need to override #onConfigure(). But I guess it will be beginning of January because I am not available for coding starting from tonight! :)

Hope this helps, Sebastien.

RichLiv commented 11 years ago

That's great, merci beaucoup, Sebastien, I will give that a try.

sebfz1 commented 11 years ago

You're welcome,

Just to let you know, I marked AjaxSlider#newOnChangeBehavior() as protected so you do not have to override #onConfigure(). By supplying your own behavior (see above), you also need to extend ChangeEvent to get your variable back. Last step, you have to override onEvent() (be sure to call its parent) and then deal with your MyChangeEvent.

I had to make a small release of wicket-jquery-ui, for another reason, so the update is in it. Versions are 1.3.1 (wicket 1.5.x) & 6.1.1 (wicket 6.x).

Thanks to let me know and please close the issue if it's ok for you.

Best regards, Sebastien.

sebfz1 commented 11 years ago

Hi,

Any updates on that so I can close the issue?

Thanks in advance, Sebastien.

RichLiv commented 11 years ago

Sorry, Sebastien. Have been diverted lately from this, am on holiday in France at present and will try out the suggestion you made when I return.

On Sunday, December 30, 2012, Sebastien Briquet wrote:

Hi,

Any updates on that so I can close the issue?

Thanks in advance, Sebastien.

— Reply to this email directly or view it on GitHubhttps://github.com/sebfz1/wicket-jquery-ui/issues/13#issuecomment-11766540.

Richard Livingstone www.bananasoft.net 07711590497

RichLiv commented 11 years ago

Hi Sebastien - I'm a newcomer to Javascript with Wicket, though a longtime Java developer, and I'm not really sure how to implement what you suggest. Could you spell it out really literally for me ? I've cut & pasted various bits of your suggestion but I'm lost in the woods a little. BTW I managed it pretty easily with JQWicket but that is Wicket 1.5 which is no use to me; I'd really appreciate it if you could help me out a little. Also typing with my arm in a cast at present which is kind of inconvenient!

sebfz1 commented 11 years ago

Hi Richard,

Hope you had a good time in France :)

Well, handling Ajax using Wicket is probably not the easiest part at the beginning, and things changed a lot in Wicket 6. So please find bellow the code I had in mind in my previous answer:

The HTML:

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<wicket:head>
    <script type="text/javascript">
        var mygooglevar = 88;
    </script>
</wicket:head>
</head>
<body>
<wicket:extend>
    <form wicket:id="form">
        <div wicket:id="slider"></div>
        <div wicket:id="feedback"></div>        
    </form>
</wicket:extend>
</body>
</html>

The Java:

public class AjaxSliderPage extends TemplatePage
{
    private static final long serialVersionUID = 1L;

    // Model //
    private final Model<Integer> myModel;
    private FeedbackPanel feedback;

    public AjaxSliderPage()
    {
        this.myModel = new Model<Integer>(0);

        this.init();
    }

    private void init()
    {
        final Form<Void> form = new Form<Void>("form");
        this.add(form);

        // FeedbackPanel //
        this.feedback = new JQueryFeedbackPanel("feedback");
        form.add(this.feedback.setOutputMarkupId(true));

        // Slider //
        form.add(this.newAjaxSlider("slider", new Model<Integer>(50)));
    }

    private AjaxSlider newAjaxSlider(String id, Model<Integer> model)
    {
        return new AjaxSlider(id, model) {

            private static final long serialVersionUID = 1L;

            @Override
            public void onEvent(IEvent<?> event)
            {
                super.onEvent(event); // important

                if (event.getPayload() instanceof MyChangeEvent)
                {
                    // Sets the model object //
                    MyChangeEvent payload = (MyChangeEvent) event.getPayload();
                    AjaxSliderPage.this.myModel.setObject(payload.getMyVar());

                    // Refresh the feedback panel //
                    AjaxSliderPage.this.feedback(payload.getTarget());
                }
            }

            @Override
            protected JQueryAjaxBehavior newOnChangeBehavior()
            {
                return new JQueryAjaxChangeBehavior(this, this.input) {

                    private static final long serialVersionUID = 1L;

                    @Override
                    protected CallbackParameter[] getCallbackParameters()
                    {
                        return new CallbackParameter[] {
                                CallbackParameter.context("event"),
                                CallbackParameter.context("ui"),
                                CallbackParameter.resolved("myvar", "mygooglevar") };
                    }

                    @Override
                    protected JQueryEvent newEvent(AjaxRequestTarget target)
                    {
                        return new MyChangeEvent(target);
                    }
                };
            }
        };
    }

    protected void feedback(AjaxRequestTarget target)
    {
        this.info("The model object is: " + this.myModel.getObject());
        target.add(this.feedback);
    }

    /**
     * Provides an event object that will be broadcasted by the {@link JQueryAjaxChangeBehavior}
     * This extends the base class ChangeEvent used by the slider to handle an additional parameter (myvar)
     */
    public static class MyChangeEvent extends ChangeEvent
    {
        private int myVar;

        public MyChangeEvent(AjaxRequestTarget target)
        {
            super(target);

            final RequestCycle requestCycle = RequestCycle.get();
            final IRequestParameters parameters = requestCycle.getRequest().getPostParameters();

            this.myVar = parameters.getParameterValue("myvar").toInt();
        }

        public int getMyVar()
        {
            return this.myVar;
        }
    }
}

The most important line are: var mygooglevar = 88; which is the external variable you want to send CallbackParameter.resolved("myvar", "mygooglevar") }; which sends the js variable as an ajax param called myvar this.myVar = parameters.getParameterValue("myvar").toInt(); which retrieves the ajax param value server side so you can store it.

I am closing the issue (because I tested it and its works ;)), but please let me know if you succeed!...

Thanks & best regards, Sebastien.

RichLiv commented 11 years ago

I will give it a whirl and see where I come out - many thanks, Sebastien. Hopefully I can get to where I need to be

Best regards

Richard

On 6 January 2013 10:51, Sebastien Briquet notifications@github.com wrote:

Hi Richard,

Hope you had a good time in France :)

Well, handling Ajax using Wicket is probably not the easiest part at the beginning, and things changed a lot in Wicket 6. So please find bellow the code I had in mind in my previous answer:

The HTML:

<!DOCTYPE html>wicket:head
/wicket:headwicket:extend

/wicket:extend The Java: public class AjaxSliderPage extends TemplatePage{ private static final long serialVersionUID = 1L; ``` // Model // private final Model myModel; private FeedbackPanel feedback; public AjaxSliderPage() { this.myModel = new Model(0); this.init(); } private void init() { final Form form = new Form("form"); this.add(form); // FeedbackPanel // this.feedback = new JQueryFeedbackPanel("feedback"); form.add(this.feedback.setOutputMarkupId(true)); // Slider // form.add(this.newAjaxSlider("slider", new Model(50))); } private AjaxSlider newAjaxSlider(String id, Model model) { return new AjaxSlider(id, model) { private static final long serialVersionUID = 1L; @Override public void onEvent(IEvent event) { super.onEvent(event); // important if (event.getPayload() instanceof MyChangeEvent) { // Sets the model object // MyChangeEvent payload = (MyChangeEvent) event.getPayload(); AjaxSliderPage.this.myModel.setObject(payload.getMyVar()); // Refresh the feedback panel // AjaxSliderPage.this.feedback(payload.getTarget()); } } @Override protected JQueryAjaxBehavior newOnChangeBehavior() { return new JQueryAjaxChangeBehavior(this, this.input) { private static final long serialVersionUID = 1L; @Override protected CallbackParameter[] getCallbackParameters() { return new CallbackParameter[] { CallbackParameter.context("event"), CallbackParameter.context("ui"), CallbackParameter.resolved("myvar", "mygooglevar") }; } @Override protected JQueryEvent newEvent(AjaxRequestTarget target) { return new MyChangeEvent(target); } }; } }; } protected void feedback(AjaxRequestTarget target) { this.info("The model object is: " + this.myModel.getObject()); target.add(this.feedback); } /** * Provides an event object that will be broadcasted by the {@link JQueryAjaxChangeBehavior} * This extends the base class ChangeEvent used by the slider to handle an additional parameter (myvar) */ public static class MyChangeEvent extends ChangeEvent { private int myVar; public MyChangeEvent(AjaxRequestTarget target) { super(target); final RequestCycle requestCycle = RequestCycle.get(); final IRequestParameters parameters = requestCycle.getRequest().getPostParameters(); this.myVar = parameters.getParameterValue("myvar").toInt(); } public int getMyVar() { return this.myVar; } }} ``` The most important line are: var mygooglevar = 88; which is the external variable you want to send CallbackParameter.resolved("myvar", "mygooglevar") }; which sends the js variable as an ajax param called myvar this.myVar = parameters.getParameterValue("myvar").toInt(); which retrieves the ajax param value server side so you can store it. I am closing the issue (because I tested it and its works ;)), but please let me know if you succeed!... Thanks & best regards, Sebastien. — Reply to this email directly or view it on GitHubhttps://github.com/sebfz1/wicket-jquery-ui/issues/13#issuecomment-11926888.

Richard Livingstone www.bananasoft.net 07711590497

RichLiv commented 11 years ago

Hi Sebastien

Great, that works just right for me. Thanks for the assistance - could you let me know when you release this code formally as I'm just including it in my project for now.

Best regards

Richard

On Sunday, January 6, 2013, Richard Livingstone wrote:

I will give it a whirl and see where I come out - many thanks, Sebastien. Hopefully I can get to where I need to be

Best regards

Richard

On 6 January 2013 10:51, Sebastien Briquet notifications@github.comwrote:

Hi Richard,

Hope you had a good time in France :)

Well, handling Ajax using Wicket is probably not the easiest part at the beginning, and things changed a lot in Wicket 6. So please find bellow the code I had in mind in my previous answer:

The HTML:

<!DOCTYPE html>wicket:head
/wicket:headwicket:extend

/wicket:extend The Java: public class AjaxSliderPage extends TemplatePage{ private static final long serialVersionUID = 1L; ``` // Model // private final Model myModel; private FeedbackPanel feedback; public AjaxSliderPage() { this.myModel = new Model(0); this.init(); } private void init() { final Form form = new Form("form"); this.add(form); // FeedbackPanel // this.feedback = new JQueryFeedbackPanel("feedback"); form.add(this.feedback.setOutputMarkupId(true)); // Slider // form.add(this.newAjaxSlider("slider", new Model(50))); } private AjaxSlider newAjaxSlider(String id, Model model) { return new AjaxSlider(id, model) { private static final long serialVersionUID = 1L; @Override public void onEvent(IEvent event) { super.onEvent(event); // important if (event.getPayload() instanceof MyChangeEvent) ``` ## Richard Livingstone www.bananasoft.net 07711590497

Richard Livingstone www.bananasoft.net 07711590497

RichLiv commented 11 years ago

Sebastien, I was wondering as you are a JQuery expoert if you had any idea how I might go about adding a background to the slider body ? I basically want to colour the left half red and the right half green, to indicate approval and disapproval (voting intentions). I thought maybe via CSS and a background image but don't know if that would be a good way.

Best regards

On 7 January 2013 08:05, Richard Livingstone richard@bananasoft.net wrote:

Hi Sebastien

Great, that works just right for me. Thanks for the assistance - could you let me know when you release this code formally as I'm just including it in my project for now.

Best regards

Richard

On Sunday, January 6, 2013, Richard Livingstone wrote:

I will give it a whirl and see where I come out - many thanks, Sebastien. Hopefully I can get to where I need to be

Best regards

Richard

On 6 January 2013 10:51, Sebastien Briquet notifications@github.comwrote:

Hi Richard,

Hope you had a good time in France :)

Well, handling Ajax using Wicket is probably not the easiest part at the beginning, and things changed a lot in Wicket 6. So please find bellow the code I had in mind in my previous answer:

The HTML:

<!DOCTYPE html>wicket:head
/wicket:headwicket:extend

/wicket:extend The Java: public class AjaxSliderPage extends TemplatePage{ private static final long serialVersionUID = 1L; ``` // Model // private final Model myModel; private FeedbackPanel feedback; public AjaxSliderPage() { this.myModel = new Model(0); this.init(); } private void init() { final Form form = new Form("form"); this.add(form); // FeedbackPanel // this.feedback = new JQueryFeedbackPanel("feedback"); form.add(this.feedback.setOutputMarkupId(true)); // Slider // form.add(this.newAjaxSlider("slider", new Model(50))); } private AjaxSlider newAjaxSlider(String id, Model model) { return new AjaxSlider(id, model) { private static final long serialVersionUID = 1L; @Override public void onEvent(IEvent event) { super.onEvent(event); // important if (event.getPayload() instanceof MyChangeEvent) ``` ## Richard Livingstone www.bananasoft.net 07711590497

Richard Livingstone www.bananasoft.net 07711590497

Richard Livingstone www.bananasoft.net 07711590497

sebfz1 commented 11 years ago

Hi Richard,

I will not release the code above as it is handling a special case. But instead of an anonymous class, you can make your own VoteAjaxSlider class to have a cleaner code, but that's up to you :)

About the customization, yes it is done thought CSS (but it will not be 50/50, it will be from the beginning to the cursor and from the cursor to the end).

.vote-slider { background-color: green; }
.vote-slider .ui-slider-range { background-color: red; }

In this case, you have to specify setRange(Range.MIN). You can have a look at this page: http://jqueryui.com/slider/#colorpicker

If you want 50/50, I also think an image is the best way in this case. I guess a 1px height image, with a comfortable width, 50% red, 50% green, centered (on x) with a repeat-y should do the trick.

Finally, be sure to add the css class-name to your VoteAjaxSlider component.

Hope this helps, Sebastien.

RichLiv commented 11 years ago

That's very helpful, thanks, Sebastien. It works nicely now, with the correct colours too, so many thanks for your help.

On 7 January 2013 22:04, Sebastien Briquet notifications@github.com wrote:

Hi Richard,

I will not release the code above as it is handling a special case. But instead of an anonymous class, you can make your own VoteAjaxSlider class to have a cleaner code, but that's up to you :)

About the customization, yes it is done thought CSS (but it will not be 50/50, it will be from the beginning to the cursor and from the cursor to the end).

.vote-slider { background-color: green; }.vote-slider .ui-slider-range { background-color: red; }

In this case, you have to specify setRange(Range.MIN). You can have a look at this page: http://jqueryui.com/slider/#colorpicker

If you want 50/50, I also think an image is the best way in this case. I guess a 1px height image, with a comfortable width, 50% red, 50% green, centered (on x) with a repeat-y should do the trick.

Finally, be sure to add the css class-name to your VoteAjaxSlidercomponent.

Hope this helps, Sebastien.

— Reply to this email directly or view it on GitHubhttps://github.com/sebfz1/wicket-jquery-ui/issues/13#issuecomment-11974158.

Richard Livingstone www.bananasoft.net 07711590497

sebfz1 commented 11 years ago

With pleasure :)

RichLiv commented 10 years ago

Hi Sebastien

Here's a version without the Wicket 6.12.0 jars in it, as the Google forum seems not to like very large attachments

Cheers

Richard

Richard Livingstone

m +44 (0) 7711 590497 e richard@bananasoft.net richard@bananasoft.net

This document, together with any attachments, is for the exclusive and confidential use of the recipient addressee. Any other distribution, use or reproduction without prior consent is unauthorised and strictly prohibited. If you have received this message in error please notify the sender by email immediately.

On 7 July 2014 08:57, Sebastien Briquet sebfz1@gmail.com wrote:

Hi Richard,

I did not see your mail containing the quickstart... Could you please resend it (or attach it here) ?

Thanks & best regards, Sebastien.

On Monday, June 30, 2014 10:22:47 PM UTC+2, Sebastien Briquet wrote:

Hi Richard, yes I will look at it when I return... Thanks & best regards, Sebastien On Jun 30, 2014 7:29 PM, "Richard Livingstone" < richardsaullivingstone@gmail.com> wrote:

Hi Sebastien

I've emailed you separately re the test case that shows the strange behaviour. I created it using the latest JQuery-Wicket jars and 6.12.0 of Wicket. I created two identical accordion tabs; the first one works fine but when I click an IndicatingAjaxSubmitButton on the second tab, what gets returned in the component model is the data from the first tab. The tabs are distinct instances of the same class, and there are no statics so there is no way this should be happening.

Any chance you can take a look at this?

Many thanks

Richard

-- You received this message because you are subscribed to a topic in the Google Groups "wicket-jquery-ui" group. To unsubscribe from this topic, visit https://groups.google.com/d/topic/wicket-jquery-ui/kshShRjzxHc/unsubscribe . To unsubscribe from this group and all its topics, send an email to wicket-jquery-ui+unsubscribe@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/wicket-jquery-ui/3256ee8e-d38d-40c9-9ac9-697a8448c2a3%40googlegroups.com https://groups.google.com/d/msgid/wicket-jquery-ui/3256ee8e-d38d-40c9-9ac9-697a8448c2a3%40googlegroups.com?utm_medium=email&utm_source=footer .

For more options, visit https://groups.google.com/d/optout.

sebfz1 / wicket-jquery-ui

Slider behaviours #13