Hi, You may want to read http://wicketinaction.com/2012/07/wicket-6-resource-management/ It is a 12 years old article but still valid!
Martin On Fri, Aug 23, 2024 at 9:08 AM Stéphane V <sva...@gmail.com> wrote: > The PanelPanel CSS is now on top and the parent.. > ________________________________ > De : Stéphane V <sva...@gmail.com> > Envoyé : vendredi 23 août 2024 08:06 > À : users@wicket.apache.org <users@wicket.apache.org> > Objet : RE: Sort the header items > > Hello Bas, thank you for your reply. > > Sorry, but I don't understand. > > Below the resulting order after the first interaction on the ajax button > adding the last PanelPanel CSS. My CSS and JS are always declared in the > renderHead method of the component (pages and panels). > I can understant the dependency order with an inheritage in Java, but > about CSS and JS the reasons are different: the cascading from CSS is not > rerspected because the parent is overiding the child and more specific > declaration. > > <head> > <!-- From the panels --> > <link rel="stylesheet" type="text/css" > href="../wicket/resource/org.ma.dashboard.components.overview.panels.OverviewPanel/OverviewPanel-ver-1724044527323.css"> > <script type="text/javascript" > src="../wicket/resource/org.ma.dashboard.components.overview.panels.OverviewPanel/OverviewPanel-ver-1724354734488.js"></script> > <script type="text/javascript" > src="../wicket/resource/org.apache.wicket.resource.JQueryResourceReference/jquery/jquery-3.7.1-ver-1722411717821.js"></script> > <script type="text/javascript" > src="../wicket/resource/org.apache.wicket.ajax.AbstractDefaultAjaxBehavior/res/js/wicket-ajax-jquery-ver-1722411717821.js"></script> > > <!-- From the abstract page --> > <meta name="viewport" content="width=device-width, initial-scale=1.0"> > <link rel="stylesheet" type="text/css" > href="/dashboard/resources/theme/org.ma.dashboard.theme.preset/theme.css"> > <script type="text/javascript" > src="/dashboard/resources/theme/org.ma.dashboard.theme.preset/bootstrap.js"></script> > <link rel="stylesheet" type="text/css" > href="../wicket/resource/org.ma.dashboard.AbstractDashboardPage/AbstractDashboardPage-ver-1723739558518.css"> > <link rel="stylesheet" type="text/css" > href="../wicket/resource/org.ma.dashboard.pages.DashboardIndexPage/DashboardIndexPage-ver-1723824628472.css"> > > <!-- From Ajax after the first interaction --> > <link rel="stylesheet" type="text/css" > href="../wicket/resource/org.ma.dashboard.components.overview.panels.PanelPanel/PanelPanel-ver-1724353849200.css"></head> > > And now the result after the first refresh of the page: > > <head> > <!-- From the panels --> > <link rel="stylesheet" type="text/css" > href="../wicket/resource/org.ma.dashboard.components.overview.panels.PanelPanel/PanelPanel-ver-1724353849200.css"></head> > <link rel="stylesheet" type="text/css" > href="../wicket/resource/org.ma.dashboard.components.overview.panels.OverviewPanel/OverviewPanel-ver-1724044527323.css"> > <script type="text/javascript" > src="../wicket/resource/org.ma.dashboard.components.overview.panels.OverviewPanel/OverviewPanel-ver-1724354734488.js"></script> > <script type="text/javascript" > src="../wicket/resource/org.apache.wicket.resource.JQueryResourceReference/jquery/jquery-3.7.1-ver-1722411717821.js"></script> > <script type="text/javascript" > src="../wicket/resource/org.apache.wicket.ajax.AbstractDefaultAjaxBehavior/res/js/wicket-ajax-jquery-ver-1722411717821.js"></script> > > <!-- From the abstract page --> > <meta name="viewport" content="width=device-width, initial-scale=1.0"> > <link rel="stylesheet" type="text/css" > href="/dashboard/resources/theme/org.ma.dashboard.theme.preset/theme.css"> > <script type="text/javascript" > src="/dashboard/resources/theme/org.ma.dashboard.theme.preset/bootstrap.js"></script> > <link rel="stylesheet" type="text/css" > href="../wicket/resource/org.ma.dashboard.AbstractDashboardPage/AbstractDashboardPage-ver-1723739558518.css"> > <link rel="stylesheet" type="text/css" > href="../wicket/resource/org.ma.dashboard.pages.DashboardIndexPage/DashboardIndexPage-ver-1723824628472.css"> > > The PanelPanel CSS is not on top and the parent (OverviewPanel CSS) can > override the CSS. For me, it's trange. And the theme (using Bootstrap) is > overriding a style inside the PanelPanel.css and I have to add !important > to be sure I can keep the style declared in PanelPanel.css. > > //Stef > ________________________________ > De : Bas Gooren <b...@iswd.nl> > Envoyé : mardi 20 août 2024 21:41 > À : users@wicket.apache.org <users@wicket.apache.org> > Objet : Re: Sort the header items > > Hi Stephane, > > The easiest way is to ensure you define the dependencies on the child > items. Then wicket will always render the parent (dependencies) before the > children. > > Sounds to me like the reason for wanting things rendered in a certain > order is precisely that: dependencies. > > For Ajax rendered items it shouldn’t matter: any new JavaScript and css > will always be added and evaluated at the end. > > // Bas > > Verstuurd vanaf mijn iPhone > > > Op 20 aug 2024 om 19:49 heeft Stéphane V <sva...@gmail.com> het > volgende geschreven: > > > > Hello, > > > > I'm looking for a way to sort header items like CSS or JavaScript files. > I'm using renderHead() to add items to the head section, and I'm also > utilizing inheritance for my pages. The order is perfect for the pages: the > parent items come first, followed by the children items. > > > > However, the problem arises with panels. Their header items are created > before the page's items, whereas I would like them to appear after the page > items. Additionally, if I add a panel using Ajax, its header items are > added at the end. > > > > How can I control the order of these items? Specifically, I want the > page items to appear first, followed by the panel items. > > > > Thank you. > > --------------------------------------------------------------------- > To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org > For additional commands, e-mail: users-h...@wicket.apache.org > >
