Liferay make you expert: Single_Page_Application in liferay 6.2 (Dashboard theme)

Topic: In this we are creating a single page application . The below steps it will show you how we can done . before that have a knowledge in single page application.

Explanation:In this first we will create a Dashboard theme using freemaker and styled . after that once the dashboard theme is created and running successfully in server than we will create a singleportlet(Single page application) after that accordint to flt theme , we will do how the single page application works in theme and reloading of server will stop .

The following steps:

Step1:open the eclipse make a liferay project .
(See the image)

Step2: select the freemaker and styled .

Step 3:-Go to docroot under _dff folder paste the code.

(the code is in bottom).

Step4:- Then deploy the theme and see the theme is there and select the dashboard1 theme .

note:- next is how to create a single page application

Step5:create a portlet "Singleportlet".

(See the image)

Step6: In view .jsp paste the code.

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>

<portlet:defineObjects />

<div id="div-1"> This Is Nav Item Click Content-1 </div>

<div id="div-2"> This Is Nav Item Click Content-2 </div>

<div id="div-3"> This Is Nav Item Click Content-3 </div>

Step7: Then deploy the project.

Note: The connection of dashboard theme and single page application.

Step8: Go to dashboard theme under _dffs folder open the

portel_normal.ftl and paste the below code .

Jus check this line is there .

<@liferay.language key="skip-to-content" />

</a>

<#if !hide_header_for_guests || is_signed_in>

<@liferay.dockbar />

<#if show_logo_in_header || show_site_name>

</#if>

</header>

</#if>

<#if has_navigation && !page_group.isControlPanel()>

<#include "${full_templates_path}/navigation.ftl" /> </#if>

<#if show_page_title && !page_group.isControlPanel()>

<h2 class="page-title"> <span>${the_title}</span> </h2> </#if>

${theme.include(body_top_include)}

<#if !is_signed_in> ${theme.runtime('58')} </#if> ${theme.runtime('SinglePortlet_WAR_SinglePortletportlet')}

</div>

<#if my_show_footer=="true">

<p class="powered-by"> ${my_footer_text} </p>

</footer>

</#if>

</div>

</div> ${theme.include(body_bottom_include)} ${theme.include(bottom_include)}

</body>

Step9: Now open the navigation.ftl and check the below code.

<#if show_menu_minimize>

</#if>

<ul aria-label="<@liferay.language key=" site-pages " />" role="menubar" id="menu-list">

<#list nav_items as nav_item>

<#assign nav_item_attr_has_popup="" />

<#assign nav_item_attr_selected="" />

<#assign nav_item_css_class="" />

<#if nav_item.isSelected()>

<#assign nav_item_attr_has_popup="aria-haspopup='true'" />

<#assign nav_item_attr_selected="aria-selected='true'" />

<#assign nav_item_css_class="selected" />

<#if nav_item.isChildSelected()>

<#assign nav_item_css_class="" /> </#if>

</#if>

<li ${nav_item_attr_selected} class="${nav_item_css_class}" id="layout_${nav_item.getLayoutId()}" role="presentation"> <a aria-labelledby="layout_${nav_item.getLayoutId()}" ${nav_item_attr_has_popup} href="#" id="${nav_item.getName()}" ${nav_item.getTarget()} role="menuitem"><span class="menuitemicon">${nav_item.icon()}</span><span class="menuitemtitle">${nav_item.getName()}</span></a>

</li>

</#list>

</ul>

</nav>

<#if menuMinimizeByDefault>

console.debug('attempting');

AUI().ready('aui-base', 'liferay-hudcrumbs', 'liferay-navigation-interaction', 'liferay-sign-in-modal', function(A) { // Auto-open-close navigation bar on hover console.debug('binding'); AUI().one('#navigation').on('hover', function() { AUI().one('#navigation').removeClass("minimizedNav"); }, function() { AUI().one('#navigation').addClass("minimizedNav"); }); });

</script>

</#if>

Step10:open the main.js and paste the below code

$('#menu-list').on('click', 'a', function(e) {

console.log('nav click');

e.preventDefault();

e.stopPropagation();

var navItemName = $(this).attr("id");

console.log("pageName ::" + navItemName.toLowerCase());

var content = '';

if (navItemName.toLowerCase() == "welcome") {

content = $("#div-1").html();

} else if (navItemName.toLowerCase() == "page1") {

content = $("#div-2").html();

} else if (navItemName.toLowerCase() == "page2") {

content = $("#div-3").html();

} else {

content = "Error:Page Not Found."

}

console.log("dynemic content is:" + content);

$("#mycontent").html(content);

$(this).closest('ul').find('.selected').removeClass('selected');

$(this).closest('li').addClass('selected');

});

function pageOnLoad() {

console.log('on page load event call');

$("#mycontent").html($("#div-1").html());

}

Step11:Now open the portal_normal.ftl then paste the portletid of the single portlet that

had created first.

For portlet id;

follow te steps

Go to mysql,

use lportal;

select * from portlet ;

paste the portletid and put in the portal_normal.ftl.

Step 12:Now deploy the theme , now theme will be connected with single page application in liferay 6.2 and last the server will not reload if we click any tabs in navigation panel.

Code_Theme_Spa_Link

hope this helps you...

Liferay make you expert

Wednesday, 16 December 2015

Single_Page_Application in liferay 6.2 (Dashboard theme)

Code_Theme_Spa_Link

No comments:

Post a Comment