Blazed tutorial: Het creëren van een chat-applicatie in Flex met BlaseDS

12 maart 2008 door Julien Lestel

Deze handleiding toont u hoe u een chat-applicatie in Flex met behulp van de messaging-dienst van blazed.

Blazed

Ten eerste kunt u downloaden blazed. Merk op dat de bronnen zijn ook beschikbaar :)

Server configuratie

1 - in je home directory blazed, WEB-INF/flex/messaging-config.xml open het bestand in een teksteditor. Als u gebruik blazed met de geïntegreerde Tomcat-server, de webapplicatie is hier blazed: "install_dir / tomcat / webapps. Het messaging-config.xml bestand bevat configuratie-instellingen voor de Messaging Service. Als u het bestand openen diensten-config.xml in dezelfde directory, je zult zien dat het bestand messaging-config.xml "wordt opgenomen door middel van verwijzing in dit bestand. Het bestand "services-config.xml" laat een configurationhaut niveau blazed. Het algemeen, verwijzen we u naar dit bestand configuratiebestand voor het vaststellen van specifieke diensten, zoals messaging. Het bevat ook instellingen zoals systemen "messaging-kanalen en de veiligheid in dit bestand.

2 - In de messaging-config.xml bestand, net vóór het item </ service>, voegt u de volgende en sla het bestand:

<destination id="chat"/>

3 - De bestemming omschreven op de server waar de klant zal worden vrijgegeven Flex en Flex die klanten in staat zullen zijn om berichten te ontvangen die zijn gepubliceerd. Merk op dat er sprake is van een standaard zender riep mijn-stembureau-AMF geconfigureerd in de messaging-bestand config.xml. Blazed gebruikt "kanalen" voor het verzenden en ontvangen van gegevens tussen de Flex-client en de server. Het standaard kanaal is gedefinieerd in de diensten-config.xml bestand en het is alleen bedoeld in de messaging-bestand config.xml. Deze bijzondere kanaal gebruikt de Actie Message Format (AMF) en sonde de server voor nieuwe berichten die op hun bestemming aankomen. Naast de kanalen op "poll", blazed ook kanalen die de verbinding tussen clients en servers, en voor het streamen van data stroom (streaming) tussen hen.

4 - Start of opnieuw opstarten van uw applicatie server BlaseDS.

Client-side ontwikkeling in Flex

1 - In de Flex Builder 3, een nieuw project blazed zoals hier beschreven: http://learn.adobe.com/ ...

2-Naam van het project chat1.

3 - In het bestand chat1.mxml dat Flex Builder gecreëerd, zal u maken in de Flex-client toepassing die kunnen publiceren berichten naar de chat van bestemming en ontvangen van berichten van de bestemming.

4 - Vlak voor <mx:Application> element chat1.mxml in het bestand, voeg een element <mx:Script> leeg. U kunt dit doen door het kopiëren van de volgende code:

<mx:Script>

<[CDATA [

]]>

</ Mx: Script>

5 - Vlak voor het item </ mx: Script>, voegt u de volgende MXML code. Deze code schept een bericht producent en een cliënt. Producent stuurt berichten naar de bestemming en de klant een abonnement en ontvangt berichten die worden verzonden naar de bestemming. In deze toepassing maken we objecten Producent en Klant MXML, maar zoals de meeste objecten Flex, kunt u ze in ActionScript.

<mx:Consumer id="consumer" destination="chat" message="messageHandler(event.message)"/>
<mx:Producer id="producer" destination="chat"/>

6 - Net onder het element <mx:Consumer>, voeg de volgende MXML code. Deze code zorgt voor de user interface invoeren berichten, berichten versturen en bekijken. Het panel houdt kind voorwerpen die het bevat. De ControlBar wordt ook gebruikt voor de lay-out. De textarea om berichten in de bestemming. De TextInput controle kunt u berichten. U kunt vervolgens gebruik maken van de controle-knop om berichten te sturen naar de bestemming.

<mx:Panel title="Chat" width="100%" height="100%">
<mx:TextArea id="log" width="100%" height="100%"/>
<mx:ControlBar>
<mx:TextInput id="msg" width="100%" enter="send()"/>
<mx:Button label="Send B" click="send()"/>
</ Mx: ControlBar>
</ Mx: Panel>

7 - Kopieer de volgende code in de ActionScript CDATA sectie element <mx:Script>:

invoer mx.messaging.messages.AsyncMessage;
invoer mx.messaging.messages.IMessage;

particuliere functie send (): void (
var bericht: IMessage = new AsyncMessage ();
message.body.chatMessage = msg.text;
producer.send (bericht);
msg.text = "";

prive-functie messageHandler (bericht: IMessage): void (
log.text = message.body.chatMessage + + "n";
)

Deze code kunt u:

  • Import klasse AsyncMessage en IMessage interface, die worden gebruikt in de methode send ().
  • Maak methode send () wordt aangeroepen bij het klikken op de knop controle. Deze methode maakt een nieuwe AsyncMessage en vervolgens een variabele boodschap aan het type IMessage. Dit stelt u de eigenschap waarde message.body.chatMessage met de waarde van msg.text - de tekst van de TextInput controle. Dit roept vervolgens de methode send () producent om het bericht te verzenden, en duidelijk de tekst eigendom van de TextInput controle.
  • Opgericht de methode om het evenement messageHandler (). Deze methode haalt de gebeurtenis "boodschap", wanneer de cliënt object ontvangt het bericht van de bestemming. Deze methode geeft de tekst in message.body.chatMessage eigendom log.text - textarea controle.
  • Opmerking: Omdat de methode send () neemt een IMessage als een argument in dit voorbeeld hebben we expliciet typer AsyncMessage te IMessage interface die ten uitvoer wordt gelegd. Als u niet wilt dat deze oproep producer.send () met een AsyncMessage, de omschakeling gebeurt automatisch.

8 - Voeg de volgende MXML attributen aan het element <mx:Application> voor de Flex cliënt zich aan de bestemming bij het opstarten van de applicatie:

creationComplete = "consumer.subscribe ()"

9 - De mx: Application nu er zo uitzien:

<mx: Application xmlns: MX = "http://www.adobe.com/2006/mxml"
creationComplete = "consumer.subscribe ()">

De MXML code is nu compleet!

10 - Zorg ervoor dat de server draait blazed.
11 - Compileren en uitvoeren van de client-toepassing met Flex Builder door "Uitvoeren> Uitvoeren vanaf de menubalk.
12 - Open de dezelfde URL in een tweede browser.
13 - Voer een bericht in een venster en dienen te worden opgenomen in een ander venster.

En nu voor onze eerste aanvraag met behulp van Adobe Flex blazed!

Ik binnenkort een nieuwe online tutorial om je te laten zien hoe het genereren van web services met blazed ...

Bron: Adobe Hier

Als u nu komt voor het eerst op Flex-info.fr kunt u zich abonneren op de RSS feed. Dank u voor uw bezoek!

1 étoile2 étoiles3 étoiles4 étoiles5 étoiles (1 stemmen, 5.00 van de 5)
Loading ... Laden ...

4 reacties op dit bericht

  1. Caribou Says:

    Hoi!
    dank u voor deze tuto :) Ik wil graag weten hoe u géreriez lijst aangesloten op een flex chat alstublieft? Volstaan me wat aanwijzingen :) Ik dank u bij voorbaat!

  2. bertrand_b Says:

    Hallo!

    Ik hou van hetzelfde te doen, maar met behulp van de activemq makelaar (indien mogelijk 5.1.0).

    Hebt u een oplossing?

  3. Skeuds Says:

    Hallo!
    Dank u voor de vertaling van deze tutorial. Lokaal alles goed werkt, maar ik kan niet inzetten op mijn externe server. Heeft u info?

  4. Patrick_Aubin Says:

    Ik zal alles wat het begin van dit blazed want ik ben erg nietig deze
    als je kan mij helpen?

Schrijf een reactie

Abonnementen

  • Add to My AOL
  • Add to Google
  • Toevoegen aan Zune
  • Add to Netvibes
  • Add to Technorati
  • Add to My Yahoo
  • Toevoegen aan Zune

Onderzoek

Hoe vind je de nieuwe Flex-info.fr?

Bekijk Resultaten

Loading ... Laden ...

Mugsho