Passing Parameters from Manage bean to JavaScript in af:resource tag

There are certain scenario where on button click you execute some logic and send parameter to JavaScript to perform some operation. If you ran into similar kind of scenario ,below is one of the way to implemented.

For this sample on button click JavaScript Function is invoked sending parameter to open a URL('www.google.com') in this case

//Execute some logic above
FacesContext facesContext = FacesContext.getCurrentInstance();
ExtendedRenderKitService service =
org.apache.myfaces.trinidad.util.Service.getRenderKitService(facesContext, ExtendedRenderKitService.class);

service.addScript(facesContext, "launchURL('" + "https://www.google.com/" + "');");

On the page resource tag is added and a function which accepts a parameter inside function window.open()  is called with the pararmeter send from bean

Happy Coding !!!

Programmatically invoking URL/TaskFlow in new window tab using JavaScript from bean

One way of invoking JavaScript call from bean and invoking a URL / TaskFlow in new window Tab

Following snippet is way to invoke JavaScript from bean, which accepts url as an input parameter

 StringBuffer sb = new StringBuffer();

 sb.append("var winPop = false;");

 sb.append("if(winPop && !winPop.closed){  ");

 sb.append(" winPop.focus();  }");

 sb.append("else{   ");

 sb.append("winPop = window.open(\"" + url + "\", \"winPop\"); } ");

 ExtendedRenderKitService erks =

            Service.getRenderKitService(FacesContext.getCurrentInstance(), ExtendedRenderKitService.class);

 StringBuilder script = new StringBuilder();

 script.append(sb.toString());

 erks.addScript(FacesContext.getCurrentInstance(), script.toString());

As per this Sample ,on button click TaskFlow/URL will be launched in new window tab.

For invoking TaskFlow as URL following property need to be set on TaskFlow

Bean snippet to invoke TaskFlow programmatically using JavaScript on button click

Output

Button on page

Click on button ,TaskFlow opens in new window tab

Allowing numeric characters only in Input text using JavaScript

We can always restrict user from entering non numeric / special characters in  input field by using JavaScript

For that to work you have to add the af:clientListener tag to your Input text component – af:inputText – to call out to JavaScript when users type in the input field

Input text code looks as shown below

<af:inputText label="Numbers:" id="it1">
            <af:clientListener method="processKeyDown" type="keyDown"/>
            <af:clientListener method="processKeyUp" type="keyUp"/>
   </af:inputText>

The JavaScript code that you use in af:resource tag to filter character inputs or numeric inputs is shown below

            var shiftDown = false;

             var ctrlDown = false;

             function processKeyUp (evt) {

                var key = evt.getKeyCode();

                if (key == 16) {

                  shiftDown = false;

                }

              }

             function processKeyDown (evt) {

                var key = evt.getKeyCode();

                if(key == 17){

                    ctrlDown = true;

                }

                if (key == 16) {

                  shiftDown = true;

                }

                //Allow: ctrl+c and ctrl+v

                if ((ctrlDown == true &amp;&amp; key == 86) || (ctrlDown == true &amp;&amp; key == 67)) {

                    // let it happen, don't do anything

                    ctrlDown = false;

                    return;

                }

                // Allow: backspace, delete, tab, escape, enter and .

                if (key == 8 || key == 9 || key == 27 || key == 13 ||

                // Allow: home, end, left, right

                (key >= 35 &amp;&amp; key &lt; 41)){

                  // let it happen, don't do anything

                  return;

                } else {

                  // If non numeric or shift is pressed then stop the keypress

                  if (shiftDown || (key &lt; 48 || key > 57) &amp;&amp; (key &lt; 96 || key > 105)) {

                      evt.cancel();

                  }

                }

              }

You can always find out JavaScript event keycode using http://keycode.info/ and press any key to get its keycode.