52
WORKING WEBSITE Liferay Themes

Desarrollo tema Liferay

Embed Size (px)

DESCRIPTION

Desarrollo de temas para liferay

Citation preview

Page 1: Desarrollo tema Liferay

WORKING WEBSITELiferay Themes

Page 2: Desarrollo tema Liferay
Page 3: Desarrollo tema Liferay
Page 4: Desarrollo tema Liferay
Page 5: Desarrollo tema Liferay
Page 6: Desarrollo tema Liferay

SIMPLE STARTER LAYOUTStep 1

Page 7: Desarrollo tema Liferay

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.

Page 8: Desarrollo tema Liferay

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.

Page 9: Desarrollo tema Liferay

Slides: for the slider we will be using SlideJS.

Page 10: Desarrollo tema Liferay

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

Page 11: Desarrollo tema Liferay

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

Page 12: Desarrollo tema Liferay

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.

Page 13: Desarrollo tema Liferay

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.

Page 14: Desarrollo tema Liferay

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.

Page 15: Desarrollo tema Liferay

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

Page 16: Desarrollo tema Liferay

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

Page 17: Desarrollo tema Liferay
Page 18: Desarrollo tema Liferay

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

Page 19: Desarrollo tema Liferay
Page 20: Desarrollo tema Liferay

Convert Burnstudio into a Responsive Website

Page 21: Desarrollo tema Liferay
Page 22: Desarrollo tema Liferay

Working 960 Viewport

Page 23: Desarrollo tema Liferay

Working 720 Viewport

Page 24: Desarrollo tema Liferay

Working 320 Viewport

Page 25: Desarrollo tema Liferay

STRUCTURE OF A LIFERAY PAGE

Page 26: Desarrollo tema Liferay
Page 27: Desarrollo tema Liferay

THEME VARIABLES DOCUMENTATIONVelocity

Page 28: Desarrollo tema Liferay

MACROS

Page 29: Desarrollo tema Liferay

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)

Page 30: Desarrollo tema Liferay

VARIABLES/METHODS

Page 31: Desarrollo tema Liferay

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

Page 32: Desarrollo tema Liferay

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)

Page 33: Desarrollo tema Liferay

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

Page 34: Desarrollo tema Liferay

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

Page 35: Desarrollo tema Liferay

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

Page 36: Desarrollo tema Liferay

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 37: Desarrollo tema Liferay

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

Page 38: Desarrollo tema Liferay

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.

Page 39: Desarrollo tema Liferay

Misc variables

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

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

Page 40: Desarrollo tema Liferay

INCLUDING JQUERY AND OTHER JS FILES IN LIFERAY THEME

Page 41: Desarrollo tema Liferay

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>

Page 42: Desarrollo tema Liferay

COIN SLIDERTutorial

Page 43: Desarrollo tema Liferay

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

Page 44: Desarrollo tema Liferay

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

Page 45: Desarrollo tema Liferay

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

Page 46: Desarrollo tema Liferay

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>

Page 47: Desarrollo tema Liferay

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.

Page 48: Desarrollo tema Liferay

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.

Page 49: Desarrollo tema Liferay

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:

Page 50: Desarrollo tema Liferay
Page 51: Desarrollo tema Liferay

Laboratorio

Page 52: Desarrollo tema Liferay

GRACIAS