BasicLayout

Basic layout placerer sine Childs i forhold til deres settings uafhæning af hinanden. Dvs at skal skal fortælle hvor de skal placeres. Fx x="30", eller x="{etAndetComponent.x + etAndetComponent.width + 10}"

Basic layout supporter Constraints; left, right, top, bottom, horizontalCenter, verticalCenter, baseline, percentWidth, percentHeight.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?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/halo" 
  width="400"
  height="200"
  > 
  
  <s:Group width="400" height="200">
    <s:layout>
      <s:BasicLayout />
    </s:layout>
    
    <s:Button label="FlashForum.dk" id="btnFF"/>
    <s:Button label="Align to Btn" x="{btnFF.x + btnFF.width + 10}" />
    <s:Button label="Constraint right" right="25" />
  </s:Group>
  
</s:Application>

Beklager, du har ikke den krævede version af Flash Player. Du kan hente den fra http://www.adobe.com/go/getflash/

<script type="text/javascript">


</script>

HorizontalLayout

HorizontalLayout placerer sine Child´s horisontalt efter hinanden, og med mulighed for at indstille på properties så som Gap, paddingLeft/Right/Top/Bottom m.m.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?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/halo" 
  width="400"
  height="200"
  > 
  
  <s:Group width="400" height="200">
    <s:layout>
      <s:HorizontalLayout   />
    </s:layout>
    
    <s:Button label="FlashForum.dk"/>
    <s:Button label="FlashForum.dk"/>
    <s:Button label="FlashForum.dk"/>
  </s:Group>
  
</s:Application>

Beklager, du har ikke den krævede version af Flash Player. Du kan hente den fra http://www.adobe.com/go/getflash/

<script type="text/javascript">


</script>

VerticalLayout

VerticalLayout placerer sine Child´s verticalt efter hinanden, og med mulighed for at indstille på properties så som Gap, paddingLeft/Right/Top/Bottom m.m.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?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/halo" 
  width="400"
  height="200"
  > 
  
  <s:Group width="400" height="200">
    <s:layout>
      <s:VerticalLayout />
    </s:layout>
    
    <s:Button label="FlashForum.dk"/>
    <s:Button label="FlashForum.dk"/>
    <s:Button label="FlashForum.dk"/>
  </s:Group>
  
</s:Application>

Beklager, du har ikke den krævede version af Flash Player. Du kan hente den fra http://www.adobe.com/go/getflash/

<script type="text/javascript">


</script>

TileLayout

TileLayout placerer sine child'd i et "tile grid" og med mulighed for at sætte properties som horizontalGap, verticalGap, columnWidth, rowHeight m.m.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?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/halo" 
  width="400"
  height="200"
  > 
  
  <s:Group width="400" height="200">
    <s:layout>
      <s:TileLayout />
    </s:layout>
    
    <s:Button label="FlashForum.dk"/>
    <s:Button label="FlashForum.dk"/>
    <s:Button label="FlashForum.dk"/>
                <s:Button label="FlashForum.dk"/>
                <s:Button label="FlashForum.dk"/>
                <s:Button label="FlashForum.dk"/>
  </s:Group>
  
</s:Application>

Beklager, du har ikke den krævede version af Flash Player. Du kan hente den fra http://www.adobe.com/go/getflash/

<script type="text/javascript">


</script>

Med dette nye Layout tag er det også muligt at skift layout runtime fx ved at benytte den nye States model:

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
54
55
56
57
58
59
60
61
62
63

<?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/halo" 
  width="400"
  height="300"
 
  > 
  
  <s:states>
    <mx:State name="horizontal" />
    <mx:State name="vertical" />
    <mx:State name="tile" />
  </s:states>
  
  <s:Group id="buttonGroup" width="400" height="300"  >
  
    <s:layout.horizontal>
      <s:HorizontalLayout 
        gap="{hSlider.value}"
        />
    </s:layout.horizontal>
    
    <s:layout.vertical>
      <s:VerticalLayout 
        gap="{hSlider.value}" 
        />
    </s:layout.vertical>
    
    <s:layout.tile>
      <s:TileLayout 
        verticalGap="{hSlider.value}" 
        horizontalGap="{hSlider.value}" 
        />
    </s:layout.tile>
    
    <s:Button label="FlashForum.dk"/>
    <s:Button label="FlashForum.dk"/>
    <s:Button label="FlashForum.dk"/>
    <s:Button label="FlashForum.dk"/>
    <s:Button label="FlashForum.dk"/>
    <s:Button label="FlashForum.dk"/>
    <s:Button label="FlashForum.dk"/>
    <s:Button label="FlashForum.dk"/>
  
  </s:Group>
  
  
  <s:Group bottom="0">
    <s:layout>
      <s:HorizontalLayout />
    </s:layout>
    
    <s:Button label="HorizontalLayout" click="currentState='horizontal'" />
    <s:Button label="VerticalLayout" click="currentState='vertical'"/>
    <s:Button label="TileLayout"  click="currentState='tile'"/>
  </s:Group>
  
  <s:HSlider bottom="30" width="100%" id="hSlider" minimum="0" maximum="25" liveDragging="true" />
  
</s:Application>
 

Beklager, du har ikke den krævede version af Flash Player. Du kan hente den fra http://www.adobe.com/go/getflash/

<script type="text/javascript">


</script>