Beranda > Info Trik Java > Membuat Halaman Web

Membuat Halaman Web

Februari 1, 2010

Dalam latihan ini Anda akan menciptakan dua halaman web untuk menampilkan data. Anda akan memodifikasi index.xhtml dihasilkan oleh IDE untuk menambahkan tabel yang menampilkan film-film dalam database. Anda akan kemudian membuat browse.xhtml untuk menampilkan rincian film ketika Anda klik “View” link dalam tabel. Anda juga akan membuat halaman template JSF yang digunakan oleh index.xhtml dan browse.xhtml.

Menciptakan template.xhtml

Anda akan pertama kali membuat template Facelets JSF template.xhtml yang digunakan dalam komposisi index.xhtml dan browse.xhtml halaman.

  1. Klik kanan Proyek DVDStore di jendela dan pilih New> Other.
  2. Pilih Facelets Template dalam kategori JavaServer Faces. Klik Next.
  3. Tipe template untuk Nama File dan pilih yang pertama tata letak CSS style.
  4. Klik Finish.Ketika Anda klik Finish, maka file template.xhtml dibuka di editor.         Template berisi kode standar berikut.
    <h:body>
    
        <div id="top">
            <ui:insert name="top"> Top </ ui: insert>
        </ div>
    
        <div id="content">
            <ui:insert name="content"> Konten </ ui: insert>
        </ div>
    
    </ h: body>
  5. Memodifikasi yang <ui:insert> elemen untuk mengubah nama yang dihasilkan standar untuk “tubuh”.
    <div id="content">
            <ui: insert name = "badan"> Konten </ ui: insert>
    </ div>
  6. Simpan perubahan Anda.

Tertutup konten dalam <ui:define name="body"> unsur index.xhtml dan browse.xhtml akan dimasukkan ke dalam lokasi diidentifikasi dengan <ui:insert name="body"> Konten </ ui: insert> dalam template.

Memodifikasi index.xhtml

Ketika Anda menciptakan aplikasi web, IDE secara otomatis halaman index.xhtml.     Dalam latihan ini Anda memodifikasi halaman untuk menampilkan daftar judul film.     Halaman JSF memanggil metode di Managed Bean JSF FilmController untuk mengambil     daftar film dan kemudian menampilkan tabel dengan judul film dan deskripsi.

  1. Memperluas Halaman Web folder dalam jendela Proyek dan terbuka index.xhtml dalam editor.The New Project wizard dihasilkan standar berikut index.xhtml halaman.
    <html xmlns = "http://www.w3.org/1999/xhtml"
          xmlns: h = "http://java.sun.com/jsf/html">
    <h:head>
            <title> Facelet Judul </ title>
        </ h: head>
        <h:body>
            Hello dari Facelets
        </ h: body>
    </ html>
  2. Memodifikasi halaman untuk menggunakan JSF <ui:composition> dan <ui:define> unsur dan menambahkan <h:form> elemen.
    <html xmlns = "http://www.w3.org/1999/xhtml"
      xmlns: h = "http://java.sun.com/jsf/html"
      xmlns: ui = "http://java.sun.com/jsf/facelets">
        <ui:composition template="./template.xhtml">
            <ui:define name="body">
                <h:form>
    
                </ h: form>
            </ ui: define>
        <ui:composition>
    </ html>

    Ketika Anda mulai mengetik tag, menambahkan IDE xmlns: ui = "http://java.sun.com/jsf/facelets" perpustakaan tag deklarasi.

    Itu <ui:composition> dan <ui:define> elemen yang digunakan dalam kombinasi dengan halaman     template yang akan Anda buat.     Itu <ui:composition> elemen referensi lokasi template yang akan digunakan oleh halaman ini.     Itu <ui:define> elemen referensi posisi dalam template yang kode tertutup akan menempati.

  3. Tambahkan navigasi berikut link yang memanggil sebelumnya dan berikutnya metode dalam JSF dikelola kacang.
        <ui:define name="body">
                <h:form>
                    <h:commandLink action="#{filmController.previous}" value="Previous #{filmController.pageSize}" rendered="#{filmController.hasPreviousPage}"/>
                    <h:commandLink action="#{filmController.next}" value="Next #{filmController.pageSize}" rendered="#{filmController.hasNextPage}"/> 
                </ h: form>
        </ ui: define>
  4. Tambahkan berikut DataTable elemen (dalam huruf tebal) untuk menghasilkan tabel untuk menampilkan item diambil.
                <h:form styleClass="jsfcrud_list_form">
                    <h:commandLink action="#{filmController.previous}" value="Previous #{filmController.pageSize}" rendered="#{filmController.hasPreviousPage}"/>
                    <h:commandLink action="#{filmController.next}" value="Next #{filmController.pageSize}" rendered="#{filmController.hasNextPage}"/>
                    <h: DataTable value = "# (filmController.filmTitles)" var = "item" border = "0" cellpadding = "2" cellspacing = "0" rowClasses = "jsfcrud_odd_row, jsfcrud_even_row" aturan = "semua" style = "border : solid 1px ">
                        <h:column>
                            <f:facet name="header">
                                <h:outputText value="Title"/>
                            </ f: facet>
                            <h:outputText value="#{item.title}"/>
                        </ h: kolom>
                        <h:column>
                            <f:facet name="header">
                                <h:outputText value="Description"/>
                            </ f: facet>
                            <h:outputText value="#{item.description}"/>
                        </ h: kolom>
                        <h:column>
                            <f:facet name="header">
                                <h:outputText value=" "/>
                            </ f: facet>
                            <h:commandLink action="#{filmController.prepareView}" value="View"/>
                        </ h: kolom>
                    </ h: DataTable>
                    <br/>
                </ h: form>
    
  5. Simpan perubahan Anda.

Halaman indeks akan menampilkan daftar judul film dalam database.         Setiap baris dalam tabel termasuk sebuah “View” link yang mengacu pada prepareView metode kacang dikelola.         Itu prepareView Metode kembali “browse” dan akan terbuka browse.xhtml.

  • Ketika Anda mengetik <f:facet> tag, IDE akan menambah xmlns: f = "http://java.sun.com/jsf/core perpustakaan tag deklarasi.

Menciptakan browse.xhtml

Anda sekarang akan menciptakan browse.xhtml untuk menampilkan rincian tentang film yang dipilih.     Anda dapat menggunakan Template Facelets Klien wizard untuk membuat halaman yang berbasis pada JSF Facelets template template.xhtml yang Anda buat.

  1. Klik kanan Proyek DVDStore di jendela dan pilih New> Other.
  2. Pilih Template Facelets Klien dalam kategori JavaServer Faces. Klik Next.
    Facelets Template in New File wizard
  3. Tipe browse untuk Nama File.
  4. Cari Template untuk halaman dengan mengklik Browse untuk membuka kotak dialog File People.
  5. Memperluas Halaman Web folder dan pilih template.xhtml. Klik Pilih File.
    Select Template dialog
  6. Pilih <ui:composition> untuk Root Generated Tag. Klik Finish.Ketika Anda klik Finish, maka file browse.xhtml dibuka di editor dengan kode berikut.
    <ui: komposisi xmlns: ui = "http://java.sun.com/jsf/facelets"
        template = ". / template.xhtml">
    
        <ui:define name="top">
            puncak
        </ ui: define>
    
        <ui:define name="body">
            badan
        </ ui: define>
    
    </ ui: komposisi>

    Anda dapat melihat bahwa file baru menentukan template.xhtml file dan bahwa <ui:define> tag mempunyai properti name = "tubuh"

  7. Tambahkan kode berikut (dalam huruf tebal) antara <ui:define> tag untuk membuat bentuk dan         memanggil metode dalam kacang dikelola FilmController untuk mengambil data dan mengisi formulir.
    <ui: komposisi xmlns: ui = "http://java.sun.com/jsf/facelets"
        template = ". / template.xhtml">
        xmlns: h = "http://java.sun.com/jsf/html"
        xmlns: f = "http://java.sun.com/jsf/core">
    
            <ui:define name="top">
                puncak
            </ ui: define>
    
            <ui:define name="body">
            
                <h:form>
                    <h:panelGrid columns="2">
                        <h:outputText value="Title:"/>
                        <h:outputText value="#{filmController.selected.title}" title="Title"/>
                        <h:outputText value="Description"/>
                        <h:outputText value="#{filmController.selected.description}" title="Description"/>
                        <h:outputText value="Genre"/>
                        <h:outputText value="#{filmController.category}"/>
    
                        <h:outputText value="Cast"/>
                        <h:outputText value="#{filmController.actors}"/>
    
    
                        <h:outputText value="Film Length"/>
                        <h:outputText value="#{filmController.selected.length} min" title="Film Length"/>
    
                        <h:outputText value="Language"/>
                        <h:outputText value="#{filmController.language}" title="Film Length"/>
    
                        <h:outputText value="Release Year"/>
                        <h:outputText value="#{filmController.selected.releaseYear}" title="Release Year">
                            <f:convertDateTime pattern="MM/dd/yyyy" />
                        </ h: outputText>
                        <h:outputText value="Rental Duration"/>
                        <h:outputText value="#{filmController.selected.rentalDuration}" title="Rental DUration"/>
                        <h:outputText value="Rental Rate"/>
                        <h:outputText value="#{filmController.selected.rentalRate}" title="Rental Rate"/>
                        <h:outputText value="Replacement Cost"/>
                        <h:outputText value="#{filmController.selected.replacementCost}" title="Replacement Cost"/>
                        <h:outputText value="Rating"/>
                        <h:outputText value="#{filmController.selected.rating}" title="Rating"/>
                        <h:outputText value="Special Features"/>
                        <h:outputText value="#{filmController.selected.specialFeatures}" title="Special Features"/>
                        <h:outputText value="Last Update"/>
                        <h:outputText value="#{filmController.selected.lastUpdate}" title="Last Update">
                            <f:convertDateTime pattern="MM/dd/yyyy HH:mm:ss" />
                        </ h: outputText>
                    </ h: panelGrid>
                    <br/>
                    <br/>
                    <h:commandLink action="#{filmController.prepareList}" value="View Semua List"/>
                    <br/>
                </ h: form>
    
            </ ui: define>
        </ ui: komposisi>
    </ html>

    Anda dapat melihat bahwa browse.xhtml dan index.xhtml akan menggunakan template halaman yang sama.

  8. Simpan perubahan Anda.
Kategori:Info Trik Java
%d blogger menyukai ini: