6 Replies Latest reply: Apr 10, 2013 1:26 PM by cjones RSS

    Getting window size in EL expression?

    cjones
      JDeveloper 11.1.2.2

      Is there a way to get the window size in an EL expression?

      I am using an iterator to loop through a set of values and create a standard html table that contains navigation buttons. Normally, there are three columns in the table, but for small screen sizes, I want to make it a two column table. I have looked at #{requestContext.agent.capabilities.narrowScreen}, but that only returns 'true' for screen sizes less than 240px. Unfortunately the devices that I am targeting with a different table layout are exactly 240px, so narrowScreen will not return 'true' for those devices.

      Is there any other way to get the window size in an EL expression?
        • 1. Re: Getting window size in EL expression?
          931325
          you can get the available screen height and width through java script
          screen.availWidth
          screen.availHeight

          To get it through EL, you can always invoke a bean method which in turn invokes this script through ExtendedRenderKitService

          Haven't tried this though, but believe it should work. Good luck !
          • 2. Re: Getting window size in EL expression?
            Frank Nimphius-Oracle
            Hi,

            have you tried

            #{requestContext.agent.capabilities.height}
            #{requestContext.agent.capabilities.width}

            Frank
            • 3. Re: Getting window size in EL expression?
              cjones
              I haven't tried capabilities.height or .width. I didn't see them in the documentation I was looking at: http://docs.oracle.com/cd/E15523_01/web.1111/e10140/el_sup.htm

              I found a work-around via CSS to do what I wanted, but I will check the .height and .width just out of personal curiosity at this point.

              Thanks!
              • 4. Re: Getting window size in EL expression?
                931325
                "I found a work-around via CSS to do what I wanted" - would appreciate if you could share it. Thanks !
                • 5. Re: Getting window size in EL expression?
                  cjones
                  I changed my logic on the .jspx page. Instead of creating an HTML table and placing the nav button inside the <td></td> of that table, I am putting each button inside a DIV that has the CSS property of box-sizing: border-box;. When the page loads, it runs Javascript that loads a particular .CSS file based on the window size.

                  Here is the Javascript code that loads the appropriate .CSS file based on the window size:
                  function getCSS(cssfile){    
                      cssFilePath = '/css/' + cssfile;
                      loadcss = document.createElement("link");
                      loadcss.setAttribute("rel", "stylesheet");
                      loadcss.setAttribute("type", "text/css");
                      loadcss.setAttribute("href", cssFilePath);
                      document.getElementsByTagName("head")[0].appendChild(loadcss);
                  }
                  
                  if(document.documentElement.offsetWidth <= '250'){
                          getCSS('rfStyle_240w.css');
                  }else if(document.documentElement.offsetWidth <= '325'){
                          getCSS('rfStyle_320w.css');
                  }else if(document.documentElement.offsetWidth <= '650'){
                          getCSS('rfStyle_640w.css');
                  }else if(document.documentElement.offsetWidth <= '810'){
                          getCSS('rfStyle_800w.css');
                  }else{
                          getCSS('rfStyle_800w.css');
                  }
                  This is the CSS style for the "divNavBtn" class. For the smaller screen size, the width is set to width: 50%, which sets creates two 'columns' instead of three:
                  .divNavBtn{
                      box-sizing: border-box;
                      width:  30%;
                      float: left;
                      text-align: center;
                      padding:    5px 5px 5px 5px;
                  }
                  
                  .divNavBtn button{
                      height: 50px;
                      width: 90%;
                      font-size:  .9em;
                  }
                  Here is the code on the jspx page:
                  <af:iterator id="i1" value="#{pageFlowScope.RFHomeBean.rfMenuItems}" var="menuItem" varStatus="menuVS" rows="0">
                   <af:outputText id="ot1" 
                       value="&lt;div class=&quot;divNavBtn&quot;>&lt;button id=&quot;btn1&quot; onclick=&quot;window.location.href='#{facesContext.externalContext.requestContextPath}#{menuItem.label}'&quot;>#{menuItem.value}&lt;/button>&lt;/div>"
                       escape="false"/>
                  </af:iterator>
                  It is a very clunky way of doing it, but I am very limited on the browser that this particular page is targeting, so I have to be very specific about how the layout is created.
                  • 6. Re: Getting window size in EL expression?
                    cjones
                    #{requestContext.agent.capabilities.height}
                    #{requestContext.agent.capabilities.width}

                    Neither one of them worked. I just tried it in an OutputText and it was empty, so I'm assuming those values are null.