Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 87 views

    Desarrollo Tema Liferay

    Uploaded by

    Manuel Vega
    This document discusses Liferay themes including creating a simple starter layout, working with different viewports, the structure of Liferay pages, using Velocity templates, including JavaScript files, and creating a coin slider.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPTX, PDF, TXT or read online from Scribd

    Desarrollo Tema Liferay

    Uploaded by

    Manuel Vega
    87 views52 pages
    This document discusses Liferay themes including creating a simple starter layout, working with different viewports, the structure of Liferay pages, using Velocity templates, including JavaScript files, and creating a coin slider.

    Original Description:

    Desarrollo de temas para liferay

    Original Title

    Desarrollo tema Liferay

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document discusses Liferay themes including creating a simple starter layout, working with different viewports, the structure of Liferay pages, using Velocity templates, including JavaScript files, and creating a coin slider.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPTX, PDF, TXT or read online from Scribd
    Download as pptx, pdf, or txt
    87 views52 pages

    Desarrollo Tema Liferay

    Uploaded by

    Manuel Vega
    This document discusses Liferay themes including creating a simple starter layout, working with different viewports, the structure of Liferay pages, using Velocity templates, including JavaScript files, and creating a coin slider.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPTX, PDF, TXT or read online from Scribd
    Download as pptx, pdf, or txt
    of 52

    Liferay Themes

    WORKING WEBSITE

    Step 1

    SIMPLE STARTER LAYOUT

    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.

    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.

    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.

    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

    Velocity

    THEME VARIABLES DOCUMENTATION

    MACROS

    Utility macros
    What'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_display The theme display object $portlet_display The portlet display object $css_class The css class specified for the "color scheme" in the liferay-look-and-feel.xml $css_folder The absolute path to the css directory $images_folder The absolute path to the images directory $javascript_folder The absolute path to the javascript directory $templates_folder The absolute path to the templates directory $full_css_path The absolute path to the css directory $full_templates_path The absolute path to the templates directory $css_main_file The absolute path to the css/main.css file $js_main_file The absolute path to the javascript/javascript.js file

    Company specific variables


    $company_id The company id (specified in Admin Portlet > Settings)
    $company_name The name of the company (specified in Admin Portlet > Settings) $company_logo The absolute path to the image of the company logo (specified in Admin Portlet > Settings) $company_url The URL of the company (specified in the Admin Portlet > Settings)

    User specific variables


    $user_greeting The greeting that the user get's upon page visit (specfied in My Account or Admin > Users) $user_email_address The user's email address (specfied in My Account or Admin > Users) $user_id The user's id (set in My Account) $language_id The ID of the user's language (specfied in My Account or Admin > Users) $time_zone The users's time zone (specfied in My Account) $user_comments The comments related to the user (specfied in My Account or Admin > Users) $user_login_ip The IP address that the user is currently logged on from $user_last_login_ip The last IP address the user logged on from

    User specific variables


    $is_default_user A boolean that specifies if the current user is the default one $user_location The user's location $user_organization The user's organization $user_group The group that the user belongs to $user_birthday The user's birthday $is_male A boolean that specifies if the user is male $is_female A boolean that specifies if the user is female $user_name The user's full name $user_first_name The user's first name $user_middle_name The user's middle name (if any) $user_last_name The user's last name

    Dock specific variables


    $show_add_content Boolean set to specify that the add content link can be displayed $add_content_text The text that gets displayed if the add content link is enabled $add_content_url The url where the add content link points to $layout_text The text to be displayed for the "Change Layout" link $layout_url The url where the "Change Layout" link points to $show_home Boolean set to specify that the "Home" link can be displayed $home_text The text to be displayed for the "Home" link $home_url The url where the "Home" link points to $show_my_account Boolean set to specify that the "My Account" link can be displayed $my_account_text The text to be displayed for the "My Account" link $my_account_url The url where the "My Account" link points to

    Dock specific variables


    $show_page_settings Boolean set to specify that the "Page Settings" link can be displayed $page_settings_text The text to be displayed for the "Page Settings" link $page_settings_url The url where the "Page Settings" link points to $show_sign_in Boolean set to specify that the "Sign In" link can be displayed $sign_in_text The text to be displayed for the "Sign In" link $sign_in_url The url where the "Sign In" link points to $show_sign_out Boolean set to specify that the "Sign Out" link can be displayed $sign_out_text The text to be displayed for the "Sign Out" link $sign_out_url The url where the "Sign Out" link points to

    Page specific variables


    $selectable A boolean set that specifies whether a page is "selectable", meaning is it part of the navigation $page The current page/layout object $the_title The current title of the page

    Navigation specific variables


    $nav_items An 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_navigation A boolean set to whether or not there are any pages in the $nav_items object These 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_url The 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 sampletheme/docroot/_diffs/templates/: #js ("$javascript_folder/jquery-1.8.2.min.js") Or <script 1.8.2.min.js"></script> src="$javascript_folder/jquery-

    Tutorial

    COIN SLIDER

    Create a folder slideshow in the Document and Media library of the


    community where you want to use the slider.

    Create a new file


    javascript.js file in filesystem. Add the following code to this file: $(document).ready(function() { $("#coin-slider").coinslider({ hoverPause: false }); });

    Upload the javascript.js file to the slideshow library

    Add the files to theme


    coin-slider-min.js, coinslider-styles.css, jquery-1.8.0.min.js

    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"></dynamicelement> <dynamic-element name="strawberry" type="Strawberry"></dynamicelement> <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 "maintext". 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

    You might also like