Proposal: TabbedPanel variant that does all the work on the client

Hello Everyone,


I'm pretty new on this list and I don't know if this is the right place
for such contributions. However, I recently developed a subclass of
TabbedPanel (from wicket-extensions) that IMHO may be useful for others,
so I'd like to share it.

The main idea is that it's a drop-in replacement for TabbedPanel, but it
does all the work on the client side. That is, all the tab contents are
preloaded, and the user can switch between the tabs using client-side
JavaScript only. No additional HTTP Requests involved.

The good thing is, that this fits in really neatly with all the other
TabbedPanel stuff. My new class ClientSideTabbedPanel is only a few
lines of Java and JavaScript code, and no markup. But it still supports
fallback, if JavaScript is deactivated.

The main benefit of ClientSideTabbedPanel is that it is more responsive
when switching tabs. It may also be better in terms of search engine
optimization, since all the tab-contents are being indexed in one page.

You can see it in action here for instance:
http://www.airline-direct.de/fluege/nach/London-LON

So, how can I share this? Should I just post the code to this list?
Anyone interested at all?


Regards,
Michael Riedel

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@...
For additional commands, e-mail: users-help@...

[reiern70]

From time to time I have seem people asking for similar functionality... I
would add it to the wiki with a brief explanation (example) of how to use
it... or create a jira issue asking it to be included on the framework.. or
both of them.

Thanks for sharing!

Ernesto

On Fri, Nov 6, 2009 at 1:59 PM, spam2008@... <spam2008@...>wrote:

> Hello Everyone,
>
>
> I'm pretty new on this list and I don't know if this is the right place
> for such contributions. However, I recently developed a subclass of
> TabbedPanel (from wicket-extensions) that IMHO may be useful for others,
> so I'd like to share it.
>
> The main idea is that it's a drop-in replacement for TabbedPanel, but it
> does all the work on the client side. That is, all the tab contents are
> preloaded, and the user can switch between the tabs using client-side
> JavaScript only. No additional HTTP Requests involved.
>
> The good thing is, that this fits in really neatly with all the other
> TabbedPanel stuff. My new class ClientSideTabbedPanel is only a few
> lines of Java and JavaScript code, and no markup. But it still supports
> fallback, if JavaScript is deactivated.
>
> The main benefit of ClientSideTabbedPanel is that it is more responsive
> when switching tabs. It may also be better in terms of search engine
> optimization, since all the tab-contents are being indexed in one page.
>
> You can see it in action here for instance:
> http://www.airline-direct.de/fluege/nach/London-LON
>
> So, how can I share this? Should I just post the code to this list?
> Anyone interested at all?
>
>
> Regards,
> Michael Riedel
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@...
> For additional commands, e-mail: users-help@...
>
>

[Roman Ilin]

Hello Michael,

there is already AjaxTabbedPanel
http://wicketstuff.org/wicket13/ajax/tabbed-panel.1

What it is missing in my opinion is possibility to create delete tabs dynamicaly


Regards

Roman

On Fri, Nov 6, 2009 at 1:59 PM, spam2008@... <spam2008@...> wrote:

> Hello Everyone,
>
>
> I'm pretty new on this list and I don't know if this is the right place
> for such contributions. However, I recently developed a subclass of
> TabbedPanel (from wicket-extensions) that IMHO may be useful for others,
> so I'd like to share it.
>
> The main idea is that it's a drop-in replacement for TabbedPanel, but it
> does all the work on the client side. That is, all the tab contents are
> preloaded, and the user can switch between the tabs using client-side
> JavaScript only. No additional HTTP Requests involved.
>
> The good thing is, that this fits in really neatly with all the other
> TabbedPanel stuff. My new class ClientSideTabbedPanel is only a few
> lines of Java and JavaScript code, and no markup. But it still supports
> fallback, if JavaScript is deactivated.
>
> The main benefit of ClientSideTabbedPanel is that it is more responsive
> when switching tabs. It may also be better in terms of search engine
> optimization, since all the tab-contents are being indexed in one page.
>
> You can see it in action here for instance:
> http://www.airline-direct.de/fluege/nach/London-LON
>
> So, how can I share this? Should I just post the code to this list?
> Anyone interested at all?
>
>
> Regards,
> Michael Riedel
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@...
> For additional commands, e-mail: users-help@...
>
>

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@...
For additional commands, e-mail: users-help@...

[reiern70]

As far as I understand it is not an AJAX panel... just a panel that renders
the whole HTML in one round-trip and switch tabs with JS. Or I did get it
wrong? AFAIK there is no such component included with Wicket? and form time
 time people come up with use cases where such a component might be useful:
e.g. a form distributed between several tabs and you don't want to do an
(AJAX) submit while switching tabs.

Best,

Ernesto

On Fri, Nov 6, 2009 at 2:13 PM, Roman Ilin <roman.ilin@...> wrote:

> Hello Michael,
>
> there is already AjaxTabbedPanel
> http://wicketstuff.org/wicket13/ajax/tabbed-panel.1
>
> What it is missing in my opinion is possibility to create delete tabs
> dynamicaly
>
>
> Regards
>
> Roman
>
> On Fri, Nov 6, 2009 at 1:59 PM, spam2008@... <spam2008@...>
> wrote:
> > Hello Everyone,
> >
> >
> > I'm pretty new on this list and I don't know if this is the right place
> > for such contributions. However, I recently developed a subclass of
> > TabbedPanel (from wicket-extensions) that IMHO may be useful for others,
> > so I'd like to share it.
> >
> > The main idea is that it's a drop-in replacement for TabbedPanel, but it
> > does all the work on the client side. That is, all the tab contents are
> > preloaded, and the user can switch between the tabs using client-side
> > JavaScript only. No additional HTTP Requests involved.
> >
> > The good thing is, that this fits in really neatly with all the other
> > TabbedPanel stuff. My new class ClientSideTabbedPanel is only a few
> > lines of Java and JavaScript code, and no markup. But it still supports
> > fallback, if JavaScript is deactivated.
> >
> > The main benefit of ClientSideTabbedPanel is that it is more responsive
> > when switching tabs. It may also be better in terms of search engine
> > optimization, since all the tab-contents are being indexed in one page.
> >
> > You can see it in action here for instance:
> > http://www.airline-direct.de/fluege/nach/London-LON
> >
> > So, how can I share this? Should I just post the code to this list?
> > Anyone interested at all?
> >
> >
> > Regards,
> > Michael Riedel
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@...
> > For additional commands, e-mail: users-help@...
> >
> >
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@...
> For additional commands, e-mail: users-help@...
>
>

Ernesto Reinaldo Barreiro wrote:
> As far as I understand it is not an AJAX panel... just a panel that renders
> the whole HTML in one round-trip and switch tabs with JS.

Yes, that's exactly the point of the ClientSideTabbedPanel. We were
using the AjaxTabbedPanel before, but I wanted to avoid the extra Ajax
calls. It's just another flawor of the same thing.


> AFAIK there is no such component included with Wicket?

I could not find one. So I will follow your earlier advice, and find a
nice spot in the wiki to publish it.


> and form time
>  time people come up with use cases where such a component might be useful:
> e.g. a form distributed between several tabs and you don't want to do an
> (AJAX) submit while switching tabs.

I have not tested yet, how the ClientSideTabbed panel interacts with
other complicated component logic. Think of Forms with AJAX updates,
etc. In theory everything should work fine though. Feel free to test, as
soon as I have published it.


>> On Fri, Nov 6, 2009 at 1:59 PM, spam2008@... <spam2008@...>
>>
>>> [...]
>>> The main idea is that it's a drop-in replacement for TabbedPanel, but it
>>> does all the work on the client side. That is, all the tab contents are
>>> preloaded, and the user can switch between the tabs using client-side
>>> JavaScript only. No additional HTTP Requests involved.
>>> [...]


---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@...
For additional commands, e-mail: users-help@...

[Michael O'Cleirigh]

Hi Michael,

You should:

1. Get a sourceforge account.
2. Request on dev@... to be given commit access to the
wicketstuff repository.

I think 'wicketstuff-minis' might be the most suitable place for your
code since it is fairly small.   SVN link:
https://wicket-stuff.svn.sourceforge.net/svnroot/wicket-stuff/trunk/wicketstuff-core/minis-parent

 From the pom.xml:

    WicketStuff Minis is a collection of assorted components and
    behaviors that are too small to warrant their own project. The
    actual project is the child project "minis".

wicketstuff-minis is part of wicketstuff-core so will be uploaded to the
wicketstuff maven repository each time a wicketstuff-core release is
cut.  This will allow users to be able to access it without having to
download and compile it from source.

Regards,

Mike

>
>
> I'm pretty new on this list and I don't know if this is the right place
> for such contributions. However, I recently developed a subclass of
> TabbedPanel (from wicket-extensions) that IMHO may be useful for others,
> so I'd like to share it.
>
> The main idea is that it's a drop-in replacement for TabbedPanel, but it
> does all the work on the client side. That is, all the tab contents are
> preloaded, and the user can switch between the tabs using client-side
> JavaScript only. No additional HTTP Requests involved.
>
> The good thing is, that this fits in really neatly with all the other
> TabbedPanel stuff. My new class ClientSideTabbedPanel is only a few
> lines of Java and JavaScript code, and no markup. But it still supports
> fallback, if JavaScript is deactivated.
>
> The main benefit of ClientSideTabbedPanel is that it is more responsive
> when switching tabs. It may also be better in terms of search engine
> optimization, since all the tab-contents are being indexed in one page.
>
> You can see it in action here for instance:
> http://www.airline-direct.de/fluege/nach/London-LON
>
> So, how can I share this? Should I just post the code to this list?
> Anyone interested at all?
>
>
> Regards,
> Michael Riedel
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@...
> For additional commands, e-mail: users-help@...
>
>  

[reiern70]

Is your implementation using jQuery? Then  maybe you should try to contact
someone behind some of the jQuery-Wicket related projects out there and see
if your component could feet on one of those projects. It would be nice, and
not difficult to achieve I guess, to have that component not depending on
any JavaScript library, but simple an plain JavaScript.

Best,

Ernesto

On Fri, Nov 6, 2009 at 4:42 PM, spam2008@... <spam2008@...>wrote:

> Ernesto Reinaldo Barreiro wrote:
> > As far as I understand it is not an AJAX panel... just a panel that
> renders
> > the whole HTML in one round-trip and switch tabs with JS.
>
> Yes, that's exactly the point of the ClientSideTabbedPanel. We were
> using the AjaxTabbedPanel before, but I wanted to avoid the extra Ajax
> calls. It's just another flawor of the same thing.
>
>
> > AFAIK there is no such component included with Wicket?
>
> I could not find one. So I will follow your earlier advice, and find a
> nice spot in the wiki to publish it.
>
>
> > and form time
> >  time people come up with use cases where such a component might be
> useful:
> > e.g. a form distributed between several tabs and you don't want to do an
> > (AJAX) submit while switching tabs.
>
> I have not tested yet, how the ClientSideTabbed panel interacts with
> other complicated component logic. Think of Forms with AJAX updates,
> etc. In theory everything should work fine though. Feel free to test, as
> soon as I have published it.
>
>
> >> On Fri, Nov 6, 2009 at 1:59 PM, spam2008@... <spam2008@...>
> >>
> >>> [...]
> >>> The main idea is that it's a drop-in replacement for TabbedPanel, but
> it
> >>> does all the work on the client side. That is, all the tab contents are
> >>> preloaded, and the user can switch between the tabs using client-side
> >>> JavaScript only. No additional HTTP Requests involved.
> >>> [...]
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@...
> For additional commands, e-mail: users-help@...
>
>

Thanks for the advice Mike!

> You should:
>
> 1. Get a sourceforge account.
> 2. Request on dev@... to be given commit access to the
> wicketstuff repository.
>
> I think 'wicketstuff-minis' might be the most suitable place for your
> code since it is fairly small. [...]

For now, I created a corresponding issue in Jira, and attached my code:
http://wicketstuff.org/jira/browse/WSMINIS-11

If you really want to grant me commit access, I'll put it into the SVN
myself. Here's my SourceForge user id: 2693911


Regards,
Michael

>> I'm pretty new on this list and I don't know if this is the right place
>> for such contributions. However, I recently developed a subclass of
>> TabbedPanel (from wicket-extensions) that IMHO may be useful for others,
>> so I'd like to share it.
>>
>> The main idea is that it's a drop-in replacement for TabbedPanel, but it
>> does all the work on the client side. That is, all the tab contents are
>> preloaded, and the user can switch between the tabs using client-side
>> JavaScript only. No additional HTTP Requests involved.
>>
>> The good thing is, that this fits in really neatly with all the other
>> TabbedPanel stuff. My new class ClientSideTabbedPanel is only a few
>> lines of Java and JavaScript code, and no markup. But it still supports
>> fallback, if JavaScript is deactivated.
>>
>> The main benefit of ClientSideTabbedPanel is that it is more responsive
>> when switching tabs. It may also be better in terms of search engine
>> optimization, since all the tab-contents are being indexed in one page.
>>
>> You can see it in action here for instance:
>> http://www.airline-direct.de/fluege/nach/London-LON
>>
>> So, how can I share this? Should I just post the code to this list?
>> Anyone interested at all?

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@...
For additional commands, e-mail: users-help@...

Hi Ernesto,


> Is your implementation using jQuery? Then  maybe you should try to
> contact someone behind some of the jQuery-Wicket related projects out
> there and see if your component could feet on one of those projects.

Yes, right now it's using jQuery. I'll have a look at jQuery-Wicket, and
see if it fits in with it...

> It would be nice, and not difficult to achieve I guess, to have that
> component not depending on any JavaScript library, but simple an
> plain JavaScript.

I'd prefer that actually, although plain JavaScript is a little
cumbersome. Is there not some small Wicket-specific JavaScript library I
could build upon?


Regards,
Michael


---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@...
For additional commands, e-mail: users-help@...

[reiern70]

The advantage of plain JavaScript is that then even people not wanting to
use jQuery for their projects can use it... All you need to do is create is
 JS functions that hide-show the the tabs... I'm not a JS expert but if you
put the code somewhere I can try to help with that part.

Best,

Ernesto

On Mon, Nov 9, 2009 at 1:17 AM, spam2008@... <spam2008@...>wrote:

> Hi Ernesto,
>
>
> > Is your implementation using jQuery? Then  maybe you should try to
> > contact someone behind some of the jQuery-Wicket related projects out
> > there and see if your component could feet on one of those projects.
>
> Yes, right now it's using jQuery. I'll have a look at jQuery-Wicket, and
> see if it fits in with it...
>
> > It would be nice, and not difficult to achieve I guess, to have that
> > component not depending on any JavaScript library, but simple an
> > plain JavaScript.
>
> I'd prefer that actually, although plain JavaScript is a little
> cumbersome. Is there not some small Wicket-specific JavaScript library I
> could build upon?
>
>
> Regards,
> Michael
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@...
> For additional commands, e-mail: users-help@...
>
>