xml inladen in TextArea

[inge88]

Vermoeiend zeg projecten :P


Ik wil informatie uit een xml bestand in een textarea laden... aangezien deze geen dataprovider propertie heeft of iets dergelijks wil ik deze met behulp van een functie de boel laten inladen...

Ik heb dit:


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

<mx:Script>
<![CDATA[
function serviceResult(event):void
{

myTextArea.text = event.result;

}
]]>
</mx:Script>

<mx:HTTPService id="listContents" url="http://localhost:3000/contents/list" useProxy="false" method="GET" result="serviceResult(event)"/>

<mx:TextArea id="myTextArea"/>

</mx:Application>


Er komt nu in mijn TextArea [object, object] te staan. Ik moet dus nog een deel van 't xml id invullen. Als ik event.result.text ervan maak, krijg ik geen error, maar de textarea blijft ook leeg. Hoe moet ik 't dan wel invullen?

XML:

<?xml version="1.0" encoding="UTF-8" ?>
<contents>
<content>
<title>bla</title>
<text>blabla</text>
<author>blup</author>
<id type="integer">73</id>
<section>Mjuks Happens</section>
</content>
</contents>

[TheDutch]

Hier hoe de code zou moeten zijn:

<?xml version="1.0" encoding="utf-8"?>
<!-- With the "initialize" property we define the function to invoke when the application has initialized -->
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
initialize="init()">

<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import mx.controls.Text;
import mx.controls.Alert;

// Bindable variable to bind to myTextArea
[Bindable]
private var xmlText:String;

private function serviceResult(event:ResultEvent):void
{
// event.result is an XML object. You should create a path to the content in the XML.
myTextArea.text = event.result.contents.content.text;
}

private function init():void{
// You should invoke the send() function of the HTTPService or else you wont receive any result.
listContents.send();
}
]]>
</mx:Script>

<mx:HTTPService id="listContents" url="http://www.erwinverdonk.com/test.xml" result="serviceResult(event)"/>

<!-- As you can see the xmlText variable is binded to this TextArea component -->
<mx:TextArea id="myTextArea" text="{xmlText}" />

</mx:Application>

Ik wil je nogmaals op bindings wijzen. Bindings is één van de krachtigste features in Flex 2 waardoor bepaalde waarden van een variable ten alle tijden gekoppeld kunnen worden aan een property van een component of gewoon een andere variable. Om de HTTPService te runnen moet je altijd eerst de send() functie uitvoeren van de HTTPService. Zie voor de rest de comments in de code :).

[inge88]

Geweldig :) Maar hij werkt alleen als ik naar een "echt" .xml bestand verwijs, dat is mijn url dus blijkbaar niet. Ik gebruik InstantRails zodat Ruby on Rails op mijn localhost draait. de url http://localhost:3000/contents/list verwijst naar ruby, die een xml teruggeeft (of iets dergelijks). In dit geval krijg ik een error: unkown property text... :(

[TheDutch]

Wat geeft ie in de browser terug?

[inge88]

Je bedoelt als ik naar die url toega? Dan zie ik 't xml bestand zoals ik in m'n eerste post heb neergezet.

[TheDutch]

Heb je alle code uit mijn voorbeeld EXACT (op de URL na) overgenomen? Het is belangrijk dat je het 100% met mijn code probeert :).

[inge88]

Ja... precies dezelfde code.

[inge88]

Ik ben echt helemaal niet zo into Ruby on Rails.. maarja mijn docenten zagen 't wel zitten...

[TheDutch]

Maak eens een apart XML bestand aan en lees die eens in ipv. het via Ruby te doen :).

[inge88]

Die pakt ie wel dan.. zoals ik al zei. Alleen de url naar ruby niet...

[TheDutch]

Zorg ervoor dat de Mime Type van de content die je output met Ruby op "application/xml" staat. Dit kan je veranderen in de header variable, maar weet niet hoe dit zit in Ruby.

[inge88]

Ik snap niet goed wat je bedoelt? Waar in flex zou ik type="application/xml" moeten aangeven en in ruby heb ik geen idee...

de code die de xml teruggeeft is:
def list
@contents = Contents.find :all
render :xml => @contents.to_xml
end

uit meer bestaat 't in ruby zowat niet...

[TheDutch]

In Flex kan je dat niet aangeven, dat moet in Ruby. Wat krijg je nu terug wanneer je event.result Alert?

[TheDutch]

Voeg dit eens toe boven aan je Ruby code:

Mime::Type.register "application/xml", :xml

[inge88]

dan krijg ik error vanuit ruby
undefined method `register' for Mime::Type:Class

[inge88]

met die Alert krijg ik weer de melding unknown property text

[TheDutch]

Ik weet bijna zeker dat Ruby de XML niet goed teruggeeft. Klopt het dat deze code een XML object terugstuurt?

render :xml => @contents.to_xml

Kan je er eens voor zorgen dat Ruby gewoon plain tekst terugstuurt zoals je dat zou doen met een tekst bestand?

[inge88]

het klopt inderdaad dat die een xml object terugstuurt... Als ik in de ruby code dit stukje aanpas krijg ik gewoon text zoals:

bla blabla blup Mjuks Happens 73

Hoe kan ik daarmee verder dan?

[TheDutch]

Nou je moet gewoon zorgen dat Ruby precies dit als tekst terug geeft en niet als XML object :):

<?xml version="1.0" encoding="UTF-8" ?>
<contents>
<content>
<title>bla</title>
<text>blabla</text>
<author>blup</author>
<id type="integer">73</id>
<section>Mjuks Happens</section>
</content>
</contents>


// EDIT: Dat doe je natuurlijk al alleen de browser laat de XML tags niets zien. Bekijk de source maar eens in de browser van de pagina. Zo zou het dus goed moeten zijn.

[inge88]

ja! ik de broncode zie ik precies de xml zoals ie altijd was.. maar dan dus niet weergeven op scherm.. m'n applicaties doen 't nog steeds ook gewoon. Vond ik wel merkwaardig :P En nu dan? Zou hetzelfde als eerder gezegd nu wel moeten werken?

[TheDutch]

Denk het wel :).

[inge88]

Ik krijg precies dezelfde melding als eerst. Unkown property text. Het maakt dus geen verschil :(

Maar 't vreemde is dat als ik in een comboBox of dataGrid de dataprovider meegeef: listContents.lastResult.contents.content en een labelField of dataField met de waarde text, hij de gegevens dus wel ophaalt.

[TheDutch]

Dan heb je toch wat verkeerd staan ergens in je code. Ik wil je daarom weer vragen om alles wat je hebt behalve Ruby hier te posten.

[inge88]

<?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.controls.Alert;
import mx.rpc.events.ResultEvent;
import mx.controls.Text;
// Bindable variable to bind to myTextArea
[Bindable]
private var xmlText:String;

private function serviceResult(event:ResultEvent):void
{
// event.result is an XML object. You should create a path to the content in the XML.
Alert.show(event.result.contents.content.text);
}

private function init():void{
// You should invoke the send() function of the HTTPService or else you wont receive any result.
listContents.send();
}
]]>
</mx:Script>

<mx:HTTPService id="listContents" url="http://localhost:3000/contents/list" useProxy="false" method="GET" result="serviceResult(event)"/>

<mx:TextArea id="text01" text="{xmlText}" width="580" height="100%" x="0" editable="false"/>

</mx:Application>

[TheDutch]

Raar, alles werkt gewoon. Ik kan je hier niet verder mee helpen. Dit is gewoon een echt Ruby probleem waar je leerkacht je waarschijnlijk meer mee kan helpen :).

[inge88]

Ik hoop 't, maar vertrouw er niet zoveel op... hij is ook lerende :S Bedankt voor je tijd en hulp in elk geval :)

[TheDutch]

Dan snap ik eerlijk gezegd niet waarom hij jou Ruby laat leren terwijl hij er zelf nog lerende in is. Waar leer je dit eigenlijk? Is dit een opleiding of een vriend van je?

[inge88]

Ik volg de opleiding Communication & Multimedia Design op de Noordelijke Hogeschool Leeuwarden. We werken sinds dit jaar met minors.. en web 2.0/RIA is een van die minors. Je mocht zelf een programmeertaal + serverside client kiezen. Aangezien bijna iedereen koos voor Flex 2.0 + Ruby on Rails besloot ons groepje dit ook maar te doen; docent prees 't dan ook echt de hemel in en er werden slechts colleges gegeven over Flex/Ruby. Ajax + PHP zou achteraf toch een betere keuze geweest denk ik. Ons projectgroepje gaat de deadline niet halen, wat erg jammer is natuurlijk, puur door gebrek aan kennis. Flex en Ruby zijn nog nieuw voor de docenten van m'n opleiding. Tja, ik vind 't ook vreemd dat een docent zelf de dingen ook nog moet leren/uitzoeken. 'T is dan ook een onwijs zelfstandige studie.

[TheDutch]

Opzich is dat wel leuk zo'n zelfstandige studie. Alleen als je backup nodig hebt dan is die er niet echt in dit geval. Daardoor kan de studie erg lastig worden.

Dat er voor Flex 2.0 gekozen is kan ik helemaal in komen aangezien dat gewoon erg hard gaat in het gebruik door bedrijven en zeker weten toekomst heeft. Ruby on Rails heb ik zo mijn grote vraagtekens bij, helemaal als het om Flex 2.0 gaat. Ruby wordt nog heel weinig gebruikt en heeft nog niet op zo'n manier voet aan de grond gekregen om zekerheid te hebben voor een toekomst. Daarnaast is de syntax van Ruby totaal anders dan van andere talen en ondersteunt Ruby AMF (snelle data overdracht) niet wat juist zo'n groot voordeel heeft wanneer je Flex 2.0 gebruikt. PHP, Coldfusion, .NET, en Java ondersteunen dit wel.

Ik snap dus niet echt goed waar de keuze is gemaakt door deze leerkrachten. De opleiding is bedoeld om jullie klaar te stomen voor de markt, niet om leuk eens wat nieuws te proberen. Ik snap dat het voor de leerkrachten zelf leuk is om wat bij te leren maar voor jullie is het zinloos.

Wanneer jij zometeen klaar bent en je solliciteert bij een bedrijf en in je CV staat dat je alleen Ruby kent als serverside taal dan heb je grote kans dat je niet wordt uitgenodigd voor een gesprek, laat staan aangenomen worden. Op dit moment zou je Flex 2.0 in combinatie met PHP, Coldfusion, .NET, of Java moeten leren (of inderdaad AJAX en zo'n taal). Die talen worden het meest gebruikt, die talen hebben zekerheid van een toekomst, en die talen geven je zekerheid voor een baan na je studie.

Ik heb dus sterk het idee dat ze niet goed hebben nagedacht over wat jullie nodig hebben na jullie studie om goed de markt op te komen. Ik zou dit dan ook zeker aan kaarten bij je leerkrachten, want dit is in mijn ogen niet goed voor jouw studie.

[inge88]

Ik snap een boel keuzes van mijn docenten niet. Het onderwijssysteem, competentie gericht leren kan ook veel beter en klopt momenteel van geen kanten, zeker met de invoering van minors i.p.v vaste projecten voor elke student. Vaste projecten betekenen vaste competenties en punten die te behalen vielen. Met de invoering van minors moet je zelf je competenties kiezen, wat dus nog meer zelfstandigheid betekend. Ik kan 't gelukkig aan, maar er zijn veel andere studenten die er onder bezwijken.

Elke minor duurt een half jaar.. ik heb nu nog 2 weken te gaan. Hierna kies ik een andere minor.. 3D design. Er is geen minor PHP of iets in die richting, beetje jammer. Of ik moet een vrije minor kiezen (eigen invulling, bedenk zelf een opdracht en de competenties die je wilt halen) maar deze is dus nog zelfstandiger. Ik ga dus na deze minor in m'n vrije tijd zelf maar aan de slag met PHP, ik vind 't toch wel belangrijk om deze ook volledig onder de knie te krijgen. Dit is toch wel een van de minimale eisen die gesteld worden bij een baan. Ik wil namelijk ook die kant op.. het liefst een combinatie webdesign/development.

[TheDutch]

Je bent in iedergeval goed bezig en leergierig dat scheelt een hoop! :D
(dat is trouwens ook de rede waarom ik wat meer tijd stop in het helpen van jou)

[inge88]

bedankt! maar 't zou niet best zijn als 't niet zo was denk ik zo...

[inge88]

Mijn docent heeft mij kunnen helpen... 't is zoiets simpels, maarja kom er maar eens achter.
Er moest ipv. event.result.contents.content.text
event.result.contents.content[01].text staan! Omdat flex niet weet welk id hoe moet pakken. Nu pakt ie dus de eerste, maar als ik 02 in zou vullen de tweede etc. Ik moet dus nu nog een code maken, waarbij ie alles tegelijk pakt en in die textarea zet. Ik vraag me af hoe ik dit moet doen. Ik heb een for loop:


for(var i:int = 0; i < event.result.contents.content.length; ++i)
text01.text = event.result.contents.content[i].text;


laat echter alleen de eerste zien.. met een Alert wel alles.

[TheDutch]

Ahh je had in je uiteindelijk XML meer content nodes staan. Ja dan moet je het als array benaderen :).


text01.text += event.result.contents.content[i].text;

[inge88]

tjoh een plusje :p

Ik heb nu nog een vraag.. daarna hoop ik je een tijd niet lastig te vallen :p

Het is dus zeg maar de bedoeling dat al 't tekst apart komt te staan onder elkaar.. met eventueel een lijn die elkaar scheiden. Ook moet de titel, auteur enzo boven of onder elke tekst komen te staan. Hoe pak ik dit aan? Nu wordt de tekst gewoon achter elkaar geplakt. Ik denk ook niet vooruit ofzo :s

[TheDutch]

In dat geval zou ik er geen TextArea van maken maar losse Text velden onder elkaar :).

[inge88]

Okee, maar ook in dat geval blijft alle tekst achter elkaar geplakt staan. Voor meerdere items zoals author, title etc is het inderdaad handig en een oplossing om een mx.text te gebruiken. Alleen wil ik dus dat elke titel, author en text als set bij elkaar komt te staan en dus niet alle teksten/authors/titles als een set.

Ik zou natuurlijk meerdere tekst velden kunnen aanmaken met een id en die door de functie laten invullen. Maar ik weet nu eenmaal niet hoeveel tekst/author/title er komen, dit kunnen er 3 zijn, maar misschien ook wel 20..

[TheDutch]

Maak een component met daarin de velden. Vervolgens gebruik je die component als ItemRenderer binnen een List component. Je kunt dan het XML als dataprovider opgeven voor dat List component :).

[gelevogel]

Ik zou eerder thuis C# gaan leren ipv. PHP met name omdat het een betere taal is om object georienteerd programmeren te leren. PHP zit op bepaalde onderdelen zo knullig (o.a. interfaces, scoping) in elkaar, dat je er soms zo gestoort van kan worden. [V] dag hier...

[inge88]

Maak een component met daarin de velden. Vervolgens gebruik je die component als ItemRenderer binnen een List component. Je kunt dan het XML als dataprovider opgeven voor dat List component :).

Ik ga 't morgen uitproberen.. !

[inge88]

Ik heb nu een component aangemaakt:


<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
<mx:Script>
<![CDATA[

import mx.rpc.events.ResultEvent;
import mx.controls.Text;

// Bindable variable to bind to myTextArea
[Bindable]
private var xmlText:String;

private function serviceResult(event:ResultEvent):void
{
// event.result is an XML object. You should create a path to the content in the XML.
for(var i:int = 0; i < event.result.contents.content.length; ++i)
text01.text += event.result.contents.content[i].text;
textAuthor.text += event.result.contents.content[01].author;
textTitle.text += event.result.contents.content[01].title;


}

private function init():void{
// You should invoke the send() function of the HTTPService or else you wont receive any result.
listContents.send();
}
]]>
</mx:Script>
<mx:HTTPService id="listContents" url="http://localhost:3000/contents/list" useProxy="false" method="GET" result="serviceResult(event)"/>

<mx:Text id="textTitle" x="10" y="10" text="{xmlText}" width="346"/>
<mx:Text id="textAuthor" x="10" y="36" text="{xmlText}" width="346"/>
<mx:Text id="text01" x="10" y="62" text="{xmlText}" width="380" height="94"/>

</mx:Canvas>



In m'n mainfile laat ik init() initialiseren, heb ik xmlns:local="*" aangegeven en heb ik dit stukje staan die t component oproept:

<mx:List height="300" itemRenderer="textContent"/>



Ik krijg nu echter alleen de canvas te zien, zonder iets erin. Ik heb 't idee dat dit komt doordat 't component zelf niet helemaal lekker werkt. De httpService pakt ie niet doordat die in de Canvas staat, klopt dat? Ik weet niet precies hoe ik 't met de dataProvider moet doen. Ik vul die bij de mx.List in. Ik moet dan in het component bij de textvelden, "{text}", "{author}", {title} invullen? Dan krijg ik een foutmelding, omdat ze niet herkent worden.

[TheDutch]

De HTTPService moet op hetzelfde niveau als List staan. Vervolgens geef je het result van de HTTPService mee als DataProvider van List. Wanneer je jouw gemaakt component (zonder HTTPService) gebruikt als ItemRender van List dan heb je daarin een property "data" waar de data in staat van het item in de DataProvider die op dat moment de ItemRenderer gebruikt :).

[inge88]

Ik begrijp 't niet goed. Ik zet de httpService in 't hoofdbestand en haal die uit 't component bestand. Het script moet hier wel blijven staan? Ik heb de list de dataProvider="listContents.lastResult.contents.content" meegegeven, dan vul ik data="text" in? Het property data bestaat niet volgens flex? En hoe zit 't met de andere items als author en title?

[TheDutch]

Data is een object met de specifieke rij uit de DataProvider. Trace eens "data.text" of alleen "data". Laat ook weer even al je code zien :).

[inge88]

Als ik data.text of data wil alerten, krijg ik de foutmelding; null object reference of unrelated type string. Ik kan nog steeds niet uit je uitleg opmaken hoe 't dan wel zou moeten.

textContent.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
<mx:Script>
<![CDATA[

import mx.rpc.events.ResultEvent;
import mx.controls.Text;

// Bindable variable to bind to myTextArea
[Bindable]
private var xmlText:String;

private function serviceResult(event:ResultEvent):void
{
// event.result is an XML object. You should create a path to the content in the XML.
for(var i:int = 0; i < event.result.contents.content.length; ++i)
text01.text += event.result.contents.content[i].text;
textAuthor.text += event.result.contents.content[01].author;
textTitle.text += event.result.contents.content[01].title;


}
]]>
</mx:Script>

<mx:Text id="textTitle" x="10" y="10" text="{xmlText}" width="346"/>
<mx:Text id="textAuthor" x="10" y="36" text="{xmlText}" width="346"/>
<mx:Text id="text01" x="10" y="62" text="{xmlText}" width="380" height="94"/>

</mx:Canvas>



hoofd bestand, listContents.send() wordt geinitialiseerd. in de application tag staat nog steeds xmlns:local="*". on creationComplete wordt de functie listCheck uitgevoerd waar ik Alert.show(data.text); doe (krijg in dat geval dus een error)

<mx:HTTPService id="listContents" url="http://localhost:3000/contents/list" useProxy="false" method="GET"/>
<mx:List height="300" itemRenderer="textContent" dataProvider="listContents.lastResult.contents.content"/>

[TheDutch]

Hoi Inge!

Ik heb al je code opgeschoond zodat het nu overzichtelijk is. Dit is een werkend voorbeeld dus ik zou zeggen kopieer de code precies zoals het hier staat en run het. Laat ook in de HTTPService de XML naar mijn server even staan om het voorbeeld te bekijken :).

main.mxml:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()">

<mx:Script>
<![CDATA[
private function init():void{
listContents.send();
}
]]>
</mx:Script>

<mx:HTTPService url="http://flashdevils.erwinverdonk.com/test.xml" id="listContents" />

<mx:List height="500" width="600" variableRowHeight="true" selectable="false" dataProvider="{listContents.lastResult.contents.content}" itemRenderer="myComponents.TextContent" />

</mx:Application>


TextContent.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Form verticalScrollPolicy="off" horizontalScrollPolicy="off" borderSides="bottom" borderStyle="solid" borderThickness="1" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:FormItem label="Title:" width="100%">
<mx:Text id="textTitle" text="{data.title}"/>
</mx:FormItem>

<mx:FormItem label="Author:" width="100%">
<mx:Text id="textAuthor" text="{data.author}"/>
</mx:FormItem>

<mx:FormItem label="Description:" width="100%">
<mx:TextArea text="{data.text}" editable="false" borderStyle="none" wordWrap="true" width="100%" height="200" />
</mx:FormItem>
</mx:Form>


Let erop dat component- en classnamen altijd met een hoofdletter beginnen. Dus "textContent" moet zijn "TextContent". Mocht je vragen hebben over dit voorbeeld stel ze gerust, ik leg je alles graag uit!

// EDIT 1: Je kunt het voorbeeld ook hier bekijken http://flashdevils.erwinverdonk.com/main.swf
// EDIT 2: Code van main.mxml aangepast

[inge88]

:D thanks 't werkt precies zoals ik 't wilde! Ik zal voortaan component en classnamen met een hoofdletter laten beginnen.

Ik snap nu ook wat je bedoelde. data vervangt de dataProvider in 't component. Maar waarom moet er een arrayCollection worden aangemaakt? Het was niet voldoende om listContents.lastResult.contents.content in de dataProvider te zetten?

[TheDutch]

De variable "data" in een ItemRenderer is een Object met de data van een specifieke rij uit de DataProvider. Dat is natuurlijk logisch aangezien de ItemRenderer voor elke rij andere data moet laten zien. De variable "data" is alleen beschikbaar wanneer het component als ItemRenderer gebruikt wordt.

Je hebt trouwens helemaal gelijk dat je ook direct XML mee kunt geven aan de DataProvider:

<mx:List height="500" width="600" variableRowHeight="true" selectable="false" dataProvider="{listContents.lastResult.contents.content}" itemRenderer="TextContent" />

Ik heb een gewoonte om mijn data altijd te converteren naar een ArrayCollection en die in een ModelLocator (globale opslag data) te stoppen. Waarom een ArrayCollection? Omdat ik het persoonlijk een erg prettige collectie vindt om mee te werken. Voor de DataProvider maakt het in de meeste gevallen allemaal niets uit :).

Net wat getest en zie dat "source" in de string "listContents.lastResult.contents.content.source" niet nodig is en zelfs voor problemen kan zorgen wanneer je maar 1 item hebt in je XML. Haal die er dus uit!

[inge88]

Okidoki :) Heb ik weer wat duidelijkheid :D