Recent Bloggers

James Falkner

Staff
98 Publications
21 octobre 2014

Eduardo P. Garcia

Staff
6 Publications
20 octobre 2014

Meera Prince

17 Publications
18 octobre 2014

Liferay Support Portal Admin

163 Publications
17 octobre 2014

Kyle Joseph Stiemann

Staff
1 Publications
16 octobre 2014

Fady Hakim

Staff
3 Publications
15 octobre 2014

Richard Sezov

Staff
39 Publications
14 octobre 2014

Sven Werlen

2 Publications
10 octobre 2014

Sami Ekblad

1 Publications
10 octobre 2014

Ravi Kumar Gupta

1 Publications
10 octobre 2014

Google Docs and DDLs in Liferay

Technical Blogs 11 décembre 2013 Par Ryan Schuhler Staff

Tables tables tables. Tables are used all over the web. Some people hate them, some people love them. No matter your opinion on tables, there are many cases where html tables are effective and efficent ways to display content and convey information. Many times it is helpful to use them to show things such as form submissions or with dynamic information. I recently worked on a site for the company retreat and we had a number of tables displaying sign up information or details that people needed to know that pertained to themeselves. We implemented two different strategies for displaying this content in Liferay, I thought it might be helpful to share what we did with those of you out there who are building websites with Liferay.

The first strategy, which isn't limited to Liferay alone, is pulling from google docs. Often times planning, organization of details, and information is stored in google's friendly and free docs interface. Google provides great APIs for how to pull from their apps, but I will do a basic walk through of the process.

  • First, create and share your document with the public at docs.google.com
  • Go to File > Publish to web...
  • In the pop up click "Start Publishing"
  • Copy the "key" which is in the url or in the "Get a link to publish data" section of the pop up.

Now that the google doc is all set, the next step is to create the url which will give us a jsonp with our content. Looking at the google spreadsheet pulling APIs we see how to create the url which will give us the jsonp we will use. The url will look like this:

https://spreadsheets.google.com/feeds/list/YOUR_DOC_KEY/YOUR_SHEET_NUMBER/public/values?alt=json-in-script&callback=importGSS

Essentially all you need to do is is place your key in the YOUR_DOC_KEY place and the sheet number in the YOUR_SHEET_NUMBER place. Give it try. Just paste that url into your browser and you will see the jsonp content.

Last step is to pull that information to your site. Basically all you need to do is create a Web Content Template that contains this code (remember to replace the url variable with the url we created in the previous step).

<div id="lodgingSearchBox">
	<table id="lodgingList">
		<tbody></tbody>
	</table>
</div>
<script>
	AUI().ready(
		'jsonp',
		'jsonp-url',
		function(A) {
			var url = "https://spreadsheets.google.com/feeds/list/0AiezzBRgPCVPdGZnTThvSEJsUFFZUVBHUW5QZnNHN3c/1/public/values?alt=json-in-script&callback=importGSS";

			function handleJSONP(response) {
				for (var i = 0; i < response.feed.entry.length; i++) {
					A.one("#lodgingList").one('tbody').append(
						'<tr class="table-info"><td>' + response.feed.entry[i].gsx$name.$t + '</td><td>' + response.feed.entry[i].gsx$department.$t + '</td><td>' + response.feed.entry[i].gsx$numberoffamilymembers.$t + '</td></tr>'
					);
				}

			}

			A.jsonp(url, handleJSONP);
		}
	);
</script>

Our table ended up looking like this:

All it does is provides a list of people who signed up already, which is dynamically updated through a google doc. We added the aui-live search module to help people search for there name at the top, but it ended up being a clean, easy solution to let people know if they were signed up for the retreat.

This method of pulling data can be very useful because often times you are already using google docs/forms, or they can just be easier to maintain and collaborate with. However, being dependant on 3rd party API's always has its risks and drawbacks. Loading google docs will have a lag time and can be easily broken if heading titles get changed or there are gmail login conflicts. Liferay has a less known solution that offers a large amount of versatility and similar benefits of google docs being used in this way. This solution is Dynamic Data Lists, aka DDLs.

There are a number of good blog posts and other documentation on DDLs which already exist, so I am not going to explain how to use them here. However, there are some great features I think deserve highlighting. DDL's are super useful because they are similar to the article/template/structure system which most are familiar with, yet they provide a centeralized place to add and edit entries. All you have to do is add the "Dynamic Data List Display" and create a new "Data Definition" (comparable to structure in Web Content) and a "Data List".

These features are all available out-of-box, and are very useful for recording and display data. There is a spreadsheet view (found in the portlet configuration) which is extremely useful in that you can click and edit you entries right there on the screen, just like google docs. You can also use velocity to create "List Template" just like Web Content templates and now you can display your content exactly like you want to.

One of the things we used DDLs for on the Liferay retreat site was to sign up for childcare.

The DDL Display portlet gives you the sign up button, so it is easy for employees to simply click sign up and add their name to the list.

These are just a few of the features that make DDLs a useful tool in Liferay. You can even deploy the Dynamic Data List Form portlet and use it to create and record surveys. On the Web Team we have plans to use DDLs much more in the future, and I think they are great features which are worth all of you spending some time to get familiar with them.

Theming Responsively

Technical Blogs 19 août 2013 Par Ryan Schuhler Staff

There is a pressing need for websites to respond to the ever-changing technology which is used to visit them. As mobile devices become more powerful and more prevalent, more and more people surf the web and visit websites on an array of devices. These devices range from small screens to large monitors, from ios to android, to other operating systems and internet browsers. Supporting all of them is quite a chore, and next to impossible depending on the method you use. This is why I believe the best way to design a website is responsively.

I do not intend in this blog post to define responsive vs adaptive or defend why I believe responsive is preferable. My goal is to provide a few basic concepts and implementations that I have found very helpful while creating responsive themes with Liferay. Essentially, these are the things that I would put in just about any theme I create in order to make capable of being viewed on any screen size. In essense, this is just a chunk of css that will work with Liferay (6.0 and 6.1 at least) and create a fluid layout for you to build on and some extra classes to use as you populate content on your site. Before we dive into the code, here are some basic rules I have found helpful in responsive theming:

  • Avoid setting fixed widths over 300px

    As a rule of thumb, just don't set widths over 300px. Usually I set the min-width of the body to 320px, meaning I support a screen size as small as that before it will scroll horizontally. If you set anything, such as content, containers or images, with a width over 300px, it will interfere with the layout when it gets smaller. If you really need to you can use the max-width to a larger number and then the width to 100%, or set larger widths and then use media queries to change them, but it is best to structure your site simply and efficiently to respond to the situations naturally. It will save you code and time in the end.

  • Use percentages as much as possible (aui widths are great ie. aui-w50)

    This point is similar to the last one, but more of the positive side of it. Use percentages as often as makes sense. The aui width classes are very useful and available out of the box with Liferay. They are being used in the default layouts, and can be used as you create content and other structures on your site.

  • Design things with mobile in mind

    The key to having a responsive site is to plan for mobile first. This means when you are structuring your html, think about what will happen when the screen shrinks. If you have multiple columns, make sure that they will wrap nicely when the screen width decreases. This rule takes a little more planning and is not always in your control, especially if you have an existing site that was not designed to be responsive. It is possible to mobilify an existing site, but it is much cleaner and easier to plan it from the beginning. I would even go as far to say that you should have two separate mockups of your site before you start, a mobile view and a full view.

 

With those basic rules, there are now two areas that need to be addressed, one is a fluid layout and the other is navigation.

Fluid Layout

This is the basis of your theme. Thinking out the framework is vital in order for your theme to be fluid and respond to whatever screen size it is viewed on. I have found a few lines of code which have served me well in creating a fluid layout with liferay. It takes what comes out of the box with Liferay and makes it respond well, and it also gives you the structure for how you develope content. Here is the code you would add to the custom.css in your theme:

#wrapper {
	margin: 0 auto;
	max-width: 960px;
	min-width: 320px;
	width: 960px;
}

.container-column, .portlet-column {
	display: table-cell;

	.container-column-content, .portlet-column-content {
		padding: 0 10px;
	}

	.container-column-content-first, .portlet-column-content-first {
		padding-left: 0;
	}

	.container-column-content-last, .portlet-column-content-last {
		padding-right: 0;
	}

	.container-column-content-only, .portlet-column-content-only {
		padding: 0;
	}
}

.responsive #wrapper {
	width: 100%;
}

.responsive-only {
	display: none !important;
}

@media all and (max-width: 720px) {
	.responsive {
		img {
			max-width: 100%;
		}

		#wrapper {
			width: 100%;
		}

		.container-column, .portlet-column {
			display: block !important;
			width: 100% !important;

			.container-column-content, .portlet-column-content {
				padding: 15px !important;
			}
		}

		.responsive-hidden {
			display: none !important;
		}

		.responsive-only {
			display: block !important;
		}
	}
}

 

Basically what this code is doing is taking all of the columns in your layout, which already run off of percentages, and making them 100% when the screen width is under 720px. This will cause the columns to stack, and be easily viewable on a mobile device. It also implements a class to hide elements when the screen width is under 720 (responsive-hidden) or a class to only display elements when it goes below that screen width (responsive-only).

These classes are helpful to have, but perhaps the most useful class are the ones with "container-column" in them. Let me explain why. On the web team for Liferay, we are very often creating new pages. Most of the time we create the content on the page using the Web Content Portlet. Having a set of classes we can use to create a structure on the pages that makes it automatically responsive is incredibly useful. The easiest way to explain this is by showing an example.

<div class="aui-w100 container-column">
	<div class="container-column-content container-column-content-only">
		<!-- Your Content Here -->
	</div>
</div>

<div class="aui-w33 container-column">
	<div class="container-column-content container-column-content-first">
		<!-- Your Content Here -->
	</div>
</div>

<div class="aui-w33 container-column">
	<div class="container-column-content">
		<!-- Your Content Here -->
	</div>
</div>

<div class="aui-w33 container-column">
	<div class="container-column-content container-column-content-last">
		<!-- Your Content Here -->
	</div>
</div>

Essentially we are mimicking how the layouts are made, but with a different class name. When you form sections, these classes will take care of all of the padding for both full screen and mobile views, as well as the sections wrapping. All you have to do is remember to add the class "container-column" and "container-column-content" and everything structurally takes care of itself. You still have to be mindful of the content inside of it, but using these classes saves a lot of time and css in your articles.

Animated Scroll

Technical Blogs 16 août 2013 Par Ryan Schuhler Staff

    The new trend in web design is long-scrolling pages. It allows space for cool animation and flowing content while cutting down the need for changing pages and waiting for things to load each time. A simple thing I found to make your scrolling page look sleek is by animating the scroll. Often times the navigation or links on a long-scroll style page are "#"s which link somewhere on the page. Instead of having the browser jump directly to that spot, it adds to the UX if you see the page scroll down. Alloy has this functionality and it is rather simple to implement.

    My idea was to just make a class that you could add to any anchor with a "#" in the href and on click it would scroll to the position you want. Here is what my code looks like:

    In order to implement this into Liferay all you would need to do is paste this code into your main.js or even into a script tag in a web content display. Then just add the class "animate-scroll" to any anchor with an href that is a "#". (For example Link). Simple and easy to implement. Enjoy!

Here is a preview of what it looks like.

Social Share Buttons

Technical Blogs 19 juillet 2013 Par Ryan Schuhler Staff

Recently I found myself searching through the internet for how to best add social share buttons to a website. The documentation that exists is helpful, however I decided it might still be useful to share some of my findings.

I discovered, as many of you probably know, that there are mainly two ways to create a social button. The first way is by using a script that the respective social network service provides. I used Facebook, Twitter, LinkedIn and Google Plus, all of which had great documentation. The second way to acheive a share button is by creating a url which contains the information, and then you can put that url wherever you please. Here are the two different methods:

Script versions of social bookmarks
Things to note in this first section, Facebook requires an app id to use this method. So in order to use it you would need to create an app and in the app settings approve the page you are trying to share from. However, doing it this way allows you to write the script once and then call it onclick and pass in the variables you want as many times as you want. The other three services are similar in that they have a script and then use "data-x" attributes to pass in the values you want.

Anchor versions of social bookmarks
The anchor versions are also an option, while they don't have the nice default icons that the scripts provide, they are beneficial for different reasons. The url that you form is very convenient because it very simple and can be used anywhere. You could use it in emails as well as on your website or anywhere else you can paste a link. It should be noted that because it is a url, it is necessary that it is written like one. This means in all of the fields where spaces are required (ie. titles or descriptions) the spaces must written as "%20" so when you want to write the title "Here is the title" it will be written like this "&title=Here%20is%20the%20title".

Hope all of this is useful. There are more things you can do with social buttons, but for my use case this worked great, and it is nice to have all four social buttons in one place. You can see a demo of the code here. The nice thing about Liferay is that you can take this and throw it into a template so that even those who don't know how to code can create and/or populate social buttons for your site. Copy and Paste away!


Some Helpful Resources:

 

On Screen Helper (liferay.com javascript part 3)

Technical Blogs 5 juillet 2013 Par Ryan Schuhler Staff

The last script I will share with you for now is one that I call on screen helper. This is also a simple script, but very useful when it comes to animations, transitions, and effects. Essentially all it is doing is adding classes when a given element enters the screen and removes them when it leaves. Combine this with some css3 and you have an endless amount of cool things you can do to make your website more interesting.

On Screen Helper

In order to use on screen helper all you need to do is add the class "on-screen-helper" to whatever element you desire. Then, when the element reaches the bottom of the visible screen the class "on-screen-bottom" will be added. When the element reaches the top of the screen the class "on-screen-top" will be added. After the element has completely left the visible screen both classes will be removed.

On screen helper allows you to add animations or transitions to elements which are triggered each time they enter the screen. You could add a css transition on .on-screen-bottom and then each time it entered the screen that transition would occur. This function can also be used for a paralax scrolling effect. Using the .on-screen-top class you could change a div to position:fixed when it reaches the top of the screen, resulting in the allusion of paralax scrolling.

See it in action here (to see the on screen helper adding the classes you can inspect the elements and watch the classes being added and removed)

Lazy Load (liferay.com javascript part 2)

Technical Blogs 5 juillet 2013 Par Ryan Schuhler Staff

Here is another script that we developed for the redesign of Liferay.com. The goal for this script was to help with loading times on pages with a lot of images as well as provide a way to effectively implement transitions/animations. It isn't too complicated, but useful nevertheless.

Lazy Load

In order to use lazy load all you need to do is add the class "lazy-load" to whatever element you desire. If you want to lazy load an image add the class and instead of placeing the img url into "src", place it in an attribute called "datasrc". This is useful for a number of things, whether it is speeding up initial load time by loading images when you scroll to them, or by adding a class when you scroll to something and utilizing that class to add transitions or animations to the respective element.

Lazy load will happen when the div reaches the bottome of the visible screen. It only happens once, so once it is loaded the class and loaded image will stay there until refresh.

The code could look something like this:

See it in action here (to see the lazy load adding the classes in this example you can inspect and check the console, it prints out all the lazy-load elements onscroll, so you can see which elements have been loaded already)

Pop-click (lifery.com javascript part 1)

Technical Blogs 5 juillet 2013 Par Ryan Schuhler Staff

As a part of the redesign of Liferay's website we have developed a number of new scripts in order to effeciently acheive new effects and improve the UX. I thought I would share some of the code we have created and found useful for a number of different use cases. This blog posts and the two to follow will show parts of our main javascript code which is currently being used in our theme. I will breifly explain how to use the code so hopefully all of you can reuse and tweak it as you need. All three of these scripts will be used on Liferay's hompage when it is revamped in the not so distant future.

Happy Coding!

Pop Click

This first script is used across Liferay's entire site in the top navigation. It is called pop click and all you need to do in order to us it is add the class "pop-click" to whatever element you desire. When an element with the class "pop-click" is clicked on the class "pop-click-active" is added to that element. The class will then be removed on any click that is outside of an element containing the class "pop-click-content".

Pop Click's easiest implementation is for drop down menus. You can add the class "pop-click" to the lis and the class "pop-click-content" to the menu ul or div inside of that li. Simply hide the submenu with css and then display it again when the class "pop-click-active" is present. It could also be used for anything that you want to do with css that occurs on click and is removed when the user clicks somewhere else on the screen.

A simple example would be:

You can also see a working example here

If you want to see some places where we are using this you can look at the slide out tab on the right of the France Symposium page or by clicking on "lanuage" button in the top right navitaion at Liferay.com

Easy Sticky-nav using alloy.

Technical Blogs 21 juin 2013 Par Ryan Schuhler Staff

Want a quick and easy way to make a sticky nav right out of the box with liferay? Thanks to AUI with 10 lines of code you can turn your navigation bar into a sticky nav. This is especially useful with long scrolling pages, where it is useful to see the navigation as you scroll.

You can see this in action on Liferay's Solution Forum sites.

Some additional styling may be needed to make it look the way you would like, but this essentially clones you navigation and then when you scroll pass the #navigation element it fixes the clone to the top of the page as you scroll. Pretty cool and easy to add. Enjoy!

A little bit about me

Company Blogs 20 juin 2013 Par Ryan Schuhler Staff

Hello,

My name is Ryan and I work at Liferay. I am currently on the web team at Liferay and have the unique opportunity to both use Liferay's software as  customer and collaborate with all the other devs who work in the same office as we do. Over time I have learned or figured out new things about Liferay Portal, as anyone using lifery does, and I want to share those findings with others.

My hope is that my postings would be clear and understandable, and give information which makes other devs lives a little easier and websites a little better. Hope you enjoy it!

-Ryan

Affichage de 9 résultat(s).
Items 20
de 1