EGL Development User Group

EGL Development User Group

EGL Development User Group

The EGL Development User Group is dedicated to sharing news, knowledge, and insights regarding the EGL language and Business Developer product. Consisting of IBMers, HCL, and users, this community collaborates to advance the EGL ecosystem.

 View Only

  • 1.  Use jQuery with EGL JSFHandler

    Posted Thu August 13, 2015 04:02 AM

    Hi,

    I created a jsp page and I want to use jQuery in order to autocomplete field on this:

    <link rel="stylesheet" href="../JS/jquery-ui-1.11.4/jquery-ui.min.css">
    <script src="../JS/jquery-1.11.3.min.js"></script>
    <script src="../JS/jquery-ui-1.11.4/jquery-ui.min.js"></script>
    <script>
      $(document).ready(function(){
        $("#tags").autocomplete({
          source: './trfListeArticles.jsp',
          minLength: 3,
          select: function(event, ui) {
            var article = ui.item.designation;
          }
        });
      });
    </script>

    The fied is a simple HTML input field:

    <td>
      <div class="ui-widget">
        <label for="tags">Tags: </label>
        <input id="tags"></input>
      </div>
    </td>

    In order to do that, I created an extra jsp with egl jsfhandler behind:

    Here is the JSP -->

    <!DOCTYPE HTML>
    <%@page import="egl.java.J2EELib_Lib"%>
    <%@page import="jsfhandlers.demandeplan.myPageBeanInfo"%>
    <%@page import="jsfhandlers.demandeplan.myPage"%>
    <%-- jsf:pagecode language="EGL" location="/EGLSource/jsfhandlers/myPages/myPage.egl" --%><%-- /jsf:pagecode --%>
    <%@taglib uri="http://www.ibm.com/jsf/html_extended" prefix="hx"%>
    <%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
    <%@page
        language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
    <%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <% response.setContentType("application/json");%>
    <html>
    <head>
    <title>myPage</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    </head>
    <f:view>
        <body>
            <hx:scriptCollector id="scriptor" preRender="#{myPage._preRender}" postRender="#{myPage._postRender}">
                <h:outputText value="#{myPage.tags}" binding="#{myPage.tags_Ref}"></h:outputText>
            </hx:scriptCollector>
        </body>
    </f:view>
    </html>

    Here is the EGL -->

    package jsfhandlers.myPages;

    import com.ibm.egl.jsf.UIViewRoot;
    import be.mycode.business.Lists;
    import be.mycode.rec.items;

    handler myPage type JSFHandler
        {onConstructionFunction = onConstruction,
         onPrerenderFunction = onPrerender,
          view = "myPages/myPage.jsp",
          viewRootVar = viewRoot,
          cancelOnPageTransition = yes}
         
         items            items[];
        tags            string = "";
        
        viewRoot UIViewRoot;
        
        // Function Declarations
        function onConstruction()
        end
        
        function onPrerender()
           Lists.getItemsList();
            createTagsJSONString();
        end
        
        //**************************************************************************************************
        // createTagsJSONString => because jQuery autocomplete needs a JSON string and the f*#@!g EGL use
        //                         one ofneeded names as reserved word (label)
        //**************************************************************************************************
        function createTagsJSONString()
            jsonString string = "";
            jsonTempString string = "";
            count int = 0;
            for (i int from 1 to items.getSize() by 1)
                    count = count +1;
                    jsonTempString += "{label: \"" + items[i].designation + "\", value: \"" + items[i].reference + "\"}";
                    if (jsonString == "")
                        jsonString += jsonTempString;
                    else
                        jsonString += "," + jsonTempString;
                    end
                    jsonTempString = "";
            end
            
            if (jsonString != "")
                tags = "[" + jsonString + "]";
            end
        end
    end

    I have the following questions:

    1- how do I get the value of input field in my jsfhandler? I need this in order to reduce my list and make the autocomplete

    2- how do I get back the generated JSON array in order to use it in my jQuery code?

    Thank you,

    Olivier

    OlivierLx


  • 2.  Re: Use jQuery with EGL JSFHandler

    Posted Tue August 18, 2015 01:13 PM

    I am not sure that JSFHandler is the best solution for implementing backend for autocomplete. JSF is MVC framework intended to generate HTML as output and writing json as output is probably possible but it seems a wrong tool for that task. Doing the JSF life cycle brings a lot of overhead and the faster the autocomplete gets the reply from the server the better.

     

    We implemented jQuery autocomplete in our JSF application by writing a custom servlet that has minimal overhead. We even ended up storing necessary data in application context or session context (depending on whether it was customer specific data or not) to ensure solid performance.

    TuukkaIlomäki


  • 3.  Re: Use jQuery with EGL JSFHandler

    Posted Tue August 25, 2015 08:14 AM

    Hi , Olivier.

          I suggest you use EGL restful services or write a selvet , which accept one parmeter(the value of input field).

          I assume  the restful service/selvet url is :"myPage/getList"

         

    1- how do I get the value of input field in my jsfhandler? I need this in order to reduce my list and make the autocomplete

    •     <script>
        $(document).ready(function(){
          $("#tags").autocomplete({
            source: "      getList?"+$("#tags").val(),
            minLength: 3,
            select: function(event, ui) {
              var article = ui.item.designation;
            }
          });
        });
      </script>

    2- how do I get back the generated JSON array in order to use it in my jQuery code?

    • Service or Selvet output json string
    Bin.


Related Content