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

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.

Charu Malhotra, Kỹ sư phần mềm, IBM Corporation

Author1 photoCharu 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 Độ



15 01 2010

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

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
C2ASource ở bên trái, C2ATarget ở bên phải
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).
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.

Ứ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
Nhấn nút bấm Send Myname to Target

Để 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.
    1. Nhập C2aSource vào trường dữ liệu Tên dự án (Project name) của portlet.
    2. Chọn WebSphere Portal 6.1 làm Target Runtime.
    3. Chọn JSR 168 Portlet (trong ví dụ này), JSR 286 Portlet hay IBM Portlet như là các Portlet API.
    4. 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.
Hình 3. Xác định tên và thư mục lưu dành cho dự án portlet mới
specified settings outlined with red boxes

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.
    1. Nhập C2ATarget vào trường dữ liệu Tên (Name) của portlet.
    2. 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.
Hình 4. Chọn dự án portlet cho portlet mới được tạo
dự án, tên portlet, và kiểu portlet

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.
Hình 5. Kéo và thả mục pálet để thiết kế thẻ
thiết kế thẻ ở bên trái, pálet ở bên phải
  1. 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.
Hình 6. Chọn lệnh thực đơn
mục 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:

  1. Định rõ http://C2Asource#Myname trong trường dữ liệu Data Type URI.
  2. Đị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.
Hình 7. Miêu tả kiểu dữ liệu mà portlet có thể vận chuyển
Định rõ Data Type URI và Output Value Attribute
  1. Lưu tệp C2ASourceView.jsp.
  2. Để 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><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.

Hình 8. C2aAnchor
Anchor Data ở bên trái, tên hiện thời ở bên phải

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.
Hình 9. Kéo mục thực đơn đến thẻ Design
thẻ Design ở bên trái, pálet ở bên phải
  1. 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ị.

  1. Đị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
liệt kê với một mục
  1. Lưu tệp C2ASourceView.jsp.
  2. Để 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 Client-Side 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.
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
trường nhập văn bản ở bên trái nút bấm Submit

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.
Hình 12. Kéo mục pálet Input Property
Khung nhìn Design ở bên trái, pálet ở bên phải
  1. 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.

  1. 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.
Hình 13. Miêu tả kiểu dữ liệu mà portlet của bạn có thể truy cập
chọn Data Type URI từ liệt kê thả xuống
  1. Đố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.
  2. Đị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.
Hành động Đích và phần Chụp hình
  1. Lưu tệp C2ATargetView.jsp.
  2. Để 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
trường dữ liệu đầu vào văn bản và nút bấm Submit
  1. Chuyển sang khung nhìn Source của tệp C2ATargetView.jsp.
  2. 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>

JavaScript này in ra "Hello [tên bạn]" khi được gọi ra bởi portlet đích.

  1. 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>
  1. 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
biểu đồ cho biết có bốn bước

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.
  • 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).

Hình 17. Ví dụ về Shipping Details
chi tiết và liệt kê đơn đặt hàng, chi tiết về khách hành và tài khoản

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
Chi tiết đơn đặt hàng ở bên trái, chi tiết theo dõi ở bên phải

Để có được kết quả như ở trên, hãy thực hiện theo các bước sau:

  1. Cho phép OrderDetail như là một nguồn C2A
  2. Cho phép TrackingDetail như là một đích C2A
  3. 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

  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
Thẻ thiết kế ở bên trái, pálet ở bên phải
  1. 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 URIValue, như được biểu thị trong Hình 20, và sau đó nhấn Finish.
Hình 20. Cho phép OrderDetail như là một nguồn C2A
miêu tả những dữ liệu mà portlet này có thể vận chuyển
  1. Mở tệp OrderDetailsView.jsp trong khung nhìn Design.
  2. 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.
Hình 21. C2aAnchor2
Khung nhìn Design biểu thị Anchor Data
  1. 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>
  1. 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.
  2. 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>

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
Khung nhìn Design ở bên trái, pálet ở bên phải

Cửa sổ Insert Client-Side Click-to-Action Input Property được hiển thị.

  1. 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.
Hình 23. Cho phép TrackingDetail như là một đích C2A 1
Mô tả kiểu dữ liệu được nhận
  1. Đố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.
  2. Đị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
Định rõ Target Action (Value) và Caption (Label)
  1. 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.
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.

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

  1. 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
màn hình OrderDetail được hoàn thành

Nhấn để mở rộng hình ảnh


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.

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 E-mail, 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.

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
Khung nhìn Design ở bên trái, pálet ở bên phải
  1. 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ị.
  2. Đị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)
Hình 27. Định rõ thuộc tính thực đơn cá nhân
hCard và các thuộc tính địa chỉ
  1. Nhấn Finish và lưu tệp PersonMenuExampleView.jsp.
  2. 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">charumalhotra@in.ibm.com</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.
Hình 28. Mục palet Person Menu Extension
Khung nhìn Design ở bên trái, pálet ở bên phải
  1. 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).
Hình 29. Định rõ thuộc tính thực đơn mở rộng cá nhân
Action Details, Specify ShowIf, và Specify Action

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@@@.
  1. Nhấn Finish và lưu tệp PersonMenuExampleView.jsp.
  2. 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.
Hình 30. Ví dụ mẫu Person Menu được xuất bản trên WebSphere Portal
Thực đơn và hộp thoại nổi lên

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

Để 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
biểu đổ miêu tả trình duyệt và tên miền

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
biểu đồ cho thấy Trình duyệt, Miền A, và Miền B

Ứ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ủ đề.
Hình 33. Ví dụ về proxy Ajax
trường dữ liệu và nút bấm developerWorks Article

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.
Hình 34. Dự án portlet mới với máy chủ proxy Ajax
Định rõ tên, đường dẫn, và những thiết lập của dự án
  1. Nhấn Show Advanced Settings. Trang Project Facet được hiển thị.
  2. 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.
Hình 35. Trang Project Facets
liệt kê các Project Facets và các phiên bản
  1. Nhấn Next và sau đó nhấn Finish.
  2. 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.
  3. 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.
Hình 36. Bộ miêu tả sự triển khai Web cho thấy các servlet và các JavaServerPages (JSPs)
Xem ở trên cùng, các thẻ ở bên dưới

Nhấn để mở rộng hình ảnh

  1. 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.)

  1. 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>
  1. 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.
Hình 37. Tệp cấu hình máy chủ proxy Ajax
Các tệp XML được liệt kê trong khung nhìn Explorer
  1. 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
Thẻ Design và Source ở bên dưới màn hình
  1. 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.
Hình 39. Thêm các quy tắc proxy
Hộp thoại Add Item ở bên phải

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
mapping Overview ở bên trái, Details ở bên phải

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:

  • Actions
  • Headers
  • Mime-types
  • Cookies
  • Users
Hình 41. Định rõ một chính sách truy cập
policy Overview ở bên trái, details ở bên phải

Nhấn để mở rộng hình ảnh

Hình 42. Định rõ các phần tử chính sách
lệnh thực đơn trong khung nhìn Design

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

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.
  1. Khi dự án được xuất bản, chọn mục (Rational hay Lotus) từ liệt kê thả xuống.
  1. 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
mô tả về yêu cầu và phản hồi

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
khung nhìn hình cây ở bên trái, chi tiết ở bên phải

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, 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.
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
hộp thoại định nghĩa các thiết lập cao cấp của portlet
  1. 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.

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.
Hình 46. Thêm một lựa chọn vào trong Portlet Deployment Descriptor
Thẻ Portlets được chọn ở dưới màn hình
  1. Mở tệp ClientSideSampleView.jsp.
  2. Mở khung nhìn Page Data.
  3. Mở rộng khung nhìn Page Data và chọn mục PortletPreferences.
  4. 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
lệnh thực đơn
  1. 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).
Hình 48. Thêm một thuộc tính vào portletPreferences
hộp thoại định rõ tên Attribute và Type
  1. Mở tệp ClientSideSampleView.jsp.
  2. 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
các thành phần dữ liệu trang trong khung nhìn hình cây

Hộp thoại Insert Java Bean được hiển thị, như trong Hình 50.

Hình 50. Cấu hình các kiểm soát dữ liệu
Định rõ các kiểm soát để tạo ra và các trường dữ liệu để hiển thị
  1. Nhấn Finish.
  2. Để 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);
} 
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>
  1. 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).
  2. 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.
  3. 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

  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
Các portlet Home, Rational và các thẻ Page1, và Web 2.0

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-to-Action, 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.

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
ArticleID=461970
ArticleTitle=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
publish-date=01152010