I am aware that including parsys with same path on the same Page/component causes authoring issues.
<cq:include path="par" resourceType="/apps/myproj/components/layout/parsys" />
<cq:include path="par" resourceType="/apps/myproj/components/layout/parsys" />
But I have a situation where I am forced to do this.
I am actually managing the path name using a variable parameter like this
<cq:include path="${tabs.nodeName}"
resourceType="/apps/myproj/components/layout/parsys" />
This is iterating in a forEach and the value of tabs.nodeName changes after every iteration.
But this loop itself is copied two times, once for desktop view with desktop classes and second time for mobile view with mobile css classes.
So in the end, I end up with two cq:includes
of the with same paths one for desktop another for mobile
<cq:include path="${tabs.nodeName}"
resourceType="/apps/myproj/components/layout/parsys" />
<cq:include path="${tabs.nodeName}"
resourceType="/apps/myproj/components/layout/parsys" />
How do I resolve this issue?
You can add scope identificator and use it as an additional element of the path. It can be semantical (desktop/mobile) or just numerical (zero-based, incremented on each step) if you don't know the context
<c:set var="context" value="desktop"/>
<cq:include path="${tabs.nodeName}-${context}"
resourceType="/apps/myproj/components/layout/parsys" />
I would advise either not rendering the mobile paragraph systems when in edit/design mode or setting the WCMMode to disabled when producing the mobile rendering of the paragraph systems. In this way you maintain the ability to author once and use twice without breaking the authoring interface.
Related
I am somewhat new to AEM and Sightly. I have written a 'page' component to house my page content. I have a number of devices with different CSS under /etc/designs/myapp as follows:
/etc/designs/myapp
- /128/style.css
- /240/style.css
etc etc..
Back in my page component, I have a number of different HTML files that I use to trigger the correct CSS via a Sling selector. For example:
/apps/myapp/components/page
- 128.html
- 240.html
The purpose of these files is to include the HTML <head> section with the CSS as an inline style (cannot link to external CSS due to device limitations).
The problem that I am having is that if I place 128/style.css inside the component itself, the include works. If I have it under /etc/designs/myapp, I can't get it to include properly. I have tried using ${currentDesign.path # appendPath='/128/style.css'} and I have tried explicitly referencing the whole path.
Here is an example of 128.html, under the page component:
<html>
<head><!--/*
*/--><div data-sly-include="/libs/wcm/core/components/init/init.jsp" data-sly-unwrap></div><!--/*
*/-->
<title>${currentPage.title}</title>
<div data-sly-unwrap data-sly-include="/etc/designs/myapp/128/style.css"></div>
</head>
<body class="main" role="document" data-sly-include="body.html"></body>
</html>
I realise that I need a <style></style> section wrapping any CSS that is included, but for now, I am just trying to get a page to include from /etc/designs.
Any help would be greatly appreciated.
From the definition of data-sly-include: https://docs.adobe.com/docs/en/aem/6-1/develop/sightly/block-statements.html#include
data-sly-include: Replaces the content of the host element with the markup generated by the indicated HTML template file (Sightly, JSP, ESP etc.) when it is processed by its corresponding template engine. The rendering context of the included file will not include the current Sightly context (that of the including file); Consequently, for inclusion of Sightly files, the current data-sly-use would have to be repeated in the included file (In such a case it is usually better to use data-sly-template and data-sly-call)
It's not meant to be used for the type of inclusion you are trying to do since you are not calling any renderer. I think you should use client libraries and include your CSS files only, here is the documentation about this : http://blogs.adobe.com/experiencedelivers/experience-management/sightly-clientlibs/
You should define a client library category for each of your styles and call the right clientlib when you need it using <meta data-sly-call="${clientLib.css # categories='category.style.128'}" data-sly-unwrap></meta>
Hope this helps.
We have a web application that its UI is based on GWT.
We are pretty satisfied from the technology, but we have one major problem: We get html files from our designer, and it takes a lot of time to integrate them into our GWT code.
Is there a quick way or rules to do that?
For instance, I would like to take the html, put it almost "as is" in a ui.xml file, and then start binding the components to UiBinder fields.
What is the quickest way to do that? What should I do with the CSS and JS files that I get?
I need some guidelines to make this conversion, so it will be quick & easy.
We have the same problem. It might be hard for a designer to get used to GWT widgets. But he'll have to forget about making HTML proof-of-concepts and using GWT directly.
We didn't overcame the difficulty. As a result, many GWT features are under-used (like CSSResources, or GWT-Bootstrap layout capabilities).
I would advise to have him learn the xml of GWT widget libraries.
You can also start by using GWT Designer. This way he can still do the design, learn the XML bit by bit, and you can still work on wiring the components.
Of course it is a slow process. People don't change old habits instantly.
Errai seems to fit your requirements.
Basically is uses regular HTML5 templates, binded to GWT logic.
"Create standard conform HTML5 templates or use existing HTML and CSS files to design your web and mobile applications."
http://errai.github.io/
Here is an example of a sign-in page:
<!DOCTYPE html>
<link rel=stylesheet href="css/TodoList.css">
<div data-field="main">
<h1>Get it done with Errai.</h1>
<div class=form>
<p class=error data-field=loginError>
Login failed. Please check that your email address and password were entered correctly.
</p>
<input type=text data-field=username placeholder="Email">
<input type=password data-field=password placeholder="Password">
<button data-field=loginButton>Sign In</button>
<p>New here? Sign up in seconds!</p>
</div>
</div>
source
(p.s. I've never used it, yet)
I'm trying to figure out exactly what css is included by the standard call to currentDesign.writeCssIncludes(pagecontext); found in headlibs.jsp. The documentation states simply that it is
Convenience method that writes the CSS include strings to the response.
Looking at what it seems to do, it will include /etc/designs/currentdesign.css which is built off the design components css, and /etc/designs/currentdesign/static.css, which is just a static file. But is this all that is will include?
In particular, what I'd like to do is include a clientLib-processed css file as part of my design. One way to do this is to manually build out the css include:
<link rel="stylesheet" href="<%= currentDesign.getPath() %>/myclientlib.css" />
But I'd prefer to let that get generated automatically, so that my designers have flexibility to structure the css files differently for different designs (i.e., for the "base" design they are fine with just a static.css file, but for the "fancy" design they want to use LESS css and break up the files more granularly). And it would be helpful to put design-specific css info with the components they affect, rather then needing to separate those.
You can use the <cq:includeClientLib> tag, combined with themes and/or categories, to mix and match bits of CSS.
But you may find it somewhat limiting; for instance, you can't specify a media attribute. If you need to do this, or your designers don't structure their CSS in a way that fits the themes/categories model, your fallback is the technique you've identified in your question, using <link> directly.
Update
An excellent question about themes! I have only seen them used in passing.
You can define a theme by just adding a new folder/node under /etc/designs/yourproject/clientlibs/themes, as a sibling to default.
You can pull in the clientlibs for a theme with the <cq:includeClientLibs> tag, perhaps under the control of some conditional logic. For instance, in one of my projects I have a theme called authoring which I only want to apply to the author instance; I pull it in with this code in headlibs.jsp:
<c:if test="${ (global['wcmmode'] eq 'EDIT') || (global['wcmmode'] eq 'PREVIEW') }">
<cq:includeClientLib theme="apps.myproject.authoring" />
</c:if>
I have not seen any documentation that would apply theme automatically to a particular subtree of the content tree, or based on the presence of a tag.
There is that cryptic statement "The theme name is extracted from the request." in the Adobe docs, which is backed up by this statement in the Sling docs, "ThemeResolverFilter Provides the Theme for the request. The theme is provided as a request attribute." So perhaps tacking &theme=apps.yourproject.foo onto a query string would apply that theme.
The list of CSS files is based on the property 'cq:designPath' of the page.
I need list of primefaces elements that need to be wraped by <h:form> in order to be updated by any action of <p:ajax>some primeface elements even if they have id and in <p:ajax update="thisID"> it still needs an <h:form> with an id in ordered to be updated so which elements need <h:form> and whick not
To the point, all components implementing the EditableValueHolder interface and the ActionSource interface needs to be enclosed in an UIForm component.
In the aforelinked Javadocs you can find in the "All Known Implementing Classes" indications which components implement them. If you look closely, then you'll notice that it are all input components like inputText, selectOneMenu, etc and command components like commandLink, commandButton, etc. In the PrimeFaces API documentation, for example the InputText which represents the <p:inputText> implements EditableValueHolder, so it should be placed in a form.
It's also exactly the same rerequirement as in plain vanilla HTML has, the HTML <input>, <select>, <textarea>, etc should go in a <form> in order to get value to be sent to the server side. HTML is also what JSF ultimately produces, after all.
As to updating elements by ajax, it's not true that the to-be-updated components needs to be placed inside a form. You can perfectly update content which is outside the current form. You can even update other forms.
This is a slight modification to PatrickT's Answer. You are able to update things outside the form also. But data you want to submit should be part of the form afaik.
<p:messages id="outsideForm" showDetail="true"></p:messages>
<h:form id="kalle">
<p:messages id="insideForm" showDetail="true"></p:messages>
<p:inputText required="true"></p:inputText>
<p:commandButton value="submit" update=":outsideForm,insideForm"/>
</h:form>
Every component submitting/receiving Content from/to a backing bean needs to be wrapped by <h:form>.
So everything you want to update or every Button / Link setting something needs to be inside a form. Also this isn't a Primefaces thing. This rules apply for normal JSF too.
The Facebook comments count can be done in three different ways: (without directly using JS)
<fb:comments-count href="http://example.com" />
<iframe src="http://www.facebook.com/plugins/comments.php?href=example.com" />
<div class="fb-comments-count" data-href="http://example.com">0</div>
The issue, however, is that doing something like this messes things up:
<p><div class="fb-comments-count" data-href="http://example.com">0</div> comments</p>
...because a <div> is firstly, not valid inside a <p> tag and secondly, looks wrong (though this could be fixed with CSS).
Basically, my question is: is there a way to do the above without using a <div> (a <span> for example), bearing in mind that I want to use the HTML5 method and (if possible!) want to avoid using javascript?
Clarification: I would like to avoid writing extra JS in the page simply because the MVC view currently looks nice and clean and I would prefer to keep it that way. Obviously, I'm still including the Facebook Connect library.
So, one solution would be to use a DIV instead of a P as the outer element.