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?


Android Mobile PopUp

In the Day2DayDevelopment library I have included the code for PopUpMessage.mxml which is a file mean to be used for mobile development.  An example of this component is available below:

This sample app demonstrates the popup component.  The popup component has 5 variables that can be set.  The first two title and message which server fairly obvious purposes.  The last one is callback which return the label of the button that was pressed.

The two variables that need explanation are the buttonLeftLabel and buttonRightLabel variables.  The primary reason these buttons need explanation is because that is how the component differentiates between a two-button label and a one-button label.  If the buttonRightLabel is null then the component assumes it should be a one-button label.

As soon as I test the app on an Android phone I will upload the apk file.  The code can be downloaded on my Google Code page.


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.


Soundex and Reverse Soundex

Soundex is an algorithm used primarily for genealogy name algorithms.  It is probably the most simple of these algorithms but it can still be helpful.  I have started working on some of the phonetic algorithms and decided to share my soundex and reverse soundex code in the Adobe Cookbook.  You can find my post at http://cookbooks.adobe.com/post_Soundex_and_Reverse_Soundex-18217.html I plan on implementing some of the other algorithms and making it open source.  I will post a link to the source when I get a little further along.


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:12345