I've found that when changing an included file, if I use the include action tag, then the change is reflected in the including jsp. But if I use the include directive, then the the change is not reflected in the including jsp.
However, I've found that the change does get reflected in the including jsp whether we use include action tag or include directive.
Please show me the difference using a program.
The contents of the directives form part of the main JSP during the translation phase, ie., when the JSP is compiled in to an equivalent servlet. So the contents from the jsp included using a directive componnet are merged in to the parent jsp at the translation time which happens only once. This include directive was mainly meant to be used for addressing the headers and footers which are mostly static that doesn't get changed often.
The include action tag on the other hand is for including dynamic contents ie., you can choose to send a parameter to the tag which that tag may process and display. this is unlike the headers and footers showing the same content again and again.
Main.jsp
<jsp:include page="included.jsp">
<jsp:param name="message" value="World" />
</jsp:include>
Included.jsp
<html>
<head>
</head>
<body>
<h2>Hello <%=request.getParameter("message") %></h2>
</body>
</html>
Also what server are you using. Since Tomcat7, things have changed and the main jsp will also compile if the included jsp(by any mechanism) is changed.
this link has more details.
Related
I tried liferay-hook.xml:
<custom-jsp-dir>/WEB-INF/custom_jsps</custom-jsp-dir>
<custom-jsp-global>true</custom-jsp-global>
and create file on /WEB-INF/jsp/html/common/themes/top_js-ext.jspf and put all my <link href="" rel="stylesheet" type="text/css"> there. but it will applied to all pages on my page. I want to know on how to apply global styling on selected portlet on liferay. Thanks.
The best way to introduce global CSS styles is through your theme, not through a JSP override. Create a theme that contains the CSS you'd like to use. This way, Liferay will include your CSS in the minified version, compact all files to be downloaded in just a single request. Plus, your changes are probably relevant for a specific theme anyways.
Use your browser's DOM inspection tools to analyse the CSS selector you need. Each portlet declares specific classes that you can easily address. e.g.
.portlet-navigation {
background-color: red;
}
I often, change the images of my buttons using the image attribute, but someone told me that it is a good practice to do it using .css
I tried but i cant, what i am doing wrong? This is what i did:
1-The resources of my project are stored like this:
2-This is how i created the style.css for accessing the image
.c2 {
background: url(/resources/images/smiley.jpg);
}
3-This is how i access the css from the body of my page(Im sure this is correct because other classes in the same document works in other tags in this page)
<h:outputStylesheet library="css" name="style.css" />
4-This is how create a sample commandButton that uses the appropiated css class
<h:commandButton styleClass="c2"/>
I think the problem is in the .css, i tried a few combinations but none worked:
background-image: url(/resources/images/smiley.jpg);
background: url(resources/images/smiley.jpg);
background: url(smiley.jpg);
background: url(../smiley.jpg);
Where is the mistake?
update
I managed to make it work by the following code:
.c2 {
background: url("#{resource['images:smiley.jpg']}");
}
Notice the difference when i use css(right) and when i use image attribute(left)
How could i solve this so the hold image is shown?
When importing CSS stylesheets by <h:outputStylesheet>, the stylesheet is imported and processed by the FacesServlet through /javax.faces.resource/*. Look at the generated <link> element pointing to the stylesheet in question and you'll understand.
You have to change all url() dependencies to use #{resource['library:location']} instead. JSF will then auto-substitute it with the right path. Given your folder structure, you need to replace
.c2 {
background: url("/resources/images/smiley.jpg");
}
by
.c2 {
background: url("#{resource['images/smiley.jpg']}");
}
Assuming that your webapp context name is playground and that your FacesServlet is mapped on *.xhtml, then the above should end up in the returned CSS file as follows
.c2 {
background: url("/playground/javax.faces.resource/images/smiley.jpg.xhtml");
}
Noted should be that the JSF implementation will for determine only during the first request on the CSS file if it contains EL expressions. If it doesn't then it will for efficiency not anymore attempt to EL-evaluate the CSS file content. So if you add an EL expression to a CSS file for the first time, then you'd need to restart the whole application in order to get JSF to re-check the CSS file.
In case you wanted to reference a resource from a component library such as PrimeFaces, then prefix the library name, separated with :. E.g. when you're using PrimeFaces "Start" theme which is identified by primefaces-start
.c2 {
background: url("#{resource['primefaces-start:images/ui-bg_gloss-wave_50_6eac2c_500x100.png']}");
}
This will be generated as
.c2 {
background: url("/playground/javax.faces.resource/images/ui-bg_gloss-wave_50_6eac2c_500x100.png.xhtml?ln=primefaces-start");
}
See also:
How to reference CSS / JS / image resource in Facelets template?
Changing JSF prefix to suffix mapping forces me to reapply the mapping on CSS background images
Unrelated to the concrete problem, the way how you use the library is not entirely right. It's meant to be the common identifier/subfolder of all related CSS/JS/image resources. The key idea is to be able to change the entire look'n'feel by just changing the library (which can be done by EL). You seem however to be relying on the default library. In that case, you could just omit the library from your <h:outputStylesheet> and #{resource}.
<h:outputStylesheet name="css/style.css" />
See also:
What is the JSF resource library for and how should it be used?
Since I struggled with this a little bit and while BalusC has already answered the question but might be able to comment as to why this is happening. I have 5 EAR projects consisting of a bundled WAR and EJB projects. I then have one standalone WAR project deployed on its own. The following code worked perfect with all the EAR's:
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Super FIPS Calculator PRO</title>
<style>
.Bimage{background-image:url(#{request.contextPath}/img/phonetoolsBackground.png);}
</style>
</h:head>
<h:body styleClass="Bimage">
.
.
.
Where the "img" folder was within the WEB-INF folder but for the EAR project, it would not work and it wouldnt even load the picture in the browser by manually typing in the URL. I verified the resulting html was 100% accurate. So all the talk of "resources" got me thinking that maybe it was a ?security? issue of some sort which doesnt seem to make sense between the WAR and EAR deployments so I created a "resources" folderin the root of the web application, e.g. in Eclipse its parent would be WebContent, then added a subfolder to resources called "img", placed my image in there.
The code now looks like this:
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Super FIPS Calculator PRO</title>
<style>
.Bimage{background-image:url(#{request.contextPath}/resources/img/phonetoolsBackground.png);}
</style>
</h:head>
<h:body styleClass="Bimage">
.
.
.
And now the image is displayed. Again not trying to hijack balusc's thorough answer, I just wanted to bring it up in case anyone ran into a similar issue. If someone wants me to open a separate Q and A I will!
Ahh yes, this was on JBoss EAP 7, Servlet API 3.1, Facelets 2.2, Rich Faces 4.5.17 Java 1.8.
Edit #Basil-Bourque answer What is WEB-INF used for in a Java EE web application seems fairly relevant
But its still a little confusing in that how can a WAR within an EAR access that location but not a standalone WAR?
Is there a plugin available for Gulp that does the same thing as Assemble does for Grunt?
I would like to run a task for Gulp that assembles HTML partials, but I cannot find a plugin. Has anyone used one and can you provide a link to it?
UPDATE: 4/21/2016
Lately, I've been using Twig.js with Gulp, along with gulp-data to render JSON in my templates. My article goes into detail. Hint: You could also use Nunjucks, Swig.js, Handlebars etc.
Article: Frontend templating with Gulp and Twig.js
Yes, you can do it with this plugin called gulp-file-include
Example :
# index.html
<!DOCTYPE html>
<html>
<body>
##include('./view.html')
##include('./var.html', {
"name": "haoxin",
"age": 12345
})
</body>
</html>
# view.html
<h1>view</h1>
# var.html
<label>##name</label>
<label>##age</label>
I made a plugin to extend html files https://www.npmjs.org/package/gulp-html-extend
master.html
<body>
<!-- ##placeholder=content -->
<!-- ##placeholder=footer -->
</body>
content.html
<!-- ##master=master.html-->
<!-- ##block=content-->
<main>
my content
</main>
<!-- ##close-->
<!-- ##block=footer-->
<footer>
my footer
</footer>
<!-- ##close-->
output
<body>
<!-- start content -->
<main>
my content
</main>
<!-- end content -->
<!-- start footer -->
<footer>
my footer
</footer>
<!-- end footer -->
</body>
It may help you.
I would like to add one more:
I use gulp-preprocess. It is great for building not only html, but also JavaScript, and can even be used in PHP.
It has simple directives:
<!-- #include filename.extension -->
<!-- #ifdef foo -->
Included html if foo is defined
<!-- #endif -->
Also #ifndef (not defined)
Variables
<!-- #echo bar -->
Or even cooler:
link
Also (as far as I can tell) unlimited sub inclusion:
<!-- I am an included file -->
<!-- #include relative/to/me/data.html -->
I have a directory tree like so:
./project root
- build/
- less/
[less,..]
- html/
- index/
Index-variables.json
[Index-partials.html,...]
Index.html
[other-build-folders,..]
- dist
[htmlfiles,...,CSS folder,...]
For each rendered html file, I have a corresponding file in the build folder and a corresponding folder for that file name. The build file listens for changes in the corresponding folder and preprocesses that data which then outputs to the matching file in the dist folder.
Since preprocess allows you to pass variables as a context object, I pass variables stored in a JSON file in the parent build folder, .e.g. index-variables.json, overwriting any global variables I've defined.
I use it with Livereload,so the upshot is that everytime I make a change in any html partial the page reloads almost instantly with the rendered html - we're talking less than 1 second. In addition to being lightening fast, preprocess seems really stable-I've never had a bug.
This is an awesome way to work.
Assemble now supports Gulp: https://github.com/assemble/assemble although at the time of posting the official Assemble website doesn't mention this, and there is very little in the way of documentation.
You can do it with a gulp plugin called gulp-handlebars-file-include
This is a very good plugin, because it dose not create or make a custom parser like, gulp-file-include, nor define a new syntax. Instead it use handlebars, therefore, it not only parse with handlebars, but also you can compile your partials files with handlebars and even include your own handlebars helpers.
Is there any way to reuse jsp -custom tags inside a html file?
My custom tag is already defined in a tld file and I am using that custom tag in a jsp file.
I want to reuse that custom tag in a html file.
How do I do this?
Below is the sample example of using my custom tag(btc:content) in a jsp file.
<div class="sfl-section-body">
<btc:content name="HOL-CF-307" />
I want to use (my custom tag) in an html file.
I have a Jsp that dynamically needs to get included in entire project as user opens any jsp. i.e. As a user opens a jsp my jsp should automatically gets included.
I have written this in web.xml in Tomcat
<jsp-property-group>
<url-pattern>/webapps/ROOT/html/*.jsp</url-pattern>
<url-pattern>*.jspf</url-pattern>
<el-ignored>false</el-ignored>
<scripting-invalid>false</scripting-invalid>
<is-xml>false</is-xml>
<include-prelude>/WEB-INF/jsp/tracker.jsp</include-prelude>
<!-- <include-coda>/template/coda.jspf</include-coda> -->
</jsp-property-group>
I had kept my jsp in tomcat under WEB-INF/jsp/ and i want to include it into every porject as it contains a code that tracks log for user.
Or any other way to make this happen.
Thanks.
There is one more way to include your JSP for the whole portal and i.e. the dockbar.
You can create a hook and include your jsp in the /html/portlet/dockbar/view.jsp using either <jsp:include /> or <liferay-util:include /> or simple <%# include file="" /> (this would be static).
<jsp:include page="/jsp/yourJSPPageToBeIncluded.jsp" />
OR
<liferay-util:include page="/jsp/yourJSPPageToBeIncluded.jsp" />
OR
<%# include file="/jsp/yourJSPPageToBeIncluded.jsp" />
Note: the path may differ depending on where you will be putting the JSP.
Why I am choosing dockbar is because it is present on all the portal-pages of liferay. This won't work if you are opening a pop-up like configuration pop-up or look-and-feel pop-up or other custom dialog pop-ups since dockbar is not present in the pop-up. For using in pop-ups you would have to override portal_pop_up.vm in your custom-theme and write the code as suggested by #VikasV
$theme.include($themeServletContext, "/jsp/yourJSPPageToBeIncluded.jsp")
There are two ways for this.
Simple way is to include your JSP in the Theme. When your Theme is applied to your project, and when Theme is rendered, any pages in your project will render this included JSP.
Code sample below. This has to be placed in vm file(navigation.vm).
$theme.include($themeServletContext, "/jsp/yourJSPPageToBeIncluded.jsp")
Here, JSP folder is placed directly inside Theme war.
Other way (tedious one), is to include this JSP in each and every JSP page that you want this to be included.
Use <jsp:include> element for this.
Some references,
Ref1
Ref2