You are on page 1of 20

Crearea unui client grafic pentru Twitter

In acest tutorial vom folosi NetBeans IDE pentru a creea un client REST graphic, simplu si care afiseaza atat detalii despre prietenii de pe Twitter cat si propiul status si pictograma specifica utilizatorului. Aceasta aplicatie foloseste Swing si suportul lui NetBeans IDE pentru operatiile SaaS oferite de Twitter.

REpresentational State Transfer (REST) este un stil de arhitectural pentru sistemele hypermedia distribuite, cum ar fi Worl Wide Web. Important pentru arhitecturile RESTful este conceptual de resurse. Ele sunt identificate prin idetificatori universali (URIs). Aceste resurse pot fi manipulate folosind resurse standard, cum ar fi HTTP, si informatiile pot fi schimbate folosind reprezentari a acestor resurse. IDE suporta crearea unor aplicatii client care acceseaza RESTful web services, si genereaza cod pentru acestea. RESTful web services sunt servicii construite folosind arhitectura RESTful. Termenul SaaS reprezinta acronimul pentru Software as a Service. In traducere libera, Software ca un Serviciu reprezinta un mod de implementare al unei solutii software prin intermediul caruia se ofera acces de la distanta la un set de aplicatii. Solutiile Saas reprezinta o alternativa practica pentru toate categoriile de intreprinderi, de la mici si mijlocii pana la companiile cu mii de angajati. Acest tip de serviciu poate fi foarte usor adoptat de catre companii, deoarece nu necesita intretinere si investitii in hardware si personal suplimentar. Prin alegerea unui solutii SaaS o companie beneficiaza de numeroase avantaje. Cel mai important poate este usurinta folosirii si costurile reduse de implementare. Pe langa acestea se adauga multe altele, care fac din SaaS o solutie indispensabila :

nu necesita instalarea unei aplicatii software accesul este securizat si poate fi realizat de pe orice calculator conectat la Internet toate activitatile sunt administrate dintr-un punct central permite administrarea rapida actualizarea serviciilor puse la dispozitie se realizeaza automat, fara necesitatatea unei configurari asistate datele sunt in siguranta, si pot fi restaurate in cazul unei modificari neintentionate

Proiectarea JFrame-ului

La acest pas vom creea elementele de GUI, pentru a afisa numele prietenului de pe Twitter si timeline ul acestuia, pictograma ta ca utilizator Twitter, si locul unde citesti si iti actualizezi status-ul.Toate elementele de GUI sunt impachetate intr-un JFRAME. Elementele adaugate in GUI pot varia in functie de utilizator. Unii pot adauga mai multe functionalitati , dar in acest document este descris doar minimum necesar pentru ca aceasta aplicatie sa functioneze corect. Pentru a proiecta JFrame-ul: 1. Alege File > New Project. Fereastra pentru proiecte noi se va deschide. Selecteaza categoria Java, apoi un proiect Java Application. Apasa Next 2. Numeste proiectul TwitterSwingClient. Selecteaza o locatie pentru proiect. Debifeaza Create Main Class, deoarece Jframe va fi clasa principala.

3. Se va creea proiectul TwitterSwingClient. Click dreapta pe numele proiectului si selecteaza New > JFrame Form (or New > Other > Swing GUI Forms > JFrame Form). Wizardul pentru New JFrame Form se va deschide. 4. Numeste formularul TwitterJFrame si pentru el creeaza un Package numit twitterclient.

5. IDE porneste TwitterJFrame in modul Design. Aici ai la dipozitie o gama variata de componente de tip Swing care pot fi adaugate in Jframe.

6. Apasati pe componenta Button ce se gaseste sub Swing Controls. Trage-l si plaseaza-l in coltul din dreapta jos a Jframe-ului. Observati ca butonul afiseaza jButton1 , care este numele obiectului de tip Jbutton.

7. Click dreapta pe JButton1 si selecteaza Edit Text, pentru a modifica numele butonului in Update 8. Apasa pe componenta Label ce se gaseste tot sub Swing Controls. Trage-l si plaseaza-l in coltul din tanga jos a Jframe-ului. Modificati numele in "Icon. Aici va aparea pictograma pe care o veti alege ca fiind reprezentativa pentru userul dumneavoastra. 9. Tot din Swing Controls trage si plaseaza componenta Text Field (jTextField1). Pozitioneaz o intre Label si Button. Modificati numele in "Status."Facei clic pe marginea dreapt a cmpului de text i ntinde-ti-l spre buton. Vor aparea liniii albastre pentru a va ajuta sa estimati mai usor distantele si alinierea. 10. Faceti clic dreapta pe JLabel1 si selectati Properties. O noua fereastra se va deschide.

11. Modifica proprietatile Maximum Size, Minimum Size, and Preferred Size la [48,48], pentru a se potrivi cu dimensiunile pictogramei de pe Twitter.

12. Adauga o componenta de tip Scroll Pane in partea de sus a JFrame-ului. Marestei granitele pentru a

acoperii tot spatiul de deasupra componentelor JButton si Jtext. 13. Adauga o Lista in Scroll Pane-ul adaugat la pasul anterior. JFrame-ul ar trebui sa arate ca in figura de mai jos. Nu uitati sa salvati TwitterJFrame.

Acum aveti toate componentele GUI de baza pentru clientul Swing. In urmatori pasi vom adauga prima operatie Twitter SaaS (Software as a Service). In aceasta sectiune vom creea o noua metoda la care vom adauga operatia Twitter getUserTimeline. Aceasta operatie faciliteaza obtinerea iconitei si statusul curent. Pe urma vom adauga cod la acesta metoda pentru a afisa iconita si statusul in Jlabel1 si respectiv JtextField. La sfarsit vom adauga o linie la constructorul JFrame pentru a initializa aceasta metoda. Pentru a afisa statusul: 1. Din modul Design schimbati in modul Source

2. Clic dreapta si selecteaza Insert Code .

3. Selecteaza Generate REST Client . Se va deschide o fereastra Available REST Resources:

4. Selecteaza IDE Registered si apasa Browse. Cautati Twitter > Twitter OAuth > [statuses] > [user_timeline.{format}] si apasati OK.

5. In fereastra Available REST Resource acum vom vedea resursa Twitter OAuth user_timeline ,numele clasei corespunzatoare si tipul de autentificare Oauth.

6. O noua fereastra se va deschide, unde va trebui sa decideti daca doriti sa generati obiecte Java din schema XML (fisiere WALD ). Selectati YES 7. La sfarsitul clasei TwitterJFrame , IDE genereaza o clasa interna numita Twitter_OAuth_user_timeline__format_JerseyClient. Aceasta este o clasa complexa ce contine :
CONSUMER_KEY: Consumer Key string CONSUMER_SECRET: Consumer Sectret string initOAuth(): metoda pentru initializarea OAuh getUserTimeline(): metoda ce corespunde metodei

HTTP: getUserTimeline (from the REST

resource)
makeOAuthRequestUnique(): folositor atunci cand mai multe API uri sunt apelate in aceeasi sesiune login: folosit pentru a se loga pe Twitter (forces the authorization). Aceasta metoda apeleaza alte doua metode getOAuthAccessToken si getOAuthRequestToken.

8. In TwitterJFrame imediat deasupra clasei interne Twitter_OAuth_user_timeline__

format_JerseyClient, adaugati urmatoarea linie de cod. Acest cod creeaza o variabila numita client, care reprezinta o instanta a clasei interne.

9. Localizati metoda principala din TwitterJFrame. Deasupra acestei metoda , adaugati o nou metoda numita initUserInfo care arunca doua exceptii MalformedURLException and an IOException.
private void initUserInfo() throws MalformedURLException, IOException {}

10. Inserati urmatoarea bucata de cod :

11. Deschide Fix Imports si selecteaza twitter.twitteroauth.twitterresponse.StatusType .

12. La constructorul TwitterJForm adaugati un bloc try/catch pentru a apela initUserInfo atunci cand aplicatia ruleaza. Dupa ce vom obtine cheile de autentificare de pe Twitter (get Oauth keys ) putem rula proiectul.

Obtinerea cheilor Oauth de la Twitter Pentru ca aplicatia Java sa poata avea acces la datele de pe Twitter, va trebui sa luam de pe Twitter cheile CUSTOMER, CUSTOMER_SECRET precum si un string de verificare. Twitter foloseste autentificare de tip Oauth, care foloseste aceste chei. Totusi, Oauth este setat astfel incat sa accepte apelul venit din partea unei server sau aplicatie web. Pentru a obtine cheile , vom inregistra o aplicatie web goala dummy. 1. Deschideti un browser. Mergeti laTwitter > Applications si selectati Register a new application. 2. Pentru Application Name introduceti NB User Timeline Application 3. Adaugati o scurta descriere, acest camp este obligatoriu. Puteti scrie " Aplicatie Java creata in NetBeans IDE ce apeleaza operatia user_timeline." 4. In campul Application Website adaugati orice URL. 5. Pentru optiunea Application Type , selectati Client. 6. In Default Access Type selectati Read&Write 7. Celalalte optiune vor ramane cu setarile default. Se va deschide o pagina cu detalii aplicatiei pe care ati inregistrato. 8. Copiati Consumer key si Consumer secret key. In IDE localizati linia care face referire la CONSUMER_KEY si setati aceea valoare.

Rularea proiectului Acum ca am obtinut cheile, putem rula proiectul. Aplicatia Java apeleaza Twitter ul, care va deschide o fereastra care va permite aplicatiei sa acceseze datele. 1. Daca TwitterSwingClient este proiectul principal, apasati F6. Altfel , clic dreapta pe proiectul TwitterSwingClient si rulati de aici aplicatia. 2. O fereastra se va deschide intreband daca sunteti de acord ca aplicatia inregistrata sa acceseze datele primite de pe Twitter. 3. Un cod PIN va fi afisat. Copiati acest cod 4. Acest cod PINse va introduce cand primiti mesajul Type oauth_verifier string: 5. Se va deschide clientul, afisand ultimul status de pe Twitter.

Apelarea mai multor servicii

Design ul final al aplicatiei necesita apelarea a trei servicii : user_timeline{format}, update{format}, and friends_timeline{format}. Toate aceste servicii trebuiesc sa apeleze Twitterul utilizand acelasi login. Pentru ca aceste apelari sa fie posibile din acelasi login vor trebui introduse in aceeasi clasa. Apelarea mai multor servicii de la acelasi client necesita doi pasi: Adaugarea mai multor servicii la acelasi clasa client. Modificarea caii de acces la resurse a acestei clase.

Adaugarea mai multor servicii si gruparea lor intr-o singura clasa 1. Apasati Alt-Insert si selectati Generate REST Client.

2. Efectuati aceeasi pasi ca si cei de la Afisarea statusul dar selectati serviciul [statuses] > [update.{format}]. VA fi generata clasa interna Twitter_OAuth_update__format_JerseyClient.

3. Repetati pasi 1 si 2, dar pentru serviciul [friends_timeline.{format}]

4. Modifica numele clasei initiale Twitter_OAuth_user_timeline__format_JerseyClient. Aceasta va devenii o clasa generala ce va apela toate cele trei servicii. Selecteaza o instanta a lui Twitter_OAuth_user_timeline_ _format_JerseyClient si selectati Refactor > Rename. Noul nume va fi TwitterClient.

5. Apasati pe Refactor. IDE a modificat toate instantele.

6. Localizati clasa Twitter_Oauth_friends_timeline__format_JerseyClient si selectati metoda


getFriendsTimeline.

7. Copiati metoda
public <T> T getFriendsTimeline(Class<T> responseType, String since, String since_id, String page, String count) throws UniformInterfaceException { String[] queryParamNames = new String[]{"since", "since_id", "page", "count"}; String[] queryParamValues = new String[]{since, since_id, page, count}; return webResource.queryParams(getQueryOrFormParams(queryParamNames, queryParamValues)).accept(javax.ws.rs.core.MediaType.TEXT_XML).get(responseType); }

8. Adaugati aceasta metoda in clasa interna TwitterClient, sub metoda getUserTimeline. 9. Procedati la fel si pentru metoda updateStatus. Modificarea caii de acces la resurse a acestei clase Toate apelarile facute de servicii catre Twitter sunt acum in aceeasi clasa. Totusi , calea catre resurse nu este construita corect. IDE a generat cai catre resurse special pentru serviciul user_timeline atunci cand a fost creeata clasa. Clasa trebuie modificata astfel incat , la nivel de clasa, calea catre resurse sa fie generica , si cai specifice vor fi alocate de serviciu apelant. 1. Localizati constructorul TwitterClient si inlaturati parametrul String format

2. O eroare , marcata cu rosu va aparea pe mariginea dreapta. Apasati pe ea, si veti fi directat catre o linie din initUserInfo care initializeaza clasa TwiiterClient. Aceasta linie este client = new TwitterClient("xml"); stergeti parametrul xml, pentru ca constructorul TwitterClient nu-l mai foloseste. Linia va fi client = new TwitterClient(). 3. Intorcetiva la constructorul TwitterClient, si anume, la linia:
String resourcePath = java.text.MessageFormat.format("statuses/user_timeline.{0}", new Object[]{format});

Aceasta linie seteaza ResourcePath pentru intreaga clasa. Aceasta linie trebuie modificata , astfel incat sa pointeze catre un director: String resourcePath = "statuses"; 4. Navigati catre getUserTimeline si localizati linia:
return webResource.queryParams(getQueryOrFormParams(queryParamNames, queryParamValues))...;

Adaugati urmatoare cale:


return webResource.path("user_timeline.xml").queryParams(getQueryOrFormParams (queryParamNames,queryParamValues)).accept(javax.ws.rs.core.MediaType.TEXT_XML).g et(responseType);

5. Pentru getFriendsTimeline:
return webResource.queryParams(getQueryOrFormParams(queryParamNames, queryParamValues)).accept(javax.ws.rs.core.MediaType.TEXT_XML).get(responseType);

Adaugati urmatoare cale:


return webResource.path("friends_timeline.xml").queryParams(getQueryOrFormParams (queryParamNames,queryParamValues)).accept(javax.ws.rs.core.MediaType.TEXT_XML).g et(responseType); 6. La fel si pentru updateStatus: return webResource.type(javax.ws.rs.core.MediaType.APPLICATION_FORM_URLENCODED>>>

>>> return webResource.path("update.xml").type(javax.ws.rs.core.MediaType. APPLICATION_FORM_URLENCODED.post(responseType,getQueryOrFormParams(formParamNames , formParamValues)); 7. Localizati si comentati metoda setResourcePath. 8. Stergeti clasa Twitter_OAuth_update_format_JerseyClient si Twitter_Oauth_friends_timeline_format_JerseyClient.

Adaugarea unei actiuni de actualizare a statusului 1. Intorcetiva la view-ul Design din TwitterJFrame. Faceti dublu clic pe butonul de update. Astfel ne vom intoarce la view-ul Source, dar la metoda jButton1ActionPerformed.

2. Pentru aceasta medoda adaugati cod de mai jos:


private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) { String rawStatus = jTextField1.getText().trim(); String status = URLEncoder.encode(rawStatus, "UTF-8"); client.makeOAuthRequestUnique(); try { client.updateStatus(String.class, status, null); } catch(UniformInterfaceException ex) { System.out.println("Exception when calling updateStatus = " + ex.getResponse().getEntity(String.class)); } }

Acest cod ia textul din campul de text si il trimite care clasa updateStatus. Afisarea Utilizatorului si statusului in JFrame Acum vom coda aplicatia pentru a afisa utilizatorul si statusul prietenilor de pe Twitter. Pentru a obtine numele utilizatorului si statusul de pe Twitter, atunci cand ruleaza aplicatia apeleaza operatia getFriendsTimeline. Pentru aceasta va fi nevoie sa crem o metoda run care va suprascrie run-ul din metoda main. Pentru ca statusul ca fie actualizat automat, vom modifica metoda run care contine operatia getFriendsTimeline intro operatie java.util.TimerTask, care va executa metoda run odata la 75 secunde. Aplicatia aliseaza datele ca celule intro lista. Aceste datee trebuiesc transmise catre componentele de GUI. Pentru aceasta va trebui creat un JPAnel care implementeaza javax.swing.ListCellRenderer. Acest Jpanel returneaza un obiect java.awt.Component cu numele si statusul intors in JLAbels. In TwitterJFrame, aranjam Jlist astfel incat sa afiseze obiectele returnate de Jpanel

Crearea unui TimerTask 1. Deschideti TwitterJFrame in modul Sources 2. Localizati declaratie de clasa si constructorul :

3. In corpul constructorului, deasupra comenzii initComponents()adaugati o instanta a clasei java.util.Timer

4. Selectati din nou Fix Imports si importati clasa java.util.Timer. 5. Sub initializarea Timer, adaugati o noua metoda Timer.scheduleAtFixedRate.Parametrii acestei metode sunt un obiect TimerTask, intarzirea inainte de a rula pentru prima data taskul, si frecventa cu care va rula. Nu uitati sa importati clasa java.util.TimerTask. Unde este lasat randul liber, vom adauga liniile de cod pentru executie.
public TwitterJFrame() { Timer t = new Timer("Twitter Updater`", false); t.scheduleAtFixedRate(new TimerTask() { }, 30000, 75000);

Adaugarea unei metode run pentru operatia getFriendsTimeline Pentru a afisa utilizatorul si statusul, aplicatia prima data ia aceste date de pe Twitter. Pentru aceasta Twitter System as a Service ofera operatia getFriendsTimeline. Pentru a se executa aceasta operatie trebuie sa fie in interiorul unei metode run. Iar in final, pentru ca operatia afiseaza numele si statusul in Jlist,aplicatia trebuie sa adauge rezultatele lui getFriendsTimeline ca elemente a unui obiect predefinit DefaultListModel. 1. Deasupra constructorului TwitterJFrame, creati un obiect DefaultListModel numit
statusesListModel.

2. Selectati din nou Fix Imports si importati clasa DefaultListModel. 3. In corpul lui TimerTask, aduagati o noua metoda run si folositi @Override pentru a evita rularea din main

4. Adaugati urmatorul cod pentru metoda run:


public void run() { System.out.println("Timer Task is running"); try { client.initOAuth(); Statuses response = client.getFriendsTimeline(Statuses.class, null, "10"); // Clear the list model so it does not replicate the contents last run statusesListModel.clear(); // Create a Status Type object for every status in the Status add an element // to the list model for every status type object for (final StatusType st : response.getStatus()) { SwingUtilities.invokeLater(new Runnable() { public void run() { statusesListModel.addElement(st); } }); } } catch (UniformInterfaceException ex) { System.out.println("Exception when calling getFriendsTimeline = " ex.getResponse().getEntity(String.class)); } }

null, null, from the list, and

Creearea unei liste cu componente pentru GUI Acum avem cod care obtine obiecte de tip status si creeaza o lista de elemente pentru fiecare status. Totusi nu putem afisa aceste elemente adunate intro lista in JList. Trebuie sa trecem datele in componente de GUI. Pentru asta va trebui sa creem un nou Jpanel care implementeaza javax.swing.ListCellRenderer. Acest JPAnel returneaza un obiect de tip java.awt.Component cu numele si statusul returnate in JLabels.

1. Clic dreapta si alegeti New > JPanel Form . 2. In fereastra nou deschisa dati un nume nou si adaugati l in pachetul twitterclient.

3. In Jpanel adaugati un Label si un Text Pane. 4. Pozitionati Label ul si Text Pane ul dupa modul in care doriti ca datele sa va fie afisate. 5. Clic dreapta pe elementul JLabel si selectati Properties. De aici se poate modifica font-ul, culorile, alinierea si alte calitati. Setati proprietatea labelFor pentru a pointa spre jTextPane1.

6. Mutati pe view ul Source . Urmariti modificarile facute in cod ul lui JLabel si jTextPane de catre IDE dupa ce au fost modificate anumite proprietati.

7. Gasiti declaratia de clasa si adaugati codul de mai jos:


public class Item extends javax.swing.JPanel implements ListCellRenderer {

8. Apasati Ctr-Shift-I. Aceasta actiune adauga o declaratie importata pentru


javax.swing.ListCellRenderer.

9. Adaugati cateva linii goale intre codul generati si declaratiile de variabile. In aceste linii adaugati codul de mai jos, care implementeaza metoda abstracta getListCellRendererComponent. Acest cod inlocuieste etichetele cu textul username si text cu obiectele Text, User si ScreenName obtinute cu ajutorul clasei twitteroauth StatusType.
public Component getListCellRendererComponent(JList list, Object value, int index, boolean sel, boolean focus) { StatusType st = (StatusType) value; jTextPane1.setText(st.getText()); jLabel1.setText("<html>" + st.getUser().getScreenName() + "</html>"); return this; }

10. Apasati Ctrl-Shift-I, pentru a importa declaratii pentru clasele StatusType si Component. Selectati twitteroauth pentru StatusType. Acum avem o clasa Item care returneaza obiecte Component cu username ul si statusul afisate in Jlabel si JtextPane. Mai trebuie doar sa modificam TwitterJFrame pentru a folosi aceste obiecte Component.

Afisarea obiectelor Component in TwitterJFrame 1. Intorcetiva la TwitterJFrame. In tabul Design selectati JList si faceti clic dreapta pentru a ajunge la Properties.

2. Selectati proprietatea model.

3. Pentru optiunea set jList1s model... selectati Custom code si modelul statusesListModel.

4. In fereastra Properties, selectati Cell Render si apasati Ctrl-Space. Pentru proprietatea set jList1s cellRenderer alegeti Custom code si new Item () Acum aplicatia este completa. Salvati toate fisierele si rulari aplicatia.

You might also like