I am creating a simple web application to try out JSF2 with PrimeFaces, so far really impressed by how much it can do out of the box. Going through various tutorials and articles I have a question about properties in templates and whether it is possible to insert these.
I know I can insert chunks of HTML content in templates, for example:
<title>
<ui:insert name="title">Default Title</ui:insert>
</title>
But in some cases it would be useful to insert at property level. The specific one I thought of was TabMenu, where if you were using a TabMenu for navigation (and you want the same TabMenu on every page so it makes sense to use a template), you would want to set the 'activeIndex' differently depending on which page you were looking at. This however does not seem to work in a template file:
<p:tabMenu <ui:insert name="activeIndex">activeIndex="0"</ui:insert>>
<p:menuitem value="Overview" outcome="main" icon="ui-icon-star"/>
<p:menuitem value="Demos" outcome="demos" icon="ui-icon-search" />
<p:menuitem value="Documentation" outcome="docs" icon="ui-icon-document"/>
</p:tabMenu>
Hope that makes sense. Is there a way to do this, or is this design just completely wrong and there is a much better way of doing it?
Pass it as <ui:param>.
E.g. in template client:
<ui:composition template="/WEB-INF/templates/some.xhtml">
<ui:param name="activeIndex" value="0" />
...
</ui:composition>
and in master template:
<p:tabMenu activeIndex="#{activeIndex}">
Related
I created a lot of Thymeleaf templates during the last weeks, using both html5 and textual mode. In these templates I need to use a lot of th:each statements that iterate over the Context variables.
On these variables I ofter access their getters which in turn return other objects which I have to use getters on and so on.
In order to process the data returned I need to apply stuff like strings.defaultString(...)
All these combined statements make it difficult to read and comprehend what is going on. Many lines of my templates are so long that they can't be read without scrolling horizontally.
I searched for best practices but only found some that describe how to create "base templates" that give general advice on using Thymeleaf in combination with Spring or mention how to include common fragements.
Is there best practice how to format / wrap Thymeleaf statements without causing negative effects on created html or text (for example unwanted line breaks) ?
You can create variables using th:with so that you dont have to do frequent objA.propB.propC. So you assign th:with="propB=${objA.propB}"
Then creating reusable fragments with parameters in another good approach so any HTML which is getting repeated can be extracted into a fragment and the data required for that fragment can be passed as argument.
Update:
<div class="profile-user-info">
<th:block th:insert='~{::profileInfoRow("Name", ${user.name}) }' />
<th:block th:insert='~{::profileInfoRow("Age", ${user.age}) }' />
<th:block th:insert='~{::profileInfoRow("Location", ${user.location}) }' />
</div>
<div th:fragment="profileInfoRow(label, value)">
<div class="profile-info-row">
<div class="profile-info-name">[[${label}]]</div>
<div class="profile-info-value">[[${value}]]</div>
</div>
</div>
So above is a simple way you can create a reusable section of HTML and then use thymeleaf directives to include the reusable section by passing in the values for dynamic arguments.
In Play! Framework v. 1.x there was such thing like a 'tag' where was possible to reuse some thml/template code.
In Play! Framework v 2.x, for me it is not clear still how it's going to be used (here).
For example, I want to use tag to define a header for my site (in order not to repeat myself, but just include the header every in the pages where I need it).
Could someone explain me / show how to use tags, or whatever I should use to include the header or any block of html/template code.
You showed us a sample and you are asking for sample :)
That's easy, create a common view in views.tags package (remember to leave first line empty if you're not gonna to pass any params! also remember to add brackets after tags name):
/app/views/tags/header.scala.html
<div id="header">
<h1>Hello World!</h1>
</div>
So you can 'include' it in any other view just with:
<body>
#tags.header()
Some other content
</body>
I want to test for the user's browser. If Internet Explorer, then this paragraph. else this paragraph.
How do I do that in a django html template?
Thanks!
Don't do it using Django. Use conditional comments. Example:
<!--[if IE]>
According to the conditional comment this is Internet Explorer<br />
<![endif]-->
<!--[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6<br />
<![endif]-->
Django templates are rendered on the server side, what actually goes to the browser is the output is the rendered template. So you can't write browser specific code in the template, unless you capture that information from the request, pass it as a variable to the template, when you render it, which then uses that value to produce browser specific code.
Don't. There should almost never be a need for this. If you really really think you need it, use IE's conditional comments.
I have seen in videos, that people get html template by typing "html:5" or something like that (btw, they're not using notepad++). Is this possible in notepad++? Thanks.
A little late, but what you're looking for is called Zen Coding.
The Zen Coding project hosted on Google has a plugin for NotePad++ that should do exactly what you need.
For example, entering something like:
html>head+body>div#content>ul.nav>li*5
Followed by Ctrl + E, expands into:
<html>
<head></head>
<body>
<div id="content">
<ul class="nav">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
Now it's called Emmet plugin in Notepad++
Just type html:5 and press control + alt + enter
and you will get the following markup:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
Option 1
Install and use the Notepad++ Snippets plugin.
You can input whatever code snippet you want and give each snippet a name.
When you double-click on your snippet name, the snippet text just gets copied to your editor (before or after your cursor, based on how you set it)
Option 2
If you don't have admin access or behind a firewall, there is a Macro hack.
If your template is a bit short, then you can use the built-in MACRO and manually key in the template text (a one-time operation per template). You can then "Save Current Recorded Macro" and replay it for every new file that you create. Emmet works only for html, but this technique works for any kind of text(as long as you can manually key-in the text)
Note: You cannot copy-paste (Ctrl-C/Ctrl-V) text while recording as it will copy-paste current clipboard's contents which is undesirable!
For those who like step-by-step instructions:
Open Notepad++. Select Macro -> Start Recording.
Key-in your text (every key-stroke is now being recorded, so minimize backspaces and deletes)
Click : Macro -> Stop Recording
Click : Save Current Recorded Macro and give it a name (say "bash_header" or "html_structure")
Now click on your Macro name to repeatedly apply the template text to your notepad++ file.
Using NP++v6.1.4, I got this to work pretty quickly doing this:
Choose Plugins -> Plugin manager -> Show plugin manager
Wait for all the plugins to be shown, and check the box Emmet
It may alert you that Python will also be installed
Once it completes its installation, allow NP++ to be restarted, and now you can use the many Emmet features :)
Now, just type ! and hit ctrl-alt-enter.
You can use QuickText to create your own templates. It seems that QuickText isn't supported anymore, but it still works, the documentation just has some wrong content.
I use a program called Ditto, it's like a clipboard of all your copy-paste material. I have my prewritten syntax in there pinned. It helps.
In actuality, it is called marking up your code. Although "zen coding" is becoming well known in place of markup, it is the original term for building a structure for your code; which makes it easier for others to read.
As far as the template thing goes for Notepad++, I'm afraid that it is difficult to find public, custom made templates. Although the program does come with custom made templates, such as the Hello Kitty template, your best bet would be to ask people in online programming communities.
My personal favorite is DreamInCode, where they offer help and support, as well as pretty informative tutorials on numerous different computer programming and web development languages. I'm confident that if you can't find one you like that has been posted there, if any, someone would be glad to help you.
I am using Joomla! CMS to develop a website. In the not-so-distant past I customized a template to schlep up a website. It was fun and interesting to tear apart the code to de-joomla!-fy the template. So interesting that in fact, I am flirting with the idea of making my own template from scratch.
So, if I am to pursue this, where do I start? Do you know of any really good reference material, or should I just play with the code all day until things work out? I prefer to do tons of reading (for the concepts) before I go at it.
Create a HTML page with the layout you want, inclusive of stylesheets and Javascript
(1.5/2.5 is Mootools based)
(Joomla 3.x is jQuery based)
Adding Javascript
Keep the template initially very basic.
Save this page as index.php page.
The default directory layout is:
css
html
com_<componentname>/ mod_<modulename> (used to override the base templates of Components and Modules)
images
js
templateDetails.xml
index.php
favicon.ico
Change/Add the different Joomla constructs
Also updating the related templateDetails.xml with positions and file locations etc.
See a current template for an example of the layout.
Ex.
<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
Header section:
<jdoc:include type="head" />
Your different Modules:
<?php if($this->countModules('search')) : ?>
<jdoc:include type="modules" name="search" />
<?php endif; ?>
<jdoc:include type="module" name="breadcrumbs" />
Your Main Content tag is:
<jdoc:include type="component" />
To allow your template the ability to display debug information add:
<jdoc:include type="modules" name="debug" />
For more advanced additions to a template have a look at the default templates (ja_purity, Beez).
To override component and module layouts copy the layout files of the component or module into a similarly named directory below the html directory of your template and change it.
Edit...
Extra utilities.
To highlight the used module names in a browser add tp=1 to the end of your URL ex. yourdomain.com?tp=1
To View an inactive but installed Template add template=template_name. ex. yourdomain.com?template=Beez
These two can be combined, like this. yourdomain.com?template=Beez&tp=1
For more information look at:
Joomla Template Tutorial Part 1 - Joomla Template Concepts
How to Create Your First Joomla Template
Joomla! Docs: Template Development
Google Joomla templates
The time-honored method of learning how to do code/templates/anything is to "steal" from someone who already knows how to do it and then modify that until:
you're happy with the outcome; and/or
you've learned enough to be able to go it alone.
I suggest that would be the quickest route to success. Theory is fine but you'll learn faster by doing, and making mistakes.