Tạo các thành phần JavaServer tuỳ chỉnh trong phiên bản 7.5 của IBM Rational Application Developer

Bài này giải thích cách bạn có thể sử dụng IBM® Rational® Application Developer V7.5 (Nhà phát triển Ứng dụng Rational V7.5) để tạo ra các thành phần máy chủ Java™Server Faces (JSF).

Yury Kats, Kỹ sư tư vấn phần mềm, IBM

Yury Kats photoYury Kats là một nhà phát triển trong nhóm Rational Application Developer, làm các công việc liên quan đến việc thực hiện, thành phần, và công cụ JSF



06 11 2009

Thành phần JSF: chúng là gì và ai cần chúng

Một trong những thế mạnh của khung làm việc JSF là kiến trúc dựa trên thành phần của nó. Thành phần là các phần tử cơ bản của bất kỳ ứng dụng web được xây dựng bằng cách sử dụng công nghệ JSF: chúng làm tất cả các thứ sau đây:

  • Gắn điều khiển UI trong máy khách.
  • Gắn điều khiển của các công cụ UI cho dữ liệu cuối.
  • Điều khiển cách yêu cầu các tham số được xử lý khi gửi trả lại cho máy chủ.
  • Điều khiển cách chuyển đổi và xác thực các giá trị trình nộp.
  • Kích hoạt các sự kiện đáp lại hành động của người sử dụng.
  • v.v…

Đặc tả JSF và các cài đặt của nó đưa ra một số thành phần cơ sở mà bạn (như là một nhà phát triển ứng dụng) có thể sử dụng ngay: một vài thành phần đầu vào (chẳng hạn như inputText), một vài thành phần đầu ra (chẳng hạn như outputText), một bảng dữ liệu, một cặp bảng sơ đồ bố trí (layout panels) (chẳng hạn như panelGrid), một nút, một liên kết, và một hình ảnh.

Có thể xây dựng nên một ứng dụng web theo chức năng bằng cách sử dụng các thành phần được cung cấp nhờ cài đặt JSP cốt lõi. Tuy nhiên, có một số hạn chế đối với tập các thành phần này. Khi bạn thiết kế các ứng dụng Web hiện đại, bạn cố gắng cung cấp cho người dùng giàu kinh nghiệm, thường gọi các thành phần phức tạp hơn cái mà đặc tả JSF cung cấp. Bạn cần các thành phần chẳng hạn như thực đơn, soạn thảo văn bản đầy đủ, tải lên tệp, và lịch năm tháng: chức năng mà người sử dụng mong đợi.

May mắn kiến trúc JSF là linh hoạt, và nó cho phép bạn tạo ra các thành phần riêng, ngoài những cái mà cài đặt JSF đưa ra. Do đó, các nhà phát triển đã tạo ra các thư viện thành phần JSF để đáp ứng nhu cầu của các nhà phát triển ứng dụng khác. Có một vài thư viện thành phần lớn và phổ biến hiện nay trên thị trường, gồm như sau đây:

  • IBM’s JSF Widget Library (JWL-Thư viện công cụ JSF của IBM ).
  • Tomahawk của MyFaces.
  • Trinidad và Tobago.
  • RichFaces của JBOSS.
  • ICEFaces.
  • Và nhiều thư viện nữa.

Tuy nhiên, các thư viện đồ sộ như vậy mà không thư viện nào đáp ứng được cho từng nhà phát triển. Bạn có thể cần một thành phần JSF riêng mà không sẵn có trong thư viện lựa chọn của bạn.

Nếu như vậy thì gần như chắc chắn bạn tự nghĩ đến chính mình, “Mình có nên tự xây dựng thành phần đó không?"

Trong nhiều trường hợp, câu trả lời là “có.” Việc xây dựng một thành phần tuỳ chỉnh thường đúng là điều cần làm. Một thành phần tuỳ chỉnh cho phép bạn đóng gói rất nhiều chức năng trong một thẻ JSF. Sau đó bạn có thể sử dụng lại thẻ đó trong nhiều trang và ứng dụng, và chia sẻ nó với người phát triển khác trong tổ chức. Nó cũng làm đơn giản hoá sự bảo trì, vì chức năng này được giữ ở một nơi chứ không nằm rải rác trên nhiều trang trong các ứng dụng của bạn.

Ví dụ hãy tưởng tượng rằng ứng dụng của bạn cần thu thập thông tin về một địa chỉ người dùng. Rất có khả năng là bạn cần phải làm việc này nhiều hơn một lần: bạn có thể quan tâm đến địa chỉ nhà riêng của người sử dụng, địa chỉ gửi hàng, và địa chỉ ghi trên hóa đơn thanh toán. Bạn quan sát toàn bộ các thư viện thành phần thông dụng, và không cái nào có thành phần để xử lý các địa chỉ. Vì vậy bạn sử dụng các thành phần JSF chuẩn (Liệt kê 1) và nhanh chóng xây dựng nên khuôn mẫu địa chỉ ngoài các trường đầu vào và đầu ra (Hình 1).

Hình 1. Khối địa chỉ (Address block)
Các trường street, city, state và zip code

Vì bạn cần một khối địa chỉ như vậy trên nhiều trang, bạn lặp lại nó trên các trang khác nhau, và có lẽ trong cả ứng dụng khác. Các trang của bạn sẽ làm việc chính xác không? Có. Đây có phải là bộ mã có rất nhiều sự tương tự có thể lặp đi lặp lại không? Chắc chắn rồi. Việc bảo trì có phải là một cơn ác mộng không? Đúng. Điều gì sẽ xảy ra một tuần sau đó nếu bạn cần phải gióng lại các trường hoặc thêm vào một trường nữa cho tên nước? Bạn sẽ cần phải thực hiện sự thay đổi trên từng trang một nơi bạn đã tạo ra khối địa chỉ này!

Sẽ thuận tiện hơn nhiều nếu thay cho việc bạn tạo ra thành phần của chính bạn mà đóng gói toàn bộ khối này, và sau đó sử dụng một thẻ đơn lẻ chẳng hạn như <my:inputAddress value="#{address}" /> ở bất cứ đâu. Nguồn JSP của bạn sẽ ngắn hơn và rõ ràng hơn nhiều, và nếu khi nào bạn cần thay đổi khối địa chỉ, chỉ cần làm điều đó ở một vị trí. Bạn cũng có thể chia sẻ thành phần inputAddress của bạn với các đồng nghiệp hoặc cộng đồng trực tuyến của bạn, để những người nào cần một thành phần như vậy có thể hưởng lợi từ công trình của bạn.

Đến nay phải rõ ràng là việc tạo ra một thành phần tuỳ chỉnh là một điều tốt, nhưng cách nào là tốt nhất để tạo ra một thành phần? Trong khi đặc tả JSF cho phép tạo các thành phần mới, đặc tả này không làm nó đặc biệt đơn giản. Nếu bạn muốn tạo ra một thành phần, bạn cần phải tạo ra ba lớp Java:

  • Một lớp thành phần.
  • Một lớp dịch (renderer).
  • Một lớp xử lý thẻ.

Ngoài các lớp đó, thông tin về thành phần mới sẽ được cung cấp trong một tệp faces-config.xml và trong một tệp tag library. Đây là một công việc buồn tẻ và không tránh khỏi sai sót.

Đó là lý do Rational Application Developer V7.5 có một tính năng mới cho phép người phát triển JSF tạo các thành phần tuỳ chỉnh nhanh chóng và dễ dàng. Là một tác giả tạo ra thành phần, bạn có thể sử dụng các công cụ quen biết của Rational Application Developer (chẳng hạn như kéo-và-thả từ bảng công cụ (palette), bộ soạn thảo WYSIWYG (Cái mà bạn trông thấy là cái mà bạn sẽ nhận được), Properties (các đặc tính), và PageData views (các khung nhìn PageData)), và Rational Application Developer tự động tạo ra tất cả các lớp Java được yêu cầu và tệp cấu hình cho bạn.

Dĩ nhiên nếu bạn là một người sử dụng cấp cao, bạn vẫn có thể thay đổi chút ít chính các lớp Java được tạo, để thu được sức mạnh và linh hoạt hơn. Tuy nhiên, bạn không cần kiến thức về kiến trúc bên trong để tạo ra các thành phần trong Rational Application Developer.

Để giải thích tính năng mới này, bạn sẽ tạo ra một thành phần tuỳ chỉnh đơn giản đối với một trường hợp rất phổ biến chẳng hạn như một trường đầu vào với một nhãn, như trong Liệt kê 1.

Liệt kê 1. Trường đầu vào với một nhãn
	<h:outputText value=”Name:” / >
	<h:inputText value=”#{person.name}” />

Một cặp như vậy có thể thấy một ít trong bất kỳ ứng dụng JSF nào. Ngay cả khối địa chỉ được hiển thị trước đây trong Hình 1 gặp ba lần cặp này. Bạn sẽ gói hai thẻ này vào một thành phần có thể sử dụng được đơn lẻ, như trong Liệt kê 2.

Liệt kê 2. Thành phần có thể sử dụng được
	<my:inputLabel value=”#{person.name}” label=”Name:” />

Tạo ra một thành phần tuỳ chỉnh JSF

Các thành phần JSF hiếm khi tồn tại một cách độc lập. Thay vào đó, chúng là bộ phận của một thư viện thành phần, thư viện này là một bộ sưu tầm các thành phần mà bạn có thể thả vào bất kỳ ứng dụng nào, sử dụng lại, và chia sẻ (cho những người khác). Thư viện thường là tệp tư liệu Java™ đơn (JAR), mà chứa một số các thành phần, và tất cả các tệp cấu hình cần có cho thư viện để được sử dụng. JWL của IBM, Tomahawk của MyFaces, và RichFaces của JBOSS là các thí dụ của các thư viện thành phần.

Do đó, để tạo ra một thành phần tuỳ chỉnh, trước tiên bạn cần tạo ra một thư viện thành phần.

Tạo ra một thư viện thành phần

Để tạo ra một thư viện thành phần:

  1. Chọn File > New > Project.
  2. Dưới mục Web, chọn Faces Component Library Project.
  3. Nhấn Next.

Thủ thuật New Faces Component Library (Thư viện Thành phần New Faces) mở ra. Lưu ý rằng nó trông rất giống thủ thuật mà bạn sẽ sử dụng để tạo một dự án Web mới. Khác biệt duy nhất là trường Configuration được lấy giá trị Faces Component Library, như trong Hình 2. Toàn bộ công cụ thành phần JSF tuỳ chỉnh trong Rational Application Developer được thiết kế trông rất giống với công cụ trang bị chuẩn web và JSF mà bạn đã quen biết từ trước, do đó đường nhận thức của bạn là nhỏ nhất.

Hình 2. Thủ thuật Thư viện Thành phần New Faces
mũi tên trỏ vào Cấu hình được chọn
  1. Nhập vào một tên cho thư viện của bạn (trong thí dụ này là, MyComponents) và nhấn Finish.
  2. Là người sử dụng cấp cao, bạn hẳn muốn nhấn vào nút Next ba lần trước khi nhấn vào Finish. Điều này cho phép bạn thay đổi một chút thông số của thư viện, chẳng hạn như URI của nó, tiền tố, và tên bó cho lớp Java được tạo ra như trong Hình 3.
Hình 3. Hội thoại cài đặt Thư viện Thành phần
hộp thoại để đặt cấu hình thư viện thành phần

Tạo một thành phần

  1. Với việc tạo ra dự án thư viện này, nhấn chuột phải vào tên dự án trong khung nhìn Enterprise Explorer và chọn New > Faces Custom Component.

Một thủ thuật New Custom Component (Thành phần Tuỳ chỉnh Mới) mở ra. Lưu ý một lần nữa là thủ thuật hầu như giống như khi bạn đang tạo ra một trang web thông thường. Khác biệt duy nhất là một mẫu đặc biệt mà bạn lựa chọn để định danh trang đó như một thành phần Faces Tuỳ chỉnh, như trong Hình 4.

Hình 4. Thành phần tuỳ chỉnh mới
mũi tên trỏ vào khuôn mẫu, khung nhìn trước ở bên phải
  1. Gõ nhập một tên cho thành phần mới này (trong thí dụ này là, inputLabel) và nhấn Finish.

Sau khi nhấn Finish, sẽ tạo ra một tệp JSP cho phép bạn thiết kế thành phần và mở nó trong bộ soạn thảo. Lưu ý rằng đây chỉ là một tệp JSP thông thường, và tất cả các công cụ quen thuộc của Rational Application Developer là sẵn sàng cho phép bạn làm việc với nó:

  • Bảng công cụ (Palette).
  • Các đặc tính (Properties).
  • Biên soạn nhanh (QuickEdit).
  • Các khung nhìn dữ liệu trang (PageData).

Tuy nhiên, không như trang JSF thông thường, thành phần tuỳ chỉnh không có các thẻ <BODY> hoặc <f:view>. Thay vào đó, nó sử dụng một thẻ đặc biệt <jsfc:component> sẽ chứa các thẻ JSF khác mà sẽ cấu thành thành phần tuỳ chỉnh của bạn.

Kiểm tra lại dự án thư viện của bạn trong khung nhìn Enterprise Explorer. Lưu ý rằng ngoài tệp JSP thành phần mà bạn vừa tạo ra, Rational Application Developer còn tạo ra một số tệp nữa trong thư viện, như trong Hình 5.

Hình 5. Các tệp được tạo
MyComponents được mở rộng trong khung nhìn cây

Các tệp đã tạo ra gồm:

  1. Lớp thành phần (InputLabelComponent.java).
  2. Bộ xử lý thẻ JSP (InputLabelTag.java).
  3. Lớp biểu hiện (CustomComponentRenderer.java).
  4. Các tệp cấu hình: thư viện faces-config và thẻ (faces-config.xml).
  5. Tệp JAR thư viện mà chứa tất cả các tạo tác thành phần (MyComponents.jar).
  6. Trang kiểm thử đối với thành phần (testInputLabel.jsp).

Mỗi khi bạn thực hiện thay đổi đối với tệp JSP chứa định nghĩa thành phần (trong trường hợp này là inputLabel.jsp), Rational Application Developer tự động tái sinh tất cả các tệp khác cần thiết để thư viện thành phần thực hiện chức năng. Sau đó nó bó chúng vào một tệp JAR đơn lẻ. Tệp JAR này có hiệu quả trở thành thư viện thành phần của bạn, cái mà bạn sau đó có thể sử dụng trong các dự án khác và chia sẻ với những người khác. Rational Application Developer cũng tạo ra một trang kiểm thử để bạn quan sát cách thành phần tuỳ chỉnh sẽ hành xử như thế nào khi nó được triển khai lên máy chủ.

Lập cấu hình một Thành phần

Bây giờ bạn đã tạo ra một thành phần mới, đã đến lúc lập cấu hình các thuộc tính và đặc tính của nó.

  1. Trở lại trang định nghĩa thành phần (inputLabel.jsp) mà đang mở trong bộ soạn thảo, và sau đó chọn thẻ <jsfc:component> (hoặc bằng cách nhấn vào thẻ trong khung nhìn Source, hoặc bằng cách nhấn vào trong trong hình chữ nhật gạch ngang trong khung nhìn Design).

Bây giờ bạn có thể lập cấu hình thành phần mới này bằng cách sử dụng khung nhìn Properties, như trong Hình 6.

Hình 6. Các thành phần đặc tính
Xác định tên, các thuộc tính, sự mô tả và hành vi
  1. Bằng cách sử dụng khung nhìn Properties, bạn có thể lập cấu hình:
    • Tên thẻ Tag name cho thành phần này. Theo mặc định, tên thẻ phù hợp với tên của JSP mà bạn đã tạo ra, nhưng hai cái không cần phải giống nhau.
    • Thành phần Description (Mô tả). Việc mô tả sẽ là có ích đối với những người sử dụng khác của thành phần của bạn (nếu bạn quyết định chia sẻ nó với những người khác).
    • Quy định Component behaves as (thành phần đó ứng xử gì). Đặc tả JSF định nghĩa một vài thành phần tiêu chuẩn mà bạn có thể muốn thành phần của bạn giống như vậy trong hành vi. Ngoài Basic JSF component (thành phần JSF Cơ bản), các tuỳ chọn bao gồm một Input component (thành phần đầu vào), một Multi-Select component (thành phần Nhiều lựa chọn) và một Command component (một thành phần Lệnh). Khi bạn chọn một trong các tuỳ chọn này, Rational Application Developer sẽ tự động tạo ra các thuộc tính điển hình cho kiểu thành phần được chọn, và tạo ra bộ mã trong lớp thành phần để hỗ trợ hành vi được chọn.
    • Thành phần Attributes (Các thuộc tính).
    • Cuối cùng, bạn có thể chỉ thị cho Rational Application Developer như sau: Do not overwrite generated Java classes when this JSP changes (Không được ghi đè lên các lớp Java được tạo ra khi JSP này thay đổi). Tuỳ chọn này là hữu ích đối với những người sử dụng cấp cao, một khi lớp thành phần được tạo ra, chọn điều chỉnh lớp bằng tay. Trong trường hợp này, bạn muốn tách riêng định nghĩa thành phần trong JSP từ nguồn Java của thành phần.

Đối với thành phần của bạn inputLabel, lập cấu hình nó để hành xử như một thành phần Đầu vào và thêm vào hai thuộc tính: nhãn và giá trị.

  1. Để thêm vào một thuộc tính, nhấn nút Add trong khung nhìn Properties và gõ nhập vào thuộc tính NameClass, như trong Hình 7. Cả hai thuộc tính bạn thêm vào sẽ là của Lớp java.lang.String.
Hình 7. Thêm một thuộc tính
Hộp thoại Định nghĩa thuộc tính thành phần

Một khi đã được cấu hình, khung nhìn Properties cho thành phần inputLabel phải trông giống như trong Hình 8.

Hình 8. Thành phần được lập cấu hình
Các chi tiết đặc tính thành phần

Lưu ý rằng vì bạn đã làm cho thành phần hành xử như một thành phần Đầu vào, Rational Application Developer tự động thêm các thuộc tính immediate, requiredvalueChangeListener mà điển hình cho các thành phần Đầu vào.

Tạo ra nội dung thành phần

Bây giờ là lúc định nghĩa nội dung thật sự của thành phần inputLabel này. Như bạn còn nhớ, bạn muốn nó trở thành một outputText hiển thị một nhãn, theo sau bởi một inputText hiển thị một giá trị.

  1. Từ Bảng công cụ, kéo một thành phần Đầu ra và một thành phần Đầu vào lên phía trên trang.
  2. Từ khung nhìn PageData, gắn thành phần Đầu ra có thuộc tính label và thành phần Đầu vào có thuộc tính value, bằng cách kéo các thuộc tính đó lên đỉnh các thành phần trong khung nhìn Design, như trong Hình 9.
Hình 9. Tạo nội dung thành phần
Trình thám hiểm ở bên trái, trang thiết kế ở giữa, bộ công cụ ở bên phải

Lưu ý rằng các thuộc tính của thành phần tuỳ chỉnh mà bạn đã cấu hình trong khung nhìn Properties cũng được lên danh sách trong khung nhìn PageData dưới loại Faces component.

Khi bạn gắn một thuộc tính thành phần cho một thành phần khác, một biểu thức JSF đặc biệt được tạo ra để truy cập thuộc tính này vào lúc đang chạy: #{component.attribute}, như trong Hình 10.

Hình 10. Nguồn Thành phần
mã chỉ ra sự liên kết một thuôc tính thành phần với một thành phần khác

Đó nghĩa là gì, có phải là cái mà nếu bạn sau đó sử dụng thành phần, ví dụ như, <my:inputLabel value=”#{person.name}” label=”Name:” />, thì giá trị của outputText trở thành “Name:” và giá trị của inputText sẽ trở thành #{person.name}.

Đây là tất cả mọi thứ cần phải làm để định nghĩa nội dung của thành phần mới. Một khi bạn lưu lại trang đó, Rational Application Developer sẽ cập nhật toàn bộ các tạo tác được yêu cầu, và thư viện thành phần sẽ sẵn sàng được sử dụng.

Kiểm thử thành phần

Bây giờ bạn đã tạo ra một thành phần mới, bạn muốn thử nghiệm cách nó ứng xử như thế nào khi chạy trên máy chủ, trước khi sử dụng nó trong một ứng dụng thực hoặc chia sẻ nó với những người khác. Nhằm mục đích này, Rational Application Developer đã tạo ra một trang kiểm thử: testInputLabel.jsp. Trang kiểm thử là một JSP thông thường có chứa thẻ thành phần mới, và do đó bạn có thể triển khai nó cho một máy chủ để quan sát hoạt động của thành phần mới.

  1. Mở tệp testInputLabel.jsp. Lưu ý rằng nguồn của trang này chứa một thẻ đơn lẻ <m:inputLabel>, tuy nhiên khung nhìn Design hiển thị outputTextinputText mà thành phần mới chứa chúng (xem Hình 11). Khung nhìn Properties liệt kê tất cả các thuộc tính thành phần inputLabel (bao gồm labelvalue mà bạn đã thêm vào trước đó). QuickEdit hiển thị một khả năng Value Changed (Giá trị được thay đổi), vì bạn đã cấu hình thành phần mới này để hành xử như một Đầu vào.
Hình 11. Trang kiểm thử thành phần
trang có nhiều khung và bảng
  1. Bằng cách sử dụng khung nhìn Properties, gõ nhập các chữ gì đó đối với các thuộc tính labelvalue, lưu lại trang và cho chạy nó trên máy chủ.

Khi trình duyệt mở ra, bạn sẽ thấy một nhãn theo sau bởi một trường đầu vào, cả hai đều hiển thị các giá trị xác định trong thuộc tính của thành phần (Hình 12).

Hình 12. Chạy trên máy chủ
Tên hiển thị Yury

Bây giờ bạn đã tạo ra một thành phần JSF mới khung nhìn chức năng đầy đủ bằng cách sử dụng công cụ của Rational Application Developer.


Sử dụng các thành phần tuỳ chỉnh trong các ứng dụng web

Bây giờ bạn đã có một thư viện thành phần JSF mới nguyên mà bạn có thể sử dụng trong các ứng dụng web của bạn hoặc chia sẻ với các đồng nghiệp của bạn.

Rational Application Developer tự động đóng gói mọi thứ thuộc về thư viện thành phần của bạn vào một tệp JAR duy nhất, mà bạn có thể tự sử dụng và phân phối cho những người khác. Tuy nhiên, để tận dụng đầy đủ các đặc tính công cụ của Rational Application Developer, bạn cần phải tạo ra một library definition (định nghĩa thư viện) cho thư viện của mình. Để mô tả ngắn gọn về hỗ trợ của Rational Application Developer đối với các thư viện thành phần tuỳ chỉnh, xin xem phần Tài nguyên.

Tạo một định nghĩa thư viện

Để tạo ra một định nghĩa thư viện cho thư viện mà bạn vừa mới tạo:

  1. Nhấn chuột phải vào dự án thư viện của bạn (MyComponents) trong khung nhìn Enterprise Explorer.
  2. Chọn New > Faces Library Definition.
  3. Trong thủ thuật Create Faces Library Definition đang mở (Hình 13)
    1. Nhập vào một tên thư viện (ví dụ, MyLibrary).
    2. Lưu ý rằng dự án thư viện của bạn đã được chọn trước.
    3. Nhấn Finish.
Hình 13. Định nghĩa thư viện
nhập tên, chọn JAR, chỉ định dự án Faces

Sau khi Rational Application Developer xử lý xong thư viện của bạn, bộ soạn thảo sẽ mở ra. Bạn có thể tuỳ chỉnh tất cả các khía cạnh của công cụ hỗ trợ cho các thành phần và thư viện mới của bạn:

  • Thứ được hiển thị trên bảng công cụ.
  • Các thành phần trông ra sao.
  • Điều gì xảy ra trong khi có động tác kéo và thả.
  • Và nhiều thứ khác.
  1. Việc tuỳ chỉnh một định nghĩa thư viện nằm ngoài phạm vi của bài này, do đó bạn chỉ có thể chấp nhận cái mà Rational Application Developer đã tạo ra cho việc định nghĩa. Đóng trình biên tập lại.

Bây giờ định nghĩa thư viện đã được tạo ra, bạn có thể bắt đầu sử dụng thư viện mới trong các dự án web thông thường, hoặc bạn có thể chia sẻ dự án định nghĩa thư viện này (MyLibrary) với những người khác.

Sử dụng thành phần tuỳ chỉnh trong một ứng dụng web

  1. Tạo một dự án Web động mới bằng cách dùng cấu hình dự án Faces, và sau đó tạo ra một trang web mới trong nó.

Khi trang này mở trong bộ soạn thảo, bạn sẽ thấy rằng thư viện thành phần mới và thành phần mới mà bạn đã tạo ra có sẵn trên bảng công cụ, bên cạnh tất cả các ngăn bảng công cụ thông thường Rational Application Developer, như trong Hình 14.

Hình 14. Bảng công cụ
inputLabel trong MyLibrary
  1. Kéo thành phần inputLabel từ Bảng công cụ lên trên trang của bạn. Vì đây là lần đầu tiên bạn sử dụng thư viện mới trong dự án Web này, tệp JAR chứa thành phần tuỳ chỉnh của bạn sao chép vào dự án.
  2. Rational Application Developer sẽ nhắc nhở bạn xác nhận việc này. Nhấn OK để xác nhận.

Đối với trang kiểm thử trước đó, bạn sẽ thấy rằng một thẻ <m:inputLabel> được thêm vào nguồn của trang web. Thẻ nhìn thấy trong khung nhìn Design như một cặp các thành phần outputTextinputText như hiển thị trước đó trong Hình 11. Các thuộc tính của thẻ là sẵn có trong khung nhìn Properties, và một khả năng Value Changed có thể ghi thành kịch bản trong khung nhìn QuickEdit.

  1. Chạy trang đó trên máy chủ, và bạn sẽ thấy thành phần bộ dịch trong trình duyệt, như hiển thị trước đây trong Hình 12.

Bạn đã sử dụng thành công thành phần tuỳ chỉnh của chính bạn trong một dự án Web.


Tải về

Mô tảTênKích thước
Sample projects and componentsSampleProjects.zip9412KB

Tài nguyên

Học tập

Lấy sản phẩm và công nghệ

Thảo luận

Bình luận

developerWorks: Đăng nhập

Các trường được đánh dấu hoa thị là bắt buộc (*).


Bạn cần một ID của IBM?
Bạn quên định danh?


Bạn quên mật khẩu?
Đổi mật khẩu

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Ở lần bạn đăng nhập đầu tiên vào trang developerWorks, một hồ sơ cá nhân của bạn được tạo ra. Thông tin trong bản hồ sơ này (tên bạn, nước/vùng lãnh thổ, và tên cơ quan) sẽ được trưng ra cho mọi người và sẽ đi cùng các nội dung mà bạn đăng, trừ khi bạn chọn việc ẩn tên cơ quan của bạn. Bạn có thể cập nhật tài khoản trên trang IBM bất cứ khi nào.

Thông tin gửi đi được đảm bảo an toàn.

Chọn tên hiển thị của bạn



Lần đầu tiên bạn đăng nhập vào trang developerWorks, một bản trích ngang được tạo ra cho bạn, bạn cần phải chọn một tên để hiển thị. Tên hiển thị của bạn sẽ đi kèm theo các nội dung mà bạn đăng tải trên developerWorks.

Tên hiển thị cần có từ 3 đến 30 ký tự. Tên xuất hiện của bạn phải là duy nhất trên trang Cộng đồng developerWorks và vì lí do an ninh nó không phải là địa chỉ email của bạn.

Các trường được đánh dấu hoa thị là bắt buộc (*).

(Tên hiển thị cần có từ 3 đến 30 ký tự)

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Thông tin gửi đi được đảm bảo an toàn.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=70
Zone=Rational, Nguồn mở
ArticleID=444875
ArticleTitle=Tạo các thành phần JavaServer tuỳ chỉnh trong phiên bản 7.5 của IBM Rational Application Developer
publish-date=11062009