Lag en fleksibel XMPP Chat for en Member

Create en fleksibel XMPP Chat for en medlemsbasert nettsted med Flash og PHP
Del
Del
to
Share
Cyber ​​Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av

. Vi skal se på hvordan du kan lage en XMPP chat program som kan brukes i mange forskjellige scenarier. Du vil lære hvordan du kan integrere en ekstern database med Ignite Realtime er Openfire Jabber Server og hvordan du bruker den XIFF biblioteket til å opprette egendefinerte XMPP utvidelser som kan brukes til å sende egendefinerte data over et nettverk.

Du kan bruke denne å bygge en standard standard chatterom app, med en side viet til det, eller du kan kjøre den sammen med en annen del av Flash-innhold, som Kongregate gjør med sine spill.




Forhåndsvisning Endelig resultat

La oss ta en titt på grensesnittet til det endelige resultatet vil vi jobbe mot (denne demoen ikke fungerer som en faktisk chat-klient):

Her er en video demo som viser det i aksjon :




Trinn 1: Forutsetninger

Denne opplæringen forutsetter at du har litt erfaring med PHP. Du må ha Wamp Server installert på systemet ditt, og du bør også være noe kjent med PhpMyAdmin. Hvis du ikke har WAMP kan du laste den ned her. Du må også laste ned Openfire Jabber Server og XIFF API biblioteket fra Ignite Realtime nettside. Jeg vil lede deg gjennom installasjonsprosessen Openfire. Til slutt må du den siste versjonen av Java installert på operativsystemet og Flash CS4 eller nyere. Jeg skal bruke Flash CS5 Professional i denne opplæringen. Hvis du ikke har den nyeste versjonen av Java, kan du laste ned den nyeste versjonen her




Trinn 2:. Sette opp vår database

Kontroller at Wamp Server er kjører på datamaskinen og naviger til http: //localhost /phpmyadmin /i nettleseren

Opprett en ny database kalt MyContentSite med phpMyAdmin

Lag en ny tabell i MyContentSite database kalt.. myMembers med åtte felt.

Etter myMembers bordet er sucessfully skapt av PhpMyAdmin, opprette følgende fields:


uid

first_name

last_name

my_username

my_password

email

status_message

country

Your skjermen skal se slik ut:

La meg bryte ned hvert felt. Uid feltet skal være av typen INT. Du kan endre feltets type fra kolonnen. Gjør dette feltet primær indeksen og satt dette feltet til auto-tilvekst selv. Gjør dette ved å velge PRIMÆR alternativet under INDEX kolonnen innenfor dette felt rad. Deretter sjekke
av i boksen under Auto-Økning kolonne. Dette feltet representerer bruker-ID for den nåværende medlem av nettstedet vårt. Den FIRST_NAME, last_name, my_username, my_password, e-post, og landets felt bør være ha datatype eller VARCHAR og lengde /verdi bør settes til 255.

Merk: Du my_password feltene som vises i bildene holder en MD5 av brukerens passord. Du kan velge å lagre passord vanlig uten kryptering, men for denne opplæringen jeg skal bruke hashet passord.

Til slutt skal STATUS_MESSAGE feltet være av type MEDIUMTEXT.

Når du har opprettet den alle feltene klikk på lagre knappen.

Nå er vi klar til å lage to dummy-kontoer som vi vil bruke til å logge inn på vår nettside og bli med chatterom senere i denne opplæringen. Klikk på kategorien Sett inn. Du vil bli presentert med en form for å skape en ny rad i tabellen.

La uid feltet tomt fordi vi ønsker dette feltet til automatisk øke
selv. Sett FIRST_NAME til Jane
og last_name feltet til Doe
. Sett my_username til janedoe
med alle lavere Cass bokstaver. For my_password feltet, vil vi bruke den hashet verdi for våre passord som er tutsplus
i alle små bokstaver. Skriv inn ca28ad0733a3dde9dc1f30e32718d209
inn i my_password feltet. Du kan stille inn epost-feltet til en e-postadresse som du selv velger og STATUS_MESSAGE feltet til hva du ønsker. Sett landet feltet til det landet du ønsker også. Når du er ferdig, klikk på lagre
knappen. Gjenta denne prosessen for å opprette en konto for en John Doe
med my_username feltet satt til johndoe123
i alle små bokstaver. Bruk samme passord som før




Trinn 2:. Installere Openfire

Når du har lastet ned Openfire fra Ignite Realtime nettside, kjør installasjons exe
fil (eller dmg
fil hvis du bruker en Mac).

Velg langauge.

Klikk på Neste
å fortsette. Anmeldelser

Godta lisensavtalen.

Velg en katalog og klikk Neste
å fortsette.

Velg en startmeny-mappe.

Klikk på Neste
å starte installasjonen.

Når installeringen er fullført, klikker du Fullfør
til å kjøre Openfire. Den Openfire tjenesten vil starte automatisk når programmet kjøres. Klikk på Launch Admin
knappen når Openfire er ferdig med oppstarten.

Nå skal vi sette opp Openfire. Velg ønsket språk og klikk Fortsett
.

La Administrator Console Port
feltet og Secure administrasjonskonsollen Port
feltet til standardverdiene. For denne opplæringen forlate Domene
feltet til det er standardverdien også. Du kan endre dette senere til ditt nettsted domene. Klikk på Fortsett
.

Velg alternativet Standard Database Connection Hotell og klikk Fortsett
.

under Database Driver Presets
, velger du MySQL
. Skriv inn com.mysql.jdbc.Driver
i JDBC Driver Class
feltet. Bytt [vertsnavn] til localhost Hotell og endre [databasenavn] til mycontentsite
i Database URL
feltet. Set Brukernavn Hotell og Passord
til din MySQL database brukernavn og passord. For denne opplæringen jeg brukte standard brukernavn for MySQL som er root Hotell og Passord
feltet fortsatt er blank. Klikk Fortsett
å gå videre.

La profilinnstillingene til Standard
. Klikk på Fortsett
å gå videre.

Velg en e-postadresse for administratorkontoen og et passord deretter fortsette.

Vi er nå ferdig med installasjonsprosessen. Du kan nå logge inn på administrasjonskonsollen. Bruk standard brukernavn admin
og passord du valgte under installasjonen



Trinn 3:. Sette opp Chatterom

Vår søknad tillate brukere å kommunisere innen chatterom. Men for at dette skal skje våre brukere må ha chatterom å delta. La oss lage chatterom bruker Openfire administrasjonskonsollen. Hvis du ikke allerede har gjort, starter Openfire Server. Logg i Openfire administrasjonskonsollen. Naviger til konsernet Chatterom side ved å klikke på kategorien Gruppe Chat
.

Klikk på Opprett ny Room
på venstre side av skjermen. Fyll ut detaljene slik du ser dem på bildet nedenfor.

Når du er ferdig, klikker du på Lagre endringer
knappen. Hvis det opprettes rommet lykkes, skal du se en melding og en grønn hake

Følg de samme trinnene for å opprette to flere chatterom



Trinn 4:.. Integrering Openfire med MySQL

I denne opplæringen, vår make-tro nettstedet bruker en MySQL database til å lagre data om hver bruker. Openfire kan integreres med en ekstern database, en MySQL database i dette tilfellet. Først må vi konfigurere Openfire til å gjøre dette.

Åpne openfire.xml
fila med Notepad
eller fortrinnsvis en rik tekst editor som Notepad ++ Anmeldelser som jeg nevnte tidligere. Filen vil bli plassert i Openfire /conf /
mappen i Program Files katalog mappe på PC
. ≪? Xml version = "1.0" encoding = "UTF -8 "> < -?! Denne filen inneholder bootstrap egenskapene som trengs av Openfire. Eiendomsnavn må være i formatet: "prop.name.is.blah = verdi" Det vil bli lagret som: < rekvisitt > < navn > < er > < blah > verdi < /blah > < /er > < /navn > < /prop > De fleste egenskapene er lagret i Openfire database. En eiendom seer og editor er inkludert i administrasjonskonsollen .-- > <! - Root element, må alle eiendommer være under dette elementet - > < jive > < adminConsole > <! - Deaktiver enten port ved å sette verdien til -1 - > < port > 9090 < /port > < securePort > 9091 < /securePort > < /adminConsole > < locale > no < /locale > <! - nettverksinnstillingene. Som standard vil Openfire binde seg til alle nettverksgrensesnitt. Alternativt kan du angi en bestemt nettverksgrensesnitt at serveren vil lytte på. For eksempel 127.0.0.1. Denne innstillingen er vanligvis bare nyttig på multi-omplassert servere. - > <! - < nettverk > < grensesnitt > < /grensesnitt > < /nettverk > - > < connectionProvider > < classname > org.jivesoftware.database.EmbeddedConnectionProvider < /classname > < /connectionProvider > < database > < defaultProvider > < driver > com.mysql.jdbc.Driver < /driver > < ServerUrl > jdbc: mysql: //localhost: 3306 /mycontentsite < /ServerUrl > < bruker > root < /brukernavn > < passord /> < testSQL > Velg en < /testSQL > < testBeforeUse > ekte < /testBeforeUse > < testAfterUse > ekte < /testAfterUse > < minConnections > 5 < /minConnections > < maxConnections > 25 < /maxConnections > < connectionTimeout > 1,0 < /connectionTimeout > < /defaultProvider > < /database > < oppsett > ekte < /setup > < /jive >

Dette er hva min openfire.xml
fil ser ut. openfire.xml
filen bør ligne på mine. Her er en link til Openfire Custom Database Guide Integrasjon på Ignite Realtime nettside. Du vil merke at du får beskjed om å gjøre endringer direkte til openfire.xml
konfigurasjonsfil i denne guiden.

Ikke gjør noen endringer i denne filen med mindre det ligner ikke meg.

Merk: Det er meget sannsynlig at din openfire.xml filen skal bruke DefaultConnectionProvider. Hvis det er det, kan du ha problemer med å logge deg på administrasjonskonsollen. Prøv å logge inn med standard først. Hvis passordet du angav under oppsettet ikke fungerer, bruke standard passord for å logge. Standard brukernavn er admin, og standardpassordet er admin også.

Hvis du ikke kan logge inn, endre DefaultConnectionProvider å EmbeddedConnectionProvider. Deretter starter Openfire og prøv å logge på igjen. Hvis du fortsatt har problemer, kjøre setup til Openfire igjen. Endre oppsettet tag verdi fra falsk å true innenfor openfire.xml filen. Deretter starter Openfire å kjøre setup igjen. Gjør dette som en siste utvei -. Dette bør ikke være nødvendig

Jeg har fulgt trinnene på de Ignite Realtime nettside utallige ganger bare for å finne meg selv i et hull senere. Et av problemene jeg møtte var at brukerne ikke kan koble til serveren, og når jeg prøvde å fikse problemet i administrasjonskonsollen, jeg kunne ikke logge i. Faktisk det eneste jeg kan tenke på som kan være mer frustrerende enn de problemene som jeg møtte var å bli sittende fast inne i et Saw felle.

Jeg ønsker ikke å gå gjennom hva jeg måtte så vennligst følg de neste trinnene nøye. Openfire har en glimrende måte for redigering og oppretting egenskaper som jeg synes å være mye mer effektivt enn å måtte redigere en xml fil på systemet.

Logg inn Openfire s Administrator Console
. Klikk på Systemegenskaper
linken på høyre side av hovedsiden.

Din server Systemegenskaper
siden bør se omtrent slik ut.

Viktig: Hvis Systemegenskaper side mangler noen eller alle egenskapene i bildet nedenfor, kan du legge eiendommene i manuelt. Når vi endrer en eiendom i opplæringen, hvis du ikke har den egenskapen at vi skal endre, bare bruke den samme fremgangsmåten som du ville å endre en egenskap til å skape eiendommen i stedet. Ellers, hvis du allerede har en eiendom som vi skaper, bare endre eiendommen med de verdiene som jeg angir.

Mot bunnen av skjermen vil du se en seksjon med tittelen Legg til ny eiendom
. Den har to felter. Det første feltet Eiendom Navn
. Det andre feltet er Eiendomsverdien
. Innenfor Eiendom Navn
feltet skriver du inn jdbcProvider.driver Hotell og innenfor Eiendomsverdien
feltet skriver du com.mysql.jdbc.Driver Anmeldelser ut i felten. Klikk på Lagre Eiendom
knappen når du er ferdig. Du kommer til å følge disse trinnene for å opprette flere eiendommer, samt å endre eksisterende eiendommer

Lag en egenskap kalt jdbcProvider.connectionString
med verdien jdbc.: Mysql: //localhost ? /mycontentsite user = root &. password =

Nå skal vi gjøre vår første modifikasjon til en eksisterende eiendom. Klikk på Rediger
link som correspondes til provider.auth.className eiendommen. Endre verdien til org.jivesoftware.openfire.auth.JDBCAuthProvider
med Rediger eiendom
tabellen. Klikk på Lagre Eiendom
knappen når du er ferdig.

Opprett en ny egenskap med navnet jdbcAuthProvider.passwordSQL
. Gi den en verdi på SELECT my_password Fra mymembers WHERE my_username =?
. Denne boligens verdi er MySQL søkestrengen som skal brukes for å godkjenne en bruker

Merk:. Legg merke til at den inneholder et spørsmålstegn (?). Spørsmålstegnet vil bli erstattet med verdien inne i brukernavn-feltet.

Opprett en ny egenskap som kalles jdbcAuthProvider.passwordType
. Gi den en verdi på md5

. Merk: jdbcAuthProvider
egenskaper vil bli skjult hvis du har fulgt trinnene riktig

Opprett en ny. egenskap kalt admin.authorizedUsernames
. Verdien skal være JID av brukernavnene som du ønsker å være i stand til å logge inn på Administrator Console
med

Merk:. Se på bildet nedenfor. Legg merke til at Jane og John Doe er JID er er deres brukernavn sammenkjedet med en @ -tegnet og serverens XMPP domene.

Endre eiendommen provider.user.className ved å endre verdien til org.jivesoftware.openfire. user.JDBCUserProvider
.

Opprett en ny egenskap som kalles jdbcUserProvider.loadUserSQL
med verdien SELECT FIRST_NAME, e-post fra mymembers WHERE my_username =?
.

Opprett en ny egenskap som kalles jdbcUserProvider.userCountSQL Hotell og gi den verdien SELECT COUNT (*) FROM mymembers
.

Opprett en ny egenskap som kalles jdbcUserProvider.allUsersSQL
. Sett verdien til SELECT my_username Fra mymembers
.

Opprett en ny egenskap som kalles jdbcUserProvider.searchSQL
. Gi den verdien SELECT my_username Fra mymembers
.

Opprett en ny egenskap som kalles usernameField
. Sette verdien til my_username
.

Opprett en ny egenskap som kalles navnefelt
. Sette verdien til FIRST_NAME
.

Opprett en ny egenskap som kalles emailField
. Sette verdien til e
.

Nå som vi har lagt til og endret egenskapene som trengs vi kan logge ut av Administrator Console
. Starte Openfire og prøver å logge inn i Administrator Console
med en faktisk bruker.

Access denied!

Nå kan du prøve å logge inn med brukernavn, admin
.

Tilgang nektet igjen! Hva er det som skjer her?

La oss ta en titt på openfire.xml
fil. Yours bør se det samme som det gjorde før. Vi må legge til endringer i xml filen. Jeg har funnet ut at ved å gjøre endringer i Administrator Console
først, deretter endre openfire.xml
filen etter, er mer konsekvent enn bare å gjøre endringer i xml. Som jeg beskrev tidligere, jeg kunne bare ikke logge inn med en klient eller inn i Administrator Console
etter at jeg hadde gjort disse endringene.

Endre openfire.xml Anmeldelser filen slik at det ser ut som dette
< xml version = "1.0" encoding = "UTF-8" > < -.?! Denne filen inneholder bootstrap egenskapene som trengs av Openfire. Eiendomsnavn må være i formatet: "prop.name.is.blah = verdi" Det vil bli lagret som: < rekvisitt > < navn > < er > < blah > verdi < /blah > < /er > < /navn > < /prop > De fleste egenskapene er lagret i Openfire database. En eiendom seer og editor er inkludert i administrasjonskonsollen .-- > <! - Root element, må alle eiendommer være under dette elementet - > < jive > < adminConsole > <! - Deaktiver enten port ved å sette verdien til -1 - > < port > 9090 < /port > < securePort > 9091 < /securePort > < /adminConsole > < locale > no < /locale > <! - nettverksinnstillingene. Som standard vil Openfire binde seg til alle nettverksgrensesnitt. Alternativt kan du angi en bestemt nettverksgrensesnitt at serveren vil lytte på. For eksempel 127.0.0.1. Denne innstillingen er vanligvis bare nyttig på multi-omplassert servere. - > <! - < nettverk > < grensesnitt > < /grensesnitt > < /nettverk > - > < connectionProvider > < classname > org.jivesoftware.database.DefaultConnectionProvider < /classname > < /connectionProvider > < database > < defaultProvider > < driver > com.mysql.jdbc.Driver < /driver > <serverURL>jdbc:mysql://localhost:3306/mycontentsite?user=root&amp;password=</serverURL> < bruker > root < /brukernavn > < passord /> < testSQL > Velg en < /testSQL > < testBeforeUse > ekte < /testBeforeUse > < testAfterUse > ekte < /testAfterUse > < minConnections > 5 < /minConnections > < maxConnections > 25 < /maxConnections > < connectionTimeout > 1,0 < /connectionTimeout > < /defaultProvider > < /database > < jdbcProvider > < driver > com.mysql.jdbc.Driver < /driver > <connectionString>jdbc:mysql://localhost/mycontentsite?user=root&amp;password=</connectionString> < /jdbcProvider > < leverandøren > < auth > < classname > org.jivesoftware.openfire.auth.JDBCAuthProvider < /classname > < /auth > < bruker > < classname > org.jivesoftware.openfire.user.JDBCUserProvider < /classname > < /bruker > < /leverandør > < jdbcAuthProvider > < passwordSQL > VELG my_password Fra mymembers WHERE my_username = <? /passwordSQL > < passwordType > md5 < /passwordType > < /jdbcAuthProvider > < jdbcUserProvider > < loadUserSQL > VELG FIRST_NAME, e-post fra mymembers WHERE my_username = <? /loadUserSQL > < userCountSQL > SELECT COUNT (*) FROM mymembers < /userCountSQL > < allUsersSQL > VELG my_username Fra mymembers < /allUsersSQL > < searchSQL > VELG my_username Fra mymembers HVOR < /searchSQL > < usernameField > my_username < /usernameField > < navnefelt > FIRST_NAME < /navnefelt > < emailField > e < /emailField > < /jdbcUserProvider > < oppsett > ekte < /setup > < admin > < authorizedUsernames > janedoe, johndoe123 < /authorizedUsernames > < /admin > < /jive >

Sørg for å endre du bruker DefaultConnectionProvider stedet for EmbeddedConnectionProvider så nær Openfire og starte den på nytt. Forsøk å logge inn i Administrator Console
som medlem fra nettstedets database. Jeg logget inn som John Doe. Hvis det gjøres riktig, bør du være tilbake i Administrator Console Hotell og brukernavnet bør være i øvre høyre hjørne av hjemmesiden

Merk:. Før du går videre, må du sørge for at alle av eiendommene innenfor openfire.xml filen er å dukke opp på systemegenskapene til administrasjonskonsollen. Hvis de ikke er du nå vet hvordan du legger dem inn manuelt



Trinn 5:. PHP

Vi må bruke PHP til å hente data fra en MySQL database og presentere data til Flash. For de av dere som er nye for PHP vil jeg kort forklare hva hvert enkelt script oppnår. La oss starte med den MySQLConnection klassen

MySQLConnection klassen kobler til og kobler fra en MySQL database
klasse MySQLConnection {private $ db_host = "localhost"..; //Din Websites domene privat $ db = "root"; //Databasene brukernavn privat $ db_pass = ""; //Databasene passord privat $ db_name = "mycontentsite"; //Navnet på databasen private $ koblet = 0; offentlig funksjon koble () {mysql_connect ($ this- > db_host, $ this- > db-bruker, $ this- > db_pass) or die ("Feil:.. Script avbrutt Kunne ikke koble til databasen"); mysql_select_db ($ this- > db_name) or die ("Feil:.. Script avbrutt Ingen database valgt"); $ this- > koblet = 1; session_start (); } Offentlig funksjon close () {mysql_close (); $ this- > koblet = 0; } Offentlig funksjon get_connected () {return $ this- > tilkoblet; }}

LoginManager klasse håndterer brukerpålogginger. En bruker kan autentiseres deretter logget inn og ut med denne klassen
require_once "MySQLConnection.php."; klasse LoginManager {offentlig funksjon __construct () {} offentlig funksjon innlogging ($ brukernavn, $ passord) {$ username = strip_tags ($ brukernavn); $ username = stripslashes ($ username); $ username = mysql_real_escape_string ($ brukernavn); $ passHash = md5 (passord $); //Gjelder MD5 kodet hash til passordet $ forbindelse = new MySQLConnection (); $ connection > koble (); $ sql = "SELECT * FROM mymembers WHERE my_username = '$ brukernavn' OG my_password = '$ passHash' LIMIT 1"; $ query = mysql_query ($ sql); if ($ query) {$ count = mysql_num_rows ($ query); } Else {die (mysql_error ()); } If ($ count > 0) {while ($ row = mysql_fetch_array ($ query)) {$ _SESSION ['brukernavn'] = $ brukernavn; $ _SESSION ['Pw'] = $ passord; $ uid = $ row ['uid']; session_name ($ brukernavn $ uid.); setcookie (session_name (), '', tid () + 42000, '/'); $ connection > close (); die ("login = 1"); } Die ("login = 0 & error = Ugyldig brukernavn eller passord"); } Else {$ connection > close (); die ("login = 0 & error = Ugyldig brukernavn eller passord"); }} Offentlig funksjon checkLogin () {if (isset ($ _SESSION ['brukernavn']) & & isset ($ _SESSION ['PW'])) {$ user = $ _SESSION ['brukernavn']; $ pw = $ _SESSION ['PW']; die ("login = 1 & username = $ user & password = $ pw"); } Else {die ("login = 0"); }} Offentlig funksjon utlogging () {setcookie (session_name (), '', tid () - 42000, '/'); if (isset ($ _SESSION ['brukernavn'])) unset ($ _SESSION ['brukernavn']); if (isset ($ _SESSION ['PW'])) unset ($ _SESSION ['PW']); //Destroy session session_destroy (); //returnerer resultatet til Flash (SWF) die ("logout = 1"); }}

Vi anmoder login.php
å logge brukeren inn og logout.php
å logge brukeren ut ved hjelp av LoginManager klassen. For å sjekke for å se om en bruker er logget inn kaller vi det check_login.php
script
//login.php require_once "klasser /LoginManager.php."; if (isset ($ _ POST ['brukernavn']) & & $ _POST ['passord']) {innlogging (); } Funksjon innlogging () {brukernavn $ = $ _POST ['brukernavn']; $ password = $ _POST ['passord']; unset ($ _ POST ['brukernavn']); unset ($ _ POST ['passord']); $ login = new LoginManager (); $ login- > innlogging ($ brukernavn, $ passord); } //Logout.php require_once "klasser /LoginManager.php"; $ login = new LoginManager (); $ login- > utlogging (); //Check_login.php require_once "klasser /LoginManager.php"; session_start (); $ login = new LoginManager (); $ login- > checkLogin (); exit ();

Den endelige manuset som kalles fra Actionscript er grab_user_data.php
script som brukes til å velge brukerens data fra vår MySQL database
require_once "klasser /MySQLConnection.php. "; if (isset ($ _POST ['brukernavn'])) {$ tilkobling = new MySQLConnection (); $ connection > koble (); $ username = $ _POST ['brukernavn']; $ sql = "SELECT * FROM mymembers WHERE my_username = '$ brukernavn' LIMIT 1"; $ query = mysql_query ($ sql); while (rad $ = mysql_fetch_array ($ query)) {$ uid = $ row ['uid']; $ xml = "< bruker id =" '. $ uid. ">' . "\\ n"; $ xml = "< fornavn >". . $ row ['FIRST_NAME']. "< /fornavn > \\ n"; $ xml = "< lastname >". . $ row ['last_name']. "< /lastname > \\ n"; $ xml = "< land >". . $ row ['landet']. "< /country > \\ n"; $ xml = "< statusMessage >". . $ row ['STATUS_MESSAGE']. "< /statusMessage > \\ n"; $ xml =. "< /bruker > \\ n"; } Echo $ xml; $ connection > close (); gå(); }

Disse PHP-skript tjene en svært viktig rolle i vår søknad, men er veldig grunnleggende



Trinn 6:. Sette opp Flash

Åpne opp Flash Professional. Sett dokumentet klassen til ChatApp
. Angi størrelsen på scenen for å 550 x 400
.

Merk: Jeg liker å bruke en framerate
på 30 FPS, men vår søknad har ikke noen animasjon, slik at du kan bruke hva framerate
fungerer best for deg <. br>



Trinn 7: Bygge Kundens brukergrensesnitt

Fra Komponenter
panel, velge og dra en knapp komponent på scenen. Plasser knappen slik at det sitter i øvre høyre hjørne av scenen. Sett eksempel navnet på knappen for å logoutBtn. Legg til en annen knappen nederst til høyre på scenen og satt sitt eksempel navn til sendBtn.

Legg til en liste compenent til scenen. Plassere den rett under logoutBtn og endre størrelsen på komponenten slik at den passer fint mellom begge knappene. Satt sin forekomst navn til listen.

Vi skal bruke logoutBtn å logge ut av brukerens session og sendBtn slik at våre brukere å sende meldinger. Listen vil vise alle nettbrukere innenfor gjeldende chat room. Når et element i listen er klikket, vil brukerens profil lastes.

Nå trenger vi en komponent som vil vise innkommende og utgående chat-meldinger, samt en tekstfeltet at våre brukere kan bruke for å legge inn nye meldinger. Legg en Tekstfelt komponent til scenen. Endre størrelse og plassere det å ta opp det meste av resten av scenen, forlate rommet for en inngang tekstfeltet på bunnen som er i samme høyde som sendBtn. Sett forekomst navn til displayTxt.

Til slutt må vi legge en TextInput komponent til scenen. Innstille komponent rett under displayTxt og til venstre for sendBtn. Sett forekomst navn til inputTxt.

Velg alle komponentene på scenen. Konverter utvalget til et symbol. Symbolet bør være en MovieClip heter brukergrensesnitt. Velg Eksporter for Action
alternativet. Class
feltet bør lese brukergrensesnitt
. Sett forekomst navn til vårt nye symbol til ui. Til slutt nevne den nåværende lag av hovedtidslinjen grensesnitt
. Dette vil hjelpe deg med å organisere prosjektet ditt bedre



Trinn 8:. Den Login Screen

Vår chat søknad ville være ubrukelig dersom brukeren ikke kunne logge inn på vår søknad. La oss bygge innloggingsbildet. Lag et nytt lag på hovedtidslinjen. Lagnavnet logg
.

Bruke Rektangulære
verktøy, tegne et rektangel på scenen som er samme størrelse som scenen. Rektangelet er stoke bør settes til 0. rektangelet bør ikke ha en linje, og bør fylles svart med en tranparency av 50%
.

Marker svart rektangel og konvertere den til en ny MovieClip symbol kalt DarkBox
. Vi vil bruke dette objektet å gjøre skjermen mørkere mens loggen i komponenter blir vist. Sett eksempel navnet på DarkBox objektet til darkBox.

Legg to InputText komponenter, to label komponenter, og en knapp komponent til scenen. Pass på at du ikke legger til disse objektene på toppen av grensesnitt
lag. Plasser komponentene som de er på bildet nedenfor med brukernavnet feltet først deretter passordfeltet.

Sett eksempel navnet på den første lable til userLabel og sette forekomsten navnet på den andre etiketten passLabel. Still forekomstnavnet for første innspill tekstfeltet til usernameTxt og sette forekomstnavnet på andre innspill tekstfeltet til passwordTxt. Sett eksempel navnet på knappen for å loginBtn.

Bruk Tekst
verktøy for å legge til en Dynamic Textfield
til scenen. Angi tekststørrelsen til 18 og gjøre teksten fargen rød. Sett forekomst navn til errorTxt. Posisjon errorTxt under loginBtn som vist nedenfor.

Vi kommer til å konvertere alt på logge
lag til en eneste ny MovieClip symbol som heter innlogging
men før vi kan gjøre dette vi trenger å låse alt på grensesnitt
lag så vi ikke ved et uhell velger et objekt av dette laget. Lås grensesnitt
lag ved å velge Lås Layer
knappen ved siden av laget. Når laget er låst, vil du se et symbol på en lås ved siden av laget.

Du kan nå trygt velge alle objektene på innloggings lag som vi nettopp opprettet, og konvertere valget til et symbol med en kobling av innlogging. Sett forekomst navn til innlogging



Trinn 9:. Opprette Profile Window

Lås og skjule alle de aktuelle lagene på hovedtidslinjen. Lag et nytt lag, og kaller det profil info

Merk:. Dette er bare et lag som vi vil bruke for utvikling. Du kan slette dette laget på slutten av dette trinnet hvis du ønsker det.

Bruke Rektangulære
verktøy, tegne et rektangel med radius på hvert hjørne satt til 10.00. Rektangelet bør ha et fyll identisk med DarkBox objekt (Svart med en transpareny på 50%) Hotell og en helt ugjennomsiktig hvit linje med et slag verdi på 4,00. Jeg setter farge på scenen til en Burnt Orange i bildet nedenfor, slik at du kan se hvordan alt skal se mer tydelig.

Legg til en dynamisk tekst til scenen direkte på toppen av rektangelet. Plasser og endre størrelsen på tekstfeltet, slik at det tar opp mesteparten av rektangelet område, men gir rom for en knapp. Sett eksempel navnet på tekstfeltet til txt. Kontroller at tekstfargen er hvit og størrelsen på teksten er minst 18px.

Legg til en ny knapp komponent på toppen av rektangelet og sette forekomstnavnet til closeBtn.

Velg alt av objektet er på profil info
lag og konvertere dem til et MovieClip symbol heter ProfileWindow. Sjekk feltet Eksporter for Action
slik at dette symbolet har en kobling av ProfileWindow. Nå fjerne ProfileWindow objekt fra scenen. Vi vil bli forekomster dette objektet med kode



Trinn 10:. Vår første Action Kode

Opprett en ny Actionscript-fil og gi den navnet ChatApp.as
. Legg til følgende linjer med kode til klassen
pakke {import flash.display.Sprite.; import flash.events.Event; import flash.events.ErrorEvent; import flash.display.StageScaleMode; import flash.display.StageAlign; import flash.events.TimerEvent; import flash.utils.Timer; import flash.system.Security; import flash.external.ExternalInterface; import org.igniterealtime.xiff.core.XMPPConnection; import org.igniterealtime.xiff.events.ConnectionSuccessEvent; import org.igniterealtime.xiff.events.LoginEvent; import org.igniterealtime.xiff.events.DisconnectionEvent; import org.igniterealtime.xiff.events.XIFFErrorEvent; import org.igniterealtime.xiff.events.RoomEvent; import org.igniterealtime.xiff.events.IncomingDataEvent; import org.igniterealtime.xiff.events.OutgoingDataEvent; public class ChatApp strekker Sprite {private static konst SERVER: String = "tutorial-f5d57edaa"; //= "[vertsnavn] //Din serverens vertsnavn her private static konst PORT: Antall = 5222; //Dine servere offentlig havn her private static konst RESSURS: String = "MyContentSite"; //[ressursnavnet] //Resource navn ex .: == > MyJabberApp private static konst DEFAULT_ROOM: String = "Main Lobby"; privat Var grabben: LoginCredentialsGrabber; private Var Userdata import flash.net.URLLoader; import flash.net.URLRequest; import flash.net.URLLoader; import flash.net.URLRequest; import flash.events.MouseEvent; import flash.events.Event; import flash.ui.Keyboard; komme tilbake; komme tilbake; komme tilbake; return false; gå i stykker; gå i stykker; gå i stykker; gå i stykker; gå i stykker; return false; return true; import flash.events.Event; import flash.events.MouseEvent; import flash.display.DisplayObject; gå i stykker; gå i stykker; gå i stykker; < head > padding: 0; flow: hidden; høyde: 100%; < /head > < body > ? > < /div > < param name = "kvalitet" value = "high" /> < param name = "bgcolor" value = "# ffffff" /> < param name = "allowScriptAccess" value = "samedomain" /> ? > /> < param name = "kvalitet" value = "high" /> < param name = "bgcolor" value = "# ffffff" /> < param name = "allowScriptAccess" value = "samedomain" /> ? > /> < /a > < /object > < /object >