DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workkloads.

Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • The Cypress Edge: Next-Level Testing Strategies for React Developers
  • How to Build Scalable Mobile Apps With React Native: A Step-by-Step Guide
  • Mastering React App Configuration With Webpack
  • Overcoming React Development Hurdles: A Guide for Developers

Trending

  • Docker Base Images Demystified: A Practical Guide
  • How Large Tech Companies Architect Resilient Systems for Millions of Users
  • Unlocking AI Coding Assistants Part 4: Generate Spring Boot Application
  • Understanding Java Signals
  1. DZone
  2. Coding
  3. JavaScript
  4. JSF "Loading" JavaScript -- Brief Overview

JSF "Loading" JavaScript -- Brief Overview

By 
Anghel Leonard user avatar
Anghel Leonard
DZone Core CORE ·
Apr. 25, 15 · Interview
Likes (0)
Comment
Save
Tweet
Share
16.3K Views

Join the DZone community and get the full member experience.

Join For Free

What remains unchanged is the way that JavaScript enter in the scene via the <script> tag as:

 <script type="text/javascript">
 //JavaScript Code
</script>

or, as:

 <script src="myScript.js"</script>

JSF is fully aware of the importance of this tag, and it renders it via <h:outputScript> tag. When the <script> tag should contain inline JavaScript code, the <h:outputScript> can be used, like this:

 <h:outputScript>
 //JavaScript Code
</h:outputScript>

If the JavaScript code is placed in an external, but local, file then <h:outputScript> is recommended to be used in accordance with JSF resource handlers. Starting with JSF 2.0, all the web resources, such as CSS, JavaScript, and images are loaded from a folder named resources, present under the root of your web application or from /META-INF/resources in JAR files (also see JSF 2.2 Resources and ResourceHandlers):

 <h:outputScript library="scripts" name="js/myScript.js"/>

A folder under resources folder is known as a library or theme, which is like a collection of client artifacts. We can also create a special folder matching the regex \d+(_\d+)* under the library folder for providing versioning. In this case, the default JSF resource handler will always retrieve the newest version to display. So, the library name is indicated via the library attribute, while the resource name via name attribute. Per example, if the myScript.js file is available in web_app_root/resources/scripts/js then it can be loaded like this:

<h:outputScript library="scripts" name="js/myScript.js"/>
Is important to know that, by default, <h:outputScript> can be used to load only local scripts. When your scripts should be loaded via absolute URLs, you can go back to <script> tag. Of course, you will lose the advantages provided by JSF, like versioning, but that's the price to pay ... unless you are ready to write a custom ResourceHandler. Or check the OmniFaces, CDNResourceHandler.

If you want to use local scripts, but not placed under resources folder, than you can set the following context parameter:

 <context-param>
 <param-name>javax.faces.WEBAPP_RESOURCES_DIRECTORY</param-name>
 <param-value>/new/path</param-value>
</context-param>

As a quick tip, you can use this to place your valuable resources under WEB-INF folder.

Commonly, the <script> tag appears in <head> or/and in <body>, and the indicated scripts are downloaded/loaded, processed/parsed and executed in the order they appear in the HTML page. The issue consist in the fact that these operations will block other actions on the page (e.g. HTML rendering) until they have done. Of course, this is the default behavior and it is almost naive, since loading and executing JavaScript codes relies on many techniques, like window.onload, $(document).ready() or HTML 5 async attribute. As a tip, it is a good idea to place scripts at the bottom of the <body>, since this will improve page load, because HTML loading is not "blocked" by scripts loading (e.g. Bootstrap "loves" this tip). Actually, notice the quotes around blocked word! They indicate the fact that actually none of the above solutions work 100%. In case that you need a JSF solution that really works - script is deferred after the entire page was fully loaded - check the OmniFaces DeferredScript component.

By default, JSF renders the <script> tag at the same point in the view where the tag is located, but we can alter his behavior via the target attribute. This can point out the head, the body or the form.


JavaScript

Published at DZone with permission of Anghel Leonard, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • The Cypress Edge: Next-Level Testing Strategies for React Developers
  • How to Build Scalable Mobile Apps With React Native: A Step-by-Step Guide
  • Mastering React App Configuration With Webpack
  • Overcoming React Development Hurdles: A Guide for Developers

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!