Conditional rendering in "Segments" - spark-view-engine

So I have the following spark partial
<default extension="null" footer="null" header="null" type="string"/>
<div class="mod ${extension}?{extension != null}">
<div class="inner">
<div class="hd ${header}?{header != null}">
<render segment="hd" />
</div>
<div class="bd">
<render />
</div>
<div class="ft ${footer}?{footer != null}">
<render segment="ft" />
</div>
</div>
</div>
I think that segments are really cool, but I only want it render if I use it. Maybe something like this:
<default extension="null" footer="null" header="null" type="string"/>
<div class="mod ${extension}?{extension != null}">
<div class="inner">
<render segment="hd">
<div class="hd ${header}?{header != null}">
<!-- write content here -->
</div>
</render>
<div class="bd">
<render />
</div>
<render segment="ft">
<div class="ft ${footer}?{footer!= null}">
<!-- write content here -->
</div>
</render>
</div>
</div>
Usage like:
<mod>
<p> My content </p>
<segment name="hd">
<h1> My Header </h1>
</segment>
</mod>
Basically I'm trying to get spark to only render segments that are used. In this instance I wouldn't want the <div class="ft" /> to render and I would want the <h1> wrapped by the <div class="hd">

Does something like this work for you:
<default extension="null" footer="null" header="null" type="string"/>
<div class="mod ${extension}?{extension != null}">
<div class="inner">
<div class="hd ${header}" if="header != null">
<render segment="hd" />
</div>
<div class="bd">
<render />
</div>
<div class="ft ${footer}" if="footer != null">
<render segment="ft" />
</div>
</div>
</div>
This would have the effect of not rendering the divs at all if header or footer was null. You could do the same for extension of course but I assumed you always want to at least render the body so I left it the way you had it. You can put an if="condition" on any node in Spark.
Am I missing something here?
Cheers,
Rob

Related

Convert jsp <c: import> code to thymeleaf

I am working on a spring boot application and trying to convert jsp to thymeleaf. I am stuck converting the following jsp code to thymeleaf: I do not know how to convert the <c:import> part.
<c:forEach items="${requestScope.users}" var="user" varStatus="status">
<div <c:if test="${!status.last}"></c:if>>
<c:import url="/user/checkUser">
<c:param name="username" value="${user.username}" />
<c:param name="firstName" value="${user.firstName}" />
<c:param name="lastName" value="${user.lastName}" />
</c:import>
</div>
</c:forEach>
There is no direct replacement in Thymeleaf. The best way is to create a fragement that has the HTML that lives at the /user/checkUser URL.
For instance, create src/main/resources/templates/fragments.html:
<div th:fragment="show-user-info(username, firstName, lastName)">
<div th:text="${username}"></div>
<div th:text="${firstName}"></div>
<div th:text="${lastName}"></div>
</div>
Now, you can use the fragment:
<div th:each="user : ${users}">
<th:block th:if="${!status.last}">
<div th:replace="fragments :: show-user-info(${user.username},${user.firstName},${user.lastName})"></div>
</th:block>
</div>

Blob load from database

I want display the video blob. How can I process for the src?
<div class="jumbotron col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3" th:each="film: ${films}">
<p th:text="${film.description}" />
<p th:text="${film.genre}" />
<p th:text="${film.nomFilm}" />
<p th:text="${film.titre}"/> <video src="${film.filmvideo}"></video>
</div>
<video width="400" controls>
<source th:src="${film.filmvideo}" />
</video>

Creating SharePoint Visual Webpart with Bootstrap

I am creating a responsive sharepoint visual webpart.
everything works fine and looks good but my mobile view is pretty much off.
the controls doesn't shrink to the lowest mobile size..
i tried many times but still i have the same issue..
<fieldset class="form-horizontal">
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="textinput">Name:
</label>
<div class="controls col-xs-8 col-md-7">
<asp:TextBox MaxLength="50" runat="server" ID="txtTitle" CssClass="form-control">
</asp:TextBox>
</div>
</div>
<div class="clearfix">
</div>
<!-- Select Basic -->
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="selectbasic">Ano:
</label>
<div class="controls col-xs-8 col-md-2">
<asp:DropDownList runat="server" ID="ddYear" CssClass="form-control">
</asp:DropDownList>
</div>
</div>
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="selectbasic">Mes:
</label>
<div class="controls col-xs-8 col-md-2">
<asp:DropDownList runat="server" ID="ddMonth" CssClass="form-control">
</asp:DropDownList>
</div>
</div>
<div class="clearfix">
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="textinput">Tema de Salud:
</label>
<div class="controls col-xs-8 col-md-7">
<asp:DropDownList runat="server" CssClass="form-control" ID="ddHealthTopic">
</asp:DropDownList>
</div>
</div>
<div class="clearfix">
</div>
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="textinput">Unidad administrativa:(por sus siglas en ingles entre paréntesis)
</label>
<div class="controls col-xs-8 col-md-7">
<asp:DropDownList runat="server" CssClass="form-control" ID="ddOrgUnit">
</asp:DropDownList>
</div>
</div>
</fieldset>
<br />
<div class=" col-xs-10 col-md-10">
<div class="input-group" >
<span class="input-group-btn">
<asp:Button CssClass="btn btn-primary" ToolTip="Buscar" runat="server" ID="btnSubmit" Text="Buscar" OnClick="btnSubmit_Click" />
</span>
</div>
</div>
Your code seems to be fine ....
Try to add (If its no there)
<meta name="viewport" content="width=device-width, initial-scale=1">
head section of your master page

Rendering pages in mvc3 from xml

I want some static pages of application to be rendered from XML i.e. i am planning to have a base page and xml containing structure of the page and xslt which will be transforming this xml to html and at runtime i will be rendering this html to my view and displaying this view
Is there any way/ example for doing the same. Please help
Here is the sample xml
<!DOCTYPE html>
<html>
<head>
<title>Create</title>
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript" />
<link href="/Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-ui.js" type="text/javascript" />
<script src="/Scripts/jquery.validate.min.js" type="text/javascript" />
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript" />
<script src="/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript" />
</head>
<body>
<div id="menucontainer">
<ul id="menu">
<li>
Rutu
</li>
<li>
Employee
</li>
</ul>
</div>
<h2>Create</h2>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript" />
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript" />
<form action="/Employee/Create" method="post">
<fieldset>
<legend>EmployeeDetailsModel</legend>
<div class="editor-label">
<label for="EmpName">EmpName</label>
</div>
<div class="editor-field">
<input class="text-box single-line" id="EmpName" name="EmpName" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="EmpName" data-valmsg-replace="true" />
</div>
<div class="editor-label">
<label for="DeptId">DeptId</label>
</div>
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-number="The field DeptId must be a number." data-val-required="The DeptId field is required." id="DeptId" name="DeptId" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="DeptId" data-valmsg- replace="true" />
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
</form>
<div>
Back to List
</div>
There is a good blog post here that describes how to create an HTML Helper to render the XSLT in a view. You just call the helper class from your view passing in the path to the XSLT and the XML. I have modified this helper so that you can also pass the XSLT and XML as strings to achieve the same results.
MvcContrib project provides an XSLT based view engine http://mvccontrib.codeplex.com/releases - I would suggest to check it out.

Tree structure with Check boxes in JQuery Mobile

Is it possible to have a tree structure with check boxes in JQuery MObile. I did not find any thing in demos.
I wanted something similar this image: Is there any alternative way we can achieve this?
Well it's just a concept but I have a couple working examples:
http://jsfiddle.net/JYn53/2/
http://jsfiddle.net/JYn53/4/
HTML
<div data-role="page">
<div data-role="content">
<div data-role="collapsible" data-collapsed="true">
<h3>
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
<label for="checkbox-1a">Cheetos</label>
</h3>
<p>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose as many snacks as you'd like:</legend>
<input type="checkbox" name="checkbox-1aa" id="checkbox-1aa" class="custom" />
<label for="checkbox-1aa">Cheetos</label>
<input type="checkbox" name="checkbox-2aa" id="checkbox-2aa" class="custom" />
<label for="checkbox-2aa">Doritos</label>
<input type="checkbox" name="checkbox-3aa" id="checkbox-3aa" class="custom" />
<label for="checkbox-3aa">Fritos</label>
<input type="checkbox" name="checkbox-4aa" id="checkbox-4aa" class="custom" />
<label for="checkbox-4aa">Sun Chips</label>
</fieldset>
</div>
</p>
</div>
</div>
</div>

Resources