With the new release of WebCenter, you have the ability to create rich enterprise portals without needing to code a lot.
In this chapter, I will explain how to set up, create, and build such a portal application.
In this chapter, you will learn about:
Preparing JDeveloper for WebCenter
Creating a Webcenter portal
Changing the look and feel of your portal
Editing pages using the composer
An enterprise portal is a framework that allows users to interact with different applications in a secure way. There is a single point of entry and the security to the composite applications is transparent for the user.
Each user should be able to create their own view on the portal. A portal is highly customizable, which means that most of the work will be done at runtime. An administrator should be able to create and manage pages, users, roles, and so on. Users can choose whatever content they want to see on their pages so they can personalize the portal to their needs.
In this chapter, you will learn some basics about the WebCenter Portal application. Later chapters will go into further details on most of the subjects covered in this chapter. It is intended as an introduction to the WebCenter Portal.
When you want to build WebCenter portals, JDeveloper is the preferred IDE. JDeveloper has a lot of built-in features that will help us to build rich enterprise applications. It has a lot of wizards that can help in building the complex configuration files.
JDeveloper is the IDE from Oracle and can be downloaded from the following link: http://www.oracle.com/technetwork/developer-tools/jdev/downloads/index.html. You will need to download JDeveloper 188.8.131.52 Studio Edition and not JDeveloper 11.1.2 because that version is not compatible with WebCenter yet. This edition is the full-blown edition with all the bells and whistles. It has all the libraries for building an ADF application, which is the basis for a WebCenter application.
1. Open JDeveloper that was installed.
2. Choose Default Role.
3. From JDeveloper, open the Help menu and select Check for updates.
4. Click Next on the welcome screen.
5. Make sure all the Update Centers are selected and press Next.
6. In the available Updates, enter WebCenter and select all the found updates.
7. Press Next to start the download.
8. After the download is finished, you will need to restart JDeveloper.
You can check if the updates have been installed by opening the About window from the Help menu. Select the Extensions tab and scroll down to the WebCenter extensions. You should be able to see them:
When you first open JDeveloper, you first need to select a role. The role determines the functionality you have in JDeveloper. When you select the default role, all the functionality will be available.
JDeveloper will have three additional application templates:
WebCenter Portal Application: Template that will create a preconfigured portal with ADF and WebCenter technology.
WebCenter Spaces Taskflow Customizations: This application is configured for customizing the applications and services taskflows used with the WebCenter Spaces Application. The extensions also include the taskflows and data controls for each of the WebCenter services that we will be integrating in our portal.
In this release of WebCenter, we can easily build enterprise portals by using the WebCenter Portal application template in JDeveloper. This template contains a preconfigured portal that we can modify to our needs. It has basic administration pages and security.
For this recipe, you need the latest version of JDeveloper with the WebCenter extensions installed, which is described in the previous recipe.
The Create WebCenter Portal Application dialog will open. In the dialog, you will need to complete a few steps in order to create the portal application:
1. Application Name: Specify the application name, directory, and application package prefix.
2. Project Name: Specify the name and directory of the portal project. At this stage, you can also add additional libraries to the project.
3. Project Java Settings: Specify the default package, java source, and output directory.
4. Project WebCenter settings: With this step, you can request to build a default portal environment. When you disable the Configure the application with standard Portal features checkbox, you will have an empty project with only the reference to the WebCenter libraries, but no default portal will be configured. You can also let JDeveloper create a special test-role, so you can test your application.
5. Press the Finish button to create the application.
You can test the portal without needing to develop anything. Just start the integrated WebLogic server, right-click the portal project, and select Run from the context menu.
When you start the WebLogic server for the first time, it can take a few minutes. This is because JDeveloper will create the WebLogic domain for the integrated WebLogic server. Because we have installed the WebCenter extensions, JDeveloper will also extend the domain with the WebCenter libraries.
When you log in with the default WebLogic user, you should have complete administration rights.
The default user of the integrated WebLogic server is weblogic with password weblogic1. When logged in, you should see an Administration link. This links to the Administration Console where you can manage the resources of your portal like pages, resource catalogs, navigations, and so on.
In the Administration Console you have five tabs:
Structure: In the structure, you manage the resources about the structure of your portal, such as pages, templates, navigations, and resource catalogs.
Look and Layout: In the look and layout part, you manage things like skins, styles, templates for the content presenter, and mashup styles.
Mashups: Mashups are taskflows created during runtime. You can also manage data controls in the mashup section.
Security: In the security tab, you can add users or roles and define their access to the portal application.
Configuration: In this tab, you can configure default settings for the portal like the default page template, default navigation, default resource catalog, and default skin.
Propagation: This tab is only visible when you create a specific URL connection. From this tab, you can propagate changes from your staging environment to your production environment. Read Chapter 13 to learn more about the propagation tab.
JDeveloper has created a lot of files for us.
Here is an overview of the most important files created for us by JDeveloper:
The default portal has two page templates. They can be found in the
Web Content/oracle/Webcenter/portalapp/pagetemplates folder:
You can of course create your own templates. This will be covered in Chapter 5.
JDeveloper will create four pages for us. These can be found in the
Web Content/oracle/Webcenter/portalapp/pages folder:
By default, JDeveloper will create a default resource catalog. This can be found in the
Web Content/oracle/Webcenter/portalapp/catalogs folder.
In this folder, you will find the default-catalog.xml file which represents the resource catalog. When you open this file, you will notice that JDeveloper has a design view for this file. This way it is easier to manage and edit the catalog without knowing the underlying XML.Chapter 4 covers recipes about the resource catalog.
Another file in the catalogs folder is the catalog-registry.xml. This is the set of components that the user can use when creating a resource catalog at runtime.
By using navigations, you can allow users to find content on different pages, taskflow, or even external pages.
By default, you will find one navigation model in the
Web content/oracle/Webcenter/portalapp/navigations folder: default-navigation-model.xml. It contains the page hierarchy and a link to the administration page. This model is not used in the template, but it is there as an example. You can of course use this model and modify it, or you can create your own models.
You will also find the navigation-registry.xml. This file contains the items that can be used to create a navigation model at runtime.
Chapter 3 covers the recipes about the navigations.
With the page hierarchy, you can create parent-child relationships between pages. It allows you to create multi-level navigation of existing pages. Within the page hierarchy, you can set the security of each node. You are able to define if a child node inherits the security from its parent or it has its own security.
One of the most important features for an administrator of a portal is managing the pages. Without pages, you won't have any place to put your content on.
For this recipe, you need a WebCenter Portal application. You will also need to start the Portal application.
We will use the default WebCenter Portal Application as an example in this recipe.
1. Go to the administration section on the portal by logging in as an administrator.
2. Select Pages from the Structure section in the Resource tab. You should be able to see a table with the existing pages:
3. Press the Create Page button. This will open the dialog to create a new page.
In the create page popup, you will need to specify the following fields:
Page Template: You can specify a specific template for your page or use the Application Page Template, which will use a default template.
Page Style: The page style specifies how the content will be divided on your page:
In the list, there is a Show Page checkbox. When this checkbox is selected for a page, the page will show up in the navigation. If this checkbox is not enabled, you can access the page by linking to the page or specifying the URL of the page in the browser. The page will however not be visible in a navigation model when you add a page hierarchy. You will need to manually create a link from another page to that page.
When you want to secure your page instead of using the visible attribute, you need to specify specific security settings in the page hierarchy, which is described in Chapter 3.
Once the page has been created, you want to put the page in the correct hierarchy of your portal. In WebCenter, you can assign a parent page to each page. By default, the ROOT is the parent of each page. The root is not a real page. It is the parent node for each newly created page:
You will see that the column Sub Pages of the parent node will have an icon telling you that there are child nodes. Click on it to see the child pages.
When you create a page, the security will be inherited from the parent. The inheritance is a property so it means that when you modify the security on the parent, it will be propagated to all of its children who use inheritance.
You can modify this behaviour by setting the security. This can be done by clicking the actions button and selecting the Set Access from the context menu.
At the top of the popup, you can specify the Access Method:
Delegate Security: Specify the security on the page yourself
Inherit Parent Security: Inherit the security rules from the parent page
When you have specified the delegate security, the list of access rules is populated based upon the rules of the parent. From this point on, you can add your own roles and modify the security:
You can add both users and roles and need to specify what actions they can perform on the page.
Grant: Allows the user/role to grant access to other users/roles
Delete: Allows the user/role to remove the page
Edit: Allows the user/role to customize the page
Personalize: Allows the user to personalize preferences of the portlet put on the page
View: Allows the user/role to view the page
There are some other actions you can perform on the pages from the actions context menu:
Copy page: This action will copy your page. You will first be asked to enter a name for the new page.
Delete page: This will completely removes the pages from the system. No recovery is possible!
About this page: This opens a dialog that shows some information about the page such as the name, created by, date created, last modified, and direct URL.
The default template from the WebCenter portal application is a good start, but you want to have a portal with a look and feel that matches the house style of your company. In this recipe, I will show how to build your own page template.
A page template describes the default skeleton of your portal. In a template, you define where to put the header, footer, navigation, and other common content. You also define where the content area should be.
1. In JDeveloper, right-click on the Portal project and select New from the context menu.
2. In the left menu, select JSF from the Web Tier.
3. Select JSF Page Template from the list on the right.
4. Press OK.
5. Enter a file name for your template.
6. Enter the full Directory or browse to the directory you want to put the template in.
7. Enter a Page Template Name. This name is used in the drop-down list of templates when you create a new JSPX in JDeveloper.
8. You can use a Quick Start Layout by selecting the checkbox. When you click the browse button, you can choose more default layouts to base your template on. This will create a very basic skeleton for you to work with.
9. In the Facet Definitions part, you should at least create one facet for the content. A facet is a placeholder for content that will be created on the actual page. It is a region you can define where the page that uses the template has the ability to edit the content. To use this template at runtime, you need to create at least one facet definition called "content", which will be used when you create a new page at runtime.
10. In the attributes tab, you can define parameters that a page can pass to the template.
11. Press OK to create the template.
<?xml version='1.0' encoding='UTF-8'?> <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:af="http://xmlns.oracle.com/adf/faces/rich"> <jsp:directive.page contentType="text/html;charset=UTF-8"/> <af:pageTemplateDef var="attrs"> <af:xmlContent> <component xmlns= "http://xmlns.oracle.com/adf/faces/rich/component"> <display-name>company_template</display-name> <facet> <description>The actual content of the page </description> <facet-name>content</facet-name> </facet> </component> </af:xmlContent> </af:pageTemplateDef> </jsp:root>
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.
The definition of the template can be found between the
af:xmlContent tags. In this tag, display name, facets, and attributes are defined.
At this point, you don't have an actual page template, only the definition.
<?xml version='1.0' encoding='UTF-8'?> <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:af="http://xmlns.oracle.com/adf/faces/rich"> <jsp:directive.page contentType="text/html;charset=UTF-8"/> <af:pageTemplateDef var="attrs"> <af:panelGroupLayout id="pnlAll"> <af:panelGroupLayout id="Pnlheader" layout="vertical"> </af:panelGroupLayout> <af:panelGroupLayout id="pnlContent" layout="vertical"> <af:facetRef facetName="content"/> </af:panelGroupLayout> </af:panelGroupLayout> <af:xmlContent> <component xmlns="http://xmlns.oracle.com/adf/faces/rich/component"> <display-name>company_template</display-name> <facet> <description>The actual content of the page</description> <facet-name>content</facet-name> </facet> </component> </af:xmlContent> </af:pageTemplateDef> </jsp:root>
As you can see, we have a
panelGroupLayout for the header and one for the content. In the content group, we have a reference to the content facet. This area will be made available for the consumer of the template. All the rest is off limits and cannot be modified. All page templates need to have the
<af:facetRef facetName="content"/> to work fine.
In the template, you would add taskflows for navigation, company logo, tag line, and other things you would like to see on your portal.
A portal isn't a portal unless you have the ability to make customizations at runtime. That's why WebCenter has the Composer component. It lets you add taskflows, portlets, or other components to a page. Using the composer, you are also able to change the layout of the content.
By letting users create their own page, you can let them design a custom dashboard. With the composer component, they can select which components to add on their dashboard.
Each area of the layout has some buttons that control the layout.
In the top left corner of each area, you will find six buttons:
Add a tab or set: This allows you to add tabs in an area. Each tab can have its own components:
Add box above, below, left, and right. These buttons let you add a box at the side corresponding to the button. This box has the same features as any other area.
Edit: With the edit button, you can set the properties of those boxes like the style and the allowed actions.
Delete: With the delete button, you can delete the box and its content.
2. Select the Two-Column layout. The layout should look like the layout in the image above.
3. Press the Add Content button in the first area. This will open the resource catalog.
4. Open the Web Development folder and click on the add link from the Moveable Box component. This is a component were you can also add new content.
5. Close the resource catalog.
6. Repeat steps 3 through 5 for the second area.
At this point your page should look like this:
7. Drag the movable box from the first area to the second area or even inside the movable box of the second area. Each portlet that you will add will have this behaviour by default. In this way, users can rearrange the portlets to their own choosing. The difference between a movable box and a box is that in a moveable box the user can rearrange their portlets, and in a box just the editor of the page can rearrange the portlets.
Everything you do in the composer can be seen as customization. Every customization you do is stored in the MDS on top of the real page. The MDS stored the delta of each page. This means that your changes are stored as an XML file that will be applied on the original page. Even the page bindings have a representation in the MDS. When a portlet has parameters, these bindings are stored in the page bindings so when you add portlets, the MDS needs to store the delta in its repository so it can apply the changes.
When you reset the page to its original value, the delta will be removed from the MDS and you see the original page.
The MDS (Metadata Services) is a repository used by WebCenter to store metadata. The integrated WebLogic server in JDeveloper stores the metadata in a file-based repository. When you install a standalone WebLogic server, the MDS will be stored in the database. The MDS repository is an XML-based repository. By using the XML features of the latest Oracle database, the performance of the MDS is really great.
The page properties have following options:
Description: Specify a description about the page.
Keywords: Here you can enter a comma-separated list of keywords describing the page. By entering keywords, users can find a page easily.
Page template: Here you can change the look-and-feel of the page by selecting the template.
Background color: Specify the background color of your page.
Background image: Specify the image you want to use as a background for your page.
Other CSS: In this text field, you can enter additional styles that need to be applied to your page.