I am evaluating spring boot + MVC + bootstrap . One problem I am facing is bootstrap's navbar highlighting problem in thymeleaf.
I hope thymeleaf can judge the tab which should be highlighted.
I searched and found this solution : Bootstrap Navbar Highlighting in Thymeleaf
In the containing(outer) page , it uses
<div th:replace="header::header('home')">
to be replaced header
</div>
to designate the home tab should be highlighted.
And in the contained (inner) page , it uses
<nav class="..." th:fragment="header(activeTab)">
<ul class="nav navbar-nav">
<li th:class="${activeTab == 'home'} ? 'active' : null ">Home</li>
</ul>
to judge this tab should be highlighted or not.
It works for every single page well , but not for layout.
In a layout page , the containing (outer) page is a decorator , which decorates other pages (home / about / contact ...) . The tab value is pending here .
for example
<div th:replace="header::header('home')">
to be replaced header
</div>
<div layout:fragment="content">
layout
</div>
<div th:replace="footer::footer">
to be replaced footer
</div>
I cannot pre-assign home tab in the layout file.
Is there any way to solve it ?
Can it judge by controller or even controller's method ?
environment :
springboot.version 1.3.0.M5
spring.version :4.2.1.RELEASE
Thanks a lot !
It is not a exact solution for your question but maybe you will like the idea. You may use request context path to recognize which tab is actually selected, so you can use ${#httpServletRequest.getContextPath()} and maybe then something like that:
<ul class="nav navbar-nav" th:with="view=${#httpServletRequest.getServletPath()}">
<li th:classappend="${#strings.startsWith(view,'/home')? 'active' : ''}">Home</li>
</ul>
Or you can use ControllerAdvice:
#ControllerAdvice(assignableTypes = { MyController.class })
public class MyControllerAdvice {
#ModelAttribute
public void addAttributes(#RequestParam Map<String, String> params, Model model, HttpServletRequest request) {
String activeTab = ... whatever
model.addAttribute("active_tab", activeTab);
}
}
There is one big disadvantage of using #ControllerAdvice. If you are planning to use Spring WebFlow to create multi-page forms (wizards) then it will not work because WebFlow does not use model attributes.
change this line <nav class="..." th:fragment="header(activeTab)">
to this
<nav class="..." th:fragment="header(activeTab='activeTab')">
it worked for me
Related
The goal is to create an admin area in my laravel project. I have a question about how to structure views and controllers to create the admin layout using laravel components.
Say I have a single controller (app/Http/Controllers/CategoryController.php) at the moment:
class CategoryController extends Controller
{
public function index()
{
return view('category.index');
}
}
View (resources/views/categories/index.blade.php):
<x-app-layout>
Categories Index Page
</x-app-layout>
The base layout is defined in resources/views/layouts/app.blade.php.
Functionality that is inside CategoryController is for admins only. I want to create an admin layout that inherits from the base layout. The category views then go inside the admin layout. The admin layout has a sidebar on the left with a navigation. The navigation points to controllers like CategoryController and UserController. The admin layout will expose various admin functionality.
What I've tried:
views/admin/admin.blade.php:
<x-app-layout>
<h1>TEST</h1>
{{$slot}}
</x-app-layout>
and views/admin/categories/index.blade.php:
<x-admin>
Categories Index Page
</x-admin>
Error:
Unable to locate a class or view for component [admin].
Any ideas what I'm doing wrong here? How should one structure the views for suche use case?
Create a resources/views/layouts/admin.blade.php that looks something like this:
#extends('layouts.app')
#section('content')
<div class="navigation">
...YourNavbar...
</div>
<div class="content">
#yield('content')
</div>
#overwrite
(Edit the code inside to match how you want your navbar/content to look like)
Now your resources/views/categories/index.blade.php should use #extends('layouts.admin') instead of #extends('layouts.app')
Edit: this is assuming your app.blade.php has a #yield('content') to show content
I'm new for thymeleaf.
The question is easy when it's in jsp. But it beats me in thymeleaf.
I want to complete this function as below:
if (page.number<=1)
html like this:
<li class="q-pagination-disabled">Pre</li>
else
<li>Pre</li>
But I can't finish it with th:if,th:href,th:remove and so on.
Does anyone know how to do it?
Try the following and let me know if it worked for you
<li th:if="${page.number le 1}" class="q-pagination-disabled">Pre</li>
<li th:if="${page.number gt 1}"><a th:href="#{/pages/{page}(page=${page.number-1})}">Pre</a></li>
I'm working on an ASP.NET MVC3 project. I'm using Twitter Bootstrap for my styling (not sure if that's important). The problem I have is that my Index.cshtml view of the Home controller has slightly different layout from the other pages (additional image navigation at the top which I don't show once the user select where he wants to go) but this is causing problems so I remove this part from the Index view to another partial view _ImageNavigation.cshtml and what I want to do is render the content of this partial view when Home/Index.cshtml is opened and I want to render it before the #RenderBody() also independently from it so I get the page the way I want it.
Right now in my _Layout.cshtml I have:
<div id="main">
<div class="container-fluid">
<div class="row">
<div class="col-md-10">#RenderBody() </div>
<div class="col-md-2">
//some static content
</div>
</div>
</div>
So I have two ideas first - adding #RenderPage("~/Views/Shared/_ImageNavigation.cshtml") right before #RenderBody() like :
<div class="row">
#RenderPage("~/Views/Shared/_ImageNavigation.cshtml")
<div class="col-md-10">#RenderBody() </div>
which produces the effect I want, but as you may guess _ImageNavigation is rendered on every page which is not what I want. I want it only on my Home/Index.cshtml so I guess the maybe some kind of check could be made to see what view is loading and render _ImageNavigation only if it's the correct view. Something like :
if (LoadingView == Home/Index.cshtml)
{
#RenderPage("~/Views/Shared/_ImageNavigation.cshtml")
}
Of course the above is just pseudo code, I don't know if it's possible and how to make such a check. And also I wonder if there is a way to do it in the page itself. I tried to put #RenderPage("~/Views/Shared/_ImageNavigation.cshtml") directly in my Home/Index.cshtml but obviously this way the page is rendered as if the code is written directly in the View and not loaded explicitly.
Maybe there's other way. This seems like pretty standard problem but I don't seem to find a proper solution.
When you have a smaller number of exceptions I like to use Sections. Here is a very simlified example:
Layout:
#if (IsSectionDefined("Nav"))
{
RenderSection("Nav")
}
else
{
<nav>default nav</nav>
}
#RenderBody()
Page with alternative nav:
#section Nav
{
<nav>My alternate nav</nav>
}
<div>This is the body for RenderBody</div>
You can read more on Defining Default Content For A Razor Layout Section - Phil Haacked.
I am using joomala 2.5 and developed my own component for showing table data in front end and added pagination. I'm getting pagination links, after clicking on the links 'next', 'prev' nothing happens.
What may be the problem?
In view.html.php I've added
$this -> pagination = $this->get('Pagination');
In default.php I've added
<div class="pagination">
<?php echo $this->pagination->getListFooter(); ?>
</div>
You haven't mentioned what you have done in you components model file. My advoice to you is just read this document carefully http://docs.joomla.org/J1.5:Using_JPagination_in_your_component & you will be easily apply pagination. The doc is perfect & its very simple to use pagination in Joomla.
Thank you.
Put your pagination buttons inside a tag and make sure the action url points to the same view (e.g. action = 'index.php?option=com_component&view=listview')
<form action=""...>
<div class="pagination">
<?php echo $this->pagination->getListFooter(); ?>
</div>
</form>
I've been using django for some time and I decided to start a new project but this time in Codeigniter, I used to extend the template file in my views and put content inside the {% block content %} block but it seens to be different in CodeIgniter.
In CodeIgniter I have something like:
<?php
$this->load->view('header');
$this->load->view('form_add_customer');
$this->load->view('footer');
?>
But is there a way to have an unique file with header, content and footer like this?
<html>
<head><title>Test</title></head>
<body>
<div id="header">Welcome</div>
<div id="content">
</div>
<div id="footer"> 2013 - Tectcom Telecom</div>
</body>
</html>
And put a view file with a form inside the content div?
Update your html (layout) file like this:
<div id="content"><?php $this->load->view($content) ?></div>
In your controller, call the view like this:
$view_data = array();
$view_data['content'] = 'form_add_customer';
$this->load->view('path/to/layout', $view_data);
I've used the "Most Simple Template Library for CodeIgniter" in the past with success for smaller projects. I believe it'll provide with the functionality that you require allowing you to have placeholders in a 'template' which you can update in your controller logic.