I have one form, something like that:
<html>
<head>
<!-- Some css file included here -->
</head>
<body>
<!-- Form parameters like action, method omitted for simplicity-->
<form>
<p class="someTextClass">msg[code.text]</p>
<input class="someInputClass" type="text"/>
<button class="someButtonClass">msg[code.button]</button>
<p class="someHelpTextClass">msg[code3.help]</p>
</form
</body
</html>
But currently there are a lot of conditions statements like "(condition) ? messageOne : messageTwo" and "rendered" attributes. But I want to switch all text in tags and related css classes simultaneously (and not to lose i18n). I want to set a parameter in one place and switch all css and text according to it automatically. It there something similar in JSF? When I learned Spring there is something like themes in it, is there theme analog in JSF?
P.S. If something unclear in my explanation please write a comment and I"ll update the question.
Can you upgrade to JSF 2.2? The notion of resources and contracts is what you are looking for.
Alternatively, you can potentially fetch the appropriate theme style from a backing bean:
webapp/
resources/theme1/css/styles.css
resources/theme2/css/styles.css
<h:outputStyleSheet library="#{someBean.theme}" name="css/styles.css"/>
Since outputStyleSheet can take an EL for the name as well, you can look at pushing that code to the bean as well.
For the pageTemplate itself, you should probably look at fetching that information from a bean.
Hope that helps.
Related
I can't seem to grasp or find out why you should use HTML templates with web components when you can simply define the HTML inside the web component (shadowRoot.innerHTML).
What is the benefit of creating a template and cloning it inside the web component? I can see there being a reason if two web components share the same HTML but beside that I have no idea.
Is there something fundamentally important that I'm missing?
Yes, too many blogs do document.createElement("template") where an .innerHTML will do the same ... and with less code ... and faster.
Note, Templates are not tied to the Custom Elements API or shadowDOM.
Each of the 3 Web Components technologies can be used without the other.
Templates
Templates are great when you want to store re-usable content in the HTML Document, because it does not get parsed.
In the old days we would use a <div hidden> and pray its contents did not affect the rest of the page.
Just like the old days you can read the Template.innerHTML and do whatever you want with the String value.
More modern approach is to clone the Template, just be aware that .content property is required, and you get a Document-Fragment value in return.
<template id="MY-TEMPLATE">
<article>
...
</article>
</template>
document.getElementById("MY-TEMPLATE").content.cloneNode(true)
Templates & shadowDOM
When you have Custom Elements with shadowDOM, Templates are great to define that shadowDOM content.
Why so many developers want to do HTML-in-JS and CSS-in-JS I don't understand.
If you have an HTML document, store the content there, way easier to edit.
<template id="MY-ELEMENT">
<style>
/* style shadowDOM here */
</style>
<slot></slot>
</template>
All your MY-ELEMENT then needs to do is:
super() // or this when done in the connectedCallback
.attachShadow({mode: 'open'})
.append(document.getElementById(this.nodeName).content.cloneNode(true))
Performance
an innerHTML String with HTML content will get parsed for every usage.
A template is parsed once, so does save on CPU cycles, when you use the same template many many multiple times
Usage
My personal preference is to keep as much HTML (and CSS) inside <TEMPLATEs> in HTML as possible. Only when I want my components not to be configurable I use static HTML in JS, with .innerHTML, not .createElement("template") for code brevity over (minor) performance gain
Only in SDWCs (Self Destructing Web Components) that need to load/execute ASAP I contain everything inside the Component:
customElements.define('my-head',class extends HTMLElement{
connectedCallback(){
// generate <HEAD> content, <SCRIPTS> and <STYLE> CSS-in-JS here
this.remove();
}
});
What is the benefit of creating a template and cloning it inside the web component?
Speed. Parsing a string and generate internal html objects takes some extra time compared to just cloning nodes. If the web component is used in many places and each will parse string and convert it to html objects. Compare that with just parsing once.
tutorial about web components
How to use parameter in handlebar partial I am using grunt-assemble and cant find anything in docs
For Example I will create a partial name heading and use it in my template
<h1 class="tac mt-80 underline">
{{heading}}
</h1>
<body>
{{> heading "Test"}}
</body>
unfortunately, thats not possible with grunt-assemble out of the box.
Their recommended way is to use the parseJSON helper for that:
{{#parseJSON '{"heading": "TEST"}'}}
{{> heading }}
{{/parseJSON}}
But you should take a look at the current implementation of assemble, which includes a updated version of Handlebars (which provides your wished functionality). It seems like they moved away from Grunt in favor of compatibility with Gulp.
I'm not sure if this is the best forum to ask this in, but I need to style a magento theme and I'm just wondering how dependent is the javascript on the class names?
For example, I have something like this in my template file (inside my theme file, overriding the base)
<form action="<?php echo $this->getFormActionUrl() ?>" method="post" id="newsletter-validate-detail">
<div class="block-content">
<div class="form-subscribe-header">
If I say, leave the ids alone, but change the class names to something else (i.e. remove "block content" or "form-subscribe-header") will this break the javascript in Magento?
Also, is there an easy way to tell if I've broken something? Will I just get a console error if a piece of javascript was coupled with a css class name?
Search your javascript files for your class names to see if they are used by the script. You could also just leave your classes as they are but add a new one in, like this:
<div class="form-subscribe-header new-class">
Then target the class using .new-class
And yes, any javascript errors will appear in the console.
Google XML Pages say they support "standard html as long as it's formatted as xml" but they seem to only support html 4.0. The namespace used for supporting html is http://www.w3.org/1999/xhtml and generating output from a gxp that contains elements like <header> <nav> or <footer> complains that the element is unknown in the http://www.w3.org/1999/xhtml namespace.
Is there some different namespace I should be using or do gxps really only support HTML 4?
Here's a reference example gxp file where removing the wrapping header tag works just fine:
<gxp:template
name='com.example.gxps.Test'
xmlns:gxp='http://google.com/2001/gxp'
xmlns='http://www.w3.org/1999/xhtml'>
<html>
<body>
<header>
<b>
<gxp:msg>Hello,</gxp:msg>
<br/>
<gxp:msg>World!</gxp:msg>
</b>
</header>
</body>
</html>
</gxp:template>
As is though, it'll output something like:
java/com/example/gxps/Test.gxp:7:5:7:5: Unknown element <header> (in http://www.w3.org/1999/xhtml namespace)
GXP must have an (old) version of the Namespace definitions, built into it.
It appears that HTML5 and HTML4 use the same namespace, so there's no different namespace you need to use in your GXP pages. This is just an issue of updating/ adding the internal GXP definitions.
Download the source code & find where the definitions are! Ideally you can post/commit the updates back to the GXP project.
(I and other people are interested in GXP myself, so.. this would be really good work to do.)
Let me know how you go!
I am working on Dreamweaver TBB in SDL Tridion 2011 SP1. In the TBB I am using the data from different component presentations.
My Template Building Block looks like this.
Main Component:
<div>##Component.Schema.Title##</div>
<!-- TemplateBeginRepeat name="Fields.link" -->
##RenderComponentPresentation(Field, "tcm:1-8142-32")##
<!-- TemplateEndRepeat -->
Component Template: tcm:1-8142-32
Its DWT TBB looks like this.
<!-- TemplateBeginIf cond="Component.Fields.text" -->
<div>##RenderComponentField("text",0)##</div>
<!-- TemplateEndIf -->
When I previewed the Component I got the output and all component presentations executed as expected.
Output:
SchemaName
data1
data2
Then I created the Page with the page TBB.
<html>
<head></head>
<body>
<!-- TemplateBeginRepeat name="Components" -->
##RenderComponentPresentation()##
<!-- TemplateEndRepeat -->
</body>
</html>
The output is not as expected. The Component Template "tcm:1-8142-32" is not executed.
output:
SchemaName
I want to make SiteEdit to linked component also.
Do I need to add extra templates to the existing ones? I am using Tridion 2012 UI.
I came to know that we need add isQueryBased, property must be set to true.
If yes, can any one help the command to set it true?
I don't know where the problem lies.
Can any one help me out to modify the code and implement SiteEdit for the embedded Component?
In a Dreamweaver template RenderComponenetPresentation() can be called in two ways.
If you are iterating through the Component Presentations on a page ( which I think is what you are doing?)
If for some reason you need to Render a component with a different template, not the one you've added it to the page with.
Assuming number one is what you are doing, then you have added the Component to the page with the correct Template. Therefore you can call ##RenderComponentPresentation()## with no arguments like this:
<html>
<head></head>
<body>
<!-- TemplateBeginRepeat name="Components" -->
##RenderComponentPresentation()##
<!-- TemplateEndRepeat -->
</body>
</html>
"IsQueryBased" is unrelated to your problem. This is connected to SiteEdit and Dynamic Component Presentations.
Update -
It looks like you have 2 questions here:
How can I call RenderComponentPresentation for linked components
How can i make the Component be "SiteEditable"
Looking at question 1 - Assuming you the array of components are not component presentations on the page your initial method was almost correct:
##RenderComponentPresentation(Component.ID,"tcm:xx-xx-xx")##
You should be able to get the component ID from the array, but you will need to specify the ComponentTemplate ID yourself.
For testing purposes, first of all hard code the Tcm ID of the Component Template.
Since putting Tcm ids in templates is bad practice, you will then need to write a TBB to make this available in the package for you. You can then replace the Tcm Id you used for testing.
In relation to your SiteEdit question, this guide might help, if not post a new question detailing the exact nature of your issue.