XPages mobile web application ; input time with iPhone - iphone

I'm making a mobile web application with the extension library in XPages. The user has to make some inputs. One of those is time. I would like the user to get the native spinning time scroller from the iPhone. Instead he gets an unusable time "choser". How could I do this? Now I'm using standard code like: (code is for a date but problem remains the same)
<xp:inputText value="#{document1.visDate}" id="visDate1"
defaultValue="#{javascript:#Now()}" style="width:100px">
<xp:dateTimeHelper id="dateTimeHelper1"></xp:dateTimeHelper>
<xp:this.converter>
<xp:convertDateTime type="date">
</xp:convertDateTime>
</xp:this.converter>
</xp:inputText>

You could set the type property of edit box to time, something like this:
<xp:inputText id="inputText1" type="time"></xp:inputText>
The type property supports quite a few other values. Have a look in the All Properties tab for edit box. But I doubt the value stored would be in NotesDateTime format.

Related

XPages Typeahead autocomplete behavior

In XPages Mobile controls I'm having a problem with Typeahead. Actually I think the behavior changed recently - maybe with the last update of the Ext. Library but I'm not sure. Thats when we noticed the change by the way. Is has been working as desired.
Below are 2 screenshots. The first one is on a normal XPage and the second is inside Mobile Controls.
Notice how the user starts typing a "D" in the first one there's no "autocomplete". But in the second screenshot the user typed a "D" and it immediately added in the first value which in this case starts with an "O". It replaced the "D" that the user typed.
(The fact that the record with the beginning "O" is showing is working as designed, so ignore that.)
The problem is I don't want that autocomplete happening at all. I want the behavior of the first screenshot inside mobile controls. so the user can keep typing and it'll will continue to filter the list and not overwrite what the user entered.
I'm fairly certain it used to do that and I don't know what changed. The code itself did not change - that I know.
I've attempted to set autocomplete and autocorrect to "off" without any luck. I'm not sure what the difference is or if they even truly come into play.
How can I get the field to not auto-fill inside of Mobile Controls?
Any advice would be appreciated. I should note that this is privately going to be used on iPads. So it's the Mobile Safari browser.
Thanks!
Here is the basic code for this:
<xp:inputText id="inputJobCode" value="#{viewScope.selectedJob}"
styleClass="target span9">
<xp:this.attrs>
<xp:attr name="placeholder" value="Job Code" />
<xp:attr name="autocorrect" value="off" />
<xp:attr name="autocomplete" value="off" />
</xp:this.attrs>
<xp:this.dojoAttributes>
<xp:dojoAttribute name="autocorrect" value="off" />
<xp:dojoAttribute name="autocomplete" value="off" />
</xp:this.dojoAttributes>
<xp:typeAhead mode="partial" minChars="1" valueMarkup="true"
var="searchValue" valueList="#{javascript:return com.companyname.datahub.TypeAhead.jobTypeAhead(searchValue);}">
</xp:typeAhead>
<xp:eventHandler event="onchange" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:var key:String = viewScope.get("selectedJob");
getComponent("inputJobCode").setValue("");
//JobData.load(key);
}]]></xp:this.action>
</xp:eventHandler>
</xp:inputText>
Here is what the output HTML is from the mobile control page:
<input type="text" id="view:_id1:checkOutFacilityID_content:_id4:inputText5"
name="view:_id1:checkOutFacilityID_content:_id4:inputText5" autocomplete="off"
class="mblTextBox target" placeholder="Job Code" autocorrect="off"
dojotype="extlib.dijit.mobile.TypeAheadCombo"
store="view__id1_checkOutFacilityID_content__id4__id9" data-dojo-
props="list:'view__id1_checkOutFacilityID_content__id4__id9', searchAttr:'value',
labelAttr:'label', labelType:'html'" spellcheck="false" tabindex="0" lang="en"
widgetid="view:_id1:checkOutFacilityID_content:_id4:inputText5" value="">
I got an answer for this from the Maire at IBM.
There was a change made in a recent Ext. Library update regarding Type Ahead. The solution for now is to use dojo to add a setting. Here's the email that IBM sent me.
Hi David,
The mobile typeAhead behavior changed in the release 901v00_04.20140226-1506
For details of the changes, see the section "Improvements to XPages TypeAhead control support" in the readme.pdf for that release.
I'm reproducing the behavior you're talking about, and I've logged an SPR:
SPR#MKEE9L7E9BLink XPages, Mobile TypeAhead, first item in the dropdown is being inserted into the edit box (should not be)
To workaround the issue:
The workaround is to write a script changing the edit box behavior,
so insert this control into your XPage, and change the name inputText1 to match your edit box's name:
<xp:panel id="panel1">
<xp:eventHandler event="onClientLoad" submit="false">
<xp:this.script><![CDATA[dijit.byId('#{id:inputText1}').autoComplete=false;/*Note autoComplete=false is different to autocomplete=off*/ ]]></xp:this.script>
</xp:eventHandler>
</xp:panel>
Regards,
Maire
I note the dojoType added to mobile - dojotype="extlib.dijit.mobile.TypeAheadCombo". It sounds like that makes it a mixture of a combo box and typeahead, which explains the functionality you're seeing.
Does it work if you add that Dojo Attribute to the non-mobile one?

iPhone: Best way for user to select options in a manner similar to a HTML select?

I'm currently coding an iPhone app and i need to simulate a HTML select.
The app is a port of a web application which allows the user to select different units of measurement. For example, a user can select 'Millimetres' or 'Inches'. This is nice and simple in HTML as a select is perfect for the job, but how do i present this choice to the user of an iPhone app as there is no such thing as a select in UIKit?
The closest option (and the standard one used for such things) is a UIPickerView.
If you're after sample code, see the "Related sample code" section in the header of the above linked document.
In terms of presentation, you could use a UIActionSheet to present the UIPickerView - there's a good question/answer already for this at Add UIPickerView & a Button in Action sheet - How?
You're looking for the UIPickerView:
http://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIPickerView_Class/Reference/UIPickerView.html#//apple_ref/occ/cl/UIPickerView

Can we turn on the iphone's number keyboard WITHOUT using type=number?

I'm making a webapp, and I'd like an input field to show the Iphone's number keypad.
I understand that type=number will make the keypad show the way I'd like.
The trouble is that type=number does not support placeholder text. So if I would like this:
Expiration Date:
[eg: 2010]
I can not get it to work, and also show the right keyboard.
Is there a way to force the iPhone keyboard into number mode without using the number input type?
Placeholder seems to work (in both Safari on my Mac as Mobile Safari on my iPhone; compatibility list).
<input type="number" placeholder="2010">
http://jsfiddle.net/XPL48/
Otherwise, use JavaScript to create a placeholder, e.g. this jQuery plugin: http://plugins.jquery.com/project/placeholder.

How to simulate a mouse click on a UIWebView in Cocoa for the iPhone?

I'm trying to setup automated unit tests for an iPhone application. I'm using a UIWebView and need to simulate clicks on different links. I've tried doing this with JavaScript, but it doesn't produce the same result as when I manually click on the links. The main problem is with links that have their target property set.
When you manually click on a standard "popup" link (e.g. <a href="http://example.com" target="_blank">), the UIWebView will ignore the click event and won't navigate to anything. If you then try clicking on this very same link automatically via the JavaScript dispatchEvent() method, the UIWebView will completely ignore the target attribute and will open up the link normally in the current page.
I need an my automatic unit testing to produce the exact same results as when you manually click a link.
I believe the only way for this automated unit test to work correctly is to simulate a mouse click at a specific x/y coordinate (i.e. where the link is located). Since the unit testing will only be used internally, private API calls are fine.
It seems like this should be possible since the iPhone app isimulate seems to do something similar.
Is there any way to do this in the framework?
I found a similar question titled Simulate mouse click to window instead of screen, however I'm guessing this method is only valid for OS X, and not for iPhone OS.
I suppose you could simulate the touches by calling the touchesBegan/touchesEnded methods directly on the UIView (check the UIResponder class).
The proper way to do this would be to construct your own UIEvent and then post this event to your UIApplication instance via its -sendEvent: method.
However, there doesn't appear to be a public API for constructing a UIEvent, so you might be out of luck.
Could you store the locations of the clicks in a data structure that you use in your tests and then simulate standard touch events as described here described here
--- Just spotted that you didn't have much luck with the example on this link. The only other options I can suggest would be to manipulate the html when running from a test to replace any _target links (you know that UIWebView handles these properly when clicking manually, so I think a small bodge is ok for the unit test?).
Nice walkthrough in this answer
For your specific case, it may be sufficient to test in the simulator and use a MacOS event generator to make the clicks.
The private calls for recording and sending events are part of GraphicServices/GSEvent.h with the standard use at your own risk disclaimers. Every UIEvent is really a UIInternalEvent that has a reference to a __GSEvent, so for recording you can use the _gsEvent property to get the underlying event.
#property (nonatomic,assign) struct __GSEvent *_gsEvent;
I have not used any of this stuff, but it looks like GSSendSystemEvent would be a good place to start.

How can I avoid iphone safari first letter in caps

I am designing a small webpage targeted for the iPhone/iPod touch. I have a form that requires the user to enter a code. When you tap on the corresponding field, the iphone will automatically set the first letter to caps. Is there any way to avoid this? I want the whole field to be entered in small caps.
Thanks
Edit: use "none" instead of "off". On your webpage, all you need to do is set the autocapitalize property to off for your input field. So:
<input autocapitalize="none">
See the Safari Web Content Guide: Designing Forms and Safari HTML Reference
Below is the answer I had before, which relates to native apps. Keeping around for anyone who's looking for that answer.
From the UITextField Documentation
The appearance of the keyboard itself can be customized using the properties provided by the UITextInputTraits protocol. Text field objects implement this protocol and support the properties it defines. You can use these properties to specify the type of keyboard (ASCII, Numbers, URL, Email, and others) to display. You can also configure the basic text entry behavior of the keyboard, such as whether it supports automatic capitalization and correction of the text.
So basically, the UITextField supports this protocol. The property needed is the autocapitalizationType. An example in code is:
myUITextField.autocapitalizationType = UITextAutocapitalizationTypeNone;
or if you dislike the dot notation:
[myUITextField setAutocapitilizationType:UITextAutocapitalizationTypeNone];
For other input types, there are attributes available that do what they say:
<input type="text" autocorrect="off" autocapitalize="off">