Thymol Templating Error

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

Thymol Templating Error

jjbenson
Administrator
(Copied from http://forum.thymeleaf.org/Thymol-Templating-Error-td4028725.html)
I'm trying to get thymol up and running in order to make my web designer's life a lot easier. However, I can't seem to figure out how to get it working in my site (it works fine in the examples). I'm using thymeleaf's decorator templating (very similar to apache tiles) in my site. Here's the code for the web page:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org"
    th:include="components/layout :: loggedin">
    <div th:fragment="content">
	    <p>download</p>
    	    <p>You can download the installer here! Make sure to check out the <a href="getting-started"> getting started page</a>.</p>
	    <button class="btn btn-md btn-primary " type="submit">download</button>
	<script type="text/javascript" src="http://cdn.jsdelivr.net/thymol/latest/thymol.min.js"></script>
        <script type="text/javascript"> var thDebug = true;</script>
    </div>
</html>

The page includes a template, called loggedin:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org"
    th:fragment="loggedin">
    <head th:include="components/meta :: head" /> 
    <body>
        <div th:include="components/meta :: js" />   
        <div th:include="components/header :: loggedin" />
        <div class="jumbotron">
    	    <div class="container-fluid">
       	        <div id="content">
    	            <div th:include="this ::content" />
    		</div>
    	</div>
    </div>
    <footer th:include="components/footer :: basic" /> 
    <script type="text/javascript" src="http://cdn.jsdelivr.net/thymol/latest/thymol.min.js"></script>
    <script type="text/javascript"> var thDebug = true;</script>
    </body>
</html>

Now, when I load this page in my browser, I receive the following alert message:

    thymol.processImport fragment import failed: file:///components/layout fragment: loggedin

So, what am I doing wrong? I've tested out thymol with the examples provided in the website; the pages were served as expected. Additionally, I've developed everything within a servlet container (tomcat) and the pages were also served as expected. How can I get them working with Thymol?
Reply | Threaded
Open this post in threaded view
|

Re: Thymol Templating Error

jjbenson
Administrator
Hi Aquowf,

I assume that by "thymeleaf's decorator templating" you mean the Thymeleaf Layout Dialect, if so, can I remind you that Thymol won't be able to process any of the layout dialect extensions in your project.

Having said that, you ought to be able to get something to work.

Please note that in your first html file, (by default) Thymol will look for the "loggedin" fragment in a template file called "layout.html" in a subdirectory of the the first file's directory called "components".

If you create that directory structure and copy your second file to "./components/layout.html" relative to your first file, then set the Thymol load protocol to blank in the first file by altering the 2nd script tag to:
   
<script type="text/javascript"> var thDebug = true; var thProtocol = "";</script>

This should now allow you to load the "loggedin" fragment. Doing this will open up the next set of issues which are that the nested fragments included by "loggedin" may be similarly inaccessible, but you can apply the same technique to fixing those.

Kind Regards,

  Jim
Reply | Threaded
Open this post in threaded view
|

Re: Thymol Templating Error

aquowf
Jim,

Yes, sorry, I do mean Thymeleaf's layout dialect. I'm not using any extensions (although I'm not entirely sure and google is not much help here) so that limitation shouldn't be a problem.

Yes, here's the current directory structure of the web application:

templates
    components
        footer.html
        header.html
        layout.html
        meta.html
        sidebar.html
    download.html
    otherpages.html

To your point, there was a problem with the way I referred to directory structure in the layout file and so, I've changed the include paths to be relative:

download:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      th:include=".components/layout :: loggedin">

layout:

<head th:include="../components/meta :: head" />

However, I'm still receiving the same parsing error as before. I tried a whole slew of variants such as: referring to the layout file in different ways (./components/layout, for example), changing the directory structure by placing the layout file in the same folder as the download file, and removing the file extension to layout. What do you think?
Reply | Threaded
Open this post in threaded view
|

Re: Thymol Templating Error

jjbenson
Administrator
Hi Aquowf,

  Strange..

  Here is my download.html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org"
    th:include="components/layout :: loggedin">
    <div th:fragment="content">
	    <p>download</p>
    	    <p>You can download the installer here! Make sure to check out the <a href="getting-started"> getting started page</a>.</p>
	    <button class="btn btn-md btn-primary " type="submit">download</button>
	<script type="text/javascript" src="http://cdn.jsdelivr.net/thymol/latest/thymol.min.js"></script>
    <script type="text/javascript"> var thDebug = true; var thProtocol = "";</script>
    </div>
</html>

and my components/layout.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org"
    th:fragment="loggedin">
    <head th:include="components/meta :: head"/> 
    <body>
        <div th:include="components/meta :: js" />   
        <div th:include="components/header :: loggedin" />
        <div class="jumbotron">
    	    <div class="container-fluid">
       	        <div id="content">
    	            <div th:include="this ::content" />
    		</div>
    	</div>
    </div>
    <footer th:include="components/footer :: basic" /> 
    <script type="text/javascript" src="http://cdn.jsdelivr.net/thymol/latest/thymol.min.js"></script>
    </body>
</html>

I browse to download.html and get a sequence of alerts, the first one says:
thymol.processimport fragment import failed: components/meta fragment:head

This means that the initial include in download.html worked correctly and the first include in layout.html fails followed by the others (as expected).

Here is the resultant html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
    <div>
        <div>
            <div class="jumbotron">
                <div class="container-fluid">
                    <div id="content">
                        <div>
                            <p>download</p>
                            <p>
                                You can download the installer here! Make sure to check out the <a href="getting-started"> getting started page</a> .
                            </p>
                            <button class="btn btn-md btn-primary " type="submit">download</button>
                            <script src="http://cdn.jsdelivr.net/thymol/latest/thymol.min.js" type="text/javascript"></script>
                        </div>
                    </div>
                </div>
                <footer>
                    <script src="http://cdn.jsdelivr.net/thymol/latest/thymol.min.js" type="text/javascript"></script>
                </footer>
            </div>
        </div>
    </div>
</body>
</html>

Which browser and OS are you using?

Kind Regards,

   Jim
Reply | Threaded
Open this post in threaded view
|

Re: Thymol Templating Error

aquowf
Jim,

Thanks for your continued help, I do appreciate it.

I'm using chrome on OSX. I tried it in Safari and Firefox and everything works. With some trial and error I've managed to get thymol to show the correct page. For anyone referencing this later, changing my layout to include other items as

  <head th:include="components/meta :: head"></head>   

instead of

  <head th:include="components/meta :: head" />   

solved some problems for me.

Additionally, leaving the footer as

    <footer th:include="components/footer :: basic" /> 

instead of closing it the other way kept the content from appearing twice in the page. I don't know why this works, but it works for me.

Collin
Reply | Threaded
Open this post in threaded view
|

Re: Thymol Templating Error

jjbenson
Administrator
Hi Collin,

  I'm very pleased that you finally got things working, and you're very welcome to the help, I so hate it when you try something new and stumble at the first hurdle.

  Thanks are due back to you in turn for reporting back on Chrome and OSX - I'll try to add your findings to the relevant documentation (http://www.thymoljs.org/issues/browser-constraints.html?issu) - thank you!

  Cheers,

    Jim