Hello I have some problems with templating pages.
I am returning from controller a view called list:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout/template">
<div layout:fragment="pageContent">
<p>LIST</p>
</div>
</html>
And I would like to put this into template where I have a lot of html stuff and:
<div layout:fragment="pageContent">Demo static page content</div>
But I am getting in web browser only list view.
How to put one view returned from controller to template using SpringStandardDialect?
So if i understand correctly, you want to inject that fragment which is called pageContent into some other html page (lets call it main.html for sake of it.
First thing to do is change the div in list to the following:
<div th:fragment="pageContent">
<p>LIST</p>
</div>
then in your main.html you would call the fragment via:
<div th:include="list::pageContent"></div>
or
<div th:replace="list::pageContent"></div>
Btw "list::pageContent" indicates that its in base folder, if its located in folder called example then it would be "example/list:pageContent".
here is the great example on Thymeleaf website: http://www.thymeleaf.org/doc/usingthymeleaf.html#including-template-fragments
Hope this helps, if not let me know.
Related
I know there was many question like this one but I still can't handle with that problem.
I have master layout where I put common elements for all subsites in my app.
(Inside common directory)
<!DOCTYPE html>
<html lang="pl">
<head>
#include('common.head')
</head>
<body>
<div id="l-wrap">
#include('common.header')
<article id="l-content">
#yield('content')
#include('common.dealer-area')
</article>
#include('common.footer')
#include('common.cookies')
</div>
If I understand correctly: if I want elements 'stick' to master template I make include, these elements will be this same on every subpage.
Second blade inheritance after first one and looks like this:
(Inside homepage directory)
#extends('common.template')
#section('content')
#yield('slider')
#endsection
And there is third blade which inheritance after second one:
#extends('home-page.template')
#section('slider')
<div class=slider> Some slider elements
</div>
#endsection
But view from third section doesn't show at all. I tried with #yield, #section...#endsection, or #section...#stop but it doesn't helped.
When I give second parameter in #yield function, after 'slider' in second blade:
#yield('slider', 'some text')
It shows correctly so I think problem is the last one blade, the third one, do I use inheritence incorrectly?
It's a little bit hard to explain what's my question about but I going to try :)
In custom projects where I'm using Smarty, I have an index.php file where all the basic settings for url handling and stuff is placed.
For example:
// Get information for the "about us" page
if($_GET['qs']=='about_us'){
$data['text'] = 'Lorem Ipsum...';
$data['other_stuff'] = 'dolor sit amet';
// Required template file
$data['tpl_Name'] = 'about.tpl';
}
At the bottom of this file I have a bit of code that fetches the correct template end sends it to a master_site template.
For example:
if (isset($data['tpl_Name'])){
$this->smarty->assign('content', $this->smarty->fetch($data['tpl_Name']));
$this->smarty->view('master_site.tpl');
}
In the master_site.tpl I can access the about.tpl by using {$content}
This {$content} variable will change for every page because the index.php is the page where all the data will be send to by requesting a page in my application.
Question: Is there a file in CodeIgniter thats available on every page so I can create something like above? Right now I have to use this piece of code (second example) in every function of my controller and that seems inefficient.
Of course i have to set $data['tpl_Name'] in every function but thats no problem.
Thanks.
There are a handful of ways to integrate a template library into CodeIgniter, and a lot of it depends on how you want to tie your templates together. The following may suit you well, or maybe just point you in the right direction. It's not the only Smarty/CI solution to templates, but it's the one I'm familiar with.
I wrote some code to integrate Smarty into CI. It allows you to use the standard way of loading views -- $this->load->view('view', $data) -- but you get to use Smarty's syntax within the files.
The way I handled a "master" template is through Smarty's {extends} (template inheritance docs). The individual views that I load all extend either a main template, or some other hierarchy that leads to one.
main_template.php:
<html>
<head>
<meta>
<meta>
<title>{$title|default:"Default Title"}</title>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<nav>
<ul>
<li>Page Link</li>
<li>Page Link</li>
<li>Page Link</li>
<li>Page Link</li>
</ul>
</nav>
<section class="main-content">
{block name=content}{/block}
</section>
<footer>
© 2013 Me!
</footer>
</body>
</html>
page.php:
{extends "main_template.php"}
{block "content"}
<h2>My Content Page</h2>
<p>Lorem ipsum and stuff...</p>
{/block}
The $title variable would be added to your view data like normal, and you'd load the page with the standard syntax:
$data['title'] = 'My page';
$this->load->view('page', $data);
I'll let you investigate the Smarty docs to get more in-depth details, but that's what I've done before. :)
i was looking at this website and i am interested on how did the developer managed to load different htmls in a single page without the current page being reloaded...
here is the website: http://demos.kendoui.com/web/validator/index.html...
for example if you clicked globalization in the Framework section, you can see the url changed, the body changed also but a part of the page remains (the top part) and the current page is not reloaded...
i am just starting in web development and i want to know this technique... i hope you can share it to me.... thanks :)
It is using ajax partial updates. You send request to the server and get portion of the page and then place it in some element, for example in div.
Normal:
<html>
<head>
<head>
<body>
<div id="divToUpdate"></div>
#Ajax.ActionLink("Call Partial", "MyAction", "MyController", AjaxOptions{ UpdateTargetId = "divToUpdate" })
<body>
</html>
Partial:
<span> here is my partial view which will be placed in "divToUpdate" div after clicking "Call Partial" Link </span>
I'm working on an ASP.NET MVC 3 application. I primarily come from a ASP.NET WebForms background. I am working on an application with a complicated layout scheme. Because of this, i was hoping to have all of my layout code in, well, _Layout.cshtml. My challenge is, there is custom javascript logic associated with each page. I've found that if this JavaScript is included in the middle of my page, it doesn't work. So what I wanted to do was move it elsewhere. But in order to do this, I need something similar to the ASP.NET WebForms PlaceHolder control. Ideally, I would like to be able to do something like this:
<body>
<div id="myLayout" style="background-color:Gray; height:100%;">
<div id="myContent" style="background-color:Silver;">
#RenderBody()
</div>
<div id="myFooter" style="background-color:Silver;">
Footer
</div>
</div>
#RenderScript()
</body>
Is there a way for me to do this? Or am I going to have to write every page individually?
Thank you!
Here's what i do, in each of your views create a section like this, put any html you want in it
Any View:
#section Scripts
{
<script src="#Url.Content("~/Scripts/myscript.js")" type="text/javascript"></script>
<!-- Styles, more scripts, etc -->
}
Then back in your _Layout.cshtml you can render the section anywhere you want, the second parameter says if the page requires a Scripts section or not.
_Layout.cshtml: (anywhere you want)
<head>
#RenderSection("Scripts", false)
</head>
I'm wondering can Velocity make what I want :)
For example I have
<html>
<meta>
<title>My title</title>
</meta>
<body>
<div id="content">
<!-- here is my dynamic content -->
</div>
<div id="right">static content</div>
</body></html>
Now. I have 4 actions in my Spring based application
create, update, login, home
Every action have it own template. For create is a big form, for update small form, for login, login form, for home lates news.
There are very much diffrent each from other. Now I want to dynamicly swap content in my
Can I create such template-container (i mean the header part and right div) with dynamic part ?
I don't want to get the actions response to variable and pass it to template. I want to have a simple template for example create.jsp or create.vm or create.html and I want that my app automaticly will take the template of the action and render it in my static template-container.
I hope it is clear
Why not use Tiles instead? It's designed for this scenario.
I've used Tiles 2 with JSP in several projects and I like it. However, with Velocity I prefer macros for simple templating system.
main.vm:
#macro(main)
<html>
<meta>
<title>My title</title>
</meta>
<body>
<div id="content">
$bodyContent
</div>
</body>
</html>
#end
hello.vm:
##main
Hello, World!
#end
Spring configuration:
<bean id="velocityConfigurer"
...
<property name="velocimacro.library" value="main.vm" />
</bean>
Maybe this is not so pretty, but it has the advantage that every view is the one who decides which layout applies, more like JSF does.