Учебники

Apache Tapestry — Шаблоны

Октябрь 19, 2018

Давайте рассмотрим XML-шаблон Tapestry в этом разделе. Шаблон XML — это правильно сформированный документ XML. Уровень представления (пользовательского интерфейса) страницы представляет собой шаблон XML. Шаблон XML содержит обычную разметку HTML в дополнение к элементам, указанным ниже:

  • Пространство имен гобеленов
  • расширения
  • элементы
  • Компоненты

Давайте теперь обсудим их подробно.

Пространство имен гобеленов

Пространства имен Tapestry — это не что иное, как пространства имен XML. Пространства имен должны быть определены в корневом элементе шаблона. Он используется для включения компонентов Гобелена и информации, связанной с компонентами, в Шаблон. Наиболее часто используемые пространства имен следующие:

  • xmlns: t = «https://tapestry.apache.org/schema/tapestry_5_4.xsd» — используется для идентификации элементов, компонентов и атрибутов гобелена.

  • xmlns: p = «tapestry: параметр» — используется для передачи произвольных фрагментов кода компонентам.

xmlns: t = «https://tapestry.apache.org/schema/tapestry_5_4.xsd» — используется для идентификации элементов, компонентов и атрибутов гобелена.

xmlns: p = «tapestry: параметр» — используется для передачи произвольных фрагментов кода компонентам.

Пример пространства имен гобеленов следующий: 

<html xmlns:t = "https://tapestry.apache.org/schema/tapestry_5_3.xsd" 
   xmlns:p = "tapestry:parameter"> 
   
   <head> 
      <title>Hello World Page</title> 
   </head>  
   <body> 
      <h1>Hello World</h1> 
      <t:eventlink page = "Index">refresh page</t:eventlink> 
   </body> 
</html>

расширения

Расширение — это простой и эффективный метод динамического изменения шаблона XML на этапе отображения страницы. Расширение использует синтаксис $ {<name>}. Существует много вариантов выражения расширения в шаблоне XML. Давайте посмотрим некоторые из наиболее часто используемых вариантов —

Расширения недвижимости

Он отображает свойство, определенное в соответствующем классе Page. Это следует за Спецификацией Бина Java для определения свойства в классе Java. Это идет на один шаг дальше, игнорируя случаи для имени свойства. Давайте изменим пример «Hello World», используя расширение свойства. Следующий блок кода — это модифицированный класс Page. 

package com.example.MyFirstApplication.pages; 
public class HelloWorld {   
   // Java Bean Property 
   public String getName { 
      return "World!"; 
   } 
}

Затем измените соответствующий шаблон XML, как показано ниже. 

<html xmlns:t = "http://tapestry.apache.org/schema/tapestry_5_4.xsd"> 
   <head> 
      <title>Hello World Page</title> 
   </head> 
   <body> 
      <!-- expansion --> 
      <h1>Hello ${name}</h1> 
   </body> 
</html>

Здесь мы определили имя как Java Bean Property в классе Page и динамически обработали его в XML-шаблоне, используя расширение $ {name} .

Расширение сообщения

Каждый класс Page может иметь или не иметь связанный файл свойств — «page_name» .properties в папке ресурсов. Файлы свойств представляют собой простые текстовые файлы, имеющие одну пару ключ / значение (сообщение) на строку. Давайте создадим файл свойств для страницы HelloWorld по адресу —

«/Src/main/resources/com/example/MyFirstApplication/pages/helloworld.properties» и добавьте сообщение «Приветствие». 

Greeting = Hello

Приветственное сообщение можно использовать в шаблоне XML как $ {message: приветствие} 

<html xmlns:t = "http://tapestry.apache.org/schema/tapestry_5_4.xsd"> 
   <head> 
      <title>Hello World Page</title> 
   </head> 
   <body> 
      <!-- expansion --> 
      <h1>${message:greeting} ${name}</h1> 
   </body> 
</html>

элементы

Гобелен имеет небольшой набор элементов для использования в шаблонах XML. Элементы — это предопределенные теги, определенные в пространстве имен Tapestry —

https://tapestry.apache.org/schema/tapestry_5_4.xsd

Каждый элемент создан для определенной цели. Доступны следующие элементы гобелена:

<Т: тело>

Когда два компонента вложены, шаблон родительского компонента может обернуться шаблоном дочернего компонента. Элемент <t: body> полезен в этой ситуации. Одно из применений <t: body> находится в макете шаблона.

В общем случае пользовательский интерфейс веб-приложения будет иметь общий верхний колонтитул, нижний колонтитул, меню и т. Д. Эти общие элементы определены в шаблоне XML и называются «Компоновка шаблона» или «Компонент макета». В Tapestry он должен быть создан разработчиком приложения. Компонент Layout — это просто еще один компонент, который размещается в папке компонентов, которая имеет следующий путь — src / main / «java | resources» / «package_name» / components .

Давайте создадим простой компонент макета под названием MyCustomLayout . Код для MyCustomLayout выглядит следующим образом — 

<!DOCTYPE html> 
<html xmlns:t = "http://tapestry.apache.org/schema/tapestry_5_4.xsd"> 
   <head> 
      <meta charset = "UTF-8" />
      <title>${title}</title>  
   </head> 
   <body> 
      <div>Sample Web Application</div> 
      <h1>${title}</h1> 
      <t:body/> 
      
      <div>(C) 2016 TutorialsPoint.</div> 
   </body> 
</html> 


package com.example.MyFirstApplication.components;  

import org.apache.tapestry5.*; 
import org.apache.tapestry5.annotations.*; 
import org.apache.tapestry5.BindingConstants;  

public class MyCustomLayout { 
   @Property 
   @Parameter(required = true, defaultPrefix = BindingConstants.LITERAL) 
      private String title; 
}

В классе компонентов MyCustomLayout мы объявили поле заголовка и, используя аннотацию, сделали его обязательным. Теперь измените шаблон HelloWorld.html, чтобы использовать наш пользовательский макет, как показано в блоке кода ниже. 

<html>
   t:type = "mycustomlayout" title = "Hello World Test page"
      xmlns:t = "http://tapestry.apache.org/schema/tapestry_5_4.xsd"> 
   <h1>${message:greeting} ${name}</h1> 
</html>

Здесь мы видим, что шаблон XML не имеет тегов head и body. Tapestry будет собирать эти данные из компонента макета, и <t: body> компонента макета будет заменен шаблоном HelloWorld. После того, как все будет сделано, Tapestry выдаст аналогичную разметку, как указано ниже — 

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset = "UTF-8" /> 
      <title>Hello World Test Page</title> 
   </head> 
   <body> 
      <div>Sample Web Application</div> 
      <h1>Hello World Test Page</h1> 
      <h1>Hello World!</h1> 
      <div>(C) 2016 TutorialsPoint.</div> 
   </body> 
</html>

Макеты могут быть вложенными. Например, мы можем расширить наш пользовательский макет, включив функции администрирования, и использовать его для раздела администрирования, как указано ниже. 

<html t:type = "MyCommonLayout" 
   xmlns:t = "http://tapestry.apache.org/schema/tapestry_5_4.xsd"> 
   
   <div><!-- Admin related items --><div> 
   <t:body/> 
  
</html>

<Т: контейнер>

<T: container> является элементом верхнего уровня и включает пространство имен гобелена. Это используется для указания динамического раздела компонента.

Например, компоненту сетки может потребоваться шаблон, чтобы определить, как визуализировать его строки — tr (и столбец td) в таблице HTML. 

<t:container xmlns:t = "http://tapestry.apache.org/schema/tapestry_5_4.xsd"> 
   <td>${name}</td> 
   <td>${age}</td> 
</t:container>

<Т: блок>

<T: block> является заполнителем для динамического раздела в шаблоне. Как правило, блочный элемент не отображается. Только компоненты, определенные в шаблоне, используют блочный элемент. Компоненты будут динамически вводить данные в элемент блока и отображать их. Одним из популярных вариантов использования является AJAX .

Элемент блока обеспечивает точное положение и разметку для динамических данных, которые будут отображены. Каждый элемент блока должен иметь соответствующее свойство Java. Только тогда он может быть динамически обработан. Идентификатор элемента блока должен соответствовать правилам идентификатора переменной Java. Частичный образец приведен ниже. 

@Inject 
private Block block;  
<html t:type = "mycustomlayout" title = "block example" 
   xmlns:t = "https://tapestry.apache.org/schema/tapestry_5_4.xsd" 
   xmlns:p = "tapestry:parameter">  
<h1>${title}</h1>  
<!--  
   ... 
   ...  
--> 
<t:block t:id = "block"> 
   <h2>Highly dynamic section</h2> 
   I'v been updated through AJAX call 
   The current time is: <strong>${currentTime}</strong>
</t:block>  
<!--  
   ... 
   ...  
-->  
</html>

<Т: содержание>

Элемент <t: content> используется для указания фактического содержимого шаблона. В общем, вся разметка считается частью шаблона. Если указано <t: content>, будет рассматриваться только разметка внутри него. Эта функция используется дизайнерами для оформления страницы без компонента макета.

<Т: удалить>

<T: remove> является противоположностью элемента содержимого. Разметка внутри элемента удаления не считается частью шаблона. Он может использоваться только для комментариев на сервере и для целей проектирования.

активы

Активы — это статические файлы ресурсов, такие как таблицы стилей, изображения и файлы JavaScript. Обычно ресурсы помещаются в корневой каталог веб-приложения / src / main / webapp . 

<head> 
   <link href = "/css/site.css" rel = "stylesheet" type = "text/css"/>

Tapestry также обрабатывает файлы, хранящиеся в Java Classpath, как активы. Tapestry предоставляет расширенные возможности для включения активов в шаблон с помощью опции расширения.

  • Контекст — Возможность получить доступ к активам в веб-контексте.

Контекст — Возможность получить доступ к активам в веб-контексте. 

<img src = "${context:image/tapestry_banner.gif}" alt = "Banner"/>

asset — Компоненты обычно хранят свои собственные активы внутри jar-файла вместе с классами Java. Начиная с Tapestry 5.4, стандартным путем для хранения активов в classpath является META-INF / assets . Для библиотек стандартным путем для хранения активов является META-INF / assets / «имя_библиотеки» /. asset: также может вызывать context: extension для получения ресурсов из веб-контекста. 

<img src = "${asset:context:image/tapestry_banner.gif}" alt = "Banner"/>

Активы могут быть введены на страницу или компонент гобелена с помощью аннотации «Инъекция» и «Путь». Параметром для аннотации Path является относительный путь активов. 

@Inject 
@Path("images/edit.png") 
private Asset icon;

Параметр Path также может содержать символы Tapestry, определенные в разделе AppModule.java .

Например, мы можем определить символ skin.root со значением context: skins / basic и использовать его, как показано ниже — 

@Inject 
@Path("${skin.root}/style.css") 
private Asset style;

локализация

Включение ресурсов через гобелен обеспечивает дополнительную функциональность. Одна из таких функций — «Локализация». Гобелен проверит текущую локаль и включит соответствующие ресурсы.

Например, если текущая локаль установлена ​​как de , тогда edit_de.png будет включен вместо edit.png.

CSS

Гобелен имеет встроенную поддержку таблиц стилей. Tapestry будет внедрять tapestry.css как часть основного стека Javascript. Начиная с версии Tapestry 5.4, гобелен также включает фреймворк начальной загрузки . Мы можем включить нашу собственную таблицу стилей, используя обычный тег ссылки. В этом случае таблицы стилей должны находиться в корневом веб-каталоге — / src / main / webapp / . 

<head> 
   <link href = "/css/site.css" rel = "stylesheet" type = "text/css"/>

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

<head> 
   <link href = "${context:css/site.css}" rel = "stylesheet" type = "text/css"/>

Tapestry также предоставляет аннотацию Import для включения таблицы стилей непосредственно в классы Java. 

@Import(stylesheet="context:css/site.css") 
public class MyCommonLayout { 
}

Tapestry предоставляет множество опций для управления таблицей стилей через AppModule.java. Некоторые из важных вариантов —

  • Таблицу стилей по умолчанию для гобеленов можно удалить.

Таблицу стилей по умолчанию для гобеленов можно удалить. 

@Contribute(MarkupRenderer.class) 

public static void 
deactiveDefaultCSS(OrderedConfiguration<MarkupRendererFilter> configuration) { 
   configuration.override("InjectDefaultStyleheet", null); 
}

  • Bootstrap также можно отключить, переопределив его путь.

Bootstrap также можно отключить, переопределив его путь. 

configuration.add(SymbolConstants.BOOTSTRAP_ROOT, "classpath:/METAINF/assets");

  • Включить динамическую минимизацию активов (CSS и JavaScript). Нам также необходимо включить зависимость tapestry-webresources (в pom.xml).

Включить динамическую минимизацию активов (CSS и JavaScript). Нам также необходимо включить зависимость tapestry-webresources (в pom.xml). 

@Contribute(SymbolProvider.class) 
@ApplicationDefaults 

public static void contributeApplicationDefaults( 
   MappedConfiguration<String, String> configuration) { 
   
   configuration.add(SymbolConstants.MINIFICATION_ENABLED, "true"); 
} 

<dependency> 
   <groupId>org.apache.tapestry</groupId> 
   <artifactId>tapestry-webresources</artifactId> 
   <version>5.4</version> 
</dependency>

Клиентский JavaScript

Нынешнее поколение веб-приложений в значительной степени зависит от JavaScript, чтобы обеспечить богатый опыт работы на стороне клиента. Гобелен признает это и обеспечивает первоклассную поддержку JavaScript. Поддержка JavaScript глубоко укоренилась в гобеленах и доступна на каждом этапе программирования.

Раньше Tapestry поддерживала только Prototype и Scriptaculous. Но, начиная с версии 5.4, Tapestry полностью переписал слой JavaScript, чтобы сделать его как можно более универсальным и обеспечить первоклассную поддержку JQuery, де-факто библиотеки JavaScript. Кроме того, Tapestry поощряет программирование JavaScript на основе модулей и поддерживает RequireJS, популярную реализацию AMD на стороне клиента (Asynchronous Module Definition — спецификация JavaScript для поддержки модулей и их зависимости асинхронным образом).

Место нахождения

Файлы JavaScript являются активами приложения Tapestry. В соответствии с правилами активов файлы JavaScript размещаются либо в веб-контексте, / sr / main / webapp /, либо в банке под META-INF / assets / location .

Связывание файлов JavaScript

Самый простой способ связать файлы JavaScript в шаблоне XML — напрямую использовать тег script, который является — <script language = «javascript» src = «lative / path / to / js «> </ script> . Но гобелен не рекомендует эти подходы. Tapestry предоставляет несколько опций для связывания файлов JavaScript прямо в самой странице / компоненте. Некоторые из них приведены ниже.

  • @import annotation — @import annotation предоставляет возможность связать несколько библиотек JavaScript с помощью выражения контекста. Его можно применять как к классу Page, так и к его методу. Если применяется к классу Page, он применяется ко всем его методам. Применительно к методу страницы, он применяется только к этому методу, а затем Tapestry связывает библиотеку JavaScript только при вызове метода.

@import annotation — @import annotation предоставляет возможность связать несколько библиотек JavaScript с помощью выражения контекста. Его можно применять как к классу Page, так и к его методу. Если применяется к классу Page, он применяется ко всем его методам. Применительно к методу страницы, он применяется только к этому методу, а затем Tapestry связывает библиотеку JavaScript только при вызове метода. 

@Import(library = {"context:js/jquery.js","context:js/myeffects.js"}) 

public class MyComponent { 
   // ... 
}

  • Интерфейс JavaScriptSupport — JavaScriptSupport — это интерфейс, определенный гобеленом, и он имеет метод importJavaScriptLibrary для импорта файлов JavaScript. Объект JavScriptSupport может быть легко создан путем простого объявления и аннотирования с помощью аннотации @Environmental.

Интерфейс JavaScriptSupport — JavaScriptSupport — это интерфейс, определенный гобеленом, и он имеет метод importJavaScriptLibrary для импорта файлов JavaScript. Объект JavScriptSupport может быть легко создан путем простого объявления и аннотирования с помощью аннотации @Environmental. 

@Inject @Path("context:/js/myeffects.js") 
private Asset myEffects;  

@Environmental 
private JavaScriptSupport javaScriptSupport;  
void setupRender() { 
   javaScriptSupport.importJavaScriptLibrary(myEffects); 
}

  • JavaScripSupport может быть внедрен в компонент только с помощью аннотации @Environmental . Для сервисов нам нужно использовать аннотацию @Inject или добавить ее в качестве аргумента в метод конструктора сервисов.

JavaScripSupport может быть внедрен в компонент только с помощью аннотации @Environmental . Для сервисов нам нужно использовать аннотацию @Inject или добавить ее в качестве аргумента в метод конструктора сервисов. 

@Inject 
private JavaScriptSupport javaScriptSupport; 
public MyServiceImpl(JavaScriptSupport support) { 
   // ... 
}

  • метод addScript — аналогичен интерфейсу JavaScriptSupport за исключением того, что в нем используется метод addScript, а код напрямую добавляется в выходные данные в нижней части страницы.

метод addScript — аналогичен интерфейсу JavaScriptSupport за исключением того, что в нем используется метод addScript, а код напрямую добавляется в выходные данные в нижней части страницы. 

void afterRender() { 
   javaScriptSupport.addScript(
      "$('%s').observe('click', hideMe());", container.getClientId()); 
}

Стек JavaScript

Tapestry позволяет объединять группу файлов JavaScript и связанных таблиц стилей и использовать их как единый объект. В настоящее время Tapestry включает в себя стеки на основе Prototype и JQuery.

Разработчик может разработать свои собственные стеки путем реализации интерфейса JavaScriptStack и зарегистрировать его в AppModule.java . После регистрации стек можно импортировать с помощью аннотации @import .

47
Share: