This issue was a rather tough one to resolve, so we decided to blog about it. For one of our consulting services customers, we’re working on converting a fairly large legacy Flex 3 application, optimizing it for Mobile use. As a part of this we’ve skinned a number of components for mobile use, optimized their interactions to be touch sensitive, and built new components speficially for mobile. We optmizied the DataGrid to have touch sensitive drag and drop (This is particularly challenging because the scroll gesture for mobile datagrid is the same as the drag and drop gesture),

One of the challenges we faced in this project was that the usage of Stage Text caused a number of issues

 

  • When used inside of a Scroller, the text does not maintain its scroll position as the user scrolls. This makes the text appear out of its correct location
  • Things such as date pickers, combo boxes (which we also styled) or anything with a popup were impossible to use, because  surrounding native Stage Text objects rendered on top of the popups, making interacting with them impossible.

 

A number of people have reported to have run into this issue, and there seems to have been no solution. We basically built an extended text input skin, that switches off the visibility of the StageText whenever the user is not interacting with it, and replaces it with a snapshot of itself, which is a flex component and thus behaves nicely regardless of scrolling or positioning. When the user does interact with it, it switches the visibility back on. This might be a little heavy on the performance side, but we have not experienced any noticable lag.

The good thing about this skin is that it does not require any of our products to use, so you can download and use it right off here (link at the end of the blog) . If you find this component to be useful, please feel free to check out some of our other work: 

http://www.flexicious.com/Home/Dashboard

http://www.flexicious.com/Home/Ultimate

http://www.flexicious.com/Home/SparkDataGridDemo

ExtendedStageTextInputSkin.as (7.94 kb)

If this works for you, please click on the tweet/like button below to spread the word! If it does not, send us a quick note on any of our social medial handles below to let us know what the issue is and we will try to help.