You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Daniel Radünz <ih...@gmx.de> on 2022/06/29 09:38:30 UTC
Automatically insert generated html IDs in other places in html file
Hello everybody,
I'm wondering if there is a way in Wicket to generate unique html IDs and to then add them in other places in the html, without having to write any boiler plate code in each panel that I have.
For example in the following panel I need the ID of the h1 tag to be put into the aria-labelledby attribute in the section tag.
<wicket:panel>
<section class="card" aria-labelledby="sectionheader">
<div class="card-header"><h1 id="sectionheader">Lorem ipsum dolor sit amet</h1></div>
<div class="card-content">Content ...</div>
</section>
</wicket:panel>
Hardwiring it like in this example of course won't work if I use the same panel class multiple times within a page due to duplicate html IDs.
While I know I could add WebMarkupContainers for the section and the h1 to my Java code and manually wire them together with an AttributeModifier in Wicket, I woud prefer to have some application wide code which recognizes this constellation in the html file and automatically generates and inserts the IDs.
Maybe somebody can push me in the right direction, how I could accomplish this with Wicket, if it's possible at all.
Kind regards,
Daniel
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Automatically insert generated html IDs in other places in html file
Posted by Martin Terra <ma...@koodaripalvelut.com>.
ke 29. kesäk. 2022 klo 12.38 Daniel Radünz (ihmehlmenn@gmx.de) kirjoitti:
> Hello everybody,
>
> I'm wondering if there is a way in Wicket to generate unique html IDs and
> to then add them in other places in the html, without having to write any
> boiler plate code in each panel that I have.
>
> For example in the following panel I need the ID of the h1 tag to be put
> into the aria-labelledby attribute in the section tag.
> <wicket:panel>
> <section class="card" aria-labelledby="sectionheader">
> <div class="card-header"><h1 id="sectionheader">Lorem
> ipsum dolor sit amet</h1></div>
> <div class="card-content">Content ...</div>
> </section>
> </wicket:panel>
>
> Hardwiring it like in this example of course won't work if I use the same
> panel class multiple times within a page due to duplicate html IDs.
>
> While I know I could add WebMarkupContainers for the section and the h1 to
> my Java code and manually wire them together with an AttributeModifier in
> Wicket, I woud prefer to have some application wide code which recognizes
> this constellation in the html file and automatically generates and inserts
> the IDs.
>
You can extend and create your own flavor of WebMarkupContainer which does
all that you need or even a panel if the html is repetitive as well.
**
Martin
> Maybe somebody can push me in the right direction, how I could accomplish
> this with Wicket, if it's possible at all.
>
> Kind regards,
> Daniel
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
Re: Re: Automatically insert generated html IDs in other places in html file
Posted by Martin Terra <ma...@koodaripalvelut.com>.
Can you provide more code to clarify your use case? A quickstart would be
helpful.
Without deeper insight into your project, I would simply implement a
reusable panel like this:
<wicket:panel> <!-- reusablepanel starts here -->
<section class="card" aria-labelledby="sectionheader" wicket:id="
*webmarkupcontainer-providing-necessary-attributes*">
<div class="card-header"><h1 wicket:id="*for-example-this-could-be-a-label*"
id="sectionheader">Lorem ipsum dolor sit amet</h1></div>
<div class="card-content">Content ...</div>
</section>
</wicket:panel> <!-- reusablepanel ends here -->
In java you could then use this as an one-line element along the lines of:
new ReusablePanel("panel-id", "header-id");
**
Martin
to 30. kesäk. 2022 klo 13.50 Daniel Radünz (ihmehlmenn@gmx.de) kirjoitti:
> Thank you kindly both for your suggestions.
>
> @Martin Terra
> I'm not sure I quite undstand what you mean. My hope was that I don't have
> to add any of the involved components to the Java code of every single
> panel. The example I've given is just one of many. We have many different
> constellation with completly different html fragments but each of them has
> the same problem, that somewhere in there the html ID of one html tag has
> to be put into the html attribute of another html tag.
>
> @Martin Grigorov
> The problem I'm having with doing it on the client with javascript or with
> the IResponseFilter is that by that time I can only work on the fully
> assembled html. If a Wicket page includes the same panel multiple times
> though, I would already have the same html ID and the same reference to it
> multiple times in the final html without a (bullet proof) way to figure out
> which two elements ultimatively belong together.
>
> That's why I was hoping there would be a way to do this on a panel level,
> maybe with a custom attribute. Something like
> <section wicket:aria-labelledby="sectionheader">
> <h1 wicket:auto-id="sectionheader">
> </section>
>
> If I'd then have a page which has the same panel twice in it, Wicket would
> take care of assinging unique IDs and also putting these generated unique
> IDs in the corresponding attributes that reference them, resulting in
> something like this:
> <section aria-labelledby="sectionheader1">
> <h1 id="sectionheader1">
> </section>
> <section aria-labelledby="sectionheader2">
> <h1 id="sectionheader2">
> </section>
>
> If there is something like the IResponseFilter but on a per component base
> which would allow me to inspect and modify only the html fragment of a
> component/panel it might work.
>
> Kind regards,
> Daniel
>
>
> Gesendet: Mittwoch, 29. Juni 2022 um 15:40 Uhr
> Von: "Martin Grigorov" <mg...@apache.org>
> An: users@wicket.apache.org
> Betreff: Re: Automatically insert generated html IDs in other places in
> html file
> Hi,
>
> The easiest way I could imagine is with a short jQuery function that is
> called on domready.
>
> If you need to do it on the server side then maybe with IResponseFilter.
>
> On Wed, Jun 29, 2022, 12:38 Daniel Radünz <ih...@gmx.de> wrote:
>
> > Hello everybody,
> >
> > I'm wondering if there is a way in Wicket to generate unique html IDs and
> > to then add them in other places in the html, without having to write any
> > boiler plate code in each panel that I have.
> >
> > For example in the following panel I need the ID of the h1 tag to be put
> > into the aria-labelledby attribute in the section tag.
> > <wicket:panel>
> > <section class="card" aria-labelledby="sectionheader">
> > <div class="card-header"><h1 id="sectionheader">Lorem
> > ipsum dolor sit amet</h1></div>
> > <div class="card-content">Content ...</div>
> > </section>
> > </wicket:panel>
> >
> > Hardwiring it like in this example of course won't work if I use the same
> > panel class multiple times within a page due to duplicate html IDs.
> >
> > While I know I could add WebMarkupContainers for the section and the h1
> to
> > my Java code and manually wire them together with an AttributeModifier in
> > Wicket, I woud prefer to have some application wide code which recognizes
> > this constellation in the html file and automatically generates and
> inserts
> > the IDs.
> >
> > Maybe somebody can push me in the right direction, how I could accomplish
> > this with Wicket, if it's possible at all.
> >
> > Kind regards,
> > Daniel
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > For additional commands, e-mail: users-help@wicket.apache.org
> >
> >
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
Re: Re: Re: Automatically insert generated html IDs in other places in html file
Posted by Martin Grigorov <mg...@apache.org>.
On Fri, Jul 8, 2022 at 7:55 PM Daniel Radünz <ih...@gmx.de> wrote:
> Thank you again for your input and sorry for the slow responses. Been
> unexpectedly busy with more urgent problems in my project.
>
> Beforehand: If it's still not clear what I'm trying to achieve after this
> message, I'll happily provide the requested quickstart, though from your
> responses and my own digging I already get the feeling, that it might just
> not be possible ...
>
> While the idea of Martin Terra with using a generic panel is good, the
> example that I've given with the h1 in the section is sadly just a simple
> one to show the general problem.
> There are many many use cases with aria-* accessibillity attributes where
> you have to add the id of one element to an attribute of another element.
> aria-labelledby, aria-owns, aria-controls, aria-describedby, ... just to
> name a few. With many of those you don't always have the convinient case
> that these elements encase eachother as they do in my example. They could
> be encased the other way around or not all and both just be direct children
> of another parent element. They might not even be in close proxymity, as an
> element right at the beginning of a panel could reference an element which
> is at the very end of that panel.
> So yes, I might be able to write some JS code for this very particular
> simple example but as soon as the structure changes or in general I have
> panels with different structures, the JS code would fail or I would at
> least have to write different JS code for each case. That's why I'd like to
> do it on the server side where it's reasonable to assume to have unique
> Wicket IDs in a panel.html file which then get turned into unique html IDs
> when wicket assembles the full page.
>
> Maybe I failed to make clear that of course I am well aware of how to do
> this the "hard" way with some boiler plate could. I know I could very well
> have this bit of html:
>
> <section wicket:id="section">
> <h1 wicket:id="sectionheader">Lorem ipsum</h1>
> </section>
>
> and wire everything together with this bit of code:
>
> WebMarkupContainer section = new WebMarkupContainer("section");
> add(section);
> WebMarkupContainer sectionheader = new WebMarkupContainer("sectionheader");
> sectionheader.setOutputMarkupId(true);
> section.add(sectionheader);
> section.add(AttributeModifier.replace("aria-labelledby",
> sectionheader::getMarkupId));
>
> which would produce something like this with unique IDs
>
> <section aria-labelledby="section1">
> <h1 id="sectionheader1">Lorem ipsum</h1>
> </section>
>
> But I wanted to avoid that. Adding these elements to the Java side has no
> real benefits in my eyes.
>
> If I write this in html
>
> <section aria-labelledby="sectionheader">
> <h1 id="sectionheader">Lorem ipsum</h1>
> </section>
>
How about of using custom attribute instead of id here, e.g.: <h1
wicket:id="..." *myid*="sectionheader">Lorem ipsum</h1>
Then again with JavaScript you can lookup all HTML elements with such
attributes and update their siblings if they have aria-xyz="same_value".
The only well-defined logic that you need here is how far to look for
siblings/parents.
>
> it's already clear from the html side that the developer wants to wire
> these components togehter just by having the attributes on the
> corresponding tags. Adding any (boiler plate-)code on the Java side
> increases the complexitiy, feels redundant and in the worst case even
> causes trouble. So the idea was that maybe there is a way to write whatever
> "global" behaviour/listener/filter etc. to recognise matching pairs id- and
> aria-*-attributes in a Wicket panel and then generate and insert unique IDs
> into these places within a panel.
>
> I will check out AutoLabelTagHandler and AutoLabelTagResolver again as
> Martijn suggested.
>
> With that said, if it turns out, that it's not possible, I will just have
> to do it the "old fashioned" way by adding everything on the Java side as
> well. I just wanted to know ahead of that if somebody has solved this
> problem in a more elegant way before and I would maybe not have to reinvent
> the wheel.
>
> Thank you for your time and kind regards
> Daniel Radünz
>
>
>
> Gesendet: Sonntag, 03. Juli 2022 um 22:36 Uhr
> Von: "Martin Grigorov" <mg...@apache.org>
> An: users@wicket.apache.org
> Betreff: Re: Re: Automatically insert generated html IDs in other places
> in html file
> On Sat, Jul 2, 2022, 15:18 Martijn Dashorst <ma...@gmail.com>
> wrote:
>
> > I think Daniel suggest that Wicket doesn't make /all/ id's unique, only
> > those that are owned by it by having a component attached to it. And even
> > then, when you explicitly setMarkupId() you are yourself responsible for
> > ensuring it is unique.
> >
> > BarPanel.html:
> > <wicket:panel>
> > <h1 id="bar"></h1>
> >
>
> 1. Don't set the ID in HTML
> 2. Use panel.setOutputMarkupId(true)
>
> Voila!
>
>
> </wicket:panel>
> >
> > BarPage.html:
> > <div wicket:id="panel1"></div>
> > <div wicket:id="panel2"></div>
> >
> > BarPagel.java:
> > add(new BarPanel("panel1"));
> > add(new BarPanel("panel2"));
> >
> > This would result in two h1 tags with the same HTML id. Wicket doesn't
> > modify the id magically.
> >
> > Wicket (from what i know) doesn't support Daniel's usecase out of the
> box,
> > but Wicket does have the ability to act on tags if you make such
> affordance
> > yourself.
> >
> > I suppose
> >
> > <div wicket:aria-label="sect1">
> > <section wicket:aria-id="sect1">
> >
> > Could be similarly implemented as the wicket:for attribute.
> > See AutoLabelTagHandler and AutoLabelTagResolver for more information.
> >
> > Martijn
> >
> > --
> > Become a Wicket expert, learn from the best: http://wicketinaction.com
> >
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
Aw: Re: Re: Automatically insert generated html IDs in other places in html file
Posted by Daniel Radünz <ih...@gmx.de>.
Thank you again for your input and sorry for the slow responses. Been unexpectedly busy with more urgent problems in my project.
Beforehand: If it's still not clear what I'm trying to achieve after this message, I'll happily provide the requested quickstart, though from your responses and my own digging I already get the feeling, that it might just not be possible ...
While the idea of Martin Terra with using a generic panel is good, the example that I've given with the h1 in the section is sadly just a simple one to show the general problem.
There are many many use cases with aria-* accessibillity attributes where you have to add the id of one element to an attribute of another element. aria-labelledby, aria-owns, aria-controls, aria-describedby, ... just to name a few. With many of those you don't always have the convinient case that these elements encase eachother as they do in my example. They could be encased the other way around or not all and both just be direct children of another parent element. They might not even be in close proxymity, as an element right at the beginning of a panel could reference an element which is at the very end of that panel.
So yes, I might be able to write some JS code for this very particular simple example but as soon as the structure changes or in general I have panels with different structures, the JS code would fail or I would at least have to write different JS code for each case. That's why I'd like to do it on the server side where it's reasonable to assume to have unique Wicket IDs in a panel.html file which then get turned into unique html IDs when wicket assembles the full page.
Maybe I failed to make clear that of course I am well aware of how to do this the "hard" way with some boiler plate could. I know I could very well have this bit of html:
<section wicket:id="section">
<h1 wicket:id="sectionheader">Lorem ipsum</h1>
</section>
and wire everything together with this bit of code:
WebMarkupContainer section = new WebMarkupContainer("section");
add(section);
WebMarkupContainer sectionheader = new WebMarkupContainer("sectionheader");
sectionheader.setOutputMarkupId(true);
section.add(sectionheader);
section.add(AttributeModifier.replace("aria-labelledby", sectionheader::getMarkupId));
which would produce something like this with unique IDs
<section aria-labelledby="section1">
<h1 id="sectionheader1">Lorem ipsum</h1>
</section>
But I wanted to avoid that. Adding these elements to the Java side has no real benefits in my eyes.
If I write this in html
<section aria-labelledby="sectionheader">
<h1 id="sectionheader">Lorem ipsum</h1>
</section>
it's already clear from the html side that the developer wants to wire these components togehter just by having the attributes on the corresponding tags. Adding any (boiler plate-)code on the Java side increases the complexitiy, feels redundant and in the worst case even causes trouble. So the idea was that maybe there is a way to write whatever "global" behaviour/listener/filter etc. to recognise matching pairs id- and aria-*-attributes in a Wicket panel and then generate and insert unique IDs into these places within a panel.
I will check out AutoLabelTagHandler and AutoLabelTagResolver again as Martijn suggested.
With that said, if it turns out, that it's not possible, I will just have to do it the "old fashioned" way by adding everything on the Java side as well. I just wanted to know ahead of that if somebody has solved this problem in a more elegant way before and I would maybe not have to reinvent the wheel.
Thank you for your time and kind regards
Daniel Radünz
Gesendet: Sonntag, 03. Juli 2022 um 22:36 Uhr
Von: "Martin Grigorov" <mg...@apache.org>
An: users@wicket.apache.org
Betreff: Re: Re: Automatically insert generated html IDs in other places in html file
On Sat, Jul 2, 2022, 15:18 Martijn Dashorst <ma...@gmail.com>
wrote:
> I think Daniel suggest that Wicket doesn't make /all/ id's unique, only
> those that are owned by it by having a component attached to it. And even
> then, when you explicitly setMarkupId() you are yourself responsible for
> ensuring it is unique.
>
> BarPanel.html:
> <wicket:panel>
> <h1 id="bar"></h1>
>
1. Don't set the ID in HTML
2. Use panel.setOutputMarkupId(true)
Voila!
</wicket:panel>
>
> BarPage.html:
> <div wicket:id="panel1"></div>
> <div wicket:id="panel2"></div>
>
> BarPagel.java:
> add(new BarPanel("panel1"));
> add(new BarPanel("panel2"));
>
> This would result in two h1 tags with the same HTML id. Wicket doesn't
> modify the id magically.
>
> Wicket (from what i know) doesn't support Daniel's usecase out of the box,
> but Wicket does have the ability to act on tags if you make such affordance
> yourself.
>
> I suppose
>
> <div wicket:aria-label="sect1">
> <section wicket:aria-id="sect1">
>
> Could be similarly implemented as the wicket:for attribute.
> See AutoLabelTagHandler and AutoLabelTagResolver for more information.
>
> Martijn
>
> --
> Become a Wicket expert, learn from the best: http://wicketinaction.com
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Re: Automatically insert generated html IDs in other places in html file
Posted by Martin Grigorov <mg...@apache.org>.
On Sat, Jul 2, 2022, 15:18 Martijn Dashorst <ma...@gmail.com>
wrote:
> I think Daniel suggest that Wicket doesn't make /all/ id's unique, only
> those that are owned by it by having a component attached to it. And even
> then, when you explicitly setMarkupId() you are yourself responsible for
> ensuring it is unique.
>
> BarPanel.html:
> <wicket:panel>
> <h1 id="bar"></h1>
>
1. Don't set the ID in HTML
2. Use panel.setOutputMarkupId(true)
Voila!
</wicket:panel>
>
> BarPage.html:
> <div wicket:id="panel1"></div>
> <div wicket:id="panel2"></div>
>
> BarPagel.java:
> add(new BarPanel("panel1"));
> add(new BarPanel("panel2"));
>
> This would result in two h1 tags with the same HTML id. Wicket doesn't
> modify the id magically.
>
> Wicket (from what i know) doesn't support Daniel's usecase out of the box,
> but Wicket does have the ability to act on tags if you make such affordance
> yourself.
>
> I suppose
>
> <div wicket:aria-label="sect1">
> <section wicket:aria-id="sect1">
>
> Could be similarly implemented as the wicket:for attribute.
> See AutoLabelTagHandler and AutoLabelTagResolver for more information.
>
> Martijn
>
>
> On Thu, Jun 30, 2022 at 10:41 PM Martin Grigorov <mg...@apache.org>
> wrote:
>
> > On Thu, Jun 30, 2022, 13:50 Daniel Radünz <ih...@gmx.de> wrote:
> >
> > > Thank you kindly both for your suggestions.
> > >
> > > @Martin Terra
> > > I'm not sure I quite undstand what you mean. My hope was that I don't
> > have
> > > to add any of the involved components to the Java code of every single
> > > panel. The example I've given is just one of many. We have many
> different
> > > constellation with completly different html fragments but each of them
> > has
> > > the same problem, that somewhere in there the html ID of one html tag
> has
> > > to be put into the html attribute of another html tag.
> > >
> > > @Martin Grigorov
> > > The problem I'm having with doing it on the client with javascript or
> > with
> > > the IResponseFilter is that by that time I can only work on the fully
> > > assembled html. If a Wicket page includes the same panel multiple times
> > > though, I would already have the same html ID and the
> >
> >
> > Wrong!
> > Wicket makes sure that all ids in the page are unique.
> >
> > With jQuery / JSoup you could query all <section> elements which have a
> > child of type <div> with "id" attribute. Iterate over them and add the
> aria
> > attribute.
> >
> > same reference to it multiple times in the final html without a (bullet
> > > proof) way to figure out which two elements ultimatively belong
> together.
> > >
> > > That's why I was hoping there would be a way to do this on a panel
> level,
> > > maybe with a custom attribute. Something like
> > > <section wicket:aria-labelledby="sectionheader">
> > > <h1 wicket:auto-id="sectionheader">
> > > </section>
> > >
> > > If I'd then have a page which has the same panel twice in it, Wicket
> > would
> > > take care of assinging unique IDs and also putting these generated
> unique
> > > IDs in the corresponding attributes that reference them, resulting in
> > > something like this:
> > > <section aria-labelledby="sectionheader1">
> > > <h1 id="sectionheader1">
> > > </section>
> > > <section aria-labelledby="sectionheader2">
> > > <h1 id="sectionheader2">
> > > </section>
> > >
> > > If there is something like the IResponseFilter but on a per component
> > base
> > > which would allow me to inspect and modify only the html fragment of a
> > > component/panel it might work.
> > >
> > > Kind regards,
> > > Daniel
> > >
> > >
> > > Gesendet: Mittwoch, 29. Juni 2022 um 15:40 Uhr
> > > Von: "Martin Grigorov" <mg...@apache.org>
> > > An: users@wicket.apache.org
> > > Betreff: Re: Automatically insert generated html IDs in other places in
> > > html file
> > > Hi,
> > >
> > > The easiest way I could imagine is with a short jQuery function that is
> > > called on domready.
> > >
> > > If you need to do it on the server side then maybe with
> IResponseFilter.
> > >
> > > On Wed, Jun 29, 2022, 12:38 Daniel Radünz <ih...@gmx.de> wrote:
> > >
> > > > Hello everybody,
> > > >
> > > > I'm wondering if there is a way in Wicket to generate unique html IDs
> > and
> > > > to then add them in other places in the html, without having to write
> > any
> > > > boiler plate code in each panel that I have.
> > > >
> > > > For example in the following panel I need the ID of the h1 tag to be
> > put
> > > > into the aria-labelledby attribute in the section tag.
> > > > <wicket:panel>
> > > > <section class="card" aria-labelledby="sectionheader">
> > > > <div class="card-header"><h1 id="sectionheader">Lorem
> > > > ipsum dolor sit amet</h1></div>
> > > > <div class="card-content">Content ...</div>
> > > > </section>
> > > > </wicket:panel>
> > > >
> > > > Hardwiring it like in this example of course won't work if I use the
> > same
> > > > panel class multiple times within a page due to duplicate html IDs.
> > > >
> > > > While I know I could add WebMarkupContainers for the section and the
> h1
> > > to
> > > > my Java code and manually wire them together with an
> AttributeModifier
> > in
> > > > Wicket, I woud prefer to have some application wide code which
> > recognizes
> > > > this constellation in the html file and automatically generates and
> > > inserts
> > > > the IDs.
> > > >
> > > > Maybe somebody can push me in the right direction, how I could
> > accomplish
> > > > this with Wicket, if it's possible at all.
> > > >
> > > > Kind regards,
> > > > Daniel
> > > >
> > > > ---------------------------------------------------------------------
> > > > To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > > > For additional commands, e-mail: users-help@wicket.apache.org
> > > >
> > > >
> > >
> > > ---------------------------------------------------------------------
> > > To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > > For additional commands, e-mail: users-help@wicket.apache.org
> > >
> > >
> >
>
>
> --
> Become a Wicket expert, learn from the best: http://wicketinaction.com
>
Re: Re: Automatically insert generated html IDs in other places in html file
Posted by Martijn Dashorst <ma...@gmail.com>.
I think Daniel suggest that Wicket doesn't make /all/ id's unique, only
those that are owned by it by having a component attached to it. And even
then, when you explicitly setMarkupId() you are yourself responsible for
ensuring it is unique.
BarPanel.html:
<wicket:panel>
<h1 id="bar"></h1>
</wicket:panel>
BarPage.html:
<div wicket:id="panel1"></div>
<div wicket:id="panel2"></div>
BarPagel.java:
add(new BarPanel("panel1"));
add(new BarPanel("panel2"));
This would result in two h1 tags with the same HTML id. Wicket doesn't
modify the id magically.
Wicket (from what i know) doesn't support Daniel's usecase out of the box,
but Wicket does have the ability to act on tags if you make such affordance
yourself.
I suppose
<div wicket:aria-label="sect1">
<section wicket:aria-id="sect1">
Could be similarly implemented as the wicket:for attribute.
See AutoLabelTagHandler and AutoLabelTagResolver for more information.
Martijn
On Thu, Jun 30, 2022 at 10:41 PM Martin Grigorov <mg...@apache.org>
wrote:
> On Thu, Jun 30, 2022, 13:50 Daniel Radünz <ih...@gmx.de> wrote:
>
> > Thank you kindly both for your suggestions.
> >
> > @Martin Terra
> > I'm not sure I quite undstand what you mean. My hope was that I don't
> have
> > to add any of the involved components to the Java code of every single
> > panel. The example I've given is just one of many. We have many different
> > constellation with completly different html fragments but each of them
> has
> > the same problem, that somewhere in there the html ID of one html tag has
> > to be put into the html attribute of another html tag.
> >
> > @Martin Grigorov
> > The problem I'm having with doing it on the client with javascript or
> with
> > the IResponseFilter is that by that time I can only work on the fully
> > assembled html. If a Wicket page includes the same panel multiple times
> > though, I would already have the same html ID and the
>
>
> Wrong!
> Wicket makes sure that all ids in the page are unique.
>
> With jQuery / JSoup you could query all <section> elements which have a
> child of type <div> with "id" attribute. Iterate over them and add the aria
> attribute.
>
> same reference to it multiple times in the final html without a (bullet
> > proof) way to figure out which two elements ultimatively belong together.
> >
> > That's why I was hoping there would be a way to do this on a panel level,
> > maybe with a custom attribute. Something like
> > <section wicket:aria-labelledby="sectionheader">
> > <h1 wicket:auto-id="sectionheader">
> > </section>
> >
> > If I'd then have a page which has the same panel twice in it, Wicket
> would
> > take care of assinging unique IDs and also putting these generated unique
> > IDs in the corresponding attributes that reference them, resulting in
> > something like this:
> > <section aria-labelledby="sectionheader1">
> > <h1 id="sectionheader1">
> > </section>
> > <section aria-labelledby="sectionheader2">
> > <h1 id="sectionheader2">
> > </section>
> >
> > If there is something like the IResponseFilter but on a per component
> base
> > which would allow me to inspect and modify only the html fragment of a
> > component/panel it might work.
> >
> > Kind regards,
> > Daniel
> >
> >
> > Gesendet: Mittwoch, 29. Juni 2022 um 15:40 Uhr
> > Von: "Martin Grigorov" <mg...@apache.org>
> > An: users@wicket.apache.org
> > Betreff: Re: Automatically insert generated html IDs in other places in
> > html file
> > Hi,
> >
> > The easiest way I could imagine is with a short jQuery function that is
> > called on domready.
> >
> > If you need to do it on the server side then maybe with IResponseFilter.
> >
> > On Wed, Jun 29, 2022, 12:38 Daniel Radünz <ih...@gmx.de> wrote:
> >
> > > Hello everybody,
> > >
> > > I'm wondering if there is a way in Wicket to generate unique html IDs
> and
> > > to then add them in other places in the html, without having to write
> any
> > > boiler plate code in each panel that I have.
> > >
> > > For example in the following panel I need the ID of the h1 tag to be
> put
> > > into the aria-labelledby attribute in the section tag.
> > > <wicket:panel>
> > > <section class="card" aria-labelledby="sectionheader">
> > > <div class="card-header"><h1 id="sectionheader">Lorem
> > > ipsum dolor sit amet</h1></div>
> > > <div class="card-content">Content ...</div>
> > > </section>
> > > </wicket:panel>
> > >
> > > Hardwiring it like in this example of course won't work if I use the
> same
> > > panel class multiple times within a page due to duplicate html IDs.
> > >
> > > While I know I could add WebMarkupContainers for the section and the h1
> > to
> > > my Java code and manually wire them together with an AttributeModifier
> in
> > > Wicket, I woud prefer to have some application wide code which
> recognizes
> > > this constellation in the html file and automatically generates and
> > inserts
> > > the IDs.
> > >
> > > Maybe somebody can push me in the right direction, how I could
> accomplish
> > > this with Wicket, if it's possible at all.
> > >
> > > Kind regards,
> > > Daniel
> > >
> > > ---------------------------------------------------------------------
> > > To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > > For additional commands, e-mail: users-help@wicket.apache.org
> > >
> > >
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > For additional commands, e-mail: users-help@wicket.apache.org
> >
> >
>
--
Become a Wicket expert, learn from the best: http://wicketinaction.com
Re: Re: Automatically insert generated html IDs in other places in html file
Posted by Martin Grigorov <mg...@apache.org>.
On Thu, Jun 30, 2022, 13:50 Daniel Radünz <ih...@gmx.de> wrote:
> Thank you kindly both for your suggestions.
>
> @Martin Terra
> I'm not sure I quite undstand what you mean. My hope was that I don't have
> to add any of the involved components to the Java code of every single
> panel. The example I've given is just one of many. We have many different
> constellation with completly different html fragments but each of them has
> the same problem, that somewhere in there the html ID of one html tag has
> to be put into the html attribute of another html tag.
>
> @Martin Grigorov
> The problem I'm having with doing it on the client with javascript or with
> the IResponseFilter is that by that time I can only work on the fully
> assembled html. If a Wicket page includes the same panel multiple times
> though, I would already have the same html ID and the
Wrong!
Wicket makes sure that all ids in the page are unique.
With jQuery / JSoup you could query all <section> elements which have a
child of type <div> with "id" attribute. Iterate over them and add the aria
attribute.
same reference to it multiple times in the final html without a (bullet
> proof) way to figure out which two elements ultimatively belong together.
>
> That's why I was hoping there would be a way to do this on a panel level,
> maybe with a custom attribute. Something like
> <section wicket:aria-labelledby="sectionheader">
> <h1 wicket:auto-id="sectionheader">
> </section>
>
> If I'd then have a page which has the same panel twice in it, Wicket would
> take care of assinging unique IDs and also putting these generated unique
> IDs in the corresponding attributes that reference them, resulting in
> something like this:
> <section aria-labelledby="sectionheader1">
> <h1 id="sectionheader1">
> </section>
> <section aria-labelledby="sectionheader2">
> <h1 id="sectionheader2">
> </section>
>
> If there is something like the IResponseFilter but on a per component base
> which would allow me to inspect and modify only the html fragment of a
> component/panel it might work.
>
> Kind regards,
> Daniel
>
>
> Gesendet: Mittwoch, 29. Juni 2022 um 15:40 Uhr
> Von: "Martin Grigorov" <mg...@apache.org>
> An: users@wicket.apache.org
> Betreff: Re: Automatically insert generated html IDs in other places in
> html file
> Hi,
>
> The easiest way I could imagine is with a short jQuery function that is
> called on domready.
>
> If you need to do it on the server side then maybe with IResponseFilter.
>
> On Wed, Jun 29, 2022, 12:38 Daniel Radünz <ih...@gmx.de> wrote:
>
> > Hello everybody,
> >
> > I'm wondering if there is a way in Wicket to generate unique html IDs and
> > to then add them in other places in the html, without having to write any
> > boiler plate code in each panel that I have.
> >
> > For example in the following panel I need the ID of the h1 tag to be put
> > into the aria-labelledby attribute in the section tag.
> > <wicket:panel>
> > <section class="card" aria-labelledby="sectionheader">
> > <div class="card-header"><h1 id="sectionheader">Lorem
> > ipsum dolor sit amet</h1></div>
> > <div class="card-content">Content ...</div>
> > </section>
> > </wicket:panel>
> >
> > Hardwiring it like in this example of course won't work if I use the same
> > panel class multiple times within a page due to duplicate html IDs.
> >
> > While I know I could add WebMarkupContainers for the section and the h1
> to
> > my Java code and manually wire them together with an AttributeModifier in
> > Wicket, I woud prefer to have some application wide code which recognizes
> > this constellation in the html file and automatically generates and
> inserts
> > the IDs.
> >
> > Maybe somebody can push me in the right direction, how I could accomplish
> > this with Wicket, if it's possible at all.
> >
> > Kind regards,
> > Daniel
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > For additional commands, e-mail: users-help@wicket.apache.org
> >
> >
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
Aw: Re: Automatically insert generated html IDs in other places in html file
Posted by Daniel Radünz <ih...@gmx.de>.
Thank you kindly both for your suggestions.
@Martin Terra
I'm not sure I quite undstand what you mean. My hope was that I don't have to add any of the involved components to the Java code of every single panel. The example I've given is just one of many. We have many different constellation with completly different html fragments but each of them has the same problem, that somewhere in there the html ID of one html tag has to be put into the html attribute of another html tag.
@Martin Grigorov
The problem I'm having with doing it on the client with javascript or with the IResponseFilter is that by that time I can only work on the fully assembled html. If a Wicket page includes the same panel multiple times though, I would already have the same html ID and the same reference to it multiple times in the final html without a (bullet proof) way to figure out which two elements ultimatively belong together.
That's why I was hoping there would be a way to do this on a panel level, maybe with a custom attribute. Something like
<section wicket:aria-labelledby="sectionheader">
<h1 wicket:auto-id="sectionheader">
</section>
If I'd then have a page which has the same panel twice in it, Wicket would take care of assinging unique IDs and also putting these generated unique IDs in the corresponding attributes that reference them, resulting in something like this:
<section aria-labelledby="sectionheader1">
<h1 id="sectionheader1">
</section>
<section aria-labelledby="sectionheader2">
<h1 id="sectionheader2">
</section>
If there is something like the IResponseFilter but on a per component base which would allow me to inspect and modify only the html fragment of a component/panel it might work.
Kind regards,
Daniel
Gesendet: Mittwoch, 29. Juni 2022 um 15:40 Uhr
Von: "Martin Grigorov" <mg...@apache.org>
An: users@wicket.apache.org
Betreff: Re: Automatically insert generated html IDs in other places in html file
Hi,
The easiest way I could imagine is with a short jQuery function that is
called on domready.
If you need to do it on the server side then maybe with IResponseFilter.
On Wed, Jun 29, 2022, 12:38 Daniel Radünz <ih...@gmx.de> wrote:
> Hello everybody,
>
> I'm wondering if there is a way in Wicket to generate unique html IDs and
> to then add them in other places in the html, without having to write any
> boiler plate code in each panel that I have.
>
> For example in the following panel I need the ID of the h1 tag to be put
> into the aria-labelledby attribute in the section tag.
> <wicket:panel>
> <section class="card" aria-labelledby="sectionheader">
> <div class="card-header"><h1 id="sectionheader">Lorem
> ipsum dolor sit amet</h1></div>
> <div class="card-content">Content ...</div>
> </section>
> </wicket:panel>
>
> Hardwiring it like in this example of course won't work if I use the same
> panel class multiple times within a page due to duplicate html IDs.
>
> While I know I could add WebMarkupContainers for the section and the h1 to
> my Java code and manually wire them together with an AttributeModifier in
> Wicket, I woud prefer to have some application wide code which recognizes
> this constellation in the html file and automatically generates and inserts
> the IDs.
>
> Maybe somebody can push me in the right direction, how I could accomplish
> this with Wicket, if it's possible at all.
>
> Kind regards,
> Daniel
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Automatically insert generated html IDs in other places in html file
Posted by Martin Grigorov <mg...@apache.org>.
Hi,
The easiest way I could imagine is with a short jQuery function that is
called on domready.
If you need to do it on the server side then maybe with IResponseFilter.
On Wed, Jun 29, 2022, 12:38 Daniel Radünz <ih...@gmx.de> wrote:
> Hello everybody,
>
> I'm wondering if there is a way in Wicket to generate unique html IDs and
> to then add them in other places in the html, without having to write any
> boiler plate code in each panel that I have.
>
> For example in the following panel I need the ID of the h1 tag to be put
> into the aria-labelledby attribute in the section tag.
> <wicket:panel>
> <section class="card" aria-labelledby="sectionheader">
> <div class="card-header"><h1 id="sectionheader">Lorem
> ipsum dolor sit amet</h1></div>
> <div class="card-content">Content ...</div>
> </section>
> </wicket:panel>
>
> Hardwiring it like in this example of course won't work if I use the same
> panel class multiple times within a page due to duplicate html IDs.
>
> While I know I could add WebMarkupContainers for the section and the h1 to
> my Java code and manually wire them together with an AttributeModifier in
> Wicket, I woud prefer to have some application wide code which recognizes
> this constellation in the html file and automatically generates and inserts
> the IDs.
>
> Maybe somebody can push me in the right direction, how I could accomplish
> this with Wicket, if it's possible at all.
>
> Kind regards,
> Daniel
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>