Salesforce
Developer.RU
Форум
Регистрация  |  Вход

Система шаблонов для Visialforce страниц. Templating with Visualforce

Продолжаю делиться полезными знаниями. Сегодня хотел бы рассказать о такой крайне полезной штуке как система шаблонов Salesforce. Сразу предлагаю вам ссылку на оригинал документации Templating with Visualforce.  Существует три возможных вариант включать visualforce куски кода друг в друга: - компоненты (visualforce custom components); - включение текущей страницы в шаблон с помощью <apex:composition> - подключение другой страницы в текущую  с помощью <apex:include>

Компоненты. Использовать в практике доводилось меньше всего по сравнению с остальными двумя вариантами. Суть заключается в том что вы отдельно кодируете часто повторяющийся на ваших страницах кусок кода в виде отдельного компонента, и потому в нужном месте страницы просто выводите с помощью специального тега. Вот как это выглядит: Создаем новый visualforce компонент с именем "MyTestComponent", для чего переходим в Setup->Develop->Components.



visualforce-component-1



<apex:component> <div style="display: inline-block; padding: 10px; border: 1px solid #ff0000;"> My Test Component </div> </apex:component>



Используем его просто вставив в любую страницу вот такой тег <c:MyTestComponent />. Я использовал для эксперимента страницу домашнюю страницу сайта, разработанного ранее. Вот что получилось:




<apex:page showHeader="false">



Hello for Salesforce Site! <br />

This is My Site Home page <br />



<c:MyTestComponent />



</apex:page>


visualforce-component-2



Дополнительная особенность компонента в том, что в него можно передавать параметры через атрибуты. Усложним наш код и посмотрим что получится:




<apex:component >

    <apex:attribute name="s" type="string" default="Default value for S attribute" description="test" />

    <div style="display: inline-block; padding: 10px; border: 1px solid #ff0000;">

        {!s}

    </div>

</apex:component>



<apex:page showHeader="false">



    Hello for Salesforce Site! <br />

    This is My Site Home page <br />



    <c:MyTestComponent />



    <c:MyTestComponent s="Custom Value!" />



</apex:page>


visualforce-component-3



<apex:include> Замечательный тег, который позволяет включить одну visualforce страницу в другую. Тут все просто. Пример приводить я думаю не стоит. Расскажу о нюансах. Если вы подгружаете страницу таким образом будьте готовы что лимиты на обе страницы будут считаться одни. Поэтому если у вас контроллеры обеих страницы работают на пределе, что такое включение просто приведет к ошибке. Я не люблю злоупотреблять этим тегом. Если все же встает такая задача как например включить кучу "тяжелых страниц" я предпочитаю делать загрузку и объединение отдельных страниц в одну с помощью javascript. Однако данный тег может оказаться полезным если заказчик хочет поменять название страницы в URL (в salesforce url на visualforce страницу имеют определенную структуру) и чтобы долго не мучаться создаем новую страницу с нужным названием и просто подгружаем в нее старую. Только потом никому про это не говорим :).



И наконец самый мой любимый и часто используемый способ использования системы шаблонов с помощью тега <apex:composition>. Суть данного способа заключается в том, что мы создаем шаблон (template) отмечаем в нем места куда будем вставлять изменяющиеся блоки, а в самой страницы вызываем данный шаблон и передаем ему нужные блоки. Этот способ просто незаменим при работе с внешними сайтом и порталом. Создаем шаблон. Это обычная visualforce страница с набором специальных тегов.



Давайте создадим страницу шаблона с тремя областями (block_1, block_2, block_3) куда будем помещать меняющийся контент




<apex:page showHeader="false" standardStylesheets="false" >



    <div style="padding: 10px; border: 1px solid #0000ff;">

        <h3>Header</h3>

        <apex:insert name="block_1" />

    </div>

    <div style="padding: 10px; border: 1px solid #0000ff;">

        <h3>Body</h3>

        <apex:insert name="block_2" />       



    </div>

    <div style="padding: 10px; border: 1px solid #0000ff;">

         <h3>Footer</h3>

        <apex:insert name="block_3" />     

    </div>



</apex:page>


Ничего сложного просто выделили синими границами три блока куда будем помещать меняющиеся данные. Отметить такое место и обозвать его можно с помощью тега <apex:insert name="some_block_name" /> Вот как выглядит страница если ее просто вызвать



visualforce-template-1



Теперь создадим страницу, которая будет использовать данный шаблон.




<apex:page showHeader="false" standardStylesheets="false" >



    <apex:composition template="MyTestTemplate">

        <apex:define name="block_1">

            <p>Content for Block_1</p>

        </apex:define>

        <apex:define name="block_2">

            <p>Content for Block_2</p>

        </apex:define>

        <apex:define name="block_3">

            <p>Content for Block_3</p>

        </apex:define>            

    </apex:composition>



</apex:page>


Вот что получается в итоге если вызвать такую страницу



visualforce-template-2



По шаблонам это все. Еще раз скажу последний способ является неотъемлемой частью при разработке сайтов, порталов в корпоративном стиле заказчика. Все статические элементы в header, footer и глобальное меню спокойно кладем в шаблон, который подключаем на всех страницах. Не забываем при этом про отключение стандартного шаблона salesforce c помощью атрибута showHeader в тебе <apex:page>, а так же я бы советовал отключить стандартные стили salesforce если вы не собираетесь их использовать, иначе они могут потом подкинуть пару проблем при верстке. Из последних статей вы узнали что такое site, customer portal и система шаблоном. Следующим шагом я объединю все эти понятия для того чтобы показать как можно создать на базе salesforce Authenticated Site (с возможностью для пользователей регистрироваться самостоятельно) и нашим корпоративным стилем.