Een Jabber Client voor iOS bouwen interface-instellingen

In deze tutorial zullen we een Jabber Client voor iOS bouwen. De applicatie die in deze serie is ontwikkeld, stelt gebruikers in staat om in te loggen, vrienden toe te voegen en berichten te verzenden. Deze tutorial zal zich richten op het instellen van de gebruikersinterface voor de samplechat-client.

Overzicht van de iOS-client

De kern van onze Jabber-applicatie is gebaseerd op de XMPP-mogelijkheden. We slaan deze functies op in de hoofdtoepassingsdelegator, die een aangepast protocol zal implementeren om gebeurtenissen zoals inloggen en het verzenden van berichten te verzenden. De applicatie die we gaan bouwen is gebaseerd op drie views: login, buddy list en chat.

De vriendenlijst is de standaardweergave die wordt weergegeven wanneer de toepassing wordt opgestart. Het toont de lijst met online vrienden. De aanmeldingsweergave wordt alleen weergegeven als er geen eerder opgeslagen gegevens op het apparaat staan. Een knop met de naam "Account" geeft de login-weergave weer vanuit de buddy-lijst, zodat het mogelijk is om inloggegevens te wijzigen wanneer dat nodig is. De chatweergave wordt weergegeven wanneer een online buddy wordt afgeluisterd om een chatsessie te starten. We bouwen een view controller voor elk van deze views. Controllers zullen een eenvoudig protocol implementeren om meldingen te ontvangen die zijn verzonden door de toepassingsdeelnemer. Om het eenvoudig te houden, verschijnen login en een chatweergave als een modale weergavecontroller. Als je wilt, kun je de applicatie herwerken om in plaats daarvan een navigatiecontroller te gebruiken.

Project Setup

Laten we Xcode openen en een nieuw project starten. We kiezen een eenvoudige, op view gebaseerde applicatie en we noemen het 'JabberClient'. Om interactie met de server te hebben, zullen we een handige bibliotheek voor iOS adopteren die XMPP-framework wordt genoemd. Deze bibliotheek is compatibel met zowel Mac- als iOS-applicaties en zal ons helpen bij het implementeren van de low-level functionaliteiten om verbinding te maken met de XMPP-server en om berichtenuitwisselingen via sockets te beheren. Omdat de repository geen downloadkoppeling bevat, moet git zijn geïnstalleerd (zie hier voor meer informatie). Nadat je git hebt geïnstalleerd, kun je de volgende opdracht in de console uitvoeren:

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

Zodra de download is voltooid, moeten we eindigen met een map zoals de volgende:

We hebben alleen de mappen nodig die in de afbeelding zijn gemarkeerd. Na selectie slepen we ze over het project om ze op te nemen. Vergeet niet om "Items in de map van de bestemmingsgroep te kopiëren (indien nodig)" aan te vinken.

We hebben de integratie met Facebook niet nodig, dus in de groep "Extensies" kunnen we de map "X-FACEBOOK-PLATFORM" verwijderen.

Laten we nu de benodigde kaders toevoegen. We selecteren het project in de navigator, dan selecteren we het doel en openen we "Link Binary With Libraries" zoals getoond in de figuur.

We moeten veel raamwerk toevoegen zoals in de volgende afbeelding:

Om een project samen te stellen, moeten we ten slotte enkele build-instellingen aanpassen. Wijzigingen moeten worden toegevoegd aan zowel het project als het doel. Eerst zoeken we de "Gebruikerskop zoekpaden" en we specificeren de bibliotheek die nodig is om XML te parsen: '/ usr / include / libxml2'

Vervolgens selecteren we "Andere linkervlaggen" en voegen we de volgende vlag toe: "-lxml2".

Het project is nu correct ingesteld en je zou het moeten kunnen bouwen zonder fouten of waarschuwingen.

De buddylijstweergave maken

De vriendenlijst bevat een tabelweergave met een lijst met online contacten. Wanneer er op wordt getikt, wordt de bijbehorende chatweergave weergegeven. De projectwizard heeft al een view-controller gemaakt, die we omwille van de consistentie "BuddyListViewController" zullen noemen. Deze controller heeft een UITableView en een array om online contacten op te slaan. Het heeft ook een IBAction om de login-weergave te tonen, voor het geval de gebruiker van account wil veranderen. Bovendien zal het deelnemers aan de tabelweergave implementeren. Dus we werken het implementatiebestand als volgt bij.

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

In het implementatiebestand synchroniseren we de property en voegen we de standaardmethoden toe om te beheren
de tafelweergave.

 @implementation JabberClientViewController @synthetiseren tView; - (void) viewDidLoad [super viewDidLoad]; self.tView.delegate = self; self.tView.dataSource = self; onlineBuddies = [[NSMutableArray alloc] init];  - (void) showLogin // showlogin weergeven #pragma markeren - #pragma markeren Tabelweergave afgevaardigden - (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; terugkeer cel;  - (NSInteger) tableView: (UITableView *) tableView numberOfRowsInSection: (NSInteger) section return [onlineBuddies count];  - (NSInteger) numberOfSectionsInTableView: (UITableView *) tableView return 1;  - (void) tableView: (UITableView *) tableView didSelectRowAtIndexPath: (NSIndexPath *) indexPath // start een chat @end

Het bijbehorende xib-bestand heeft een tabelweergave en een werkbalk met een balknop-item zoals in de volgende afbeelding:

We moeten niet vergeten om de tabelweergave en de te koppelen showLogin actie naar hun overeenkomstige verkooppunten, zoals hieronder getoond:

Als we de toepassing uitvoeren, zien we een lege tabel zoals in de volgende schermafbeelding:

We kunnen de implementatie van deze klasse een tijdje opschorten. We zullen de XMPP-functies integreren wanneer deze gereed zijn. Laten we voorlopig naar de login gaan.

De aanmeldingsgebruikersinterface bouwen

Deze weergave wordt weergegeven wanneer de gebruiker nog geen aanmeldingsreferenties heeft ingevoerd of wanneer op de knop 'Account' is getikt. Het is gemaakt van twee invoervelden en een knop. Een extra actie stelt de gebruiker in staat om de weergave zonder wijzigingen te verbergen.

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

De implementatie is vrij eenvoudig. Wanneer de inlogactie wordt geactiveerd, worden de gegevens in de tekstvelden opgeslagen NSUserDefaults met twee toetsen "userID" en "userPassword". Deze gegevens worden gebruikt door de XMPP-engine en naar de server verzonden.

 @implementation SMLoginViewController @slogize loginField, passwordField; - (IBAction) login [[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];  @end

Zoals hierboven zouden we moeten onthouden om tekstvelden en acties in het XIB-bestand te linken.

Nu kunnen we de BuddyList-controller bijwerken om de aanmeldingsweergave te tonen wanneer dat nodig is. We importeren de bijbehorende klasse en we werken de actie als volgt bij.

 - (IBAction) showLogin SMLoginViewController * loginController = [[SMLoginViewController alloc] init]; [self presentModalViewController: loginController animated: YES];

We implementeren ook de viewDidAppear functie zodat het de inlogweergave toont als er geen gegevens zijn opgeslagen.

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

Als we de toepassing compileren, moeten we zien dat de aanmeldingsweergave wordt weergegeven zoals verwacht of wanneer de gebruiker op de knop tikt.

De chatweergave maken

De chatweergave heeft vier visuele elementen:

een werkbalk met een knop om de weergave te sluiten
een tekstveld om berichten in te typen
een knop om berichten te verzenden
een tabelweergave om verzonden en ontvangen berichten weer te geven

Het header-bestand is het volgende:

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

Net als de buddy-weergave worden in deze klasse tabelafgevaardigden geïmplementeerd. Het houdt het ontvangen bij door middel van de stringvariabele chatWithUser en beschikt over twee acties, closeChat en bericht versturen. De bijbehorende implementatie is de volgende.

 @implementation SMChatViewController @synthesize messageField, chatWithUser, tView; - (void) viewDidLoad [super viewDidLoad]; self.tView.delegate = self; self.tView.dataSource = self; berichten = [[NSMutableArray alloc] init]; [self.messageField becomeFirstResponder];  #pragma mark - #pragma mark Acties - (IBAction) closeChat [self dismissModalViewControllerAnimated: YES];  - (IBAction) sendMessage NSString * messageStr = self.messageField.text; if ([messageStr length]> 0) // verzend bericht 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: @ "afzender"]; [berichten addObject: m]; [self.tView reloadData]; [m release];  #pragma mark - #pragma mark Tabel view delegates - (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath NSDictionary * s = (NSDictionary *) [berichten objectAtIndex: indexPath.row]; static NSString * CellIdentifier = @ "MessageCellIdentifier"; UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier: CellIdentifier]; if (cell == nil) cell = [[[UITableViewCell alloc] initWithStyle: UITableViewCellStyleSubtitle heruseIdentifier: CellIdentifier] autorelease];  cell.textLabel.text = [s objectForKey: @ "msg"]; cell.detailTextLabel.text = [s objectForKey: @ "afzender"]; cell.accessoryType = UITableViewCellAccessoryNone; cell.userInteractionEnabled = NO; terugkeer cel;  - (NSInteger) tableView: (UITableView *) tableView numberOfRowsInSection: (NSInteger) sectie return [aantal berichten];  - (NSInteger) numberOfSectionsInTableView: (UITableView *) tableView return 1;  # pragma mark - #pragma mark Chat afgevaardigden // reageren op het ontvangen bericht - (void) dealloc [messageField dealloc]; [chatWithUser dealloc]; [tView dealloc]; [super dealloc];

Wanneer het beeld is geladen, tonen we het toetsenbord. Het tafeldeel lijkt veel op de buddy-weergave. Hier gebruiken we een iets ander type tabelcel om zowel het bericht als de naam weer te geven. Hieronder staat het beoogde resultaat wanneer de applicatie gereed is:

We zouden moeten onthouden om de IBAction eigenschappen met de overeenkomstige knoppen zoals gebruikelijk.

Het visuele deel van de out-applicatie is klaar! Nu blijven we over tot de kernfunctionaliteit van berichtenuitwisseling, en dat komt aan bod in het volgende deel van deze serie!

Broncode

De volledige broncode voor dit project is hier te vinden op GitHub.

Code