Liferay 6.2 Bootstrap support and alloy-bootstrap

[Moisés Belda, módosítva 10 év-val korábban]

Hi

I'm testing bootstrap theme development with new Liferay 6.2.0

I have seen that bootstrap javascript components/libraries (carrousell, collapse, dropdown) hasn't been included in 6.2.0 release.

alloy-bootstrap-2.3.2.zip file included in portal-web/third-party, only has bootstrap css files.

https://github.com/liferay/liferay-portal/tree/6.2.x/portal-web/third-party

But I see that alloy-bootstrap project has bootstrap js files for that components:

https://github.com/liferay/alloy-bootstrap/tree/master/js

Why is not included those libraries in 6.2.0?
How can I use bootstrap js / components in a theme for Liferay 6.2.0? Including manually those js?

Thanks

[M J, módosítva 10 év-val korábban]

I have been trying to create a custom theme in Liferay 6.2 based on Bootstrap 3.0. Liferay 6.2 shipped with Bootstrap 2.3.2 ( I don't know what Liferay Team was thinking about selecting v2.3.2 over version 3). On top of that, Liferay 6.2's bootstrap version uses the ugliest javascript framework called "AUI". I don't know why they abandoned jQuery and chose AUI!. And the funny thing is Bootstrap uses jQuery and Liferay Team had to "secretly" include jQuery inside AUI (like a wrapper) in order to work the bootstrap in Liferay. What a convoluted design? This is what happens if you choose the wrong technology (AUI over jQuery). We can see this kind of design selections happening through out Liferay. Velocity and Freemarker. Now Liferay is leaning towards Freemarker but they still have to support Velocity for legacy reasons. So, even if liferay selects jQuery over AUI tomorrow, they will end up supporting AUI for the same legacy reasons. To answer your question, I am somewhat successful in creating the theme based on Bootstrap 3, however, there are lot of tweaks I have to do in the .css files.

[Moisés Belda, módosítva 10 év-val korábban]

Hi M J

Hidden jquery? really? I investigated source code and founded that liferay 6.2 only has implemented bootstrap css, not bootstrap javascript ( bootstrap-collapse.js, etc). Similar components like responsive collapsing menu I think are implemented with boostrap css and AUI code, not jquery. You can see that in liferay aui taglibs ( <aui:nav> and <aui:nav-item> )

The problem is when we want to implement that components with themes. Themes uses Freemarker or Velocity, and you cannot use aui taglibs easily. I try to make a simple theme with collapse menu (bootstrap based) but I think there are some css conflicts.

Can you share with us any sample of that css tweaks?

[M J, módosítva 10 év-val korábban]

I am attaching the _dffs folder of my custom theme based on Bootstrap 3. It's not completed, I am still tweaking the css files.

[Edgar Trania, módosítva 10 év-val korábban]

M J:

I am attaching the _dffs folder of my custom theme based on Bootstrap 3. It's not completed, I am still tweaking the css files.

Hi Mj what will happen to the alloy ui can i still use it with the tweak?

[M J, módosítva 10 év-val korábban]

[quote=Hi Mj what will happen to the alloy ui can i still use it with the tweak?

I am still working on it. Liferay team really bastardized bootsratp 2.3.2 with AUI. It looks like I have to rename the classes that I want to use with Bootstrap 3.

[Rohit Gupta, módosítva 10 év-val korábban]

Hi MJ,

Any luck with Bootstrap 3 , please give me some tips as i am also struggling with the same.

[M J, módosítva 10 év-val korábban]

BS 3.x WILL NOT WORK with Liferay 6.2. I started with classic theme and started modifying the changes in the _diffs folder for the custom theme based on Liferay BS 2.3.2. This is the ONLY way you can customize theme, anything else would be wasting your time.

[Moisés Belda, módosítva 10 év-val korábban]

As Eduardo said before....

To clarify about Bootstrap 3 support on Liferay. Liferay 6.2.0 will not support Bootstrap 3 officially. We have plans to start AlloyUI changes on a separate branch in order to prepare that to the future, maybe Liferay 7.0.

You have to use bootstrap 2.3.2!

More info => Nate Cavanaugh's blog

[Nate Cavanaugh, módosítva 10 év-val korábban]

Hi guys,
I'm currently writing a blog post explaining how we are bringing in Bootstrap, as well as the thinking behind some of the decisions.

But to answer some questions here:

1. We are only supporting the HTML/CSS portion of Bootstrap, not the JS portion.
2. However, there are some that are useful, and we've created modules in Alloy to supply that functionality (such as Tooltip, Modal, as well as some others, which you can find examples for on AlloyUI.com).
If there are any particular ones that are missing that you would like us to include, let us know, and we can prioritize those.
3. We *do not* include a "secret" or "wrapped" jQuery. We are not using the JS components from Bootstrap because of that fact (not that there's anything wrong with jQuery, but it just wouldn't be very efficient to be including multiple libraries with different API's).
AlloyUI is based on YUI3, and will be staying that way
4. The Bootstrap JS files you see in the Alloy Bootstrap project are there because we forked the Bootstrap SASS version. We only bring in the CSS however.

Lastly, as for why we switched from jQuery to YUI3, we made the switch roughly 4 years ago, and were made for a variety of reasons. Some of those reasons no longer apply, and jQuery has improved some in that time, however, there are still major reasons, especially around performance, that still lead us to prefer YUI3.
You're able to also include jQuery without any conflict (though you do have the extra cost of downloading another library), so if you have plugins or code that require it, you can safely do so without running into any issues with the portal including a conflicting version.
YUI isn't perfect, and there is some added complexity, but you can kind of think of it as Python or Java vs. PHP.
In Python and Java, you have some common language functionality, but you have the concept of sandboxes and importing modules. In PHP, everything is loaded up front, so you don't need to import any libraries.
This makes it much easier to get started and up and running. But it also makes it harder to scale for larger applications.
It's not a perfect analogy, but I think it captures the spirit of it.

Hopefully that answers your questions

[Moisés Belda, módosítva 10 év-val korábban]

Great post Nate.

You confirm my suspictions about bootstrap js components.

Then... How can I get a responsive menu bar with collapsed elements (like the one included at aui taglib) in theme context? (for example velocity navigation.vm)

Liferay Aui taglib has the next elements....

<aui:nav-bar>
	<aui:nav>
			<aui:nav-item href="url" />		
                        <aui:nav-item href="url" />
	</aui:nav>
</aui:nav-bar>

Very easy.... Is there any easy way to archieve this in theme context with AUI, or I need a future ALLOY UI MODULE that implements that navbar navigation in html +css?

Please, ALLOY UI TEAM, priorize this!

Thanks a lot

[Nate Cavanaugh, módosítva 10 év-val korábban]

Hi Moisés,
If you use Freemarker, one of the reasons why we chose to support it was is because it supports using taglibs.

For instance, if you use the following:

<#assign aui = PortalJspTagLibs["/WEB-INF/tld/aui.tld"] />
<@aui["nav-bar"]>
	<@aui.nav>
	    <@aui["nav-item"] href="url" label="Value 1" />
	    <@aui["nav-item"] href="url" label="Value 2" />
	<!--@-->
<!--@-->

It will output a responsive menu for you.

However, if you're on Velocity, you would have to add the collapsible element itself, as well as the JavaScript, which is kind of large.
We'll definitely add this to our list of items to prioritize.

Thanks Moisés,

[Moisés Belda, módosítva 10 év-val korábban]

Thanks to you Nate

Great alternative with freemarker and good news about that AUI module for navbar. We waiting for it with great expectation!

P.S. => You are my heroes!

[Jack Bakker, módosítva 10 év-val korábban]

freemarker... gotta learn freemarker...

https://www.liferay.com/web/mika.koivisto/blog/-/blogs/using-freemarker-in-your-theme-templates

[Sebastian Wikholm, módosítva 10 év-val korábban]

Nate Cavanaugh:

Hi Moisés,
If you use Freemarker, one of the reasons why we chose to support it was is because it supports using taglibs.

For instance, if you use the following:

<#assign aui = PortalJspTagLibs["/WEB-INF/tld/aui.tld"] />
<@aui["nav-bar"]>
	<@aui.nav>
	    <@aui["nav-item"] href="url" label="Value 1" />
	    <@aui["nav-item"] href="url" label="Value 2" />
	<!--@-->
<!--@-->

It will output a responsive menu for you.

However, if you're on Velocity, you would have to add the collapsible element itself, as well as the JavaScript, which is kind of large.
We'll definitely add this to our list of items to prioritize.

Thanks Moisés,

Is there any documentation of how to use that? How about dropdowns? How about a header part as in a bootstrap navbar. I was just going to use a normal bootstrap navbar, but it seems that Liferay does something strange with collapsed menus? Anybody know how i could get a normal bootstrap menu to work correctly in a theme? Wanted to use Yamm for the menu too (http://geedmo.github.io/yamm/) But i still cant get it to work, and cant figure out why..

[Miguel Ángel Pau, módosítva 10 év-val korábban]

Hi Sebastian!
I was in the same case like you and I did many tests but seems that if you don't want to add bootstrap javascript libraries you must use a jsp or freemarker theme at the moment like you can read in Nate's comments.
If you want to use velocity theme you can add only Collapse, Dropdown and Transitions Bootstrap components customizing the .js file here http://getbootstrap.com/customize/

This work for me and at the moment I don't have any problems with other dropdown features.

[Sebastian Wikholm, módosítva 10 év-val korábban]

Miguel Ángel Pau:

Hi Sebastian!
I was in the same case like you and I did many tests but seems that if you don't want to add bootstrap javascript libraries you must use a jsp or freemarker theme at the moment like you can read in Nate's comments.
If you want to use velocity theme you can add only Collapse, Dropdown and Transitions Bootstrap components customizing the .js file here http://getbootstrap.com/customize/

This work for me and at the moment I don't have any problems with other dropdown features.

If i use freemarker, can i use everything bootstrap has to offer? Or can iuse aui:nav-bars? I've been just adding the whole bootstrap.js file, when testing this out, and it seems that liferay does something to bootstrap collapse, and the collapsed menu just does not work with bootstrap included. Just wondering if i would be able to get yamm to work (http://geedmo.github.io/yamm/). The plan is to use journalContentUtil to get some articles in the global scope that would have the hand built menu items in them, then put them in a yamm megamenu.

[Miguel Ángel Pau, módosítva 10 év-val korábban]

If you use freemarker you can use aui nav taglibs, the comments are not related to bootstrap.js.
Try to make a _style theme with default dropdown bootstrap html structure and customized javascript. Look at the browser javascript console to debug if you still having problems.
Sorry but I can't help you with yamm.

Regards!

[Sebastian Wikholm, módosítva 10 év-val korábban]

Miguel Ángel Pau:

If you use freemarker you can use aui nav taglibs, the comments are not related to bootstrap.js.
Try to make a _style theme with default dropdown bootstrap html structure and customized javascript. Look at the browser javascript console to debug if you still having problems.
Sorry but I can't help you with yamm.

Regards!

is there documentation how to use aui:navbar, aui:nav, aui:nav-item, and all the attributes it takes and what they do?

[Miguel Ángel Pau, módosítva 10 év-val korábban]

As Nate says just above... they are going to prioritize the documentation about aui nav

[Moisés Belda, módosítva 10 év-val korábban]

Sebastian Wikholm:

Miguel Ángel Pau:

If you use freemarker you can use aui nav taglibs, the comments are not related to bootstrap.js.
Try to make a _style theme with default dropdown bootstrap html structure and customized javascript. Look at the browser javascript console to debug if you still having problems.
Sorry but I can't help you with yamm.

Regards!

is there documentation how to use aui:navbar, aui:nav, aui:nav-item, and all the attributes it takes and what they do?

Sebastian, There aren't documentation about <aui:nav> yet, but, you can see how it works with jukebox portlet developed by Liferay Engineers for Symposium demo.

github jukebox portlet

[Sebastian Wikholm, módosítva 10 év-val korábban]

Miguel Ángel Pau:

If you use freemarker you can use aui nav taglibs, the comments are not related to bootstrap.js.
Try to make a _style theme with default dropdown bootstrap html structure and customized javascript. Look at the browser javascript console to debug if you still having problems.
Sorry but I can't help you with yamm.

Regards!

BTW the collapsed dockbar (ie when the dockbar has a width where the menu is replaced by a button) in the _styled default theme does not work. Try it, reduce the width of the page until the button appears, try clicking it, one would expect that "administration" and "my places" would appear there, but no, dont know if it is by design but in that styled default theme them navigation of the dockbor is not functional

[Miguel Ángel Pau, módosítva 10 év-val korábban]

I tried! I have a 6.2 _styled responsive theme ^_^
You have the dropdown button in the dockbar only if you are logged into the portal by default, with a _styled theme, for this reason I used my own dropdown button following the bootstrap html structure:

<button class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse" type="button">
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
</button>

[Sebastian Wikholm, módosítva 10 év-val korábban]

Miguel Ángel Pau:

I tried! I have a 6.2 _styled responsive theme ^_^
You have the dropdown button in the dockbar only if you are logged into the portal by default, with a _styled theme, for this reason I used my own dropdown button following the bootstrap html structure:

<button class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse" type="button">
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
</button>

Well the problem still remains, even if you include the whole bootstrap.js, or parts like bootstrap-collapse.js and do a normal bootstrap navbar, something in liferay disables the collapsed menu button functionality, which works in a bootstrap only example page.

[Sebastian Wikholm, módosítva 10 év-val korábban]

Miguel Ángel Pau:

I tried! I have a 6.2 _styled responsive theme ^_^
You have the dropdown button in the dockbar only if you are logged into the portal by default, with a _styled theme, for this reason I used my own dropdown button following the bootstrap html structure:

<button class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse" type="button">
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
</button>

Btw thats the whole problem that collapse button does not work, if i include or do not include collapse. I get the menu to be hidden only if i give it a id="navigation" with the dockbar menu, a button seperate like in your example does not work. No javascript errors are given, hard as heck to find why it isnt working

[Sebastian Wikholm, módosítva 10 év-val korábban]

Miguel Ángel Pau:

I tried! I have a 6.2 _styled responsive theme ^_^
You have the dropdown button in the dockbar only if you are logged into the portal by default, with a _styled theme, for this reason I used my own dropdown button following the bootstrap html structure:

<button class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse" type="button">
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
</button>

Ok, ive debugged this far:

-Other bootstrap js things are working, bootstrap dropdown and carousel tested
-Bootstrap collapse is loaded and fired, tested with chrome developer tools and putting some breakpoints in the javascript
-It should be adding and removing css classes in two divs and change a div style, it only changes the classes partially

These are all tested with themes created in eclipse and using the parent themes _unstyled, _styled, classic both with velocity and freemarker. The navbars have been added both to the themes and as articlecontent.. bootstrap js files are loaded just before the </body>, also tested with js files loaded in <head> part of the html. jquery is loaded too before bootstrap

All the bootstrap html code is tested without liferay first, and are all working, they only stop working when put in liferay, ie there seems to be some sort of conflict that disabled the correct functionality of a bootstrap navbar.

Its easy to test, create whatever empty theme, add jquery and bootstrap.js or bootstrap-dropdown.js and bootstrap-collapse.js at the bottom of the html code before </body>. Add any form of navbar, resize the window until the responsive navbar collapses to a button and try to get the button to show the navbar items as it should, it wont. Hence liferay is not really supporting the usage of bootstrap. It would be a good design strategy to see that there will never be any form of conflict between bootstrap and aui or whatever the heck is happening (been banging my head against the wall for four days trying to figure out whats happening in this thing).

[M J, módosítva 10 év-val korábban]

Ditch the Liferay 6.2 dockbar and do your own dockbar through hook and modify the dockbar.css file.

[Sebastian Wikholm, módosítva 10 év-val korábban]

M J:

Ditch the Liferay 6.2 dockbar and do your own dockbar through hook and modify the dockbar.css file.

If it only was the dockbar, doing any sort of navbar independent of the dockbar doesnt work either. Ie bootstrap navbars are not functioning in liferay 6.2, not working now but going to continue tomorrow trying to sort out why the boostrap-collapse.js is not working inside of liferay.

[Sebastian Wikholm, módosítva 10 év-val korábban]

ok found it, a little less stress and stuff like that helps

was just a css problem:

added to custom.css:

.navbar .container .nav-collapse {
display: block;
}

it seems to be sett in navbar.css to display:none..

[Jack Bakker, módosítva 10 év-val korábban]

I haven't explored twitter bootstrap over Liferay 6.2 much yet ; tho am much into it over v6.1

tho I like AUI for custom MVCPortlets for many reasons. For theme however, I grab jquery for better carousels, responsive via twitter and more... so far I can use AUI in custom portlets fine and use various versions of jquery fine...

Liferay has embraced/absorbed much out there for better integration, and likely AUI vs. jquery should become a AUI and/or jquery discussion not an either/or.

[Eduardo Lundgren, módosítva 10 év-val korábban]

To clarify about Bootstrap 3 support on Liferay. Liferay 6.2.0 will not support Bootstrap 3 officially. We have plans to start AlloyUI changes on a separate branch in order to prepare that to the future, maybe Liferay 7.0.

[Nish K, módosítva 10 év-val korábban]

Hi Nate,

I read one of your Blogs about aui-viewport and developed in this way on Liferay 6.1.1 but now in the Default Theme of Liferay 6.2 all my css with .aui-view-x are ignored. How can I force the Theme to work just like on Liferay 6.1.1 with aui-view-x classes in css files?

your blog url: http://www.liferay.com/de/web/nathan.cavanaugh/blog/-/blogs/liferay-com-mobile-sites-and-responsive-layouts

[Ahmed bouchriha, módosítva 10 év-val korábban]

Hi Nish K

Your .aui-view-x classes are ignored with LR6.2 because the new alloy viewport use .view-x classes instead so try to remove the aui- prefix from you css
so all your .aui-view-x classes became .view-x.

Best Regards

[Nish K, módosítva 10 év-val korábban]

Thank you very much Ahmed Bouchriha. This is exactly what went wrong with my code!!!!

[Mithun Salinda, módosítva 10 év-val korábban]

Is there anyway to disable responsive in liferay 6.2, because in our site we don't need it we planed to introduce separate app for mobile devices
So Is it possible to disable responsive?

[Daniel Tyger, módosítva 10 év-val korábban]

Mithun Salinda:

Is there anyway to disable responsive in liferay 6.2...
So Is it possible to disable responsive?

Hi Mithun Salinda: Not sure which aspects of responsive features you want to disable... On one extreme, you can start with the _unstyled theme as your parent.theme in your build.xml file to give you an idea of everything in its stripped-down presentation. To see the changes added on at the _styled level, create a theme with that parent and you will see the layout templates (columns / rows) become responsive, but the rest of the navigation and UI is modest. The classic theme introduces the most responsive features and is tightly woven with bootstrap and aui / yui. The /webapps/ROOT/layouttpl/custom holds the layouts that are styled and become collapsible or not... I suppose you could also drop back to 6.1/earlier versions of base themes and port them forward...

Also, I saw someone reference this site on disabling responsive features of bootstrap: http://getbootstrap.com/examples/non-responsive/ but note also the repercussions...-daniel

[Mithun Salinda, módosítva 10 év-val korábban]

Daniel Tyger:

Mithun Salinda:

Is there anyway to disable responsive in liferay 6.2...
So Is it possible to disable responsive?

Hi Mithun Salinda: Not sure which aspects of responsive features you want to disable... On one extreme, you can start with the _unstyled theme as your parent.theme in your build.xml file to give you an idea of everything in its stripped-down presentation. To see the changes added on at the _styled level, create a theme with that parent and you will see the layout templates (columns / rows) become responsive, but the rest of the navigation and UI is modest. The classic theme introduces the most responsive features and is tightly woven with bootstrap and aui / yui. The /webapps/ROOT/layouttpl/custom holds the layouts that are styled and become collapsible or not... I suppose you could also drop back to 6.1/earlier versions of base themes and port them forward...

Also, I saw someone reference this site on disabling responsive features of bootstrap: http://getbootstrap.com/examples/non-responsive/ but note also the repercussions...-daniel

Hi Daniel,,, Thanks for the reply, Actually we got a problem when we moved to liferay 6.2 from 5.2. basically what we need was remove responsive in 6.2 so we removed some styles from navigation.vm and added our styles and removed view port meta and also removed content styles from portal normal.i know this is one of the best feature in liferay ,But that was client needed. Thanks Again for your advice..