Dans ce tutoriel, nous allons construire un client Jabber pour iOS. L’application développée dans cette série permettra aux utilisateurs de se connecter, d’ajouter des amis et d’envoyer des messages. Ce tutoriel se concentrera sur la configuration de l'interface utilisateur pour l'exemple de client de discussion..
Vue d'ensemble du client iOS
Le cœur de notre application Jabber est construit autour des capacités XMPP. Nous allons stocker ces fonctionnalités dans le délégué principal de l'application, qui implémentera un protocole personnalisé pour la distribution d'événements tels que la connexion et l'envoi de messages. L’application que nous allons construire repose sur trois vues: connexion, liste de contacts et discussion.
La liste de contacts est la vue par défaut, qui s'affiche au démarrage de l'application. Il montre la liste des copains en ligne. La vue de connexion n'apparaîtra que si aucune information d'identification n'a précédemment été stockée sur le périphérique. Un bouton nommé "Compte" affiche la vue de connexion de la liste d'amis pour permettre de modifier les informations de connexion en cas de besoin. La vue de discussion apparaît lorsqu'un partenaire en ligne est engagé pour lancer une discussion. Nous allons construire un contrôleur de vue pour chacune de ces vues. Les contrôleurs mettront en œuvre un protocole simple pour recevoir les notifications envoyées par le délégué de l'application. Pour que les choses restent simples, la connexion et une vue de discussion apparaîtront en tant que contrôleur de vue modale. Si vous le souhaitez, vous pouvez retravailler l'application pour utiliser plutôt un contrôleur de navigation..
Configuration du projet
Ouvrons Xcode et démarrons un nouveau projet. Nous choisirons une application basée sur une vue simple et nous l'appellerons "JabberClient". Pour interagir avec le serveur, nous adopterons une bibliothèque pratique pour iOS, appelée structure XMPP. Cette bibliothèque est compatible avec les applications Mac et iOS et nous aidera à implémenter les fonctionnalités de bas niveau pour se connecter au serveur XMPP et gérer les échanges de messages via des sockets. Comme le dépôt ne contient aucun lien de téléchargement, vous devez avoir installé git (voir ici pour plus d’informations). Une fois que vous avez installé git, vous pouvez lancer la commande suivante dans la console:
Une fois le téléchargement terminé, vous devriez vous retrouver avec un dossier du type suivant:
Nous n'avons besoin que des dossiers surlignés dans l'image. Une fois sélectionnés, nous les faisons glisser sur le projet pour les inclure. Rappelez-vous simplement de cocher "Copier les éléments dans le dossier du groupe de destination (si nécessaire)".
Nous n'avons pas besoin de l'intégration avec Facebook, donc dans le groupe "Extensions", nous pouvons supprimer le dossier "X-FACEBOOK-PLATFORM".
Ajoutons maintenant les cadres nécessaires. Nous sélectionnons le projet dans le navigateur, puis nous sélectionnons la cible et ouvrons "Link Binary With Libraries" comme indiqué dans la figure..
Nous devons ajouter beaucoup de framework comme indiqué dans la figure suivante:
Enfin, pour compiler un projet, nous devons ajuster certains paramètres de construction. Les modifications doivent être ajoutées à la fois au projet et à la cible. Premièrement, nous trouvons les "chemins de recherche des en-têtes d'utilisateur" et nous spécifions la bibliothèque nécessaire pour analyser xml: '/ usr / include / libxml2'
Ensuite, nous sélectionnons "Autres drapeaux de l'éditeur de liens" et ajoutons l'indicateur suivant: "-lxml2".
Le projet est maintenant correctement configuré et vous devriez pouvoir le construire sans erreurs ni avertissements..
Création de la vue liste d'amis
La liste de contacts contient une vue sous forme de tableau contenant une liste de contacts en ligne. Quand on est tapé, il affiche la vue de discussion correspondante. L'assistant de projet a déjà créé un contrôleur de vue, que nous renommerons "BuddyListViewController" pour des raisons de cohérence. Ce contrôleur aura un UITableView et un tableau pour stocker des contacts en ligne. Il aura aussi un IBAction pour afficher la vue de connexion, au cas où l'utilisateur souhaite changer de compte. De plus, il implémentera des délégués de vue de table. Nous mettons donc à jour le fichier d'implémentation comme suit.
Le fichier xib correspondant aura une vue sous forme de tableau et une barre d'outils avec un élément de bouton de barre comme dans la figure suivante:
Nous devrions nous rappeler de lier la vue de la table et la showLogin action à leurs points de vente correspondants, comme indiqué ci-dessous:
Si nous exécutons l'application, nous devrions voir une table vide comme dans la capture d'écran suivante:
Nous pouvons suspendre la mise en œuvre de cette classe pendant un certain temps. Nous intégrerons les fonctionnalités XMPP lorsque vous serez prêt. Pour l'instant, passons à la connexion.
Construire l'interface utilisateur de connexion
Cette vue apparaît lorsque l'utilisateur n'a pas encore saisi ses identifiants de connexion ou lorsque le bouton "Compte" est activé. Il est composé de deux champs de saisie et d'un bouton. Une action supplémentaire permettra à l'utilisateur de masquer la vue sans modification..
La mise en œuvre est assez simple. Lorsque l'action de connexion est déclenchée, les données des champs de texte sont stockées dans NSUSerDefaults avec deux clés "userID" et "userPassword". Ces données seront utilisées par le moteur XMPP et envoyées au serveur..
Comme ci-dessus, nous devrions nous rappeler de lier les champs de texte et les actions dans le fichier XIB..
Nous pouvons maintenant mettre à jour le contrôleur BuddyList pour afficher la vue de connexion si nécessaire. Nous importons la classe correspondante et mettons à jour l'action comme suit.
Comme la vue d'amis, cette classe implémente les délégués de table. Il garde une trace de la réception au moyen de la variable chaîne chatAvecUtilisateur et comporte deux actions, fermerChat et envoyer le message. L'implémentation correspondante est la suivante.
@implementation SMChatViewController @synthesize messageField, chatWithUser, tView; - (void) viewDidLoad [super viewDidLoad]; self.tView.delegate = self; self.tView.dataSource = self; messages = [[NSMutableArray alloc] init]; [self.messageField devient le premier répondeur]; #pragma mark - #pragma mark Actions - (IBAction) closeChat [auto-licenciementModalViewControllerAnimated: YES]; - (IBAction) sendMessage NSString * messageStr = self.messageField.text; if ([messageStr length]> 0) // envoyer un message via 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"]; [messages addObject: m]; [self.tView reloadData]; [m release]; #pragma mark - #pragma mark Délégués de la vue table - (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath NSDictionary * s = (NSDictionary *) [messages objectAtIndex: indexPath. 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: @ "expéditeur"]; cell.accessoryType = UITableViewCellAccessoryNone; cell.userInteractionEnabled = NO; cellule de retour; - (NSInteger) tableView: (UITableView *) tableView numberOfRowsInSection: (NSInteger) section return [nombre de messages]; - (NSInteger) numberOfSectionsInTableView: (UITableView *) tableView return 1; #pragma mark - #pragma mark Les délégués de chat // réagissent au message reçu - (void) dealloc [messageField dealloc]; [chatWithUser dealloc]; [tView dealloc]; [super dealloc];
Lorsque la vue est chargée, nous montrons le clavier. La partie table est assez similaire à la vue copain. Ici, nous utilisons un type de cellule de tableau légèrement différent pour afficher à la fois le message et le nom. Voici le résultat souhaité lorsque l'application est prête:
Nous devrions nous rappeler de connecter le IBAction propriétés avec les boutons correspondants comme d'habitude.
La partie visuelle de notre application est prête! Nous nous retrouvons maintenant avec les fonctionnalités de base de la messagerie, qui seront abordées dans la prochaine partie de cette série.!
Code source
Le code source complet de ce projet est disponible sur GitHub ici.
Share
Accentsconagua
