component

[inge88]

Ik heb een component aangemaakt: CheckBox.mxml, in mijn main file wil ik het id: check aanroepen uit deze component file. Dit lukt echter niet, ik krijg de melding: Undefined Property.. iemand een idee?

[TheDutch]

Je moet wel even wat meer info en code geven hoor, zo kunnen we je niet helpen.

[inge88]

dit is de component file:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="20" height="20">

<mx:CheckBox id="check"/>

</mx:Canvas>

dit is een deel van de main:

private function notSelectedDel() :void {
Alert.yesLabel = "Ja";
Alert.noLabel = "Nee";
if(!contents_dg.selectedItem)
{
Alert.show("Selecteer een item om te verwijderen.", "Niets geselecteerd");
}
else if(check.selected)
{
Alert.show("ja!");
}
else
{

Alert.show("Weet je zeker dat je dit item wilt verwijderen?", "Verwijderen", 3, this, clickDelete);
}
}

het is dus de bedoeling dat zodra een checkbox is geselecteerd, de melding: ja! te voorschijn komt... alleen geeft flex een foutmelding bij check.selected... hij geeft aan dat check een undefined property is. Tuurlijk kan ik ook eenzelfde functie in het component zelf aanmaken, maar in dat geval werkt het gedeelte (!contents_dg.selectedItem) niet meer.

[TheDutch]

Laat even al je code zien...hier heb ik niet voldoende aan :).

[Waldo]

De context van de functie in je main applicatie is anders dan van je component. Oftewel, als je je component in je main applicatie als volgt hebt gedefinieerd (met een 'inge' namespace):

<inge:CheckBox id="myCheck" />

dan moet je in je functie doen: if(myCheck.check.selected)

Tips:
- Noem je eigen component niet naar een bestaand Framework component
- Verstandiger is het om niet te 'deeplinken' naar een waarde van een object binnen een component. Beter is het om die 'checked' waarde weer te geven in een variabele in je component, zodat je kan doen myCheck.selected.

[inge88]

ik ben er nog steeds niet uit.. het werkt niet.. een bijkomend probleem is waarschijnlijk dat het component in een datagrid moet komen...?

de main file ziet er inmiddels zo uit.. lange code maar heb alleen de code gepost die ertoe doet..
de component file ziet er nog steeds hetzelfde uit... een checkbox met het id.. check..

het probleem is nog steeds dat "check" voor flex een undefined property is..


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="listContents.send()" xmlns:local="*">

<mx:Script source="functions.as"/>
<mx:Script>
<![CDATA[
import mx.controls.DataGrid;
import mx.events.CloseEvent;
import mx.controls.Alert;

private function init() :void
{
myCheckBox.check.addEventListener("click", handleDelete);
}
private function handleDelete (event : MouseEvent) : void
{
deleteContents.send({id:contents_dg.selectedItem.i d})
}

]]>
</mx:Script>

<mx:HTTPService id="listContents" url="http://localhost:3000/contents/list" useProxy="false" method="GET"/>
<mx:HTTPService id="listCategories" url="http://localhost:3000/categories/list" useProxy="false" method="POST" result="listContents.send()"/>
<mx:HTTPService id="editContents" url="http://localhost:3000/contents/update" useProxy="false" method="POST" result="listContents.send()"/>
<mx:HTTPService id="deleteContents" url="http://localhost:3000/contents/delete" useProxy="false" method="POST" result="listContents.send()"/>
<mx:HTTPService id="createContents" url="http://localhost:3000/contents/create" useProxy="false" method="POST" result="listContents.send()"
contentType="application/xml">
<mx:request xmlns="">
<contents>
<author>{author.text}</author>
<title>{title.text}</title>
<text>{text.text}</text>
<category_id>{category_id.text}</category_id>
</contents>
</mx:request>
</mx:HTTPService>

<mx:DataGrid width="100%" height="324" id="contents_dg" dataProvider="{listContents.lastResult.contents.content}" y="0">
<mx:columns>

<!-- HIER IS HET COMPONENT AANGEGEVEN-->

<mx:DataGridColumn headerText="Verwijderen?" itemRenderer="myCheckBox"/>

<mx:DataGridColumn headerText="Auteur" dataField="author"/>
<mx:DataGridColumn headerText="Titel" dataField="title"/>
<mx:DataGridColumn headerText="Categorie" dataField="category-id"/>
</mx:columns>
</mx:DataGrid>

</mx:Application>

[TheDutch]

Inge, gebruik de ClassFactory om een instantie te maken van "myCheckBox". Geef vervolgens aan het "properties" property de properties mee die "myCheckBox" verwacht. Dit kan bijvoorbeeld een handler function zijn. Weetje ik maak wel weer even een voorbeeldje ;).

Dit is een werkend voorbeeld die je direct kunt proberen:

main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
initialize="init()">

<mx:Script>
<![CDATA[
import mx.core.ClassFactory;
import mx.controls.Alert;

[Bindable]
private var dummyArray:Array = [
{itemName: "item 1", checkBoxData: 1},
{itemName: "item 2", checkBoxData: 2},
{itemName: "item 3", checkBoxData: 3},
{itemName: "item 4", checkBoxData: 4},
{itemName: "item 5", checkBoxData: 5}
];

[Bindable]
private var myCheckBoxItemRenderer:ClassFactory = new ClassFactory(MyCheckBox);

private function init():void{
myCheckBoxItemRenderer.properties = {changeHandler: myCheckBoxChangeHandler};
}

private function myCheckBoxChangeHandler(event:Event,data:Object): void{
Alert.show("Checkbox changed at: "+event.currentTarget.parent.parent.selectedIndex);
}
]]>
</mx:Script>

<mx:DataGrid dataProvider="{dummyArray}">
<mx:columns>
<mx:DataGridColumn headerText="Item List" dataField="itemName" />
<mx:DataGridColumn headerText="Checkbox" dataField="checkBoxData" itemRenderer="{myCheckBoxItemRenderer}" />
</mx:columns>
</mx:DataGrid>

</mx:Application>

MyCheckBox.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:CheckBox change="myChangeHandler(event)" xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>
<![CDATA[
[Bindable]
public var changeHandler:Function;

private function myChangeHandler(event:Event):void{
if(changeHandler != null){
changeHandler(event,data);
}
}
]]>
</mx:Script>

</mx:CheckBox>

[inge88]

thanks! dit had ik nodig!