понедельник, 23 апреля 2012 г.

JSF Примеры - создание шаблонов

При разработке веб приложения большинство страниц выглядят одинаково. Вместо того что-бы не создавать кучу ненужного кода, используются шаблоны. В JSF 2 предусмотрена гибкая система шаблонов. В основном мы будем использовать Facelet теги, такие как:

1. ui:composition - при добавлении аттрибута "template" ваша страница будет использовать шаблон указанный в значении аттрибута.
2. ui:insert - определяет область в которую будет вставлена информация в шаблон из страницы (аттрибут "name" тегов ui:insert и ui:define должны совпадать).
3. ui:define - Определяет область страницы, которая будет вставлена в шаблон.
4. ui:include - вставляет код отдельной страницы.

Базовая структура шаблона

<!DOCTYPE composition 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:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" xmlns:pretty="http://ocpsoft.com/prettyfaces">


<h:head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <h:outputStylesheet library="css" name="layout.css"></h:outputStylesheet> <ui:insert name="pageHeader" /></h:head><h:body>
<ui:insert name="headerBlock" />
                                <ui:include src="/pages/includes/defaultHeader.xhtml" /> 

        
</ui:insert>

<div id="content"> <ui:insert name="contentBlock">
                                                    <ui:include src="/pages/includes/defaultContent.xhtml" />

                                          </ui:insert> 
</div></h:body></html>

Это структура шаблона, которую я обычно использую. В head мы будем вставлять css для определенных страниц. Тэг ui:insert определяет область куда будет вставляться контент. Если для тэга ui:insert не указан соответствующий тэг ui:define, то по стандарту будет использоваться код находящийся внутри ui:insert. К примеру, в данном случае если мы не укажем <ui:define name="headerBlock">, то по стандарту будет использоваться  <ui:include src="/pages/includes/defaultHeader.xhtml" />.


Пример страницы с использованием шаблона



<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
template="/layout/template.xhtml">
        
<ui:define name="pageHeader">

          


<h:outputStylesheet library="css" name="page1.css"></h:outputStylesheet>
</ui:define>
        <ui:define name="headerBlock">

          This is the content of headerBlock.
</ui:define>
<ui:define name="contentBlock">
          This is the content of contentBlock.
</ui:define>

</ui:composition>
Для того что-бы ваша страница использовала шаблон необходимо добавить аттрибут template в тело тэга ui:composition.

Зная выше перечисленное вы сможете еффективно создавать шаблоны с помощью JSF 2 Facelets.

С уважением,
Netlink community member

Комментариев нет:

Отправить комментарий