Zebkit HTML Elements

Zebkit introduces unique feature - “seamless integration of HTML elements into zebkit layout”. HTML elements can be placed in any zebkit UI component as if the HTML elements are also rendered on HTML5 Canvas. Placing HTML elements into zebkit layout gives the following:

As any other zebkit UI component HTML elements have to be represented as an instances of standard “zebkit.ui.Panel” class. It is done with help of “zebkit.ui.web.HtmlElement” class that inherits “zebkit.ui.Panel”.

HTML elements in zebkit layout

Find below an example of zebkit application that does the following:

HTML elements in zebkit layout
zebkit.require("ui", "ui.web", function(ui, web) {
    var root = new ui.zCanvas(500, 300).root;
    root.setBorderLayout(8).setBorder("plain").setPadding(32);
    
    // Create HTML DIV element
    var htmlElement = new web.HtmlElement();
    htmlElement.setBorderLayout(8); // set border layout for the DIV  
    htmlElement.setPadding(16);
    htmlElement.add(new web.HtmlElement()
            .setContent("HTML DIV element") // inner DIV content
            .setColor("lightcoral")         // font color
            .setStyle("background-color", "cream")); // CSS background
    
    // Wrap zebkit UI component with a HTML canvas element
    // if the component has to be added into an HTML element
    var c2 = new web.HtmlCanvas().setBorderLayout();
    c2.add(new ui.Checkbox("Zebkit checkbox inside HTML element")
                 .setBackground("orange")
                 .setPadding(8));

    htmlElement.add("top", c2);

    root.add("bottom", new ui.Button("Zebkit button"));
    root.add(htmlElement).setStyle("background-color", "greenyellow");
});

More impressive example is scrolling of HTML element with zebkit UI scroll panel component. In this case the HTML element is scrolled with virtual, rendered on HTML canvas scrollbars !

Scroll HTML element with zebkit scroll panel
zebkit.require("ui", "ui.web", function(ui, web) {
    var root = new ui.zCanvas(400, 400).root;
    root.setBorderLayout(8).setBorder("plain").setPadding(32);
    
    // Instantiate HTML element
    var htmlElement = new web.HtmlElement();

    // Load HTML element inner content (HTML table) 
    zebkit.GET("./test.html").then(function(r) {
        htmlElement.setContent(r.responseText);        
    });

    // Add the component into scroll panel.
    // Pay attention it should be wrapped with special 
    // "HtmlScrollContent" component to scroll it properly 
    root.add("center", new ui.ScrollPan(
        new web.HtmlScrollContent(htmlElement)
    ));
});

Handle HTML element event following zebkit style

Below find an example of handling zebkit input events (“pointerEntered” and “pointerExited”) in HTML DIV element. The way how it is done is the same to standard zebkit input events handling paradigm:

Handling zebkit input events with HTML elements
zebkit.require("ui", "ui.web", function(ui, web) {
    var root = new ui.zCanvas(600, 200).root;
    root.setBorderLayout().setBorder("plain").setPadding(32);
    
    var htmlElement = new web.HtmlElement()
    .setContent("HTML DIV element, move mouse cursor in/out");

    htmlElement.setStyle("background-color", "greenyellow");  
    
    // add  "pointerEntered" events handler
    htmlElement.pointerEntered = function(e) {
        this.setStyle("background-color", "gold");
    };    
    // add pointerExited events handler
    htmlElement.pointerExited = function(e) {
        this.setStyle("background-color", "greenyellow");
    };    
    root.add(htmlElement);
});

Decorate HTML element with zebkit rendering

Find below an example that decorates “zebkit.ui.web.HtmlTextField” HTML element with:

The application catches “keyReleased” event to refresh the chart with entered by a user interval.

Chart as a background of HTML text field
zebkit.require("ui", "ui.web", "draw", function(ui, web, dr) {
    var root = new ui.zCanvas(600, 200).root;
    root.setBorderLayout().setBorder("plain").setPadding(32);
    // Instantiate text field component 
    var ta = new web.HtmlTextField("Correct function interval: 0-12")
                .setStyle("background-color", "transparent")
                .setBorder("plain")  
                .setFont(new zebkit.Font("Helvetica", 32));
      
    ta.keyReleased = function(e) {
        this.setBackground(null); // clear layout 
        // Reg exp to detect rendered function interval entered by 
        // a user
        var re=/((\-)?[0-9]+(.[0-9]+)?)[,\-]((\-)?[0-9]+(.[0-9]+)?)/,
            m = this.getValue().match(re);
        if (m !== null) {
            var min=parseFloat(m[1]), max=parseFloat(m[4]);
            if (max > min && !isNaN(min) && !isNaN(max)) {  
                this.setBackground(new dr.FunctionRender(function(x){
                  return Math.sin(x)*Math.cos(2*x)-Math.cos(x*x); 
                }, min, max));
            }
        } 
    };    
    ta.keyReleased(null); // a bit dirty trick to render initial chart
    root.add(ta); // add text field to zebkit layout
});