Construirea unui client Jabber pentru iOS Configurarea interfeței

În acest tutorial vom construi un client Jabber pentru iOS. Aplicația dezvoltată în această serie va permite utilizatorilor să se conecteze, să adauge prieteni și să trimită mesaje. Acest tutorial se va concentra pe configurarea interfeței cu utilizatorul pentru exemplul client de chat.

Prezentare generală a clientului iOS

Miezul aplicației noastre Jabber este construit în jurul capabilităților XMPP. Vom păstra aceste funcționalități în principalul delegat al aplicației, care va implementa un protocol personalizat pentru a trimite evenimente cum ar fi autentificarea și trimiterea de mesaje. Aplicația pe care o vom construi se bazează în jurul a trei viziuni: login, lista de prieteni și chat.

Lista de prieteni este afișarea implicită, care este afișată la pornirea aplicației. Aceasta arată lista prietenilor online. Vizualizarea de autentificare va apărea numai dacă nu există acreditări stocate anterior pe dispozitiv. Un buton numit "Cont" va afișa vizualizarea de autentificare din lista de prieteni, pentru a permite schimbarea acreditărilor de autentificare atunci când este necesar. Ecranul de chat este afișat când un prieten amuzat online, pentru a iniția un chat. Vom construi un controler de vizualizare pentru fiecare dintre aceste vederi. Controlorii vor implementa un protocol simplu pentru a primi notificările expediate de delegatul aplicației. Pentru a păstra lucrurile simple, conectarea și o vizualizare de chat vor apărea ca controler modem. Dacă doriți, puteți modifica aplicația pentru a utiliza în schimb un controler de navigare.

Setarea proiectului

Să deschidem Xcode și să începem un nou proiect. Vom alege o aplicație bazată pe vizualizare simplă și o vom numi "JabberClient". Pentru a interacționa cu serverul, vom adopta o bibliotecă la îndemână pentru iOS, numită cadrul XMPP. Această bibliotecă este compatibilă cu aplicațiile Mac și iOS și ne va ajuta să implementăm funcționalitățile de nivel scăzut pentru a vă conecta cu serverul XMPP și pentru a gestiona schimburile de mesaje prin prize. Deoarece depozitul nu conține niciun link de descărcare, trebuie să aveți instalat git (pentru mai multe informații, consultați aici). Odată ce ați instalat git, puteți emite următoarea comandă în consola:

git clone https://code.google.com/p/xmppframework/ xmppframework

După terminarea descărcării, ar trebui să ajungem la un dosar precum:

Avem nevoie doar de folderele evidențiate în imagine. După ce le-am selectat, le tragem peste proiect pentru a le include. Nu uitați să bifați opțiunea "Copiați articolele în dosarul grupului de destinație (dacă este necesar)".

Nu avem nevoie de integrarea cu Facebook, așa că în grupul "Extensii" putem șterge dosarul "X-FACEBOOK-PLATFORM".

Acum, să adăugăm cadrele necesare. Selectăm proiectul din navigator, apoi selectăm ținta și deschidem "Link Binary with Libraries" așa cum se arată în figură.

Trebuie să adăugăm o mulțime de cadre, după cum se arată în figura următoare:

În cele din urmă, pentru a compila un proiect, trebuie să optimizăm unele setări de construire. Modificările trebuie adăugate atât la proiect, cât și la țintă. În primul rând, găsim Căile de căutare pentru antetul utilizatorului și specificăm biblioteca necesară pentru a analiza xml: '/ usr / include / libxml2'

Apoi selectăm "Alte legături Linker" și adăugăm următorul drapel: "-lxml2".

Proiectul este acum setat corect și ar trebui să îl puteți construi fără erori sau avertismente.

Crearea vizualizării listei de prieteni

Lista de prieteni include un tabel care prezintă o listă de contacte online. Când se atinge unul, se afișează vizualizarea de chat corespunzătoare. Expertul pentru proiect a creat deja un controler de vizualizare, pe care îl vom redenumi "BuddyListViewController" pentru o coerență. Acest controler va avea a UITableView și o matrice pentru stocarea contactelor online. De asemenea, va avea un IBAction pentru a afișa vizualizarea de conectare, în cazul în care utilizatorul dorește să schimbe contul. În plus, va implementa delegați de vizualizare a tabelei. Așadar, actualizăm fișierul de implementare după cum urmează.

 @ interfață JabberClientViewController: UIViewController  UITableView * tView; NSMutableArray * onlineBuddies;  @property (nonatomic, reține) IBOutlet UITableView * tView; - (IBAction) aratăLogin; @Sfârșit

În fișierul de implementare vom sintetiza proprietatea și vom adăuga metodele standard de gestionat
vizualizarea tabelului.

 @implementation JabberClientViewController @synthesize tView; - (vid) viewDidLoad [super viewDidLoad]; self.tView.delegate = auto; self.tView.dataSource = auto; onlineBuddies = [[NSMutableArray aloca] init];  - (void) showLogin // afișați vizualizarea de conectare #pragma marcaje - #pragma marcați delegați tabelă - (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath NSString * s = ) [onlineBuddies obiectAtIndex: indexPath.row]; statică NSString * CellIdentifier = @ "UserCellIdentifier"; UITableViewCell * celula = [tableView dequeueReusableCellWithIdentifier: CellIdentifier]; dacă (celula == zero) cell = [[[UITableViewCell alocare] initWithStyle: UITableViewCellStyleDefault reuseIdentifier: CellIdentifier] autorelease];  cell.textLabel.text = s; cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator; celule retur;  - (NSInteger) tableView: (UITableView *) tableView numberOfRowsInSection: (NSInteger) secțiunea return [onlineBuddies count];  - (NSInteger) numberOfSectionsInTableView: (UITableView *) tableView retur 1;  - (void) tableView: (UITableView *) tableView didSelectRowAtIndexPath: (NSIndexPath *) indexPath // începe o conversație @end

Fișierul xib corespunzător va avea o vizualizare de tabelă și o bară de instrumente cu element buton de bare ca în figura următoare:

Ar trebui să ne amintim să legăm vizualizarea tabelului și showLogin acțiune la punctele lor de distribuție corespunzătoare, după cum se arată mai jos:

Dacă rulați aplicația, ar trebui să vedem o masă goală ca în următoarea captură de ecran:

Putem suspenda implementarea acestei clase pentru o vreme. Vom integra funcțiile XMPP când este gata. Pentru moment, să trecem la login.

Crearea interfeței utilizator de conectare

Această vizualizare se afișează atunci când utilizatorul nu a introdus încă acreditări de conectare sau când este apăsat butonul "Cont". Se compune din două câmpuri de introducere și un buton. O acțiune suplimentară va permite utilizatorului să ascundă vizualizarea fără modificări.

 @interface SMLoginViewController: UIViewController UITextField * loginField; UITextField * passwordField;  @property (nonatomic, reține) IBOutlet UITextField * loginField; @property (nonatomic, reține) IBOutlet UITextField * passwordField; - (IBAction) autentificare; - (IBAction) hideLogin; @Sfârșit

Implementarea este destul de simplă. Când se declanșează acțiunea de autentificare, datele din câmpurile de text sunt stocate în NSUSerDefaults cu două chei "userID" și "userPassword". Aceste date vor fi utilizate de către motorul XMPP și trimise la server.

 @implementation SMLoginViewController @synthesize loginField, passwordField; - (IBAction) autentificare [[NSUserDefaults standardUserDefaults] setObject: self.loginField.text pentruKey: @ "userID"]; [[NSUserDefaults standardUserDefaults] setObject: self.passwordField.text pentruKey: @ "userPassword"]; [[NSUserDefaults standardUserDefaults] sincronizați]; [self dismissModalViewControllerAnimated: YES];  - (IBAction) ascundeLogin [self dismissModalViewControllerAnimated: YES];  @Sfârșit

Așa cum am arătat mai sus, ar trebui să ne amintim legarea câmpurilor de text și a acțiunilor din fișierul XIB.

Acum putem actualiza controlerul BuddyList pentru a afișa vizualizarea de autentificare când este necesar. Importim clasa corespunzătoare și actualizăm acțiunea după cum urmează.

 - (IBAction) aratăLogin SMLoginViewController * loginController = [[SMLoginViewController alloc] init]; [auto prezentModalViewController: loginController animat: DA]; 

Implementăm de asemenea viewDidAppear pentru a afișa vizualizarea de autentificare atunci când nu sunt stocate date.

 - (vid) viewDidAppear: (BOOL) animat [super viewDidAppear: animat]; NSString * autentificare = [[NSUserDefaults standardUserDefaults] objectForKey: @ "userID"]; dacă (! login) [self showLogin]; 

Dacă compilam aplicația, ar trebui să vedem că vizualizarea de conectare apare așa cum era de așteptat sau când utilizatorul pune pe buton butonul.

Crearea vizualizării de chat

Ecranul de chat include patru elemente vizuale:

• o bară de instrumente cu un buton pentru a închide vizualizarea
• un câmp de text pentru introducerea mesajelor
• un buton pentru a trimite mesaje
• o vizualizare de tabel pentru a afișa mesajele trimise și primite

Fișierul antet este următorul:

 @interface SMChatViewController: UIViewController UITextField * messageField; NSString * chatWithUser; UITableView * tView; Mesaje NSMutableArray *;  @property (nonatomic, reține) IBOutlet UITextField * messageField; @property (nonatomic, reține) NSString * chatWithUser; @property (nonatomic, reține) IBOutlet UITableView * tView; - (id) initWithUser: (NSString *) userName; - (IBAction) sendMessage; - (IBAction) closeChat; @Sfârșit

La fel ca vizualizarea amicului, această clasă implementează delegați de tabel. Acesta ține evidența datelor primite cu ajutorul variabilei șir chatWithUser și are două acțiuni, closeChat și Trimite mesaj. Implementarea corespunzătoare este următoarea.

 @implementation SMChatViewController @synthesize messageField, chatWithUser, tView; - (vid) viewDidLoad [super viewDidLoad]; self.tView.delegate = auto; self.tView.dataSource = auto; mesaje = [[NSMutableArray aloca] init]; [auto.messageField become FirstResponder];  #pragma marca - #pragma marca Acțiuni - (IBAction) closeChat [self dismissModalViewControllerAnimated: YES];  - (IBAction) sendMessage NSString * messageStr = auto.messageField.text; dacă [lungimea mesajuluiStr]> 0) // trimite mesajul prin XMPP self.messageField.text = @ ""; NSString * m = [NSString șirWithFormat: @ "% @:% @", messageStr, @ "tu"]; NSMutableDictionary * m = [[NSMutableDictionary alloc] init]; [m setObject: messageStr pentruKey: @ "msg"]; [m setObject: @ "tu" pentruKey: @ "expeditor"]; [mesaje addObject: m]; [self.tView reloadData]; [eliberare m];  #pragma marcaje - #pragma marcați delegați tabelă - (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath NSDictionary * s = (NSDictionary *) [mesaje objectAtIndex: indexPath.row]; statică NSString * CellIdentifier = @ "MessageCellIdentifier"; UITableViewCell * celula = [tableView dequeueReusableCellWithIdentifier: CellIdentifier]; dacă (celula == zero) cell = [[[UITableViewCell alocare] initWithStyle: UITableViewCellStyleSubtitle reuseIdentifier: CellIdentifier] autorelease];  cell.textLabel.text = [s obiectForKey: @ "msg"]; cell.detailTextLabel.text = [s obiectForKey: @ "expeditor"]; cell.accessoryType = UITableViewCellAccessoryNone; cell.userInteractionEnabled = NU; celule retur;  - (NSInteger) tableView: (UITableView *) tableView numberOfRowsInSection: (NSInteger) sectiunea return [numar mesaje];  - (NSInteger) numberOfSectionsInTableView: (UITableView *) tableView retur 1;  #pragma mark - #pragma mark Delegați de chat // reacționează la mesajul primit - (void) dealloc [messageField dealloc]; [chatWithUser dealloc]; [tView dealloc]; [super dealloc]; 

Când vizualizarea a fost încărcată, afișăm tastatura. Partea de masă este destul de similară cu cea a prietenului. Aici folosim un tip diferit de celulă de tabel pentru a afișa atât mesajul, cât și numele. Mai jos este rezultatul dorit cand aplicatia este gata:

Ar trebui să ne amintim să conectați IBAction cu butoanele corespunzătoare ca de obicei.

Partea vizuală a aplicației este gata! Acum, am rămas cu funcționalitatea de bază a mesageriei, și aceasta va fi acoperită în următoarea parte a acestei serii!

Cod sursa

Codul sursă complet pentru acest proiect poate fi găsit pe GitHub aici.