Aplikasi Web Skin menggunakan Xkins

Kulit mengacu pada tampilan antarmuka pengguna; ini memberikan tampilan dan nuansa yang berbeda pada aplikasi Web. Sebuah skin mengubah cara tampilan antarmuka pengguna saat pengguna mengklik tombol, tetapi tidak mengubah perilaku UI. Dengan demikian, perubahan pada kulit menghasilkan perubahan pada tampilan aplikasi, tetapi untuk mencapai modifikasi itu, aplikasi Web Anda harus tahu cara menggunakan kulit.

Mengapa Anda harus menguliti aplikasi Web? Nah, ada beberapa motif dalam menggunakan skin, namun tentunya tidak selalu harus. Dalam aplikasi sederhana, menguliti itu akan berlebihan, tetapi dalam beberapa situasi, seperti yang dijelaskan dalam daftar di bawah, Anda harus berurusan dengan skin:

  • Ketika kulit merupakan persyaratan sistem: Ketika pengguna dapat memilih kulitnya sendiri atau bahkan membuatnya sendiri.
  • Ketika Anda ingin memberikan kemampuan skin ke kerangka kerja komponen perusahaan: Jika Anda membuat solusi yang berbeda untuk klien yang berbeda, Anda dapat menggunakan kembali semua komponen Anda (taglib), jika komponen Anda memiliki kemampuan skinning, hanya dengan mengubah skin setiap klien.
  • Ketika kulit yang berbeda diperlukan sesuai dengan skenario bisnis: Misalnya, di pasar atau aplikasi multi-perbankan, entitas yang berbeda bekerja dalam sistem yang sama dan Anda perlu memberi merek aplikasi sesuai dengan citra perusahaan pengguna.

Menguliti aplikasi Web bukanlah tugas yang mudah. Anda dapat menggunakan Cascading Style Sheets dan mengubah jalur gambar, tetapi Anda terbatas pada apa yang dapat Anda lakukan dengan CSS. Jika Anda memiliki komponen yang terlihat sangat berbeda di setiap skin, artinya, jika HTML berbeda di setiap skin, CSS tidak akan membantu Anda. Namun, Anda dapat menggunakan CSS jika hanya mengubah gaya menyelesaikan masalah Anda.

Pendekatan yang baik untuk membuat skin adalah dengan menentukan setiap bagian dari antarmuka pengguna dan menggeneralisasi bagian ini untuk menerapkan tampilan ke setiap bagian. Misalnya, jika, di Skin A, Anda memiliki komponen bingkai yang hanya tabel biasa dan, di Skin B, tabel yang lebih kompleks dengan header, footer, gambar, dan bahkan suara, HTML yang berbeda (more and tages) harus dihasilkan untuk setiap bingkai kulit. Sebagai contoh, misalkan di Skin A, HTML yang harus dibuat untuk membuat label adalah:

Ini Label saya

Sekarang, di Skin B, ini adalah bagaimana label akan diberikan:

   
Ini Label saya

Seperti yang Anda lihat, kedua bagian UI ini sangat berbeda di setiap skin. Keduanya memiliki informasi yang sama ( This is my Label), tetapi ditampilkan dengan tag HTML yang berbeda. Fungsionalitas ini tidak dapat dicapai dengan CSS saja. Mungkin menggunakan Transformasi Bahasa Lembar Gaya yang Dapat Diperluas atau XSL bisa menjadi pilihan. Atau Anda bisa menggunakan Xkins.

Apa Xkins?

Xkins adalah kerangka kerja yang mengelola skin untuk aplikasi Web Anda. Pada hari-hari awal server-side Java, Anda melakukan hard-code HTML ke dalam servlet. Kemudian, JSP (JavaServer Pages) hadir untuk memungkinkan Anda meletakkan HTML di luar kode Java. Saat ini, kami memiliki masalah yang sama dengan taglib yang memiliki tag HTML yang di-hardcode dalam kode Java. Menggunakan Xkins, Anda dapat menempatkan HTML di luar kode Anda dengan fitur tambahan dan canggih: skins. Untuk informasi rinci tentang Xkins, kunjungi beranda Xkins.

Gambar 1 mengilustrasikan peran Xkins dalam aplikasi Web.

Aplikasi Web yang menggunakan Xkins dan Struts melalui taglib mengikuti siklus permintaan ini:

  • Struts menginisialisasi Xkins dengan plug-in Xkins.
  • Pengontrol struts menerima permintaan HTTP.
  • Struts menjalankan proses dan meneruskannya ke tampilan halaman JSP.
  • Halaman JSP menggunakan taglib untuk merender halaman.
  • Taglib menggunakan Xkins melalui fasad Xkins: XkinProcessor.
  • XkinProcessor mendapatkan skin pengguna dan template yang akan dirender oleh taglib.
  • XkinProcessormenggunakan yang TemplateProcessorterkait dengan template.
  • Ini TemplateProcessoradalah kelas yang bertanggung jawab untuk merender potongan UI yang menyusun kulit. The TemplateProcessorbisa menggunakan Velocity, JBYTE (Jawa Oleh Template Engine), Groovy, atau mesin template lain untuk membuat output.
  • The TemplateProcessormenggunakan sumber daya dari kulit (elemen dan jalur) dan kembali hasil pengolahan template untuk taglib tersebut.
  • Taglib menampilkan hasil pemrosesan template ke browser Web.

Xkins membahas manajemen kulit dengan mengikuti konsep dasar ini:

  • Jauhkan semua pembuatan HTML dari kode Java: Taglib biasanya menghasilkan kode HTML. Mengubah kode ini memerlukan perubahan kode Java dan penerapan ulang aplikasi. Xkins memungkinkan Anda untuk mengeksternalisasi pembuatan HTML dengan menempatkan HTML dalam file definisi (file XML). Selain itu, Xkins memungkinkan Anda untuk menyimpan tag pemformatan HTML biasa dari halaman JSP untuk lebih mengeksternalisasi tampilan dan nuansa aplikasi.
  • Tentukan struktur kulit: Template, sumber daya, dan jalur menyusun kulit. Sumber daya dapat berupa konstanta atau elemen seperti gambar dan file CSS. Menentukan jalur membantu Anda mengatur file kulit Anda. Menentukan template membantu Anda menggunakan kembali bagian UI di seluruh aplikasi Anda.
  • Izinkan ekstensi ke kerangka Xkins: Anda dapat memperluas Xkins untuk menggunakan bahasa templat Anda sendiri untuk rendering sesuai dengan kebutuhan Anda. Jika Anda memerlukan, misalnya, pembuatan gambar, Anda dapat mengimplementasikan pemroses templat yang mengambil templat dan menghasilkan gambar. Xkins hadir dengan prosesor template berdasarkan Velocity dan JBYTE. Jika Anda lebih suka Groovy, misalnya, Anda dapat membuat prosesor template Groovy untuk membuat potongan UI Anda.
  • Membagi UI dalam elemen dasar: Di Xkins, Anda dapat menghapus semua bagian UI dan membuat template dengannya. Dengan cara ini, Anda dapat menggunakan kembali potongan-potongan ini dan mengubah apa pun yang Anda butuhkan untuk membuat kulit terlihat berbeda.
  • Gunakan warisan untuk meminimalkan perawatan kulit: Di Xkins, sebuah skin dapat memperluas skin lain dan menggunakan semua templat, jalur, dan sumber daya yang dimiliki induknya. Dengan demikian, Anda mengurangi pemeliharaan template.
  • Gunakan komposisi untuk membuat kulit: Selain warisan, Xkins juga menggunakan komposisi untuk meminimalkan pemeliharaan dan mendorong penggunaan ulang templat Anda. Dengan fitur ini, pengguna dapat membuat skin yang dipersonalisasi sendiri dari aplikasi Anda dengan memilih bagian UI yang berbeda dari skin yang ada.
  • Tentukan jenis kulit: Dengan menggunakan jenis kulit, Anda dapat memastikan bahwa semua skin yang dimuat dalam instance Xkins memiliki setidaknya template yang sama dengan jenisnya. Jenis kulit adalah kulit yang semua kulit lainnya harus diperluas agar valid dalam contoh Xkins. Dengan contoh Xkins, yang saya maksud adalah sekelompok skin yang dimuat bersama untuk digunakan oleh aplikasi Web.

Satu keuntungan penting yang ditawarkan Xkins adalah bahwa semua HTML ada di satu tempat, dan, jika Anda perlu menyesuaikannya, Anda cukup mengubah templatnya. Misalnya, jika halaman Anda terlalu besar, deteksi di mana pembuatan HTML yang berlebihan atau putuskan gambar apa yang dapat dihilangkan, dan kemudian ubah template untuk mengurangi ukuran halaman. Anda juga dapat memiliki kulit yang ringan untuk pengguna yang mengakses aplikasi Web Anda dengan koneksi berkecepatan rendah dan UI kulit yang lebih kaya untuk pengguna broadband.

Perhatikan bahwa Anda dapat menggunakan Xkins bersama dengan CSS. Faktanya, penggunaan CSS direkomendasikan untuk gaya dan warna font, karena menggunakan kembali kelas CSS mencegah kebutuhan untuk secara eksplisit menunjukkan bentuk font setiap saat, sehingga meminimalkan ukuran halaman.

Sebuah skin dapat dienkapsulasi menjadi satu file (file zip) agar mudah digunakan dalam aplikasi Web. Jika Anda menentukan jenis kulit, kulit pihak ketiga dapat ditambahkan ke aplikasi Web Anda jika sesuai dengan jenis kulit yang Anda nyatakan.

Anda dapat menggunakan Xkins dengan banyak cara, tetapi menggunakan Xkins dengan taglib menawarkan pendekatan terbaik dalam aplikasi Web. Anda dapat menggunakan tag ini untuk membuat halaman Anda atau untuk menghias tag yang ada.

Mendefinisikan kulit

Berikut beberapa tip untuk mendefinisikan skin:

  • Tentukan warna kulit; menggunakan konstanta global sehingga skin lain dapat memperluas dan menimpanya.
  • Buat template yang dapat digunakan kembali untuk setiap taglib.
  • Create templates with elements that can be overridden by an extending skin, so the whole template doesn't have to be rewritten to change the UI's appearance.
  • Create a basic skin for your Web application and use it as the type for your Xkins instance.
  • Avoid placing HTML inside Java code. If you have a taglib, servlet, or even a JSP page that has HTML code, consider migrating this HTML to an Xkins template.

Example

We now walk through the phases of defining, designing, developing, and deploying Xkins in a simple Web application that requires skin management. In our example, we implement an application that registers subscribers for two online bookstores: Amazing and Barnie & Nibble. The application will be used in both sites (through a frame, a portlet, or whatever format the stores choose), but must have a look and feel specific to each bookstore.

To implement our application, we follow these steps:

  1. Obtain HTML pages with each skin
  2. Determine skins' templates
  3. Create the skins
  4. Use the skins
  5. Deploy the Web application

Obtain HTML pages with each skin

First of all, we receive the graphical design of the page provided by each bookstore. That material could be the page prototypes and should contain all possible page elements appearing in the application to be skinned (in our example, just one page)—see Figures 2 and 3.

As we can see, both pages have different colors, images, and field layouts. In addition, the required information indicators differ, plus Amazing's buttons are in GIF format, while Barnie & Nibble's button is an HTML button with styles.

Determine skins templates

Now we must clip pieces of these pages to generalize some templates for our application to use. We could start from zero, or we could base our HTML dissection in a basic skin used to create forms. This basic skin comes with the Xkins framework in Xkins Forms tags. Xkins Forms is an implementation of taglibs that uses Xkins to generate forms for Web applications.

The basic skin defines frame, field, button, etc. We should use this skin and add the templates our application needs (for instance, the branding). This basic skin also allows us to use Xkins Forms tags to generate our JSP pages.

Let's see a list of the templates we need:

  • frame: The table containing the whole form
  • frameMandatoryCaption: The text indicating mandatory fields
  • field: Coordinates the layout of both label and input
  • fieldLabel: The piece of text containing a label
  • fieldLabelMandatory: Piece of text indicating a mandatory label
  • fieldInput: Controls input
  • fieldInputMandatory: Indicates the input is mandatory
  • button: The command button to execute the action
  • branding: The branding corresponding to each bookstore

Create the skins

Once the different pieces of our UI are determined, we create both skins using Xkins. We start by naming them in the xkins-definition.xml file:


  

Now, we must create a directory structure in our Web application's ROOT directory according to the defined configuration file shown in Figure 4.

In each subdirectory, we place the definition.xml file describing the skin. We will walk through some templates of the skin. To see all of the example's templates, download the source code from Resources.

Let's look at the skin definition syntax contained in the definition.xml file of Amazing's skin:


  

base is the default skin that comes with Xkins Forms and helps us skin our application. Amazing's skin extends it (so does Barnie & Nibble's). We now start overriding the base skin's templates for each skin, starting with the field template:

</strong> $label $input <strong></strong><td align=right><b>$label:</b></td><strong></strong><td align=right><b>$label:</b></td><strong></strong><td colspan="$colspan">$input (Optional)</td><strong></strong><td colspan="$colspan"><strong>$input</strong></td><strong>

Semua template di atas adalah template Velocity. Perhatikan bahwa parameter melewati template, dan variabel seperti itu $colspandapat digunakan. Parameter ini dilewatkan oleh XkinsProcessor, yang disebut dengan taglib.