You are here

WebCenter 11g PS3 Tutorial: Building a WebCenter Template

In the past sections we have worked with the default template provided by JDeveloper. Let's be honest, that template is not really fancy so we'll create one that is much better.


I also have to be honest, my CSS and templating skills are not as good as my WebCenter skills. I bet they are even worse than yours. So for this part I asked for help to some CSS guys who also know WebCenter. John Sim came to the rescue and he provided me with a basic HTML template that I could easily translate into a WebCenter Portal template.

The template contains a lot of CSS which is very well written by John, some images and an HTML file.
For this part of the tutorial, you will need to download ViePortal_v3start.rar. This file contains the starting point for our tutorial.

In the pagetemplates folder of the project, you will also find a file called johnTemplate.jspx. This is the actual template that we will be creating in this part. I have added this as a reference so in case you have made an error, you can easily copy/paste the code from that file.

Enough chattering, now let's get started.

Creating a new template

A template in WebCenter (or an ADF application) is nothing more than a JSPX page with additional tags to define some regions. This means that you can use all the existing ADF or WebCenter components in your template.

Before we begin we must create the template JSPX file. In WebCenter, all templates should be added to the pagetemplates folder. If you don't do this, your template can not be used during runtime.

Right click on the pagetemplates folder and select New from the context menu.
In the left menu select JSF in the Web Tier section and select JSF Page Template from the right hand side:

Press OK.
Specify a name for the template like VieTemplate.jspx

Make sure the directory is set to the pagetemplates directory.
Specify a name for the template for example VieTemplate

Every template contains facets. A facet can be seen as a region in a template. It defines a section of the template that can be uses by other pages. You will create facets for each region that can be modified by the pages using this template. In our case, we don't allow the other pages to modify the header, footer and so on. We only allow them a section to insert their own content.

In WebCenter, a template should always have a facet called content. This facet will be used by the composer to make the page editable during runtime. Without the content facet, the composer can't do anything on the page so must add it.

Press the add button in the facet definitions and specify content as the name of the facet. A description is not mandatory so we can leave it empty.

The template definition should look something like this:

Press OK to create the template.

You now have an empty template. As a starting point, you can copy/paste the code from johnTemplate.jspx to this template. Copy line 1 thru 88 and use this as a replacement of line 1 thru 7 of the VieTemplate.jspx.

I will explain the code into more detail now. we will also add additional features later on in this tutorial.

Deep dive into the template code

First of all, I will not explain any basic HTML or how the CSS works. It's a WebCenter tutorial so I will only explain the WebCenter related stuff. If you however have questions about the CSS or HTML, you can always leave a comment and i will try to answer it or I'll ask John to pass by and share his knowledge.

Line 20: on this line we create a link to the administration section. In a WebCenter Portal, you can easily access the administration section by /admin. No difficult URL is required here. The rendered attribute is used to only display the administration link if the user has sufficient rights.

  1. <li>
  2.   <af:goLink destination="/admin"
  3.     id="lAdmin" styleClass="ico_preferences"
  4.     text="Administration"
  5.     rendered="#{securityContext.authenticated}"/>
  6. </li>

Line 21: If the user is logged in, we display the username.

  1. <li>
  2.   <a class="ico_favourites" href="">
  3.      <span>
  4.         <af:outputText id="oUser"
  5.          value="#{securityContext.userName}"/>
  6.       </span>
  7.     </a>
  8. </li>

Line 22: A logout link will be provided later on in this tutorial so for now the href is empty.

Using the navigation model in the template

In the previous section I have explained how you can build a navigation model for the users. In this part, we will use that navigation model to create menu for our users.

As you know, a navigation model can have different levels. Each node can have child nodes and each child node can also have child nodes and so on. In our template we need to be aware of this. We need to specify code for each level so it is important to know how many levels we want to show in our navigation.

In this template we only want to show 2 levels in our menu so we only need to provide code for those levels. If you have nodes on a 3th level than these nodes will not be displayed in our menu. This is a choice that you need to make as a designer of the template or one that has to be made by the business.

The first level of our navigation is generated on lines 33 thru 40.

  1. <ul class="linksList">
  2.   <c:forEach var="node"
  3.     varStatus="vs"
  4.     items="#{navigationContext.currentModel.listModel['startNode=/, includeStartNode=false']}">
  5.      <c:if test="${node.selected}">
  6.          <c:set value="${node.children}"
  7.            var="childNodes"
  8.             scope="session"/>
  9.      </c:if>
  10.      <li><af:goLink id="gLink"
  11.                destination="#{node.goLinkPrettyUrl}">
  12.                 <span>
  13.                  <b class="">
  14.                   <af:outputText value="#{node.title}"/>
  15.                  </b>
  16.                </span>
  17.              </af:goLink>
  18.      </li>
  19.   </c:forEach>
  20. </ul>

In the forEach loop, we loop thru the first level of the current navigation model. The navigationContext contains all the objects that are linked to the navigation. By using the EL statement #{navigationContext.currentModel} you reference the current navigation model. You can also reference the default model: #{navigationContext.defaultNavigationModel}. The difference between those 2 is that you can have pages that uses a different model. When you use the defaultNavigationModel, you always use the model that is configured as the default one. By using the currentModel, you use the one that is bound to the current page. In our case, the default and the current model are the same but it is important to know that these can be different!

In line 36 thru 38 we test if the current node is the selected one. If so, we set a variable containing its child nodes. We will be using this variable later on in the template to display the second level of our navigation. ${node.selected} contains a boolean that tells you whether or not the current node is selected. Selected means that the URL specified by the node is the same as the URL you are currently visiting.

On line 39 we are rendering the actual link to the node. As the destination we use the node.goLinkPrettyUrl which will return a clean URL pointing to the node. As the text of the link we use node.title which contains the content of the title attribute that you specify in the navigation model.

That's about it for the first level. For rendering the second level of the navigation, we don't really use anything new.
On line 49 thru 51 we check whether or not the childNodes variables has been set. Remember that we set this variable on line 37 but only if the node of the first level is selected. Suppose that we are on a page from the second level, than the childNodes variable will be empty. This is where line 50 comes into play. Because childNodes is empty, we are sure that the current selected node is a node from the second level and therefore the childNodes will be the nodes from the parent of the current selected node.

After that we have set the childNode, we use the same technique as with the first level. Just use a forEach loop to loop all the nodes and display them.

Adding the template as a portal resource

Now that we have finished our template, we should make it available to our portal so we can select it during runtime. This is done by right clicking on the VieTemplate.jspx file and select Create Portal Resource. In the popup specify a template name like Vie Template and press ok.

Right click on the Portal projct and Run it.

Once the portal has been launched, you will notice that the default template is still the basic one from JDeveloper. We will change this in the administration section. Login with an administrator and go to the administration section.
Open the Configuration tab and select Vie Template as the default page template.

There is no save or apply button because every time you change a value, it is automatically saved so just click on the Back to Portal link.

NullPointerException? Is this correct? Yes it is. The reason why you get a NPE at this point is because the portal expects that the template has a pageDefinition but because we haven't used the binding layer in our template, no pageDefinition has been created yet. This is why we get a NPE at this point.

Return to JDeveloper and right click somewhere in the code of the template. Select Go To Page Definition. A popup will ask you to create the page definition because it currently does not have one. Just press Yes. That's it.

Rerun the Portal project .

As you can remember from the first part of the tutorial, when you run the project in JDeveloper, all the runtime customizations are removed when you rerun the project. This means that we have to select the default page template again...
Yes I know, I should have said that you need to create the pageDefinition before setting the template the first time but this way you have seen the error and the next time you see it, i bet you know what is wrong.

So once you have set the default page template back to Vie Portal, the home page should look something like this:

How cool is this! Now click on the My Courses page and you should see the child pages appear in the blue banner.

Setting the default template

You've seen how to set the default template using the configuration tab at runtime. You can do the exact same from within JDeveloper. This way, it doesn't mind that we lose the runtime customizations. All the setting you manage in the configuration tab can also be set in the adf-config.xml file located in the descriptors/ADF META-INF folder in the Application Resourcesb.

Open this file in JDeveloper and open the source. Look for following entry:

  1. <portal:preference
  2.      id="oracle.webcenter.portalapp.pagetemplate.pageTemplate"
  3.      desc="Default Page Template"
  4.      value="/oracle/webcenter/portalapp/pagetemplates/pageTemplate_globe.jspx"
  5.      resourceType="Template" display="true"/>

The value attribute contains the default value so change this and replace pageTemplate_globe.jspx by VieTemplate.jspx:
  1. <portal:preference
  2.           id="oracle.webcenter.portalapp.pagetemplate.pageTemplate"
  3.           desc="Default Page Template"
  4.           value="/oracle/webcenter/portalapp/pagetemplates/VieTemplate.jspx"
  5.           resourceType="Template" display="true"/>

Rerun the portal and you should see that the template is already set. We don't need to go to the administration section anymore.

You'll also notice that we don't have a login form or link so we can't actually login to our portal.
Let's add the login functionality now.

Adding a login popup to the template

In the template provided by JDeveloper, you have a username and password input field on the page itself. In our template we want a popup instead that will be opened when the user clicks on the login link.

Add the code listed below after line 21.

  1. <li>
  2.    <af:commandLink styleClass="ico_logOut"
  3.       id="cmdLogin"
  4.       rendered="#{!securityContext.authenticated}"
  5.       text="Login" partialSubmit="true">
  6.         <af:showPopupBehavior
  7.            triggerType="click"
  8.            popupId="popLogin"/>
  9.    </af:commandLink>
  10.    <af:popup id="popLogin"
  11.        contentDelivery="lazyUncached">
  12.       <af:panelWindow id="dlgLogin" title="Login">
  13.           <af:subform id="fLogin" defaultCommand="bLogin">
  14.              <af:panelFormLayout id="pLogin">
  15.                  <af:inputText id="txtUser"
  16.                   value="#{o_w_s_l_LoginBackingBean.userName}"
  17.                   label="Username" required="true"/>
  18.                  <af:inputText id="txtPass"
  19.                   value="#{o_w_s_l_LoginBackingBean.password}"
  20.                   label="Password" secret="true"/>
  21.                    <f:facet name="footer">
  22.                      <af:commandButton text="Login" id="bLogin"
  23.                        action="#{o_w_s_l_LoginBackingBean.doLogin}"/>
  24.                    </f:facet>
  25.               </af:panelFormLayout>
  26.           </af:subform>
  27.       </af:panelWindow>
  28. </af:popup>
  29. </li>

Also replace the line that outputs the logout link with following code:

  1. <li>
  2. <af:commandLink id="bLogout"
  3.  rendered="#{securityContext.authenticated}"
  4.  action="#{o_w_s_l_LoginBackingBean.doLogout}"
  5.  styleClass="ico_logOut" text="Logout"/>
  6. </li>

Let's explain this code .

First of all, we'll add a commandLink that will only be rendered when we are not authenticated. This commandLink has a showPopupBehavior so it can open the login popup. We define the popup just below the commandLink.

In the popup we use a subform so it will not interfere with other elements in our page. The form has two inputText elements. One for the username and one for the password. The value is bound to a managed bean defined by the WebCenter framework. We use the same bean to logout. The bean is provided by the framework so we don't need to register or create it. The action on the commandButton in the footer of the form is bound to the doLogin action of that managed bean. This way, the actual login logic is handled by the framework ad we don't need to write any code for it.

The same can be done for the logout button. We just bind the action of our logout button to the doLogout action of the managed bean. This way it is handled by the framework. We also only render the logout link if we are logged in to the portal.

Now run the application and test the login popup.

Once you are logged in, you should see all the tabs and the administration link:

Also don't forget to test the logout link!

That's it. We have finished the template!

Configuring pages to use the default template

There is one more topic I would like to cover in this tutorial and I'll show why.
Run the Portal project , login and open the Registration page. You'll notice that it does not use the VieTemplate we created in this tutorial. Even if this template is set as the default one so how can this be?

The answer for this is quite easy. We explicitly told the Registration page to use that template. We didn't configured the page to use the default template. That's why it shows up with the other template.

In order to change this, we need to make some modification in the registration.jspx and in the pageDefinition of that file.

First of all, open the registration.jspx page in JDeveloper.

  1. <af:pageTemplate
  2.      viewId="/oracle/webcenter/portalapp/pagetemplates/pageTemplate_globe.jspx"
  3.      value="#{bindings.pageTemplateBinding}" id="pt1">

  1. <af:pageTemplate
  2.     value="#{bindings.pageTemplateBinding.templateModel}"
  3.     id="pt1">

As you can see, we have removed the viewId so we don't refer to an actual template anymore. The value attribute is bound to the bindings of the page. In order for this to work, we need to modify the bindings as well. In the bindings click on the link on the top of the page to open the actual pageDefinition file and go to its source.

Modify following line:

  1. <page path="oracle.webcenter.portalapp.pagetemplates.pageTemplate_globePageDef"
  2.          id="pageTemplateBinding" Refresh="ifNeeded"/>

And use this:
  1. <page viewId="${preferenceBean.defaultPageTemplate}"
  2.          id="pageTemplateBinding" Refresh="ifNeeded"/>

As you can see, we have removed the path attrubute and added the viewId which points to the preferenceBean.defaultPageTemplate. This way, the template we select in the configuration or in the adf-config.xml will be used.

Save all and rerun the portal again. Go to the registration page. Now it should use the default template. If you want to test if, just change the default template in the configuration section of the administration page back to the Globe PageTemplate. All the pages should now use that template instead of the VieTemplate.

You can download the application as it should be by the end of this part below.

In case something is not clear or you still have question, don't hesitate and leave a comment.
You can also take a look at chapter 5 of my WebCenter 11g PS3 Administration Cookbook. I also give an explenation on how to create templates and give some additional examples and information in the book.


Hi Yannick,

Thanks a lot for wonderful explaination on page templates.

What if we want to have two or three regions in our page template and can we achieve this?

If Yes then how to go about it?. Any suggestions on this.

Many thanks for a extremely obvious and practical submit. I am unquestionably a violator of many of these principles. I usually come across me conflicted when producing a blog post because I see myself writing greater than people today would like to examine, but I believe that I really need to do the topic matter justice by totally protecting it. I experience that by following a number of these rules I conclude up cutting out very important facets to your discussion. I guess you may have to uncover stability. =-=

Excellent tutorial Yannick. Are you going to touch on Page Styles too?


Haven't really included page styles yet but it seems like a good topic. I'll see where i can put it in.
Thanks for the tip.

Adding the template as a portlet resource

The word portlet must be portal or not?

Thanks for a good article.

Yes it should be portal. Thanks for mentioning it. I have corrected it.

Hi Yannick,

I like this tutorial too - could you give us an example how to create breadcrumbs component next to navigation? I try to implement it in my portal but it doesn't work for some reason :(

Hi Yannick,

First of all many thanks for this resources, they are wonderfull, really miles away from anything I have found on the net on WebCenter.

I'm having a problem when trying to run the application in the rar you provided, first I just replaced my old ViePortal dir with the one that comes in your rar, then I also tried the "Open Application ..." command on the Application Navigator.

This is the first exception I get when I try to run the app:

oracle.webcenter.lifecycle.LifecycleException: MDSException while creating an export set import lock

I also get a null exception when I try to navigate to any page, any ideas?

Maybe I could just add the new files in this rar to my old application and move on, that's what I'll be trying meanwhile.

Did you create the page definition file for the template as described in this tutorial? If you haven't done so, this could be the reason why you get a NPE. In WebCenter, every template is required to have a page defitinition.

About the other issue, normally there should be a more detailed error description somewhere in the stack. Can you provide that?

Thank you for the quick response Yannick, well I sorted out the error starting it from scratch from your Tutorial 3 files. It was in some weird state as I couldn't even right click any of the templates or I got an popup exception in JDeveloper.

I've just finished the this part 3 tutorial, I have seen in a previous comments there is the Page Styles facility, I have also heard of skins, could give us a quick intro of those so we can explore for ourselves?

Thank you again, this is being my main resource to bootstrap Oracle Webcenter development and I have just asked my boss to buy your book.

Hi, Yannick.
I have already done this tutorial, it's all work.
But i have some questions.
When we create new page template we add a facet definition named "content" what happen if we use another name instead of "content"? has it any signification?

The content facet is important for the framework so it really needs to be "content".
When you create a page at runtime and you assign your template to it, the framework will add the composer inside the content facet. If you don't have a facet called "content", the composer can not be added to the page and you are not able to edit the page.

Hi, I'm triying to do the opposite thing, I have a template binded with:

but I want a static template so I modify this tag with:

but I have this error:

"JSF page template at /oracle/webcenter/portalapp/pagetemplates/pageTemplate_skyMain.jspx requires a model binding"

So, How can I fix this problem?

Thanks in advance.

First I would like to thank you for wonderful tutorial.

Issue faced : Irrespective of the redirect in index.html, it is redirecting to aboutUs and giving some error. How I resolved this error is by deleting the cookies , browsing history and other files.
I was using InternetExplorer 8.

I am new to webcenter so don't know that there could be any other settings are required to stop this caching. So reporting it here in case you want to have a look in to it.


I noticed this behaviour before. It might be becuase of the local caching of your browser. You can remove the browser cache and temp files. Just go to Tools, Internet Options and press Delete from the browsing history. From there you should be able to remove temp files and so on.

How or where do I specify the doctype for the pages. By default it loads with

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">

i need to traverse back to the login.jspx once user hit logout & none of the page shud be visible to the anonymous user.


Hi Yannick,
First of all, thank you for these tutorials - they are really helpful for a novice like me. After I finished this tutorial, I cannot see any tabs, just the links for home, login, My Courses, etc.
Any ideas?
Thanks, Grace

Seems like you are missing the stylesheet. Can you double check to see if you have the correct style sheet reference in the template?

After changing the template reference in adf-config.xml, when I launch, the Home displays in new template. But when I click on the "About Us", or any othe rpage, it takes me default template. Going to Home again uses the new template. Any idea?

After i got null pointer ... i have created the page definition file and re-run the project then i have set the default page template to vie template then when i click the back to portal link ... i do not get the new UI as shown in example... i still get the same old template why is this so. I am continuing in the same project from the previous two chapters.

In continuation to my last post even after changing the adf-config.xml file in ADF-META-INF to VieTemplate still after i re-run the portal it displays the old default template which oracle provided and not my VieTemplate.... When i clicked on page templates i found that VieTemplate is in Hidden mode .. how to make this available any idea ?

I wrote the tutorial on PS3. That version did not had the "hidden" and "available" status properly implemented. In PS5 a lot of these statusses seem to work.
In order to show it, just go to the administration console of the portal and select Page Templates in the list left. Select the vieTemplate and select Show from the dropdownlist in the edit menu.

After making the above change still when i click the back to portal link i get the same old default template
Then i went to jdev and in application properties ... mds.. i selected the preserve customization across application runs
and i re ran the project and made the vie template available ... but again after rerunning the portal..... the customization that i did at run time has not been preserved... now again the vietemplate goes back to hidden status..
How can we make Vietemplate available at jdev level ?

Strange... I Wil see if I can reproduce the problem and see if i can make it work.
Which version of JDev are you using. I might just rewrite the app in PS5 so it matches the latest version.

I am using

I have deleted my project on which i worked the first two chapters
I downloaded the one mentioned at the starting of this 3rd chapter as ViePortal_v3start.rar
And i was able to complete all the steps successfully as mentioned in this chapter.


Hi Yannick,
Your tutorial demo (ViePortal) for WebCenter, and many others on the Web, use div, li, ul and other HTML tags instead of the one that come with WebCenter (like the panelGroupLayout, panelStretchLayout, etc.). I wanted to know why you did these choices, especially on the display aspect.

I have myself many problems with layout and scrolls with the default WebCenter tags, and I'm thinking about moving to a solution using more HTML tags.

What is your opinion about it?

I was able to do this tutorial till the last step. After i change the registration.jspx source code and in the page def file of that when i run the portal login and click on registration link i am getting null pointer error.

When i looked at registration.jspx source code there it is showing in yellow color line marked and the error it shows is Reference"bindings.pageTemplateBinding.templateModel" not found

I have downloaded the project that u provided at the beginning of this tutorial and i checked other pages like aboutUs.jspx etc for all the pages in the source code it is showing the same error.

Can you please let me know on this as to exactly what is happening here. why is it unable to lookup for templateModel where it is defined.


This error is coming

oracle.jbo.JboException: JBO-29000: Unexpected exception caught: java.lang.NullPointerException, msg=null
at oracle.adf.model.binding.DCBindingContainerReference.createBindingContainer(
at oracle.adf.model.binding.DCBindingContainerReference.getBindingContainer(
at oracle.adf.model.BindingContext.get(
at oracle.adf.model.BindingContext.findBindingContainer(
at oracle.adf.model.BindingContext.findBindingContainerByPath(
at oracle.webcenter.portalframework.sitestructure.handler.CustomViewHandler.setBindingELVariable(
at oracle.webcenter.portalframework.sitestructure.handler.CustomViewHandler.createViewRoot(
at oracle.webcenter.portalframework.sitestructure.handler.CustomViewHandler.createView(
at oracle.adfinternal.view.faces.lifecycle.LifecycleImpl._restoreView(
at oracle.adfinternal.view.faces.lifecycle.LifecycleImpl._executePhase(
at oracle.adfinternal.view.faces.lifecycle.LifecycleImpl.execute(
at javax.faces.webapp.FacesServlet.service(
at weblogic.servlet.internal.StubSecurityHelper$
at weblogic.servlet.internal.StubSecurityHelper.invokeServlet(
at weblogic.servlet.internal.ServletStubImpl.execute(
at weblogic.servlet.internal.TailFilter.doFilter(
at weblogic.servlet.internal.FilterChainImpl.doFilter(
at oracle.portlet.client.adapter.adf.ADFPortletFilter.doFilter(
at weblogic.servlet.internal.FilterChainImpl.doFilter(
at weblogic.servlet.internal.FilterChainImpl.doFilter(
at oracle.adf.model.servlet.ADFBindingFilter.doFilter(
at weblogic.servlet.internal.FilterChainImpl.doFilter(
at org.apache.myfaces.trinidadinternal.webapp.TrinidadFilterImpl$FilterListChain.doFilter(
at oracle.adfinternal.view.faces.activedata.AdsFilter.doFilter(
at org.apache.myfaces.trinidadinternal.webapp.TrinidadFilterImpl$FilterListChain.doFilter(
at org.apache.myfaces.trinidadinternal.webapp.TrinidadFilterImpl._doFilterImpl(
at org.apache.myfaces.trinidadinternal.webapp.TrinidadFilterImpl.doFilter(
at org.apache.myfaces.trinidad.webapp.TrinidadFilter.doFilter(
at weblogic.servlet.internal.FilterChainImpl.doFilter(
at oracle.wcps.client.PersonalizationFilter.doFilter(
at weblogic.servlet.internal.FilterChainImpl.doFilter(
at oracle.webcenter.content.integration.servlets.ContentServletFilter.doFilter(
at weblogic.servlet.internal.FilterChainImpl.doFilter(
at oracle.webcenter.lifecycle.filter.LifecycleLockFilter.doFilter(
at weblogic.servlet.internal.FilterChainImpl.doFilter(
at oracle.adf.library.webapp.LibraryFilter.doFilter(
at weblogic.servlet.internal.FilterChainImpl.doFilter(
at Method)
at weblogic.servlet.internal.FilterChainImpl.doFilter(
at oracle.dms.servlet.DMSServletFilter.doFilter(
at weblogic.servlet.internal.FilterChainImpl.doFilter(
at weblogic.servlet.internal.RequestEventsFilter.doFilter(
at weblogic.servlet.internal.FilterChainImpl.doFilter(
at weblogic.servlet.internal.WebAppServletContext$ServletInvocationAction.wrapRun(
at weblogic.servlet.internal.WebAppServletContext$
at weblogic.servlet.internal.WebAppServletContext.securedExecute(
at weblogic.servlet.internal.WebAppServletContext.execute(
Caused by: java.lang.NullPointerException
at oracle.adfinternal.view.faces.model.binding.FacesTemplateContainerDef.createNestedTemplateBinding(
at oracle.adfinternal.view.faces.model.binding.FacesTemplateContainerDef.createExecutableBinding(
at oracle.adf.model.binding.DCBindingContainerDef.createExecutables(
at oracle.adf.model.binding.DCBindingContainerDef.initializeBindingContainer(
at oracle.adf.model.binding.DCBindingContainerDef.createBindingContainer(
at oracle.adf.model.binding.DCBindingContainerReference.createBindingContainer(
... 59 more

This issue is fixed

actually in .jspx file i was having the below code

which i replaced with

just because value= thing was not there in the same line as af:pageTemplate the error was coming


Hi, I have a task flow in which there is one .jsff page, which has 2 Panel Group Layouts. In first one, there is a button, which has an action to close or open second Panel Group Layout. When i add this task flow to my template and Preview it, it is working fine(on clicking button, second panel group layout is getting opened up)) BUT when i make a page and set its template to the one i made. On that page, this task flow is not working(i.e. on clicking button, second panel Group Layout does not open up). Not even showing any error in logs. Can u help me by telling why is this happening..??

could you perhaps share the problem on the official forums:
It's easier for other people to help as this is not related to my tutorial.

Sir when I've crsted pageDef for VieTemplate and then run the project for first time it reported me that error in browser , but for the next time it wont run in browser and Jdev. is reporting that

Target Portal.jpr is not runnable, using default target index.html.
I also resolve 1 of my previous error by changing to /home in faces-config.xml file

First of all i would like to thank you for incredible tutorial.
I would like to know more about the code you replaced in register.jspx and its binding to bind it with the new template like what every line mean.

Take a look at this part of the tutorial:
This explains the registration process.

Theme by Danetsoft and Danang Probo Sayekti inspired by Maksimer