| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |
| <html> | |
| <head> | |
| <title>Suport de JSF 2.0 en l'IDE NetBeans 7.2</title> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> | |
| <meta name="description" content="An article outlining JSF 2.0 support in NetBeans 7.2."> | |
| <meta name="keywords" content="NetBeans, IDE, integrated development environment, | |
| JavaServer Faces, JavaServer Faces 2.0, JSF, JSF 2.0"> | |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css"> | |
| <script src="../../../images_www/js/listCollapse.js" type="text/javascript"></script> | |
| </head> | |
| <body> | |
| <!-- | |
| Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved. | |
| --> | |
| <h1>Suport de JSF 2.0 en l'IDE NetBeans</h1> | |
| <p><img src="../../../images_www/articles/72/netbeans-stamp-72-73.png" class="stamp" | |
| title="El contingut d'aquesta pàgina s'aplica al IDE NetBeans 7.2" | |
| alt="El contingut d'aquesta pàgina s'aplica al IDE NetBeans 7.2" /></p> | |
| <p>Al coincidir amb el llançament de Java EE 6, l'IDE NetBeans 6.8 proporciona moltes característiques que permeten el suport incrustat per a JavaServer Faces 2.0. El nou IDE JSF 2.0 es basa en el seu anterior suport per JavaServer Faces, i inclou millores a l'editor versàtils per a pàgines Facelets, diverses facilitats per treballar amb classes d'entitat, i un conjunt d'assistents JSF per ales tasques comuns de desenvolupament, com la creació de beans JSF gestionats, plantilles Facelets i elements composats.</p> | |
| <p>Els següents temes demostren les característiques JSF 2.0 que estan a la vostra disposició quant treballeu en l'IDE NetBeans 6.8. Per provar les noves característiques JSF, <a href="https://netbeans.org/downloads/index.html">descarregueu el paquet Java de l'IDE NetBeans</a>, el qual inclou tecnologies Java Web i EE.</p> | |
| <h3>Continguts</h3> | |
| <ul id="collapsableList"> | |
| <li><a href="#support">Suport JSF 2.0 per a projectes</a> | |
| <ul> | |
| <li><a href="#creatingSupport">Creant un projecte nou amb suport JSF 2.0</a></li> | |
| <li><a href="#addingSupport">Afegint suport JSF 2.0 per a un projecte existent</a></li> | |
| </ul></li> | |
| <li><a href="#editor">Utilitzant l'editor</a> | |
| <ul> | |
| <!-- <li><a href="#java">Java Editor</a></li> --> | |
| <li><a href="#facelets">Editor de Facelets</a></li> | |
| <li><a href="#xml">Editor de configuració Faces XML</a></li> | |
| </ul></li> | |
| <li><a href="#wizard">Assistents JSF</a> | |
| <ul> | |
| <li><a href="#jsfPage">Assistent de pàgina JSF</a></li> | |
| <li><a href="#managedBean">Assistent Bean gestionat per JSF</a></li> | |
| <li><a href="#facesConfig">Assistent de configuració de Faces</a></li> | |
| <li><a href="#composite">Assistent de configuració de composició</a></li> | |
| <li><a href="#jsfPagesEntity">Pàgines JSF des de l'assistent de classes d'entitat</a></li> | |
| <li><a href="#faceletsTemplate">Assistent de plantilla Facelets</a></li> | |
| </ul></li> | |
| <li><a href="#entity">Suport per classes d'entitat</a> | |
| <ul> | |
| <li><a href="#jsfPages">Creant pàgines JSF des de classes d'entitat</a></li> | |
| <li><a href="#form">Diàleg de formulari des d'entitat</a></li> | |
| <li><a href="#dataTable">Diàleg de taula des de dades d'entitat</a></li> | |
| </ul></li> | |
| <li><a href="#palette">Components de la paleta JSF</a></li> | |
| <li><a href="#seealso">Vegeu també</a></li> | |
| </ul> | |
| <br> | |
| <h2 id="support">Suport JSF 2.0 per a projectes</h2> | |
| <p>El suport JSF per a projectes es pot categoritzar com s'exposa.</p> | |
| <ul> | |
| <li>Els fitxers de plantilla Facelets estan inclosos en el projecte</li> | |
| <li>Les biblioteques JSF 2.0 estan afegides al classpath del projecte</li> | |
| <li>Faces servlet i servlet mapping estan afegits al descriptor de desplegament del projecte</li> | |
| </ul> | |
| <p>Utilitzant the GlassFish server, o qualsevol altre servidor compatible amb Java EE 6, you podeu crear projectes amb suport JSF 2.0, o bé afegir suport JSF 2.0 a un projecte existent.</p> | |
| <ul> | |
| <li><a href="#creatingSupport">Creant un projecte nou amb suport JSF 2.0</a></li> | |
| <li><a href="#addingSupport">Afegint suport JSF 2.0 per a un projecte existent</a></li> | |
| </ul> | |
| <div class="indent"> | |
| <h3 id="creatingSupport">Creant un projecte nou amb suport JSF 2.0</h3> | |
| <p>Utilitzeu l'assistent de projecte de l'IDE per a crear una nova aplicació web Java. Per a fer-ho, Cliqueu al botó Nou projecte ( <img src="../../../images_www/articles/72/web/jsf20-support/new-project-btn.png" | |
| alt="botó Nou projecte"> ) de la barra d'eines principal de l'IDE, o premeu Ctrl-Maj-N (⌘-Mai-N a Mac). Quant arribeu al Pas 4: Frameworks, seleccioneu JavaServer Faces.</p> | |
| <div class="indent"> | |
| <img src="../../../images_www/articles/72/web/jsf20-support/new-proj-wizard-framework.png" | |
| alt="Nou assistent de projecte: Frameworks" class="b-all margin-around" | |
| title="Afegir el suport del Framework JSF quant creeu un projecte"> | |
| </div> | |
| <p>Després de seleccionar JavaServer Faces, es posen a la vostra disposició diverses opcions de configuració, com es mostra en la següent imatge. Podeu determinar com els vostre projecte accedeix a les biblioteques JSF 2.0. Cliqueu a la pestanya de configuració per especificar com Faces servlet serà registrat al descriptor de desplegament del projecte.</p> | |
| <div class="indent"> | |
| <img src="../../../images_www/articles/72/web/jsf20-support/jsf-configuration.png" | |
| alt="Pestanya de configuració" class="b-all margin-around" | |
| title="Especifica les preferències de Faces servlet sota la pestanya de configuració"> | |
| </div> | |
| <h3 id="addingSupport">Afegint suport JSF 2.0 per a un projecte existent</h3> | |
| <p>Si voleu afegir suport JSF 2.0 a una aplicació web Java existent, podeu fer-fo des de la finestra de propietats del projecte.</p> | |
| <ol> | |
| <li>En la finestra de projectes (Ctrl-1; &#8984-1 a Mac), cliqueu amb el botó dret al node del vostre projecte i seleccioneu Propietats. Es mostra la finestra de propietats del projecte.</li> | |
| <li>Seleccioneu la categoria Frameworks, després cliqueu al botó Afegir. En el diàleg que es mostra, seleccioneu JavaServer Faces. | |
| <br> | |
| Després de seleccionar JavaServer Faces, es posen a la vostra disposició diverses opcions de configuració, com especificar la ruta a les biblioteques JSF 2.0, i el registrament de Faces servlet al descriptor de desplegament del projecte.</li> | |
| </ol> | |
| </div> | |
| <br> | |
| <h2 id="editor">Utilitzant l'editor</h2> | |
| <p>L'editor de l'IDE és especific al llenguatge, i proporciona suport depenent amb el tipus de fitxer amb el qual esteu treballant. Parlant de forma general, podeu prémer Ctrl-Espai en un element del vostre fitxer per invocar l'aito-completat de codi i la documentació de l'API. Podeu prendre també les avantatges de les dreceres de teclat i de les plantilles de codi.</p> | |
| <p class="tips">Seleccioneu Ajuda > Targeta de dreceres de teclat, des del menú principal de l'IDE, per visualitzar les dreceres de teclat i plantilles de codi. Pel llistat complet, vegeu l'<a href="http://wiki.netbeans.org/KeymapProfileFor60">Especificació de les dreceres de teclat de l'IDE NetBeans 6.x</a>.</p> | |
| <p>El IDE proporciona suport integrat per a Javadoc de l'<a href="http://javaserverfaces.dev.java.net/nonav/docs/2.0/javadocs/index.html">API JSF 2.0</a>, com per exemple la <a href="http://javaserverfaces.dev.java.net/nonav/docs/2.0/pdldocs/facelets/index.html">Documentació de la biblioteca d'etiquetes</a> de JSF. Per agafa l'avantatge d'aquests recursos en el vostre treball, simplement premeu Ctrl-Espai en un element determinat de l'editor.</p> | |
| <p class="tips">Si preferiu accedir de forma contínua a la documentació Javadoc, podeu obrir la finestra Javadoc de l'IDE (Finestra > Altres > Javadoc). La finestra Javadoc es refresca automàticament depenent de la localització en la que es trobi el cursor en l'editor.</p> | |
| <p>Quant treballeu en un projecte JSF, els vostres esforços d'edició principalment es centraran als fitxers Facelets, beans gestionats per JSF, i el fitxer de configuració de Faces (<code>faces-config.xml</code>). To seguit mostrarem breument els siport d'edició que està a la vostra disposició.</p> | |
| <ul> | |
| <!-- <li><a href="#java">Java editor</a></li> --> | |
| <li><a href="#facelets">Editor de Facelets</a></li> | |
| <li><a href="#xml">Editor de configuració Faces XML</a></li> | |
| </ul> | |
| <div class="indent"> | |
| <!-- <h3 id="java">Java editor</h3> | |
| <p>[ Show image of API documentation for annotations used in managed beans, e.g., | |
| <code>ManagedBean</code>, <code>SessionScoped</code>, <code>ManagedProperty</code>. ]</p> --> | |
| <h3 id="facelets">Editor de Facelets</h3> | |
| <p>L'editor de Facelets de l'IDE proporciona nombroses característiques que faciliten el desenvolupament de JSF, incloent el ressaltament de la sintaxis i la comprovació d'errors per a etiquetes JSF, suport de documentació, i auto-completat d'expressions EL, biblioteques i espais de noms del nucli Facelets.</p> | |
| <p>Podeu prémer Ctrl-Espai per invocar l'auto-completat de codi i suport de documentació, allí on sigui aplicable.</p> | |
| <div class="indent"> | |
| <img src="../../../images_www/articles/72/web/jsf20-support/doc-support.png" class="b-all margin-around" | |
| alt="Mostrant l'auto-completat de codi i el suport de documentació al IDE" | |
| title="Premeu Ctrl-Espai per invocar l'auto-completat de codi i el suport de documentació"> | |
| </div> | |
| <p id="popup">Quant el vostre cursor no està posicionat en una etiqueta, premeu Ctrl-Espai per invocar un llistat de tots els elements. Igualment podeu accedir a aquests elements des de la <a href="#palette">Paleta</a> de l'IDE (Ctrl-Maj-8; ⌘-Maj-8 a Mac).</p> | |
| <p class="tips">També podeu escriure un prefix abans de prémer Ctrl-Espai, pex., <code>jsf</code>, per a filtrar elements.</p> | |
| <div class="indent"> | |
| <img src="../../../images_www/articles/72/web/jsf20-support/code-completion.png" | |
| alt="Llistat emergent d'auto-completat de l'editor de l'IDE" class="b-all margin-around" | |
| title="Premeu Ctrl-Espai en l'editor per invocar el llistat d'elements"> | |
| </div> | |
| <p>Podeu prémer Ctrl-Espai per a invocar l'auto-completat de codi pels espais de noms dels Facelets.</p> | |
| <div class="indent"> | |
| <img src="../../../images_www/articles/72/web/jsf20-support/namespace.png" | |
| alt="Llistat emergent d'auto-completat de l'editor de l'IDE" class="b-all margin-around" | |
| title="Premeu Ctrl-Espai per completar els espais de noms dels Facelets"> | |
| </div> | |
| <p>De forma similar, si escriviu una etiqueta JSF de la qual els espais de noms no han estat declarats en la pàgina, automàticament l'IDE els afegeix a les pàgines d'etiquetes <code><html></code>.</p> | |
| <p>L'editor proporciona suport d'auto-completat per a la sintaxis del llenguatge d'expressions (EL, de l'anglès Expression Language). Premeu Ctrl-Espai al codi EL per a invocar suggeriments per a objectes implícits, beans gestionats per JSF, i les seves propietats.</p> | |
| <div class="indent"> | |
| <img src="../../../images_www/articles/72/web/jsf20-support/el-code-completion.png" | |
| alt="Llistat emergent d'auto-completat per expressions EL" class="b-all margin-around" | |
| title="Premeu Ctrl-Espai en les expressions EL per a invocar el suport d'auto-completat per a objectes implícits, beans gestionats per JSF, i propietats bean"> | |
| </div> | |
| <p>També podeu ressaltar talls de codi en l'editor, i seleccionar Convertir a un component composat, en ordre de crear components compostos JSF. Per a més detalls vegeu l'<a href="#composite">Assistent de configuració de composició</a>.</p> | |
| <p>L'editor proporciona les capacitats comprovació d'errors bàsics. Un error es mostra amb un subratllat vermell i el seu corresponent distintiu al marge esquerra. Les advertències estan subratllades amb groc i denotades amb un distintiu groc al marge esquerra. Podeu desplaçar el ratolí pel text distintiu o subratllat per visualitzar la descripció de l'error.</p> | |
| <p>Quant introduïu les etiquetes JSF, es realitzen diverses comprovacions: Aquest inclou tant:</p> | |
| <ul> | |
| <li>l'existència la biblioteca declarada</li> | |
| <li>si la biblioteca correspon amb el prefix de l'etiqueta que conté tal component o etiqueta</li> | |
| <li>si l'etiqueta conté tots els atributs necessaris</li> | |
| <li>si tots els atributs introduïts estan definits en la interfície del components</li> | |
| </ul> | |
| <p>L'editor també comprova:</p> | |
| <ul> | |
| <li>l'existència de components sense declarar</li> | |
| <li>la presència de declaracions taglib sense usos</li> | |
| </ul> | |
| <h3 id="xml">Editor de configuració Faces XML</h3> | |
| <p>Si incloeu un fitxer <code>faces-config.xml</code> al vostre projecte JSF, podeu prémer Ctrl-Espai quant definiu les regles de navegació o quant declareu beans gestionats en ordre d'apropar el suport d'auto-completat i documentació.</p> | |
| <p>Si preferiu introduir regles de navegació i beans gestionats mitjançant diàlegs en lloc de fer-ho codificant, l'IDE proporciona diversos diàlegs JSF específics per aquest propòsit. Aquests són accessibles des del menú de l'editor amb el botó dret.</p> | |
| <div class="indent"> | |
| <img src="../../../images_www/articles/72/web/jsf20-support/faces-config-menu.png" | |
| alt="fitxer faces-config.xml - clic dret al menú" class="b-all margin-around" | |
| title="Els diàlegs JSF específics proporcionats en el menú de faces-config.xml amb el botó dret"> | |
| </div> | |
| <p>El IDE proporciona dos <em>visualitzacions</em> diferents pel fitxer <code>faces-config.xml</code>: la visualització XML, la qual mostra el codi font XM, i la visualització PageFlow, la qual és una interfície gràfica que representa les regles de navegació JSF definides en el fitxer <code>faces-config.xml</code>.</p> | |
| <p>Per exenmple si el vostre fitxer conté la següent regla de navegació:</p> | |
| <div class="indent"> | |
| <pre class="examplecode"><navigation-rule> | |
| <from-view-id>/greeting.xhtml</from-view-id> | |
| <navigation-case> | |
| <from-outcome>resposta</from-outcome> | |
| <to-view-id>/success.xhtml</to-view-id> | |
| </navigation-case> | |
| </navigation-rule></pre> | |
| </div> | |
| <p>La visualització PageFlow mostra les següents relacions, indicant que una navegació <code>greeting.xhtml</code> a <code>success.xhtml</code> es produeix quant "<code>resposta</code>" es passada al <code>NavigationHandler</code> del JSF.</p> | |
| <div class="indent"> | |
| <img src="../../../images_www/articles/72/web/jsf20-support/page-flow.png" | |
| alt="fitxer faces-config.xml: la visualització PageFlow" class="b-all margin-around" | |
| title="la visualització PageFlow mostra les relacions de navegació"> | |
| </div> | |
| <p>Clicar dues vegades a la visualització PageFlow us permet navegar directament al fitxer font. Per exemple, quant cliqueu dues vegades al component <code>greeting.xhtml</code>, el fitxer <code>greeting.xhtml</code> s'obre en l'editor. De la mateixa manera, si cliqueu dues vegades a la fletxa entre els dos components, l'editor focalitzarà la regla de navegació definida en la visualització XML de <code>faces-config.xml</code>.</p> | |
| </div> | |
| <br> | |
| <h2 id="wizard">Assistents JSF</h2> | |
| <p>L'IDE NetBeans proporciona nombrosos assistents que faciliten el desenvolupament amb JSF 2.0. Podeu crear noves pàgines Facelets, plantilles Facelets, beans gestionats amb JSF, components compostos, fitxers de configuració Faces, i més.</p> | |
| <p id="fileWizard">Tots els assistents són accessibles mitjançant l'assistent de fitxer genèric de l'IDE. Per accedir a l'assistent de fitxer, pitgeu el botó de Nou fitxer ( <img src="../../../images_www/articles/72/web/jsf20-support/new-file-btn.png" | |
| alt="botó de Nou fitxer"> ), o seleccioneu Fitxer &gt Nou fitxer, des del menú principal (o premeu Ctrl-N; &#8984-N a Mac). Els assistent específics de JSF són llistats dins de la categoria JavaServer Faces.</p> | |
| <div class="indent"> | |
| <img src="../../../images_www/articles/72/web/jsf20-support/file-wizard.png" | |
| alt="Assistent de fitxer: categoria JavaServer Faces seleccionada" class="b-all margin-around" | |
| title="Els assistents orientats a JSF són accessibles des de l'assistent de fitxer"> | |
| </div> | |
| <p>Els següents assistents estan a la vostra disposició quant treballeu amb projectes Java web amb suport JSF.</p> | |
| <ul> | |
| <li><a href="#jsfPage">Assistent de pàgina JSF</a></li> | |
| <li><a href="#managedBean">Assistent Bean gestionat per JSF</a></li> | |
| <li><a href="#facesConfig">Assistent de configuració de Faces</a></li> | |
| <li><a href="#composite">Assistent de configuració de composició</a></li> | |
| <li><a href="#jsfPagesEntity">Pàgines JSF des de l'assistent de classes d'entitat</a></li> | |
| <li><a href="#faceletsTemplate">Assistent de plantilla Facelets</a></li> | |
| </ul> | |
| <div class="indent"> | |
| <h3 id="jsfPage">Assistent de pàgina JSF</h3> | |
| <p>Utilitzeu l'assistent de pàgines JSF per a crear pàgines Facelets i JSP pages pel vostre projecte. En l'assistent de fitxer de l'IDE, seleccioneu la categoria JavaServer Face, després seleccioneu Pàgina JSF. En JSF 2.0, Facelets és la forma idònia de declarar pàgines JSF. L'opció Facelets en l'assistent està seleccionada per defecte. Seleccioneu l'opció de fitxer JSP si voleu crear noves pàgines JSP, o fragments de fitxers JSP (<code>.jspf</code>).</p> | |
| <div class="indent"> | |
| <img src="../../../images_www/articles/72/web/jsf20-support/jsf-file-wizard.png" | |
| alt="Assistent de fitxer JSF" class="b-all margin-around" | |
| title="Creeu pàgines Facelets utilitzant l'assistent de fitxer JSF de l'IDE"> | |
| </div> | |
| <h3 id="managedBean">Assistent Bean gestionat</h3> | |
| <p>Podeu crear beans gestionats JSF per a la vostra aplicació utilitzant l'assistent de Bean gestionat. Des de la categoria JavaServer Faces en l'<a href="#fileWizard">assistent de fitxer</a> de l'IDE, seleccioneu Bean gestionat JSF.</p> | |
| <p>Per defecte, qualsevol metadada que especifiqueu en l'assistent és traduïda a anotacions al bean gestionat un cop és generat. Per exemple, el la següent imatge, podeu crear una nova classe d'àmbit de sessió anomenada <code>NewJSFManagedBean</code> i anomenar-la <code>myManagedBean</code>.</p> | |
| <div class="indent"> | |
| <img src="../../../images_www/articles/72/web/jsf20-support/managed-bean.png" | |
| alt="Assistent Bean gestionat" class="b-all margin-around" | |
| title="Creeu beans gestionats mitjançant l'assistent bean gestionat de l'IDE"> | |
| </div> | |
| Quant el bean gestionat és generat, apareix amb les anotacions apropiades com es mostra. | |
| <pre class="examplecode">package my.org; | |
| import javax.faces.bean.ManagedBean; | |
| import javax.faces.bean.SessionScoped; | |
| <strong>@ManagedBean(name="myManagedBean")</strong> | |
| <strong>@SessionScoped</strong> | |
| public class NewJSFManagedBean { | |
| /** Crea una nova instància de NewJSFManagedBean */ | |
| public NewJSFManagedBean() { | |
| } | |
| }</pre> | |
| <p>També, si el vostre projecte ja conté un fitxer <code>faces-config.xml</code>, l'opció de l'assistent 'Afegeix dades al fitxer de configuració' es torna activa, permetent-vos tant declarar el bean gestionat el el fitxer de configuració de Faces, o tenir especificada qualsevol metadada per mitjà d'anotacions en el bean gestionat.</p> | |
| <h3 id="facesConfig">Assistent de configuració de Faces</h3> | |
| <p>JSF 2.0 introdueix anotacions com a alternativa del fitxer de configuració estàndard de Faces (<code>faces-config.xml</code>) per configurar la vostra aplicació. Tanmateix, quant afegiu suport JSF 2.0 al projecte, l'IDE <em>NOt</em> genera un fitxer predeterminat <code>faces-config.xml</code> (com era el cas de JSF 1.2). Naturalment, potser voleu afegir un fitxer <code>faces-config.xml</code> al vostre projecte en ordre de definir preferències de configuració concretes. Per a fer-ho, utilitzeu l'assistent de configuració de Faces de l'IDE.</p> | |
| <p>Des de la categoria JavaServer Faces de l'<a href="#fileWizard">Assistent de fitxer</a> de l'IDE, seleccioneu Configuració JSF Faces. Aquest us permet crear un nou fitxer <code>faces-config.xml</code>, el qual es fica a la carpeta del vostre projecte <code>WEB-INF</code> per defecte.</p> | |
| <p class="tips">Vegeu l'<a href="#xml">Editor de configuració XML de Faces</a> per a una descripció del suport de l'IDE per a <code>faces-config.xml</code>.</p> | |
| <h3 id="composite">Assistent de configuració de composició</h3> | |
| <p>JSF 2.0 ha simplificat el procés de creació de components compostos d'interfícies d'usuari (UI), els quals poden ser re-utilitzats en pàgines web. Podeu utilitzar l'assistent de components compostos per generar una plantilla Facelets per a un component composat JSF.</p> | |
| <p>Com tots els assistent relacionats amb JSF, podeu accedir a l'assistent de components composats des de la categoria JavaServer de l'<a href="#fileWizard">Assistent e fitxer</a> de l'IDE. Tanmateix, una manera més intuïtiva per a indicar l'assistent és mitjançant el ressaltament de talls de codi des dela pàgina de Facelets en l'editor, després seleccionat Convertir a un component compost des del menú del botó dret.</p> | |
| <p>El següent exemple mostra les accions que es produeixen, ficades a la vostra disposició, quant invoqueu l'assistent de component compost en el tall, '<code><p>Aquest és l'element compost.</p></code>'.</p> | |
| <div class="indent"> | |
| <img src="../../../images_www/articles/72/web/jsf20-support/convert-comp-component.png" | |
| alt="Editor Facelets - Convertiu a l'opció del menú Element compost" class="b-all margin-around" | |
| title="Ressalteu un tros, i seleccioneu Convertir a element compost des del menú del botó dret"> | |
| </div> | |
| <p>S'obre l'assistent d'element compost, contenint el tall seleccionat en la seca secció d'Implementació.</p> | |
| <div class="indent"> | |
| <img src="../../../images_www/articles/72/web/jsf20-support/comp-component.png" | |
| alt="Assistent d'element compost" class="b-all margin-around" | |
| title="l'assistent d'element compost conte el tal de codi seleccionat"> | |
| </div> | |
| <p>Per defecte, l'assistent crea una carpeta <code>ezcomp</code> per contenir els elements compostos. Per exemple, si esteu creant un nou component anomenat <code>myComponent</code>, l'assistent genera una pàgina Facelets <code>myComponent.xhtml</code>, que resideix en la carpeta <code>resources/ezcomp</code> de la vostra arrel d'aplicació web.</p> | |
| <p>Quant completeu l'assistent, el fitxer font de l'element compost és generat amb el tall de codi donat. La plantilla inclou una referència a la biblioteca d'etiquetes <code>composite</code> de JSF 2.0.</p> | |
| <pre class="examplecode"><?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:f="http://java.sun.com/jsf/core" | |
| xmlns:ui="http://java.sun.com/jsf/facelets" | |
| <strong>xmlns:composite="http://java.sun.com/jsf/composite"</strong>> | |
| <!-- INTERFÍCIE --> | |
| <composite:interface> | |
| </composite:interface> | |
| <!-- IMPLEMENTACIÓ --> | |
| <composite:implementation> | |
| <strong><p>Aquest és l'element compost.</p></strong> | |
| </composite:implementation> | |
| </html></pre> | |
| <p>també, una nova etiqueta de component és afegida a la localització de l'editor quant ressalteu un tall. En aquest cas, l'etiqueta generada és: <code><ez:myComponent/></code>. Denoteu que l'IDE afegeix automàticament l'espai de noms on resideix l'element compost a l'etiqueta de la pàgina <code><html></code>.</p> | |
| <div class="indent"> | |
| <img src="../../../images_www/articles/72/web/jsf20-support/comp-component-editor.png" | |
| alt="Assistent d'element compost" class="b-all margin-around" | |
| title="L'etiqueta del component és automàticament afegida a la vostra pàgina web"> | |
| </div> | |
| <h3 id="jsfPagesEntity">Pàgines JSF des de l'assistent de classes d'entitat</h3> | |
| <p>Vegeu el tema <a href="#jsfPages">Creant pàgines JSF des de classes d'entitat</a> sota <a href="#entity">Suport per a classes d'entitat</a>.</p> | |
| <h3 id="faceletsTemplate">Assistent de plantilla Facelets</h3> | |
| <p>Utilitzeu l'assistent de plantilla Facelets per generar una plantilla Facelets. Des de la categoria JavaServer Facesde l'<a href="#fileWizard">Assistent de fitxer</a> de l'IDE, seleccioneu la plantilla Facelets. Podeu seleccionat 8 estils de disseny únics, i especificar si el disseny està implementat amb etiquetes CSS o HTML <code><table></code>.</p> | |
| <div class="indent"> | |
| <img src="../../../images_www/articles/72/web/jsf20-support/template-wizard.png" | |
| alt="Assistent d'element compost" class="b-all margin-around" | |
| title="Creeu una plantilla Facelets mitjançant l'assistent de plantilles Facelets"> | |
| </div> | |
| <p>L'assistent crea un fitxer de plantilla XHTML mitjançant les etiquetes <code><h:head></code> i <code><h:body></code>, i situa les seves fulles d'estil en la carpeta <code>resources/css</code> de l'arrel de l'aplicació web. L'assistent genera un fitxer <code>default.css</code>, i un fitxer <code>cssLayout.css</code> o <code>tableLayout.css</code>, depenent de disseny que heu seleccionat.</p> | |
| <p class="tips">Per a visualitzar la plantilla al navegador, cliqueu amb el botó dret a l'editor i seleccionau Visualitzar. S'obre una finestra del navegador mostrant la plantilla.</p> | |
| </div> | |
| <br> | |
| <h2 id="entity">Suport per classes d'entitat</h2> | |
| <p>Si esteu utilitzant Persistència de Java en la vostra aplicació i teniu classes d'entitat basades amb l'esquema de la vostra base de dades, l'IDE proporciona un funcionalitat que us permet treballa de forma eficient amb les dades de la classe d'entitat.</p> | |
| <p><strong class="notes">Nota: </strong>Per crear classes d'entitat des d'una taula de la base de dades, utilitzeu les classes d'entitat de l'IDE des de l'assistent de bases de dades, accessible des de la categoria Persistència en l'<a href="#fileWizard">Assistent de fitxer</a> de l'IDE.</p> | |
| <ul> | |
| <li><a href="#jsfPages">Creant pàgines JSF des de classes d'entitat</a></li> | |
| <li><a href="#form">Creant un formulari JSF per a dades d'entitat</a></li> | |
| <li><a href="#dataTable">Creant una taula de dades JSF Pera dades d'entitat</a></li> | |
| </ul> | |
| <div class="indent"> | |
| <h3 id="jsfPages">Creant pàgines JSF des de classes d'entitat</h3> | |
| <p>Un cop tingueu les classes d'entitat en la vostra aplicació, podeu utilitzar les pàgines JSF de IDE des de l'assistent de classes d'entitat, per a crear interfícies web per a mostrar i editar les dades de la classe d'entitat. El codi generat per l'assistent està basat amb les anotacions de Persistència contingudes en la classe d'entitat.</p> | |
| <p>Per a cada classe d'entitat, l'assistent genera el següent:</p> | |
| <ul> | |
| <li>Un bean de sessió sense-estat per a la creació, recuperació, modificació i eliminació d'instàncies d'entitat</li> | |
| <li>un àmbit de sessió JSF, bean gestionat</li> | |
| <li>un directori que conté quatre fitxers Facelets files per a capacitats CRUD c(<code>Create.xhtml</code>, <code>Edit.xhtml</code>, <code>List.xhtml</code>, i <code>View.xhtml</code>)</li> | |
| <li>classes d'utilitat utilitzades pels beans gestionats JSF (<code>JsfUtil</code>, <code>PaginationHelper</code>)</li> | |
| <li>un paquet de propietats per als missatges localitzats, i una entrada corresponent en el fitxer de configuració Faces (Un fitxer <code>faces-config.xml</code> és creat si no n'hi existia cap.)</li> | |
| <li>fitxers web auxiliars, incloent una fulla d'estil pels components renderitzats, i un fitxer de plantilla Facelets</li> | |
| </ul> | |
| <p>Per utilitzar pàgines JSF des de l'assistent de classes d'entitat, <a href="#fileWizard">accediu a l'assistent de fitxer de l'IDE</a>. Seleccioneu la categoria JavaServer Faces, després seleccioneu Pàgines JSF des de classes d'entitat.</p> | |
| <p>Quant hageu arribat a l'envergadura del Pas 3: Generar pàgines i classes JSF, podeu especificar les localitzacions dels fitxers que seran generats.</p> | |
| <div class="indent"> | |
| <img src="../../../images_www/articles/72/web/jsf20-support/jsf-entity-wizard.png" | |
| alt="Pas 3: Generar pàgines i classes JSF" class="b-all margin-around" | |
| title="Especifiqueu les localitzacions dels fitxers que seran generats"> | |
| </div> | |
| <p>Per exemple, si esteu aplicant l'assistent al fitxer de la classe d'entitat <code>Customer</code>, les preferències de la següent imatge generaran els següents fitxers:</p> | |
| <table class="indent"> | |
| <tr> | |
| <td> | |
| <img src="../../../images_www/articles/72/web/jsf20-support/projects-win-generated-files.png" | |
| alt="Finestra projectes - fitxers generats des de l'assistent" class="b-all margin-around" | |
| title="La finestra de projectes mostra novament els fitxers generats"> | |
| </td> | |
| <td class="valign-top"> | |
| <ul style="margin-top:3em"> | |
| <li>Un fitxer <code>faces-config.xml</code> per registra la localització de les propietats del paquet que contenen el missatges localitzats per a les vistes JSF. Per exemple, especificant <code>/my/org/Bundle</code> pels noms dels paquets de localització en l'assistent genera la següent entrada: | |
| <pre class="examplecode" style="width:500px"> | |
| <application> | |
| <resource-bundle> | |
| <base-name>/my/org/Bundle</base-name> | |
| <var>bundle</var> | |
| </resource-bundle> | |
| </application></pre></li> | |
| <li>Una carpeta <code>customer</code> en l'arrel de la vostra web, que conté quatre fitxers Facelets per a les capacitats CRUD: | |
| <ul> | |
| <li><code>Create.xhtml</code>: Un formulari JSF per crear un nou comprador.</li> | |
| <li><code>Edit.xhtml</code>: Un formulari JSF per editar un comprador.</li> | |
| <li><code>List.xhtml</code>: Una taula de dades JSF per a desplaçar-se a través dels compradors.</li> | |
| <li><code>View.xhtml</code>: Un formulari JSF per a visualitzar els detalls dels compradors.</li> | |
| </ul></li> | |
| <li><code>jsfcrud.css</code>: Una fulla d'estil utilitzada per a renderitzar els formularis i les taules de dades JSF.</li> | |
| <li><code>template.xhtml</code>: Una pàgina de plantilla Facelets opcional, la qual inclou una referència a la fulla d'estil <code>jsfcrud.css</code> generada.</li> | |
| <li>Una sessió bean sense-estat (empresarial) anomenada <code>CustomerFacade</code>, que resideix en el paquet <code>my.org.data</code>. Aquesta classe pot ser igualment accedida des del node Beans empresarial del projecte.</li> | |
| <li><code>Bundle.properties</code>: Un paquet de propietats que contenen els missatges localitzats per a les vistes JSF.</li> | |
| <li>Un àmbit de sessió JSF, bean gestionat anomenat <code>CustomerController</code>, que resideix en el paquet <code>my.org.ui</code>.</li> | |
| <li>Dos classes d'utilitat (<code>JsfUtil</code> i <code>PaginationHelper</code>) que resideixen en el paquet <code>my.org.ui.util</code>. Aquestes son utilitzades pel bean gestionat <code>CustomerController</code>.</li> | |
| </ul> | |
| </td> | |
| </tr> | |
| </table> | |
| <h3 id="form">Creant un formulari JSF per a dades d'entitat</h3> | |
| <p>Podeu utilitzar el diàleg de formulari des d'entitat per generar un formulari JSF que contingui tots els camps continguts en una classe d'entitat. Heureu de tindre ja creat un bean gestionat JSF per a tractar qualsevol dada d'usuari associada amb el formulari.</p> | |
| <p><strong class="notes">Nota: </strong>Si utilitzeu aquest formulari sense tindre associat un bean gestionat, podeu introduir un nom pel bean gestionat en el diàleg, i aquest nom serà utilitzat en de la pàgina independent de si és vàlid o no. Després podeu crear un bean gestionat mitjançant l'<a href="#managedBean">assistent de bean gestionat</a> de l'IDE, o bé si utilitzeu l'<a href="#jsfPages">assistent de pàgines JSF des de classes d'entitat</a>, els beans gestionats són generats per a totes les classes d'entitat seleccionades.</p> | |
| <p>Podeu accedir al diàleg formulari des d'entitat o bé <a href="#popup">prement Ctrl-Espai en l'editor de la pàgina Facelets</a> després seleccionant Formulari JSF des d'entitat, o bé mitjançant doble clic a l'element del formulari d'entitat des del llistat de la <a href="#palette">Paleta</a> de l'IDE (Ctrl-Maj-8; ⌘-Maj-8 a Mac).</p> | |
| <p>Per exemple, en la següent imatge, una classe d'entitat <code>Customer</code> eja existeix en el paquet <code>my.org</code> del projecte donat. Un bean gestionat <code>customerController</code> temé ja existeix en el projecte donat, i el bean gestionat cinté una propietat anomenada <code>selected</code> la qual retorna un objecte <code>Customer</code>.</p> | |
| <div class="indent"> | |
| <img src="../../../images_www/articles/72/web/jsf20-support/jsf-form-from-entity.png" | |
| alt="Diàleg de formulari JSF des d'entitat" class="b-all margin-around" | |
| title="Utilitzeu el diàleg de formulari des d'entitat per a generar un formulari JSF utilitzant dades d'entitat"> | |
| </div> | |
| <p><strong class="notes">Nota: </strong>Seleccioneu l'opció 'Generar una vista de només lectura' per a crear un formulari que contingui camps de només lectura. Quan aquesta opció està seleccionada, l'IDE aplica les etiquetes <code><h:outputText></code> per als camps del formulari, mentre que les etiquetes <code><h:inputText></code> són aplicades on l'opció no està seleccionada.</p> | |
| <p>Quan completeu el diàleg, l'IDE genera el codi per a la vostra pàgina Facelets. Per exemple, una classe d'entitat <code>Customer</code> que contingui una propietat <code>customerId</code> es mostra amb el següent format:</p> | |
| <pre class="examplecode"><f:view> | |
| <h:form> | |
| <h1><h:outputText value="Create/Edit"/></h1> | |
| <h:panelGrid columns="2"> | |
| <h:outputLabel value="CustomerId:" for="customerId" /> | |
| <h:inputText id="customerId" value="#{customerController.selected.customerId}" title="CustomerId" required="true" requiredMessage="The CustomerId field is required."/> | |
| ... | |
| <em>[ Altres camps per ser afegits aquí ]</em> | |
| ... | |
| </h:panelGrid> | |
| </h:form> | |
| </f:view></pre> | |
| <p class="tips">Per a modificar la plantilla que ha generat el codi, cliqueu a l'enllaç Personalitzar la plantilla, dins del diàleg de formulari des d'entitat.</p> | |
| <h3 id="dataTable">Creat una taula de dades JSF per a dades d'entitat</h3> | |
| <p>Podeu utilitzar el diàleg de taula de dades des d'entitat per a generar una taula de dades JSF que contingui columnes per a totes les propietats contingudes en la classe d'entitat. En ordre d'utilitzar aquesta facilitat, heu de tenir ja creat un a bean gestions JSF per manipular les dades de rerefons assocades amb la classe d'entitat.</p> | |
| <p><strong class="notes">Nota: </strong>Si utilitzeu aquest diàleg sense tindre creat un bean gestionat associat, podeu introduir un nom pel bean gestionat en el diàleg, i aquest nom serà utilitzat en de la pàgina independent de si és vàlid o no. Després podeu crear un bean gestionat mitjançant l'<a href="#managedBean">assistent de bean gestionat</a> de l'IDE, o bé si utilitzeu l'<a href="#jsfPages">assistent de pàgines JSF des de classes d'entitat</a>, els beans gestionats són generats per a totes les classes d'entitat seleccionades.</p> | |
| <p>Podeu accedir al Diàleg taula de dades des d'entitat tant <a href="#popup">prement Ctrl-Espai en una pàgina Facelets de l'editor</a> després seleccionant Taula de dades JSF des d'entitat, o mitjançant doble clic a l'element Taula de dades des d'una entitat, llistat en la <a href="#palette">Paleta</a> de l'IDE (Ctrl-Maj-8; ⌘-Maj-8 a Mac).</p> | |
| <p>Per exemple, en la següent imatge, una classe d'entitat <code>Product</code> ja existeix en el paquet <code>my.org.entity</code> del projecte donat. Un bean gestionat <code>productController</code> també existeix en el projecte, i el bean gestionat conté un mètode anomenat <code>getProductItems()</code> el qual retorna un <code>Llistat</code> d'objectes <code>Product</code>.</p> | |
| <div class="indent"> | |
| <img src="../../../images_www/articles/72/web/jsf20-support/jsf-data-table-from-entity.png" | |
| alt="Diàleg taula de dades JSF des d'una entitat" class="b-all margin-around" | |
| title="Utilitzeu el diàleg de taula de dades des d'entitat per a generar una taula de dades JSF des de les dades d'una entitat"> | |
| </div> | |
| <p>Quan completeu el diàleg, l'IDE genera codi per a la vostra pàgina Facelets. Per exemple, una classe d'entitat <code>Product</code> que contingui una propietat <code>productId</code> és mostrada amb el següent format:</p> | |
| <pre class="examplecode"><f:view> | |
| <h:form> | |
| <h1><h:outputText value="List"/></h1> | |
| <h:dataTable value="#{productController.productItems}" var="item"> | |
| <h:column> | |
| <f:facet name="header"> | |
| <h:outputText value="ProductId"/> | |
| </f:facet> | |
| <h:outputText value="#{item.productId}"/> | |
| </h:column> | |
| ... | |
| <em>[ Altres columnes afegides aquí. ]</em> | |
| ... | |
| </h:dataTable> | |
| </h:form> | |
| </f:view></pre> | |
| <p class="tips">Per modificar la plantilla utilitzada per generar el codi, cliqueu a l'enllaç Personalitzar la plantilla dins del diàleg formulari des de taula de dades.</p> | |
| </div> | |
| <br> | |
| <h2 id="palette">Components de la paleta JSF</h2> | |
| <p>Quant treballeu amb pàgines Facelets, podeu prendre les avantatges de la Paleta de l'IDE per arrossegar i soltar etiquetes JSF dins de la pàgina. Podeu accedir a la Paleta tant seleccionant Finestra > Paleta, des del menú principal, o prémer Ctrl-Maj-8 (&#8984-Maj-8 a Mac).</p> | |
| <div class="indent"> | |
| <img src="../../../images_www/articles/72/web/jsf20-support/palette.png" | |
| alt="Paleta, amb la categoria JSF expandida" class="b-all margin-around" | |
| title="Utilitzeu la paleta de l'IDE per arrossegar i soltar els components JSF comuns damunt de la pàgina Facelets"> | |
| </div> | |
| <p class="tips">També podeu seleccionar Codi > Inserir codi (Alt-Ins; Ctrl-I a Mac) des del menú principal de l'IDE per invocar el llistat emergent que conté els components JSF específics continguts en la paleta.</p> | |
| <div class="indent"> | |
| <img src="../../../images_www/articles/72/web/jsf20-support/insert-code.png" | |
| alt="Llistat d'auto-completat de codi en l'editor de l'IDE" class="b-all margin-around" | |
| title="En l'editor, premeu Alt-Ins (Ctrl-I a Mac) per a invocar el llistat de components JSF específics"> | |
| </div> | |
| <p>La Paleta us proporciona cinc components JSF relacionats:</p> | |
| <ul> | |
| <li><strong>Metadades: </strong> Invoca un diàleg per afegir la parella nom-valor dins de les etiquetes de meetadades JSF. Per exemple, si especifiqueu '<code>myId</code>' i '<code>myValue</code>' com a parella nom-valor, es produeix el següent tros de codi: | |
| <pre class="examplecode"><f:metadata> | |
| <f:viewParam id='myId' value='myValue'/> | |
| </f:metadata></pre></li> | |
| <li><strong>Formulari JSF: </strong> Afegeix el següent tros de codi a la pàgina. | |
| <pre class="examplecode"><f:view> | |
| <h:form> | |
| </h:form> | |
| </f:view></pre></li> | |
| <li><strong>Formulari JSF des d'entitat: </strong>Invoca un diàleg que us permet associar dades des d'una classe d'entitat als camps continguts en un formulari JSF. Vegeu <a href="#form">Creant un formulari JSF per a dades d'entitat</a>.</li> | |
| <li><strong>Taula de dades JSF: </strong>Afegeix el següent tros de codi a la pàgina. | |
| <pre class="examplecode"><f:view> | |
| <h:form> | |
| <h:dataTable value="#{}" var="item"> | |
| </h:dataTable> | |
| </h:form> | |
| </f:view></pre></li> | |
| <li><strong>Taula de dades JSF des d'entitat: </strong>Invoca un diàleg que us permet associar dades des d'una classe d'entitat als camps continguts en una taula de dades JSF. Vegeu <a href="#dataTable">Creant una taula de dades JSF per a dades d'entitat</a>.</li> | |
| </ul> | |
| <div class="feedback-box"> | |
| <a href="/about/contact_form.html?to=3&subject=Feedback: JSF 2.0 Support in NetBeans IDE 6.8">Envia'ns la vostra opinió</a> | |
| </div> | |
| <br style="clear:both;"> | |
| <script type="text/javascript"> | |
| <!-- | |
| compactMenu('collapsableList', true, '± '); | |
| --> | |
| </script> | |
| </body> | |
| </html> |