New Liferay Faces Release - Alloy Input Components

New Liferay Faces Release - Alloy Input Components

Juan and Vernon have already blogged about many exciting portal components and the amazing alloy:accordion component, so I want shine a spotlight an a few new and useful Alloy input components: alloy:inputDate, alloy:inputTime, and alloy:autoComplete.

alloy:inputDate and alloy:inputTime

alloy:inputDate and alloy:inputTime were incredibly difficult components to create because of the nature of Java Dates and timezones. However, our pain is your gain, because these components will help you avoid dealing with the rough edges of Java Dates and TimeZones.

alloy:inputDate

alloy:inputDate is a combination of the JSF h:inputText (or HtmlInputText) and AlloyUI's datePicker. Because alloy:inputDate is an h:inputText, it incorporates all the features of h:inputText, but it includes many additional features for validating, submitting, and selecting dates. alloy:inputDate features built-in validation of date Strings and Java Dates (with minDate and maxDate attributes), a built-in f:convertDateTime/DateTimeConverter, and a clickable pop-up calendar for date selection. Because the pop-up calendar is an AlloyUI Datepicker, it integrates perfectly with the Liferay theme:

alloy:inputDate	liferay-ui:input-date

Similarly, alloy:inputDate will automatically use the locale set by Liferay Portal (but you can specify a different locale if necessary). Lastly, alloy:inputDate can be be triggered by input focus, button click, or both.

alloy:inputTime

Similar to alloy:inputDate, alloy:inputTime is an AlloyUI Timepicker attached to an h:inputText. So, it has many features similar to alloy:inputDate: localization, built-in conversion, multiple triggers, minTime/maxTime validation, theme integration, and a pop-up for selecting times. The main difference between alloy:inputDate and alloy:inputTime is that alloy:inputTime can also complete your typed results with a client-side filter.

alloy:autoComplete

alloy:autoComplete is a full-featured auto-complete component which has client-side filtering, server-side filtering, delayed filtering, completion item highlighting, and f:selectItem(s) integration. One other feature of alloy:autoComplete which sets it apart from the competition is the built-in preset filtering. Including phraseMatch, charMatch, startsWith, subWordMatch, and wordMatch, the predefined filters work as either the server or client filters, so if you were planning on using a common filtering mechanism (such as phraseMatch), you can rely on the built-in filter and avoid writing it yourself.

These components are not yet production ready, but they are available for testing via the Liferay Faces Alloy 4.2 beta and the Liferay Faces Showcase. Also of note, all Liferay Faces Alloy components are tested to work in both webapp and portlet environments, so JSF webapp developers can take advantage of them as well.

[Daniele Baggio]

Hi,
i'm searching something similar to liferay-ui:input-localized taglib for Liferay Faces enviroment. Does it exists?
thx

[Kyle Joseph Stiemann]

Hi Daniele,
Currently we do not have a facelet component with similar functionality to liferay-ui:input-localized. We have an issue for creating a similar component (https://issues.liferay.com/browse/FACES-2458) which you can vote for. For now, you can try using portal:inputRichText (http://liferayfaces.org/showcase/-/component/portal/inputrichtext/general) or alloy:inputText (http://liferayfaces.org/showcase/-/component/alloy/inputText/general) and adding whatever localization functionality you need.