Flex Opmaak
Oke om te beginnen maken we een simpele layout in flex.
Dit is de totale code, hieronder zal ik alles stap voor stap uitleggen.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="408" height="358">
<mx:Script source="functions.as" />
<mx:HTTPService id="info" result="ongo(event)" showBusyCursor="true" url="http://127.0.0.1/test.php" useProxy="false" />
<mx:DataGrid dataProvider="{myData}" editable="false" width="350" height="144" x="29" y="93" >
<mx:columns>
<mx:DataGridColumn width="100" headerText="ID" dataField="id"/>
<mx:DataGridColumn width="100" headerText="Naam" dataField="name"/>
<mx:DataGridColumn width="150" headerText="E-mail" dataField="email"/>
</mx:columns>
</mx:DataGrid>
<mx:Button x="296" y="245" label="clear data" click="del()"/>
<mx:Button x="193" y="245" click="info.send()" label="receive data"/>
</mx:Application>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="408" height="358">
<mx:Script source="functions.as" />
<mx:HTTPService id="info" result="ongo(event)" showBusyCursor="true" url="http://127.0.0.1/test.php" useProxy="false" />
<mx:DataGrid dataProvider="{myData}" editable="false" width="350" height="144" x="29" y="93" >
<mx:columns>
<mx:DataGridColumn width="100" headerText="ID" dataField="id"/>
<mx:DataGridColumn width="100" headerText="Naam" dataField="name"/>
<mx:DataGridColumn width="150" headerText="E-mail" dataField="email"/>
</mx:columns>
</mx:DataGrid>
<mx:Button x="296" y="245" label="clear data" click="del()"/>
<mx:Button x="193" y="245" click="info.send()" label="receive data"/>
</mx:Application>
Hier import je de as3 file waar alle functies in opgeslagen zijn, om de opmaak duidelijk en overzichtelijk te houden.
Net als bijv in php de functie include voor wordt gebruikt.
Code (php)
1
<mx:Script source="functions.as" />
Oke dit is de belangrijkste component die we nu nodig hebben, HTTPService.
Code (php)
1
<mx:HTTPService id="info" result="ongo(event)" showBusyCursor="true" url="http://127.0.0.1/test.php" useProxy="false" />
HTTPService wordt gebruikt in flex om connectie te maken met een opgegeven url, en de resultaat weer terug te sturen naar de functie in result=.
De datagrid, hier gaan we vandaag al onze data in gooien zodra we het hebben opgehaaldt.
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<mx:DataGrid dataProvider="{myData}" editable="false" width="350" height="144" x="29" y="93" >
<mx:columns>
<mx:DataGridColumn width="100" headerText="ID" dataField="id"/>
<mx:DataGridColumn width="100" headerText="Naam" dataField="name"/>
<mx:DataGridColumn width="150" headerText="E-mail" dataField="email"/>
</mx:columns>
</mx:DataGrid>
<mx:columns>
<mx:DataGridColumn width="100" headerText="ID" dataField="id"/>
<mx:DataGridColumn width="100" headerText="Naam" dataField="name"/>
<mx:DataGridColumn width="150" headerText="E-mail" dataField="email"/>
</mx:columns>
</mx:DataGrid>
Zoals je kan zien is de dataProvider de variable myData, dit komt later nog aan bod.
Hou er rekening mee dat waarden van dateField, exact moeten zijn met het xml tag waar je ze uit wilt halen.
En dan het laatste gedeelte van onze opmaak de buttons.
Code (php)
1
2
2
<mx:Button x="296" y="245" label="clear data" click="del()"/>
<mx:Button x="193" y="245" click="info.send()" label="receive data data"/>
<mx:Button x="193" y="245" click="info.send()" label="receive data data"/>
zoals je kan zien staat er in de onderste button, "click="info.send()"".
Dit betekend dat als er op de knop wordt gedrukt, dat hij de HTTPService component aanspreek en de commando send() geeft.
Als je goed kijkt zie je dat "info" de id van HTTPService.
Oke nu dit gelezen te hebben gaan we door naar functions.as. :)