Posts tagged with: Flex

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


Google Code Project

So I have been putting together some of the different files I have been working on and created my own library.  It is available on Google Code at http://code.google.com/p/day2daydevelopment/ I will be adding files to it over time and providing examples using the library.  Currently this library uses one other library which is the AS3 Commons library.  I actually had written these functions myself but I decided that there is no need to reinvent the wheel and since the AS3 Commons library  is open source its all good.


Jumped the gun

Apparently I jumped the gun on the new Flex Hero release (4.5.0.18623).  I installed it and tried it out on an AIR application before I wrote my previous post.  I tried to run a couple of mobile applications and none of them work anymore.  So I went back to the website to see if there were any updates and the download isn’t available anymore.  Oops!

So I can now utilize the latest AIR features but I cannot run any mobile applications anymore….hopefully a new version will come out tomorrow to resolve the issue.


Pages:12