If you thought August was being a bit boring in terms of news, here we come to spice it up with yet another new milestone release on our road to Liferay 7. And it’s not just any release. This will be the last milestone release of the series. Yup, you’ve heard right; the next release will be our first alpha release already. So this is a great moment to take a look at the ongoing work and give us your feedback through the Community Expedition program.
Milestone 7 includes +180 stories finished since M6 was released the last month. This entry will explore some of the most relevant features and improvements.
New default look and feel
It’s almost a tradition to have a new version of the default look and feel with each version, and Liferay 7 will not disappoint anyone in this respect :) This milestone finally contains a first version (not fully finished yet) of the new look and feel that will be included in Liferay 7.
First, the default theme for sites (known as classic) has been updated to provide make provide a modern, mobile friendly, flat and very clean look. We are also working on making this theme much more configurable, than in previous versions of Liferay, so that it can be easily reused out of the box. This is how it looks for a non logged-in user:
Ok, let me make a confession. It doesn’t look this good in this milestone just yet. Most of the technical aspects of the implementation are there, but we need to do quite some polishing on the CSS side.
Another relevant note is that we are also working on a new “portlet decoration”. That is, the “box” around each portlet (aka “application”) that is added to a page. This is not shown in the screenshot nor is included in the milestone, but will be available in the first alpha.
We also updated the look and feel for the administrative areas of the product. All of these areas can now be easily navigated using the new Product Menu (more on that later) and when accessed, makes very efficient use of screen real estate, as seen below:
As you can see it’s been designed to be mobile friendly (in fact it was designed with amobile first approach.
For those more technically oriented, you will be interested in knowing that these new themes are based on a new Bootstrap theme—of our own making—called Atlas, that implements our new and shiny Liferay Experience Language called Lexicon. But we’ll let you know more about that later on ;)
New Product and Control Menu
This is an improvement that has been in development for more than a year including hundredths of mockups and many user tests. The goal is to provide a versatile and flexible way to navigate through all areas of the product as well as access administrative functions in a way that doesn’t alter the desired design and is fully mobile friendly.
These functions were previously provided by a combination of the Dockbar and some navigation menus in Site Administration and Control Panel. In Liferay 7 we have organized things in three components (all of them mobile-friendly) with very clearly defined responsibilities:
Product Menu: Provides all the out-of-the box navigation throughout the administration tools of Liferay (or that you might install). That includes: all tools to administer a site, applications of the Control Panel, personal applications, etc. It also allows quick access to sites that the user is a member of or has administration permissions. The product menu also replaces the independent menus that Site Administration or Control Panel used to have. The Product Menu is invoked from a site by clicking a menu icon in the lower left corner.
Control Menu: Includes all the controls to edit or manage the currently displayed page. It includes buttons to: add portlets (aka applications) to the page, edit its configuration, preview on smaller devices, check staging, and a few other options.
User Portlet/Widget: Shows the “Login” link or the currently logged in user name and picture. It can be placed anywhere in the theme to fit any design and can be easily customized via CSS. This portlet replaces one remaining function of the Dockbar in a way that works much better with any design.
The following screenshot shows all three components; the User Portlet in the upper right corner, as it’s displayed in the default theme, the Control Menu at the bottom, and the Product Menu opened on the left side.
One very important aspect is that we have designed the Product Menu and the Control Menu to be fully extensible. Even fully replaceable if that’s what you need. We’ll have a DevCon session and specific documentation on how to do that.
Right now, all these components are, going through a series of usability tests, so expect some changes. We care about your input and feedback, as the user, so we would like you to give it a test run and let us know what you think.
Great image selection experience
One of the most common operations while authoring content—either formal content or collaboration content (blogs, wiki, …)—is adding images, videos or any other type of attachment. Previously, Liferay used to leverage a selector from the CKEditor project, but let’s just say that it had quite a bit of room for improvement. So much that replacing it was the #1 feature request on our Ideas board.
We discussed replacing it quite a while ago, but we wanted to create something really good, since this operation is so common. After many design sessions and usability tests, we are really happy to finally present the result. This selector will now be used throughout Liferay’s portlets, whenever the user can select an image or any other type of file.
An example of this selector is the selection of a cover image for a blog entry:
Images, can simply be dragged into that area or the user can click the blue button to select a file. And they will be presented with the image selector. The first view of the selector is always designed to display the images more appropriate for the given context. In this case, since the user is in blogs, it will show what we call “Blogs Images”—an images repository that every blog has, to allow authors to quickly add images.
But of course, it’s also possible to reach out to the full Documents & Media repository, which contains images (and other document types) reusable across applications:
Note that the image selector has full search integration, by using the text field in the upper right corner. But, if the user prefers, they can browse through any folders that exist.
Once the user has found the right image, clicking it opens an image preview. We want to make sure the user always picks the right picture:
From this view, the user can go back and forth to other images. In case the user didn’t pick the right image. The user can also go back to the list of images through this view.
Clicking “Add” will select the image right away; no intermediate dialog with complex and difficult to understand options. Whatever options may be needed, will be presented later, after the image is inserted.
One additional common need that we have identified, is when our customers have pre-existing repositories of images that they want to integrate in their Liferay based sites and portals. Previously, it was hard to do this type of integration for selecting an image; the resulting user experience was not very good.
In Liferay 7, this use case is very well covered through extensible image selector “Views”. Each “View” appears as a tab which will show up (or not) depending on the context. In fact, the tabs in the first screenshot (“Blogs Images”, “Documents & Media” and “Upload Image”) are all views; so it’s even possible to remove them if desired. Each “View” can be implemented as a small module following a well defined—and semantically versioned—API; which will make it easier to keep compatibility of views, even across Liferay versions.
We would actually like to promote the creation of 3rd party selection views that integrate from common sources of images such as Flicker, Google Images, Pinterest, etc. If you don’t have an App in the marketplace yet, this could be a good place to start.
Write ES2015 code which runs on IE9+, Safari, Chrome and Firefox (thanks to Babel).
Install 3rd party modules via Bower and use them in your Portlets from both JSP and JS files.
If you want more details to explore all the possibilities, don’t miss Iliyan Peychev’s blog entry Introducing ECMAScript 2015 support in Liferay Portal 7—it contains a video demo!!!
More features and functionality in AlloyEditor
This milestone contains a new version of everyone’s new favorite editor, AlloyEditor 0.4.0. First, tables can now have headers, which, combined with some bootstrap classes can help authors create very nice looking tables with little effort. Second, it’s now possible to paste images from external sources directly into the editor.
Additionally, there have been improvements in accessibility and it is now it is possible to use almost every CKEditor plugin, out of the box.
Document Management storages extracted as modules
Liferay’s Document Management service (used by Documents & Media as well as any other application that uses its file storage service) has been providing several underlying data stores. Since this milestone, each of these store are provided as separate OSGi modules:
This makes it much easier manage; leaving only the ones you need or replacing them with your own implementation.
If there are several data stores installed, as will be the case out of the box, a portal administrator will be able to use the configuration UI to select the ones that will be used.
Service Builder code now uses Declarative Services instead of Spring for dependency injection
As you might know Service Builder is our magic internal tool that autogenerates much of the code to implement backend services; it links the services together and exposes them locally and remotely. In the very first version of Service Builder, it generated EJBs, later we switched to Spring, and now we are taking the next step by using the much more dynamic “Declarative Services” (DS, for short).
Spring is still used for other useful functions such as transaction management, but for dependency injection, DS offers key functionality that all developers extending Liferay will benefit from: the ability to extend or replace components (“beans” in Spring’s terminology) at runtime from any module without restarting the service. This change will increase Liferay’s extensibility very significantly. Previously, this could only be done with an ext plugin, did not manage conflict resolution very well, and required restarting for any changes to take effect.
If you have been following the changes to Service Builder over the last months (or you are a fan of technical details) you may have noticed that up until now, Service Builder used OSGi Blueprint. Blueprint was initially developed by Spring Source to add dynamic capabilities to Spring based on OSGi and was later donated to the Eclipse Foundation. So it seemed like an obvious choice for us. However, we have since realized that the more modern model of Declarative Services was more flexible and was easier to understand and use for all developers.
That was our selection of features for this release, which, as you can see has updates for all tastes: designers, administrators, frontend developers and backend developers. However, keep in mind that this is just a selection of the improvements from our list of 180 new stories, but if you are interested in learning more, please check the full list.
We hope you like these improvements and the new version as a whole. If so, go ahead and download Milestone 7 now, from sourceforge, and let us know what you think, by joining the Liferay 7 Community Expedition.
From now on, we are focusing our attention on testing, testing, and testing, with the specific goal of making Liferay 7 the highest quality release ever. We are also putting a big effort into making upgrades—both data and code—as easy as possible. If you have a portal running on Liferay 6.2, get ready to perform a test upgrade to Liferay 7 soon (we’ll let you know when). You may also see some new features come in as new versions of the many modules that form Liferay 7, because, well, that’s one of the great benefits of having made Liferay so modular, right?
Esther Sanz & Jorge Ferrer