User Guide - Web Interface

8. Frame Zoning

In this exercise we are going to nest rows and columns within our parent container (window frame). We will also introduce basic styling as percentages for the dimensions of each row and column before rendering the interface. It's a good idea to study the code in this demo to understand how the styling controls the dimensions of each zone. By default, a row nested inside a column has its width equal to the width of the parent column and a zero height; similarly, a column nested inside a row has its height equal to the height of the parent row and a zero width. You can only nest rows inside columns, or columns inside rows.

Enabling zone shadowing is particularly useful when visualising the identifiers for each element in reference to the interface layout. For example, if you hover the mouse over different sections of the parent container, text will appear at the bottom-right of the browser window reporting the ID of the element currently hovered over - we will discuss applying styles directly to these IDs in later guides.


                
               <!DOCTYPE html> <!-- Copyright (c) 2026 by Javaika Technologies -->

               <html lang = "en-AU"> <!-- Set the primary language to en-AU -->
    
                  <head>

                     <title>Frame Zoning</title> <!-- Set the page title -->
                     
                     <meta name = "robots" content = "noindex, follow">
  
                  </head>


                  <body>

                     <!-- Include the framework script tag -->
    
                     <script type = "module" src = "https://www.javaika.com/frame/web-interface@main/api.js"></script>
    
    
                     <!-- Run the demo as an ES Module -->

                     <script type = "module">
      
                        // Initialize a shorter prefix for referencing.

                        const jwi = window.javaika.webInterface;
                     
                        let windowFrame; // Declare the window frame.
            
            
                        // Initialize the developer token endpoint.
            
                        jwi.init({
            
                           tokenEndpoint: "https://www.javaika.com/pscript/jwt-access.php"
            
                        });
            
            
                        // Authenticate before using the framework.
            
                        jwi.requestToken({
              
                           framework: "web_interface" // Specify the framework for token issuance.
              
                        });
                        
                        
                        /*
                         * Builds the interface.
                         */
                        function buildInterface()
                        {
                           // Define the controls for the interface.
            
                           windowFrame = new jwi.WindowFrame();
                        
                        
                           let rowElement1 = new jwi.RowElement();
            
                           let rowElement2 = new jwi.RowElement();
            
                           let rowElement3 = new jwi.RowElement();
                        
                           let rowElement4 = new jwi.RowElement();
            
                           let rowElement5 = new jwi.RowElement();
                        
                        
                           let colElement1 = new jwi.ColElement();
            
                           let colElement2 = new jwi.ColElement();
                        
                           let colElement3 = new jwi.ColElement();
                        
                        
                           // Nest the controls within each other.
                        
                           colElement2.addRowElement(rowElement4);
                        
                           colElement2.addRowElement(rowElement5);
                        
                        
                           rowElement2.addColElement(colElement1);
            
                           rowElement2.addColElement(colElement2);
                        
                           rowElement2.addColElement(colElement3);
                        
                        
                           windowFrame.addRowElement(rowElement1);
            
                           windowFrame.addRowElement(rowElement2);
            
                           windowFrame.addRowElement(rowElement3);
                        
                        
                           // Add custom styles to the controls.
                        
                           rowElement1.addStyle('height', '25%');
            
                           rowElement2.addStyle('height', '35%');
            
                           rowElement3.addStyle('height', '40%');
                        
                           rowElement4.addStyle('height', '50%');
                        
                           rowElement5.addStyle('height', '50%');
                        
                        
                           colElement1.addStyle('width', '25%');
            
                           colElement2.addStyle('width', '50%');
            
                           colElement3.addStyle('width', '25%');
                        
                        
                           // Render interface to the browser window.
            
                           jwi.renderInterface(windowFrame);
                        }
                     
                     
                        // Authenticate callback handler.
                     
                        function onAuthenticate(event)
                        {
                           jwi.refreshToken(); // Refresh the authentication token.
              
                           console.log('[Web Interface] Authentication received callback:', event);
                        }
                     
                     
                        // Initialized callback handler.
            
                        function onInitialized(event)
                        {
                           buildInterface(); // Setup interface components.
                           
                           console.log('[Web Interface] Framework initialized callback:', event);
                        }
                     
                     
                        // Window frame initialized callback handler.
                     
                        function onWindowFrameInitialized(event)
                        {
                           windowFrame.enableZoneShadows(); // Enable zone shadowing on mouse hover.
                           
                           console.log('[Web Interface] Window frame initialized callback:', event);
                        }
            
                     
                        // Callback event after authenticate.
            
                        document.addEventListener
                        (
                           'javaika.webInterface.authenticate', onAuthenticate
                        );
                     
                      
                        // Callback event after initialized.
                     
                        document.addEventListener
                        (
                           'javaika.webInterface.initialized', onInitialized
                        );
                     
                     
                        // Callback event after window frame initialized.
                     
                        document.addEventListener
                        (
                           'javaika.webInterface.windowFrameInitialized', onWindowFrameInitialized
                        );
    
                     </script>

                  </body>
  
               </html>

View Demo Download Demo