Desenvolupament d'un web per controlar la llar digital

5 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV Projecte Final de Carrera Desenvolupament d'un web per controlar la llar digital AUTOR Francisco Faulí Tarazona ([email protected]) DIRECTORS Joan Fons i Cors Ignacio Mansanet Benavent ([email protected]pv.es) ([email protected]) Curs 2010-2011 València 2 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV 3 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV Agraïments Voldria donar les gràcies a tota la meua família per haver-me donat el seu suport incondicional durant tot aquest temps i en especial a mare per haver tingut tanta paciència amb mi. També voldria agrair a tots els meus companys de classe que han estat fentme companyia durant totes eixes llargues sessions de biblioteca. La veritat és que sense ells açò hagués segut molt dur. Tampoc voldria oblidar-me dels meus amics i amigues que han estat al meu costat sempre que els he necessitat i han sabut animar-me quan les coses no anaven molt be. Finalment, vull agrair a Nacho Mansanet tota la atenció que ha dipositat sobre mi i el meu projecte. Perquè m’ha donat molta llibertat a l’hora de la seua creació i perquè sempre m’ha ajudat en qualsevol problema que he tingut, sobretot amb la creació d’aquesta memòria. GRÀCIES! 4 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV 5 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV Índex Agraïments .......................................................................................................... 3 La llar digital ...................................................................... 9 1. Introducció ............................................................................................... 10 1.1 Història de la domòtica i la llar digital ................................................... 11 1.2 Objectiu del Projecte ............................................................................ 12 2. Tecnologia JSF ........................................................................................ 13 2.1 Per què utilitzar JSF ............................................................................. 14 2.2 Com funciona JSF ................................................................................ 15 2.3 Llibreries ............................................................................................... 15 PrimeFaces ( Versió 2.2 RC2 ) ............................................................. 15 Jdom ( Versió 1.1 ) ................................................................................ 16 Antecedents ..................................................................... 18 3. Altres programes ..................................................................................... 19 3.1 Domotiga .............................................................................................. 19 3.2 OpenDomo ........................................................................................... 20 Domestica ........................................................................ 22 4. Primera Versió ......................................................................................... 23 5. Segona Versió .......................................................................................... 27 6. Interfície d’usuari ..................................................................................... 31 7. Evolució de les versions ......................................................................... 38 8. Estructura dels fitxers ............................................................................. 39 9. Llicència ................................................................................................... 41 Conclusions ..................................................................... 43 10. Treballs Futurs ....................................................................................... 44 Apèndixs .......................................................................... 48 A. Estructura XML ........................................................................................ 50 B. Primers passos amb JSF 2.0 ................................................................. 53 B.1 Prerequisits .......................................................................................... 53 B.2 Crear un nou projecte .......................................................................... 54 B.3 Importar les llibreries ........................................................................... 57 6 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV C. Exemple JSF: Hola món ......................................................................... 58 D. Importar Primefaces ............................................................................... 63 E. Importar Domestica ................................................................................. 65 G. Modificar Fitxer XML ............................................................................... 68 H. Connexió amb el Servlet ........................................................................ 70 I. Glossari De Termes ................................................................................. 72 J. Bibliografia .............................................................................................. 75 7 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV Índex de Figures Figura 2. 1: Esquema Funcionament JSF ......................................................... 15 Figura 3. 1: Captura de Pantalla Domotiga ....................................................... 20 Figura 3. 2: Captura de Pantalla Domotiga ....................................................... 21 Figura 4. 1: Domotica 1.0 .................................................................................. 23 Figura 4. 2: Estructura mapa de les localitzacions ............................................ 24 Figura 4. 3: Domestica 1.1 ................................................................................ 25 Figura 4. 4: Domestica 1.2 ................................................................................ 26 Figura 5. 1: Exemple component p:layout ......................................................... 28 Figura 5. 2: Informació sobre un dispositiu amb Domestica 1 .......................... 29 Figura 5. 3: Informació sobre un dispositiu amb Domestica 2 .......................... 29 Figura 5. 4: Domestica 2.0 ................................................................................ 30 Figura 6. 1: Pàgina d’inici .................................................................................. 31 Figura 6. 2: Finestra Canvi IP ............................................................................ 31 Figura 6. 3: Menu .............................................................................................. 32 Figura 6. 4: Mapa de FirstFloor ......................................................................... 33 Figura 6. 5: Mapa de Kitchen ............................................................................ 34 Figura 6. 6: Informació sobre KitchenLighting1 ................................................. 35 Figura 6. 7: Informació sobre GradualLighting1 ................................................ 35 Figura 6. 8: Botons Device_type_switch ........................................................... 36 Figura 6. 9: Botons Device_type_percentual_dimmer ...................................... 36 Figura 6. 10: Botons Device_type_pulse ........................................................... 37 Figura 6. 11: Botons Device_type_percentual_dimmer .................................... 37 Figura 6. 12: Botons Device_type_vertical_movement ..................................... 37 Figura 6. 13: Botons Device_type_angular_dimmer ......................................... 38 Figura 6. 14: Botons Device_type_hex_dimmer ............................................... 38 Figura 8. 2: Directori /WebContent .................................................................... 40 Figura 10. 1: Exemple p:columnChart ............................................................... 45 Figura 10. 2: Exemple p:lineChart ..................................................................... 46 Figura B. 1: Instal·lació Tomcat ......................................................................... 54 Figura B. 2: Creació Web Dinàmica .................................................................. 55 Figura B. 3: Crear Web Dinàmica 2 .................................................................. 56 Figura B. 4: Estructura fitxer per defecte ........................................................... 57 Figura B. 5: Importar Llibreries .......................................................................... 57 Figura C. 1: Provar Exemple ............................................................................. 62 Figura C. 2: Resultat ......................................................................................... 62 Figura D. 1: Resultat Primefaces ...................................................................... 64 8 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV Figura E. 1: Importar Projecte ........................................................................... 65 Figura E. 2: Importar Projecte 2 ........................................................................ 66 Figura E. 3: Executar Domestica ....................................................................... 67 Figura G. 1: Modificar XML ............................................................................... 68 Figura G. 2: Importar XML ................................................................................. 69 9 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV Part I La llar digital 16 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV − Suport nadiu de Ajax − Kit per crear aplicacions web per a mòbils. − Compatible amb altres llibreries. − Ben documentat Pàgina web: www.primefaces.org Demo: http://www.primefaces.org/showcase/ui/home.jsf Jdom ( Versió 1.1 ) Jdom és una biblioteca de codi obert per a manipulació de Dades XML optimitzats per a Java. Pàgina web: http://www.jdom.org/ 17 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV 18 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV Part II Antecedents 19 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV Avui en dia podem trobar una gran varietat de programari dedicat al control de la llar digital. La majoria han estat desenvolupat per companyies especialitzades en domòtica però també podem trobar un gran nombre d’aplicacions desenvolupades per persones amb la finalitat de donar suport a la seues instal·lacions demòtiques personals que finalment han anat creixent de tal forma que donen suport a un gran nombre de dispositius domòtics. el gran avantatge d’aquestes aplicacions desenvolupades anònimament és que la majoria han estat creades sense ànim de lucre i per tant poden ser descarregades lliurement. D’aquestes aplicacions podem destacar-se’n dos, Domotiga i OpenDomo, que encara que ara per ara encara es troben en fase de desenvolupament, la seues seues comunitats de desenvolupadors i usuaris son molt grans i per tant el seu desenvolupament és molt actiu. 3. Altres programes 3.1 Domotiga ha estat desenvolupat amb el llenguatge de programació Gambas Basic i corre sota el sistema operatiu Linux. Domotiga està pensat per poder suportar el major nombre de protocols per tal de poder comunicar-se amb el dispositius, entre els que destaquem X10 i Z-wave. La seua interfície gràfica es clara i senzilla i s’hi pot accedir des de qualsevol plataforma. El seu esquema gràfic utilitzat per mostrar la informació es el mateix que utilitzarem en la nostra aplicació. Conta amb un menú lateral on es mostren les diferents localitzacions i dispositius i des del qual es pot mostrar, en la part central, la seua informació. Web: http://www.domotiga.nl/ 20 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV Figura 3. 1: Captura de Pantalla Domotiga 3.2 OpenDomo ¡Error! Marcador no definido. ha estat desenvolupat sota el llenguatge de programació C i també s’executa amb el sistema operatiu Linux. OpenDomo sorgeix de la necessitat d'unificar les diferents tecnologies existents en el món de la domòtica, com UPnP, X10, EIB, etc, amb el protocol de comunicacions més utilitzat en l'actualitat TCP / IP. La seua interfície gràfica està dissenyada per ser mostrada en la majoria de dispositius web encara que no és tant intuïtiva com pot ser la de domotiga. Segons diuen al seu web, aquesta serà una de les millores que realitzaran pròximament. Web: www.opendomo.org 21 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV Figura 3. 2: Captura de Pantalla Domotiga El gran inconvenient d’aquestes aplicacions es que els dispositius i les localitzacions tenen que ser afegides una per una. Això suposa un gran esforç quan estem treballant sobre un edifici on podem trobar un gran nombre d’elements. Una bona forma de solucionar aquest problema serà l’elaboració d’un XML on emmagatzemar tota la informació d’aquests elements per a que puga ser llegit per l’aplicació. En aquest projecte també s’intentarà millorar l’experiència de l’usuari afegint una mapa de l’edifici on es mostren totes les localitzacions i dispositius tal i com es troben en la realitat i que al clicar sobre ells es puga accedir a la seua informació. Aquesta característica la trobem a faltar en les aplicacions esmentades anteriorment. 22 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV Part III Domestica 23 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV 4. Primera Versió L’elaboració d’aquesta primera versió va començar en el mes de febrer de 2010 encara que no seria fins a dos mesos més tard quan la versió 1.0 veuria la llum. Durant aquesta primera versió l'aplicació s'anomenava WebHomeControl i no va ser fins a la segona versió quan es va canviar el nom a Domestica. Els dos primers mesos va suposar, bàsicament, el primer contacte amb Eclipse, la tecnologia JSF, les seues llibreries i la llibreria JDOM. Entre totes les llibreries que utilitzen JSF com a tecnologia vaig decantar-me per IcesFaces i Tomahawk, encara que finalment vaig escollir aquesta ultima perquè IcesFaces no sempre funcionava correctament. El que feia la versió 1.0 de Domestica ( aleshores WebHomeControl ) era llegir el fitxer “EjemploDevicesV0.2.xml”, mostrar la informació amb un component tree2 de tomahawk, i si un element de l’arbre era clicat, es mostrava la seua imatge. Exemple visual de la versió 1.0: Posteriorment, el fitxer XML es va canviar i es va utilitzar el fitxer “ScenarioSpecificationV0.3” ( el mateix que s'utilitza actualment) així que es va actualitzar l'aplicació perquè la informació pugues ser llegida i mostrada correctament. Una de les coses que més em va costar implementar en aquest projecte va ser Figura 4. 1: Domotica 1.0 24 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV el mapa de les localitzacions. Principalment, el mapa de les localitzacions és una imatge que al mateix temps compte altres subimatges clicables a sobre d'ella, en una posició determinada. Com podem veure en la imatge de dalt, tenim una imatge principal que al mateix temps compte altres subimatges ( imatge 1, imatge 2 ) a sobre d'ella. Aquestes subimatges son representades en la posició X,Y en funció de la posició 0,0 de la imatge principal. El que vaig fer va ser, bàsicament, crear una llista amb totes les subimatges i recórrer-la amb l'atribut ui:repeat i per cada iteració crear un imatge clicable ( commandLink i graphicImages ) utilitzant els elements CSS position:absolute, left i top per establir la seua posició. Exemple bàsic de codi: Figura 4. 2: Estructura mapa de les localitzacions 25 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV Una vegada el mapa de les localitzacions va ser implementat va sorgir la versió 1.1 ( abril de 2010 ). A hores d'ara aquesta versió encara tenia moltes manques, sobretot amb aspectes relacionats amb els dispositius, però ja anava agafant la forma, que en un futur, tindria la versió final. Exemple visual de la versió 1.1 : <p:graphicImage value="#{image.url}"/> #Imatge Principal <ui:repeat value="#{image.map}" var="item"> <h:commandLink actionListener="#{image.getImage}"> <h:graphicImage value="#{item.url}" #SubImatges style="position:absolute;left :#{item.posX};top:#{item.posY};" height="#{item.height}" width="#{item.width}"> <f:attribute name="docNum" value="#{item.locationIDRef}"/> </h:graphicImage> </h:commandLink> </ui:repeat> Figura 4. 3: Domestica 1.1 32 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV L'arbre es tracta d'un menú desplegable que mostra totes les localitzacions i dispositius de la casa, els quals es representen amb un color negre o roig respectivament. Des d'aquest menú es pot accedir tant a la informació de les localitzacions com la dels dispositius. La representació en forma d'arbre te l'objectiu de mostrar els element segons la seua posició en la casa. Per exemple, si mirem en la imatge, KitchenLighting1 és un dispositiu que es troba a dintre de la localització Kitchen ( la cuina ) que al mateix temps es part de FirstFloor ( Planta primera ) i que al mateix temps es part de Home ( Llar ) El menú també compta amb un botó per poder expandir o amagar tot l'arbre amb un sol clic. Si per exemple cliquem sobre l'element “FirstFloor” en el centre de la pàgina se'ns mostrarà una imatge com aquesta: Figura 6. 3: Menu 33 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV Aquesta imatge es tracta del mapa de les localitzacions de l'element “FirstFloor”. Com podem veure en la imatge el número 1 es correspon amb el plànol de l'element “FirstFloor”. Si la localització te subelements ( com en aquest cas) es mostraran les subimatges d'aquestos. La posició d'aquestes subimatges serà en respecte al plànol i clicant sobre elles es pot accedir a la seua pàgina. Si es tracta d'una localització s'accedirà al seu plànol i si es tracta d'un dispositiu s'accedirà a la seua informació. En la imatge, el número 2 fa referència a la subimatge de la localització “Kitchen”. El número 3 és tracta del dispositiu “KitchenLighting1”. Si una localització ( En aquest cas “FirstFloor ) te sublocalitzacions ( en aquest cas “Kitchen” ) que tenen dispositius a dintre d'ella ( en aquest cas “KitchenLighting1 ) aquestos també seran mostrats sobre la imatge, però clicant sobre ells no es podrà accedir a la seua informació. Aquests elements es representaran en relació al seua pare, o siga, a la posició 0,0 de la imatge de “Kitchen”. Si cliquem sobre la subimatge “Kitchen” se'ns mostrarà el següent: Figura 6. 4: Mapa de FirstFloor 34 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV Ara el que veiem és el plànol de “Kitchen” i la subimatge del dispositiu “KitchenLighting1” que en aquest cas si que es pot clicar. Com podem veure a la imatge, aquest dispositiu es troba encès així que si cliquem sobre ell podrem accedir a la seua informació i des d’ací podrem apagar-lo o realitzar altre tipus d’accions. Figura 6. 5: Mapa de Kitchen 35 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV En la primera imatge podem veure el que es mostra quan cliquem sobre la subimatge “KitchenLighting1”. La segona imatge és un altre exemple de la informació d'un altre tipus de Figura 6. 6: Informació sobre KitchenLighting1 Figura 6. 7: Informació sobre GradualLighting1 36 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV dispositiu. La informació que es mostra es la següent: − Imatge del dispositiu ( Opcional ) − Informació general ( obligatori ) − ID ( Identificador ) − Tunnel ( Túnel ) − Type ( Tipus ) − Profile ( Perfil ) − Address ( Adreça ) − Data Type ( Tipus de data ) − Propietats ( Opcional ) − Botons d'Acció ( Depenen del tipus de dispositiu ) − DEVICE_TYPE_SWITCH Figura 6. 8: Botons Device_type_switch − DEVICE_TYPE_PERCENTUAL_DIMMER Figura 6. 9: Botons Device_type_percentual_dimmer 37 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV − DEVICE_TYPE_PULSE − DEVICE_TYPE_SENSOR - DEVICE_TYPE_VERTICAL_MOVEMENT - DEVICE_TYPE_ANGULAR_DIMMER Figura 6. 10: Botons Device_type_pulse Figura 6. 11: Botons Device_type_percentual_dimmer Figura 6. 12: Botons Device_type_vertical_movement 38 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV Figura 6. 13: Botons Device_type_angular_dimmer - DEVICE_TYPE_HEX_DIMMER Figura 6. 14: Botons Device_type_hex_dimmer 7. Evolució de les versions Primera Versió − Domestica 1.0 : 24-03-10 − Domestica 1.1 : 28-04-10 − Domestica 1.2 : 19-05-10 Segona Versió − Domestica 2.0 : 07-10-10 − Domestica 2.1 ( Final ) : 07-10-10 39 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV 8. Estructura dels fitxers El fitxers estan estructurats de la següent forma: − src/beans: Directori on s’emmagatzemen totes les classes Java que componen la part Servidor de l'aplicació. Fitxers: − DevicePage.java: Classe encarregada de totes les accions relacionades amb els dispositius. − IP.java: Classe encarregada del canvi o establiment de una adreça IP. − LoadData.java: Classe encarregada de la lectura del fitxer XML amb la informació relacionada amb els elements de la casa. S'executa soles una vegada ( quan l'usuari carrega la pàgina) − LocationPage.java: Classe encarregada de totes les accions relacionades amb les localitzacions. − Tree.java: Classe encarregada de la creació del menú que es mostra a la part esquerra de la web. − src/objects: Directori on s’emmagatzemen tots els objectes utilitzats per les classes citades anteriorment. Figura 8. 1: Directori /SRC 40 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV − WebContent: Directori on s’emmagatzemen totes les aplicacions web utilitzades per l'aplicació. Fitxers: − index.jsp: És el primer fitxer que s'executa quan es carrega l'aplicació. L'únic que fa és cridar al fitxer home.xhtml. Podríem definir-lo com un fitxer pont. home.xhtml: Crea els components JSF per poder mostrar el disseny general de la web. A més a més crida a LoadData.java ( si és necessari ). − COPYING: llicència del projecte. − WebContent/images: Directori on s’emmagatzemen totes les imatges utilitzades en la web. − WebContent/UI: Directori on s’emmagatzemen tots els fitxers relacionats amb l'entorn gràfic de la web. Fitxers: − devices.xhtml: Crea els components JSF per poder mostrar els diferents elements relacionats amb els dispositius. − locations.xhtml: Crea els components JSF per poder mostrar els diferents elements relacionats amb les localitzacions. − tree.xhtml: Crea els components JSF per poder mostrar el menú. − WebContent/xml: Directori on s’emmagatzema el fitxer XML amb la informació sobre els dispositius i les localitzacions. Figura 8. 1: Directori /WebContent 41 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV − WebContent/WEB-INF: Directori creat automàticament durant la creació de l'aplicació que emmagatzema tota la metadata de l'aplicació. Fitxers: − web.xml: Proveeix la informació sobre configuració i utilització per als components web que componen l'aplicació. Descriu, entre altres, el servlet. − faces-config.xml: Fitxer de configuració del JSF. Llista les classes Java i defineix les regles de navegació. − WebContent/WEB-INF/lib: Directori on s’emmagatzemen les diferents llibreries utilitzades per l'aplicació. 9. Llicència Aquest projecte està registrat sota llicència GPL ( General Public Licence ) i per tant pot ser copiat, distribuït i modificat lliurement sempre que qualsevol modificació es continue distribuint amb la mateixa llicència GPL. Podeu trobar més informació sobre la llicència a les capçaleres dels fitxers del projecte així com també al fitxer WebContent/COPYING 48 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV Part V Apèndixs 49 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV 50 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV A. Estructura XML - Locations - Location - ID - ID - Name - name - SuperLocationIDRef - superLocationID - Image - URL - PosX - PosY - Width - Height - Sublocations - Sublocation - LocationIDRef - locationID - ClickeableArea - PosX - PosY - Width - Height - Thumbnail - URL - PosX - PosY - Width - Height - LocationDevices - LocationDevice 51 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV - DeviceIDRef - deviceID - ImagePosition - PosX - PosY - Width - Height - ThumbnailPosition - PosX - PosY - Width - Height - Devices - Device - ID - ID - Tunnel - tunelName - Type - deviceType - Profile - profile - Address - address - DataType - Platform - PlatformName - name - StateImage - StateImage - state - ImageFile - URL 52 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV - ThumbnailFile - URL - Properties - Property - Literal - Value 53 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV B. Primers passos amb JSF 2.0 B.1 Prerequisits - JRE ( Java Runtime Environment ) és el conjunt de programes i llibreries de Java necessaris per a executar aplicacions desenvolupades en aquest llenguatge de programació. Web: http://www.oracle.com/technetwork/java/javase/downloads/index.html - JDK ( Java Development Kit ) és un programari que proveu ferramentes de desenvolupament per a la creació de programes en Java. Web: http://www.oracle.com/technetwork/java/javase/downloads/index.html - Eclipse ( Java EE Developers ) és un entorn integrat de desenvolupament de codi obert programat principalment amb Java per desenvolupar projectes amb gairebe qualsevol llenguatge de programació. Web: http://www.eclipse.org/ - Apache Tomcat ( Core ) funciona com un contenidor de Servlets de codi obert desenvolupat per la Apache Software Foundation ( ASF ). Tomcat implementa les especificacions dels Servlets i de JSP. Web: http://tomcat.apache.org/index.html Instal·lem JRE, JDK i l’Eclipse i descomprimim el fitxer de Tomcat en qualsevol directori. Seguidament iniciem l’Eclipse i ens dirigim a Window -> Preferencies - > Server -> Runtime Environtment i cliquem el botó Add. Seleccionem la versió de Tomcat que hem descarregat ( en aquest projecte s’ha utilitzat Tomcat 6 ) i cliquem el botó Next. Ens apareixerà una finestra com aquesta: 54 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV Figura B. 1: Instal·lació Tomcat Aleshores cliquem en “Browser” i seleccionem el directori on hem descomprimit Tomcat. Finalment cliquem en “Download" and Install” i seguidament en “Finish” i ja tenim Tomcat instal·lat en Eclipse. B.2 Crear un nou projecte Per poder crear un nou projecte JSF crearem un “Dinamic web project” clicant en File -> New -> Project -> Web -> Dynamic Web Project. 55 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV Figura B. 2: Creació Web Dinàmica Cliquem en Next i en la següent finestra assignem el nom al projecte i seleccionem Apache Tomcat v6.0 ( o la versió que em instal·lat ) com a servidor predeterminat. Seguidament cliquem en Finish. 56 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV Figura B. 3: Crear Web Dinàmica 2 L’estructura per defecte dels fitxers del projecte és la següent: 57 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV Figura B. 4: Estructura fitxer per defecte B.3 Importar les llibreries Ara anem a http://javaserverfaces.java.net/ , descarreguem l’ultima versió de JSF 2 i descomprimim el fitxer. Per carregar les llibreries en Eclipse cliquem amb el botó secundari en el directori lib del projecte ( WebContent/WEB-INF/lib ) i seleccionem Import. En la nova finestra anem a General -> File System, cliquem en següent i després en Browser. Ara ens apareixerà una finestra on tenim que seleccionar el directori lib del fitxer descomprimit anteriorment. Finalment seleccionem els fitxers jsfapi.jar i jsf-impl.jar i cliquem en "Finnish". Figura B. 5: Importar Llibreries 64 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV Figura D. 1: Resultat Primefaces <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.prime.com.tr/ui"> <h:head> </h:head> <h:body> <p:breadCrumb> <p:menuitem value="Categories" url="#" /> <p:menuitem value="Sports" url="#" /> <p:menuitem value="Football" url="#" /> <p:menuitem value="Countries" url="#" /> <p:menuitem value="Spain" url="#" /> <p:menuitem value="F.C. Barcelona" url="#" /> <p:menuitem value="Squad" url="#" /> <p:menuitem value="Lionel Messi" url="#" /> </p:breadCrumb> </h:body> </html> 65 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV E. Importar Domestica Anem a File -> Import i en eixirà una finestra com la següent: Figura E. 1: Importar Projecte Cliquem sobre “Existing Projects into Workspace” i seguidament en el botó “Browser” de la nova finestra. Naveguem fins a la carpeta on es troba la carpeta “Domotica” i cliquem en Acceptar. Es recomanable copiar la carpeta del CD al disc dur abans d’importar-la, següent l’opció més recomanable la carpeta de treball d’Eclipse, anomenada “workspace”. Quan cliquem en Acceptar es mostra la següent finestra: 66 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV Figura E. 2: Importar Projecte 2 En la part central de la finestra es mostren tots el projectes existents a la carpeta seleccionada com arrel. Tenim que seleccionar “Domestica” i clicar en “Finish”. Finalment, per poder executar el projecte, soles tenim que clicar amb el botó secundari sobre el seu nom en el “Project Explorer” -> Run As -> Run On Server. 67 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV Figura E. 3: Executar Domestica F. Provar Domestica amb dispositius reals Durant el desenvolupament de Domestica, l’aplicació no ha pogut realitzar,en algunes ocasions, la connexió amb el servidor Servlet i per tant, algunes línies de codi han segut comentades per tal de facilitar el seu desenvolupament. Si es vol provar l’aplicació en una situació real, sols tindrem que descomentar les línies 175 i 256 del fitxer /src/beans/DevicesPage.java que criden a la funció requestHTTP que és l’encarregada de realitzar les peticions HTTP. _requestHTTP(DeviceType, Action); 68 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV G. Modificar Fitxer XML El fitxer XML es troba al directori WEBContent/xml. Podrem modificar-lo fent doble clic sobre el seu nom i seleccionant la pestanya “Source”. Figura G. 1: Modificar XML En canvi, si el que volem es utilitzar un altre fitxer XML, cliquem amb el botó secundari sobre la carpeta “xml” -> Import -> File System i seleccionem l’XML. 69 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV Figura G. 2: Importar XML Per últim, sols tindrem que modificar la línia 64 del fitxer /src/beans/LoadData.java Exemple: Si el nou Xml s’anomena new-xml.xml quedaria així: String filepath = context.getRealPath("xml/ScenarioSpecificationV0.3.xml"); String filepath = context.getRealPath("xml/new-xml.xml"); 70 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV H. Connexió amb el Servlet Aquest mètode es troba dins de la classe DevicePage i es l'encarregat de connectar amb el servlet per poder interactuar amb els dispositius. El mètode rep dos valors. El primer és el tipus de dispositiu: - es.upv.pros.tunnel.interfaces.IActuatorSwitch - es.upv.pros.tunnel.interfaces.IActuatorPulse - es.upv.pros.tunnel.interfaces.IActuatorVerticalMovement - es.upv.pros.tunnel.interfaces.IActuatorPercentualDimmer - es.upv.pros.tunnel.interfaces.IActuatorAngularDimmer - es.upv.pros.tunnel.interfaces.IActuatorHexDimmer - es.upv.pros.tunnel.interfaces.ISensor i el segon l'acció a realitzar sobre eixe dispositiu: - es.upv.pros.tunnel.interfaces.IActuatorSwitch - switchOn - switchOff - es.upv.pros.tunnel.interfaces.IActuatorPulse - pulse - es.upv.pros.tunnel.interfaces.IActuatorVerticalMovement - moveUp - moveDown - stop - es.upv.pros.tunnel.interfaces.IActuatorPercentualDimmer - setPercentualValue public void _requestHTTP(String DeviceType, String Action) { // Method that interact with the devices Map session = FacesContext.getCurrentInstance().getExternalContext() .getSessionMap(); String server = (String) session.get("server"); String requestUrl = "http://" + server + "/muteServlet/" + "?DeviceID=" + currentDevice.getId() + "&DeviceType=" + DeviceType + "&Action=" + Action; try { URL url = new URL(requestUrl.toString()); BufferedReader in = new BufferedReader(new InputStreamReader(url .openStream())); String state = in.readLine(); in.close(); } catch (IOException e) { e.printStackTrace(); } } 71 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV - on - off - es.upv.pros.tunnel.interfaces.IActuatorAngularDimmer - setAngularValue - es.upv.pros.tunnel.interfaces.IActuatorHexDimmer - setHexValue - es.upv.pros.tunnel.interfaces.ISensor - getState 72 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV I. Glossari De Termes JavaEE JavaEE( de l’anglès Java Platform, Enterprise ) és una plataforma de programació per desenvolupar i executar programari escrit amb el llenguatge Java amb una arquitectura distribuïda amb nivells, basada en components de programari, tot plegat executant-se en un servidor d'aplicacions. XUL XUL ( de l’anglès XML-based User-interface Language ) és un llenguatge basat en XML per la interfície d'usuari. XUL només proporciona la part gràfica, per tant, s'ha de fer servir altres llenguatges de programació per al funcionament d'un programa. JavaBean Els JavaBeans són un model de components creats per al desenvolupament d'aplicacions en Java. L'especificació de JavaBeans de Sun Microsystems els defineix com "components de programari reutilitzables que es puguen manipular visualment en una eina de desenvolupament". Per a funcionar com una classe JavaBean, una objecte classe ha d'obeir certes convencions sobre nomenclatura de mètodes, construcció, i comportament. Aquestes convencions permeten tenir eines que puguin utilitzar, reutilitzar, substituir, i connectar JavaBeans. Les convencions requerides són: - La classe ha de ser serializable (capaç de salvar persistentment i de restablir el seu estat). - Ha de tenir un constructor sense arguments. - Les seves propietats han de ser accessibles mitjançant mètodes get i set que segueixen una convenció de nomenclatura estàndard. - Ha de contenir determinats mètodes de maneig d'esdeveniments. 73 Desenvolupament d’una web per controlar la llar digital Projecte Final de Carrera – Francisco Faulí Tarazona Ing. Tècnica de Sistemes ETSINF – UPV Servlet Un Servlet és un programa que s’executa en un servidor o contenidor JEE especialment dissenyat per generar pàgines web de forma dinàmica a partir dels paràmetres de petició que envia el navegador web. La seua informació s’emmagatzema en el fitxer web.xml. Un exemple pot ser Tomcat. XML El llenguatge de marques extensible (de l’anglès eXtensible Markup Language) és un llenguatge extensible d’etiquetes desenvolupat per el “World Wide Web Consortium” (W3C) que permet definir la gramàtica de llenguatges específics. Per tant, XML no és realment un llenguatge en particular, sinó una manera de definir llenguatges per a diferents necessitats. XML és una tecnologia relativament senzilla que té al seu voltant altres que la complementen i la fan notablement més extensa, a més de proporcionar-li unes possibilitats molt més grans. A l'actualitat té un paper molt important, ja que permet la compatibilitat entre sistemes, permetent de compartir informació d'una manera segura, fiable i fàcil. Es pot utilitzar en una gran varietat d’aplicacions com poden ser les bases de dades, editors de text, fulles de càlcul, etc. API Una Interfície de Programació d'Aplicacions (de l’anglès Application Programming Interface) és un conjunt de declaracions que defineix el contracte d'un component informàtic amb qui farà ús dels seus serveis. Al moment de construir un sistema informàtic o llibreria de programació, per donar suport a les invocacions a serveis fetes per un altre programa, cal oferir una API, tant als programes externs (que podran usar els serveis oferts), com al programador (que disposa del manual indispensable per poder treure el màxim suc del component que ha adquirit). Sovint, una API és una part del Kit de Desenvolupament d'una Aplicació (SDK). L'API en si mateixa és abstracta en tant que especifica una interfície i no està lligada als detalls de la implementació. Quan un programari proveeix la funcionalitat descrita per una API, llavors diem que és una implementació de l'API. En aquesta abstracció apareixen la llista de variables públiques, funcions i