Now it's time to have some fun and play with these technologies directly. I've added a few new portlets to the WebLogic Portal Playground that you can start using today. If you haven't already done so, go to the site and login and/or create a new user account, which is quick and easy. Once you're there, go to the Exploration page and you'll see these portlets:
Try It!
View It!
Using the Try It! Portlet
This portlet will let you try out the client-side Disc and REST features directly. The user interface should be fairly straightforward, but here is a key:
You can select a code template using the Template list:
This will change the code displayed in the code text area:
The buttons on the toolbar allow you to Try It! the code, Copy to Clipboard (IE only), and Clear Output
Many of the code templates have related documentation that can be accessed via the Doc Links list:
Try some of these out for yourself. For example, select the List Look and Feels template and press the Try It! button to see a list like this:<./p>
If there is any output from the code it will be displayed in the lower text area:
The code for this template looks like this:
var appContext = bea.wlp.disc.context.Application.getInstance();
var xmlHttpReq = new bea.wlp.disc.io.XMLHttpRequest;
var url = "/" + appContext.getWebAppName() + "/bea/wlp/api/lookandfeel/list";
var params = "";
params += "?portal=" + appContext.getPortalPath();
params += "&desktop=" + appContext.getDesktopPath();
params += "&webapp=" + appContext.getWebAppName();
params += "&scope=visitor";
params += "&format=json";
url += params;
xmlHttpReq.open("GET", url, true);
xmlHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
function handler(xmlHttpReq) {
if (xmlHttpReq.readyState == 4) {
if (xmlHttpReq.status == "200") {
var result = eval("(" + xmlHttpReq.responseText + ")");
var content = result.content;
var lookAndFeelDetails = content.lookandfeels;
var lookAndFeelDetail = null;
output("Displaying title: markup_name");
for (var i = 0; i < lookAndFeelDetails.length; i++) {
lookAndFeelDetail = lookAndFeelDetails[i];
output(lookAndFeelDetail.title + ": " + lookAndFeelDetail.markup_name);
}
} else {
output("Unable to retrieve look and feels.");
output("Server response:\n\"" + xmlHttpReq.responseText + "\"");
}
}
}
xmlHttpReq.onreadystatechange = function () {handler(xmlHttpReq);};
xmlHttpReq.send(null);
Note: The output function is a special-case provided for this sample and will direct output to the lower text area. If you are using Firebug or another console, you may wish to use that for the output. Similarly, the codearea variable used in some of the samples is a special-case used to represent the text area element for the code, which is useful for finding the portlet context, etc. using Disc.
You can modify the text in any of the templates and try it out yourself. The doc links for each of the templates are a great way to learn what is possible, and you'll find that you can do quite a lot. If you come up with some interesting templates that you think others might benefit from, send them my way and I'll add them along with a comment giving you credit.
Using the View It! Portlet
This portlet provides a tree-style view into the portal context objects provided by Disc. It builds the tree by iterating over the Disc objects, showing the type and either the title or the markup name. When an object is selected in the tree it will update the property sheet and attempt to highlight that object. The properties all come from Disc, and will give you an idea of what is available using that API. Simply add get to the attribute name and you will have the name of the function for that object. For example, if you click on a portlet you will see attributes such as:
You can use these in the Try It! portlet with code such as:
var portlet = bea.wlp.disc.context.Portlet.findByElement(codearea);
output("Label: " + portlet.getLabel());
output("Title: " + portlet.getTitle());
output("Page Title: " + portlet.getParentPage().getTitle());
Notice that there are functions for getMarkupElement and getContentMarkupElement, which are for the entire portlet and just the contents, respectively. Depending on the selected look and feel you can use these to change the portlet's style dynamically. For example, change the background color of the content area with the following:
var portlet = bea.wlp.disc.context.Portlet.findByElement(codearea); portlet.getContentMarkupElement().firstChild.style.background = "green";
Note that you need to get the firstChild of the context object as the context object itself is a container.
You can dynamically change the portlet title with code such as:
var portlet = bea.wlp.disc.context.Portlet.findByElement(codearea);
var titlebar = portlet.getTitlebar().getMarkupElement();
var titleElement = titlebar.firstChild.firstChild;
output("Titlebar innerHTML: " + titleElement.innerHTML);
titleElement.innerHTML = "My Portlet";
Note that this won't change the portlet title permanently, but you can combine this with the REST command for updating the portlet if you'd like to do so. Check out the Update Portlet Title template to see the REST command in action, and where you could insert the code above to make this completely dynamic. This is how the DVT (Dynamic Visitor Tools) sample works, and it should demonstrate just how easy using Disc and REST can be.
I'm hoping to replace the simple text area-based editor in the sample with something better soon, and may provide an Upload Your Code feature as well. If you have other ideas for features, templates, etc., I'd love to hear from you.
]]>
