JavaServer Faces (JSF), bileşen tabanlı, olay odaklı web arayüzleri oluşturmak için Java standart teknolojisidir. JavaServer Pages (JSP) gibi JSF, sunucu tarafındaki verilere ve mantığa erişime izin verir. Esasen sunucu tarafı yetenekleriyle dolu bir HTML sayfası olan JSP'nin aksine, JSF, mantıksal bir ağaçtaki biçimsel bileşenleri temsil eden bir XML belgesidir. JSF bileşenleri, HTML'den bağımsız olan ve uzak API'lara ve veritabanlarına erişim dahil olmak üzere tüm Java yeteneklerine sahip olan Java nesneleri tarafından desteklenir.
JSF gibi bir çerçevenin ana fikri, HTML, CSS ve JavaScript gibi istemci tarafı teknolojileri kapsüllemek (veya sarmak ) ve geliştiricilerin bu teknolojilerle fazla etkileşim kurmadan web arayüzleri oluşturmasına olanak sağlamaktır.
Bu makale, JSF'nin Java web uygulamaları için bileşen tabanlı kullanıcı arabirimi geliştirmeye yaklaşımının bir anlık görüntüsünü sunar. Basit örnekler, JSF'nin MVC mimarisini, olay modelini ve bileşen kitaplığını tanıtır. Örnekler arasında JSF 2.3'teki yeni özellikler yer alır ve bileşen kitaplığımız için PrimeFaces kullanacağız.
Gelişen JSF
Uzun süredir popüler olan JSF, son zamanlarda istemci tarafı JavaScript çerçeveleri de dahil olmak üzere Java uyumlu web çerçevelerinden rekabetle karşılaştı. Yine de JavaServer Faces, özellikle büyük ölçekli Java kurumsal geliştirme için Java standardı olmaya devam etmektedir. JSF spesifikasyonu, son istemci tarafındaki iyileştirmelere ayak uyduran çok sayıda çerçeve ve kitaplık da ortaya çıkardı. Bunlardan biri, bu eğitimde keşfettiğimiz PrimeFaces.
Gelecekteki geliştirme programı net olmasa da, JSF 2.3, geliştiricilere biz beklerken üzerinde çalışacakları bol miktarda olanak sağlar. Mart 2017'de piyasaya sürülen JSF 2.3, JSF'yi modernize etmek için kasıtlı olarak tasarlandı. Birkaç yüz küçük onarım ve daha büyük güncelleme arasında, JSF 2.3, yönetilen fasulye ek açıklamalarını, bu öğreticide daha sonra tanıtacağım CDI lehine kullanımdan kaldırıyor.
Jakarta EE'de JSF 2.3
Eylül 2017'de Oracle, Java EE'yi Eclipse Foundation'a geçirme niyetini duyurdu. Java EE, o zamandan beri Jakarta EE olarak yeniden markalandı ve devamı için JSF 2.3 (Eclipse Mojarra) benimsendi. JSF spesifikasyonunun bir sonraki ana sürümü Eclipse Mojarra 3.0 olacak.
JSF'de bileşen tabanlı web arayüzleri oluşturma
JSF'nin temel fikri, işlevselliği yeniden kullanılabilir bileşenlere kapsüllemektir. Bu, JSP'de kullanılan yeniden kullanılabilir etiketlere benzer, ancak JSF bileşenleri daha resmidir.
JavaServer Pages içinde JSF sayfalarını kullanabilirsiniz, ancak bağımsız JSF sayfaları oluşturmak için Facelets kullanmak daha yaygındır. Facelets , JSF arayüzlerini tanımlamak için tasarlanmış XHTML sayfalarıdır. Facelets ile, bir JSF kullanıcı arabirimi için yapı iskelesi haline gelen bir bileşen ağacı oluşturmak için XML etiketlerini kullanırsınız.
Liste 1, Facelets kullanılarak yazılmış basit bir JSF sayfasının ana bölümlerini sunar. Bu örnekte, Java'nın sunucu tarafı yeteneklerine CDI aracılığıyla kapsama yerleştirilen bir fasulye aracılığıyla erişiyoruz. CDI hakkında daha sonra daha fazlasını göreceksiniz.
Liste 1. JSF örnek sayfası
Hello JavaWorld! #{javaBean.content}
Liste 1'de standart bir XHTML sayfası görüyoruz. XHTML üzerine bir Facelets görünümü oluşturulmuştur. XHTML ad alanına ek olarak, ikincil bir ad alanı tanımlanır ve başvurulur.
hKütüphane MTU HTML sayfalarında kullanım için standart bileşenler içerir.
//xmlns.jcp.org/jsf/htmlKütüphane bu durumda, ortak HTML öğelerinin bir koleksiyon JSF bileşenleri bir koleksiyon tanımlar. Bu bileşenlerden biri de
elementtir.
JSF'de HTML bileşenleri
Sözdizimi açısından, Liste 1'in
öğesi
jsf/htmlkitaplığa
hönekle başvurur. Daha sonra, bileşen olan kitaplık içindeki belirli bileşene
headbaşvurur.
Bileşeni HTML kafa elemanı verir. (Tüm bu sözdizimi bu kadar basit bir amaç için aşırı gibi görünebilir, ancak kısaca göreceğiniz gibi bunun için iyi bir neden var.)
İç içe yerleştirme bileşenleri
Kafanın içine standart bir HTML
öğesi yerleştirilmiştir. Bu öğe,
içeriğin iç içe geçmiş içerik alt öğeleriyle birlikte bileşene sağlanır .
Belgenin gövdesinde,
#{}sözdizimi tarafından bir JSF ifadesi bulunur . Bu,
${}biçimiyle bir JSP ifadesine tam olarak benzer : kapsamdaki Java nesnelerine ve basit işlevlere erişime izin verir.
JSF için temel model basittir: Bir bileşen kitaplığına veya kitaplıklara başvuran bir XML ağacı oluşturmak için Facelets'i kullanın, ardından Java nesnelerini HTML olarak işlemek için kitaplık içindeki bileşenleri kullanın.
JSF'de Java nesnelerini kullanma
Liste 1'e dönersek, JSF ifadesinin (
${javaBean.content)
javaBeaniçinde, bu işaretleme yürütüldüğünde nesnenin kapsam içinde olduğuna dikkat edin . Facelets'in XHTML'si
.content,
javaBeannesne üzerindeki özelliğe erişir . Son çıktı, Facelets görünüm yapısını Java'nın sunucu tarafı verileri ve mantık yetenekleriyle birleştiren bir web arayüzüdür.
JSF ifadesi kullanmak, JSF kullanıcı arayüzünden Java uygulama verilerine erişmenin yalnızca bir yoludur. Sonunda, bir JSF bileşeninin Java arka ucu ile etkileşime girebileceği diğer yolları araştırmak isteyeceksiniz - veri listeleri, ızgaralar ve çeşitli giriş kontrolleri gibi şeyler. Şimdilik, JSF'nin, Java nesnelerinde bulunan verilere dayalı olarak HTML çıktısı veren bir bileşen ağacı oluşturmak için XML etiketlerini (veya ek açıklamaları) nasıl kullandığını anlamak yeterlidir.
Ek açıklamalar ve XML
JSF 2.3 ile JSF bileşenlerini ek açıklamalarla tanımlamak, XML meta verilerini tamamen kullanmaktan kaçınmak mümkün hale geldi. Herhangi bir XML'yi düzenlemeden bir JSF uygulaması tanımlamak ve dağıtmak tamamen mümkündür.
JSF uygulamasının yapısı
JavaServer Pages ve Servlet API gibi JavaServer Faces de standart bir dizin yapısı ve meta veri gerektirir. Bunlar .war dosyaları olarak konuşlandırılır .
.War dosyasının yapısı Servlet veya JSP uygulamasına benzer. Bu bir içeriyor
/web-app(bu durumda HTML, JSP ve Facelet'lerin) uygulamanın biçimlendirme dosyaları tutar dizini yanı sıra bir
/WEB-INFmeta uygulamasını açıklamak için hediyeler dizinini.
JSF sunma
JSF'yi Glassfish gibi bir Java EE kabında çalıştırabilseniz de, gerçekten ihtiyacınız olan tek şey basit bir servlet kabıdır. Tomcat, JSF ve diğer sunucu tarafı Java teknolojileri için popüler bir kapsayıcıdır.
JSF 2.3: Özellikler ve uygulamalar
Java'nın güçlü yönlerinden biri, standartlara dayalı olması ve bu standartların bir açık kaynak topluluk süreci tarafından yönetilmesidir. Java Community Process (JCP), başlangıcından beri Java teknolojisinin gelişimini denetlemektedir. Bir spesifikasyon veya spesifikasyon iyileştirmesi JCP tarafından geliştirilip onaylandıktan sonra, birden fazla tarafça uygulanmaya hazır hale gelir. Yakın zamana kadar, Servletler, JSP ve JSF, JCP'nin açık kaynak belirtim süreci kullanılarak geliştirildi.
Bu yazı itibariyle en son JSF belirtimi, 2017'de Java EE 8'in bir parçası olarak yayınlanan JSF 2.3'tür. Oracle'ın (şimdi Eclipse'nin) Mojarra'sı JSF referans uygulamasıdır ve MyFaces ve PrimeFaces, popüler üçüncü taraf uygulamalarıdır.
Bu çerçevelerin her biri, bazı standart bileşenleri içeren JSF çekirdeğini uygular. Satıcılar, standardın yanı sıra ek bileşen kitaplıkları da sunabilir. JSF çerçevelerini değerlendirirken, uygulamanızın ihtiyaçlarını ve onu oluşturmanıza yardımcı olacak hangi bileşen kitaplıklarının mevcut olduğunu göz önünde bulundurmak iyi bir fikirdir. İdeal olarak, JSF çerçeveniz sizi kutudan çıkarır çıkarmaz ihtiyacınız olan şeye mümkün olduğunca yaklaştırmalıdır.
JSF 2.3'te MVC
JSF, model-görünüm-denetleyici modelini uygulayan bir MVC çerçevesidir . MVC modelinde fikir, bir UI'nin üç endişesini ayrı parçalara ayırmaktır, böylece yönetilmeleri daha kolaydır. Genel olarak görünüm , modeldeki verilerin görüntülenmesinden sorumludur ve kontrolör , modeli kurmaktan ve kullanıcıyı doğru görünüme yönlendirmekten sorumludur.
Bir JSF uygulamasında, görünüm, XML etiketleri kümesiyle birlikte Facelets sayfasıdır. Bunlar, kullanıcı arayüzünün düzenini tanımlar. JSF kullanmanın diğer yarısı, Java sınıflarının bu UI bileşenlerini desteklediği sunucu tarafıdır.
JSF 2.3'te kullanımdan kaldırılan yönetilen çekirdekler
Yönetilen fasulye ek açıklamaları JSF 2.3'te kullanımdan kaldırıldı ve yerini CDI (Bağlamlar ve Bağımlılık Enjeksiyonu) aldı. CDI ile geliştiriciler bir bağlam tanımlar ve bu bağlama nesneler enjekte eder. Yönetilen çekirdeklere aşina olanlar, ek açıklama sözdizimini biraz farklı bulacak, ancak anlambilim tamamen aynı kalacak.
Denetleyici fasulye
JSF 2.3'te, denetleyici çekirdekleri , MVC denkleminin denetleyici bölümünü sağlar. Normal Java nesneleri (genellikle POJO'lar olarak adlandırılır veya düz eski Java nesneleri) modeli sağlar.
Süreç akışı açısından, kontrolör çekirdekleri:
- Kullanıcı isteklerinin nereye yönlendirileceğine karar verin
- Model için POJO'ları ayarlayın
- Facelets görünümünü oluşturmak için modeli kullanın
JSF daha sonra, çıktı HTML'sini oluşturmak için bileşen ağacını ve modeli birlikte katlar.
Liste 2,
javaBeannesneyi CDI kullanarak Liste 1'den nasıl tanımlayacağınızı gösterir . Bu liste, uygulamanın bağımlılıklarında cdi-api-1.2.jar'a sahip olduğunu varsayar.
Liste 2. CDI kullanılarak tanımlanan bir JavaBean
import javax.inject.Named; import javax.enterprise.context.SessionScoped; @Named @ViewScoped public class JavaBean implements Serializable { private String content = ìWelcome to JSF!î // getters/setters }
PrimeFaces ile JSF 2.3
Sonraki bölümlerde, JSF'nin MVC modelini, olaya dayalı mesajlaşmayı ve yeniden kullanılabilir bileşenleri nasıl uyguladığını göstermek için PrimeFaces'i kullanacağım. Başlamak için PrimeFaces Vitrini'ni açın , sol taraftaki sütundaki Veri bağlantısını tıklayın ve DataList'i seçin . Bu, PrimeFaces için DataList demo kodunu açacaktır.
Şekil 1, bu örnekleri nerede bulacağınızı gösterir.Matthew Tyson
Şekil 2, PrimeFaces DataList demosundan alınan basit bir veri tablosunun çıktısını gösterir.Matthew Tyson
PrimeFaces DataList: Veri modeline erişim
Liste 3, bu
dataListekran için işaretlemeyi sunar . PrimeFaces vitrininin altına kaydırırsanız,
dataList.xhtmlsekmede işaretlemeyi görebilirsiniz .
Liste 3. PrimeFaces DataList için Facelet
Basic #{car.brand}, #{car.year}
Liste 3'te, bileşenin
valueözelliğine dikkat edin
dataList. Bunun bir
dataListViewnesneye başvurduğunu ve
.cars1üzerindeki özelliğe eriştiğini görebilirsiniz . Bileşen, bu alan tarafından döndürülen model nesnesini kullanacaktır. JSF belirteçleri, nesne özelliklerine
.cars1başvurmak için geleneksel erişimcileri kullanır, bu nedenle
getCars()nesne üzerindeki alıcıya başvurur .
Next, notice the
var="car" property. This tells the
dataList component what variable to use when it iterates over the list of cars returned by the
value field. These properties are specific to the
dataList component, but the
value property is very common. The
var attribute is also conventional for components that iterate over lists.
In the body of the component in Listing 3, you can see the
car variable is accessed via JSF expressions like
#{car.brand}. Each iteration of the
dataListView.cars1 instance will output the
car.brand field.
Notice that the
tag demonstrates the ability to customize components for how they will display. In this case, the header is defined as
Basic.
You can see how the Facelets XML will drive this output by combining the data with the markup. Now let's look at the Java code behind it.
DataList's server-side components
Listing 4 shows
DataListView, the Java class that is used by the markup in Listing 3. You'll see shortly how the
dataListView instance is associated with the
DataListView class.
Listing 4. DataListView class
package org.primefaces.showcase.view.data; import java.io.Serializable; import java.util.List; import javax.annotation.PostConstruct; import javax.inject.Named; // Pre JSF 2.3, this was: // import javax.faces.bean.ManagedBean; import javax.inject.Inject; import javax.faces.bean.ViewScoped; import org.primefaces.showcase.domain.Car; import org.primefaces.showcase.service.CarService; @Named @ViewScoped public class DataListView implements Serializable { private List cars1; private Car selectedCar; @Inject("#{carService}") private CarService service; @PostConstruct public void init() { cars1 = service.createCars(10); } public List getCars1() { return cars1; } public void setService(CarService service) { this.service = service; } }
Listing 4 has a few other important elements, which we'll consider piece by piece.
Dependency injection and annotations
First, notice that the
DataListView class is annotated with
@Named, which you can see from the import
import javax.inject.Named; is part of JSF. The
@Named annotation tells JSF this bean is part of the app. The
@ViewScoped annotation informs JSF that the bean will live for just the life of the view.
Ardından,
CarServiceözelliğin
@Injectek açıklamaya sahip olduğunu gözlemleyin (
@ManagedPropertyJSF 2.3'ten önceki addır). Bu, Spring çerçevesi ve diğer bağımlılık enjeksiyon araçları tarafından popüler hale getirilen bir teknik olan çekirdeklerin "birbirine bağlanmasına" izin veren başka bir JSF özelliğidir. Özünde, JSF
carServicenesneyi kapsamda bulacak ve otomatik olarak nesne
serviceüzerindeki alanla ilişkilendirecektir
DataListView.