spark.components.List and TileLayout - scroll bars are not displayed (test case + screenshot attached)
I don't have much Flex-experience and am porting a (working) Flash card game to it.
I'm stuck with the problem, that scroll bars are not displayed for my List, which should display custom components representing playing tables (with up to 3 players):
I have prepared a simplified test case with 3 short MXML files - which will run instantly once you put them into a project in Flash Builder 4.5 - and you will see my problem.
Game.mxml (an item renderer - a blue rectangle representing playing table):
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="160" height="160">
<fx:Script>
<![CDATA[
public function set gid(str:String):void {
_gid.text = '#' + str;
}
public function get gid():String {
return _gid.text.substring(1);
}
]]>
</fx:Script>
<s:Rect x="0" y="0" width="{width}" height="{height}">
<s:stroke>
<s:SolidColorStroke color="red"/>
</s:stroke>
</s:Rect>
<s:Rect id="_rect" x="20" y="20" width="120" height="120" radiusX="16" radiusY="16">
<s:stroke>
<s:SolidColorStroke color="#4F69B5" weight="4"/>
</s:stroke>
<s:fill>
<s:SolidColor color="#CCDDEE" />
</s:fill>
</s:Rect>
<s:Label id="_gid" x="0" y="75" width="{width}" fontSize="16" textAlign="center" color="#FFFFFF" />
</s:ItemRenderer>
Lobby.mxml (a custom component - representing card game lobby with the List of playing tables):
<?xml version="1.0" encoding="utf-8"?>
<s:Group
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="700" height="450">
<fx:Declarations>
<s:RadioButtonGroup id="_group" itemClick="radioClicked(event);"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
import mx.events.ItemClickEvent;
[Bindable]
private var _games:XMLListCollection = new XMLListCollection();
[Bindable]
private var _users:XMLListCollection = new XMLListCollection();
private function radioClicked(event:ItemClickEvent):void {
if (event.item == _vac) {
_games.filterFunction = vacantGames;
} else if (event.item == _full) {
_games.filterFunction = fullGames;
} else {
_games.filterFunction = null;
}
_games.refresh();
}
private function vacantGames(item:Object):Boolean {
var xml:XML = item as XML;
return xml.elements('user').length() < 3;
}
private function fullGames(item:Object):Boolean {
var xml:XML = item as XML;
return xml.elements('user').length() == 3;
}
public function update(xml:XML):void {
_games.source = xml.game;
_users.source = xml.lobby;
}
]]>
</fx:Script>
<s:Rect x="0" y="0" width="{width-1}" height="{height-1}">
<s:stroke>
<s:SolidColorStroke color="red"/>
</s:stroke>
</s:Rect>
<s:VGroup>
<s:HGroup>
<s:Label text="Playing tables:" />
<s:RadioButton groupName="_group" id="_all" label="All" />
<s:RadioButton groupName="_group" id="_vac" label="Vacant" />
<s:RadioButton groupName="_group" id="_full" label="Full" />
</s:HGroup>
<s:List itemRenderer="Game" dataProvider="{_games}">
<s:layout>
<s:TileLayout />
</s:layout>
</s:List>
</s:VGroup>
</s:Group>
And finally LobbyTest.mxml (the application with Lobby component and fake XML data to feed it):
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:comps="*"
width="700" height="525"
creationComplete="init()">
<fx:Script>
<![CDATA[
private const XML_0:XML =
<pref>
<lobby>
<user id="OK252342810632" />
<user id="OK122471020773" />
<user id="DE54" />
<user id="DE6948" />
<user id="OK406519496469" />
<user id="OK108900197210" />
<user id="OK266559712237" />
<user id="DE6577" />
<user id="DE7981" />
<user id="OK225312168135" />
<user id="OK20629248715" />
<user id="DE7880" />
</lobby>
<game id="0"/>
<game id="9012">
<user id="VK48058967" />
<user id="MR14315189992643135976" />
<user id="OK10218913103" />
</game>
<game id="9013">
<user id="OK305894249541" />
<user id="OK151358069597" />
<user id="OK515549948434" />
</game>
<game id="9007">
<user id="OK366541092321" />
<user id="DE7062" />
<user id="OK122700338897" />
</game>
<game id="8993">
<user id="OK78476527766" />
<user id="VK5692120" />
<user id="OK61881379754" />
</game>
<game id="8997">
<user id="OK96125953924" />
<user id="OK21042473963" />
<user id="OK278504320179" />
</game>
<game id="9001">
<user id="OK189404154785开发者_如何学编程" />
<user id="OK143791302988" />
<user id="OK526501872510" />
</game>
<game id="8996">
<user id="VK6311467" />
<user id="OK354027621556" />
<user id="OK350266476029" />
</game>
<game id="8999">
<user id="OK24459857299" />
<user id="OK2104040126" />
<user id="OK231866548025" />
</game>
<game id="8991">
<user id="OK253525117889" />
<user id="OK529081480134" />
</game>
<game id="8937">
<user id="OK304672497140" />
<user id="VK90145027" />
<user id="OK338360548262" />
</game>
<game id="9005">
<user id="OK40798070412" />
<user id="DE7979" />
<user id="OK531589632132" />
</game>
<game id="8942">
<user id="VK20313675" />
<user id="OK57368684455" />
<user id="OK335173273155" />
</game>
<game id="8946">
<user id="OK353118989212" />
<user id="OK351923295875" />
</game>
<game id="9000">
<user id="DE7470" />
<user id="OK209621043939" />
</game>
<game id="9011">
<user id="OK321594287223" />
<user id="DE7692" />
<user id="OK260177162376" />
</game>
<game id="9010">
<user id="OK31902424355" />
<user id="OK357833936215" />
</game>
</pref>;
public function init():void {
lobby.update(XML_0);
}
]]>
</fx:Script>
<comps:Lobby id="lobby" x="0" y="0" width="80%" height="100%"/>
</s:Application>
Does anybody please know, what is wrong?
Try this:
<?xml version="1.0" encoding="utf-8"?>
<s:Group
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<s:RadioButtonGroup id="_group" itemClick="radioClicked(event);"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
import mx.events.ItemClickEvent;
[Bindable]
private var _games:XMLListCollection = new XMLListCollection();
[Bindable]
private var _users:XMLListCollection = new XMLListCollection();
private function radioClicked(event:ItemClickEvent):void {
if (event.item == _vac) {
_games.filterFunction = vacantGames;
} else if (event.item == _full) {
_games.filterFunction = fullGames;
} else {
_games.filterFunction = null;
}
_games.refresh();
}
private function vacantGames(item:Object):Boolean {
var xml:XML = item as XML;
return xml.elements('user').length() < 3;
}
private function fullGames(item:Object):Boolean {
var xml:XML = item as XML;
return xml.elements('user').length() == 3;
}
public function update(xml:XML):void {
_games.source = xml.game;
_users.source = xml.lobby;
}
]]>
</fx:Script>
<s:Rect left="0" right="0" top="0" bottom="0">
<s:stroke>
<s:SolidColorStroke color="red"/>
</s:stroke>
</s:Rect>
<s:VGroup left="1" right="1" top="1" bottom="1" horizontalAlign="justify">
<s:HGroup>
<s:Label text="Playing tables:" />
<s:RadioButton groupName="_group" id="_all" label="All" />
<s:RadioButton groupName="_group" id="_vac" label="Vacant" />
<s:RadioButton groupName="_group" id="_full" label="Full" />
</s:HGroup>
<s:List itemRenderer="Game" dataProvider="{_games}" height="100%">
<s:layout>
<s:TileLayout />
</s:layout>
</s:List>
</s:VGroup>
</s:Group>
精彩评论