Adăugarea Separatoare într-o listă cu Spark grupării
Source: http://www.anujgakhar.com/2010/12/20/adding-separators-in-a-spark-list-with-grouping/
Am avut această cerinţă intrat recent în sus la locul de muncă, în cazul în care am avut de a adăuga separatoare de la o listă. Lista a fost grupate pe elemente a anumitor tipuri şi după fiecare tip de elemente, un separator a fost necesară. Pentru a vă da o idee mai buna a ceea ce mă refer, am luat acest meniu din fereastra browser-ului meu (Firefox).
În meniul de mai sus, există separatoarele după "Cautare Web", "Setări Gears", şi aşa mai departe.... Acesta este genul de lucru pe care am încercat să fac.Deci, voi lucra cu meniul de mai sus în acest post, de asemenea.
Abordarea am de gând să ia pentru această sarcină este de a crea un obicei Lista Spark, care va fi o subclasă de listă şi va utiliza updateRenderer ()funcţie pentru a determina dacă elementul este ultimul element din grup sau nu. În cazul în care elementul este ultimul element din grup, apoi s-ar stabili un pavilion cu privire la postul personalizat de redare şi de redare se va trage apoi un separator orizontal numai în cazul în care pavilion este setată la Adevărat. Desigur, în această abordare, cheia este de a avea un câmp de date în care ne spune cum elementele sunt grupate. De asemenea, pentru ca updateRenderer () funcţie pentru a putea seta de pavilion cu privire la postul actual de redare, Eu voi fi folosind o interfata de redare că va pune în aplicare.
Să ne uităm la nişte cod: -
Codul pentru fişierul MXML principale, utilizând lista particularizată este de mai jos. După cum veţi vedea, am creat un simplu VO / DTO DataItem numit care deţine două proprietăţi. tipul şi etichetă. tip este proprietatea care ne spune cum să grupaţi elementele de exemplu atunci când pentru a adăuga un separator.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53 |
<Xml version =? "1.0" encoding = "UTF-8"?>
<S: Cerere xmlns: fx = " http://ns.adobe.com/mxml/2009 "
xmlns: s = " bibliotecă: / / ns.adobe.com / flex / scânteie "
xmlns: mx = " bibliotecă: / / ns.adobe.com / flex / mx "
minWidth = "599" minHeight = "600"
creationComplete = "init ()"
xmlns: componente = "com.anujgakhar.components.*" >
<fx:Script>
<! [CDATA [
de import mx.collections.ArrayCollection;
[Bindable]
publice var set de date: ArrayCollection;
privat funcţia init (): void
{
set de date = nou ArrayCollection ();
dataset.addItem (generateDataItem ("căutare", "Web Search '));
dataset.addItem (generateDataItem ("browsertools ', 'Downloads'));
dataset.addItem (generateDataItem ("browsertools ', 'Firefox'));
dataset.addItem (generateDataItem ("browsertools", "Gears Settings '));
dataset.addItem (generateDataItem ("devtools", "Charles"));
dataset.addItem (generateDataItem ("devtools", "Web Developer"));
dataset.addItem (generateDataItem ("devtools", "Firebug"));
dataset.addItem (generateDataItem ("devtools", "AMF Explorer '));
dataset.addItem (generateDataItem ("devtools ', 'Consola de eroare "));
dataset.addItem (generateDataItem ("devtools", "FireFTP '));
dataset.addItem (generateDataItem ("devtools ', 'Page Info'));
dataset.addItem (generateDataItem ("devtools", "Dust-Me Selector '));
dataset.addItem (generateDataItem ("navigare", "Start Private Browsing"));
dataset.addItem (generateDataItem ("navigare", "Istoria Clear recente"));
dataset.addItem (generateDataItem ("navigare", "schiţă Creion"));
}
privat funcţie generateDataItem (tip: String, eticheta: String): DataItem
{
var element: DataItem = nou DataItem ();
item.type = tip;
poziţia etichetă = etichetă ;
întoarcere element;
}
]]>
</ Fx: Script>
<S: HGroup paddingTop = "20" paddingLeft = "20" >
<Componente: GroupedList
id = "meniu"
groupedItem = "tip"
dataProvider = "{} setul de date"
width = "200" height = "320"
itemRenderer = "GroupedListItemRenderer" />
</ S: HGroup>
</ S: Aplicaţie>
|
VO DataItem / DTO arată astfel: -
1
2
3
4
5
6
7
8 |
pachet
{
publice clasa DataItem
{
[Bindable] publice var tip: String ;
[Bindable] publice var etichetă: String ;
}
}
|
ItemRenderer personalizate (GroupedListItemRenderer) arată astfel: -
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44 |
<Xml version =? "1.0" encoding = "UTF-8"?>
<S: ItemRenderer xmlns: fx = " http://ns.adobe.com/mxml/2009 "
xmlns: s = " bibliotecă: / / ns.adobe.com / flex / scânteie "
xmlns: mx = " bibliotecă: / / ns.adobe.com / flex / mx "
autoDrawBackground = "false"
implementează = "com.anujgakhar.components.IGroupedItemRenderer"
xmlns: componente = "com.anujgakhar.components.*" >
<fx:Script>
<! [CDATA [
[Bindable]
privat var element: DataItem;
[Bindable]
privat var _isLastItemInGroup: Boolean ;
publice funcţia de set isLastItemInGroup (valoare: Boolean): void
{
_isLastItemInGroup = valoare;
}
suprascrie publice funcţia de set de date (valoare: Object): void
{
dacă (valoare valoarea & & este DataItem)
{
element = DataItem (valoare);
}
}
]]>
</ Fx: Script>
<s:layout>
<S: VerticalLayout decalaj = "3" />
</ S: layout->
<S: textul Label = "{} item.label" width = "100%"
verticalAlign = "de mijloc"
horizontalCenter = "0" height = "20" paddingLeft = "5" paddingTop = "2" />
<Componente: HDivider
width = "100%"
includeInLayout = "{} _isLastItemInGroup"
vizibil = "{_isLastItemInGroup}" />
</ S: ItemRenderer>
|
Veţi observa că această ItemRenderer pune în aplicare IGroupedItemRenderer interfaţă personalizată, care obligă pur şi simplu ItemRenderer de a implementa un set isLastItemInGroup () funcţia.
1
2
3
4
5
6
7
8
9 |
Pachetul com.anujgakhar.components
{
de import mx.core.IDataRenderer;
publice interfaţă IGroupedItemRenderer extinde IDataRenderer
{
Funcţia set isLastItemInGroup (valoare: Boolean): void ;
}
}
|
Şi, în sfârşit, componenta GroupedList personalizate: -
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39 |
Pachetul com.anujgakhar.components
{
de import mx.core.IVisualElement;
de import spark.components.List;
publice clasa GroupedList extinde Lista
{
publice funcţia GroupedList ()
{
super- ();
}
[Bindable]
publice var groupedItem: String ;
suprascrie publice funcţia updateRenderer (redare: IVisualElement, itemIndex: int,
Date: Object): void
{
dacă (de redare este IGroupedItemRenderer)
{
var lastItemInGroup: Boolean = false ;
dacă (dataProvider.length> (itemIndex+ 1))
{
var thisItem: String = dataProvider.getItemAt (itemIndex) [groupedItem];
var nextItem: String = dataProvider.getItemAt (itemIndex+ 1) [groupedItem];
dacă (thisItem = nextItem!)
{
lastItemInGroup = adevărat ;
}
}
IGroupedItemRenderer (renderer) isLastItemInGroup = lastItemInGroup.;
}
super-. updateRenderer (randare, itemIndex, date);
}
}
}
|
Şi acest lucru este modul în care produsul final arată. Vezi sursa este activat, astfel încât puteţi să faceţi clic dreapta şi de a vizualiza această sursă, dacă doriţi să. Vă rugăm să reţineţi că, în acest exemplu, nu am încercat să mima aspectul n simt din meniul original am folosit astfel încât nu există destul de mult nici o jupuire / Coafura în acest sens.
Useful Info