http://www.davidortinau.com/blog/index/ en dave@davidortinau.com Copyright 2013 2013-05-31T13:25:49+00:00 http://www.davidortinau.com/site/automated_ui_testing_xamarin_test_cloud_calabash/ http://www.davidortinau.com/site/automated_ui_testing_xamarin_test_cloud_calabash/#When:13:25:49Z At our monthly Interactive Developers of St. Louis meeting last night I presented this overview of the newly announced Xamarin Test Cloud. We then went deeper into Calabash exploring the various pieces making up a test, as well as how to inspect an application’s UI interactively via console. Big thanks to all that came out! Xamarin Evolve Videos Intro to Calabash: http://xamarin.com/evolve/2013#session-xcjpj20d6s TestCloud: http://xamarin.com/evolve/2013#keynote-80:44 
 Calabash http://calaba.sh/ iOS: https://github.com/calabash/calabash-ios Android: https://github.com/calabash/calabash-android https://github.com/aduggin/calabash-ios-tutorial Xamarin Field Service Example with Calabash Tests https://github.com/calabash/field-service-example Cucumber http://cukes.info/ http://pragprog.com/book/hwcuc/the-cucumber-book Frank http://www.testingwithfrank.com/At our monthly Interactive Developers of St. Louis meeting last night I presented this overview of the newly announced Xamarin Test Cloud. We then went deeper into Calabash exploring the various pieces making up a test, as well as how to inspect an application’s UI interactively via console. Big thanks to all that came out! Xamarin Evolve Videos Intro to Calabash: http://xamarin.com/evolve/2013#session-xcjpj20d6s TestCloud: http://xamarin.com/evolve/2013#keynote-80:44 
 Calabash http://calaba.sh/ iOS: https://github.com/calabash/calabash-ios Android: https://github.com/calabash/calabash-android https://github.com/aduggin/calabash-ios-tutorial Xamarin Field Service Example with Calabash Tests https://github.com/calabash/field-service-example Cucumber http://cukes.info/ http://pragprog.com/book/hwcuc/the-cucumber-book Frank http://www.testingwithfrank.com/ iPhone, Xamarin 2013-05-31T13:25:49+00:00 http://www.davidortinau.com/site/xamarin_evolve_core_animation/ http://www.davidortinau.com/site/xamarin_evolve_core_animation/#When:17:04:51Z The Xamarin Evolve 2013 conference has come and gone, fueling me with inspiration. What an amazing conference! The Xamarin team and community are truly awesome. At Evolve, I had to honor of presenting “Crafting Interactions with Core Animation”. Thanks to all that attended and indulged my enthusiasm for Interaction Design. Slides and code are below, and the session video is now available on the Evolve site. Demos: https://github.com/davidortinau/monotouch-samples/tree/master/CoreAnimationThe Xamarin Evolve 2013 conference has come and gone, fueling me with inspiration. What an amazing conference! The Xamarin team and community are truly awesome. At Evolve, I had to honor of presenting “Crafting Interactions with Core Animation”. Thanks to all that attended and indulged my enthusiasm for Interaction Design. Slides and code are below, and the session video is now available on the Evolve site. Demos: https://github.com/davidortinau/monotouch-samples/tree/master/CoreAnimation Xamarin 2013-04-22T17:04:51+00:00 http://www.davidortinau.com/site/monotouch_how_to_tell_if_the_user_is_selecting_text_or_tapping/ http://www.davidortinau.com/site/monotouch_how_to_tell_if_the_user_is_selecting_text_or_tapping/#When:01:03:41Z Goal Show and hide a toolbar at the bottom of the view when the user taps. Why Several apps, particularly those focus on reading the content in the view, offer a UIToolbar (or a custom component with buttons) at the bottom of the view that shows or hides according to the user’s taps. What we want to detect is a single tap. Not a swipe. Not drag. Not if the user is selecting text. How Using a UITapGestureRecognizer we can handle taps on the UIWebView. I setup a delegate for it and assign a Selector to handle the event. From there we need to determine if the user is selecting text or just tapping, and show/hide the toolbar. The Code Goal Show and hide a toolbar at the bottom of the view when the user taps. Why Several apps, particularly those focus on reading the content in the view, offer a UIToolbar (or a custom component with buttons) at the bottom of the view that shows or hides according to the user’s taps. What we want to detect is a single tap. Not a swipe. Not drag. Not if the user is selecting text. How Using a UITapGestureRecognizer we can handle taps on the UIWebView. I setup a delegate for it and assign a Selector to handle the event. From there we need to determine if the user is selecting text or just tapping, and show/hide the toolbar. The Code   iPhone, MonoTouch, Xamarin 2012-05-01T01:03:41+00:00 http://www.davidortinau.com/site/monotouch_handle_events_from_uiwebview/ http://www.davidortinau.com/site/monotouch_handle_events_from_uiwebview/#When:00:34:28Z Goal Handle taps on buttons and links within a UIWebView. Why I really like how Readability, Pinterest and other apps hide or altogether don’t use a visible UINavigationBar on appropriate views. Instead, the view is all about the content. I suspect many are using a UIWebView for the content. The question then becomes, how does the user navigate the view stack from within a UIWebView. Readability has a left to right swipe gesture that pulls he page away. I suspect this may be one UIViewController that shows a UIWebView over the top of the other content instead of pushing another view onto the stack. If you take a moment in Readability to pull the article away to partially reveal the list, you can scroll the list and see the article. I could be wrong…of anyone knows different do tell. I’m sure there’s more than one way to do this. In the meantime, I want to add a back image link at the top of my HTML content, and handle that action from the view code. How UIWebView provides ShouldStartLoad where we can see what the component is about to load. At that point we can intercept the request and take a different action. The Code: In the HTML I have a link to the anchor #back like this:  <a href="#back"><img src="Images/btn_back.png" /></a>  To load images into the UIWebView from the local resource bundle, I set the base URL of the request to NSBundle.MainBundle.BundleUrl. When the user touches that link the webViewShouldStartLoad handles it and pops the view controller as desired. Goal Handle taps on buttons and links within a UIWebView. Why I really like how Readability, Pinterest and other apps hide or altogether don’t use a visible UINavigationBar on appropriate views. Instead, the view is all about the content. I suspect many are using a UIWebView for the content. The question then becomes, how does the user navigate the view stack from within a UIWebView. Readability has a left to right swipe gesture that pulls he page away. I suspect this may be one UIViewController that shows a UIWebView over the top of the other content instead of pushing another view onto the stack. If you take a moment in Readability to pull the article away to partially reveal the list, you can scroll the list and see the article. I could be wrong…of anyone knows different do tell. I’m sure there’s more than one way to do this. In the meantime, I want to add a back image link at the top of my HTML content, and handle that action from the view code. How UIWebView provides ShouldStartLoad where we can see what the component is about to load. At that point we can intercept the request and take a different action. The Code: In the HTML I have a link to the anchor #back like this:  <a href="#back"><img src="Images/btn_back.png" /></a>  To load images into the UIWebView from the local resource bundle, I set the base URL of the request to NSBundle.MainBundle.BundleUrl. When the user touches that link the webViewShouldStartLoad handles it and pops the view controller as desired. iPhone, MonoTouch, Xamarin 2012-04-29T00:34:28+00:00 http://www.davidortinau.com/site/rage_against_the_framework_flash_camp_st._louis_slides_and_code/ http://www.davidortinau.com/site/rage_against_the_framework_flash_camp_st._louis_slides_and_code/#When:01:13:36Z We had a wonderful turnout at Flash Camp St. Louis. Most impressive were all of the new faces. JP Revel did a fantastic job putting on the event. In my session, “Rage Against the Framework”, I basically dumped all the tips and tricks and learning I’ve been doing over the past year of Flex 4 work. It’s been, at times, frustrating and slow. But there have also been moments of “Wow, I didn’t realize you could to THAT with Flex!” We discussed the typical promises the Flex Framework makes to draw us in, such as data binding, components, and skins. While this gets us the majority of the way to where we want to be, we often encounter frustrating hurdles when trying to implement engaging user experiences. Flex also provides States, State Transitions, and Layouts that, when properly understood and implemented, can help alleviate that frustration and do some really cool things. Rage Against the Framework View more presentations from David Ortinau References Data Binding http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf64c3d-7fff.html#WS2db454920e96a9e51e63e3d11c0bf69084-7cc8 Binding Utils http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/binding/utils/BindingUtils.html State Transitions http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7fab.html http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/states/Transition.html Effects http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/effects/package-detail.html Layouts http://tv.adobe.com/watch/max-2010-develop/having-fun-with-layouts-in-flex-4/ http://www.rialvalue.com/blog/2010/11/04/slides-for-having-fun-with-layouts-in-flex-4/ http://evtimmy.com/2010/04/two-examples-of-layout-animations/ http://tv.adobe.com/watch/flash-camp-boston/creating-custom-layouts-in-flex-4- http://miti.pricope.com/2009/05/29/playing-with-custom-layout-in-flex-4/ http://www.tink.ws/blog/carousellayout/   Code Demo: http://davidortinau.com/exhibits/DataBindingTransitions/index.html Source: DataBindingTransitions.zip We had a wonderful turnout at Flash Camp St. Louis. Most impressive were all of the new faces. JP Revel did a fantastic job putting on the event. In my session, “Rage Against the Framework”, I basically dumped all the tips and tricks and learning I’ve been doing over the past year of Flex 4 work. It’s been, at times, frustrating and slow. But there have also been moments of “Wow, I didn’t realize you could to THAT with Flex!” We discussed the typical promises the Flex Framework makes to draw us in, such as data binding, components, and skins. While this gets us the majority of the way to where we want to be, we often encounter frustrating hurdles when trying to implement engaging user experiences. Flex also provides States, State Transitions, and Layouts that, when properly understood and implemented, can help alleviate that frustration and do some really cool things. Rage Against the Framework View more presentations from David Ortinau References Data Binding http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf64c3d-7fff.html#WS2db454920e96a9e51e63e3d11c0bf69084-7cc8 Binding Utils http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/binding/utils/BindingUtils.html State Transitions http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7fab.html http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/states/Transition.html Effects http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/effects/package-detail.html Layouts http://tv.adobe.com/watch/max-2010-develop/having-fun-with-layouts-in-flex-4/ http://www.rialvalue.com/blog/2010/11/04/slides-for-having-fun-with-layouts-in-flex-4/ http://evtimmy.com/2010/04/two-examples-of-layout-animations/ http://tv.adobe.com/watch/flash-camp-boston/creating-custom-layouts-in-flex-4- http://miti.pricope.com/2009/05/29/playing-with-custom-layout-in-flex-4/ http://www.tink.ws/blog/carousellayout/   Code Demo: http://davidortinau.com/exhibits/DataBindingTransitions/index.html Source: DataBindingTransitions.zip General 2011-09-17T01:13:36+00:00 http://www.davidortinau.com/site/practical_interaction_design_for_developers_slides_and_code/ http://www.davidortinau.com/site/practical_interaction_design_for_developers_slides_and_code/#When:19:53:33Z This summer we had a fantastic Designer/Developer Workflow Conference (D2WC) run by Dee Sadler. I love the mix of visual creatives and code slingers all putting their minds together to learn from each other and discover better ways to work together towards amazing results. It’s great to dive deep into our own core disciplines, but we cannot neglect our teammates and understanding what it takes to work together. Anyone who’s played an organized sport knows on some level that you need to know something about all of the positions in order to play your position well. Here are the slides from my presentation, “Practical IxD for Developers”. It’s full of great quotes and references to books that I highly recommend. They are also listed on my bookshelf. Practical IxD for Developers View more presentations from David Ortinau And the code demo from the end of the presentation is below showing basic data binding and how to manage transitions via custom Layouts: Code Demo: http://davidortinau.com/exhibits/DataBindingTransitions/index.html Source: DataBindingTransitions.zip This summer we had a fantastic Designer/Developer Workflow Conference (D2WC) run by Dee Sadler. I love the mix of visual creatives and code slingers all putting their minds together to learn from each other and discover better ways to work together towards amazing results. It’s great to dive deep into our own core disciplines, but we cannot neglect our teammates and understanding what it takes to work together. Anyone who’s played an organized sport knows on some level that you need to know something about all of the positions in order to play your position well. Here are the slides from my presentation, “Practical IxD for Developers”. It’s full of great quotes and references to books that I highly recommend. They are also listed on my bookshelf. Practical IxD for Developers View more presentations from David Ortinau And the code demo from the end of the presentation is below showing basic data binding and how to manage transitions via custom Layouts. Code Demo: http://davidortinau.com/exhibits/DataBindingTransitions/index.html Source: DataBindingTransitions.zip Flex, Interaction Design 2011-09-10T19:53:33+00:00 http://www.davidortinau.com/site/upcoming_speaking_engagements/ http://www.davidortinau.com/site/upcoming_speaking_engagements/#When:22:33:36Z This past May I had the opportunity to present at XPLANE on a topic I’m very passionate about, Interaction Design. This was a fun joint event with Gateway Chi, the St. Louis usability professionals group, and Flex and Fuse the Arch, my home Flex and Cold Fusion group.  July looks to be another busy month of speaking for me. If you happen to be near Kansas City or Chicago, and have any interest in Interaction Design and the designer/developer workflow, please come out and join us. As much as I enjoy presenting, I derive much greater pleasure from the ensuing discussions and exchange of knowledge. July 14-16, 2011 D2W - Designer To Developer Workflow Conference Crowne Plaza Kansas City, MO http://d2wc.com/ (I can give you a speaker discount, just contact me) July 20, 2011 Chicago Flex Chicago, IL http://chicagoflex.org/ “The big difference that’s arisen in this new agile world is how integrated the team is. No longer is UX design owned by the UX designers: everyone on the team now has design responsibilities. That means that everyone needs to be informed about what the design is trying to do.” - Jarod Spool This past May I had the opportunity to present at XPLANE on a topic I’m very passionate about, Interaction Design. This was a fun joint event with Gateway Chi, the St. Louis usability professionals group, and Flex and Fuse the Arch, my home Flex and Cold Fusion group.  July looks to be another busy month of speaking for me. If you happen to be near Kansas City or Chicago, and have any interest in Interaction Design and the designer/developer workflow, please come out and join us. As much as I enjoy presenting, I derive much greater pleasure from the ensuing discussions and exchange of knowledge. July 14-16, 2011 D2W - Designer To Developer Workflow Conference Crowne Plaza Kansas City, MO http://d2wc.com/ (I can give you a speaker discount, just contact me) July 20, 2011 Chicago Flex Chicago, IL http://chicagoflex.org/ “The big difference that’s arisen in this new agile world is how integrated the team is. No longer is UX design owned by the UX designers: everyone on the team now has design responsibilities. That means that everyone needs to be informed about what the design is trying to do.” - Jarod Spool General 2011-06-26T22:33:36+00:00 http://www.davidortinau.com/site/create_a_twitter_oauth_application_with_tweetr_using_single_access_token/ http://www.davidortinau.com/site/create_a_twitter_oauth_application_with_tweetr_using_single_access_token/#When:21:25:01Z What do you do when you want to use the Twitter API with your own account, and don’t need or want users to login via the PIN OAuth dance? You can use a single access token/secret in place of the authenticated token/secret and get all the access you need. Note: the authenticated user in this scenario is you, the owner of the application. For this example I’m using Tweetr, an AS3 library for accessing Twitter from your Flash or Flex application. Tweetr requires as3crypto. Details and downloads here: http://wiki.swfjunkie.com/tweetr:downloads Make sure you grab the proxy php and load that up on your server so you can have a service host. Run the install.php so it’s ready to go. This is a nice script providing caching so you get a little speed boost and don’t run over your Twitter API limit. Ok, let’s get to it. Create your… What do you do when you want to use the Twitter API with your own account, and don’t need or want users to login via the PIN OAuth dance? You can use a single access token/secret in place of the authenticated token/secret and get all the access you need. Note: the authenticated user in this scenario is you, the owner of the application. For this example I’m using Tweetr, an AS3 library for accessing Twitter from your Flash or Flex application. Tweetr requires as3crypto. Details and downloads here: http://wiki.swfjunkie.com/tweetr:downloads Make sure you grab the proxy php and load that up on your server so you can have a service host. Run the install.php so it’s ready to go. This is a nice script providing caching so you get a little speed boost and don’t run over your Twitter API limit. Ok, let’s get to it. Create a Twitter Application, and make note of the Consumer key and secret on the settings page. Then on the right side of the profile click the button labeled “My Access Token”. Grab that Access Token and Access Token Secret. This is referred to as a “single access token”, “one access token”, or “single user access token”. Docs: http://dev.twitter.com/pages/oauth_single_token In your Flash application, implement Tweetr with OAuth. Import and other implementation details are omitted below.  var serviceHost : String = "http://your_twittr_proxy_php_setup"; var tweetr:Tweetr = new Tweetr();tweetr.serviceHost = serviceHost;  oauth = new OAuth();oauth.serviceHost = serviceHost; oauth.consumerKey = "CONSUMER_KEY";oauth.consumerSecret = "CONSUMER_SECRET";oauth.oauthToken = "MY_ACCESS_TOKEN";oauth.oauthTokenSecret = "MY_ACCESS_TOKEN_SECRET";tweetr.oAuth = oauth;   And then you need to…wait, sorry, that’s all there is. Start making calls to the API and listening for results.  tweetr.addEventListener(TweetEvent.COMPLETE, handleLoad);tweetr.addEventListener(TweetEvent.FAILED, handleFail);tweetr.getUserTimeLine(null, null, null, 0, 0);   var tweets:Array = [];private function handleLoad(event:TweetEvent):void{ for(var i:int = 0; i < event.responseArray.length; i++) { var statusData:StatusData = event.responseArray[i]; tweets.push(statusData); } // ... do something magical with the tweets} private function handleFail(event:TweetEvent):void{ trace("Failed to get data"); // ... handle the disappointing failure...maybe a whale...just a thought}  There are plenty of good tutorials out for using Tweetr, though beware of any too old. Twitter phased out basic authentication August 2010. A couple I checked out: Mark Doherty: Tweetr App Video Walkthrough swfjunkie: PINless OAuth with Tweetr I also want to note that it’s difficult to secure anything in a Flash application, and the key, token, and secrets are no exception. In this example they are right there in the code, unencrypted. SWFs are easily decompiled. If you dream up a solid security solution that doesn’t require a mountain of effort, please let me know. Flash, Flex, AIR 2011-01-20T21:25:01+00:00 http://www.davidortinau.com/site/draw_lines_under_text_in_spark_richeditabletext/ http://www.davidortinau.com/site/draw_lines_under_text_in_spark_richeditabletext/#When:19:26:36Z On my current project, the design calls for displaying editable text with underlines that scroll with the text. It’s a nice design, and I had no good solution. I talked to a couple people, ideas were tossed around, and after a lot of reading and a couple runs at it I had nothing to show for the effort. You can already see a working demo below. So how did I get there? I had a nagging feeling I’d talked to someone about a workable solution, but I couldn’t remember who. Paul Taylor (@guyinthechair) had shown me some of his excellent work with text during 360|Flex in DC last year, and I figured if anyone was going to be able to help it’d be Paul. I put out a Twitter call for help, and, sure enough, he had an idea. And it’s so simple! Paul extends RichEditableText and adds a handler for Event.ADDED which is triggered for each new line (or specifically for each time anything is added to the display list). Thanks Paul!  package{ import flash.display.DisplayObject; import flash.display.Shape; import flash.events.Event; import flash.events.EventPhase; import flash.text.engine.TextLine;  import spark.components.RichEditableText;  public class LineyRET extends RichEditableText { public function LineyRET() { super(); addEventListener(Event.ADDED, onChildLineAdded); }  private function onChildLineAdded(event:Event):void { var line:TextLine = event.target as TextLine; if(!line) return;  if(line.getChildByName('baseline')) return;  var s:Shape = new Shape(); s.name = 'baseline'; s.graphics.lineStyle(1, 0xCCCCCC, 0.5); s.graphics.moveTo(0, line.descent + 5); s.graphics.lineTo(line.specifiedWidth, line.descent + 5); s.graphics.endFill(); line.addChild(s); } }}                                          Either scripts and active content are not permitted to run or Adobe Flash Player version           0.0.0 or greater is not installed.                                                                                                         Melville text courtesy of Fillerati. View and Download demo source hereOn my current project, the design calls for displaying editable text with underlines that scroll with the text. It’s a nice design, and I had no good solution. I talked to a couple people, ideas were tossed around, and after a lot of reading and a couple runs at it I had nothing to show for the effort. You can already see a working demo below. So how did I get there? I had a nagging feeling I’d talked to someone about a workable solution, but I couldn’t remember who. Paul Taylor (@guyinthechair) had shown me some of his excellent work with text during 360|Flex in DC last year, and I figured if anyone was going to be able to help it’d be Paul. I put out a Twitter call for help, and, sure enough, he had an idea. And it’s so simple! Paul extends RichEditableText and adds a handler for Event.ADDED which is triggered for each new line (or specifically for each time anything is added to the display list). Thanks Paul!  package{ import flash.display.DisplayObject; import flash.display.Shape; import flash.events.Event; import flash.events.EventPhase; import flash.text.engine.TextLine;  import spark.components.RichEditableText;  public class LineyRET extends RichEditableText { public function LineyRET() { super(); addEventListener(Event.ADDED, onChildLineAdded); }  private function onChildLineAdded(event:Event):void { var line:TextLine = event.target as TextLine; if(!line) return;  if(line.getChildByName('baseline')) return;  var s:Shape = new Shape(); s.name = 'baseline'; s.graphics.lineStyle(1, 0xCCCCCC, 0.5); s.graphics.moveTo(0, line.descent + 5); s.graphics.lineTo(line.specifiedWidth, line.descent + 5); s.graphics.endFill(); line.addChild(s); } }}                                          Either scripts and active content are not permitted to run or Adobe Flash Player version           0.0.0 or greater is not installed.                                                                                                         Melville text courtesy of Fillerati. View and Download demo source here Flex 2011-01-15T19:26:36+00:00 http://www.davidortinau.com/site/flex_4_states_the_default_state/ http://www.davidortinau.com/site/flex_4_states_the_default_state/#When:16:26:44Z You can call the first state in your list of states the default as Adobe’s Kevin Hoyt does in his article about States, and as Stephen Gilson does in his Flex Doc article, but don’t expect it to always have your back. I found this out the usual way, I assumed and failed. The Actionscript 3.0 reference docs for mx.states.State don’t clarify this issue, though it does make one reference to a “default view state”. Let’s say you have a component with 3 states:  <s:states> <s:State name="welcome"/> <s:State name="top_products"/> <s:State name="all_products"/></s:states>  And you have two ArrayCollections of Products, allProducts and topProducts, that will be bound to a DataGroup depending on the currentState of the view.  <s:DataGroup id="productsDataGroup" dataProvider="{allProducts}" dataProvider.top_products="{topProducts}" ... />  As you can see above I’ve declared the “main” dataProvider and a dataProvider for the state “top_products”. What data do you expect to get bound when I change currentState to “all_products” or even “welcome”? It will go back to allProducts. Great, that’s what I want. BUT… If the allProducts ArrayCollection has been changed in the meantime, the DataGroup will not rebind the allProducts collection, so I’ll be looking at old data. The way to make sure the binding occurs as expected, and updates are reflected, is to get in the habit of being explicit.  <s:DataGroup id="productsDataGroup" dataProvider="{allProducts}" dataProvider.welcome="{allProducts}" dataProvider.top_products="{topProducts}" dataProvider.all_products="{allProducts}" ... />  Setting currentState in the component tag declaration is a good practice to make sure you start off in the right view. The consensus yesterday from conversations on Twitter is that the initial currentState will be the first state listed in the declaration. But this is not a default you can rely on once things start changing. When it comes to setting data providers, you are best off being explicit if you’re going to assign different sources based on state. Thanks to @jamespolanco, @pollensoft, @derrickgrigg, @benjamminSTL, and @flexmonkeypatch for your contributions to the discussion.You can call the first state in your list of states the default as Adobe’s Kevin Hoyt does in his article about States, and as Stephen Gilson does in his Flex Doc article, but don’t expect it to always have your back. I found this out the usual way, I assumed and failed. The Actionscript 3.0 reference docs for mx.states.State don’t clarify this issue, though it does make one reference to a “default view state”. Let’s say you have a component with 3 states:  <s:states> <s:State name="welcome"/> <s:State name="top_products"/> <s:State name="all_products"/></s:states>  And you have two ArrayCollections of Products, allProducts and topProducts, that will be bound to a DataGroup depending on the currentState of the view.  <s:DataGroup id="productsDataGroup" dataProvider="{allProducts}" dataProvider.top_products="{topProducts}" ... />  As you can see above I’ve declared the “main” dataProvider and a dataProvider for the state “top_products”. What data do you expect to get bound when I change currentState to “all_products” or even “welcome”? It will go back to allProducts. Great, that’s what I want. BUT… If the allProducts ArrayCollection has been changed in the meantime, the DataGroup will not rebind the allProducts collection, so I’ll be looking at old data. The way to make sure the binding occurs as expected, and updates are reflected, is to get in the habit of being explicit.  <s:DataGroup id="productsDataGroup" dataProvider="{allProducts}" dataProvider.welcome="{allProducts}" dataProvider.top_products="{topProducts}" dataProvider.all_products="{allProducts}" ... />  Setting currentState in the component tag declaration is a good practice to make sure you start off in the right view. The consensus yesterday from conversations on Twitter is that the initial currentState will be the first state listed in the declaration. But this is not a default you can rely on once things start changing. When it comes to setting data providers, you are best off being explicit if you’re going to assign different sources based on state. Thanks to @jamespolanco, @pollensoft, @derrickgrigg, @benjamminSTL, and @flexmonkeypatch for your contributions to the discussion. Flex 2010-12-16T16:26:44+00:00