IOS and "SETFOCUS" in a field

[Harro-DUS]

Hi,
I'm programming with Servoy 6.0.9 build 1239.

Most of my users work with iPAD and iPHONE.

On a form I have several text-fields and a Button.
After pressing the button I want to set the cursor (setfocus) in one of the fields, depending of the logik within the button.

I tried this:

Code: Select all

elements.<<MyField>>.requestFocus(true);

It have the expected result in:
- Internet Explorer
- Safari on MAC

It does not work on:
- iPAD
- iPHONE
- the corsor is nowhere on the screen (pressing TAB on an attached Bluetooth-Keyboard has no effect)

Has someone an idea what's wrong or how I can get it working??
Is it a (known) bug?
Is it solved in a newer release?

Thank you
Harro

[david]

Mobile input fields behave a bit differently than standard. For example, the input keyboard pops up automatically and the type of input can be controlled.

Servoy's web client isn't designed with mobile in mind so handling mobile nuances isn't supported. Plus, you will find that performance of web client on mobile devices is on the low end (to put it nicely).

The latest version of Servoy has a specific mobile client.

[lwjwillemsen]

?

setFocus / requestFocus should work in Servoy webclient on any platform I would think...

Correct me if I am wrong.

[david]

It probably is working. Just that it isn't popping open a keyboard (which is triggered by touch) and if a keyboard isn't up, the input cursor doesn't actually show in the field. My guess without specifically testing out.

[lwjwillemsen]

Ok, thanks David. It would also be nice if the numerical keyboard would popup when entering a numerical field.
In HTML5 there are tags for that but according to Paul Bakker it is not easy to implement in Servoy webclient because of the variety of supported browsers...

Regards,

[david]

Paul may be referring to having to support IE7 or something which probably doesn't support the various html5 input types (http://www.w3schools.com/html/html5_for ... _types.asp).

However, if you don't care about IE7 and whatnot it's not hard to implement. The idea is that Servoy input fields are either of type "text" or "textarea". Change any "text" type input to one of the above html5 input types using web client utils. You can automate by using design time properties and one function that loops through all fields tagged with whatever naming scheme you come up with for design time property and values (ie: inputType = color | date | datetime | datetime-local | email | month | number | range | search | tel | time | url | week ).

Now you have all the cool input widgets on both mobile browsers and regular browsers. And mobile devices will pop open input specific keyboards.

However, there is one...slight...problem. Servoy won't recognize data input from fields that aren't of type "text". Good news is that this is controlled by their client-side javascript found in servoy.js which isn't that hard to modify:

Code: Select all

var focusedElementType = focusedElement.getAttribute("type");
if(focusedElementType != "button" && focusedElementType != "submit") {
if(focusedElementType == "text" || focusedElementType == "textarea") {
focusedElementCaretPosition = Servoy.Utils.doGetCaretPosition(focusedElement, true);
focusedElementSelection = Servoy.Utils.getSelection(focusedElement);
}

So you need to modify this code to include all the other input types. Some examples of hacking their client-side code:

http://www.servoymagazine.com/home/2012 ... ation.html
viewtopic.php?f=34&t=19075#p102710

And Troy is doing an approach in Data Sutra that is quite a bit better (a bit more future-proof as Servoy changes versions) but would take some time to write up.

This part is probably worth a feature request in the end. For Data Sutra we just did it ourselves and moved on A lot of cool input "widgets" can be had using this approach.

Number spinner input. Note type "number" in the markup.

number-type.png (222.1 KiB) Viewed 5827 times

Cool color picker. Note type "color" in the markup.

color-type.png (258.02 KiB) Viewed 5827 times

Returned hex value of the color input

color-value.png (126.02 KiB) Viewed 5827 times

[lwjwillemsen]

David,

Many thanks for your sharing your knowledge on this matter. Much appreciated !

@Servoy : More attention to webclient enhancement in this area please (imho)...

[Harro-DUS]

Hi,
thanks but I'm sorry I don't know what to do now. I'm not yet very familiar with Servoy.

Here again may problem:
- I press a button
- within the logik of the button, I change field-properties
Example:
elements.cust_no_SearchField.bgcolor = "#aaaaaa";
elements.cust_no_SearchField.readOnly = true;
elements.prospect_i_SearchField.bgcolor = "#FFF";
elements.prospect_i_SearchField.readOnly = false;
elements.prospect_i_SearchField.requestFocus(true);

After that on iPAD & iPhone:
- no objekt on the form has the focus.
- the cursor is not visible

I want to achieve that the right field has the focus and the user can type.

If the answer to that was in the posts, I did not realize.

Hope somebody can help
Thanks Harro

[david]

elements.prospect_i_SearchField.requestFocus(true);

After that on iPAD & iPhone:
- no objekt on the form has the focus.
- the cursor is not visible

I want to achieve that the right field has the focus and the user can type.

If the answer to that was in the posts, I did not realize.

On mobile devices a touch event needs to fire to make this happen. requestFocus() doesn't fire a touch event so this is why you see the different behavior between platforms.

I could tell you how to hack it in but using web client for mobile solutions is just a bad idea. Either use Servoy's mobile client or some other front-end technology with Servoy as your backend.

[Harro-DUS]

elements.prospect_i_SearchField.requestFocus(true);
I could tell you how to hack it in but using web client for mobile solutions is just a bad idea. Either use Servoy's mobile client or some other front-end technology with Servoy as your backend.

Hello David,
when I started my project the mobile solutions did not exist and my SERVOY-consultants did not offer other technonolgies.

Overall my project does what it should do.
Just this behaviour ist not user friendly.

If possible I would like to set the Focus by program to a specific field after changing properties of text-boxes (ex: bgcolor)

I would appreciate if you could help me to solve this.

Kind regards Harro

When I use a statement like this:
elements.company_name.bgcolor = "#FFF";
no object on the form has the focus.