Desarrollo tema Liferay

WORKING WEBSITELiferay Themes

SIMPLE STARTER LAYOUTStep 1

Simple Starter Layout

• To build our HTML layout we should first analyze our design by looking at the Photoshop layout and identify the sections that are unique.

• Background: you notice that the background is white.

Pay attention to the naming of id or class in every screenshot I made, these will be the names we will use when we markup the HTML.

Header: Notice that in this section the header has a green line on the top which covers the whole screen, so in order to do this we need to wrap the header with another container. The header contains logo, call to action, navigation and search.

Slides: for the slider we will be using SlideJS.

Service: this section contains 2 columns for web design and vector design.

Media: this section is divided into 3 columns for video, Twitter, and Facebook.

Notice the above section slides, services, and media are positioned in the center, so we will wrap them with a div and name it container.

Widget: this section is divided into 3 columns for links, blog, and location. Also you will notice it is covered with a gray dotted pattern that covers the whole screen.

Client: In this section you will notice there is a solid gray border on the bottom that covers the entire screen and a list of clients logo.

Footer: Finally, the footer which contain 2 columns for copyright, footer links, and back to top arrow.

HERE IS THE IMAGE OF THE OVERALL MARKUP THAT WE HAVE DONE.

NOW, BASED ON THESE NOTES WE CREATE THE FOLLOWING HTML LAYOUT.

Convert Burnstudio into a Responsive Website

Working 960 Viewport

Working 720 Viewport

Working 320 Viewport

STRUCTURE OF A LIFERAY PAGE

THEME VARIABLES DOCUMENTATIONVelocity

MACROS

Utility macrosWhat's a macro?A macro is a function that does text manipulation inside of Velocity. You can feed it parameters, and it will print out a string for you. Macros are not like traditional methods or functions, in that they don't return data, and while they can manipulate text based upon the parameters you pass in, it can only print.

#css(FILE_NAME)Creates a link element like so: <link href="FILE_NAME" rel="stylesheet" type="text/stylesheet" />

#js(FILE_NAME)Creates a script element like so: <script src="FILE_NAME" type="text/javascript"></script>

#language(LANGUAGE_KEY) Prints out the language string related to the LANGUAGE_KEY.This replaces the following functionality: $languageUtil.get($company.getCompanyId(), $locale, LANGUAGE_KEY)

VARIABLES/METHODS

Theme specific variables$theme_displayThe theme display object $portlet_displayThe portlet display object $css_classThe css class specified for the "color scheme" in the liferay-look-and-feel.xml $css_folderThe absolute path to the css directory $images_folderThe absolute path to the images directory $javascript_folderThe absolute path to the javascript directory $templates_folderThe absolute path to the templates directory $full_css_pathThe absolute path to the css directory $full_templates_pathThe absolute path to the templates directory $css_main_fileThe absolute path to the css/main.css file $js_main_fileThe absolute path to the javascript/javascript.js file

Company specific variables

$company_idThe company id (specified in Admin Portlet > Settings)

$company_nameThe name of the company (specified in Admin Portlet > Settings)

$company_logoThe absolute path to the image of the company logo (specified in Admin Portlet > Settings)

$company_urlThe URL of the company (specified in the Admin Portlet > Settings)

User specific variables$user_greetingThe greeting that the user get's upon page visit (specfied in My Account or Admin > Users) $user_email_addressThe user's email address (specfied in My Account or Admin > Users) $user_id The user's id (set in My Account) $language_idThe ID of the user's language (specfied in My Account or Admin > Users) $time_zoneThe users's time zone (specfied in My Account) $user_commentsThe comments related to the user (specfied in My Account or Admin > Users) $user_login_ipThe IP address that the user is currently logged on from $user_last_login_ipThe last IP address the user logged on from

User specific variables$is_default_userA boolean that specifies if the current user is the default one $user_locationThe user's location $user_organizationThe user's organization $user_groupThe group that the user belongs to $user_birthdayThe user's birthday $is_maleA boolean that specifies if the user is male $is_femaleA boolean that specifies if the user is female $user_nameThe user's full name $user_first_nameThe user's first name $user_middle_nameThe user's middle name (if any) $user_last_nameThe user's last name

Dock specific variables$show_add_contentBoolean set to specify that the add content link can be displayed $add_content_textThe text that gets displayed if the add content link is enabled $add_content_urlThe url where the add content link points to $layout_textThe text to be displayed for the "Change Layout" link $layout_urlThe url where the "Change Layout" link points to $show_homeBoolean set to specify that the "Home" link can be displayed $home_textThe text to be displayed for the "Home" link $home_urlThe url where the "Home" link points to $show_my_accountBoolean set to specify that the "My Account" link can be displayed $my_account_textThe text to be displayed for the "My Account" link $my_account_urlThe url where the "My Account" link points to

Dock specific variables$show_page_settingsBoolean set to specify that the "Page Settings" link can be displayed$page_settings_textThe text to be displayed for the "Page Settings" link$page_settings_urlThe url where the "Page Settings" link points to $show_sign_inBoolean set to specify that the "Sign In" link can be displayed$sign_in_textThe text to be displayed for the "Sign In" link $sign_in_urlThe url where the "Sign In" link points to$show_sign_outBoolean set to specify that the "Sign Out" link can be displayed $sign_out_textThe text to be displayed for the "Sign Out" link$sign_out_urlThe url where the "Sign Out" link points to

Page specific variables

$selectableA boolean set that specifies whether a page is "selectable", meaning is it part of the navigation

$pageThe current page/layout object

$the_titleThe current title of the page

Navigation specific variables$nav_itemsAn object that contains all of the pages that are part of the navigation. To set the styling for each navigation item, you must loop through the $nav_items object with a #foreach.$has_navigationA boolean set to whether or not there are any pages in the $nav_items objectThese methods exist on each sub-object eg. when you're looping through the $nav_items object, you would do $foreach ($nav_item in $nav_items) and you would call $nav_item.METHOD_NAME() isSelected()This returns a boolean that indicates whether a navigation item is currently selected. getURL()This returns a string that contains the navigation item's URL. getTarget()This returns a string that contains the navigation item's target (as defined in the Page Settings). getName()This returns a string that contains the navigation item's page name. hasChildren()This returns a boolean that indicates whether a navigation item has children. getChildren()This returns an object that is has the same methods and variables as the $nav_items object, but contains the current navigation item's children pages.

Misc variables

$update_available_urlThe url where the "Update Available" link points to

Ejemplo:<img src="$themeDisplay.getPathThemeImages()/custom/image_name.png" id="logo" />

INCLUDING JQUERY AND OTHER JS FILES IN LIFERAY THEME

You can add all your javascript files to the js folder in your theme like:

sample-theme/docroot/_diffs/js/jquery-1.8.2.min.js

And then to make it available for everybody you can write any of the following lines in the <head> section of the template files portal_normal.vm and portal_pop_up.vm present in the directory sample-theme/docroot/_diffs/templates/:

#js ("$javascript_folder/jquery-1.8.2.min.js")

Or

<script src="$javascript_folder/jquery-1.8.2.min.js"></script>

COIN SLIDERTutorial

Add the files to theme• coin-slider-min.js, • coinslider-styles.css, • jquery-1.8.0.min.js

Create a new filejavascript.js file in filesystem.

Add the following code to this file:

$(document).ready(function() {$("#coin-slider").coinslider({ hoverPause: false });});

Create a folder slideshow in the Document and Media library of thecommunity where you want to use the slider.

Upload the javascript.js file to the slideshow library

Next, upload few images that you want to display in the slider in the Document and Media Library.

Now create a new web content structure. Name it coin-slideshow . Add xml schema definition to the structure as shown below:

Velocity Transform Template

All dynamic elements in a structure can be accessed as a Velocity variable.The given structure:

<root><dynamic-element name="main-text" type="text_area">

<dynamic-element name="sub-image" type="image"></dynamic-element>

<dynamic-element name="sub-text" type="text"></dynamic-element>

</dynamic-element><dynamic-element name="more-text" type="text_area"></dynamic-

element><dynamic-element name="ms-list" type="multi-list">

<dynamic-element name="chocolate" type="Chocolate"></dynamic-element>

<dynamic-element name="strawberry" type="Strawberry"></dynamic-element>

<dynamic-element name="vanilla" type="Vanilla"></dynamic-element>

</dynamic-element></root>

The dynamic element "main-text" can be accessed in the following ways:

• $main-text.getName() - The name "main-text”• $main-text.getData() - The data in the article for main-text• $main-text.getType() - The type "text-area”• $main-text.getChildren() - A collection with two nodes (sub-image and

sub-text) that can be used in the #foreach clause• $main-text.getSiblings() - A collection of elements with the name "main-

text". This will only return more than one element if this element is repeatable.

One special accessor exists for elements of type "multi-list":

• $ms-list.getOptions() - A collection with up to three string entries (chocolate, strawberry, or vanilla) that can be used in the #foreach clause

• Another special accessor exists for elements of type "link_to_layout”:$linkToPage.getUrl() - The URL that links to the selected page in the current site.

• The variable $journalTemplatesPath can be used to include another Journal template, e.g. #parse ("$journalTemplatesPath/LAYOUT-PARENT")

• The variable $viewMode specifies which mode the article is being viewed in.

• For example, if $viewMode evaluates to "print", that means the user clicked the print icon to view this article.

Create a new web content template and name it coin-slideshow-template . Select coin-slideshow as the structure for the new template. Click the Launch Editor button. In the dialog that appears, paste the following code:

Laboratorio

GRACIAS