Posts tagged with: Mobile

Mobile Scrolling Components

One of the issues you can run into with AIR Mobile Development is scrolling data.  If you use a Spark List (s:List) the component has built-in scrolling.  In fact, you can even have other components around the list that do not scroll and the list that does scroll.  However, a list is not optimal for editing data.  You need a form to do that.  A form, whether it is a Spark Form or a collection of s:HGroup components with labels, does not scroll.  However, if you embed the form components inside a Spark Scroller the  form will scroll without a problem.

I have put together a sample application that demonstrates a form that has no scrolling, scrolling, and a view with a scrollable list. Below is a screenshot of each of the three lists with some sample code.

This is an example of the form that is unable to scroll. Doesn't mean much until you see the next form which is the same but is scrolled part of the way down.

</p>
<p><s:VGroup width="100%" height="100%"<br />
paddingBottom="10" paddingLeft="10"<br />
paddingRight="10" paddingTop="10"><br />
<s:TextArea text="Below is a form but this is not in a scroller so it will not scroll."<br />
editable="false" borderVisible="false" width="100%"/><br />
<s:HGroup width="100%"><br />
<s:Label width="150" text="First Name"/><br />
<s:TextInput width="100%"/><br />
</s:HGroup><br />
<s:HGroup width="100%"><br />
<s:Label width="150" text="Last Name"/><br />
<s:TextInput width="100%"/><br />
</s:HGroup><br />
<s:HGroup width="100%"><br />
<s:Label width="150" text="Street Address"/><br />
<s:TextInput width="100%"/><br />
</s:HGroup><br />
<s:HGroup width="100%"><br />
<s:Label width="150" text="City"/><br />
<s:TextInput width="100%"/><br />
</s:HGroup><br />
......<br />
<s:HGroup width="100%"><br />
<s:Label width="150" text="Work Phone"/><br />
<s:TextInput width="100%"/><br />
</s:HGroup><br />
</s:VGroup></p>
<p>

This is the exact same form as the No Scroll option. However, as you can see it is partially scrolled through the form. This is because the form is embedded in the s:Scroller component.

</p>
<p><s:Scroller width="100%" height="100%"><br />
<s:VGroup width="100%" height="100%"<br />
paddingBottom="10" paddingLeft="10"<br />
paddingRight="10" paddingTop="10"><br />
<s:TextArea text="Below is a form that inside a s:Scroller component and should scroll without a problem."<br />
editable="false" borderVisible="false" width="100%"/><br />
<s:HGroup width="100%"><br />
<s:Label width="150" text="First Name"/><br />
<s:TextInput width="100%"/><br />
</s:HGroup><br />
<s:HGroup width="100%"><br />
<s:Label width="150" text="Last Name"/><br />
<s:TextInput width="100%"/><br />
</s:HGroup><br />
<s:HGroup width="100%"><br />
<s:Label width="150" text="Street Address"/><br />
<s:TextInput width="100%"/><br />
</s:HGroup><br />
<s:HGroup width="100%"><br />
<s:Label width="150" text="City"/><br />
<s:TextInput width="100%"/><br />
</s:HGroup><br />
....</p>
<p><s:HGroup width="100%"><br />
<s:Label width="150" text="Work Phone"/><br />
<s:TextInput width="100%"/><br />
</s:HGroup><br />
</s:VGroup><br />
</s:Scroller></p>
<p>

This is a simple form with a label and a s:List component. The List component has built in scrolling functionality.

</p>
<p><s:VGroup width="100%" height="100%"<br />
paddingBottom="10" paddingLeft="10"<br />
paddingRight="10" paddingTop="10"><br />
<s:TextArea text="Below is a list which are always able to scroll.  Unfortunately a list is not usable for editable forms."<br />
editable="false" borderVisible="false" width="100%"/><br />
<s:List width="100%" height="100%" dataProvider="{bindableData}" labelFunction="list_labelFunction"/><br />
</s:VGroup></p>
<p>

So that is a quick explanation of scrolling within a View for AIR Mobile.  This is all in response to a Cookbook Request.  The source code can be found here.


PopUpList for Mobile

With the recent post Debugging A Swipe Gesture I included the functionality to view the history of swipes in the application.  I didn’t highlight this functionality in the previous post but I added a new component to the Day2DayDevelopment library called PopUpList.  This is a simple component but it is a mobile popup that displays a list with a close button.  The image below is from the Debugging A Swipe Gesture application.

To popup the PopUpList component you use the following code:

</p>
<p>var window:PopUpList = new PopUpList();<br />
window.listData = history;<br />
window.labelFunction = historyList_labelFunction;<br />
PopUpManager.addPopUp(window, this);<br />
PopUpManager.centerPopUp(window);</p>
<p>

This is a simple example but I thought I would highlight it.  Again the component is available in the Day2DayDevelopment library I am slowly putting together and the example is in the GestureDebugging example.


Debugging A Swipe Gesture

One of the problems that you run into with mobile applications is working with gestures. The emulator that you use with Flash Builder Burrito  does not have any way of simulating swipe gestures.  You can test the swipes on a device if you have one handy but even then it is annoying to push the application to your device every time you  need to test the gestures.  This example will demonstrate a way to use View States to debug swipe gestures from the built-in emulator.

Begin by creating a Flex Mobile Project and within the firstView of the project and add a couple of states.

</p>
<p><s:states><br />
<s:State name="GestureSwipeEnabled"/><br />
<s:State name="GestureSwipeDisabled"/><br />
</s:states></p>
<p>

These two View States are the primary component of this example.  Next add a creationComplete event listener on the View.  The eventListener has to check and see if gestures are supported by the device.

<br />
Multitouch.inputMode = MultitouchInputMode.GESTURE;</p>
<p>if (Multitouch.supportedGestures == null || Multitouch.supportedGestures.length == 0 || Multitouch.supportedGestures.indexOf(TransformGestureEvent.GESTURE_SWIPE) == -1) {<br />
this.currentState = "GestureSwipeDisabled";<br />
}<br />
else {<br />
this.currentState = "GestureSwipeEnabled";<br />
}</p>
<p>

Set the View State accordingly based on the abilities of the device.  Now place a border of buttons (1 on the top, bottom, left, and right) around the View.  You can do this a variety of ways.  I chose to use a combination of HGroup and VGroup containers.  With Flex 4 View States are different than previous versions.  You can now specify includeIn or excludeFrom (which are mutually exclusive) for each component.  For each of the buttons add the property “includeIn=’GestureSwipeDisabled'”  What the View State does is shows the buttons if gestures are not enabled on the device and hides them if they are.

Add a click event listener to each button and dispatch the event accordingly. Below is an example of what the button MXML would look like this:

<br />
<s:Button id="cmdRight" label="" width="20" height="100%" click="cmdRight_clickHandler(event)" includeIn="GestureSwipeDisabled"/></p>
<p>

Below are some screenshots of the app running in different emulators and one from an Android Nexus One.

The source code for this project can be found on Google Code at http://code.google.com/p/hero-gesture-debugging/ This project requires a component in the Day2DayDevelopment library available at http://code.google.com/p/day2daydevelopment/ The library is open source so feel free to download it.


What is PressAndTapGestureEvent?

So I have been looking at some of the gesture possibilities with Flex Hero and ran in to one call PressAndTapGesture.  Now I am not exactly sure what a press and tap is but it sounds like you press with one finger and tap with the other.  Or maybe it is press and hold and then release.  Well I wanted to figure it out to see if I could use it in a sample that I am working on so I built a simple example project.  Now the problem is that the emulator does not support gestures.  So I pushed it out to an Android Nexus One and am unable to get the event to fire.

So as I tweeted earlier DUMB QUESTION ALERT what is a press and tap gesture?  The description of it in the docs is this: “The PressAndTapGestureEvent class lets you handle press-and-tap gesture on touch-enabled devices. Objects that inherit properties from the InteractiveObject class capture the primary touch point (press) and a secondary point (tap) in the dispatched event object. The press-and-tap gesture is typically used to raise a context-sensitive popup menu.” To me that sounds like pressing down with one finger and tap with a second which I have tried and it does tend to bring up the default context menu which allows for copy and paste.  However, I cannot reproduce the event on the device.

I have uploaded a sample Flash Builder project.  If anyone else can figure out how to generate the Press and Tap event that would be great.  I added a button to manually dispatch the event and the event listener is working.  I apparently just don’t know how to do the right gesture.

Here is the sample Flash Builder project: http://www.day2daydevelopment.com/wp-content/uploads/2010/12/PressAndTap_Example.fxp


What object is at the top of the list?

I recently ran into a situation where I needed to determine which object was at the top of a spark list in a mobile application.  I couldn’t find any easy and obvious way to do this but digging around I eventually figured out how to do that.  Below is a demo video:

So this actually turns out to be fairly easy.  Start by creating a mobile application.  Although you could include PlayBook for the target OS its not necessary.  Once you are in the first view that is created create a spark list with some sample data:

</p>
<p><s:List id="mainList" width="100%" height="100%"><br />
<s:dataProvider><br />
<s:ArrayList><br />
<fx:String>List Item 1</fx:String><br />
<fx:String>List Item 2</fx:String><br />
<fx:String>List Item 3</fx:String><br />
<fx:String>List Item 4</fx:String><br />
<fx:String>List Item 5</fx:String><br />
<fx:String>List Item 6</fx:String><br />
<fx:String>List Item 7</fx:String><br />
<fx:String>List Item 8</fx:String><br />
<fx:String>List Item 9</fx:String><br />
<fx:String>List Item 10</fx:String><br />
<fx:String>List Item 11</fx:String><br />
<fx:String>List Item 12</fx:String><br />
<fx:String>List Item 13</fx:String><br />
<fx:String>List Item 14</fx:String><br />
<fx:String>List Item 15</fx:String><br />
<fx:String>List Item 16</fx:String><br />
<fx:String>List Item 17</fx:String><br />
<fx:String>List Item 18</fx:String><br />
<fx:String>List Item 19</fx:String><br />
<fx:String>List Item 20</fx:String><br />
<fx:String>List Item 21</fx:String><br />
<fx:String>List Item 22</fx:String><br />
<fx:String>List Item 23</fx:String><br />
<fx:String>List Item 24</fx:String><br />
<fx:String>List Item 25</fx:String><br />
</s:ArrayList><br />
</s:dataProvider><br />
</s:List></p>
<p>

Obviously this is just a dummy list and in the real world it will contain complex objects rather than strings.  You should be able to add an event listener on the list for the change event but there is a bug with that event.  As a result, you need to add an event listener on the verticalScrollBar of the list.

</p>
<p>mainList.scroller.verticalScrollBar.viewport.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, vScrollBar_PropertyChange);</p>
<p>

Because this is a property change event you have to filter the event based on its type.  Then you can get the DataGroup from the list and determine the firstIndexInView from the DataGroup.  From there you can use the list’s dataProvider to get the object or in this case the String that is at the top of the list.

</p>
<p>private function vScrollBar_PropertyChange(event:PropertyChangeEvent):void {<br />
switch (event.property) {<br />
case "verticalScrollPosition":<br />
var dg:DataGroup = mainList.dataGroup;<br />
if (dg != null) {<br />
var index:int = (dg.layout as VerticalLayout).firstIndexInView<br />
var firstObject:Object = dg.dataProvider.getItemAt(index);<br />
currentTopLabel = firstObject.toString();<br />
}<br />
break;<br />
}<br />
}</p>
<p>

That is it.  You can now determine what object is at the top of a list.  Download the source code

Now that I have written this blog post does anyone have a recommendation for a WordPress plugin that does a better job formatting code snippets?


Pages:12