click button end text focus on mobile

[erny100]

hi

I test the page zebra-master/samples/richui.simpleapp.html on my devices android 4.0 (sony xperia and huawei tablet )

1. when click on button it does't delete the text into the text component.
2. the text component focus does't open keyboard mobile

thanks

[barmalei]

Pay attention zebra on mobile is not something what is completed. It requires investment more time for testing and polishing.

1. I am testing the latest version of zebra that has to be released soon and will solve such sort of problem
2. It is impossible to use custom written zebra.ui.TextField component on mobile platform ("thanks" to bloody android ), but you can try to use zebra.ui.HtmlTextField component. zebra.ui.HtmlTextField is wrapped as zebra UI component standard HTML text input element.

Few examples of dummy test zebra mobile application can be found following the links below:
http://zebkit.org/samples/richui.mobile.longlist2.html (you can see zebra implemented inertial scrolling)
http://zebkit.org/samples/richui.mobile.designer.html
http://zebkit.org/samples/richui.mobile.edit.html (here you can see native input text element usage to enter text)

[erny100]

ok

About the button , if I use :

 root.find("//Button")._.add(function() {

});

don't work , instead if I add MouseListener to a component it works.

How can I add a MouseListener to a button component ?

another question :)

If I need to search a children into a zebra.ui.Panel with find( path ) , how can I ? where I set id property into the child ?

Thanks

[barmalei]

Cannot understand the first part of question.
What do you mean saying "if I add MouseListener to a component it works." ?

you can use the following construction to find a children by its property:

yourPanel.find("//*[@id='MyComp']")

the id can be assigned just as a component instance property:

var comp = new Label("My Label");
comp.id = "MyLabel";

or if you are defining your UI in JSON file:

{
    "layout": {  "$zebra.layout.BorderLayout": [] },
    "kids": {
          "TOP": {
               "$zebra.ui.Label": [ "MyLabel" ],
               "id": "MyLabel" 
          }
     }
}

or if you declare your UI following JSON JavaScript style:

root.properties({
     layout: new BorderLayout(),
     kids: {
          TOP: new Label("MyLabel").properties({
                  id: "MyLabel"
           })
    }
});

[erny100]

root.find("//Button")._.add(function() {                   
      console.log('' no works (: " )
});


var btn2 = new Panel(MouseListener,Composite, [
          function mousePressed(e){
                      console.log('' works  :)" )
          }
 ]);

[barmalei]

In the first case you have registered not a mouse listener but a button event listener. The button event is logical, specific for the given component event that is fired when a button has been pressed. If, for some reason, you need to catch button mouse events you can:

1. override appropriate mouse event handlers methods of the button component:

var button = new Button([
      function mousePressed(e) {
           this.$super(e);  // don't forget call super implementation of the method
           // put some code below
           ... 
      }
]);

2. You can register global a listener and filter only mouse events that are designated to your particular button component. It can be done via zebra events manager:

zebra.ui.events.addListener(new MouseListener([
    function mousePressed(e) {
        if (e.source == myButton) {
              ... 
        }
    }
]));

[erny100]

after soluction 1 , how can I set name button , I don't find into apidoc Class zebra.ui.Button the property.

thanks

[barmalei]

if you mean a button textual title updating you can do it as follow:

button.kids[0].setValue("New text");

Not very elegant solution, but it is done for the sake of flexibility of button component look and feel customization: every UI component can be used as the button title element. Slightly better looking solution can be the following:

var title = new Label("Button text");
var button = new Button(title);

...

title.setValue("New button text");

[erny100]

var button = new Button([
      function mousePressed(e) {
           this.$super(e);  

      }
]);

console.log(button.kids) /// []  no children ?

[barmalei]

Of course, you have not added any title to the button :). Do it as follow:

var button = new Button("MyTitle", [
    function mousePressed(e) {
        this.$super(e);
        ...
    }
]);

[erny100]

thanks :)

have you intension to open a forum about zebra ?

[barmalei]

No, I don't have enough time to host a forum