5 Replies Latest reply: May 31, 2013 3:22 AM by Hariharasudan Parthasarathi RSS

    Doc Extension - iTabrow

    Alexander Karlsson

      Christmas season is the time to be jolly but also the time to hide from your mother-in-law and write code.

      With QV11 we got the possibility to embed code at the document level. Here is a simple example that turns our tabrow into a clone of the OSx Dock.

       

      1. Install the qar-file
      2. Run the sample qvw - Should work straight away but you would need QV11 and a semi modern browser installed with css3 support.

       

      iTabrow.PNG

        • Doc Extension - iTabrow
          Brian Munz

          Love it!  Great work.

          • Re: Doc Extension - iTabrow
            Michael Reese

            Hey Alexander, I was hoping you could help me understand a couple of things.

             

            • In basic terms, how does this script know to bind to the QlikView tabs in the AJAX client?  My JavaScript isn't great so I'm not totally clear on what's actually happening in the script. 
            • Would you mind explaining what element, ui, li, xmltabs actually represent? 
            • What is the appendchild doing?
            • What is this.Layout.value?
            • What is the difference between tabNodes and xmlTags?
            • How does the action

             

            I can assume the obvious that the for loop is building the docking station and populating the buttons. 

            It looks like the element is the docking station, ul is the qv document and li is the number of tabs in the app.  Would this always be case for ul and li?

             

            Is there anything that documents what elements relate to what QV objects?

             

            Thanks in advance!

             

            Qva.LoadCSS("/QvAjaxZfc/QvsViewClient.aspx?public=only&type=document&name=Extensions/iTabrow/menu.css");
            
            Qva.AddDocumentExtension('iTabrow', function(){
                      this.Document.SetTabrowPaint(VoodooMagic);
            });
            
            
            function VoodooMagic()
                      { 
                                var element = this.Element;
                                element.className = "dock";
                                element.style.position = "absolute";
            
            
                                          var tabrowElem = element.getElementsByTagName("ul")[0];
                                          if (!tabrowElem) {
                                                    tabrowElem = document.createElement("ul");
                                                    element.appendChild(tabrowElem);
                                          }
              
                                          var xmlTabs = this.Layout.value;
                                          var tabNodes = tabrowElem.getElementsByTagName("li");
              
                                          for (var itab = 0; itab < Math.max(xmlTabs.length, tabNodes.length); itab++) {
                                                    var xmlTabNode = xmlTabs[itab];
                                                    var tabelem = tabNodes[itab];
                                                    if (!xmlTabNode && !tabelem) 
                                                              continue;
                                                    var aelem, spanelem;
                                                    if (!tabelem) {
                                                              tabelem = document.createElement("li");
                                                              tabrowElem.appendChild(tabelem);
                                                    }
                                                    tabelem.innerHTML = ""; 
                                                    if (!xmlTabNode || !xmlTabNode.visible) {
                                                              tabelem.style.display = "none";
                                                              continue;
                                                    }
              
                                                    aelem = document.createElement("a");
                                                    aelem.href = "#";
                                                    aelem.innerHTML = "<em><span>" + xmlTabNode.text + "</span></em>";
                                                    aelem.innerHTML += "<img src='/QvAjaxZfc/QvsViewClient.aspx?public=only&type=document&name=Extensions/iTabrow/" + itab + ".png' alt=" + xmlTabNode.text + " />";
                                                    tabelem.appendChild(aelem);
              
                                                    var id = xmlTabNode.name;
                                                    tabelem.id = id;
              
                                                    if (xmlTabNode.action) {
                                                              tabelem.onclick = onclick_action;
                                                              tabelem.Action = this.Name + "." + id;
                                                    }
                                          }
            };
            
            • Re: Doc Extension - iTabrow
              Halmar Heijnen

              Hi Alexander,

               

              I like your extension eather, but can you explain how we can implement it in our own application?

               

              Tnx,

               

              Halmar Heijnen

              • Re: Doc Extension - iTabrow
                Fabio Giacomo Nuzzo

                Hello excellent job, but I can not understand how to add an extension  "Doc" a  qvw file. If you can help me do me a pleasure. Thanks

                • Re: Doc Extension - iTabrow
                  Hariharasudan Parthasarathi

                  Wow Great.

                   

                  Alex, can you help me in finding right extension that is used in TV finder for Geo spatial implementation of Find me Option.