Share
Dans cette série, nous construisons un client Twitter pour la plate-forme Android à l'aide de la bibliothèque Twitter4J. Dans ce tutoriel, nous allons préparer les éléments de notre interface utilisateur pour l'application et gérer la connexion de l'utilisateur à Twitter pour lui permettre d'accéder à son compte..
Avant de pouvoir accéder au compte Twitter de l'utilisateur, nous avons besoin de leur connexion et de l'autorisation de l'application. Ouvrez la classe d'activité principale de votre application et créez-la maintenant si Eclipse ne l'a pas générée automatiquement au démarrage du projet. Modifiez la ligne d’ouverture de votre déclaration de classe comme suit et modifiez le nom de la classe selon vos besoins, si nécessaire:
Classe publique TwitNiceActivity, Activity implémente OnClickListener
OnClickListener détectera divers clics de bouton. Vous aurez besoin des instructions d'importation suivantes ajoutées au-dessus de votre déclaration de classe, bien qu'Eclipse en ait peut-être ajouté automatiquement:
importer android.app.Activity; importer android.os.Bundle; importer android.view.View.OnClickListener;
Dans la classe, ajoutez les variables d'instance suivantes:
/ ** clé de compte développeur pour cette application * / public final static String TWIT_KEY = "votre clé"; / ** secret du développeur pour l'application * / public final static String TWIT_SECRET = "votre secret"; / ** URL de l'application * / public final static String TWIT_URL = "tnice-android: ///";
Modifiez les variables Key et Secret pour stocker les valeurs que vous avez copiées à partir de votre compte Twitter Developer la dernière fois. Notez que l'URL est une version étendue de l'élément de données que nous avons ajouté au manifeste, assurez-vous de le modifier si vous avez utilisé une valeur différente à cet endroit. Ajoutez les variables d'instance supplémentaires suivantes pour la connexion à Twitter:
/ ** instance Twitter * / private Twitter niceTwitter; / ** jeton de demande d'accès au compte d'utilisateur * / private RequestToken niceRequestToken; / ** préférences partagées pour stocker les détails de l'utilisateur * / private SharedPreferences nicePrefs; // pour la journalisation des erreurs private String LOG_TAG = "TwitNiceActivity"; // alternez pour votre nom d'activité
Lorsque l'utilisateur accorde l'autorisation, nous ajoutons les données résultantes aux préférences partagées. Chaque fois que l'application s'exécutera, elle vérifiera si ces détails ont été définis. Si tel est le cas, il les utilisera pour extraire immédiatement la timeline de l'utilisateur. Si les détails n'ont pas été définis, l'utilisateur sera invité à se connecter et à accorder l'autorisation. Vous aurez besoin des déclarations d'importation suivantes:
importer twitter4j.Twitter; importer twitter4j.auth.RequestToken; importer android.content.SharedPreferences;
Dans la méthode Activity onCreate, après l'appel de la méthode superclass, ajoutez le code suivant:
Accentsconagua
// récupère les préférences pour l'application nicePrefs = getSharedPreferences ("TwitNicePrefs", 0); // recherche si les préférences de l'utilisateur sont définies si (nicePrefs.getString ("user_token", null) == null) // aucune préférence de l'utilisateur ne vous invite à vous connecter setContentView (R.layout.main); else // les préférences utilisateur sont définies - récupère la chronologie setupTimeline (); Nous obtenons ici une référence à l'objet Préférences partagées de l'application pour établir si l'utilisateur a déjà accordé ou non l'autorisation à l'application. La chaîne de préférences "user_token" va stocker le jeton d'accès que nous utilisons pour accéder à Twitter. Par conséquent, s'il a déjà été défini, nous savons que l'utilisateur a déjà ouvert une session pour l'application. Si les préférences n'ont pas été définies, nous devons inviter l'utilisateur à se connecter à Twitter, ce que nous ferons dans la déclaration "if". Pour le moment, nous définissons simplement la vue principale du contenu..
Dans le bloc "else", nous nous occupons des utilisateurs qui se sont déjà connectés et ont autorisé l'application. Nous appelons ici une méthode d'assistance nommée "setupTimeline" que nous implémenterons dans le prochain tutoriel..
Créons notre mise en page principale, que nous avons définie dans l'instruction "if". Normalement, Eclipse crée automatiquement un fichier dans "res / layout / main.xml". Sinon, vous pouvez le créer vous-même en cliquant avec le bouton droit de la souris sur le dossier de présentation dans l'Explorateur de packages (ou en le sélectionnant puis en choisissant le menu Fichier), puis en choisissant " Nouveau "et" Fichier ". Ouvrez le fichier de présentation principal et entrez le code XML suivant:
C'est un LinearLayout avec deux champs de texte et un bouton. Les champs de texte sont simplement informatifs, tandis que le bouton amène l'utilisateur à la page Web de connexion Twitter. Le bouton a un attribut ID afin que nous puissions l'identifier dans le code Java.
Revenons maintenant à notre méthode onCreate pour l'application principale. Activité permettant d'implémenter la signature des nouveaux utilisateurs. Vous aurez besoin de l'importation suivante:
importer android.util.Log;
Dans le bloc "if", après la ligne dans laquelle nous définissons la vue principale du contenu, ajoutez les éléments suivants:
// récupère une instance twitter pour l'authentification niceTwitter = new TwitterFactory (). getInstance (); // passe la clé de développeur et le secret niceTwitter.setOAuthConsumer (TWIT_KEY, TWIT_SECRET);
Nous créons ici une instance de la classe Twitter à partir de la bibliothèque Twitter4J, que nous avons déjà déclarée comme variable d’instance. Ce cours est requis pour à peu près tout ce que nous faisons avec Twitter. Pour vérifier nos informations d'identification, nous passons la clé et le secret à partir de l'interface de développement où l'application a été enregistrée, pour laquelle nous avons créé des constantes de classe. Ensuite, nous devons obtenir un jeton de demande de l'objet Twitter pour pouvoir autoriser l'application pour le compte de l'utilisateur:
// essaye d'obtenir le jeton de requête try // récupère le jeton de demande d'authentification niceRequestToken = niceTwitter.getOAuthRequestToken (TWIT_URL); catch (TwitterException te) Log.e (LOG_TAG, "TE" + te.getMessage ());
Nous essayons ici d'instancier le jeton de requête pour lequel nous avons créé une variable d'instance. La méthode peut générer une exception. Nous l'entourons donc d'un bloc try et générons un message d'erreur dans le journal Android si l'exception est levée. Notez que le code utilise la constante "LOG_TAG" créée - vous pouvez voir les messages résultants dans le panneau Eclipse LogCat..
Pour terminer le bloc "if", configurez un écouteur de clic pour le bouton de connexion que nous avons inclus dans notre fichier de présentation "main.xml":
// bouton d'installation pour l'écouteur au clic Button signIn = (Button) findViewById (R.id.signin); signIn.setOnClickListener (this);
L'écouteur de clic du bouton est la classe d'activité elle-même. Nous devons donc maintenant implémenter la méthode onClick n'importe où dans le fichier de classe:
/ ** * Le écouteur de clic gère la connexion et appuie sur les boutons du tweet * / public void onClick (Afficher v) // recherche un commutateur de vue (v.getId ()) // bouton de connexion enfoncé case R.id.signin: / / amène l'utilisateur à la page Web d'authentification Twitter pour autoriser l'accès de l'application à son compte Twitter. String authURL = niceRequestToken.getAuthenticationURL (); startActivity (nouvelle intention (Intent.ACTION_VIEW, Uri.parse (authURL))); Pause; // autres auditeurs ici default: break;
La méthode utilise une instruction switch pour adapter ce qui se passe à des pressions de bouton particulières. Nous ajouterons ultérieurement une instruction de casse pour un autre bouton, mais pour le moment, tout ce dont nous avons besoin, c'est du processus de connexion. Le code récupère l'URL d'authentification à partir de l'objet jeton de demande Twitter, puis ouvre la page dans le navigateur Web..
Ne vous inquiétez pas trop de la façon dont ces méthodes Twitter4J sont implémentées. C’est simplement le processus que vous devez suivre si vous utilisez l’API. Ne pas avoir à se préoccuper des détails de la mise en œuvre de la connexion à Twitter est l'un des principaux avantages de l'utilisation d'une bibliothèque externe..
Nous devons gérer ce qui se passera lorsque l'utilisateur sera renvoyé à l'application après s'être connecté à Twitter pour l'autoriser. Lorsque l'utilisateur se connecte avec succès, Twitter lui renvoie certaines données pour vérifier et faciliter l'accès de l'application à son compte. La méthode "onNewIntent" se déclenchera, alors implémentons-la maintenant:
/ * * onNewIntent se déclenche lorsque l'utilisateur revient de la page Web d'authentification Twitter * / @Override protected void onNewIntent (Intention d'intention) super.onNewIntent (Intention); // récupère les données récupérées Uri twitURI = intent.getData (); // assurez-vous que l'URL est correcte si (twitURI! = null && twitURI.toString (). startsWith (TWIT_URL)) // est une vérification - récupère les données renvoyées. String oaVerifier = twitURI.getQueryParameter ("oauth_verifier"); La méthode récupère les données de vérification de Twitter, que nous utiliserons plus tard pour accéder aux tweets de l'utilisateur. Pour que le processus de connexion ne soit nécessaire qu'une fois, nous stockons les données requises dans les préférences partagées de l'application. Toujours dans la déclaration "if", ajoutez ce qui suit:
// tentative de récupération du jeton d'accès try // tentative d'obtention d'un jeton d'accès à l'aide des données renvoyées à partir de la page de vérification AccessToken accToken = niceTwitter.getOAuthAccessToken (niceRequestToken, oaVerifier); // ajoute le jeton et le secret aux préférences partagées pour référence future nicePrefs.edit () .putString ("user_token", accToken.getToken ()) .putString ("user_secret", accToken.getTokenSecret ()) .commit (); // affiche la chronologie setupTimeline (); catch (TwitterException te) Log.e (LOG_TAG, "Échec d'obtention du jeton d'accès:" + te.getMessage ()); C'est une autre méthode qui peut provoquer la levée d'une exception. Le code contenu dans le bloc try récupère d'abord le jeton d'accès de Twitter à l'aide des données renvoyées par la page Web. Il utilise ensuite l’objet Préférences partagées pour stocker le jeton et le secret nécessaires à l’accès à Twitter. Enfin, le code appelle la méthode pour afficher la timeline, que nous n’avons pas encore implémentée..
Si vous souhaitez tester le processus de connexion tout à l'heure, indiquez la méthode "setupTimeline", qui inclut simplement une sortie de message dans le journal, par exemple:
private void setupTimeline () Log.v (LOG_TAG, "configuration de la chronologie");
Nous allons pleinement implémenter la méthode dans les tutoriels suivants.
Maintenant que nous avons géré la signature des utilisateurs lors de la première exécution de l'application, nous pouvons nous tourner vers l'interface utilisateur de l'application lors de son exécution ultérieure. Nous utiliserons diverses ressources dans la conception de l'interface utilisateur pour cette application, notamment les dessins, les couleurs et les mises en page. Les fichiers de mise en page XML feront référence aux ressources pouvant être dessinées que nous allons créer à l’étape suivante. Ne vous inquiétez pas si Eclipse vous signale des erreurs car les ressources ne sont pas encore présentes. Lorsque vous créez les fichiers de présentation, notez simplement les références aux ressources que vous devez encore créer..
L'application utilisera quatre fichiers de mise en page, dont l'un ("main.xml") que nous avons déjà créé pour l'écran de connexion, lequel apparaît uniquement à la première exécution. Nous avons également besoin de mises en page pour définir l'apparence de la chronologie principale, de l'écran Tweet et de chaque mise à jour dans la chronologie. Dans chaque fichier de mise en page, vous remarquerez que de nombreux éléments possèdent des attributs ID. C’est pour que nous puissions faire référence à ces éléments dans le code de l’application Java, en particulier lors de la gestion des interactions utilisateur..
La disposition de la chronologie sera l'interface principale que les utilisateurs verront lors du lancement de l'application, après l'avoir autorisée. La chronologie de départ affiche la liste des tweets récents de ces comptes suivis par l'utilisateur. En haut de l'écran, l'utilisateur verra un en-tête et le bouton Tweet pour passer à l'écran Tweet et envoyer un tweet. Le contenu de chaque mise à jour dans la chronologie de base sera défini dans un fichier de présentation distinct, mais dans la présentation de la chronologie, nous nous occuperons du conteneur de la liste des mises à jour dans son ensemble..
Créez un nouveau fichier dans votre dossier "res / layout", avec "timeline.xml" comme nom de fichier. Ouvrez le nouveau fichier et ajoutez le plan suivant, que nous étendrons:
La vue est définie par un LinearLayout. À l'intérieur de cela, nous avons un TableLayout et un ListView. Nous ajouterons des éléments à l'intérieur du tableau suivant. ListView contiendra la liste des tweets de mise à jour à afficher dans la chronologie de base de l'utilisateur. La liste sera remplie avec ces tweets lors de l'exécution de l'application. Pour le moment, nous définissons simplement la vue qui les tiendra.
Ajoutez du contenu dans l'élément TableLayout TableRow:
Cela crée un en-tête pour la chronologie de base. Le texte "Home" est placé à côté d'une ressource appelable appelée "home". Notez que la section a également un arrière-plan qui est une autre ressource pouvant être appelée nommée "homebg"..
Ajoutez ensuite le bouton tweet, toujours dans le tableau mais après le LinearLayout, vous venez d’ajouter:
Comme vous pouvez le constater, cela ressemble à l'en-tête Home, mais dans ce cas, la vue va fonctionner comme un bouton: l'attribut "clickable" de LinearLayout est défini sur true. Le bouton comprendra le texte "Tweet" affiché à côté d'une image. Lorsque les utilisateurs cliquent sur ce bouton, ils seront dirigés vers l'écran Tweet.
Au moment où vous choisissez l'onglet Mise en page graphique pour votre timeline XML dans Eclipse, vous ne verrez pas grand chose. Une fois que nous avons créé le dessin et le fichier de mise à jour, cela ressemblera à ceci:
Étant donné que le contenu de la timeline est uniquement créé à l'exécution, vous ne pouvez pas vraiment voir à quoi ressemblera l'interface avant de pouvoir exécuter l'application..
Nous allons utiliser un fichier de mise en page pour modéliser une seule mise à jour dans la chronologie de base. Créez un nouveau fichier dans votre répertoire de mise en page, en le nommant "update.xml". Entrez le plan suivant:
La mise en page contient une section pour l’image de profil du compte dont le tweet est affiché, puis une section pour le contenu du tweet. Dans le deuxième élément LinearLayout, nous ajouterons le contenu du tweet et les boutons de retweet / réponse. Commencez par le contenu du tweet:
Chaque tweet inclut le nom d'écran du compte de tweet, l'heure à laquelle le tweet a été envoyé et le tweet lui-même. Chaque TextView a un attribut ID, car le code Java va mapper les données tweet entrantes sur ces vues lors de l'exécution de l'application. La dernière TextView, pour le texte du tweet lui-même, a l'attribut "autoLink" afin que les utilisateurs puissent cliquer sur les liens dans les tweets. La vue du nom d’écran de l’utilisateur est également cliquable, afin que les utilisateurs puissent accéder à la page de profil de chaque compte dans leur chronologie. Notez que ces vues incluent également des références à des ressources de couleur que nous n'avons pas encore créées..
Ajoutons maintenant les boutons retweet et réponse après le TextView que nous venons d’ajouter:
Chaque tweet de la timeline sera accompagné de ces boutons, chacun avec un petit texte et un arrière-plan. Voici un instantané d'une seule mise à jour dans l'application terminée.
Nous passons maintenant à l'autre écran principal de notre application, l'écran Tweet. Créez un autre nouveau fichier dans votre dossier de mise en page, en le nommant "tweet.xml". Entrez le plan suivant:
Nous ajouterons plus d'éléments après TableLayout. Ne vous inquiétez pas pour l'ajout de tout ce code à la fois - si vous le comparez à la présentation de la chronologie ci-dessus, vous verrez qu'il est presque identique. La section supérieure avec l'en-tête de la page d'accueil et le bouton Tweet apparaîtra de manière similaire dans les écrans de la chronologie de la page d'accueil et de la page Tweet. Hormis quelques petites différences esthétiques qui distinguent les deux, la principale différence réside dans le fait que, dans l'écran Tweet, l'en-tête Accueil fonctionne comme un bouton permettant de ramener l'utilisateur à sa timeline d'origine, tandis que dans la présentation de la timeline, la vue Tweet bouton.
Après la TableLayout, ajoutez ce qui suit:
C'est le contenu principal de l'écran Tweet. Une petite quantité de texte informatif précède le champ de texte modifiable permettant à l'utilisateur de saisir le texte de son tweet. Nous avons ensuite un bouton lui permettant de continuer et d'envoyer le tweet. Une fois que nous avons créé nos ressources pouvant être dessinées, vous verrez quelque chose comme ceci dans l'onglet Disposition graphique de la disposition tweet:
Créons maintenant les éléments visuels dans notre interface, dont la plupart ont déjà été mentionnés dans nos ressources de présentation. Certains de nos dessins seront définis dans des fichiers XML et d’autres seront créés en dehors de l’application, à l’aide d’un programme de conception graphique ou d’édition. Vous pouvez bien sûr modifier tous les éléments visuels de votre choix, mais je vous recommanderais de commencer par les étapes décrites dans ce didacticiel, puis d'apporter des modifications une fois que vous aurez compris comment les différents ingrédients sont liés les uns aux autres..
Pour cette application, nous utilisons trois images créées en dehors d’Eclipse, pour l’icône de l’application, la timeline de la maison et le bouton tweet. Vous pouvez créer vos propres versions si vous le souhaitez, ou ne pas utiliser d'images du tout si vous préférez. La chronologie de la maison est un simple dessin, tandis que le bouton tweet et l'icône de l'application utilisent les ressources officielles de Twitter, qui comprennent également les icônes retweet, réponse et favoris..
 |  |  |
 |  |  |
 |  |  |
Une fois que vos dessins sont prêts, copiez-les dans le dossier de votre espace de travail d’application, dans «res / drawables- *». Eclipse doit avoir créé trois dossiers pouvant être dessinés dans l’espace de travail de votre projet, pour les périphériques de résolution faible, moyenne et élevée. Les images doivent être enregistrées sous "ic_launcher" pour l'icône, "home" et "tweet" pour les boutons. Assurez-vous que chaque image est enregistrée avec le même nom dans chaque dossier, par exemple. l'image tweet pourrait être nommée "tweet.png" dans les trois dossiers, bien que les images de chaque dossier soient en réalité de tailles différentes, pour s'adapter aux différentes résolutions.
Vous devrez peut-être demander à Eclipse d'actualiser votre espace de travail avant que votre code puisse faire référence aux nouvelles images. Pour ce faire, sélectionnez le projet dans l'Explorateur de packages, cliquez avec le bouton droit de la souris ou choisissez Fichier, puis Actualiser..
Outre le noir, le blanc et le gris, l'interface de l'application utilise principalement deux couleurs, les nuances de vert et de bleu. Définissons-les comme des ressources de couleur. Dans Eclipse, créez un nouveau fichier dans le répertoire "res / values" nommé "colors.xml":
Dans le fichier XML Couleurs, entrez le code suivant pour définir les deux couleurs principales de l'application:
# FF006699 # FF009933 # 66006699 # 66009933
Ce code indique deux couleurs plus les versions opaques de chacune. Maintenant, si vous voulez changer le jeu de couleurs pour les boutons de l'application, vous pouvez le faire à un seul endroit..
Enfin, créons nos arrière-plans pour compléter la conception de l'interface utilisateur. Nous allons parcourir chaque fichier extractible à tour de rôle, mais souvenez-vous que vous devez les copier tous dans les trois dossiers extractibles du répertoire de ressources de votre application..
Créez un nouveau fichier dans votre ou vos dossiers pouvant être appelés, appelé "homebg.xml", avec le contenu suivant:
Ceci définit une forme simple à dessiner avec un rembourrage et un remplissage en dégradé. Si vous examinez le code de mise en page XML de votre chronologie, vous verrez que ce dessin est appelé l'arrière-plan d'un LinearLayout..
Créez un autre nouveau fichier nommé "homebtnbg.xml" dans votre dessinable avec le contenu suivant:
Cet arrière-plan est utilisé pour le bouton Accueil de l'écran Tweet. Créez ensuite un fichier nommé "profilebg.xml" avec le contenu suivant:
Cette fois, nous définissons les coins arrondis ainsi que le rembourrage et le remplissage en dégradé. Cet arrière-plan est destiné à être affiché derrière les images de profil dans la timeline.
Les deux derniers tirables sont légèrement plus complexes. Pour le bouton Tweet et les boutons de chaque mise à jour (pour répondre ou retweet), nous allons définir différentes apparences pour les états de sélection afin que les boutons changent d'apparence lorsque l'utilisateur les appuie. Créez un fichier nommé "tweetbtnbg.xml" avec le contenu suivant:
