Using Java Script Library with Java EE web app

                            Using Java Script Library with Java EE web app

Javascript offers a great functionality to any web User Interface which act as a dynamic scripting language. one of the main benefit is to enable partial and asynchronous responsive web apps with a format of XML document .

Among the major ways of adding Js to JavaEE web app are

  1. Embedding the js code or library in the web app
  2. Using the built in resource library

Both are very useful , in this post I will be explaining how to embed javascript into your java ee web apps. The main need for using embedding the js code.

You can load the js in two ways

  1. using ResourceDependency annodation on a UIComponent java class
  2. Using tag library in the facelets page

Ways to use js api directly into the facelets page

Step 1. Using the <h:outputScript  name”name.js” library=”libraryname” target=”your target”.. /

Example : using google js api in a form field

<h:form>

                     <h:outputScript name=”jsf.js” library=”javax.faces” target=”userform” />

</h:form>

The use of userfrom as the target means the google js will be used within the userfrom element on the web page.

 

 

 

 

Step 2 : Specifying the component you want to use the js functionality using the API

 

<h:form>

<h:inputText  id=”name” value=”#{app.name}”  />

<h:outputText id=”nametext” value=”#{app.name}”/>

<h:commandButton id=”submit” value=”Submit” onclick=”jsf.ajax.request(this, event, {execute:’name‘,render:’nametext‘}); return false;” />

</h:form>

 The command onclick has three parameters ( source, event and options }

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: