New Liferay Faces release - Portal components

Technical Blogs 8 avril 2015 Par Juan Gonzalez Staff

Hi everyone!

As you may know there are many exciting things that had been done so far in the last year for Liferay Faces.

This is the first of a blog series about all of these improvements and new features that you will see in the next weeks, when GA release shows up.

I will start this series explaining the new features and improvements from the Liferay Faces Portal components.

LIFERAY FACES: PORTAL COMPONENTS

Maybe you are a JSF developer. You may have discovered all great features/framework that Liferay brings to your hands for implementing all common functionality that many software projects have. But at the same time you would like your portlets to look like same portlets when developing using Liferay MVC and JSP and leveraging all the advantages these have (responsiveness, Liferay theme support..).

In Liferay Faces we had the key goal of letting JSF developers the same tools for creating the same portlet apps without losing any important component. After looking at these screenshots you will understand what I am talking about:

Both portlets are completely different in terms of used technologies. First one was created using Liferay MVC and JSP (using well known Liferay taglibs). Second one was created using Liferay Faces 4.2-m3-SNAPSHOT and JSF 2.2. Looks great doesn’t it?

But how is this possible? One of the coolest features in new Liferay Faces version is rendering portal tags natively. What does it mean? Instead of “simulating” the tag rendering content (by duplicating the html generated) the tag is rendered and the generated markup is written to a string-capturing implementation of JspWriter. Then a JSF Renderer writes this content. The concept is is illustrated by the following simple diagram:

So, doing this way, Liferay Faces ensures that content will be the exactly the same as if you were actually using the Liferay Portal JSP taglibs. Another advantage of capturing the generated markup via the JspWriter, is that is provides us with the opportunity to process that text and adding more features that those components didn’t have originally in Liferay (eg: AJAX).

Well, now that you know how this works, it’s time to review the new Liferay Faces portal components:

<portal:nav> and <portal:navBar>

<portal:nav> uses <aui:nav> for rendering the markup. If you already used it in Liferay portal, you may know this component can be responsive and be rendered like this in a mobile device (used as a child of portal:navBar):

but with the advantages of using JSF (AJAX without struggling with complex javascript). If you want more info you can go to the portal:nav showcase.

<portal:inputRichText>

Probably one of the things used many times in a webapp project is a rich text editor. As you may know, Liferay already has one already built-in ready to use, which can be configurable to some extent through portal-ext.properties.

One of the advantages of using Liferay’s editor is the Liferay’s document library integration out of the box, so you can leverage the advantage of using documents stored in Liferay without any additional development.

But we haven’t finished with this component yet! To use the maximum JSF features as possible, some JSF AJAX events were added, such as “valueChange”, “blur” or “focus” to improve the possibilities of this component in your development efforts.

For more info, please go to portal:richInputText section in the showcase.

<portal:runtime>

This is one of the most number of times requested feature by Liferay Faces users. Thanks to this component, you could embed any portlet directly inside the rendered markup of a JSF portlet. You just have to set the portlet id (required) and you’re done!

You have some nice examples in showcase, like rendering a search portlet or rendering two journal articles. Very useful!

<portal:buttonRow> and <portal:header>

These are other components that will make your JSF portlets look exactly the same as “standard” Liferay MVC/JSP ones.


For example, portal:buttonRow will add some spaces for having a single row of buttons, and portal:header will add some formatted headers with the possibility of having a back button (with an icon) in the same format that Liferay does.

For more info please visit showcase for portal:buttonRow or portal:header.

<portal:inputSearch> and <portal:navBarSearch>

These are some of the greatest taglibs that exists in Liferay IMHO. They provide some simple components for having an h:inputText that fits perfectly as a search component in the top part of your custom portlets. Together with <portal:navBar> and <portal:navBarSearch> it provides a great responsive tool for any portlet, and can coexist perfectly with <portal:nav> together:

But in Liferay Faces we added more capabilities to the component that the portal one doesn’t natively: AJAX. You can use the standard <f:ajax> nested tag to leverage all the events that Liferay Faces makes available for developers, like “blur”, “change”, “click”, “keydown”, etc. and “search” (which is the default). For more info please visit the portal:inputSearch demo in Liferay Faces showcase.

Much more to come…

In Liferay Faces team we hope you liked these new portal components and find them useful for your daily JSF portlets development. For any suggestion or feedback before the release, you can download the latest version from Liferay Faces SNAPSHOT repository and write them in Liferay Faces forums.

Please stay tuned for the next blog posts explaining the other new awesome components in this release!

Using existing Bootstrap themes in Liferay (Part II).

Technical Blogs 20 juillet 2014 Par Juan Gonzalez Staff

Hi again!

This is the second (and last) part of my blog series for using existing Bootstrap themes into Liferay 6.2. In my previous blog post I talked about using LESS files, and how to, by simply changing some text strings, make it useful for a Liferay theme.

In this post I'll tell you how to use two of the available Bootstrap theme generators. So, as you may have noticed, you don't even have to know about bootstrap development for creating your own customizing themes after reading this post. Looks good, isn't it? laugh

As what it seems, the bootstrap generators creates a complete bootstrap css file. This means that the downloaded css is ready to use, and we have to override the bootstrap css file that is included in Liferay with this one. This shouldn't cause any big issue in our theme if we are using Bootstrap 2.3.2, but, as we will see later, it's advisable to make some adjustments in our theme to make it work perfectly fine.

Hint: you can use these steps when having this text in its css header:

 * Bootstrap v2.3.2
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
I'll be using examples from these theme generators:
  • Bootstrap Magic
  • BootswatchR

BOOTSTRAP MAGIC

In order to create themes from scratch, we are going to start with Bootstrap Magic theme generator (http://pikock.github.io/bootstrap-magic/2.3.2/app/index.html).

For testing purposes, we are going to change some colour (of course you can customize whatever variable you want). Select a different color in “Scaffolding” section, @linkColor variable, and click in “Apply” at the bottom of the page (in my case, I chose green colour):

Then, as we did in the previous blog post, change path for icons:

 

Then, just click in “Save CSS” and your css file will be downloaded.

Now we can create our Liferay theme as always, using _styled as a parent template. For overrriding Liferay bootstrap css, we have to create this file in theme directory:

  • _diffs/css/aui.css

and copy/paste the contents from the downloaded file there.

Now remove this string text ocurrences from _diff/css/aui.css_

http://pikock.github.io/bootstrap-magic/2.3.2/twitter-bootstrap/less/

So far so good! Unfortunately, the generated css seems to not adjust portlets properly when resizing, among with other issues:

 

How to solve this? Alloy-bootstrap to the rescue! 

Hint: you can use css from alloy-bootstrap project for adjusting your own bootstrap themes if there is any css issue in Liferay.

For overriding the responsive css part, and for future maintenance, we are going to create another file in theme:

  • _diffs/css/custom.css

In this file we are going to paste content from alloy responsive css file (https://github.com/liferay/alloy-bootstrap/blob/v2.2.2/lib/_responsive-767px-max.scss). Content would be as follows:

img {
   /* Responsive images (ensure images don't scale beyond their parents) */
   max-width: 100%;
   /* Part 1: Set a maxium relative to the parent */
   width: auto\9;
   /* IE7-8 need help adjusting responsive images */
   height: auto;
   /* Part 2: Scale the height according to the width, otherwise you get stretching */
   vertical-align: middle;
   border: 0;
   -ms-interpolation-mode: bicubic;
}

@media ( max-width : 767px) {
   .aui body {
    padding-left: 20px;
    padding-right: 20px;
   }

   .aui .navbar-fixed-top,.aui .navbar-fixed-bottom,.aui .navbar-static-top
    {
    margin-left: -20px;
    margin-right: -20px;
   }

   .aui .container-fluid {
    padding: 0;
   }

   .aui .dl-horizontal dt {
    float: none;
    clear: none;
    width: auto;
    text-align: left;
   }
   .aui .dl-horizontal dd {
    margin-left: 0;
   }
   .aui .container {
    width: auto;
   }
   .aui .row-fluid {
    width: 100%;
   }
   .aui .row,.aui .thumbnails {
    margin-left: 0;
   }
   .aui .thumbnails>li {
    float: none;
    margin-left: 0;
   }
   .aui [class*="span"],.aui .uneditable-input[class*="span"],.aui .row-fluid [class*="span"]
    {
    float: none;
    display: block;
    width: 100%;
    margin-left: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
   }

   .aui .span12,.aui .row-fluid .span12 {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
   }
   .aui .row-fluid [class*="offset"]:first-child {
    margin-left: 0;
   }
   .aui .input-large,.aui .input-xlarge,.aui .input-xxlarge,.aui input[class*="span"],.aui select[class*="span"],.aui textarea[class*="span"],.aui .uneditable-input
    {
    display: block;
    width: 100%;
    min-height: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
   }
   .aui .input-prepend input,.aui .input-append input,.aui .input-prepend input[class*="span"],.aui .input-append input[class*="span"]
    {
    display: inline-block;
    width: auto;
   }
   .aui .controls-row [class*="span"]+[class*="span"] {
    margin-left: 0;
   }
   .aui .modal {
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    width: auto;
    margin: 0;
   }
   .aui .modal.fade {
    top: -100px;
   }
   .aui .modal.fade.in {
    top: 20px;
   }
}

We can make other adjustments as well. For example, remove the icon showing next to portlet title, by adding this css snippet into _diffs/css/custom.css:

.aui .portlet-topper .portlet-title i,.aui .portlet-topper .portlet-title span img
   {
   display: none;
}

 

And one more improvement could be removing the duplicated portlet title, caused by accesibility text (add this css snippet into _diffs/css/custom.css too):
 
.hide-accessible {
   clip: rect(0, 0, 0, 0) !important;
   position: absolute !important;
    -webkit-transform: scale(0);
   -webkit-transform-origin-x: 0px;
   -webkit-transform-origin-y: 0px;
    *position: fixed !important;
    _position: absolute !important;
}
 
Now you can build and deploy your theme. You have now a custom bootstrap theme with your own colour ready to use in Liferay 6.2, Isn't wonderful? smiley
 

BOOTSWATCHR

This is another great bootstrap theme generator you can find in the Internet, where you can create Bootstrap v.2.3.2 themes.

Simply enter http://bootswatchr.com and click in "Create", which is located at the top of the page. 

Select “New” and then you can start configuring your theme. Before customizing the elements for the theme, you have to change to Bootstrap 2.3 first. For achieve that, select the “Settings” element in upper-left corner, and change the boostrap version, both for “Preview” and “Bootstrap Version” to 2.x and 2.3.2 respectively.

In left panel you’ll see the variables which you can customize for creating your theme. In this case, we can simply change these two variables:

@linkColor:          #<FILL_HERE_YOUR_COLOR>;
@navbarLinkColor:    #<FILL_HERE_YOUR_NAVBAR_COLOR>;

We should change icons path too, so we can use built-in FontAwesome from Liferay:

@iconSpritePath:          "../images/aui/glyphicons-halflings.png";
@iconWhiteSpritePath:     "../images/aui/glyphicons-halflings-white.png";

Any time you change any variable value, you can see how it looks like in the right.

When finished, just click in “Get Css” -> “Full” just next to “Settings” in upper-left corner.

Then, you can create your Liferay theme (from _styled template) and simply copy/paste the css into _diffs/css/aui.css and you’re done!
 
In this case you don’t have to use the responsive css snippet from the previous theme provider, but you can use the snippets for removing icon from portlet title or remove duplicated text in portlet title
 
This should be the final result:
 
 
 
 
So, now you have no reasons for not implementing your own bootstrap themes, even if you are not a frontend expert!
 
Hope you liked it! Enjoy Liferay theme development. wink
 

 

Using existing Bootstrap themes in Liferay (Part I).

Technical Blogs 14 juillet 2014 Par Juan Gonzalez Staff

Yes, it's true bootstrap give us a lot of improvements for creating themes. And is also true that since Liferay 6.2 we can take advantage of all this useful tools for developing your own themes in Liferay.

Looking for developing my own themes for some personal portals (yes, I like developing in Liferay in my free time too laugh) without being a frontend developer seemed more less complicated. Although there were some attempts for explaining it, the steps were not clear enough for a bootstrap newbie like me.

After some investigation (and with the help from Nate Cavanaugh, Ilyan Peychev and Chema Balsas, thanks very much mates!) I could finally put all pieces together and create some steps for integrating an existing bootstrap theme into Liferay sucessfully.

So after reading this 2-part blog series you would be able to get any already developed bootstrap theme and use it in Liferay. In fact, I used some of the existing bootstrap themes showcases and generators.

As what I've seen round there, there are two types of themes from bootstrap showcases/generators:

  1. Themes with downloadable LESS files.
  2. Themes with complete bootstrap (v. 2.3.2) CSS.

In this post I'll be explaining the steps for the first point. So here we go!

Themes from LESS files (http://bootswatch.com/2/)

When searching for bootstrap themes, you probably found bootswatch as one of the first results. It has some free themes and many themes for purchasing. As you can see just after opening the page, you are selecting Bootstrap v.2. This is required for Liferay 6.2, as it uses Bootstrap 2.3.2. But there are good news. Next Liferay version will be compatible with Bootstrap v3, although you have to stay with v.2.3.2 until new version is out.

Just choose one of your free or purchased theme, and download the variables.less and bootswatch.less files (in my case, I've chosen "Slate" free theme):

After downloading those files, follow these steps:

  1. Create theme using Liferay IDE or SDK command line  (styled + Velocity, if using Freemarker you will find this known error: https://issues.liferay.com/browse/LPS-47408).
  2. Create these new files, using _diffs directory as usual:
    1. _diffs/css/_aui_variables.scss
    2. _diffs/css/_aui_custom.scss
  3. Copy content from variables.less into _diffs/css/_aui_variables.scss
  4. Copy content from  bootswatch.less into _diffs/css/_aui_custom.scss
  5. Downloaded files are in LESS format. We need to convert them to SASS. There are some rules we can follow easily: https://github.com/m5o/sass-bootstrap/blob/master/README.md#sass-conversion-quick-tips. Below I write the replacement rules I've followed, using regex patterns and the replacement value.
  6. LESS replacements
    Pattern/string to replace Replacement
    @(?!(?:import|media|charset|font-|page|((-(moz|o|ms|webkit)-)?(keyframes|viewport)))) $
    spin\( adjust-hue(
    \.([\w-]+)(?=\() @include $1
    #gradient > @include vertical @include gradient-vertical
    #gradient > @include directional @include gradient-directional
    &- Replace with the css class where that element belongs to: (ex.:  &-inverse belongs to .navbar, so it should be .navbar-inverse)
  7. Change icon path in _aui_variables.scss:
$iconSpritePath:       "../images/aui/glyphicons-halflings.png";

$iconWhiteSpritePath:  "../images/aui/glyphicons-halflings-white.png";

 

Then, after executing "ant deploy" (or using Liferay IDE) your theme should deploy properly and result, if you chose the same theme as me, should be like following:

 

 

Looks good, isn't it? As you can see, you can have a bootstrap theme as a Liferay theme in only few minutes!

That's all for now! In next blog post I'll be showing how to generate a custom bootstrap theme from scratch using some of the available generators existing in Internet, and use it as a Liferay theme.

Hope you liked it, stay tuned! wink

Affichage de 3 résultat(s).