apache-flexcolorsbackgroundscroller

How can I create a scrolling group with a background color?

I'm using Flash Builder 4 Premium. My application has a title bar that I don't want to scroll, and a group underneath that should scroll. Here is the group that I want to be able to scroll:

<s:Scroller id="scrlMemberManager" includeIn="MemberManager" y="79" width="100%" height="100%" creationComplete="memberManagerInit()">
    <s:Group id="grpMemberManager">
        <s:Rect top="0" left="0" width="100%" height="100%">
            <s:fill>
                <s:SolidColor color="#bdbec0" />
            </s:fill>
        </s:Rect>
        <s:Panel id="pnlCenterMembers" width="597" height="444" x="10" y="5" title="Center Members">
            <s:Panel x="7" y="9" width="259" height="388" title="Create Member" dropShadowVisible="false">
                <s:TextInput x="71" y="11" width="164" id="txtCenterNewMemName" creationComplete="setUpTabKey(txtCenterNewMemName, null, txtCenterNewMemEmail)"/>
                <s:Label x="6" y="18" text="Name" width="60" textAlign="right"/>
                <s:TextInput x="71" y="41" width="164" id="txtCenterNewMemEmail" creationComplete="setUpTabKey(txtCenterNewMemEmail, txtCenterNewMemName, cboCenterNewMemGroup)"/>
                <s:Label x="6" y="48" text="Email" width="60" textAlign="right"/>
                <s:ComboBox x="71" y="71" width="164" id="cboCenterNewMemGroup" creationComplete="{ newMemGroup_creationCompleteHandler(event);  setUpTabKey(cboCenterNewMemGroup, txtCenterNewMemEmail, null); }" textAlign="center" dataProvider="{getCenterGroupNamesResult.lastResult}" />
                <s:Button x="165" y="101" label="Create" click="createUser('Center')" id="btnCenterCreateNewMem"/>
                <s:Label x="6" y="78" text="Group" width="60" textAlign="right"/>
            </s:Panel>
            <s:Panel x="274" y="10" width="314" height="388" title="Member List" dropShadowVisible="false" id="pnlCenterMemberList">
                <mx:DataGrid x="10" y="10" width="294" height="275" id="grdCenterMemberList" dataProvider="{getCenterMembersResult.lastResult}" allowMultipleSelection ="true" dragEnabled="false">
                    <mx:columns>
                        <mx:DataGridColumn headerText="Member Name" dataField="username"/>
                    </mx:columns>
                </mx:DataGrid>
                <s:Button x="10" y="295" label="Add To / Rem From Group" width="140" id="btnCenterAssignToGroup" click="assignMemberToGroup('Center')" fontSize="9"/>
                <s:Button x="10" y="324" label="Change Password" width="140" id="btnCenterChangePassword" click="changePassword('Center')" visible="false"/>
                <s:Button y="295" label="Delete" width="140" id="btnCenterDeleteMember" click="deleteMember_clickHandler(event)" right="9"/>
            </s:Panel>
        </s:Panel>
        <s:Panel id="pnlOnlineMembers" width="597" height="444" x="627" y="5" title="Our Online Members">
            <s:Button y="-26" id="btnSwitchOnlineMembers" label="Show All Online Members" width="170" right="7" click="switchOnlineMembers()"/>
            <s:Panel x="7" y="9" width="259" height="388" title="Create Member" dropShadowVisible="false">
                <s:Label x="6" y="18" text="Name" width="60" textAlign="right"/>
                <s:Label x="6" y="48" text="Password" width="60" textAlign="right"/>
                <s:Label x="6" y="108" text="Email" width="60" textAlign="right"/>
                <s:Label x="6" y="138" text="Group" width="60" textAlign="right"/>
                <s:Label x="6" y="71" text="Confirm Password" width="60" textAlign="right"/>
                <s:TextInput x="71" y="11" width="164" id="txtOnlineNewMemName" creationComplete="setUpTabKey(txtOnlineNewMemName, null, txtOnlineNewMemPassword1);"/>
                <s:TextInput x="71" y="41" width="164" id="txtOnlineNewMemPassword1" displayAsPassword="true" creationComplete="setUpTabKey(txtOnlineNewMemPassword1, txtOnlineNewMemName, txtOnlineNewMemPassword2);"/>
                <s:TextInput x="71" y="71" width="164" id="txtOnlineNewMemPassword2" displayAsPassword="true" creationComplete="setUpTabKey(txtOnlineNewMemPassword2, txtOnlineNewMemPassword1, txtOnlineNewMemEmail);"/>
                <s:TextInput x="71" y="101" id="txtOnlineNewMemEmail" width="164" creationComplete="setUpTabKey(txtOnlineNewMemEmail, txtOnlineNewMemPassword2, cboOnlineNewMemGroup);"/>
                <s:ComboBox x="71" y="131" width="164" textAlign="center" id="cboOnlineNewMemGroup" dataProvider="{getCenterGroupNamesResult.lastResult}" creationComplete="setUpTabKey(cboOnlineNewMemGroup, txtOnlineNewMemEmail, null);" />
                <s:Button x="165" y="160" label="Create" id="btnOnlineCreateNewMem" click="createUser('Online')"/>
            </s:Panel>
            <s:Panel x="274" y="10" width="314" height="388" title="Member List" dropShadowVisible="false">
                <mx:DataGrid x="10" y="10" width="294" height="275" id="grdOnlineMemberList" dataProvider="{onlineMembersArray}" allowMultipleSelection="true">
                    <mx:columns>
                        <mx:DataGridColumn headerText="Member Name" dataField="username"/>
                    </mx:columns>
                </mx:DataGrid>
                <s:Button x="10" y="295" label="Add To / Rem From Group" width="140" id="btnOnlineAssignToGroup" click="assignMemberToGroup('Online')" fontSize="9"/>
                <s:Button x="10" y="324" label="Change Password" width="140" id="btnOnlineChangePassword" click="changePassword('Online')" visible="false"/>
                <s:Button x="163" y="295" label="Add To Our Center" width="140" id="btnOnlineAssignToCenter" click="assignMemberToCenter()" visible="false"/>
                <s:Button x="163" y="295" label="Remove From Center" width="140" id="btnOnlineRemoveFromCenter" click="removeMemberFromCenter()"/>
            </s:Panel>
        </s:Panel>
        <s:Button right="10" bottom="10" label="Admin Manager" id="btnAdminManager" visible="false" click="{ goToAdminManager(); }" creationComplete="{if (currentUserRights[center] == 'OWNER' || currentUserRights[center] == 'SUPERUSER') btnAdminManager.visible = true;}"/>
    </s:Group>
</s:Scroller>

Everything appears to work fine at first glance, but if you make the screen small enough to where you have to scroll, the background color doesn't fill the entire scroller, only the part that is initially shown before you start scrolling, so you get something that looks like this:

Background does not scroll

I'm not sure what the best way for me to fix this problem is, but I figure I could resize the background color Rect to match the scroller width...if I could find out what the scroller width is. And by scroller width, I mean the width of the content it contains, not the width of its viewport (hope my terminology is correct). Is there a way to find that width, or is there a better way of doing this? The width of each panel is set, but the size of the window may extend beyond the width of the content, so I want to make sure the background fills the user's window (excluding the title bar, of course), no matter what size their window is.

Solution

  • I just figured out a workaround.

    I moved the background color Rect above the Scroller and set its position to the same as the Scroller. So now, it sits behind the scroller on the page with the same dimensions, and so when you are scrolling the Group, the Rect is not scrolling and you can still see the background color since the Scroller and Group backgrounds are transparent.