pg象财神攻略

書名： PrimeFaces Theme Development
作者名： Andy Bailey Sudheer Jonna
本章字數： 430字
更新時間： 2021-07-09 21:12:25

Creating a Mini Showcase page

In the following section, we will create pages with PrimeFaces components so that we can see how themes affect their look and feel. It is a mini showcase because we will not add every available PrimeFaces component.

Perform the following steps to create a Mini Showcase page:

Right-click on the chapter2 folder and move the mouse over New. Select the Facelets Template Client option and name it morecomponents.

Tip

For the book, we are developing a project that will be used to show off our own theme. This project is available in a GIT repository (see the Preface for the link). The file names that I used are those that I used in that project. You are of course free to choose your own filenames.
Choose chaptersTemplate as the page template and click on Finish.
Add an appropriate page title in the define name="title" tag. I used the following:
```
<ui:define name="title">
  A mini ShowCase of PrimeFaces components
</ui:define>
```

Then, add the following code in the content define tag. I included the define tag for completeness; the relevant code is highlighted:

<ui:define name="content">

  <h:form id="mainForm">
    <h:panelGrid columns="2">
      <p:outputLabel value="PrimeFaces Input:"/><p:inputText/>
      <p:outputLabel value="PrimeFaces Spinner"/><p:spinner/>
      <p:outputLabel value="PrimeFaces Panel"/>
      <p:panel header="An simple panel" toggleable="true"         toggleTitle="Click to close/open">
        <p:commandButton value="Show dialog" onclick=           "PF('simpleDialog').show();"process="@this"/>
      </p:panel>
    </h:panelGrid>
    <p:dataList value="#{themesService.themes}" var="theme">
      #{theme}
    </p:dataList>
    <p:dialog id="dialog1" widgetVar="simpleDialog"       modal="true">
      <p:commandButton id="closeDialog" value="Close the         dialog" onclick="PF('simpleDialog').hide();"         process="@this"/>
    </p:dialog>
  </h:form>

</ui:define>

There is no need to go into the different components here. The important thing is that we have a set of components with different features that will look different according to the theme currently being used.

Save the file and open chaptersTemplate. Then, add a link to the page that we just created by adding the following highlighted code to the Chapter 2 submenu:

<p:submenu id="chapter2" label="Chapter 2">
  <p:menuitem id="c2difference" value="Differences" url="/chapter2/difference.xhtml"/>
  <p:menuitem id="c2morecomponents" value="Mini Showcase" url="/chapter2/morecomponents.xhtml"/>
</p:submenu>

Now, save the changes that we made. To make sure that the project runs correctly, we need to clean and build the project before running it again.
When the project is up and running again, use the Chapter 2 submenu to navigate to the Mini Showcase page. You will see something similar to the following screenshot:

In the preceding screenshot, the afternoon theme was chosen. This is a good opportunity if you wish to try out the different available themes to see how things look.

The Show dialog button actually opens a modal dialog box, which contains a button to close the dialog box again. Try it to see how the dialog box looks. Note that we cannot change the current theme with the dialog box left open. This is because a modal dialog box masks the rest of the page and only allows interaction with the dialog box itself. We use a modal dialog box here because of the pane used to mask the rest of the page. It normally has a translucent background, but this can change depending on the theme.

官术网_书友最值得收藏!

PrimeFaces Theme Development

Creating a Mini Showcase page

Tip