As an example, how could I render an AlloyUI scheduler which has the days in Japanese rather than English?
To access a localized version of a YUI 3 component you must use the YUI config object's lang property. When specifying a YUI sandbox, pass it the language code(s) which you want the component(s) to be localized for:
YUI({ lang : 'ja-JP' }).use( // your code here...
Here is a specific example with the AlloyUI scheduler:
YUI({ lang : 'ja-JP' }).use('aui-scheduler', function(Y) {
new Y.Scheduler({
boundingBox: '#myScheduler',
items: [],
render: true,
views: [new Y.SchedulerWeekView()]
});
});
You may also need to internationalize the strings attribute of your components yourself. For example, the Scheduler has many strings that are not internationalized by changing the YUI lang attribute. If you want to fully internationalize it, you'll need to translate each string.
For more information see the YUI Internationalization documentation (specifically the Requesting Preferred Languages section).
Related
We're using Liferay 7.3 (CE) and are trying to embrace the relatively new feature of "Content Pages" with "Page Fragments". We're able to develop page fragments that already include portlets (named "widgets" in the context of content pages), using the <lfr-widget-WIDGETALIAS> tag. So far, that works.
Now we're trying to prepare page fragments that embed portlets with special portlet configuration applied. For example, we want to prepare a page fragment that just shows an asset publisher portlet configured to list WebContent articles from a pre-defined category. The user should be able to just put that fragment onto the page without having to care about the configuration of the asset publisher portlet.
We did not find any direct way to achieve that -- our first guess that the configuration could be written as attributes or content of the <lfr-widget-...> tag was deterred by a hint in the liferay docs that there are no valid attributes or content to attach to that tag.
Does anybody have an inkling of an idea on how to achieve embedding portlets in page fragments with pre-defined portlet configuration applied? (including out-of-the-box Liferay portlets?)
I figured it out myself.
That one thing that the Fragment Editor does not tell you is that the HTML part of a fragment actually is interpreted as a Freemarker template, with the caveat that only Freemarkers alternative syntax is allowed.
That, in turn, means that Liferays taglibs are available, which means we can use the tag <liferay-portlet:runtime> (ported to freemarker alternative syntax, of course), which does accept a defaultPreferences attribute. Now we can just configure the portlet once, find its portletPreferences XML data in the DB (see table PortletPreferences), remove values we do not want to preconfigure and then just use the resulting preferences XML as a value for the defaultPreferences attribute of the <liferay-portlet:runtime> tag.
Care has to be taken for any IDs (e.g. if you want to preconfigure an AssetCategory filter). Better fetch the corresponding object from the corresponding service and get the ID from that object.
This example provides the HTML part for a page fragment that places an AssetPublisher onto the page, preconfigured to show 12 items (instead of the default 20). (CSS, JS and Configuration of the fragment is the default as given by the Page Fragment editor.)
<div class="fragment-12345">
[#assign assetPublisherPortletPreferences="<portlet-preferences>
<preference>
<name>delta</name>
<value>12</value>
</preference>
</portlet-preferences>" /]
[#liferay_portlet["runtime"]
instanceId="${fragmentEntryLinkNamespace}assets"
portletName="com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet"
defaultPreferences="${assetPublisherPortletPreferences}"
/]
</div>
Thank you for this, #orithena. You saved me a lot of trouble.
Another option, to achieve the same result but with simpler syntax, is to use the built-in freeMarkerPortletPreferences:
[#assign assetPublisherPortletPreferences=freeMarkerPortletPreferences.getPreferences({
"delta": "12",
} /]
I am trying to change the p:growl position of primefaces through the .ui-growl class to use position: sticky. However, since the component is rendered at the end in body, the relative behavior of the position does not work as I would like.
Is there any way to use the sticky position for this component?
Or some way to get the component to render where it is declared?
PrimeFaces 5.1;
Mojarra 2.1;
Disclamer: I tried this with the PF 7.0 showcase, but I think the basics also work with the 5.1 version.
You effectively have 4 options. The latter three all need you to inspect the javascript source of the component (which is open, so you can ALWAYS inspect it before asking questions, the java source is irrelevant here) and for the first solution it helps to see how the component works, but inspecting with a browser developer tool is sufficient (that is how I did it).
Basic analysis with or without looking at the source
This is a variant on your "Or some way to get the component to render where it is declared?". Since on the client side, it is all plain html, css and javascript, you can manipulate with al tools available on the client-side.
You can see that the main part of the grow is html technically rendered where it is declared. Check the PrimeFaces showcase and you'll see
<span id="j_idt700:growl" class="ui-growl-pl" data-widget="widget_j_idt700_growl" data-summary="data-summary" data-detail="data-detail" data-severity="all,error" data-redisplay="true"></span>
right inside the form where it also is in the xhtml. The javascript of the component creates the client side dom things, amongst which is the container that you see right before the end of the body (from the showcase)
<div id="j_idt700:growl_container" class="ui-growl ui-widget" style="z-index: 1002;"></div>
This last piece is html is where the individual growls are added to when they need to be rendered and hence the part that makes the component in most normal cases behave correctly but needs to be done differently in your case.
Solution 1, pure client-side component agnostic solution
Effectively this is as simple as moving this piece of html in the dom, see How to move an element into another element?.
In the online showcase I put the following jquery code in the browser developer tool console
$("#j_idt700\\:growl_container").prependTo(".layout-content");
And added the following css
position: sticky;
top: 10px;
float: right; // this is needed in the showcase, might not always be needed
And it worked.
The jquery should be put somewhere in your page where it runs after the component javascript is executed, so best is to do it right before the end of the body.
Keep in mind that the j_idt700 prefix is the dynamic id of the form in the showcase (it does not have a fixed id here), but you can also use different selectors based on the classes or whatever)
Solution 2, changing the source 'locally'
In the javascript source, you can see where the container is technically rendered
render: function() {
//create container
this.jq = $('<div id="' + this.id + '_container" class="ui-growl ui-widget"></div>');
this.jq.appendTo($(document.body));
//render messages
this.show(this.cfg.msgs);
},
Changing the this.jq.appendTo($(document.body)); in some way to have it appended to the current html node ('this'?) will make it work too. Regarding the overriding, you have two options
How do I find and/or override JavaScript in Primefaces component based on widgetVar?
Override a method from a Primefaces specific widget
Solution 3 Changing the source server side
Effectively you do the first part of #2 but patch the source and create a new custom PrimeFaces version
Solution 4 Make this feature avaiable for others too
What can be done here is to create a new attribute on the component and patch the source in some places so it is configurable to have the component behave as it is now or as sticky (they changed the existing 'sticky' attribute to 'keepAlive' in 7.0.x so sticky is avalable again ;-)). Of course this should be submitted as a patch then...
I have a localized website for different languages
Users can select which language to use in a profile and this will be applied beforePageLoad
using
context.setLocalString("en")
"en" is default to en-US i believe so the dates on the website is displayed in the US format so I learned that I can use instead.
context.setLocale(new Locale("en","gb"))
the problem with setLocal is that is does not update the HTML lang="en" attribute so event though the dates are correct after using setLocal the language file that is used is still the englisn(US) and not the english(uk) one. (i.e not html lang="en-gb")
so when users from england set their language to en-uk in thier profile they get the US language file.
So I tried to do both like this
context.setLocale(new Locale("en","gb"))
context.setLocalString("en-GB")
but then the setLocalString overrides the setLocalString and vice versa. so it looks like I can't use them both
Is there any way I can add code on beforePageLoad to make sure both the html lang attribute gets updated with correct language and my dates dispay in the correct format for the language set?
Instead of using the context object try to set the locale directly in the view root during beforeRenderResponse:
<xp:this.beforeRenderResponse>
<![CDATA[#{javascript:
facesContext.getViewRoot().setLocale( new java.util.Locale("en-GB") );
}]]>
</xp:this.beforeRenderResponse>
Or you can switch the locale in a phase listener as described here:
http://openntf.org/XSnippets.nsf/snippet.xsp?id=xpages-localization-setter
EDIT:
The locale setting is a little bit strange. You have to use an underscore between en and GB when using context.setLocaleString() (as Panu Haaramo answered), but this won't solve problem, because the ViewRootRender uses only the language setting for the generation of the lang attribute while rendering the HTML output.
This
new java.util.Locale("en", "GB").getLanguage()
will return en only, the "GB" is ignored.
Using the context.setLocaleString will bring the same result because this only parses the given string and converts it into a java.util.Locale which returns the same result as descibed.
But using an undefined Locale will generate a lowercased lang attribute. F.e. this
<xp:this.beforeRenderResponse>
<![CDATA[#{javascript:
facesContext.getViewRoot().setLocale( new java.util.Locale("en-Blabla-Blubb") );
}]]>
</xp:this.beforeRenderResponse>
generates the following HTML tag:
<html lang="en-blabla-blubb">
Thats why the code at top of this answer sets the lang attribute to en-gb, but this is still incorrect: It should set it to en-GB as described here: w3.org: Best Practices: Specifying Language in XHTML & HTML Content
Consider the following code
function populateLayout(scopeGroupId){
Liferay.Service.Portal.Layout.getLayouts(
{
groupId: scopeGroupId,
privateLayout: false
},
function(layouts){
for(var i=0;i<layouts.length;i++){
var layout = layouts[i];
alert(layout.name);
}
}
);
}
As you can see from the above Liferay's JSON service API to get all the layouts. I particularly need layout name to populate in a select box. I know that the name is stored as xml string to support different locales. I was wondering if there is javascript api to get just the name of the layout using this xml string and language id. There is a java api for doing the same as below. I need equivalent javascript API if any.
layout.getName(locale)
or
LocalizationUtil.getLocalization(String xml, String languageId)
I believe there is no such utility on Liferay's JavaScript libs.
Most of the times people need to do it in Liferay, they just parse the content in the server side and send the parsed content to the client. Frequently, the client only needs the value in the default locale; if it needs more, the developer finds a way to write it in HTML itself. See e.g. the input-localized tag where the developer writes the code to create a JS object directly in the output.
This makes sense: parsing XML is resource-costly so one would rather avoid it on client-side JavaScript. It may be even that there is a utility to do that in Liferay but I'd propose an alternative approach: just ask what you want to use in your JavaScript and write it in the HTML. For example, instead of writing the following JavaScript code
var names = Liferay.Util.Localization.nonExistentMethodToGetLocaleMap(layout.name);
for (var locale : names) {
alert(names[locale]);
}
decide in server-side which layouts to display and write the following JSP code:
Map<Locale, String> names = layout.getNameMap();
<script>
<% for (String name : names.values()) { %>
alert('<%= name %>');
<% } %>
</script>
Not much clear, I agree, but rather efficient.
Is there any built-in component for facebook like photo-tagging in JSF(Preferably in Primefaces). Or will it be in near future? I have googled a lot but found nothing -- I found a lot of jQuery photo taggers, but I am not good at jQuery, I am unable to submit tag values to the JSF in jQuery.
Well you could use the jQuery-photo-tagger (believe me, it's worth looking into jQuery) and use the PrimeFaces Ajax-API to make your ajax-calls. The basic functionality is:
PrimeFaces.ajax.AjaxRequest(url, config, parameters);
A little more complex example would be:
PrimeFaces.ajax.AjaxRequest(‘/myapp/createUser.jsf’,
{
formId:’userForm’,
,source:’userForm’
,process:’userForm’
,update:’msgs’
oncomplete:function(xhr, status) {alert(‘Done’);}
},
{
‘param_name1’:’value1’,
‘param_name2’:’value2’
}
);
For more information you can have a look at the User Guide: http://primefaces.org/documentation.html (starting from page 420)