Bộ tạo cổng thông tin Rational Application Developer của IBM Phiên bản 7.5: Phần 4. Tổ hợp trang tĩnh

Với tổ hợp trang tĩnh, bạn có thể tạo các trang cổng thông tin từ các sơ đồ bố trí bố trí tĩnh hoặc các mẫu HTML trong dự án IBM® WebSphere® Portal Phiên bản 6.1. Bài viết này hướng dẫn bạn từng bước xử lý tạo, thiết kế, tùy chỉnh và tổ hợp các sơ đồ bố trí tĩnh bằng cách sử dụng IBM® Rational® Application Developer Phiên bản 7.5, đây là môi trường chạy máy chủ cổng thông tin. Bạn không cần biết nhiều về các API cổng thông tin để có thể theo các bước trong bài viết này.

Jatin K. Varshney, Kỹ sư phần mềm, IBM

Jatin Varshney là kỹ sư phần mềm cho Phòng thí nghiệm phầm mềm IBM Ấn độ ở thành phố Delhi. Ông làm việc về Thiết kế Cổng thông tin và các đặc trưng Web 2.0 của các Công cụ Cổng thông tin, một bộ phận của IBM Rational Application Developer.



15 01 2010

Các yêu cầu hệ thống

Tác giả giả sử rằng bạn đã có IBM® Rational® Application Developer Phiên bản 7.5 được cài đặt trên hệ thống nội vùng của bạn, cũng như IBM® WebSphere® Portal Phiên bản 6.1 dành cho máy chủ được cài đặt ở hệ thống nội vùng hoặc từ xa nơi mà bạn có quyền quản trị.


Lợi thế của việc sử dụng các trang tĩnh

Cho đến nay, các nhà thiết kế Web sử dụng các công nghệ Web đơn giản như HTML, CSS và JavaScript để thiết kế cách bố trí toàn bộ trang Web, nhưng các portlet thường được tạo ra bởi các nhà phát triển Java™ hoặc Java™Server Page (JSP™). Ngày nay, bạn có thể sử dụng tổ hợp trang tĩnh (SPA) để tận dụng sức mạnh của các portlet bằng việc tổ hợp chúng với các trang web tĩnh. Bạn có thể thực hiện việc này bằng cách sử dụng đánh dấu HTML đơn giản trong các trang web tĩnh của bạn để tạo ra một trang cổng thông tin hoàn thiện.

Hình 1. Tổ hợp một portlet trong sơ đồ bố trí HTML
Diagram of the process

Việc sử dụng các công nghệ Web đơn giản cho phép bạn thiết kế sơ đồ bố trí trang web bằng các công cụ web mà bạn yêu thích, ví dụ như thiết kế trang trong Rational Application Developer hay biên tập một đoạn văn bản đơn giản. Điều này cho phép bạn điều khiển sơ đồ bố trí của trang web thay cho việc sử dụng mô hình sơ đồ bố trí cổng thông tin.

Bạn có thể chèn các portlet như là các phần tử động và các thùng chứa như là các nơi giữ chỗ cho các portlet trong trang của bạn. Bạn có thể cho hiển thị các portlet bằng cách sử dụng tổ hợp phía máy chủ, Ajax, hay phần tử IFrame. Bạn cũng có thể sử dụng portlet để trao đổi thông tin với trang tĩnh.

Tổ hợp trang tĩnh không chỉ đơn giản và dễ sử dụng, mà nó còn rất hữu dụng trong việc lợi dụng các khả năng của các portlet cùng với các công nghệ web đơn giản hơn, ví dụ như CSS và JavaScript. Bài viết này trước tiên giải thích các khái niệm SPA và sau đó hướng dẫn bạn từng bước sử dụng SPA với Rational Application Developer V7.5:

  1. Đầu tiên, bạn tạo một dự án cổng thông tin và sau đó là các trang cổng thông tin với các sơ đồ bố trí tĩnh.
  2. Bước tiếp theo, bạn tạo một dự án portlet mà bạn thêm vào trang tĩnh của bạn.
  3. Sau đó, bạn tạo một trang cổng thông tin với sơ đồ bố trí tĩnh.
  4. Tiếp theo, bạn soạn thảo trang tĩnh này để thêm vào chủ đề, các thùng chứa portlet và các cửa sổ portlet.
  5. Tiếp theo đó, bạn xuất bản dự án của mình để xem kết quả bước đầu trong bốn thao tác đơn giản đã liệt kê ở trên.
  6. Rồi sau đó bạn tạo các chủ đề cho các sơ đồ bố trí tĩnh và các giao diện cho các portlet trong các trang tĩnh của bạn.
  7. Bước tiếp theo, bạn có thể sử dụng các khả năng linh động của các portlet để tự động tạo ra điều hướng cho trang web của bạn.
  8. Sau đó, bạn sử dụng quốc tế hóa để biến trang tĩnh của bạn có hiệu lực ở các vị trí khác nhau trên toàn cầu.
  9. Rồi sau đó bạn sử dụng cùng tài liệu lưu trữ tài nguyên sơ đồ bố trí tĩnh để tạo thêm các trang và để chỉnh sửa trang tĩnh mà bạn đã tạo ra trước đây.
  10. Bước cuối cùng, bạn xuất bản trang web cổng thông tin hoàn thiện của mình bao gồm cả các trang tĩnh.

Các khái niệm thường dùng

sơ đồ bố trí tĩnh
Là sơ đồ bố trí của một trang mà nó dựa trên trang HTML và có thể chứa các chỉ dẫn đến các portlet. Ngược lại, một sơ đồ bố trí trang cổng thông tin động được định nghĩa một cách có cấu trúc ở cơ sở dữ liệu trong máy chủ và được quản lý bởi một trang tùy biến.

trang tĩnh
Là một trang cổng thông tin mà nó chỉ dẫn một sơ đồ bố trí tĩnh. Trang tĩnh có thể là một phần của giao thức trang cổng thông tin ở bất cứ đâu (Xem nội dung của SPI tại mô hình điều hướng). Ngoại trừ bản dịch, nó đối xử chúng như trang cổng thông tin mặc định, giống như đối với điều khiển truy cập.

sơ đồ bố trí động
Là sơ đồ bố trí cổng thông tin chuẩn, bao gồm các dòng và các cột; nó tiếp tục tồn tại trong cơ sở dữ liệu.

trang tĩnh được nhúng
Là một trang tĩnh được đưa ra trong vùng nội dung của cổng thông tin. Máy chủ cổng thông tin đưa ra tựa đề, lề dưới và điều hướng, nhưng nội dung được đưa ra riêng biệt bởi sơ đồ bố trí tĩnh.

trang tĩnh độc lập
Là một trang tĩnh đưa ra nội dung trình duyệt đầy đủ. Nó được phục vụ bởi servlet cổng thông tin nhưng có điều khiển riêng biệt qua trang hoàn thiện.


Tạo một dự án cổng thông tin

Bạn có thể tạo một dự án cổng thông tin trong Rational Application Developer bằng cách sử dụng thủ thuật New Portal Project, hoặc bạn có thể nhập một dự án từ WebSphere Portal Server Version 6.1 bằng thủ thuật Import Project và sau đó tùy chỉnh nó. Một lợi ích của việc nhập một dự án là nó liệt kê tất cả các định nghĩa portlet đã được triển khai trên máy chủ nghĩa là chúng sẵn sàng để sử dụng trong bất cứ trang cổng thông tin nào trong dự án. Tất nhiên, những định nghĩa này bao gồm cả các SPA điều hướng portlet, chúng được đối xử như các portlet tiện ích trong các trang tĩnh.

Tạo một dự án mới:

  1. Trong Rational Application Developer phiên bản 7.5, chọn File > New > Other.
  2. Chọn hộp kiểm tra Show all wizards.
  3. Trong loại cổng thông tin, chọn Portal project, và sau đó kích chuột vào Next.
  4. Kích OK để cho phép các khả năng phát triển cổng thông tin và mở thủ thuật New Portal Project (xem Hình 2).
Hình 2. Thủ thuật New Portal Project
Thuật sỹ New Portal Project
  1. Nhập tên dự án, ví dụ FirstPortalProject.
  2. Chọn phiên bản 6.1 là phiên bản máy chủ cổng thông tin, và kích Next.
  3. Chọn một chủ đề, và kích Next.
  4. Lựa chọn một giao diện, và kích Finish.

Hình 3 chỉ ra một dự án cổng thông tin mới được mở trong Portal Designer để soạn thảo.

Hình 3. Mở cấu hình portal trong Portal Designer
The portal configuration trong the Portal Designer

Cấu hình mặc định của một dự án cổng thông tin mới liệt kê ba portlet. Bạn có thể sử dụng bất cứ portlet trong số đó, giống như các portlet mới của bạn trong cùng không gian làm việc trong bất cứ trang nào của dự án cổng thông tin.

  1. Để xem portlet nào có hiệu lực trong cấu hình cổng thông tin của bạn, hãy mở chế độ hiển thị Outline và mở rộng Elements > Portlet.

Trong Hình 4, bạn có thể nhìn thấy ba portlet:

  • Login
  • Edit My Profile
  • Search Sitemap
Hình 4. Các Portlet có hiệu lực trong dự án cổng thông tin mới
Các Portlet có hiệu lực trong dự án portal mới

Nhập một dự án cổng thông tin từ máy chủ

Dễ hơn việc tạo một dự án cổng thông tin mới từ con số không, bạn có thể nhập cấu hình và các tệp chủ đề và giao diện khác từ máy chủ:

  1. Trong Rational Application Developer, chọn File > Import.
  2. Mở rộng hạng mục cổng thông tin, chọn Portal, và kích vào Next.
  3. Xác định một WebSphere Portal mới phiên bản máy chủ 6.1.
    1. Chỉ rõ máy chủ là nội vùng localhost hoặc máy chủ từ xa bằng việc cung cấp địa chỉ IP của nó.
    2. Đảm bảo rằng máy chủ đã được khởi động và bạn có quyền quản trị.
    3. Nhập mã ủy nhiệm, và kích Finish.
  4. Chọn máy chủ được tạo mới.
  5. Nhập tên của dự án, ví dụ như SecondPortalProject, và kích Finish.

Dự án cổng thông tin được tạo ra trong không gian làm việc với tên mà bạn đã định nghĩa và chứa tất cả các tệp được yêu cầu và cấu hình cổng thông tin mà bạn đã nhập từ máy chủ. Dự án này có thể có nhiều portlet hơn FirstPortalProject, bởi vì cấu hình chứa tất cả các portlet đã được triển khai ở máy chủ. Các portlet này đã sẵn sàng để sử dụng cho dự án cổng thông tin của bạn.


Tạo một dự án portlet

Bước tiếp theo là tạo một dự án porlet mới (ví dụ, một chuẩn porlet JSR168 với hỗ trợ JavaServer Faces). Bạn sẽ xem làm cách nào để dùng porlet này trong một trong các trang tĩnh của bạn trong dự án cổng thông tin.

Để tạo một dự án portlet:

  1. Chọn File > New > Other.
  2. Lựa chọn hộp kiểm traShow all wizards.
  3. Trong hạng mục cổng thông tin, chọn Portlet project, và kích vào Next để mở thủ thuật New Portlet Project (xem Hình 5).
Hình 5. Thủ thuật New Portlet Project
Portlet Project page
  1. Nhập tên dự án, ví dụ MyWorkspacePortlet. Chọn WebSphere Portal v6.1 như là môi trường chạy ứng dụng.
  2. Với Portlet API, chọn JSR168 Portlet, và với loại Portlet, chọn Faces portlet.
  3. Kích Next hai lần và sau đó kích Finish.
  4. Khi dự án portlet được tạo ra, tệp MyWorkspacePortletView.jsp được mở để soạn thảo. Thay thế câu "Place content here" bằng Đây là ví dụ JSR168 Faces portlet đơn giản của tôi.
  5. Lưu tệp và đóng trình soạn thảo.

Tạo một trang

Trang cổng thông tin là một trong các thành phần của mô hình nội dung cổng thông tin. Một trang trong một dự án cổng thông tin có thể được định nghĩa bằng cách sử dụng sơ đồ bố trí tĩnh hoặc động. Các trang sử dụng sơ đồ bố trí tĩnh được gọi là Các trang cổng thông tin thông thường, và các trang sử dụng sơ đồ bố trí tĩnh được gọi là Các trang tĩnh. Các trang tĩnh có thể được đưa ra hoặc là chỉ trong vùng nội dung của cổng thông tin (sử dụng tiêu đề, điều hướng, và lề dưới được cung cấp bởi cổng thông tin), hoặc có thể thể được đưa ra một cách đầy đủ trong vùng trình duyệt.

Dựa vào cách xử lý này, các trang tĩnh được phân loại thành các trang tĩnh được nhúng hay các trang tĩnh độc lập. Bắt đầu bằng việc tạo một trang tĩnh được nhúng, tiếp theo là một trang tĩnh độc lập.

Tạo một trang tĩnh

Nếu bạn muốn một trang cổng thông tin để sử dụng sơ đồ bố trí của tệp HTML tĩnh bạn phải tạo trước hoặc nếu muốn tạo một sơ đồ bố trí mới, bạn cần sử dụng thủ thuật tạo trang tĩnh trong Rational Application Developer V7.5.

Để tạo một trang tĩnh được nhúng:

  1. Trong Portal Designer, chọn một trong các tùy chọn: Page, Label hoặc URL.
  2. Kích phải chuột và chọn Insert Static page và sau đó chọn một trong các tùy chọn: Before, After, As child. Chú ý: Nếu bạn sử dụng nút URL, nó không thể có trang ở mức con của nó.
  3. Khi thủ thuật tạo trang tĩnh mở ra (Hình 6), nhập tiêu đề của trang là MyStaticPage.
Hình 6. thủ thuật tạo trang tĩnh
Tiêu đề trang: Tạo trang portal với layout tĩnh
  1. Sử dụng các giá trị mặc định cho Markup, File name và Portlet ở màn hình tùy chọn và kích Finish.

MyStaticPage được thêm vào cấu hình cổng thông tin và tệp index.html sơ đồ bố trí tĩnh mở ra để soạn thảo trong Page Designer.

Các điểm dưới đây giúp bạn hiểu các phần của thủ thuật:

  • Đánhh dấu hộp kiểm tra: Đánh dấu được hỗ trợ trong trường hợp sơ đồ bố trí tĩnh có thể được cung cấp đến trang cổng thông tin. Các đặc điểm hiện nay của SPA chỉ cho phép đánh dấu HTML.
  • Tiêu đề: Tiêu đề trang cổng thông tin. Nếu nó là trang tĩnh được nhúng, thì tiêu đề sẽ xuất hiện trên thanh điều hướng.
  • Tên tệp: Tên tệp của một sơ đồ bố trí tĩnh sẽ được mở trong Page Designer để tiếp tục soạn thảo và sẽ hoạt động như là tệp sơ đồ bố trí của trang cổng thông tin MyStaticPage. Chú ý là: Tệp này phải có đuôi mở rộng là .html hoặc .htm.
  • Hộp chọn "Create using existing ZIP or HTML page" và các trường: Chúng dùng để xác định vị trí của tài liệu chứa tệp HTML sơ đồ bố trí tĩnh và các tài nguyên liên quan trong hộp văn bản và để lựa chọn tệp sơ đồ bố trí của tài liệu lưu trữ bên trong hộp thoại kéo xuống. Như một sự lựa chọn, bạn có thể sử dụng trường "ZIP or HTML file location" và liên kết thanh thực đơn đến vị trí xác định của tệp HTML hiện tại hoặc sơ đồ bố trí tĩnh HTML thay cho việc lưu trữ. Nó có thể có bản sao trong không gian làm việc và được sử dụng như là sơ đồ bố trí tĩnh của trang cổng thông tin thay cho tệp index.html mà bạn đĩnh nghĩa trước đây.
  • Tùy chọn hiển thị màn hình Portlet: Xác định tham biến siêu dữ liệu cho trang, mà nó được dùng để đưa ra các portlet trong khi hiện thị trang:
    • Bao gồm đánh dấu: Các portlet được đưa ra thành các dòng một cách đồng thời giống như trang tĩnh.
    • Ajax: Nội dung của portlet được đưa ra một cách không đồng bộ và sau đó các mảnh portlet được nhúng vào trang tĩnh.
    • IFrame: Trang tĩnh chứa các IFrame để đưa ra các portlet.

Bây giờ bạn hiểu các phần của thủ thuật, chúng ta có thể khám phá hoạt động của việc tạo trang tĩnh chi tiết hơn.

Sau khi trang tĩnh được tạo ra, tệp index.html được mở ra trong Page Designer để soạn thảo. Tệp này cư trú trong dự án cổng thông tin của bạn bên trong thư mục PortalConfiguration/Static sơ đồ bố trí trong thư mục trang được gọi, mà ở đó uniquename là một tên bên trong trang tĩnh và nó là duy nhất, ví dụ page.ae354734c1.


Bạn có thể tạo cấu trúc thư mục cho sơ đồ bố trí tĩnh và các tài nguyên khác, ví dụ như hình ảnh và kiểu dáng trong thư mục này nhưng phải giữ vị trí của tệp sơ đồ bố trí tĩnh nguyên vẹn. Nếu bạn thay đổi nó, bạn phải xác định lại vị trí của sơ đồ bố trí tĩnh bằng cách sử dụng Properties view của trang tĩnh.

Khởi tạo những nội dung của trang giống như đoạn mã nguồn trong Ví dụ 1.

Ví dụ 1. Khởi tạo nội dung của trang tĩnh
<table>
	<tr>
		<td> <div class="portlet-container" name="layoutcontainer1"></div> </td>
		<td> <div class="portlet-container" name="layoutcontainer2"></div> </td>
	</tr>
</table>

Như bạn thấy, tệp này không chứa thẻ <html>. Nó dùng để tạo trang tĩnh được nhúng. Nếu bạn viết nội dung của sơ đồ bố trí tĩnh chứa thẻ <html> và các thẻ lồng vào nhau của nó, ví dụ như <body>, giống như trang HTML thông thường, bạn thu được trang tĩnh độc lập.

Bây giờ hãy xem sự thay đổi trong cấu hình cổng thông tin. Trang có tên MyStaticPage bây giờ có thể nhìn thấy trong hệ thống cấp bậc điều hướng, và bạn có thể nhìn nó ở cả Portal Designer và Outline view (Hình 7). Bạn sẽ học cách làm thế nào để cấu hình nó cho các portlet và các thùng chứa sau đây.

Hình 7. Trang tĩnh trong Outline view trong Portal Designer
MyStaticPage là mục thứ hai dưới Home

Soạn thảo sơ đồ bố trí tĩnh

Bây giờ bạn cần phải soạn thảo nội dung cho trang. Nếu bạn đóng tệp HTML sơ đồ bố trí với một trang tĩnh, bạn có thể mở lại nó bằng cách kích phải chuột vào Portal Designer và chọn Edit layout (xem Hình 8).

Hình 8. Mở một sơ đồ bố trí tĩnh của trang tĩnh
'Edit Layout' được chọn từ menu

Trong tệp sơ đồ bố trí tĩnh (ví dụ index.html), xóa tất cả các nội dung và sau đó lưu lại.

Tạo nội dung và đánh dấu

Bây giờ bạn có thể cấu trúc trang web của bạn với sự thay đổi sơ đồ bố trí cascading style sheet (CSS).
Hình 9 chỉ ra một cấu trúc trang web cơ sở với tiêu đề, cạnh điều hướng, vùng nội dung và lề dưới.

Hình 9. Sơ đồ bố trí cơ sở của một trang tĩnh
Minh họa trang layout

Để tạo một sơ đồ bố trí cơ sở như vậy, thêm nội dung được chỉ ra trong Ví dụ 2 vào tệp index.html.

Ví dụ 2. Mã nguồn cho sơ đồ bố trí cơ sở
<div id="wrapper">
	<div id="header">
		<h1>Static page aggregation</h1>
	</div>
	<div id="left">The side navigation area</div>
	<div id="right">
           The content area <br> 
	</div>
	<div id="footer">IBM</div>
</div>

Chú ý:
Để đơn giản, đoạn mã HTML này chỉ sử dụng các thẻ <div> . Bạn có thể thực hành với các thẻ hoặc tạo một sơ đồ bố trí phức tạp hơn phù hợp với những gì bạn cần.

Thêm kiểu dáng cho chủ đề

Bây giờ, để thêm các thẻ <div> vào cấu trúc của sơ đồ bố trí như được chỉ ra trong Hình 10, bạn có thể tính đến CSS bên ngoài hoặc định nghĩa một lớp CSS trong thẻ <style> ở phần trên cùng của trang index.html, hoặc bạn có thể sử dụng trực tiếp CSS. Cho mục đích này, sử dụng CSS bên ngoài.

Để thêm vào kiểu dáng:

  1. Tạo một thư mục "theme" bên trong PortalContent > Staticsơ đồ bố trí> thư mục page.uniquename chứa tệp index.html sơ đồ bố trí tĩnh.
  2. Sau đó tạo một tệp CSS bên trong thư mục theme.
  3. Chọn dự án và sau đó chọn File > New > CSS.
  4. Mở thư mục theme và nhập tên tệp CSS giống với chủ đề.
  5. Kích NextFinish.

Tệp CSS được mở ra để soạn thảo trong môi trường soạn thảo CSS. Bây giờ bạn có thể tạo các kiểu dáng CSS trong cửa sổ nguồn của môi trường soạn thảo CSS.

  1. Kích phải chuột ở cửa sổ nguồn và kích New.
  2. Trong thủ thuật, chọn thẻ HTML và body (các lựa chọn mặc định), và kích OK.
  3. Trong thủ thuật New Style, chọn phông chữ. Chọn phông Verdana trong hộp danh sách phông chữ và kích Add để thêm nó vào hộp danh sách.
  4. Trong sơ đồ bố trí hạng mục, chọn margin và loại 0. Sau đó chọn padding và loại 0, và kích OK.

Kiểu dáng được chèn vào trong tệp theme.css giống như trong Ví dụ 3.

Ví dụ 3. Thay đổi tệp theme.css
BODY {
	margin: 0px;
	padding: 0px;
	font-family: Verdana
}
  1. Một cách tương tự, bạn có thể thêm các kiểu dáng khác div cho các lớp bên trái, phải, bên dưới... giống như Ví dụ 4.
Ví dụ 4. Các kiểu dáng được thêm vào các lớp div
div#wrapper{
	width: 100%;
	height: 100%
}

div#header {
	clear: both;
	height: 50px;
	background-color: #e3dffd;
	padding: 15px;
	text-align: center;
}

div#left {
	float: left;
	width: 20%;
	height: 100%;
	background-color: #e9fed3;	
}

div#right {
	float: right;
	width: 80%;
	height: 100%;
	background-color: #fffce1;
}

div#footer {
	clear: both;
	background-color: #ffebdf;
	text-align: center;
}
  1. Cuối cùng, thêm các liên kết của theme.css trong tệp index.html:
    <link rel="stylesheet" href="theme/theme.css" type="text/css">

Chủ đề bây giờ được gắn vào trang index.html và bạn có thể nhìn thấy nó trong Page Designer.

Thêm thùng chứa portlet và portlet window

Các trang tĩnh có thể chứa các portlet và các thùng chứa portlet giống như các trang cổng thông tin thông thường. Để sử dụng các portlet hay các thùng chứa trong trang tĩnh bao gồm các giá trị thuộc tính của lớp đã được định rõ trong SPA với các thẻ <div>. Các giá trị thuộc tính lớp biểu thị các thẻ <div> với ý nghĩa đặc biệt giống như thùng chứa portlet hay như cửa sổ portlet điển hình.

Thêm một thùng chứa portlet

Bạn thêm một thùng chứa trong sơ đồ bố trí tĩnh sử dụng thẻ <div> với thuộc tính lớp portlet-container. Ví dụ:

<div class="portlet-container" name="container_0"></div>


Thẻ <div> này yêu cầu thêm một thuộc tính: name. Nó là tên của thùng chứa và nó phải là duy nhất trong trang. Thuộc tính này phân biệt các trường hợp khác nhau của thùng chứa trong cùng một trang (nhưng bạn có thể sử dụng cùng một tên trong các trang khác nhau trong cổng thông tin).

Để tạo một thùng chứa trong sơ đồ bố trí tĩnh trong trang index.html:

  1. Mở Palette view trong Page Designer.
  2. Mở portal drawer.
  3. Bạn sẽ tìm hai mục cho Static Pape Container tĩnh và Static Page Portlet (xem Hình 10):
    • Static Page Container
    • Static Page Portletok
Hình 10. Palette view chỉ ra các mục cho một trang tĩnh
Cả hai mục đều là cấp dưới 'Portal'
  1. Kéo và thả trang thùng chứa tĩnh vào tệp sơ đồ bố trí tĩnh trong phần nội dung thẻ <div>, ngay sau thẻ <br>:
<div id="right">
	The content area <br> 
</div>
  1. Trong cửa sổ trang thùng chứa tĩnh (Hình 11), để nguyên hoặc thay đổi tên thùng chứa mặc định duy nhất, và kích OK. (Bạn cũng có thể mở hộp hội thoại bằng cách chọn Insert > Portal > Static page container ).
Hình 11. Cửa sổ "Insert static container"
Chỉ dẫn: Ghi rõ tên container tĩnh
  1. Lưu tệp.

Thẻ "container_0" được chèn vào trong sơ đồ bố trí tĩnh giống như dưới đây:

<div class="portlet-container" name="container_0"></div>

Bây giờ, hãy nhìn vào cấu hình cổng thông tin trong Outline view trong Portal Designer. Hình 12 chỉ ra cấu hình của tệp MyStaticPage bên trong thư mục sơ đồ bố trí.

Hình 12. Outline view hiển thị cấu hình trang sơ đồ bố trí cổng thông tin
MyStaticPage là tên được đánh dấu trong cây thư mục

Cột thứ nhất trong MyStaticPage là thùng chứa gốc mặc định. Một thành phần con của thùng chứa gốc là thùng chứa dòng. Thùng chứa dòng này là một thùng chứa tĩnh mà bạn đã thêm nó vào trong sơ đồ bố trí tĩnh bằng cách dùng thẻ <div>. Một dòng sẽ được tạo ra bên trong của thùng chứa cột gốc cho mỗi thẻ <div> mà bạn đặt nó trong tệp sơ đồ bố trí tĩnh.

Chú ý:
Không được lồng ghép các thẻ <div> trong thùng chứa như trong Ví dụ 5, bởi vì sau khi lồng các thùng chứa không được hỗ trợ cho các trang tĩnh. Nếu bạn cố làm như vậy, bạn sẽ thu được kết quả của nó trong thùng chứa chỉ có (container_0 trong ví dụ này), và tất cả các thùng chứa khác sẽ bị bỏ qua.

Ví dụ 5. Không được lồng ghép các thẻ thùng chứa <div>
<div class="portlet-container" name="container_0">
	<div class="portlet-container" name="container_1"></div>
</div>

Một mặc định khác cho con của thùng chứa gốc, nếu nó là con đầu tiên và là một thùng chứa cột, nó sẽ được xem xét là một thùng chứa ẩn. Nó tiếp tục tồn tại trong cấu hình trang tĩnh ngay cả khi bạn không định nghĩa bất cứ thẻ thùng chứa nào <div> trong sơ đồ bố trí tĩnh. Thùng chứa này giữ tất cả các portlet mà bạn thêm vào trong sơ đồ bố trí tĩnh mà không có bất cứ một thùng chứa bố mẹ nào. Bất cứ portlet mồ côi nào cũng được nhận làm con nuôi của thùng chứa ẩn này.

Thêm một cửa sổ portlet

Một portlet được thêm vào trong sơ đồ bố trí tĩnh bằng cách sử dụng thẻ <div> với giá trị thuộc tính lớp là portlet-window, giống như trong Ví dụ 6.

Ví dụ 6. Đoạn mã cho việc thêm một portlet vào sơ đồ bố trí tĩnh
<div class="portlet-window" name="portlet-window_0"
	style="portlet-definition: 'wps.p.Login'"></div>

Thẻ <div> này cho cửa sổ portlet vẫn cần thêm hai thuộc tính để trở nên đầy đủ:

  • name: Là tên của portlet hiện tại mà nó là duy nhất trong trang (không liên quan giữa các trang khác nhau trong cổng thông tin). Nó phân biệt sự khác nhau hiện tại của portlet cùng loại trong trang.
  • style: Là định nghĩa portlet hay loại của portlet mà bạn muốn thuyết minh trong trang tĩnh của bạn. Giá trị của thuộc tính kiểu dáng chứa giá trị của thuộc tính portlet-definition.

Để chèn một thẻ portlet <div> vào trang sơ đồ bố trí tĩnh:

  1. Kéo trang portlet tĩnh từ portal drawer của Palette view vào sơ đồ bố trí tĩnh bên trong thùng chứa.
  2. Trong cửa sổ Static page portlet, chọn một portlet trong bảng portlet, ví dụ như MyWorkspacePortlet. (Xem Hình 13.)
Hình 13. Chèn một portlet vào trong trang sơ đồ bố trí tĩnh
'Specify static portlet' view
  1. Chỉnh sửa hoặc bỏ qua tên cửa sổ portlet mặc định, bởi vì nó tự động quản lý tính duy nhất trong trang. Kích OK để kết thúc.

Đoạn mã portlet được chèn bên trong sơ đồ bố trí tĩnh giống như bạn thấy trong Ví dụ 7.

Ví dụ 7. Mã Porlet được chèn vào trong đoạn mã của sơ đồ bố trí tĩnh
<div class="portlet-window" name="portlet-window_1" 
        style="portlet-definition: 'com.ibm.faces.portlet.FacesPortlet.ae95c684c1'"></div>

Các bước này bạn chỉ cần làm theo cho đến khi hoàn tất công việc của bạn:

  • Tạo tên duy nhất của portlet trong nội dung của cổng thông tin (bạn có thể chỉnh sửa tên duy nhất này trong Properties view bằng cách chọn portlet trong Outline view của Portal Designer bên dưới Elements > Portlets)

Chú ý: Nếu bạn thay đổi tên duy nhất của portlet trong Properties view, bạn phải thay đổi tất cả sự liên quan của nó trong các tệp sơ đồ bố trí tĩnh để giữ portlet nguyên vẹn trong trang tĩnh.

  • Tạo giá trị duy nhất cho thuộc tính tên của thẻ portlet <div>
  • Thêm vào thẻ <div> chứa portlet-definition này cho sơ đồ bố trí tĩnh
  • Đăng ký mục liên quan đến portlet này trong cấu hình cổng thông tin (nếu chưa sẵn sàng đăng ký)
  • Thêm dự án MyWorkspacePortlet như là dự án tham khảo trong dự án cổng thông tin

Chú ý quan trọng:
Trong khi làm việc với thẻ portlet <div> trực tiếp với sơ đồ bố trí tĩnh trong trình soạn thảo, chú ý rằng portlet phải được đăng ký trước trong cấu hình cổng thông tin. Nếu nó chưa được đăng ký, portlet này sẽ không được chèn vào cấu hình cổng thông tin và lưu trong sơ đồ bố trí tĩnh sẽ gửi lại một thông báo lỗi vì portlet chưa sẵn sàng, Do đó, tốt hơn chúng ta nên sử dụng thủ thuật portlet, bởi vì nó thực hiện tất cả các tác vụ liên quan cho bạn.


Xuất bản dự án cổng thông tin với trang tĩnh

Bây giỡ bạn đã tạo ra một dự án cổng thông tin bao gồm một trang tĩnh cơ sở với một portlet bên trong nó, bạn có thể thấy nó làm việc thế nào khi bạn xuất nó ra nội vùng hay từ xa theo gợi ý của máy chủ WebSphere Portal Version 6.1. Nhưng trước khi bạn có thể xuất dự án cổng thông tin, bạn cần phải tạo ra một máy chủ mới trong Server view.

  1. Kích phải chuột trong dự án cổng thông tin, và chọn Run As > Run on Server (xem Hình 14).
Hình 14. Bắt đầu chạy trên máy chủ
Miêu tả các lựa chọn
  1. Trong thủ thuật Run on Server, kích Next.
  2. Chọn Remove all (nếu bạn đã thực hiện chế độ Run on Server trong cùng không gian làm việc).
  3. Kích Next và sau đó kích Finish.

Khi dự án được xuất ra, trình duyệt mở dự án cổng thông tin, và bạn có thể duyệt qua các trang tĩnh của mình (xem Hình 15).

Hình 15. Trang tĩnh được nhúng đưa ra trình duyệt sau khi xuất bản
Hiển thị trang được xuất bản

Kích để mở rộng


Nếu bạn tạo một trang tĩnh như là một trang tĩnh được nhúng, bạn có thể dễ dàng duyệt qua các trang portal khác nhau trong khi chạy trang của bạn ở máy chủ, bởi vì điều hướng được cung cấp bởi cổng thông tin. Nhưng nếu bạn thêm một trang tĩnh như là một trang tĩnh độc lập trong dự án cổng thông tin của bạn, có lẽ bạn cần một cách để điều hướng các trang khác trong dự án cổng thông tin.

Máy chủ WebSphere Portal Version 6.1 mặc định cung cấp cho bạn vài portlet tiện ích nhằm giải quyết vấn đề của điều hướng. Bạn có thể dễ dàng chứa chúng trong sơ đồ bố trí tĩnh bằng cách sử dụng các tên duy nhất của chúng. Nếu bạn làm việc với dự án cổng thông tin mà dự án này được nhập từ máy chủ, bạn có thể chèn các portlet vào trong sơ đồ bố trí tĩnh bằng cách sử dụng cách kéo thả mà bạn đã thực hiện cho các portlet khác.

Bạn có thể sử dụng bất cứ điều hướng portlet nào:

Điều hướng portlet
<div class="portlet-window" name="portlet-window_0" 
        style="portlet-definition: 'wps.p.SpaNavigataion'"></div>

Sử dụng portlet điều hướng để thêm portal điều hướng động cho một trang tĩnh. Portlet này sử dụng mô hình portal điều hướng để tạo các liên kết điều hướng cho các trang tĩnh của bạn.

Breadcrumb Trail portlet
<div class="portlet-window" name="portlet-window_0" 
        style="portlet-definition: 'wps.p.SpaBreadCrumbTrail'"></div>

Sử dụng Breadcrumb Trail portlet để thêm vào đường dẫn điều hướng cho các trang tĩnh của bạn. Mở từng phần bắt đầu từ nội dung gốc trở xuống để chọn trang tĩnh.

Page List portlet
<div class="portlet-window" name="portlet-window_0" 
        style="portlet-definition: 'wps.p.SpaResourceList'"></div>


Sử dụng Page List portlet để thêm một danh sách động của các liên kết từ các tài nguyên cổng thông tin đến trang tĩnh. Danh sách này được tạo ra một cách linh động với POCURI (Piece of Content URI).


Giống như chỉ ra trước đây, các thẻ <div> ở các vị trí xác định trong tệp sơ đồ bố trí tĩnh có thể chỉ dẫn đến các portlet, thùng chứa, hay điều hướng. Khi trang được gửi trở lại, máy chủ thay thế các thẻ <div> với — khả năng động — nội dung của portlet và với một microformat mà nó định nghĩa siêu dữ liệu cho các portlet

Để làm điều này, cổng thông tin cung cấp các microformat sau đây:

  • portlet microformat: Định nghĩa các cửa sổ portlet và các hoạt động portlet, ví dụ Edit default settings, Configure, Maximize, Minimize, Personalize, và Delete.
  • thùng chứa microformat: Định nghĩa các thùng chứa portlet như là các nơi giữ chỗ cho các portlet.
    Cho các hoạt động kéo thả, portlet microformat có thể cung cấp nguồn để kéo, và thùng chứa microformat cung cấp đích để thả.
  • navigation microformat: Định nghĩa điều hướng nếu một trang tĩnh được gửi trở lại như là một trang web độc lập.

Cửa sổ portlet và thùng chứa portlet microformats có thể chứa đối tượng IDs, máy chủ có thể quản lý động các ID này. Khi bạn tạo trang tĩnh, bạn có thể sử dụng CSS hoặc các kỹ thuật JavaScript để sử dụng microformats nhằm tạo ra và gửi lại một giao diện người dùng thân thiện.

Bây giờ hãy xem các microformats một cách chi tiết để biết làm thế nào thực hiện chúng trong mã chương trình của bạn.

Portlet microformat

Hình 16 chỉ ra đánh dấu portlet được gửi lại từ máy chủ khi dùng thẻ portlet <div> được định nghĩa trong một trang tĩnh. Để xem đánh dấu này, sử dụng bất cứ công cụ kiểm tra đánh dấu nào trong trình duyệt của bạn (Ví dụ Firebug trong Mozila Firefox) khi trang tĩnh của bạn với porlet của nó được đưa ra trong trình duyệt.

Hình 16. Đánh dấu (mã nguồn) của portlet trong trang tĩnh
Ảnh chụp màn hình của đoạn mã shows collapsed references

Một vài thẻ HTML trong ví dụ này cố tình chỉ ra được thu bớt, bởi vì chúng chứa đối tượng ID chỉ dẫn được quản lý bởi máy chủ. Bạn sẽ thấy rằng các thẻ <div>, các thẻ <ul> và các thẻ <li> chứa các giá trị thuộc tính lớp chắc chắn. Những thẻ này với các giá trị thuộc tính lớp được xác định từ trước định nghĩa cấu trúc đầy đủ của đánh dấu portlet. Xem phần tiếp theo về việc định nghĩa các thuộc tính lớp:

Các thuộc tính lớp

portlet-window Giống giá trị mà bạn cung cấp khi định nghĩa portlet trong sơ đồ bố trí tĩnh. Tất cả các giá trị của các thuộc tính khác của thẻ <div> chứa lớp này là giống với trước đây, ngoại trừ thuộc tính ID mà nó được thêm vào bởi máy chủ cho đối tượng ID của cửa sổ.

xoxo
Chỉ ra một danh sách các mục theo nó.

portlet-info
Giới thiệu phần siêu dữ liệu của portlet. Tất cả siêu dữ liệu được gói gọn trong thùng chứa này, nghĩa là nó có thể bị ẩn bởi CSS. Lớp xoxo còn biểu thị rằng nó chứa một danh sách các chỉ mục.

portlet-title
Đại diện tiêu đề của porlet nội vùng. Thuộc tính ngôn ngữ (lang=en) xác định ngôn ngữ được sử dụng.

portlet-actions
Liệt kê các hành động và thao tác portlet có thể được yêu cầu trong cửa sổ portlet. Chú ý: Những thao tác không cần thiết diễn ra ở HTTP. Ngoại trừ một vài hành động là các tương tác an toàn, còn lại những hành động khác có thể không an toàn, bởi vì chúng sửa đổi nội dung ở máy chủ. Trong danh sách các hành động, mỗi tương tác được đại diện bởi một liên kết để chứng tỏ là một tương tác an toàn hoặc một biểu mẫu để chứng tỏ nó là tương tác không an toàn (ví dụ như thao tác Delete).

portlet-action
Miêu tả các hành động hoặc các thao tác hiện tại. Những hành động mà kết quả hiện tại được biểu thị bởi thuộc tính được lựa chọn. Hơn thế nữa, mỗi hành động lại được phân loại bởi thuộc tính nhận dạng hành động nhằm sử dụng CSS để định kiểu các hành động đó (ví dụ, bằng cách thêm vào các biểu tượng xác định hành động). Một danh sách hành động có thể có được tính toán ở máy chủ bằng Operations Feed. Feed này có khả năng mở rộng; do đó, các hoạt động mới có thể được thêm vào bất cứ thời gian nào.

portlet-window-body
Miêu tả thân của portlet.

selected
Nhận biết một mục được chọn, hoặc là portlet hoặc là một hành động. Nếu nó xuất hiện trong thẻ <div> cho cửa sổ portlet, portlet là đích của tương tác mà nó tạo ra trang.

portal-drag-source
(Tùy chọn) Biểu thị rằng cửa sổ có thể được kéo đi xung quanh màn hình bởi người dùng. Thuộc tính này chỉ có hiệu lực khi cửa sổ portlet là một phần có thể sửa đổi thùng chứa portlet, và nếu người dùng có quyền sửa trang và thùng chứa không bị khóa. Xem thùng chứa microformat để biết cách thả và làm thế nào để thực hiện hoạt động kéo-thả. Chú ý: Hành động kéo thả được kích hoạt từ phía máy khách, nhưng nó lại được chạy trên máy chủ.

Thêm các kiểu dáng cho giao diện

Nếu bạn thấy trang tĩnh chứa một portlet chạy trên máy chủ (Hình 15), bạn sẽ nhận thấy rằng các portlet được đưa ra không có bất kỳ một định dạng nào và các hành động portlet được chỉ ra một cách đơn giản trong một danh sách phía trên thân portlet. Do đó, có lẽ bạn cần định kiểu dáng chúng bằng cách sử dụng các giá trị thuộc tính lớp microformat của chúng như đã miêu tả trước đây.

  1. Bây giờ thêm một tệp CSS vào trong thư mục giao diện dưới trang. Thư mụcuniquename của trang tĩnh.
  2. Đặt tên nó là skin.css.
  3. Thêm các giá trị lớp như được chỉ ra trong Ví dụ 8 về tệp skin.css bằng cách sử dụng thủ thuật kiểu dáng mới hoặc theo cách trực tiếp thông qua trình soạn thảo.
Ví dụ 8. Các giá trị lớp để thêm vào giao diện CSS
.xoxo{
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

.xoxo ul{
	margin:0px;
	padding-left:0px;
	font-weight: bold;
	color: #FF9966;
	background-color: #F5F4EF;
	list-style-type: none;
	display: none;
}

.portlet-title{
	margin: 5;
	font-weight: bold;
	color: #85C329;
	background-color: #FAFBF7;
	border-top: 10px solid #CDCDCD;
	list-style-type: none;
	border-top-width: 5px;
}
.portlet-actions{
	margin:1;
	padding-left:10px;
	font-weight: bold;
	color: #FF9966;
	background-color: #F5F4EF;
	list-style-type: none;
	border-bottom: 3px solid #CDCDCD;
	cursor: pointer;
	padding-left: 10px;
}
.portlet-actions li{
	margin: 1;
	font-weight: bold;
	color: #FF9966;
	background-color: ##F5F4EF;
	list-style-type: none;
	text-align: left;
	cursor:auto
}

.portlet-window-body{
	border-bottom: 6px solid #CDCDCD;
	margin-left:10px;
}

Chú ý rằng hiển thị thuộc tính của lớp .xoxo ul đó là none. Điều này dành cho phần tử UL đầu tiên bên trong thẻ <div> với lớp xoxo và nó không có ý nghĩa so với thẻ <ul> với thuộc tính lớp portlet-actions.Với giá trị này, các hoạt động portlet không được hiển thị trong trình duyệt (trong trạng thái đã thu bớt) sau khi người dùng kích vào dấu trừ thu bớt để mở rộng chúng. Bạn sẽ cung cấp một cách mở rộng máy móc đơn giản sử dụng JavaScript để trả lại các hành động portlet giống như một phần của portlet giao diện.

  1. Bây giờ thêm liên kết của skin.css trong các tệp sơ đồ bố trí tĩnh:
	<link rel="stylesheet" href="skin/skin.css" type="text/css">

Bước tiếp theo là thêm JavaScript để tạo giao diện có khả năng thu bớt.

Thêm JavaScript để tạo giao diện có khả năng thu bớt

Bạn có thể thấy rằng, trong trạng thái khởi tạo của portlet, các hành động sẽ không được hiển thị, bởi vì bạn đã sử dụng đặc tính hiển thị kiểu dáng của none. Để tạo các hành động portlet giao diện có khả thể thu bớt, bạn cần phải thêm JavaScript. Trong nhiệm vụ này, bạn tạo một tệp JavaScript mới có tên skin.js trong thư mục giao diện của trang uniquename của sơ đồ bố trí tĩnh.

Để tạo mới một tệp JavaScript:

  1. Kích File > New > Other.
  2. Trong dialog box, mở rộng phần JavaScript và chọn tệp nguồn JavaScript.
  3. Kích Next.
  4. Nhập tên là skin.js.
  5. Mở thư mục mà bạn muốn tạo tệp JavaScipt. Kích Finish để mở tệp skin.js trong môi trường soạn thảo JavaScript.
  6. Rational Application Developer Version 7.5 có hỗ trợ việc soạn thảo JavaScript, sử dụng trình soạn thảo Java-like.
  7. Thêm đoạn mã nguồn chỉ ra trong ví dụ dưới đây vào tệp skin.js.
Ví dụ 9. Đoạn mã thêm vào để tạo giao diện có khả năng thu bớt
/**
 * Registers the onclick event of the document
 */
document.onclick = function(e) {
	if (!e) e = window.event; // Now e is available to be used in all browsers
	var elem = getEventTarget(e);
	/* test if the element is a UL tag (case insensitive) */
	if (/UL/i.test(elem.tagName)) return;
	else elem = getAncestorElement(elem, 'tagName', /li/i);
	if (elem) {
		/*
		 * if xoxo is not prepended to className 'portlet-actions' i.e.
		 * portlet-actions is not a list, hence return
		 */
		if (!/\bportlet-actions\b/i.test(elem.className)) return;
		/*
		 * get the first UL child of the portlet-actions since it contains all
		 * the actions
		 */
		var ulStyle = elem.getElementsByTagName('ul')[0].style;
		/* toggle between the style of UL from block to normal */
		ulStyle.display = (!ulStyle.display) ? 'block' : '';
	}
};

/**
 * Returns the element node where the mouse was clicked
 */
function getEventTarget(e) {
	var eventTarget;
	if (e.target)
		eventTarget = e.target; // for W3C standards and Netscape
	else if (e.srcElement)
		eventTarget = e.srcElement; // IE
	/* If node type of eventTarget is not ELEMENT return its parent */
	return eventTarget.nodeType == 1 ? eventTarget : eventTarget.parentNode;
}

/**
 * Returns the ancestor element of the node elem whose prop value is equal to
 * regexVal
 */
function getAncestorElement(elem, prop, regexVal) {
	while (elem) {
		if (regexVal.test(elem[prop]))
			return elem;
		elem = elem.parentNode;
	}
	return undefined;
}


Đoạn mã JavaScript chứa ba hàm:

  • Hàm document.onclick xử lý tất cả các sự kiện kích-chuột vào tài liệu và chịu trách nhiệm hành động thu bớt của thẻ <ul class="xoxo portlet-actions"> , thẻ này định nghĩa tất cả các hành động.
  • Hàm getEventTarget gửi lại nút phần tử trong tài liệu mà nó bị kích chuột. Hàm document.onclick cần nút phần tử để đảm bảo người dùng đã thực sự kích chuột vào thẻ <div> mà nó chứa các hành động.".
  • Hàm getAncestorElement gửi lại thẻ <li> (như đã đề cập bởi hàm document.onclick), nó hoặc là hoạt động giống hàm này hoặc là bất cứ thẻ kích chuột nào <div>.

Thùng chứa microformat

Hình 17 chỉ ra đánh dấu của thùng chứa mà nó được gửi lại bởi máy chủ cho một trang tĩnh để định nghĩa thẻ thùng chứa <div> trong sơ đồ bố trí tĩnh của nó.

Hình 17. Đánh dấu của thùng chứa trong một trang tĩnh
Ảnh chụp màn hình của đoạn mã

Thùng chứa cung cấp các giá trị dưới đây cho các thuộc tính lớp:

portlet-container
Là một tên đại diện cho thùng chứa mà nó là duy nhất trong phạm vi trang chủ, nó có cùng giá trị với giá trị mà bạn đã cung cấp thùng chứa portlet trong sơ đồ bố trí tĩnh. Thuộc tính ID chứa đối tượng ID của cửa sổ.

portal-drop-target
Đại diện cho một thùng chứa có thể sửa đổi mà nó là đích thả của hoạt động kéo-thả.

portal-drop-handler
Một biểu mẫu đại diện cho việc giữ cuộc gọi lại cho các hành động kéo-thả. Hành động chứa một URL mà nó chứa đích thả duy nhất. Bạn có thể thêm vào các gợi ý và nguồn kéo bằng biểu mẫu sử dụng JavaScript. Với nguồn kéo, sử dụng thuộc tính từ portlet microformat khi định nghĩa.

The navigation microformat

Hình 18 hiển thị đánh dấu của portlet điều hướng nhận được từ máy chủ cho trang tĩnh định nghĩa thẻ portlet điều hướng <div> trong sơ đồ bố trí tĩnh của nó. Bởi vì nó là một portlet, portlet microformat cho tất cả cấu trúc vẫn còn hiệu lực ở đây.

Hình 18. Đánh dấu của một portlet điều hướng trong một trang tĩnh
Ảnh chụp màn hình đoạn mã

Chú ý rằng chỉ có thẻ <div> với lớp portlet-window-body định nghĩa đánh dấu mở rộng với các giá trị thuộc tính lớp chắc chắn để để giữ các trạng thái điều hướng khác nhau. Đây là các giá trị thuộc tính lớp:

first
Phần tử con đầu tiên trong danh sách được yêu cầu cho kiểu dáng CSS.

last
Phần tử con cuối cùng trong danh sách được yêu cầu cho kiểu dáng CSS.

expanded
Nút mở rộng. Một nút chỉ có thể mở rộng nếu nó có các phần tử con và trạng thái điều hướng của nó được thiết lập ở chế độ mở rộng.

collapsed
Nút được thu bớt. Một nút chỉ có thể được thu bớt nếu nó có các phần tử con và trạng thái điều hướng của nó được thiết lập ở chế độ được thu bớt.

page-actions
Một danh sách các hành động mà chúng có hiệu lực trong trang, điển hình là các hành động được sử dụng để mở rộng hay thu bớt các nút điều hướng. Với một trang đang được chọn trong điều hướng, danh sách này cũng chứa các hành động có hiệu lực cho trang đó.

selected
Một trang mà nó được chọn trong điều hướng.

pageoperation-expand
Thuộc tính để mở rộng một nút đã được thu bớt.

pageoperation-collapse
Thuộc tính để thu bớt một nút đã được mở rộng.

Giống như bạn áp dụng các kỹ thuật CSS và JavaScript cho giao diện, bạn cũng có thể biến đổi thùng chứa và điều hướng trong trang tĩnh của bạn thành giao diện người dùng thân thiện.


Các tùy chọn

Thêm các tệp nội vùng hóa

Nếu bạn muốn trang tĩnh của bạn hỗ trợ các ngôn ngữ hay các nội vùng khác nhau, bạn có thể thực hiện điều này dễ dàng do sự giúp đỡ của kỹ thuật tổng hợp trang tĩnh. Nó hỗ trợ việc nội vùng hóa mà không tốn nhiều công sức. Tất cả những gì bạn cần để làm điều này là đặt các tên tệp khác nhau theo tên quy ước của tệp cơ sở. Các tệp này có thể là các tệp HTML, các tệp hình ảnh (JPG, GIF và các loại khác), các tệp CSS, các tệp JavaScript (.js) v.v.

Tên quy ước cho các tệp nội vùng

Nếu tên tệp cơ sở của bạn là base_file_name.extension, bạn cần đặt tên cho phiên bản nội vùng của tệp base_file_name_locale.extension.

Ví dụ, với tên tệp cơ sở có tên my_page.html, phiên bản Tiếng Anh của tệp này là my_page_en.html và phiên bản Tiếng Anh Mỹ của tệp này là my_page_en_us.html. Các tệp này cần phải đặt trong cùng một thư mục với tệp cơ sở my_page.html. Mặc dù các tệp này có tên khác nhau, nhưng chúng có mối liên hệ logic với nhau đó là chúng xuất phát từ cùng một nguồn và chúng có mối liên hệ với tên cơ sở. Cổng thông tin phục vụ phiên bản nội vùng của tài nguyên.

Tạo một tệp để sử dụng trong các trang đa năng

Bây giờ bạn tạo một trang tĩnh với một sơ đồ bố trí tĩnh chỉ dẫn đến kiểu dáng sheets, JavaScript, các hình ảnh và các tài nguyên có thể có khác, bạn có thể tạo một tệp .zip với tất cả các tài nguyên và được dùng lại cùng công việc cho các trang tĩnh khác nhau trong dự án cổng thông tin.

Tạo một trang tĩnh mới bằng cách sử dụng tệp sơ đồ bố trí hiện có:

  1. Chọn một nút (trang, nhãn hoặc URL) trong Portal Designer.
  2. Chọn Chèn trang tĩnh > Trước đó hoặc sau đó hoặc Như mà một phần tử con (bạn hãy nhớ rằng URL không thể có thuộc tính mức phần tử con).
  3. Khi một trang mới với sơ đồ bố trí hộp thoại tĩnh mở ra, giống như bạn đã từng xem trước đây, nhập tiêu đề của trang tĩnh: MyStaticPage2.
  4. Chọn hộp kiểm tra "Create using existing ZIP or HTML page" để chọn sơ đồ bố trí đang tồn tại.
  5. Kích Browse để định vị tệp .zip hoặc tự chứa HTM hay tệp HTML sơ đồ bố trí, sau đó kích OK.
  6. Nếu bạn chọn tệp .zip, hãy chọn tệp HTM hoặc HTML từ thanh thực đơn kéo-thả "Select the layout file".
  7. Hoặc là giữ nguyên các giá trị mặc định cho tất cả các tùy chọn hoặc thay đổi chúng theo tên bạn muốn và kích Finish.
  8. Trang tĩnh được tạo ra với tệp sơ đồ bố trí tĩnh mà bạn có trong tệp .zip, tệp sơ đồ bố trí tĩnh này bây giờ được mở để sẵn sàng chỉnh sửa. Lưu cấu hình cổng thông tin.

Hành động này nhập tất cả nội dung của tệp lưu trữ .zip vào thư mục dưới trang. Thư mục uniquename ở dưới PortalConfiguration > thư mục Staticlayout trong dự án cổng thông tin của bạn, ở đây uniquename là tên duy nhất của trang tĩnh được sử dụng bởi Portal Designer.

Chỉnh sửa các tính chất của trang cổng thông tin với sơ đồ bố trí tĩnh

Nếu bạn không thích sơ đồ bố trí tĩnh mà bạn đã thiết lập cho trang tĩnh của mình, bạn có thể thay thế nó bằng tệp sơ đồ bố trí khác trong tệp .zip của bạn hoặc có thể là tệp .zip khác. Bạn cũng có thể thay đổi cách cửa sổ portlet hiển thị. Chỉ cần chọn trang tĩnh trong Portal Designer và sau đó thực hiện các bước theo yêu cầu ở nhãn Static Page trong Properties view (xem Hình 19).

Hình 19. Properties view của một trang tĩnh trong Portal Designer
Screen segment

Để cập nhật sơ đồ bố trí tĩnh của trang tĩnh đến tệp sơ đồ bố trí khác từ cùng một tệp .zip:

  1. Chọn thanh thực đơn kéo-thả Update layout File và chọn tệp sơ đồ bố trí mà bạn muốn sử dụng
  2. Trang tĩnh luôn được cập nhật vào tệp sơ đồ bố trí tĩnh do đó bạn chỉ cần chọn nó, và tệp sơ đồ bố trí sẽ được mở ra sẵn sàng cho việc soạn thảo. Lưu cấu hình cổng thông tin.

Để cập nhật tệp sơ đồ bố trí tĩnh của trang tĩnh vào một tệp sơ đồ bố trí từ một tệp .zip khác hoặc đến một sơ đồ bố trí tĩnh mới:

  1. Kích New để mở cửa sổ "Replace static sơ đồ bố trí file" (xem Hình 20).
    1. Để tạo một tệp sơ đồ bố trí mới cho MyStaticPage, kích Finish.
    2. Chọn hộp kiểm tra Create using existing ZIP or HTML page để chọn một sơ đồ bố trí hiện tại.
    3. Mở vị trí tệp và kích Finish.
Hình 20. Cửa sổ "Replace static sơ đồ bố trí of the portal page"
Hình chụp màn hình miêu tả cách chọn
  1. Trang tĩnh được cập nhật để sử dụng tệp sơ đồ bố trí tĩnh đã chọn, tệp sơ đồ bố trí được mở ra và sẵn sàng cho việc soạn thảo.
  2. Lưu cấu hình cổng thông tin.
  3. Để thay đổi tùy chọn hiển thị cửa sổ portlet cho trang tĩnh, trong Properties chọn tùy Portlet window display và cập nhật nó vào giá trị mà bạn muốn.
  4. Lưu cấu hình một lần nữa.

Xuất bản dự án cổng thông tin với trang tĩnh

Bây giờ bạn đã tạo dự án cổng thông tin của mình bao gồm các trang tĩnh, bạn có thể xuất bản nó đến máy chủ WebSphere Portal V6.1 nội vùng hoặc từ xa.

Nếu bạn không muốn yêu cầu hiệu chỉnh cổng thông tin các chủ đề và các giao diện (như trong trường hợp các trang tĩnh độc lập), bạn có thể sử dụng tùy chọn Deploy portal configuration only để triển khai các trang một cách đầy đủ. Cách tiếp cận này nhanh hơn triển khai một sự án cổng thông tin đầy đủ với các chủ đề và các giao diện.

Các tùy chọn khác

Bài viết này giải thích tổ hợp các trang tĩnh và hướng dẫn bạn quá trình thực hiện nó bằng Rational Application Developer V7.5. Còn nhiều hơn là những gì bạn có thể làm với các trang tĩnh của mình. Bạn có thể bao gồm các portlet cộng tác trong một trang tĩnh và liên kết chúng bởi Portal Designer, tạo các URL thân thiện cho các trang tĩnh của bạn để giúp người dùng dễ dàng tìm kiếm hơn và đánh dấu chúng.

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=461992
ArticleTitle=Bộ tạo cổng thông tin Rational Application Developer của IBM Phiên bản 7.5: Phần 4. Tổ hợp trang tĩnh
publish-date=01152010