In my flex mobile project I have a vgroup inside a scroller and I add element to the vgroup.
When I scroll (because only 5 elements fits the visible space) the scroller get crazy, and the new element that I add to the vgroup is not placed as last element. And my code doesn't work anymore. Is there a sort of virtual layout also for scrollers?
EDIT
This is the Scroller
<s:Scroller top="0" width="100%" bottom="100">
<s:VGroup id="areaList" width="100%" gap="5">
</s:VGroup>
</s:Scroller>
When I add an Area to the VGroup (Area is a SpriteVisualElement) is displayed after the previous area. But when I scroll and add a new area, the new one is not displayed in the last position of the VGroup as expected.
In the code i use the method areaList.getElementAt(k) to get the area at index k, but after the scroll it doesn't return the correct item.
Related
I am a newbie to flex, using flex 4.6 with FB 4.7. I am trying to create a BusyIndicator "in front of" (and in the middle of) a Button. I found some examples on Google on image stacking, but for some reason it does not work with a button/indicator combination and I don't know why... I tried using the depth property, but it has no effect, the button appears above the indicator, i.e assuming the indicator is marked by [x]:
[button]
[x] <== indicator
What I want is that the indicator will be in front of, and in the middle of, the button:
[bu[x]ton]
Here is the layout I am using:
<s:VGroup width="100%" height="100%" verticalAlign="top" horizontalAlign="center">
<s:Button id="mybtn" label="My Inbox" click="onInbox()" depth="1"/>
<s:BusyIndicator id="myBusyIndicator" rotationInterval="50" depth="2" />
</s:VGroup>
Any ideas how to do this?
thanks!
It appears you are misunderstanding what layout groups (VGroup, HGroup, TileGroup) do. They work in 2 dimensions, not three. So by placing two objects in a VGroup, they are stacked vertically along the y-axis, rather than along the z-axis (as you want).
What you want is to just use a simple Group here. Group has no Layout to it (it's the parent for Vgroup, and many other classes for that matter) and so all the positioning is handled by the children, rather than the parent (the Group).
<s:Group>
<s:Button/>
<s:BusyIndicator horizontalCenter="0" verticalCenter="0"/>
</s:Group>
That creates a button at level 0, and then places a BusyIndicator at level 1 (1 > 0), and centers it both horizontally and vertically (horizontalCenter and verticalCenter are in pixels from center to their respective axis)
Snippet of my code pasted below :
<s:Scroller width="100%" height="100%" >
<s:Group width="100%" height="100%" >
<mx:DataGrid id="corrDataGrid" width="100%" height="100%" itemRenderer="
mx.controls.Label" minColumnWidth="60" lockedColumnCount="2">
</mx:DataGrid>
</s:Group>
</s:Scroller>
Both the horizontal and vertical scroll bars appear on the Datagrid if the volume of data is large . But the vertical scroll bar is only visible if we scroll the horizontal scroll bar till the end of the Datagrid . is there any way that even if the number of columns is large , the vertical scroll bar is visible and the user does not have to scroll horizontally till the rightmost side to access the vertical scroll ? Thanks.
Just remove the Scroller and the Group. DataGrid has its own scrollbars built-in which act exactly as you would expect. There is no need to wrap it in another Scroller.
As RIAStar pointed out, you don't need to wrap a DataGrid inside a Scroller. This is because the DataGrid's default skin already has a Scroller element that wraps a DataGroup element, which is used to actually render the data.
Now, you wanted to use a DataGroup directly, you would need to use a Scroller, just like in OP's case.
Thanks for all the answers guys , just fixed it . I set the width of the Datagrid to the width of the Scroller .
Programming in Flex 4.5
I want a scroller to be wrapped around a popup window (based on borderconatiner)
I cant put my scroller correctly.
<s:Scroller width="600" height="70%" id="scroller>
<s:Group id="myGroup">
// Here is the rest of my code..
</s:Group>
</s:Scroller>
Any suggestions?
You should check this example from Tour de Flex
Right click then View Source.
By default TitleWindows seem to have no padding. I tried the properties "left", "right" etc and it doesn't work. Actually I'd like to have a default for my whole app, so I tried creating a skin but no matter where in the skin I add 'left="50"' it just doesn't create padding on the left. You'd think that you should add it to the element with id="contentGroup", as described on this Adobe Skinning help page, but that does not work.
Surely this is something almost everyone wants to do?
The contentGroup in the default TitleWindowSkin is inside a VerticalLayout which does not respect top/left/right/bottom constraints.
You could do this by duplicating the default TitleWindowSkin and wrapping the contentGroup with a Group with width/height of 100%:
...
<s:Group width="100%" height="100%">
<!--- #copy spark.components.SkinnableContainer#contentGroup -->
<s:Group id="contentGroup" top="10" left="10" right="10" bottom="10" minWidth="0" minHeight="0" />
</s:Group>
...
Since the TitleWindow extends the Panel component, it doesn't support the padding properties a HGroup or VGroup based component would. As far as I know, there's no way to skin a TitleWindow so that the padding properties are automatically set.
All I do is set the x and y coordinates of my components within the TitleWindow so that they are laid out where I want them.
I have the following code in my flex project.
<mx:Canvas id="scroller" styleName="myCanvas" width="635" horizontalScrollPolicy="off" y="60" height="370" >
<mx:Canvas id="thumbContent" width="635" verticalScrollPolicy="off"
horizontalScrollPolicy="off" y="0" backgroundColor="#00ff00"
backgroundAlpha="0" height="370"/>
</mx:Canvas>
</mx:Canvas>
I want to dynamically add different items to thumbContent canvas and use scroller canvas to scroll. I see than the height of thumbContent bigger than 7977 it truncate from scrolling.
So - I see the scroller canvas with empty space on top. Then I scroll to bottom - I see the content of thumbContent and at bottom scrolling I see empty space too.
It looks like thumbContent is under hidden mask, is this correct?
Looks like you want thumbContent to expand dynamically as you add content. In this case, you need to remove the height attribute from thumbContent, otherwise it will want to cram more content into it than it can hold, especially if the H and V scroll bars are off.
Keep the height attribute for scroller, though, because that's what you want to use to scroll (fixed dimensions).
Also, use percentages in your application. make thumbContent width="100%" if you want it to fill up the entire width of scroller.