Install theme into an existing project

[ferran]

Hello,
I am using the Barcelona theme and I have been trying to install it into my project. The problem is when I am trying to insert the topbar and menu. Once I have included, the menu does not open any option and the topbar neither. It does not give me any error or problem in java, but I can not understand why, doing all the stuff that the Barcelona Theme has, I can not reproduce it. I have the same structure of templates and also the files indluded into the template.

I have discovered that the theme has more js included than mine. These files :

Code: Select all

<link type="text/css" rel="stylesheet" href="/barcelona/javax.faces.resource/fa/font-awesome.css.xhtml?ln=primefaces&amp;v=6.0">
<link type="text/css" rel="stylesheet" href="/barcelona/javax.faces.resource/components.css.xhtml?ln=primefaces&amp;v=6.0">
<script async="" src="https://www.google-analytics.com/analytics.js"></script>
<script type="text/javascript" src="/barcelona/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&amp;v=6.0"></script>
<script type="text/javascript" src="/barcelona/javax.faces.resource/core.js.xhtml?ln=primefaces&amp;v=6.0"></script>
<script type="text/javascript" src="/barcelona/javax.faces.resource/components.js.xhtml?ln=primefaces&amp;v=6.0"></script>
<script type="text/javascript" src="/barcelona/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&amp;v=6.0"></script>    

The other parts of the theme works perfectly fine.

Thank you in advance,
Ferran

[mert.sincan]

Do you have layout.js in your project?

Also, these links can help to you;
https://www.dropbox.com/s/2p74g63wldbov ... t.mp4?dl=0
https://www.dropbox.com/s/s9cle2xqbwbu8 ... t.mp4?dl=0

[ferran]

Yes, I have already included.

I am using myfaces instead of faces. Could be this the problem?

Do you have layout.js in your project?

Also, these links can help to you;
https://www.dropbox.com/s/2p74g63wldbov ... t.mp4?dl=0
https://www.dropbox.com/s/s9cle2xqbwbu8 ... t.mp4?dl=0

[ferran]

I have try to change it in Barcelona theme and it works. I don't know what to try it. I have done all steps from the video and still is not working.

I am using PrimeFaces 6.1. I have change it to 6.0 and the result was the same....

I don't know what to do. My head right now is:

Code: Select all

<h:head>
    <f:facet name="first">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
        <meta name="apple-mobile-web-app-capable" content="yes" />
    </f:facet>
    <title>
        <ui:insert name="title">Test Dashboard</ui:insert>
    </title>

    <h:outputScript name="js/nanoscroller.js" library="barcelona-layout" />
    <h:outputScript name="js/layout.js" library="barcelona-layout" />
    <h:outputScript name="js/ripple.js" library="barcelona-layout" />

    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"/>
</h:head>

and I can not understand why core.js and other JS is not include automatically.

I have try it also to insert manually and it does not work. I have try to insert these JS files (I have copied from the .jar):

Code: Select all

<h:outputScript name="js/jquery/jquery.js" library="barcelona-layout" />
<h:outputScript name="js/components.js" library="barcelona-layout" />
<h:outputScript name="js/core.js" library="barcelona-layout" />
<h:outputScript name="js/jquery/jquery-plugins.js" library="barcelona-layout" />

Can you help me?

[ferran]

I am attaching more tips to find the problem. Into the head, once I have initialized the application (on left is Barcelona template without any modification) and on right my application. I have followed the video steps and I have this head tag with all the differences.


(link: http://i.grab.la/07512-a6b2ab64-2efa-47 ... 7fa7d8.png)

Do you know what I am doing wrong?

[ferran]

Finally, I got the solution.

I have removed every div above the overlay menu, like:

Code: Select all

<div class="layout-wrapper layout-overlay-menu">
        <ui:include src="./topbar.xhtml" />
        <ui:include src="./menu.xhtml" />

        <div class="layout-main">
            <div class="layout-main-content">
                <ui:insert name="content"/>

                <!--<ui:include src="./footer.xhtml" />-->
            </div>
        </div>
    </div>

With that change, everything works fine. Maybe the developer would modify to find the right root instead getting the first one.

[mert.sincan]

Glad to hear, thanks a lot for the update!