Apache Goblen - Şablonlar

Bu bölümdeki Goblen XML Şablonunu ele alalım. XML Şablonu iyi biçimlendirilmiş bir XML belgesidir. Bir Sayfanın sunum (Kullanıcı Arayüzü) katmanı XML Şablonudur. Bir XML Şablonu, aşağıda verilen öğelere ek olarak normal HTML biçimlendirmesine sahiptir -

  • Goblen Ad Alanı
  • Expansions
  • Elements
  • Components

Şimdi bunları ayrıntılı olarak tartışalım.

Goblen Ad Alanı

Tapestry Ad Alanları, XML Ad Alanlarından başka bir şey değildir. Ad alanları şablonun kök öğesinde tanımlanmalıdır. Şablona Tapestry Bileşenlerini ve bileşenlerle ilgili bilgileri eklemek için kullanılır. En sık kullanılan ad alanları aşağıdaki gibidir -

  • xmlns: t = “https://tapestry.apache.org/schema/tapestry_5_4.xsd” - Goblenin Öğelerini, Bileşenlerini ve Niteliklerini tanımlamak için kullanılır.

  • xmlns: p = “tapestry: parameter” - Bileşenlere rastgele kod parçalarını iletmek için kullanılır.

Tapestry Ad Alanı örneği aşağıdaki gibidir -

<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>

Genişletmeler

Genişletme, Sayfanın işleme aşamasında XML Şablonunu dinamik olarak değiştirmek için basit ve etkili bir yöntemdir. Genişletme $ {<name>} sözdizimini kullanır. XML Şablonunda genişletmeyi ifade etmek için birçok seçenek vardır. En sık kullanılan seçeneklerden bazılarını görelim -

Mülk Genişletmeleri

Karşılık gelen Sayfa sınıfında tanımlanan özelliği eşler. Bir Java sınıfındaki özellik tanımı için Java Bean Spesifikasyonunu izler. Mülk adı durumlarını görmezden gelerek bir adım daha ileri gider. Mülk genişletmeyi kullanarak "Merhaba Dünya" örneğini değiştirelim. Aşağıdaki kod bloğu, değiştirilmiş Sayfa sınıfıdır.

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

Ardından, ilgili XML Şablonunu aşağıda gösterildiği gibi değiştirin.

<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>

Burada tanımladık name gibi Java Bean Property Sayfa sınıfında ve genişletme kullanılarak XML Şablonunda dinamik olarak işlendi ${name}.

Mesaj Genişletme

Her Sayfa sınıfının ilişkili bir Mülk dosyası olabilir veya olmayabilir - «page_name».propertieskaynaklar klasöründe. Özellik dosyaları, satır başına tek bir anahtar / değer çifti (mesaj) içeren düz metin dosyalarıdır. HelloWorld Sayfası için bir özellik dosyası oluşturalım: -

"/Src/main/resources/com/example/MyFirstApplication/pages/helloworld.properties" ve bir "Karşılama" mesajı ekleyin.

Greeting = Hello

Greeting message XML Şablonunda şu şekilde kullanılabilir: ${message:greeting}

<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>

Elementler

Tapestry, XML Şablonlarında kullanılacak küçük bir öğe setine sahiptir. Öğeler, Tapestry ad alanı altında tanımlanan önceden tanımlanmış etiketlerdir -

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

Her öğe belirli bir amaç için yaratılmıştır. Mevcut goblen unsurları aşağıdaki gibidir -

<t: body>

İki bileşen iç içe geçtiğinde, üst bileşenin şablonunun alt bileşenin şablonunu sarmalaması gerekebilir. <T: body> öğesi bu durumda kullanışlıdır. <T: body> kullanımlarından biri Şablon Düzeni içindedir.

Genel olarak, bir web uygulamasının Kullanıcı Arayüzünde bir Ortak Üstbilgi, Altbilgi, Menü vb. Bulunur. Bu ortak öğeler bir XML Şablonunda tanımlanır ve buna Şablon Düzeni veya Düzen Bileşeni adı verilir. Tapestry'de bir uygulama geliştiricisi tarafından oluşturulması gerekir. Düzen Bileşeni yalnızca başka bir bileşendir ve aşağıdaki yola sahip olan bileşenler klasörünün altına yerleştirilir:src/main/«java|resources»/«package_name»/components.

Adlı basit bir düzen bileşeni oluşturalım. MyCustomLayout. MyCustomLayout kodu aşağıdaki gibidir -

<!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 bileşen sınıfında bir başlık alanı bildirdik ve açıklama kullanarak bunu zorunlu hale getirdik. Şimdi, aşağıdaki kod bloğunda gösterildiği gibi özel düzenimizi kullanmak için HelloWorld.html şablonunu değiştirin.

<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>

Burada XML Şablonunun baş ve gövde etiketlerine sahip olmadığını görebiliriz. Tapestry bu ayrıntıları düzen bileşeninden toplayacak ve düzen bileşeninin <t: body> yerine HelloWorld Şablonu alacaktır. Her şey tamamlandıktan sonra, Tapestry aşağıda belirtildiği gibi benzer işaretlemeyi yayınlayacaktır -

<!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>

Düzenler yuvalanabilir. Örneğin, yönetim işlevselliğini ekleyerek özel düzenimizi genişletebilir ve aşağıda belirtildiği gibi yönetici bölümü için kullanabiliriz.

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

<t: kapsayıcı>

<T: container>, üst düzey bir öğedir ve bir duvar halısı ad alanı içerir. Bu, bir bileşenin dinamik bölümünü belirtmek için kullanılır.

Örneğin, bir ızgara bileşeninin bir HTML tablosu içinde kendi satırlarının - tr (ve sütun td) nasıl oluşturulacağını tanımlamak için bir şablona ihtiyacı olabilir.

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

<t: blok>

<T: block>, şablondaki dinamik bir bölüm için bir yer tutucudur. Genellikle, blok elemanı işlemez. Yalnızca şablonda tanımlanan bileşenler blok öğesi kullanır. Bileşenler, verileri dinamik olarak blok elemanına enjekte edecek ve oluşturacaktır. Popüler kullanım durumlarından biriAJAX.

Blok elemanı, işlenecek dinamik veriler için tam konumu ve işaretlemeyi sağlar. Her blok öğesinin karşılık gelen bir Java Özelliği olmalıdır. Ancak o zaman dinamik olarak işlenebilir. Blok elemanının kimliği, Java değişken tanımlayıcı kurallarına uymalıdır. Kısmi örnek aşağıda verilmiştir.

@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: içerik>

<T: content> öğesi, şablonun gerçek içeriğini belirtmek için kullanılır. Genel olarak, tüm işaretleme şablonun bir parçası olarak kabul edilir. <T: content> belirtilirse, yalnızca içindeki işaretleme dikkate alınacaktır. Bu özellik, tasarımcılar tarafından düzen bileşeni olmayan bir sayfa tasarlamak için kullanılır.

<t: kaldır>

<T: remove>, içerik öğesinin tam tersidir. Kaldırma öğesinin içindeki işaretleme, şablonun bir parçası olarak kabul edilmez. Yalnızca sunucu yorumları ve tasarım amaçları için kullanılabilir.

Varlıklar

Varlıklar, stil sayfaları, resimler ve JavaScript dosyaları gibi statik kaynak dosyalarıdır. Genellikle varlıklar web uygulaması kök dizinine yerleştirilir/src/main/webapp.

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

Tapestry ayrıca Java ClasspathVarlıklar olarak. Tapestry, genişletme seçeneği aracılığıyla Varlıkları şablona dahil etmek için gelişmiş seçenekler sunar.

  • Context - Varlıkları web bağlamında kullanılabilir hale getirme seçeneği.

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

asset- Bileşenler genellikle kendi varlıklarını Java sınıflarıyla birlikte jar dosyasında depolar. Tapestry 5.4'ten başlayarak, varlıkları sınıf yolunda depolamanın standart yoluMETA-INF/assets. Kitaplıklar için varlıkları depolamanın standart yolu şudur:META-INF/assets/«library_name»/. asset: ayrıca arayabilir context: varlıkları web bağlamından almak için genişletme.

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

Varlıklar, Enjekte ve Yol ek açıklaması kullanılarak Goblen Sayfasına veya Bileşene enjekte edilebilir. Yol açıklamasının parametresi, varlıkların göreli yoludur.

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

Path parameter ayrıca içinde tanımlanan Goblen sembollerini de içerebilir. AppModule.java Bölüm.

Örneğin, değer bağlamı olan skin.root adlı bir sembol tanımlayabiliriz: skins / basic ve aşağıda gösterildiği gibi kullanabiliriz -

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

Yerelleştirme

Goblen yoluyla kaynakları dahil etmek ekstra işlevsellik sağlar. Böyle bir işlevsellik "Yerelleştirme" dir. Tapestry, mevcut yerel ayarı kontrol edecek ve uygun kaynakları içerecektir.

Örneğin, mevcut yerel ayar şu şekilde ayarlanmışsa de, sonra edit_de.png edit.png yerine dahil edilecektir.

CSS

Goblen yerleşik stil sayfası desteğine sahiptir. Goblen enjekte edecektapestry.cssçekirdek Javascript yığınının bir parçası olarak. Tapestry 5.4'ten goblen şunları içerir:bootstrap css frameworkyanı sıra. Normal bağlantı etiketini kullanarak kendi stil sayfamızı dahil edebiliriz. Bu durumda, stil sayfaları web kök dizininde olmalıdır -/src/main/webapp/.

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

Tapestry, daha önce tartışıldığı gibi genişletme seçeneği aracılığıyla şablona stil sayfaları eklemek için gelişmiş seçenekler sunar.

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

Tapestry ayrıca stil sayfasını doğrudan Java sınıflarına dahil etmek için İçe Aktarma açıklaması sağlar.

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

Tapestry, stil sayfasını AppModule.java aracılığıyla yönetmek için birçok seçenek sunar. Önemli seçeneklerden bazıları:

  • Goblen varsayılan stil sayfası kaldırılabilir.

@Contribute(MarkupRenderer.class) 

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

  • Bootstrap, yolunu geçersiz kılarak da devre dışı bırakılabilir.

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

  • Varlıkların (CSS ve JavaScript) dinamik olarak küçültülmesini etkinleştirin. Dahil etmemiz gerekiyortapestry-webresources bağımlılık (pom.xml'de).

@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>

İstemci Tarafı JavaScript

Mevcut web uygulaması nesli, zengin istemci tarafı deneyimi sağlamak için büyük ölçüde JavaScript'e bağlıdır. Tapestry bunu kabul ediyor ve JavaScript için birinci sınıf destek sağlıyor. JavaScript desteği, goblenin derinliklerine işlemiştir ve programlamanın her aşamasında kullanılabilir.

Daha önce, Tapestry yalnızca Prototype ve Scriptaculous'u destekliyordu. Ancak, 5.4 sürümünden itibaren, tapestry, JavaScript katmanını olabildiğince genel hale getirmek ve JavaScript için fiili kitaplık olan JQuery için birinci sınıf destek sağlamak için tamamen yeniden yazdı. Ayrıca, goblen Modül tabanlı JavaScript programlamayı teşvik eder ve AMD'nin popüler bir istemci tarafı uygulaması olan RequireJS'yi destekler (Eşzamansız Modül Tanımı - modülleri ve eşzamansız bir şekilde bağımlılığını desteklemek için JavaScript özelliği).

yer

JavaScript dosyaları, Tapestry Uygulamasının varlıklarıdır. Varlık kurallarına göre, JavaScript dosyaları ya web bağlamına yerleştirilir,/sr/main/webapp/ veya kavanozun içine yerleştirilir META-INF/assets/ location.

JavaScript Dosyalarını Bağlama

XML Şablonundaki JavaScript dosyalarını bağlamanın en basit yolu, doğrudan komut dosyası etiketini kullanmaktır; <script language = "javascript" src = "relative/path/to/js"></script>. Ancak goblen bu yaklaşımları önermiyor. Tapestry, JavaScript dosyalarını doğrudan Sayfa / Bileşen içinde bağlamak için çeşitli seçenekler sunar. Bunlardan bazıları aşağıda verilmiştir.

  • @import annotation- @import ek açıklaması, bağlam ifadesini kullanarak birden çok JavaScript kitaplığını bağlama seçeneği sağlar. Hem Sayfa sınıfına hem de yöntemine uygulanabilir. Bir Sayfa sınıfına uygulanırsa, tüm yöntemlerine uygulanır. Bir Sayfanın Yöntemine uygulanırsa, yalnızca bu yönteme uygulanır ve ardından Tapestry, JavaScript kitaplığını yalnızca yöntem çağrıldığında bağlar.

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

public class MyComponent { 
   // ... 
}

  • JavaScriptSupport interface - JavaScriptSupport, goblen ile tanımlanan bir arayüzdür ve bir yöntemi vardır, importJavaScriptLibraryJavaScript dosyalarını içe aktarmak için. JavScriptSupport nesnesi, @Çevre ek açıklamasıyla basitçe bildirilerek ve açıklama eklenerek kolayca oluşturulabilir.

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

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

  • JavaScripSupport yalnızca bir bileşene enjekte edilebilir. @Environmentalek açıklama. Hizmetler için bir kullanmamız gerekiyor@Inject ek açıklama veya bunu hizmet yapıcı yönteminde bir bağımsız değişken olarak ekleyin.

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

  • addScript method - Bu, JavaScriptSupport arayüzüne benzer, tek farkı addScript yöntem ve kod doğrudan sayfanın altındaki çıktıya eklenir.

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

JavaScript Yığını

Tapestry, bir grup JavaScript dosyasının ve ilgili stil sayfalarının tek bir varlık olarak birleştirilmesine ve kullanılmasına izin verir. Şu anda, Tapestry, Prototip tabanlı ve JQuery tabanlı yığınlar içermektedir.

Bir geliştirici, aşağıdaki adımları uygulayarak kendi yığınlarını geliştirebilir JavaScriptStack arayüzüne kaydedin ve AppModule.java. Kayıt yapıldıktan sonra yığın,@import ek açıklama.

@Contribute(JavaScriptStackSource.class) 
public static void addMyStack(
   MappedConfiguration<String, JavaScriptStack> configuration) { 
   
   configuration.addInstance("MyStack", myStack.class); 
}  

@Import(stack = "MyStack") 
public class myPage { 
}
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved