Creazione di un client Jabber per iOS configurazione dell'interfaccia

In questo tutorial costruiremo un client Jabber per iOS. L'applicazione sviluppata in questa serie consentirà agli utenti di accedere, aggiungere amici e inviare messaggi. Questo tutorial si concentrerà sull'impostazione dell'interfaccia utente per il client di chat di esempio.

Panoramica del client iOS

Il nucleo della nostra applicazione Jabber è costruito attorno alle funzionalità XMPP. Conserveremo queste funzionalità nel delegato dell'applicazione principale, che implementerà un protocollo personalizzato per inviare eventi come l'accesso e l'invio di messaggi. L'applicazione che stiamo per costruire si basa su tre viste: login, buddy list e chat.

La buddy list è la vista di default, che viene mostrata all'avvio dell'applicazione. Mostra l'elenco dei compagni online. La vista di accesso apparirà solo se non ci sono credenziali precedentemente memorizzate sul dispositivo. Un pulsante denominato "Account" mostrerà la vista di accesso dall'elenco dei contatti, per abilitare la modifica delle credenziali di accesso quando necessario. La visualizzazione della chat viene visualizzata quando si tocca un amico online per avviare una chat. Costruiremo un controller di visualizzazione per ciascuna di queste viste. I controllori implementeranno un semplice protocollo per ricevere le notifiche inviate dal delegato dell'applicazione. Per semplificare le cose, il login e una vista chat appariranno come controller di visualizzazione modale. Se lo desideri, puoi rielaborare l'applicazione per utilizzare invece un controller di navigazione.

Impostazione del progetto

Apriamo Xcode e iniziamo un nuovo progetto. Sceglieremo un'applicazione basata su una vista semplice e la chiameremo "JabberClient". Per interagire con il server, adotteremo una comoda libreria per iOS che si chiama XMPP framework. Questa libreria è compatibile con entrambe le applicazioni Mac e iOS e ci aiuterà nell'implementazione delle funzionalità di basso livello per connettersi con il server XMPP e gestire gli scambi di messaggi tramite socket. Poiché il repository non presenta alcun collegamento per il download, è necessario aver installato git (vedere qui per maggiori informazioni). Una volta installato git, puoi impartire il seguente comando nella console:

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

Una volta che il download è completato dovremmo finire con una cartella come la seguente:

Abbiamo bisogno solo delle cartelle evidenziate nell'immagine. Una volta selezionati, li trasciniamo sul progetto per includerli. Ricorda semplicemente di selezionare "Copia gli elementi nella cartella del gruppo di destinazione (se necessario)".

Non abbiamo bisogno dell'integrazione con Facebook, quindi nel gruppo "Estensioni" possiamo eliminare la cartella "X-FACEBOOK-PLATFORM".

Ora aggiungiamo i quadri necessari. Selezioniamo il progetto nel navigatore, quindi selezioniamo il target e apriamo "Link Binary With Libraries" come mostrato nella figura.

Dobbiamo aggiungere molti framework come mostrato nella figura seguente:

Infine, per compilare un progetto dobbiamo modificare alcune impostazioni di costruzione. Le modifiche devono essere aggiunte al progetto e al target. Per prima cosa, troviamo i "Percorsi di ricerca delle intestazioni degli utenti" e specifichiamo la libreria necessaria per analizzare xml: '/ usr / include / libxml2'

Quindi selezioniamo "Other Linker Flags" e aggiungiamo il seguente flag: "-lxml2".

Il progetto è ora impostato correttamente e dovresti essere in grado di costruirlo senza errori o avvisi.

Creazione della vista Elenco amici

L'elenco degli amici contiene una vista tabella che mostra un elenco di contatti online. Quando uno viene toccato mostra la corrispondente vista della chat. La procedura guidata del progetto ha già creato un controller di visualizzazione, che verrà rinominato "BuddyListViewController" per motivi di coerenza. Questo controller avrà a UITableView e una matrice per memorizzare i contatti online. Avrà anche un IBAction per mostrare la vista di accesso, nel caso in cui l'utente desideri cambiare account. Inoltre implementerà i delegati della vista tabella. Quindi aggiorniamo il file di implementazione come segue.

 @interface JabberClientViewController: UIViewController  UITableView * tView; NSMutableArray * onlineBuddies;  @property (nonatomic, retain) IBOutlet UITableView * tView; - (IBAction) showLogin; @fine

Nel file di implementazione si sincronizza la proprietà e si aggiungono i metodi standard da gestire
la vista del tavolo.

 @implementation JabberClientViewController @synthesize tView; - (void) viewDidLoad [super viewDidLoad]; self.tView.delegate = self; self.tView.dataSource = self; onlineBuddies = [[NSMutableArray alloc] init];  - (void) showLogin // mostra la vista di accesso #pragma mark - #pragma mark Vista tabella delegati - (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath NSString * s = (NSString * ) [onlineBuddies objectAtIndex: indexPath.row]; static NSString * CellIdentifier = @ "UserCellIdentifier"; UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier: CellIdentifier]; if (cell == nil) cell = [[[UITableViewCell alloc] initWithStyle: UITableViewCellStyleDefault reuseIdentifier: CellIdentifier] autorelease];  cell.textLabel.text = s; cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator; cella di ritorno;  - (NSInteger) tableView: (UITableView *) tableView numberOfRowsInSection: (NSInteger) section return [onlineBuddies count];  - (NSInteger) numberOfSectionsInTableView: (UITableView *) tableView return 1;  - (void) tableView: (UITableView *) tableView didSelectRowAtIndexPath: (NSIndexPath *) indexPath // avvia una chat @end

Il file xib corrispondente avrà una vista tabella e una barra degli strumenti con una voce di pulsante barra come nella seguente figura:

Dovremmo ricordare di collegare la vista tabella e il showLogin azione ai loro punti vendita corrispondenti come mostrato di seguito:

Se eseguiamo l'applicazione dovremmo vedere una tabella vuota come nella seguente schermata:

Possiamo sospendere l'implementazione di questa classe per un po '. Integreremo le funzionalità XMPP quando saranno pronte. Per ora, passiamo al login.

Costruire l'interfaccia utente di accesso

Questa vista viene visualizzata quando l'utente non ha ancora inserito le credenziali di accesso o quando viene toccato il pulsante "Account". È composto da due campi di input e un pulsante. Un'azione aggiuntiva consentirà all'utente di nascondere la vista senza modifiche.

 @interface SMLoginViewController: UIViewController UITextField * loginField; UITextField * passwordField;  @property (nonatomic, retain) IBOutlet UITextField * loginField; @property (nonatomic, retain) IBOutlet UITextField * passwordField; - login (IBAction); - (IBAction) hideLogin; @fine

L'implementazione è piuttosto semplice. Quando l'azione di accesso è attivata, i dati nei campi di testo sono memorizzati NSUserDefaults con due chiavi "userID" e "userPassword". Questi dati verranno utilizzati dal motore XMPP e inviati al server.

 @implementation SMLoginViewController @synthesize loginField, passwordField; - login (IBAction) [[NSUserDefaults standardUserDefaults] setObject: self.loginField.text forKey: @ "userID"]; [[NSUserDefaults standardUserDefaults] setObject: self.passwordField.text forKey: @ "userPassword"]; [[NSUserDefaults standardUserDefaults] synchronize]; [self dismissModalViewControllerAnimated: YES];  - (IBAction) hideLogin [self dismissModalViewControllerAnimated: YES];  @fine

Come sopra ricordiamo di collegare campi di testo e azioni nel file XIB.

Ora possiamo aggiornare il controller BuddyList per mostrare la vista di accesso quando necessario. Importiamo la classe corrispondente e aggiorniamo l'azione come segue.

 - (IBAction) showLogin SMLoginViewController * loginController = [[SMLoginViewController alloc] init]; [auto presenteModalViewController: loginController animato: YES]; 

Implementiamo anche il viewDidAppear funzione in modo che mostri la vista di accesso quando non sono memorizzati dati.

 - (void) viewDidAppear: (BOOL) animato [super viewDidAppear: animato]; NSString * login = [[NSUserDefaults standardUserDefaults] objectForKey: @ "userID"]; se (! login) [self showLogin]; 

Se compiliamo l'applicazione dovremmo vedere che la vista di accesso appare come previsto o quando l'utente tocca il pulsante.

Creazione della vista chat

La vista chat presenta quattro elementi visivi:

• una barra degli strumenti con un pulsante per chiudere la vista
• un campo di testo per digitare i messaggi
• un pulsante per inviare messaggi
• una vista tabella per visualizzare i messaggi inviati e ricevuti

Il file di intestazione è il seguente:

 @interface SMChatViewController: UIViewController UITextField * messageField; NSString * chatWithUser; UITableView * tView; Messaggi NSMutableArray *;  @property (nonatomic, retain) IBOutlet UITextField * messageField; @property (nonatomic, retain) NSString * chatWithUser; @property (nonatomic, retain) IBOutlet UITableView * tView; - (id) initWithUser: (NSString *) userName; - (IBAction) sendMessage; - (IBAction) closeChat; @fine

Come il compagno, questa classe implementa i delegati della tabella. Tiene traccia del ricevuto tramite la variabile stringa chatWithUser e presenta due azioni, closeChat e invia messaggio. L'implementazione corrispondente è la seguente.

 @implementation SMChatViewController @synthesize messageField, chatWithUser, tView; - (void) viewDidLoad [super viewDidLoad]; self.tView.delegate = self; self.tView.dataSource = self; messages = [[NSMutableArray alloc] init]; [self.messageField diventaFirstResponder];  #pragma mark - #pragma mark Actions - (IBAction) closeChat [self dismissModalViewControllerAnimated: YES];  - (IBAction) sendMessage NSString * messageStr = self.messageField.text; if ([messageStr length]> 0) // invia un messaggio tramite XMPP self.messageField.text = @ ""; NSString * m = [NSString stringWithFormat: @ "% @:% @", messageStr, @ "you"]; NSMutableDictionary * m = [[NSMutableDictionary alloc] init]; [m setObject: messageStr forKey: @ "msg"]; [m setObject: @ "you" forKey: @ "sender"]; [messaggi addObject: m]; [self.tView reloadData]; [m release];  #pragma mark - #pragma mark Delegati della vista tabella - (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath NSDictionary * s = (NSDictionary *) [messages objectAtIndex: indexPath.row]; static NSString * CellIdentifier = @ "MessageCellIdentifier"; UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier: CellIdentifier]; if (cell == nil) cell = [[[UITableViewCell alloc] initWithStyle: UITableViewCellStyleSubtitle reuseIdentifier: CellIdentifier] autorelease];  cell.textLabel.text = [s objectForKey: @ "msg"]; cell.detailTextLabel.text = [s objectForKey: @ "sender"]; cell.accessoryType = UITableViewCellAccessoryNone; cell.userInteractionEnabled = NO; cella di ritorno;  - (NSInteger) tableView: (UITableView *) tableView numberOfRowsInSection: (NSInteger) section return [conta dei messaggi];  - (NSInteger) numberOfSectionsInTableView: (UITableView *) tableView return 1;  #pragma mark - #pragma mark I delegati della chat // reagiscono al messaggio ricevuto - (void) dealloc [messageField dealloc]; [chatWithUser dealloc]; [tView dealloc]; [super dealloc]; 

Quando la vista è caricata, mostriamo la tastiera. La parte del tavolo è molto simile alla vista del compagno. Qui usiamo un tipo leggermente diverso di cella di tabella per visualizzare sia il messaggio che il nome. Di seguito è riportato il risultato previsto quando l'applicazione è pronta:

Dovremmo ricordare di connettere il IBAction proprietà con i pulsanti corrispondenti come al solito.

La parte visiva dell'applicazione è pronta! Ora ci rimane la funzionalità di base della messaggistica, che sarà trattata nella parte successiva di questa serie!

Codice sorgente

Il codice sorgente completo per questo progetto può essere trovato su GitHub qui.