LifeRay form validation using Alloy UI - liferay

I use LifeRay 6.1.2. And it have built-in Alloy UI 1.5. framework. So I try to reproduce this form validation example (I copied all code), but it don't work as expected (error labels in DOM, but they are don't visible in form (see EDIT1)):
Expected result is (you can try yourself live example using link provided above):
Where is problem? How to solve it? Thanks.
EDIT1:
After some research, I realized that if I delete aui-form-validator-message CSS class from error message's DIV tag (it generated by LifeRay, I'm not adding it), then error message become visible. Strange..

You should post your own code, or it's difficult to answer.
Anyway if you want you could try the aui validator tag for example:
<aui:input name="name" value="${name}" label="name">
<aui:validator name="required" errorMessage="your-message-here"></aui:validator>
</aui:input>
learn more # http://drewblessing.com/blog/-/blogs/34509
Hope it helps!

I think you have not used the tag in your code.
<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script>
Paste this and check.

Related

How to avoid duplication documentation with angular

I'm writing a documentation with angular.
For now, i duplicate twice the code. Once in the button.component.html to make the componenbt appear, and the other is injected from the button.component.ts as a string so it's not interpreted.
The goal is to show the result you will get if you tips the code contain in pre balise.
I need to avoid these duplication cause when a component change, i need to modify twice the code.
I first have use to simulate include comportement but it's not working as the final content is the generated content and not the original content.
Then i checked how angular material perform for their documentation, and it's same to be a bit tricky and complicated for me has they inject their component as dependancies.
I'm asking if there is a sample way to avoid this duplication content and if someone have faced the same issue.
I have only one idea, it's to run a shell commande in the end of ng build with webpack and node, and get the content of the target block and inject directely in the target balise.
Sample :
<div class="my-5" data-source="myButton">
<button mat-button>
<mat-icon class="icon-left">help</mat-icon>
Support center
</button>
</div>
<code data-target="myButton"></code>
But i'm not very sur about that solution.
Thanks in advance.
Kevin
For people who have face the same problem, there is the module you have to use :
exemplify-angular
It's do the job perfectly.
Kevin

Is it possible to add some arrows to ms2gallery and use it as carousel?

I have project on modx and there is used ms2gallery to show images. And customer want to add some arrows(prev, next) to use this ms2gallery as carousel or slider. Is it possible to build-in this functional into ms2gallery? If not could you advice something to solve this task?
You can use the pdoPage snippet for just this purpose. Here's the example form the ms2Gallery documentation:
[[!pdoPage?
&element=`ms2GalleryResources`
&parents=`0`
&tpl=`#INLINE
<p>
[[+pagetitle]]
<img src="[[+120x90]]" title="[[+120x90.name]]" />
</p>
`
&typeOfJoin=`inner`
&includeThumbs=`120x90`
&includeOriginal=`1`
]]
[[!+page.nav]]
You will need to add some extra properties to the snippet call to get more than one result. All the available options and several examples are documented on the pdoPage readme.

Hide Sign Out Link in Liferay 6.2 Dockbar

In Liferay 6.1, we created a hook to hide the sign out link in the dockbar. However, when I look at the code for 6.2, I see the following:
<c:if test="<%= themeDisplay.isShowSignOutIcon() %>">
<aui:nav-item cssClass="sign-out" href="<%= themeDisplay.getURLSignOut() %>" iconCssClass="icon-off" label="sign-out" />
</c:if>
No matter how much I google, I can't find any reference to themeDisplay.isShowSignOutIcon(), aside from the API reference, which does me no good, as it is not commented at all. I did find the page that discusses the native LR theme properties and apparently determining whether to show/hide a sign out linkn is not one of the native theme properties.
Does anyone know if you can set the theme itself to show/hide the sign out link and how you would go about doing it?
I too analyzed ServicePreAction code, and found that all this code does is:
checks if the user is logged in or not
if yes, shows 'sign out' link, not otherwise
You can simply create a hook to override html/portlet/dockbar/view_user_account.jspf to either remove that code snippet from this jsp to hide it for all scenarios OR modify the condition to show/hide as per your requirements.
The only place that I've found where ThemeDisplay.setShowSignOutIcon is called is in ServicePreAction (linking master branch here). That being said, it looks like it's not configurable, but you can easily create another ServicePreAction in a hook. Please see an example in this plugin (referencing portal.properties and liferay-hook.xml, but naturally there's also code that I'm sure you'll find. It's not big)
Another option - if you just want to unconditionally get rid of the link: Use CSS to hide it. Yes, it will still be there, but any way you choose to hide the link, the actopm at /c/portal/logout will still be available...

Selecting parent elements with WebdriverJS

I'm trying to create some scripts which require moving through a lot of on-the-fly HTML with random IDs. They require getting the parents of an element - but I'm not sure how to implement this in WebdriverJS.
If I access the element I want via a console, I can do the following to get it;
document.querySelector('span[email="noreply#example.com"]').parentNode.parentNode
Is there a way to do this in WDJS? I've looked and can't see anything obvious - it's specifically the parent stuff I'm having issue with. I saw that a possible solution may be xPath however I'm unsure of syntax having never used it before.
Thanks in advance!
I don't know the syntax of WebDriverJS. But the XPath is as below, you need a way to fit it in somewhere.
This is based on your CSS Selector, so please show HTML if needed.
.//span[#email='noreply#example.com']/../..
For example, if you have HTML like this
<div>
<div>
<span email="noreply#example.com">Contact me</span>
</div>
</div>
You can avoid using .. to go up.
.//div[./div/span[#email='noreply#example.com']]
If you have more levels to look up, another handy method would be using ancestor from XPath Axes.
Also, as #sircapsalot brought up, CSS selectors spec doesn't support parent selecting, so XPath is the only way to go, unless you inject JS.

JSF Navigation with Different CSS Class for Current/Active Path

I'm trying to create a menu template in JSF where the link for the current directory has a different "current" or "active" class. The code currently looks like:
<ul>
<li><h:outputLink value="#{request.contextPath}/a/">A</h:outputLink></li>
<li><h:outputLink value="#{request.contextPath}/b/">B</h:outputLink></li>
<li><h:outputLink value="#{request.contextPath}/c/">C</h:outputLink></li>
</ul>
I'm thinking of using something like styleClass="#{(thisDir == currentDir) ? currentLinkClass : normalLinkClass}". But how do I get the current path? Is this even correct, or is there a better way to do this?
Also, I want the links to base on the current path, not just the page. For example, myapp/a/1.jsf and myapp/a/2.jsf (that is, myapp/a/*.jsf) should trigger the active class for the A link. (I hope my explanation is clear.) Is this possible? How should this be done?
Thank you very much!
You can use #{request.requestURI} to get the current request URI. You can if necessary use several EL functions from JSTL fn taglib to do some string comparisons/manipulations in EL.
Your proposed EL styleClass suggestion is perfectly fine. There is no other easy way anyway. Best optimization which you could do so far is to render those links in a loop by an <ui:repeat> so that code duplication is at least eliminated.
You can also try this approach which uses #{view.viewId}:
<h:outputLink
styleClass="#{(view.viewId.equals('/admin/authors.xhtml')) ? 'active' : 'inactive'}"
value="authors.xhtml">Text</h:outputLink>

Resources