Im using Meteor. I'm trying to have a full page template (including the body and head tags). Because one is to be for the mobile version.
I tried having
{{> desktop}}
<template name="desktop">
<head>...</head>
<body>...</body>
</template>
<template name="mobile">
<head>...</head>
<body>...</body>
</template>
I get a syntax error with this (Due to the >desktop handlebar)also How would I switch between the two templates? (Meteor adds the <html> tags and a bunchload of script tags so its somewhat problematic
Create desktop_head and desktop_body templates instead for desktop, do the same for mobile.
Then, at run-time, add the templates to the body and head tags based on your device. Do not introduce additional head and body tags because that's not how it works, you need to have a single body / head...
Furthermore, you might want to consider a responsive design instead...
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>
So the if binding of KnockoutJs is powerful, but I need to use it in a template block because I have to bind nested content E.G. <UL>'s.
<script id="my-template3" type="text/html">
<span data-bind="if:IsInherited">foobar</span><br />
</script>
This doesn't seem to render no matter what $data.IsInherited is set to. How can one perform an if databind in a tempate block using KnockoutJs?
As posted in the comments.
Are you using jquery.tmpl because if that is included I believe the control flow bindings will not work in script blocks.
Using native only will solve that
Cheers
I have a JS script which is called when a submit button action is fired successfully:
<h:panelGroup rendered="#{user$webreports$webfilteroverview.submitted}">
<f:verbatim>
<script type="text/javascript">alert('Done!');</script>
</f:verbatim>
</h:panelGroup>
the above code works perfect. What I want to do is to get the alert box text from resource bundle:
<script type="text/javascript">alert('#{msg.report_alert_text}');</script>
but I get error:
PWC6228: #{...} not allowed in a template text body.
I did this:
<h:commandbutton onClick="alert('#{msg.report_alert_text}');"/>
and it was working fine. I don't understand why the above code doesn't work. Is it possible to do this? If yes, what is wrong with the above code? Thanks in advance.
PWC6228: #{...} not allowed in a template text body.
You're apparently using the legacy JSP(X) instead of its successor Facelets. Deferred EL #{} in template text is not supported by JSP(X). It only supports standard EL ${} in template text (template text means outside tags / JSF components):
<script type="text/javascript">alert('${msg.report_alert_text}');</script>
If that doesn't work because ${msg} is not been prepared (the #{} will namely autocreate it if it does not exist yet at that point of the view), then you need <h:outputText> instead:
<script type="text/javascript">alert('<h:outputText value="#{msg.report_alert_text}" />');</script>
You'll only need to remove that <f:verbatim> tag in order to get JSF components to run there. The <f:verbatim> is a leftover from JSF 1.0/1.1 and not necessary anymore since JSF 1.2 and deprecated since JSF 2.1.
This problem has nothing to do with JavaScript. You got the error from the webserver, not from the webbrowser.
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.