PDF:

Bộ tạo cổng thông tin Rational Application Developer
của IBM Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng
thông tin và chuẩn portlet trên Web 2.0 dành cho IBM
WebSphere Portal phiên bản V6.1
Charu Malhotra
Kỹ sư phần mềm
IBM Corporation
15 01 2010
Bài viết này trình bày về hỗ trợ tạo Web 2.0 được giới thiệu trong bộ công cụ IBM® Rational®
Application Developer phiên bản V7.5 dành cho các ứng dụng cổng thông tin và chuẩn portlet
chạy trên IBM® WebSphere® Portal phiên bản V6.1 và cao hơn. Để giúp bạn hiểu rõ hơn về hỗ
trợ công công cụ này, tác giả bài viết cũng sẽ thảo luận về khái niệm cơ bản và lợi thế của các
công nghệ dựa trên Web 2.0.
Xem thêm bài trong loạt bài này
Bài viết này giúp bạn biết cách khai thác những lợi thế của hỗ trợ tạo Web 2.0 trong bộ công cụ
IBM® Rational® Application Developer phiên bản V7.5 dành cho các ứng dụng cổng thông tin và
chuẩn portlet chạy trên IBM® WebSphere® Portal V6.1. Trong một ứng dụng chuẩn portlet nhất
định, mỗi yêu cầu tới máy chủ sẽ khiến trang trình duyệt phải làm mới lại. Điều này dẫn tới trang
web bị rung và các thao tác không được liên tục. Công nghệ Web 2.0 giúp bạn có thể tạo ra một
ứng dụng động và khả năng phản hồi nhanh hơn. Mục đích của công nghệ này là biến các trình
duyệt Web thành các máy khách semi-rich bằng cách điều khiển logic giao diện người dùng cho
việc hoàn trả trang, điều hướng, tập hợp và tương tác chuẩn portlet chéo vào trong các trình duyệt
của người dùng.
Hỗ trợ tạo Web 2.0, cung cấp bởi Rational Application Developer, giúp hỗ trợ và giải quyết quá
trình tạo ra các ứng dụng cổng thông tin và chuẩn portlet động và sẵn sàng hồi đáp. Với công cụ hỗ
trợ này, bản có thể:
• Thiết kế các portlet tương tác sử dụng Nhấn chuột để kích hoạt phía máy khách (Client-Side
Click-to-Action), nó là một mô hình sự kiện mới được giới thiệu trong WebSphere Portal V6.1
dành cho việc liên kết giữa các portlet.
• Chèn thực đơn Person Menu và khả năng mở rộng thực đơn Person Menu.
© Copyright IBM Corporation 2010
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Nhẫn hiệu đăng ký
Trang 1 của 54
developerWorks®
ibm.com/developerWorks/vn/
• Sử dụng một máy chủ proxy Ajax dành cho các ứng dụng chuẩn portlet.
• Sử dụng một mô hình lập trình phía máy khách để lấy ra các portlet ưu tiên một cách hiệu quả,
thực thi các thay đổi trạng thái portlet trên phía máy khách.
Bài viết này sẽ thảo luận lần lượt những chủ đề được liệt kê ở trên. Đối với mỗi chủ đề, nó sẽ được
bắt đầu bằng cách miêu tả một công nghệ dựa trên Web 2.0 nhất định, kèm theo đó là những ví dụ
mẫu để minh họa.
Ai nên đọc bài viết này: Những nhà phát triển ứng dụng dựa trên cổng thông tin và chuẩn portlet.
Mục đích của bài viết này: Hướng dẫn cách phát triển các ứng dụng dựa trên cổng thông tin và
chuẩn portlet, phong phú, tương tác và sẵn sàng phản hồi, khai thác các lợi thế của công cụ hỗ trợ
cho gắn thẻ ngữ nghĩa, máy chủ proxy Ajax, và mô hình lập trình phía máy khách.
Thiết kế các portlet có khả năng tương tác và hợp tác bằng việc sử dụng
Nhấn chuột để kích hoạt phía máy khách
Một sự kiện click-to-action (C2A) là một trong những cách mà các portlet có thể tương tác với nhau
và có thể chia sẻ thông tin.
Click-to-action (C2A)
Sử dụng phương pháp phân phối C2A, bạn có thể truyền dữ liệu từ một portlet nguồn tới một hay
nhiều portlet đích chỉ đơn giản bằng một cái nhấn chuột. Khi bạn nhấn phần tử nguồn, một thực đơn
kéo ra sẽ hiển thị một liệt kê các hành động đích phù hợp với nguồn được chọn. Khi bạn chọn một
mục thực đơn, đích tương ứng được gọi ra, và dữ liệu nguồn được truyền tới nó. Sau khi dữ liệu
nguồn được xử lý, portlet đích tạo ra một hành động và hiển thị các kết quả.
Nhấn chuột để kích hoạt phía máy khách
Nhấn chuột để kích hoạt phía máy khách là thực thi mới của khung làm việc C2A được giới thiệu
trong WebSphere Portal V6.1. Nó được dựa trên công nghệ Web 2.0, và sử dụng thẻ ngữ nghĩa để
định nghĩa các nguồn và các đích.
Mục đích chính của các thẻ ngữ nghĩa là sử dụng lại nội dung chuẩn của một tài liệu HTML, và diễn
giải nó với siêu thông tin (metadata) được đánh giá trong quá trình phân tích Mô hình Đối tượng Tài
liệu (DOM).
Gắn thẻ ngữ nghĩa và Khung làm việc Đối tượng Trực tiếp
Nhấn chuột để kích hoạt phía máy khách được xây dựng trên Khung làm việc Đối tượng Trực tiếp
(LOF), nó định nghĩa các nguồn C2A như là các đối tượng trực tiếp trong hệ thống. Phần tử gốc của
một thẻ ngữ nghĩa được đánh dấu bằng cách thêm một lớp nhất định vào phần tử mà đã được xác
định bởi khung làm việc đối tượng trực tiếp.
LOF cũng cung cấp việc phân tích DOM cơ bản và các dịch vụ quản lý thực đơn.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 2 của 54
ibm.com/developerWorks/vn/
developerWorks®
Các lợi thế so với công nghệ C2A trước đây
Công nghệ Nhấn chuột để kích hoạt phía máy khách mới được giới thiệu trong WebSphere Portal
có rất nhiều lợi thế so với công nghệ C2A trước đây.
• Mô hình tạo sự kiện mới được giới thiệu này là sẵn có cho cả các portlet của IBM và Java™
Specification Request (JSR), trong khi đó, công nghệ C2A trước đây chỉ được sử dụng cho các
portlet được gắn vào IBM Portlet API.
• Nó hỗ trợ các hành động đích JavaScript C2A phía máy khách cùng với các hành động phía
máy chủ. Ví dụ, khi bạn chọn một mục thực đơn trên portlet nguồn và dữ liệu nguồn được đưa
tới portlet đích tương ứng, hành động được tạo ra ở portlet đích có thể là một hành động phía
máy chủ hay một hành động JavaScript.
• Với công nghệ Nhấn chuột để kích hoạt phía máy khách mới, việc đánh giá và thực thi các
đích và nguồn C2A được diễn ra trên một trình duyệt. Chúng không yêu cầu các thao tác trên
máy chủ, và công nghệ này cũng giúp xóa bỏ mã trình sinh ra thực đơn từ máy chủ. Điều này
giúp giảm tải cho máy chủ.
• Đánh dấu thực đơn được sinh ra chi khi biểu tượng thực đơn nguồn C2A được nhấn.
Tất cả lợi thế này giúp có một UI tương tác và phản hồi nhanh hơn, mà không bị lỗi vòng lặp máy
chủ.
Thuật ngữ
Hình 1 minh họa các thành phần C2A. Bảng 1 liệt kê các thuật ngữ sẽ được sử dụng trong bài viết
này dành cho Nhấn chuột để kích hoạt phía máy khách.
Hình 1. Nhấn chuột để kích hoạt phía máy khách
Bảng 1. Thuật ngữ
Thuật ngữ
Mô tả
Nguồn C2A
Kiểu dữ liệu được gắn thẻ ngữ nghĩa như một nguồn C2A.
Đích C2A
Một hành động được định nghĩa dành cho một loại nguồn C2C nhất
định.
Portlet nguồn
Một portlet chứa một hay nhiều định nghĩa đối tượng nguồn C2A.
Portlet đích
Một portlet chứa một hay nhiều các định nghĩa hành động đích C2A.
(Chú ý: một portlet có thể đóng vai trò là một portlet nguồn và portlet
đích).
C2A hover UI
Biểu tượng xuất hiện cạnh một đối tượng nguồn C2A, biểu thị rằng có
một thực đơn liên quan tới đối tượng đó.
Thực đơn kéo ra C2A
Thực đơn xuất hiện khi bạn nhấn vào C2A hover UI. Nó có thể chứa
phần đầu của một thực đơn tùy chọn (xem Hình 1 bên trên).
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 3 của 54
developerWorks®
ibm.com/developerWorks/vn/
Phần đầu thực đơn
Vùng trên cùng của thực đơn nơi nguồn C2A có thể sinh ra với các đánh
dấu. Nó thường được sử dụng để cung cấp thông tin mô tả về đối tượng
nguồn.
Khung làm việc Đối tượng Trực tiếp
C2A được thực thi như một dịch vụ trong khung làm việc này.
Công cụ hỗ trợ Rational Application Developer dành cho Nhấn chuột để kích
hoạt phía máy khách
Công cụ hỗ trợ dành cho Nhấn chuột để kích hoạt phía máy khách trong Rational Application
Developer cung cấp các tính năng như các thủ thuật trực quan, bảng mầu sắc và các mục thực
đơn, sinh mã trình tự động, và kiểu dữ liệu tương ứng. Những hàm số này giúp bạn tạo ra các ứng
dụng chuẩn portlet bằng Nhấn chuột để kích hoạt phía máy khách một cách rất dễ dàng.
Các công cụ có thể giúp bạn tạo ra một portlet:
• Gửi dữ liệu tới các portlet khác (portlet nguồn).
• Nhận dữ liệu tới các portlet khác, và sau đó cập nhật theo dữ liệu đó (portlet đích).
Một portlet đóng vai trò vừa là một portlet nguồn vừa là một portlet đích, thì có thể gửi dữ liệu tới
một portlet và nhận dữ liệu từ một portlet khác.
Những ứng dụng mẫu
Bài viết này sẽ trình bày hai ứng dụng ví dụ để giúp bạn hiểu rõ các tính năng của Nhấn chuột để
kích hoạt phía máy khách:
• Ứng dụng đầu tiên giúp bạn biết cách gửi dữ liệu từ một portlet nguồn tới một portlet đích, và
sau đó gọi ra một hành động JavaScript đơn giản trên portlet đích sau khi nó nhận được dữ
liệu.
• Ví dụ thứ hai là một ứng dụng portlet được sử dụng bởi một công ty vận tải để lưu thông tin chi
tiết về các đơn đặt hàng và khách hàng của họ. Ở đây, chúng ta sẽ thảo luận về năm portlet
của ứng dụng này.
• Portlet Orders lưu giữ thông tin về các đơn đặt hàng theo từng tháng
• Portlet Order Details cho thấy thông tin chi tiết về một đơn đặt hàng
• Portlet Account Details cho thấy thông tin tài khoản chi tiết của một đơn đặt hàng
• Portlet Customer Details cho thấy thông tin chi tiết về một khách hàng nhất định
• Portlet Tracking Details cho thấy thông tin theo dõi chi tiết của một đơn đặt hàng
Trong ứng dụng về vận tải hàng hóa, bạn sẽ xem cách các portlet Order Details và Tracking Details
có thể trao đổi dữ liệu bằng việc sử dụng Nhấn chuột để kích hoạt phía máy khách. Trong phản hồi
cho hành động đó, một hành động phía máy chủ có thể được gọi ra trên portlet Tracking Details.
Nếu bạn sử dụng các công cụ được cung cấp bởi Rational Application Developer, những nhiệm vụ
trên sẽ được đơn giản hóa rất nhiều.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 4 của 54
ibm.com/developerWorks/vn/
developerWorks®
Ứng dụng mẫu 1
Trong ứng dụng mẫu này, bạn có thể gửi tên của bạn từ portlet nguồn tới các portlet đích. Dựa trên
giá trị nhận được, portlet đích sẽ gọi một hành động JavaScript và in ra "Hello [tên của bạn]" trên
portlet đích.
Hình 2. Mẫu Display Myname
Để có được kết quả như ở trên, bạn sẽ phải thực hiện theo những bước dưới đây:
1. Tạo mới một dự án portlet (C2ASource).
2. Tạo mới một portlet (portlet C2ATarget) trong dự án portlet C2ASource.
3. Cho phép portlet C2ASource có thể gửi dữ liệu tới portlet C2ATarget bằng cách sử dụng Nhấn
chuột để kích hoạt phía máy khách.
4. Chèn thêm một thực đơn Nhấn chuột để kích hoạt phía máy khách trên thanh thực đơn
nguồn.
5. Cho phép portlet C2ATarget có thể nhận dữ liệu từ portlet C2ASource bằng cách sử dụng một
Nhấn chuột để kích hoạt phía máy khách.
6. Xuất bản/triển khai ứng dụng portlet trên WebSphere Portal.
Tạo một dự án C2A Source Portlet
1. Chọn File > New > Project > Portlet Project và nhấn Next. Cửa sổ New Portlet Project sẽ
được hiện ra. Nhập các thông tin dưới đây, như biểu thị trong Hình 3.
a. Nhập C2aSource vào trường dữ liệu Tên dự án (Project name) của portlet.
b. Chọn WebSphere Portal 6.1 làm Target Runtime.
c. Chọn JSR 168 Portlet (trong ví dụ này), JSR 286 Portlet hay IBM Portlet như là các
Portlet API.
d. Chọn Faces portlet (trong ví dụ này) hay Basic portlet trong trường dữ liệu Portlet
type.
2. Nhấn Next và sau đó nhấn Finish.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 5 của 54
developerWorks®
ibm.com/developerWorks/vn/
Hình 3. Xác định tên và thư mục lưu dành cho dự án portlet mới
Tạo portlet C2aTarget
Tạo mới một portlet(C2aTarget) trong dự án portlet C2aSource mà bạn đã tạo ra trước đó.
1. Nhấn phải chuột lên dự án C2ASource project trong phần Project Explorer.
2. Chọn New > Portlet. Cửa sổ New Portlet hiện ra. Nhập các thông tin dưới đây, như biểu thị
Hình 4.
a. Nhập C2ATarget vào trường dữ liệu Tên (Name) của portlet.
b. Chọn Portlet type cho portlet C2ATarget giống với kiểu của portlet C2ASource.
3. Nhấn Next và sau đó nhấn Finish.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 6 của 54
ibm.com/developerWorks/vn/
developerWorks®
Hình 4. Chọn dự án portlet cho portlet mới được tạo
Cho phép portlet C2ASource có thể gửi dữ liệu
Cho phép portlet C2ASource có thể gửi dữ liệu tới portlet C2ATarget bằng cách sử dụng Nhấn
chuột để kích hoạt phía máy khách
1. Nhấn đúp lên tệp C2ASourceView.jsp để mở nó trong Page Designer.
2. Chọn bảng vẽ Portlet trong phần Palette.
3. Kéo mục thực đơn Client-Side Click-to-Action Output Property từ bảng palet lên trên
C2ASourcePortletView.jsp, như được biểu thị trong Hình 5.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 7 của 54
developerWorks®
ibm.com/developerWorks/vn/
Hình 5. Kéo và thả mục pálet để thiết kế thẻ
4. Chọn Insert > Portlet > Client-Side Click-to-Action Output Property trên thanh thực đơn,
như được biểu thị trong Hình 6.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 8 của 54
ibm.com/developerWorks/vn/
developerWorks®
Hình 6. Chọn lệnh thực đơn
Cửa sổ Insert Client-Side Click-to-Action Output Property được hiển thị.
Bạn cần nhập vào hai trường dữ liệu dưới đây để cho phép một portlet có thể gửi dữ liệu:
• Data Type URI: Kiểu tên miêu tả định dạng và ngữ nghĩa của dữ liệu
• Value: Dữ liệu cụ thể được đi qua hoạt động đích
Để thực hiện điều này, bạn hãy làm theo những bước dưới đây, như được biểu thị trong Hình 7:
5. Định rõ http://C2Asource#Myname trong trường dữ liệu Data Type URI.
6. Định rõ tên của bạn (hay giá trị bạn muốn gửi tới portlet đích) trong trường dữ liệu Value và
sau đó nhấn Finish.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 9 của 54
developerWorks®
ibm.com/developerWorks/vn/
Hình 7. Miêu tả kiểu dữ liệu mà portlet có thể vận chuyển
7. Lưu tệp C2ASourceView.jsp.
8. Để xem mã trình đã chèn, hãy nhấn thẻ Source.
Mã trình đối tượng nguồn Client-Side Click-to-Action được biểu thị trong Ví dị 1, được tự động sinh
ra và được chèn vào tệp C2ASourceView.jsp.
Ví dụ 1. Mã trình đối tượng nguồn
<div class="C2A:source">
<span class="C2A:typename" style="display: none">http://C2Asource#MyName</span>
<span class="C2A:value" style="display: none">Charu</span>
<span class="C2A:anchor">Anchor Data</span>
</div>
Như bạn có thể quan sát trong mã trình này, các thẻ <div> và <span> cung cấp các thuộc tính lớp
của chúng với những ý nghĩa đặc biệt, được đánh giá bởi LOF trong quá trình phân tích DOM.
Anchor Data là giá trị mặc định được chèn vào cho C2A hover UI String (đó là giá trị được hiển thị
trong trình duyệt), biểu thị một C2ASource. Khi ứng dụng portlet được xuất bản trên WebSphere
Portal, đi qua Anchor Data cho bạn thấy thực đơn portlet nguồn. Thực đơn nguồn có một đầu vào
cho mỗi portlet đích, nó có thể sử dụng giá trị được gửi bởi portlet nguồn.
Bạn có thể thay đổi giá trị này từ Anchor Data thành giá trị bạn muốn như là C2A hover UI String.
Hình 8 biểu thị khung nhìn Design của C2ASourceView.jsp.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 10 của 54
ibm.com/developerWorks/vn/
developerWorks®
Hình 8. C2aAnchor
Chèn thực đơn
Để chèn phần đầu thực đơn Client-Side Click-to-Action vào thực đơn nguồn, hãy thực hiện các
bước dưới đây:
1. Nhấn đúp vào tệp C2ASourceView.jsp để mở nó ra trong Page Designer.
2. Chọn bảng vẽ Portlet trong khung nhìn Palette.
3. Kéo mục thực đơn Client Side click-to-action Menu Header từ palet trên tệp
C2ASourcePortletView.jsp, như biểu thị trong Hình 9.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 11 của 54
developerWorks®
ibm.com/developerWorks/vn/
Hình 9. Kéo mục thực đơn đến thẻ Design
4. Bạn có thể chọn Insert > Portlet > Client-Side Click-to-Action Menu Header Property từ
thanh thực đơn.
Cửa sổ Insert Menu Header được hiển thị.
5. Định rõ Display Myname trong nội dung của phần đầu, như bạn nhìn thấy trong Hình 10 và sau
đó nhấn Finish.
Hình 10. Định rõ nội dung của phần đầu thực đơn trong portlet nguồn
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 12 của 54
ibm.com/developerWorks/vn/
developerWorks®
6. Lưu tệp C2ASourceView.jsp.
7. Để xem mã trình được chèn, hãy nhấn thẻ Source.
Mã trình phần đầu thực đơn Client-Side Click-to-Action được biểu thị trong Ví dụ 2 được tự động
sinh ra và được chèn vào tệp C2ASourceView.jsp.
Ví dụ 2. Mã trình phần đầu thực đơn
<p class="c2a:display" style="display: none"> Display Myname </p>
Mã trình đối tượng nguồn Client-Side Click-to-Action được cập nhật, như được biểu thị trong Ví dụ
3.
Ví dụ 3. Mã trình đối tượng nguồn
<div class="c2a:source">
<span class="c2a:typename" style="display: none">http://c2asource#MyName</span>
<span class="c2a:value" style="display: none">Charu</span>
<span class="c2a:anchor">Charu Malhotra</span>
<p class="c2a:display" style="display: none"> Display My name </p>
</div>
Cho phép portlet C2ATarget có thể nhận dữ liệu
Cho phép portlet C2ATarget có thể nhận dữ liệu từ portlet C2ASource bằng việc sử dụng ClientSide Click-to-Action.
Thiết kế portlet C2ATarget
(Bạn có thể bỏ qua các bước dưới đây nếu bạn chọn Basic portlet trong trường dữ liệu Portlet
type ở bước 1 của phần "Tạo một dự án Portlet Nguồn C2A", bởi vì portlet cơ bản đã có biểu mẫu
mặc định với các trường văn bản và nút bấm đệ trình.)
1. Nhấn đúp lên tệp C2ASourceView.jsp để mở nó.
2. Chuyển sang khung nhìn Design.
3. Chọn bảng Form Tags trong khung nhìn Palette.
4. Kéo đối tượng Form từ palet lên trên tệp C2ATargetView.jsp.
5. Bây giờ, hãy kéo đối tượng Text Field từ palet lên trên biểu mẫu này.
6. Hộp thoại Insert Text Field được hiển thị. Định rõ C2AInput trong trường dữ liệu Name và nhấn
OK.
7. Tiếp tục, kéo đối tượng nút bấm Submit từ palet lên trên biễu mẫu trước đó và gắn với trường
văn bản bạn vừa chèn vào, như được biểu thị trong Hình 11.
8. Hộp thoại Insert Submit Button được hiển thị. Định rõ my submit trong trường dữ liệu Name và
Submit trong trường dữ liệu Label, và sau đó nhấn OK.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 13 của 54
developerWorks®
ibm.com/developerWorks/vn/
Hình 11. Thiết kế khung nhìn của portlet C2aTarget trước khi cho phép nó như là
một đích C2a
Cho phép portlet C2ATarget có thể nhận dữ liệu
Cho phép portlet C2ATarget có thể nhận dữ liệu từ portlet C2ASource.
1. Chọn bảng Portlet trong khung nhìn Palette.
2. Kéo mục thực đơn Client-Side Click-to-Action Input Property từ palet lên trên nút bấm
Submit mà bạn đã tạo ra bằng cách sử dụng các bước trước đó (hoặc nút bấm mặc định
Submit đối với các portlet cơ bản), như được biểu thị trong Hình 12.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 14 của 54
ibm.com/developerWorks/vn/
developerWorks®
Hình 12. Kéo mục pálet Input Property
3. Bạn có thể chọn Insert > Portlet > Client-Side Click-to-Action Input Property từ thanh thực
đơn.
Cửa sổ Insert Client-Side Click-to-Action Input Property được hiển thị.
Ba đầu vào được yêu cầu từ người dùng để cho phép một portlet có thể nhận dữ liệu
• Data Type URI: Nhập một tên để miêu tả định dạng và ngữ nghĩa của dữ liệu. Tên này phải
phù hợp với giá trị của trường dữ liệu Data Type URI dành cho các portlet nguồn C2A.
• Action Value: Hành động được thực thi khi giá trị được gửi bởi portlet nguồn C2A tới portlet
đích. Đây có thể là một hành động phía máy chủ hay một hành động JavaScript.
• Action Label: Nhãn được hiển thị như là thực đơn C2A dành cho đích này. Nhãn này tương
ứng với một đầu vào trong thực đơn portlet nguồn, như được biểu thị trong Hình 1 trước đây.
Trường Data Type URI cho thấy kiểu dữ liệu có thể phù hợp trong liệt kê thả xuống, như được biểu
thị trong Hình 13.
4. Chọn http://C2Asource#Myname từ trường dữ liệu thực đơn thả xuống Data Type URI, như
được biểu thị trong Hình 14, và sau đó nhấn Next.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 15 của 54
developerWorks®
ibm.com/developerWorks/vn/
Hình 13. Miêu tả kiểu dữ liệu mà portlet của bạn có thể truy cập
5. Đối với tình huống này Định rõ javascript:void(0); trong trường dữ liệu Action Value để
tránh lỗi vòng lặp tới máy chủ. Trong phần tiếp theo, bạn sẽ tìm hiểu cách một hành động
JavaScript có thể được gọi ra trên sự kiện đệ trình của biểu mẫu.
6. Định rõ Send My name to Target trong trường dữ liệu Action Label, như được biểu thị trong
Hình 14, và sau đó nhấn Finish.
Hình 14. Định rõ các hành động chi tiết.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 16 của 54
ibm.com/developerWorks/vn/
developerWorks®
7. Lưu tệp C2ATargetView.jsp.
8. Để xem mã trình được chèn, nhấn thẻ Source.
Mã trình đối tượng đích Client-Side Click-to-Action trong Ví dụ 4 được sinh ra tự động và được
chèn vào tệp C2ATargetView.jsp.
Ví dụ 4. Mã trình đích
<form class="c2a:target" action="javascript:void(0);">
<input type="text" name="c2aInput" size="20" class="c2a:action-param"><br>
<input type="submit" name="mysubmit" value="Submit">
<span class="c2a:typename" style="display: none">http://c2asource#MyName</span>
<span class="c2a:action-label" style="display: none"> Send My name to Target</span>
</form>
Trường văn bản c2aInput, có thể như là c2a:action-param, nhận giá trị được gửi bởi nguồn C2A.
Hình 15 biểu thị khung nhìn Design của tệp C2ATargetView.jsp.
Hình 15. Khung nhìn Design của portlet C2aTarget sau khi cho phép nó như là
một đích C2a
9. Chuyển sang khung nhìn Source của tệp C2ATargetView.jsp.
10. Thêm mã trình và hành động JavaScript dưới đây vào trong tệp C2ATargetView.jsp, trên thẻ
form, như được biểu thị trong Ví dụ 5.
Ví dụ 5. Hành động JavaScript trên thẻ biểu mẫu
<b><div id="mydiv"></div></b>
<br><br>
<script type="text/javascript">
function displayName()
{
var name = window.ibm.portal.c2a.event.value;
var myname=document.getElementById("mydiv");
myname.innerHTML= "Hello " +name +"!!";
myname.value="Hello " +name + "!!";
}
</script>
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 17 của 54
developerWorks®
ibm.com/developerWorks/vn/
JavaScript này in ra "Hello [tên bạn]" khi được gọi ra bởi portlet đích.
11. Tiếp theo, trong thẻ biểu mẫu, thêm thuộc tính onsubmit="displayName();return false;".
Thuộc tính này sẽ gọi ra JavaScript ở trên khi giá trị từ portlet nguồn C2A được gửi tới portlet đích,
như được biểu thị trong Ví dụ 6.
Ví dụ 6. Giá trị từ portlet nguồn đến portlet đích
<form class="c2a:target" onsubmit="displayName();return false;"
action= "javascript:void(0);">
<input type="text" name="c2aInput" id=mytext size="20" class="c2a:actionparam"><br>
<input type="submit" name="mysubmit" value="Submit">
<span class="c2a:typename" style="display: none">http://c2asource#MyName</span>
<span class="c2a:action-label" style="display: none" >Send Myname to Target </span>
</form>
12. Lưu tệp C2ATargetView.jsp.
Xuất bản/triển khai ứng dụng chuẩn portlet trên WebSphere Portal
Bây giờ, ứng dụng chuẩn portlet đã sẵn sàng được xuất bản trên WebSphere Portal.
Nhấn phải chuột lên dự án portlet C2ASource và chọn Run on Server. Hình 16 cho thấy một ví dụ
đơn giản khi các portlet được xuất bản.
Hình 16. Hiển thị ví dụ mẫu Myname được xuất bản trên WebSphere Portal V6.1
Nhấn để mở rộng ảnh
Ứng dụng mẫu 2
Bạn sẽ có các portlet dưới đây trong ứng dụng chuẩn portlet Shipping Details:
• Orders: Portlet này hiển thị tổng các đơn đặt hàng trong một tháng cụ thể. Nó có chức năng
như một nguồn C2A, gửi:
• Order_ID tới Order Details và Account Details.
• Customer_ID tới Customer Details.
• Order Details: Portlet này hiển thị chi tiết cho một đơn đặt hàng cụ thể. Nó có chức năng như
đích C2A, nhận Order_ID từ portlet Orders. Bài viết này hướng dẫn cách cho phép portlet này
có thể gửi Tracking _ID tới portlet Tracking Details bằng cách sử dụng tùy chọn nguồn C2A.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 18 của 54
ibm.com/developerWorks/vn/
developerWorks®
• Account Details: Portlet này hiển thị chi tiết tài khoản cho một đơn đặt hàng cụ thể. Nó có
chức năng như đích C2A, nhận Order_ID từ portlet Orders.
• Customer Details: Portlet này hiển thị chi tiết cho một khách hàng cụ thể. Nó có chức năng
như đích C2A, nhận Customer_ID từ portlet Orders.
• Tracking Details: Portlet này hiển thị chi tiết cho một vận chuyển hàng cụ thể. Bài viết này
hướng dẫn cách cho phép nó có thể nhận Tracking_ID từ portlet Order Details bằng cách sử
dụng tùy chọn đích C2A.
Để bắt đầu, bạn hãy tải xuống ví dụ mẫu ở cuối bài viết này và chạy nó trên WebSphere Portal.
Tình huống hiện tại là OrdersPortlet gửi:
• Order_ID tới Order Details và Account Details
• Customer_ID tới Customer Details
Khi ví dụ mẫu được xuất bản trên máy chủ, bạn hãy thực hiện các bước dưới đây:
1. Nhập dữ liệu tháng (ví dụ, September) vào trong hộp văn bản được hiển thị trong
OrdersPortlet, và sau đó nhấn Submit. Những đơn đặt hàng trong một tháng bạn nhập vào đó
sẽ được hiển thị.
2. Trong khi hiển thị các chi tiết của đơn đặt hàng, hãy di chuột lên trên bất cứ Order_ID nào.
Một thực đơn sẽ được hiển thị.
3. Nhấn mục thực đơn Show Order Details. Chi tiết của một đơn đặt hàng cụ thể được hiển thị
trong portlet Order Details.
4. Nhấn mục thực đơn Show Account Details. Thông tin tài khoản chi tiết của một đơn đặt hàng
cụ thể được hiển thị trong portlet Account Details.
5. Bây giờ, hãy di chuột lên một Customer_ID bất kỳ, bạn có thể thấy một thực đơn.
6. Nhấn mục thực đơn Show Customer Details. Thông tin chi tiết của một khách hàng cụ thể
được hiển thị trong portlet Customer Details.
Hình 17 cho thấy ví dụ sau khi nó được xuất bản (trước khi cho phép Order Details như là một
C2aSource có thể gửi Tracking_ID tới portlet Tracking Details).
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 19 của 54
developerWorks®
ibm.com/developerWorks/vn/
Hình 17. Ví dụ về Shipping Details
Như bạn có thể thấy trong ví dụ được xuất bản, hiện tại chưa có mối liên hệ nào giữa hai portlet
Order Details và Tracking Details.
Bây giờ, bạn sẽ được hướng dẫn cách cho phép portlet Order Details, như là một nguồn C2A, có
thể gửi Tracking_ID tới portlet Tracking Details. Ngược lại, portlet Tracking Details, như là một
đích C2A, được cho phép có thể nhận Tracking_ID từ portlet Order Details. Sau khi nó nhận
Tracking_ID, một hành động phía máy chủ được gọi ra trên portlet Tracking Details. Portlet sẽ hiển
thị thông tin chi tiết của theo dõi việc vận chuyển hành hóa cụ thể, như được biểu thị trong Hình 18.
Hình 18. Mục đích của ví dụ Shipping Details
Để có được kết quả như ở trên, hãy thực hiện theo các bước sau:
7. Cho phép OrderDetail như là một nguồn C2A
8. Cho phép TrackingDetail như là một đích C2A
9. Xuất bản ứng dụng chuẩn portlet trên WebSphere Portal.
Cho phép OrderDetail như là một nguồn C2A
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 20 của 54
ibm.com/developerWorks/vn/
developerWorks®
1. Nhấn đúp lên tệp OrderDetailsView.jsp để mở nó trong Page Designer.
2. Kéo Client side Click-to-Action Output Property từ palet lên trên cột Tracking_ID trong
khung nhìn Design của tệp OrderDetailsView.jsp.
Hình 19. Kéo các đặc tính vào cột Tracking_ID
3. Cửa sổ Insert Client-Side Click-to-Action Output Property được hiển thị. Hãy nhập các giá trị
cho các trường dữ liệu Data Type URI và Value, như được biểu thị trong Hình 20, và sau đó
nhấn Finish.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 21 của 54
developerWorks®
ibm.com/developerWorks/vn/
Hình 20. Cho phép OrderDetail như là một nguồn C2A
4. Mở tệp OrderDetailsView.jsp trong khung nhìn Design.
5. Thay đổi giá trị Anchor từ Anchor Data thành giá trị bạn muốn như là chuỗi C2A Hover UI.
Hãy giữ giá trị của chuỗi C2A Hover UI giống như giá trị của C2A đã được đi qua. Ví dụ, trong
tình huống hiện tại, Tracking_ID được đi qua bởi portlet Order Details, thì portlet này nên được
hiển thị cho người sử dụng thấy.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 22 của 54
ibm.com/developerWorks/vn/
developerWorks®
Hình 21. C2aAnchor2
6. Mở tệp OrderDetailsView.jsp trong khung nhìn Source. Mã trình được hiển thị trong Ví dụ 7
được chèn vào.
Ví dụ 7. Mã trình của Tracking ID
<td>
<div class="c2a:source">
<span class="c2a:typename" style="display: none">
http://clientsidec2a#TrackingID</span>
<span class="c2a:value" style="display: none"><%=od.getTrackingId() %></span>
<span class="c2a:anchor"><%=od.getTrackingId()%></span>
</div>
</td>
7. Cũng giống như ứng dụng Display Myname, bạn có thể chèn một thực đơn vào nguồn. Định rõ
Send Tracking Id to Tracking Details như những phần nội dung đầu.
8. Lưu OrderDetail tệp sView.jsp. Mã trình đối tượng nguồn Client-Side Click-to-Action được cập
nhật như được biểu thị trong Ví dụ 8.
Ví dụ 8. Mã trình đối tượng nguồn được cập nhật
<td>
<div class="c2a:source">
<span class="c2a:typename" style="display: none">
http://clientsidec2a#TrackingID</span>
<span class="c2a:value" style="display: none">
<%=od.getTrackingId() %></span>
<span class="c2a:anchor"><%=od.getTrackingId()%></span>
<p class="c2a:display" style="display: none">
Send Tracking Id to Tracking Details</p>
</div>
</td>
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 23 của 54
developerWorks®
ibm.com/developerWorks/vn/
Cho phép TrackingDetailnhư là một đích C2A
1. Nhấn đúp để mở tệp TrackingDetailEntry.jsp trong Page Designer
2. Kéo mục thực đơn Client-Side Click-to-Action Input Property từ palet lên trên nút bấm
Submit trong khung nhìn Design của tệp TrackingDetailEntry.jsp, như được biểu thị trong
Hình 22.
Hình 22. Palette DND trên TrackingDetail
Cửa sổ Insert Client-Side Click-to-Action Input Property được hiển thị.
3. Chọn http://clientsideC2A#TrackingID từ thả xuống Data Type URI, như được biểu thị trong
Hình 23, và sau đó nhấn Next.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 24 của 54
ibm.com/developerWorks/vn/
developerWorks®
Hình 23. Cho phép TrackingDetail như là một đích C2A 1
4. Đối với tình huống này, bạn hãy để nguyên giá trị mặc định trong trường dữ liệu Action Value.
5. Định rõ Show Tracking Details trong trường dữ liệu Action Label, như được hiển thị trong
Hình 24, và nhấn Finish.
Hình 24. Cho phép TrackingDetail như là một đích C2A 2
6. Mở tệp TrackingDetailEntry.jsp trong khung nhìn Source để xem mã trình đã chèn, như được
hiển thị trong Ví dụ 9.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 25 của 54
developerWorks®
ibm.com/developerWorks/vn/
Ví dụ 9. Mã trình nguồn được cập nhật TrackingDetail
<FORM method="POST"
enctype="application/x-www-form-urlencoded"
name="TrackingDetails"
class="c2a:target" action="<%= tdb.getActionURL() %>">
<LABEL class="wpsLabelText" for="<%= TrackingPortlet.TRACKING_ID %>"> Enter tracking id
to display details:</LABEL><BR/>
<INPUT name="<%= TrackingPortlet.TRACKING_ID %>" type="text"
class="wpsEditField c2a:action-param"/><BR/>
<INPUT class="wpsButtonText" name="tracking details" type="submit" value="Submit"/>
<span class="c2a:typename" style="display: none"> http://clientsidec2a#TrackingID</span>
<span class="c2a:action-label" style="display: none">Show Tracking Details</span>
</FORM>
Chú ý: Thay đổi tên của nút bấm đệ trình từ đệ trình thành theo dõi thông tin chi tiết và lưu tệp
TrackingDetailEntry.jsp.
Hiện tại ở WebSphere Portal, nút bấm submit không để được đặt tên là "Submit" cho mã trình đích
Client-Side Click-to-Action hoạt động bình thường.
7. Lặp lại các bước này đối với tệp TrackingView.jsp.
Xuất bản ứng dụng chuẩn portlet trên WebSphere Portal
Bây giờ, ứng dụng chuẩn portlet đã sẵn sàng được xuất bản trên WebSphere Portal.
8. Nhấn phải chuột lên dự án portlet và chọn Run on Server. Hình 25 cho thấy ví dụ mẫu sau khi
được xuất bản.
Hình 25. Ví dụ mẫu Shipping Details được xuất bản trên WebSphere Portal
Nhấn để mở rộng hình ảnh
Chèn một thực đơn Person Menu và mở rộng thực đơn Person Menu
trong một ứng dụng chuẩn portlet
Dưới đây là một số thông tin cơ bản về các thành phần của thực đơn Person Menu trong Rational
Application Developer và WebSphere Portal.
Thẻ Person Java™ Server Page (JSP™) cung cấp chức năng công tác theo ngữ cảnh có liên quan
tới một người được đặt tên cụ thể. Nó sinh ra trình HTML, có thể trả lại bộ các hành động để hiển
thị trên thực đơn Person Menu. Bản chất, nó được thực thi như một thẻ JSP phía máy chủ và nó
không thể được gọi từ mã trình JavaScript. Để giảm thiểu tải của máy chủ nhằm giúp cải thiện khả
năng hoạt động và mở rộng, và hỗ trợ các máy khách Ajax, thẻ Person JSP đã được cập nhật
trong WebSphere Portal để có một JavaScript API có thể được gọi ở máy khách.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 26 của 54
ibm.com/developerWorks/vn/
developerWorks®
Thực đơn Person Menu đã được cập nhật, sẽ hiển thị một bộ thông tin liên hệ về những người được
chọn bằng cách định rõ các thuộc tính hCard (hCard là đại diện HTML của vCard).
Mở rộng thực đơn Person Menu cho phép bạn viết mã trình JavaScript cho các hành động có thể
được thực hiện, hay các hành động được định rõ làm đích. Rational Application Developer cung
cấp hỗ trợ công cụ cần thiết cho việc này.
Live Object Framework (LOF) và Semantic Tagging
Những tên người có ngữ nghĩa sử dụng định dạng vi mô hCard tiêu chuẩn, và đối xử như những
đối tượng trực tiếp trong hệ thống. Dịch vụ Person cho phép các thực đơn Person Menu dành cho
hCards trong trang này được cài thêm vào Live Object Framework (LOF).
Những lợi thế của thẻ Person JSP gốc
• Thực đơn Person Menu dựa trên thẻ có ngữ nghĩa mới cung cấp chức năng tương tự với thẻ
JSP Person truyền thống, nhưng với người dùng có nhiều kinh nghiệm:
• Nó cho thấy hover và pop-up trên mỗi hCard.
• Nó cung cấp truy cập cho các mục thực đơn có thể hành động như Show Profile, Send Email, v.v...
• Những thông tin về cá nhân được nhận chỉ khi cửa sổ bật lên cho các cá nhân được biểu thị
trên cổng thông tin, và máy chủ tải rất ít cho tới khi tên của một cá nhân được nhấn vào. Dựa
trên dữ liệu yêu cầu được nhận này, máy chủ sẽ không hoạt động khi tên của cá nhân không
được nhấn.
• Thực đơn mở rộng Person Menu cho phép bạn mở rộng thực đơn Person Menu. Bạn có thể
thêm nhiều hơn một mở rộng. Nó cũng cho phép bạn tùy biến giao diện và đăng ký người sử
dụng.
Ứng dụng mẫu
Bây giờ, bạn sẽ tạo ra một ứng dụng mẫu để chứng minh cách Rational Application Developer có
thể đơn giản hóa nhiệm vụ chèn thực đơn Person Menu, và sau đó mở rộng nó bằng việc sử dụng
thực đơn mở rộng Person Menu trong một ứng dụng chuẩn portlet.
Thêm các hành động vào thực đơn Person Menu
Để thiết kế ứng dụng này, bạn sẽ thực hiện theo các bước dưới đây:
1. Tạo ra một dự án portlet dựa trên WebSphere Portal.
2. Chèn một thực đơn Person Menu vào tệp portlet .jsp.
3. Mở rộng thực đơn Person Menu bằng cách chèn một mã trình thực đơn mở rộng Person
Menu vào trong tệp portlet .jsp.
4. Cung cấp mã trình JavaScript cho thực đơn mở rộng Person Menu.
Sau khi thiết kế ứng dụng chuẩn portlet, hãy xuất bản nó trên WebSphere Portal.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 27 của 54
developerWorks®
ibm.com/developerWorks/vn/
Tạo dự án portlet
1. Chọn File > New > Project > Portlet Project và sau đó nhấn Next. Cửa sổ New Portlet
Project được hiển thị.
2. Nhập PersonMenuExample vào trường dữ liệu Name của portlet.
3. Chọn WebSphere Portal 6.1 trong trường dữ liệu Target Runtime.
4. Chọn JSR 168 Portlet, JSR 286 Portlet hay IBM Portlet cho trường dữ liệu Portlet API.
5. Chọn Faces hay Basic cho trường dữ liệu Portlet type.
6. Nhấn Next và sau đó nhấn Finish.
Chèn một thực đơn Person Menu
1. Nhấn đúp để mở tệp PersonMenuExampleView.jsp trong Page Designer.
2. Chọn bảng Portlet trong khung nhìn Palette.
3. Kéo đối tượng Person Menu từ khung nhìn Palette lên trên tệp
PersonMenuExampleView.jsp, như được hiển thị trong Hình 26.
Hình 26. Mục Person Menu
4. Bạn có thể chọn Insert > Portlet > Person Menu từ thanh thực đơn. Cửa sổ Insert Person
Menu được hiển thị.
5. Định rõ các thuộc tính hCard dưới đây, như được biểu thị trong Hình 27.
• Name
• e-mail
• Address (tùy chọn)
• Phone number (tùy chọn)
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 28 của 54
ibm.com/developerWorks/vn/
developerWorks®
Hình 27. Định rõ thuộc tính thực đơn cá nhân
6. Nhấn Finish và lưu tệp PersonMenuExampleView.jsp.
7. Mở tệp PersonMenuExampleView.jsp trong khung nhìn Source. Mã trình được biểu thị trong
Ví dụ 10 đã được chèn vào.
Ví dụ 10. Mã trình nguồn được chèn
<div class="vcard">
<span class="fn">Charu Malhotra</span>
<span style="display: none"class="email">[email protected]</span>
</div>
Chèn thực đơn mở rộng Person Menu Extension
Tiếp tục với tình huống ở trên.
1. Chọn Portlet trong khung nhìn Palette.
2. Kéo đối tượng Person Menu Extension từ khung nhìn Palette lên trên tệp
PersonMenuExampleView.jsp, như được hiển thị trong Hình 28.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 29 của 54
developerWorks®
ibm.com/developerWorks/vn/
Hình 28. Mục palet Person Menu Extension
4. Bạn có thể chọn Insert > Portlet > Person Menu Extension từ thanh thực đơn. Cửa sổ "Insert
Person Menu Extension" được hiển thị (xem Hình 29).
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 30 của 54
ibm.com/developerWorks/vn/
developerWorks®
Hình 29. Định rõ thuộc tính thực đơn mở rộng cá nhân
Bạn cần chèn những đầu vào dưới đây vào thực đơn mở rộng Person Menu Extension:
• Action details ID: Công cụ hỗ trợ tự động sinh ra id hoạt động cho bạn. Id này là duy nhất đối
với Person Menu Extension cụ thể.
• JavaScript: Tên của JavaScript có hoạt động sẽ được gọi ra khi mục thực đơn được chọn. Nó
thường nằm trong đường dẫn thư mục dưới đây:
[WebSphere Portal Server Home]\ui\wp.tagging.liveobject\semTagEar\Live_Object_Framework.ear
\liveobjects.war\javascript.
• Label: Một nhãn cho Person Menu Extension.
• Description: Một mô tả cho Person Menu Extension.
• Specify ShowIf: Chức năng này quyết định sự hiển thị hay ẩn của Person Menu Extension.
• Specify Action: Đây là hàm số được thực hiện khi nhấn Person Menu Extension. Hàm số này
có dạng @@@ARGS@@@.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 31 của 54
developerWorks®
ibm.com/developerWorks/vn/
5. Nhấn Finish và lưu tệp PersonMenuExampleView.jsp.
6. Mở tệp PersonMenuExampleView.jsp trong khung nhìn Source. Mã trình được biểu thị trong
Hình 11 được tự động sinh ra.
Ví dụ 11. Mã trình nguồn được sinh ra tự động
<div class="com.ibm.portal.action" style="display: none">
<span class="action-id">action_0</span>
<span class="action-impl">/javascript/TestAction.js</span>
<span class="action-context">person</span>
<span class="action-label">Test Action</span>
<span class="action-description">This is a test action for adding
a Person Menu Extension </span>
<span class="action-showif">javascript:TestAction.showif</span>
<span class="action-url">javascript:TestAction.execute(@@@ARGS@@@)</span>
</div>
Mã trình JavaScript dành cho Person Menu Extension (TestAction.js, như đã được định rõ ở phần
trước) thường nằm ở đường dẫn thư mục:
[WebSphere Portal Server Home]
\ui\wp.tagging.liveobject\semTagEar\Live_Object_Framework.ear\liveobjects.war\javascript.
Những nội dung mẫu dành cho tệp TestAction.js sẽ giống như nội dung được biểu thị trong Ví dụ
12.
Ví dụ 12. Nội dung mẫu của TestAction.js
var TestAction = {
showif: function(person) {return true;
},
execute: function(person) { alert("TestAction executed for: " + person.fn);
}
}
Nội dung này sẽ sinh ra một thông báo khi mục thực đơn Test Action mới được chọn.
Xuất bản ứng dụng chuẩn portlet trên WebSphere Portal
Bây giờ, ứng dụng chuẩn portlet đã sẵn sàng được xuất bản trên WebSphere Portal.
1. Nhấn chuột phải lên dự án portlet PersonMenuExample và chọn Run on Server. Hình 30 cho
thấy ví dụ mẫu sau khi được xuất bản.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 32 của 54
ibm.com/developerWorks/vn/
developerWorks®
Hình 30. Ví dụ mẫu Person Menu được xuất bản trên WebSphere Portal
Sử dụng máy chủ proxy Ajax trong các ứng dụng chuẩn portlet
Ajax cho phép các trang Web nạp dữ liệu hay các mảng đánh dấu từ một máy chủ bằng cách sử
dụng các yêu cầu không đồng bộ đã được xử lý cơ bản. Cho nên, những yêu cầu sẽ không làm ảnh
hưởng tới trang Web đang được hiển thị trên trình duyệt.
Các ứng dụng Ajax
Bạn có thể sử dụng Ajax để tăng đáng kể khả năng hồi đáp và sử dụng của một ứng dụng chuẩn
portlet. Bạn thực hiện điều này bằng cách trao đổi một lượng nhỏ dữ liệu với máy chủ, và cùng lúc
chỉ làm mới lại một phần nhỏ của đánh dấu.
Chính sách cùng nguồn gốc
Các ứng dụng Web dựa trên Ajax thỉnh thoảng được sử dụng để thực hiện các yêu cầu Ajax tới các
máy chủ khác với máy chủ chứa tài liệu HTML.
Ví dụ, giả sử bạn đang thiết kế một ứng dụng Web, trong đó bạn muốn:
1. Sử dụng một dịch vị trạng thái truyền đại diện (REST) bên ngoài, như các gợi ý trên công cụ
tìm kiếm Google, kiểm tra chính tả trên Yahoo, v.v...
2. Sử dụng một số dịch vụ REST hợp tác từ xa có trên mạng intranet.
3. Bao gồm nguồn tin tức từ một máy chủ bên ngoài (như CNN).
Hạn chế các yêu cầu XMP HTTP
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 33 của 54
developerWorks®
ibm.com/developerWorks/vn/
Để ngăn ngừa các mã Ajax độc từ một máy chủ sử dụng trình duyệt của bạn như một công cụ tấn
công các máy chủ khác, các yêu cầu chỉ được cho phép tới máy chủ có chứa tài liệu hiện thời, như
được biểu thị trong Hình 31. Chính sách cùng nguồn gốc này ngăn các mã trình phía máy khách
(đặc biệt là JavaScript) nạp nội dung từ giao thức, tên miền và cổng khác với ban đầu.
Hình 31. Chính sách cùng nguồn gốc
Proxy Ajax
Để vượt qua các hạn chế của chính sách cùng nguồn gốc, WebSphere Portal cung cấp một giải
pháp được dựa trên một proxy HTTP phía máy chủ, và lớp Ajax proxy. Lớp proxy Ajax chặn các
cuộc gọi, và truy vấn nội dung từ trang từ xa, như được hiển thị trong Hình 32. Nó cũng cho phép
các tài nguyên này được lưu trữ trong một máy chủ trung tâm. Mô hình an ninh này cho phép
những người quản trị hạn chế quyền truy cập tới các nguồn gốc theo một cách rất linh hoạt.
Hình 32. Lớp proxy Ajax
Ứng dụng mẫu
Ứng dụng AjaxProxyPortletSample được sử dụng trong bài viết này bao gồm một portlet có thể truy
cập các tên miền bên ngoài, bằng cách sử dụng XMLHttpRequests. Để vượt qua chính sách cùng
nguồn gốc, portlet sử dụng lớp proxy Ajax để truy cập những tên miền này.
1. Chọn mục (Rational hay Lotus) từ hộp thả xuống, như được biểu thị trong Hình 33.
2. Tiếp theo, nhấn nút bấm Get the articles. Portlet lấy nguồn các bài viết của developerWorks
(Rational hay Lotus) từ trang Web IBM. Sau đó, nó hiển thị các liên kết tới những chủ đề.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 34 của 54
ibm.com/developerWorks/vn/
developerWorks®
Hình 33. Ví dụ về proxy Ajax
Bạn có thể tải về đầy đủ ví dụ này ở phần cuối của bài viết này. Bài viết này trình bày trình hỗ trợ
tạo proxy Ajax trong Rational Application Developer. Nhưng chủ đề này chỉ được thảo luận rất ngắn
gọn.
Bạn có thể thảo luận những phần dưới đây:
•
•
•
•
•
•
•
Cho phép proxy Ajax hỗ trợ một dự án portlet mới.
Đăng kí servlet proxy trong bộ miêu tả sự triển khai Web.
Định rõ các tham số cấu hình máy chủ proxy Ajax.
Gửi một yêu cầu XMP HTTP qua một máy chủ proxy Ajax.
Xuất bản ứng dụng AjaxProxyPortletSample trên WebSphere Portal.
Cho phép proxy Ajax hỗ trợ cho một dự án portlet có sẵn.
Từ chối proxy Ajax hỗ trợ cho một dự án portlet có sẵn.
Cho phép máy chủ proxy Ajax hỗ trợ cho một dự án portlet mới
1. Chọn File > New > Project > Portlet Project và sau đó nhấn Next. Cửa sổ New Portlet
Project được hiển thị như Hình 34.
2. Nhập AjaxProxyPortletSample vào trường dữ liệu tên Name của portlet.
3. Chọn WebSphere Portal 6.1 trong trường dữ liệu Target Runtime.
4. Chọn JSR 168 Portlet, JSR 286 Portlet hay IBM Portlet cho trường dữ liệu Portlet API.
5. Chọn Faces, Basic, Empty hay Struts cho trường dữ liệu Portlet type.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 35 của 54
developerWorks®
ibm.com/developerWorks/vn/
Hình 34. Dự án portlet mới với máy chủ proxy Ajax
6. Nhấn Show Advanced Settings. Trang Project Facet được hiển thị.
7. Mở rộng giao diện Expand Web 2.0 và chọn Ajax proxy trong hộp lựa chọn, như được biểu thị
trong Hình 35. Nhấn OK.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 36 của 54
ibm.com/developerWorks/vn/
developerWorks®
Hình 35. Trang Project Facets
8. Nhấn Next và sau đó nhấn Finish.
9. Proxy servlet được đăng ký trong bộ miêu tả sự triển khai Web. Mở rộng các thư mục Web
Content > WEB-INF và nhấn đúp lên tệp Web.xml.
10. Bộ miêu tả sự triển khai Web được hiển thị. Nhấn thẻ Servlet, như được biểu thị trong Hình
36.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 37 của 54
developerWorks®
ibm.com/developerWorks/vn/
Hình 36. Bộ miêu tả sự triển khai Web cho thấy các servlet và các
JavaServerPages (JSPs)
Nhấn để mở rộng hình ảnh
11. Chuẩn servlet Ajax Proxy với tên lớp com.ibm.wps.proxy.servlet.ProxyServlet được đăng ký
trong tệp Web.xml.
(Chú ý: Nếu bạn cần truy cập tài nguyên yêu cầu có quyền truy cập, bạn có thể định rõ servlet thứ
hai ánh xạ tới một ràng buộc bảo mật. Để định rõ một servlet ánh xạ mới, hãy nhấn nút bấm Add
trong phần URL Mappings được biểu thị trong Hình 36. Điều này gọi ra hộp thoại Add Servlet
Mapping.)
12. Nhấn thẻ Source trong khung nhìn Web Deployment Descriptor để xem mã trình được thêm
vào tệp Web.xml, như được biểu thị trong Ví dụ 13.
Ví dụ 13. Mã trình được thêm vào trong tệp Web.xml
<servlet>
<servlet-name>ProxyServlet</servlet-name>
<servlet-class>com.ibm.wps.proxy.servlet.ProxyServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ProxyServlet</servlet-name>
<url-pattern>/proxy/*</url-pattern>
</servlet-mapping>
13. Tệp cấu hình máy chủ proxy Ajax được tạo ra. Mở rộng thư mục Web Content> WEB-INF,
như được biểu thị trong Hình 37.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 38 của 54
ibm.com/developerWorks/vn/
developerWorks®
Hình 37. Tệp cấu hình máy chủ proxy Ajax
14. Nhấn đúp lên tệp proxy-config.xml để mở nó trong cửa sổ Ajax Proxy Configuration Editor
được biểu thi trong Hình 38.
Hình 38. Định rõ đường dẫn ánh xạ tới một URL trên một tên miền từ xa
15. Sử dụng tệp proxy-config.xml, bạn có thể định rõ được các tham số cấu hình máy chủ proxy
Ajax. Đầu tiên, bạn có thể thêm một mục cho các quy tắc proxy, như được biểu thị trong Hình
39.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 39 của 54
developerWorks®
ibm.com/developerWorks/vn/
Hình 39. Thêm các quy tắc proxy
Các ánh xạ đường dẫn ngữ cảnh
Một phần tử ánh xạ được sử dụng để ánh xạ các yêu cầu đầu vào tới một URL đích được dựa trên
đường dẫn ngữ cảnh của chúng. Vì thế, mỗi phần tử ánh xạ cần định rõ một thuộc tính contextpath
(và tùy chọn một thuộc tính URL), như được biểu thị trong Hình 40.
Hình 40. Định rõ ánh xạ đường dẫn ngữ cảnh
Nhấn để mở rộng hình ảnh
Chính sách truy cập
Phần tử chính sách được sử dụng để định nghĩa một chính sách truy cập cho một mẫu URL cụ thể,
như được biểu thị trong Hình 41. Nó bao gồm các phần tử phụ dưới đây, như được điểu thị trong
Hình 42:
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 40 của 54
ibm.com/developerWorks/vn/
•
•
•
•
•
developerWorks®
Actions
Headers
Mime-types
Cookies
Users
Hình 41. Định rõ một chính sách truy cập
Nhấn để mở rộng hình ảnh
Hình 42. Định rõ các phần tử chính sách
Các tham số cấu hình chung
Bạn có thể định rõ các tham số liên quan tới HTTP, như là:
• Socket-timeout
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 41 của 54
developerWorks®
ibm.com/developerWorks/vn/
• Retries
• Max-total-connections
• Max-connections-per-host
Gửi một yêu cầu XML HTTP
Giả sử bạn đã tạo ra một ánh xạ ngữ cảnh trong tệp proxy-config.xml, như là được biểu thị trong Ví
dụ 14.
Ví dụ 14. Ánh xạ ngữ cảnh
<proxy:mapping contextpath="/proxy" url="*"/>
Context path:/proxy
URL:*
Bây giờ, nếu bạn muốn lấy phản hồi từ trang http://www.ibm.com/developerworks/myfeed.rss thông
qua servlet proxy, thì bạn phải tạo ra yêu cầu XHR bằng cách xây dựng URL của nó như dưới đây:
http://www.myhostname.com/wps/myapplication/proxy/http/www.ibm.com/developerworks/
myfeed.rss.
URL này chứa đường dẫn được mã hóa của URL http://www.ibm.com/developerworks/myfeed.rss
(trong đó, phần http:// được thay thế bởi http/)
Bạn có thể tạo được mã hóa này trong tệp JavaScript của bạn bằng cách xây dựng hàm số như
được biểu thị trong Ví dụ 15.
Ví dụ 15. Thay thế các ký tự trong URL
encodeURL: function(url) {
return url.replace(/:\/\//, "/");
}
Điều này tạo ra một ánh xạ ngữ cảnh, giống như được biểu thị trong Ví dụ 16.
Ví dụ 16. Ánh xạ ngữ cảnh được tạo ra bởi hàm số được định rõ
<proxy:mapping contextpath="/dw"
url="http://www.ibm.com/developerworks/*"/>
Context path:/dw
URL:http://www.ibm.com/developerworks/*
Trong trường hợp này, nếu bạn muốn lấy phản hồi từ trang http://www.ibm.com/developerworks/
myfeed.rss thông qua một servlet proxy, thì bạn phải tạo ra yêu cầu XHR bằng việc xây dựng URL
của nó như dưới đây:
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 42 của 54
ibm.com/developerWorks/vn/
developerWorks®
http://www.myhostname.com/wps/myapplication/dw/myfeed.rss
Tệp proxy.js trong the AjaxProxyPortletSample chứa mã trình thực hiện các hoạt động dưới đây:
•
•
•
•
Mã hóa URL
Xây dựng đối tượng XHR cho URL này
Gửi yêu cầu XHR tới máy chủ, và nạp phản hồi
Phân tích phản hồi để hiển thị nó trong tệp AjaxProxyPortletSampleView.jsp
Để xem toàn bộ tệp JavaScript, hãy mở rộng thư mục Web Content > JS trong
AjaxProxyPortletSample và sau đó mở tệp proxy.js.
Xuất bản ứng dụng chuẩn portlet trên WebSphere Portal
1. Nhấn chuột phải lên AjaxProxyPortletSample và chọn Run on Server.
2. Khi dự án được xuất bản, chọn mục (Rational hay Lotus) từ liệt kê thả xuống.
3. Tiếp theo, nhấn Get the articles. Để phản hồi, ví dụ mẫu cho thấy những liên kết với những
chủ đề mới nhất trong mục được chọn.
Khi bạn nhấn nút bấm Get the articles, đối tượng XMLHttpRequest được tạo ra bằng cách sử dụng
một URL tương ứng với chủ đề được chọn (Rational hay Lotus). Sau đó, yêu cầu này được đưa tới
ProxyServlet, ủy quyền nó cho máy chủ đích, truy vấn phản hồi, và cuối cùng, trả phản hồi XML
trở lại trình duyệt trên máy khách. Sau đó, JavaScript phân tích và hiển thị phản hồi này theo cách
thân thiện với người sử dụng, như được biểu thị trong Hình 43.
Hình 43. Ví dụ mẫu portlet proxy Ajax được xuất bản trên WebSphere Portal
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 43 của 54
developerWorks®
ibm.com/developerWorks/vn/
Cho phép máy chủ proxy Ajax hỗ trợ đối với một dự án portlet đã tồn tại
1. Nhấn chuột phải lên dự án và chọn Properties > Project Facets. Cửa sổ Project Facet xuất
hiện.
2. Mở rộng Web 2.0 và chọn Ajax proxy trong hộp tùy chọn, và sau đó nhấn OK.
Từ chối máy chủ proxy Ajax hỗ trợ đối với một dự án portlet đã tồn tại
1. Nhấn chuột phải lên dự án và chọn Properties > Project Facets. Cửa sổ Project Facet được
hiển thị.
2. Trên trang Project Facets, xóa Ajax proxy (như được biểu thị trong Hình 44), và sau đó nhấn
OK.
3. Kiểm tra tệp proxy-config.xml được xóa từ thư mục WEB-INF, và đầu vào ProxyServlet được
xóa từ tệp Web.xml.
Hình 44. Từ chối hỗ trợ Ajax
Sử dụng mô hình hỗ trợ lập trình phía máy khách trong WebSphere
Portal
Các phiên bản trước của WebSphere Portal đòi hỏi có một yêu cầu được gửi tới máy chủ cho mỗi
thao tác của portlet. Ví dụ, nếu bạn thay đổi trạng thái cửa sổ portlet thành cực tiểu hoặc cực đại,
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 44 của 54
ibm.com/developerWorks/vn/
developerWorks®
một yêu cầu đệ trình phải được gửi tới máy chủ và phản được gửi trở lại trình duyệt của bạn. Điều
này sẽ khiến một trang phải làm mới lại. Điển hình, các kiểu thao tác phía máy chủ này yêu cầu
những lỗi vòng lặp trên máy chủ.
Để giảm kiểu lặp này của lưu lượng máy chủ, WebSphere Portal hiện tại hỗ trợ một mô hình lập
trình phía máy khách, trong đó, những thay đổi trạng thái của portlet có thể được thực hiện hiệu
quả hơn trên phía máy khách.
Để thực hiện điều này, Rational Application Developer cung cấp công cụ hỗ trợ cần thiết cho mô
hình lập trình phía máy khách.
Dưới đây là những phần thảo luận về những chủ đề này:
1. Tạo ra một mô hình lập trình phía máy khách hỗ trợ dự án portlet.
2. Sử dụng hỗ trợ mô hình lập trình phía máy khách để truy vấn portlet mong muốn trong các dự
án portlet cơ bản.
3. Xuất bản ứng dụng chuẩn portlet trên WebSphere Portal.
Hỗ trợ mô hình lập trình phía máy khách dành cho một dự án portlet mới
Thực hiện thao các bước dưới đây để tạo ra hỗ trợ mô hình lập trình phía máy khách cho dự án
portlet.
1. Chọn File > New > Project > Portlet Project và nhấn Next. Cửa sổ New Portlet Project được
hiển thị.
2. Nhập ClientSideSample vào trường dữ liệu Name của portlet.
3. Chọn WebSphere Portal 6.1 cho trường dữ liệu Target Runtime.
4. Chọn JSR 168 Portlet hay JSR 286 Portlet cho trường dữ liệu Portlet API.
5. Chọn Basic cho trường dữ liệu Portlet type.
6. Nhấn Next ba lần. Trang Advanced Settings được hiển thị, như được biểu thị trong Hình 45.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 45 của 54
developerWorks®
ibm.com/developerWorks/vn/
Hình 45. Thủ thuật tạo hỗ trợ mô hình lập trình phía máy khách cho dự án portlet
7. Hộp lựa chọn Client Side Capabilities trong nhóm Web2.0 Portlet được chọn mặc định. Việc
chọn này cho phép mô hình lập trình phía máy khách có thể hỗ trợ cho một dự án portlet mới.
Nhấn Finish.
Dự án portlet ClientSideSample được tạo ra và tệp ClientSideSampleView.jsp được mở trong Page
Designer.
Để xem mã trình được chèn, nhấn thẻ Source, như được biểu thị trong Ví dụ.
Ví dụ 17. Mã trình phía máy khách được tự động sinh ra
<%@ taglib
uri=http://www.ibm.com/xmlns/prod/websphere/portal/v6.1/portlet-client-model
prefix="portlet-client-model" %>
<portlet-client-model:init>
<portlet-client-model:require module="ibm.portal.xml.*"/>
<portlet-client-model:require module="ibm.portal.portlet.*"/>
</portlet-client-model:init>
taglib được biểu thị trong Ví dụ 18 được thêm vào tệp ClientSideSampleView.jsp.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 46 của 54
ibm.com/developerWorks/vn/
developerWorks®
Ví dụ 18. taglib được thêm vào tệp ClientSideSampleView.jsp
<%@taglib
uri="http://www.ibm.com/xmlns/prod/websphere/portal/v6.1/portlet-client-model"
prefix="portlet-client-model" %>
Thẻ được biểu thị trong Ví dụ 18 được thêm vào tệp Java™ Server Page (JSP)
Ví dụ 19. Thẻ được thêm vào tệp JSP
<portlet-client-model:init>
<portlet-client-model:require module="ibm.portal.xml.*"/>
<portlet-client-model:require module="ibm.portal.portlet.*"/>
</portlet-client-model:init>
Điều này có nghĩa rằng:
• taglib bao gồm các đánh dấu và thành phẩm cần để sử dụng mô đun được yêu cầu trên máy
khách.
• Mô đun ibm.portal.portlet.* cho phép bạn có thể sử dụng PortletWindow,
PortletPreference, PortletState và XMLPortletRequest trên máy khách.
• Mô đun ibm.portal.xml.* cho phép sử dụng XSLT và XPath trên máy khách.
Sử dụng hỗ trợ mô hình lập trình phía máy khách để truy vấn các portlet mong
muốn trong các dự án portlet cơ bản
Bây giờ, bạn sẽ xem cách sử dụng hỗ trợ mô hình lập trình phía máy khách để truy vấn các portlet
mong muốn trên phía máy khách, như được biểu thị trong Hình 46. Hành động này trước đây
thường xảy ra trên phía máy chủ. Tiếp tục với dự án mẫu ClientSideSample đã được tạo trong phần
trước.
1. Mở Portlet Deployment Descriptor.
2. Nhấn thẻ Portlets và chọn portlet (ClientSideSample).
3. Di chuyển phần Persistent Preference Store và thêm một lựa chọn (đặt tên nó là
MyPreference).
4. Đặt giá trị cho lựa chọn này.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 47 của 54
developerWorks®
ibm.com/developerWorks/vn/
Hình 46. Thêm một lựa chọn vào trong Portlet Deployment Descriptor
5. Mở tệp ClientSideSampleView.jsp.
6. Mở khung nhìn Page Data.
7. Mở rộng khung nhìn Page Data và chọn mục PortletPreferences.
8. Nhấn chuột phải lên mục Preferences và chọn New > PortletPreferences, như được biểu thị
trong Hình 47.
Hình 47. Thêm một lựa chọn trong khung nhìn Page Data
9. Tạo ra một biến lựa chọn trong hộp thoại Add Attribute, như được biểu thị trong Hình 48. Đặt
tên cho lựa chọn này giống với tên mà bạn đã định rõ trước đây cho lựa chọn được tạo trong
Portlet Deployment Descriptor (trong đó, đặt tên nó là MyPreference).
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 48 của 54
ibm.com/developerWorks/vn/
developerWorks®
Hình 48. Thêm một thuộc tính vào portletPreferences
10. Mở tệp ClientSideSampleView.jsp.
11. Kéo MyPreference từ dưới mục PortletPreferences vào khung nhìn Page Data, như đã được
biểu thị trong Hình 49, và thả nó lên tệp ClientSideSampleView.jsp.
Hình 49. Thả một lựa chọn từ khung nhìn Page Data
Hộp thoại Insert Java Bean được hiển thị, như trong Hình 50.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 49 của 54
developerWorks®
ibm.com/developerWorks/vn/
Hình 50. Cấu hình các kiểm soát dữ liệu
12. Nhấn Finish.
13. Để xem mã trình đã chèn, hãy nhấn thẻ Source, như được biểu thị trong Ví dụ 20.
Ví dụ 20. Mã trình được chèn vào dành cho MyPreference
<script type="text/javascript">
var preferenceJSONObject= {"bindings": [{
"pref":"MyPreference","id":"ibm__pref_MyPreference_uq_1"}
]
};
function <portlet:namespace/>_getPref(portletWindow, status, portletPrefs) {
if (status==ibm.portal.portlet.PortletWindow.STATUS_OK) {
portletWindow.setAttribute("preferences", portletPrefs);
var portletPref_ =portletPrefs;
var len = preferenceJSONObject.bindings.length;
for(var i=0; i<len ; i++)
{
var pref = preferenceJSONObject.bindings[i].pref;
var pref_val = portletPref_.getValue(pref,"");
document.getElementById(preferenceJSONObject.bindings[i].id).innerHTML=pref_val;
}
}
else { alert("error loading feed"); }
}
function callOnLoad(){
<portlet:namespace/>_portletWindow =new ibm.portal.portlet.PortletWindow
("<%=portletWindowID%>");
<portlet:namespace/>_portletWindow.getPortletPreferences(<portlet:namespace/>_getPref);
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 50 của 54
ibm.com/developerWorks/vn/
developerWorks®
}
dojo.addOnLoad(callOnLoad);
</script>
Mã trình được tự động sinh ra ở trên truy vấn các lựa chọn portlet trên phía máy khách.
Chú ý: Mã trình tự sinh ra có thể không chính xác như dojo_101.addOnLoad(callOnLoad); thay vì
dojo.addOnLoad(callOnLoad);
Nếu mã trình không chính xác được sinh ra trong JSP, bạn phải sửa nó bằng cách thủ công để khi
ứng dụng được xuất bản, nó có thể chạy bình thường trên WebSphere Portal.
Các nội dung preferenceJSONObject được biểu thị trong Ví dụ 21.
Ví dụ 21. Các nội dung của preferenceJSONObject
var preferenceJSONObject= {"bindings": [
{"pref":"MyPreference","id":"ibm__pref_MyPreference_uq_1"}
]
};
Mã HTML được biểu thị trong Ví dụ 22 cũng được thêm vào khung nhìn nguồn.
Ví dụ 22. Mã HTML được sinh ra
<table>
<tbody>
<tr>
<td align="left">MyPreference:</td>
<td>
<div id="ibm__pref_MyPreference_uq_1"></div>
</td>
</tr>
</tbody>
</table>
14. Tương tự, bạn có thể thêm một lựa chọn khác (MyPreference2) vào trong Portlet Deployment
Descriptor (định rõ một giá trị cho nó) và cũng thêm một lựa chọn giống như vậy vào khung
nhìn Page Data (theo cách giống như bạn đã thực hiện trước đây đối với MyPreference).
15. Mở khung nhìn Design. Kéo lựa chọn này vào trong JSP như bạn đã thực hiện ở phần trước.
16. Bây giờ hãy mở khung nhìn Source.
Bạn có thể thấy rằng các nội dung preferenceJSONObject đã được cập nhật, như được biểu thị
trong Ví dụ 23.
Ví 23. Các nội dung JSONObject đã được cập nhật
var preferenceJSONObject= {"bindings": [
{"pref":"MyPreference2","id":"ibm__pref_MyPreference2_uq_1"},
{"pref":"MyPreference","id":"ibm__pref_MyPreference_uq_1"}
]
};
Xuất bản ứng dụng chuẩn portlet trên WebSphere Portal
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 51 của 54
developerWorks®
ibm.com/developerWorks/vn/
1. Nhấn chuột phải lên dự án ClientSideSample Portlet và chọn Run on Server.
2. Bạn có thể quan sát thấy rằng các giá trị preferenc mà bạn đã định rõ trong Portlet
Deployment Descriptor Preference Store được hiển thị một cách chính xác, như được biểu thị
trong Hình 51.
Hình 51. ClientSideSample được xuất bản trên WebSphere Portal
Kết luận
Những công cụ được cung cấp bởi Rational Application Developer giúp đơn giản hóa việc phát
triển các ứng dụng dựa trên portlet và cổng thông tin phong phú, tương tác và có tính phản hồi.
Chúng khai thác được các lợi thế của mô hình lập trình phía máy khách, Client-Side Click-toAction, Person Menu, Person Menu Extension, và máy chủ proxy Ajax. Bạn chỉ cần tùy biến những
mã trình được sinh ra tự động, dựa theo những yêu cầu của ứng dụng của bạn.
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 52 của 54
ibm.com/developerWorks/vn/
developerWorks®
Tài nguyên
Học tập
• Tìm hiểu thêm thông tin tại Trung tâm Thông tin về IBM WebSphere Portal phiên bản V6.1, ở
đây bạn có thể tìm thấy các thông tin và lập kế hoạch, cài đặt, cấu hình, quản trị, phát triển, và
bảo trì.
• Truy cập Trung tâm Thông tin về IBM Rational Application Developer phiên bản V7.5 để tìm
hiểu thêm thông tin..
• Truy cập mục phần mềm Rational tren developerWorks để có được những tài nguyên và
những ví dụ thực hành dành cho các sản phẩm Rational Software Delivery Platform.
• Truy cập Trung tâm Thông tin về IBM Rational Application Developer phiên bản V7.5 để tìm
hiểu thêm thông tin chi tiết.
• Đăng ký dịch vụ Thư thông báo IBM developerWorks, để được cập nhật hàng tuần về những
hướng dẫn, bài viết, tải xuống, các hoạt động cộng đồng và sự kiện trên trang developerWorks.
• Đăng ký dịch vụ Thư thông báo cho mục Rational trên developerWorks để cập nhật nội dung
về developerWorks Rational. Hàng tuần, bạn sẽ nhận được những thông tin mới nhất về các
tài nguyên công nghệ và ví dụ về Rational Software Delivery Platform.
• Đăng ký dịch vụ Thư thông báo cho Rational Edge để có những bài viết về phát triển phần
mềm một cách hiệu quả.
• Truy cập hiệu sách kỹ thuật để biết thông tin về những cuốn sách về chủ đề này và những chủ
đè công nghệ khác.
Lấy sản phẩm và công nghệ
• Tải xuống các phiên bản dùng thử của phần mềm IBM Rational.
Thảo luận
• Tham gia Cộng đồng developerWorks trong các mục diễn đàn, blog, podcast, wiki,...
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 53 của 54
developerWorks®
ibm.com/developerWorks/vn/
Đôi nét về tác giả
Charu Malhotra
Charu Malhotra là một kỹ sư phần mềm, chuyên phát triển các thành phần tạo cổng
thông tin và chuẩn portlet của Rational Application Developer. Cô chủ yếu phát triển
hỗ trợ tạo Web 2.0 và hỗ trợ cầu nối dành cho các portlet JSF. Charu làm việc ở
phòng thí nghiệm của IBM ở Delhi, Ấn Độ
© Copyright IBM Corporation 2010
(www.ibm.com/legal/copytrade.shtml)
Nhẫn hiệu đăng ký
(www.ibm.com/developerworks/vn/ibm/trademarks/)
Bộ tạo cổng thông tin Rational Application Developer của IBM
Phiên bản 7.5: Phần 3. Hỗ trợ lập trình cổng thông tin và chuẩn
portlet trên Web 2.0 dành cho IBM WebSphere Portal phiên bản
V6.1
Trang 54 của 54