Hello everyone :)
 
I’m trying to globally capture all key events by using zebra.ui.events.addListener… (as described here) and pop up an alert message as soon as a key is pressed.
The problem is that nothing happens when a key is pressed, so I’m definitely doing something wrong here..
Below is my code:

<!doctype html>
<head>
    <meta charset="utf-8">
    <script src="lib/zebra.js"></script>
    <script type="text/javascript">
        var ui;
        zebra.ready(function(){
            ui = zebra();
            zebra()["display"] = new zebra.ui.zCanvas();
            ui["display"].root.setLayout(new zebra.layout.BorderLayout());
            ui["display"].fullScreen();
            zebra()["root"] = new zebra.ui.Panel();
            ui["root"].setLayout(new zebra.layout.FlowLayout(zebra.layout.CENTER, zebra.layout.CENTER, zebra.layout.VERTICAL, 2));
            ui["root"].setBackground("red");
            ui["display"].add(ui["root"]);
            zebra.ui.events.addListener({
                keyPressed : function (){
                    alert("test");                
                }
            });
        });            
    </script>
</head>
<body>

 

2 answers

Staff February 18, 2016

There is no UI component that can hold focus in your example. That means no source of key events exist in this case. The global key listener gets key events from all UI components that can hold focus. Only UI component that can hold focus can trigger key events. For instance if you will have 10 text fields, grid, tabs UI components in your application you can listen with your listener key events the components fire when they hold focus. In your example you can make root component focusable by setting “canHaveFocus” to true:

zebra()["root"].canHaveFocus = true;

Than when you press on canvas the root panel will get focus. Than when you start typing something your listener will start getting key events. One more thing is “alert()” is not good choice to debug application. It works weird since it has influence to UI behavior. Use “console.log(…)” for debug purposes.

#1
  1. Thanks!!! the ".canHaveFocus" property dis the trick !I'm pasting my full code again in case anyone has a related issue.
<!doctype html>
<head>
    <meta charset="utf-8">
    <script src="zebra.js"></script>
    <script src="lib/jquery.js"></script>
    <script type="text/javascript">
        var ui;
        zebra.ready(function(){
            eval(zebra.Import("ui", "layout", "util", "data", "io", "ui.designer", "ui.grid", "ui.tree"));
            ui = zebra();
            zebra()["display"] = new zebra.ui.zCanvas();
            ui["display"].root.setLayout(new zebra.layout.BorderLayout());
            ui["display"].fullScreen();
            zebra()["root"] = new zebra.ui.Panel();
            ui["root"].id = "display_root";
            ui["root"].setLayout(new zebra.layout.FlowLayout(zebra.layout.CENTER, zebra.layout.CENTER, zebra.layout.VERTICAL, 2));
            ui["root"].setBackground("red");
            ui["display"].add(ui["root"]);
            
            zebra()["label_01"] = new zebra.ui.Label("click me..");
            ui["label_01"].id = "label_01";
            ui["root"].add(ui["label_01"]);

            zebra()["pnl1"] = new zebra.ui.Panel();
            ui["pnl1"].id = "pnl1";
            ui["pnl1"].canHaveFocus = true;
            ui["pnl1"].setPreferredSize(300,300);
            ui["pnl1"].setLayout(new zebra.layout.FlowLayout(zebra.layout.CENTER, zebra.layout.CENTER, zebra.layout.VERTICAL, 2));
            ui["pnl1"].setBackground("white");
            ui["root"].add(ui["pnl1"]);

            zebra()["txt1"]  = new zebra.ui.TextField();
            ui["txt1"].id = "txt1";
            ui["txt1"].setSize(300,50);
            ui["pnl1"].add(ui["txt1"]);
            

            zebra.ui.events.addListener({
                mousePressed : function (event){
                    console.log(event.source.id);                
                },

                keyPressed : function (event){
                    console.log(event.source.id + " >> " + String.fromCharCode(event.code));
                }

            });



        });    
    </script>
</head>
<body>
</body>
</html>
#2

Please login or Register to Submit Answer