weblogic console customization labs

44
WEBLOGIC CONSOLE CUSTOMIZATION LABS WEBLOGIC CONSOLE CUSTOMIZATION WWW.REDDIPPED.COM

Upload: peter-van-nes

Post on 16-Jan-2017

866 views

Category:

Technology


2 download

TRANSCRIPT

Page 1: Weblogic Console Customization labs

WEBLOGIC CONSOLE CUSTOMIZATION

LABS

WEBLOGIC CONSOLE CUSTOMIZATION WWW.REDDIPPED.COM

Page 2: Weblogic Console Customization labs

Contents

WEBLOGIC CONSOLE CUSTOMIZATION

Page 3: Weblogic Console Customization labs

Generic information 5 Users 5 URLs 5

Lab 1 6 Create Weblogic Server 6 Add Weblogic Server as Netbeans service 7 Create a Weblogic Console Look-And-Feel project 7

Create new project 7 Initialize the project 8 Customize the login page 9 Lab 2 11

Explore the MBeanUtils class 11 Retrieve and print domain name 11 Make login panel bordercolor dynamic 13 Make the toolbar color dynamic 15 Adding environment to page header 16

Lab 3 17 Showing server health 20

Lab 4 21 Start the JSONP webserver 21 vTicker (jQuery) ticker tape 21 AngularJS message ticker 24

Lab 5 28 Start the JSONP webserver 28 Adding the Book 29 Creating portlets 31 Adding shortcuts to the Domain Structure 32

Lab 6 34 Add a book extension 34 Create a book 34 Create a portlet 35 Add the JSP 35 Adding a shortcut to the Domain Structure 37

Lab 7a Deploying and Exploring SysStats MBean 38 Deploying SysStats.ear 38 Exploring the SysStats MBean 38

WEBLOGIC CONSOLE CUSTOMIZATION

Page 4: Weblogic Console Customization labs

Lab 7b Installing the Servlet and Console Extension 40 Install Java classes 40 Add Book, Portlet and JSP 41

Appendi 42 Useful websites 42 Relevant files 42

Solutions 43 Lab 2 Adding environment to page header 43 Lab 3 Showing server healthstate 44

WEBLOGIC CONSOLE CUSTOMIZATION

Page 5: Weblogic Console Customization labs

Generic information

Users

URLs

Username Type Password

root Linux reddipped

developer Linux reddipped

weblogic Weblogic Reddipped1

Description URL

Weblogic Admin Console mydomain http://localhost:7001/console

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �5 44

Page 6: Weblogic Console Customization labs

Lab 1 In this exercise you will setup the project and make the first customization.Create Weblogic Server

In this step you will create a Weblogic server for a specific domain, during the exercises you will be creating multiple domains and therefore servers. When instructed to create a Weblogic domain use these instructions.

- Logon as Developer- Start a Terminal session (Applications > System Tools > Terminal)- Change to the Weblogic Domains Directory

cd /home/developer/oracle/domains- Create a new weblogic domain by executing the createdomain.sh script. The script uses the

first argument as the domain name. Create the domain 'mydomain' by executing the following command. The Weblogic username used is weblogic with password Reddipped1.

- Wait until the message <Server state changed to RUNNING.> with message-id BEA-000365 is displayed, then press control+C. The server will now be shutdown and is ready for use.

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �6 44

./createdomain.sh mydomain 7001

Page 7: Weblogic Console Customization labs

Add Weblogic Server as Netbeans service

To be able to control the Weblogic server from Netbeans it has to be registered as a Netbeans service. In the next few steps you will register the previously created Weblogic Server as a Netbeans service.

- Start Netbeans- Select the Services tab. If the tab is not shown then select Window > Services in the menu bar.- Right click on Servers and select Add Server...- Choose Oracle Weblogic Server- Fill in the field Name the text WLS_Domain_mydomain- Use the Server Location

/home/developer/oracle/wls12130/wlserver- Select or fill in the path to the domain directory. Domain homes are located under /home/

developer/oracle/domains. Select the domain home /home/developer/oracle/domains/mydomain.

- Fill in the Username and Password for the domain. This are the Username and Password you have chosen during the creation of the domain.

You are now able to control the Weblogic Server from the Services tab in Netbeans. Just right click on the server name and choose the desired action from the context-menu.

Create a Weblogic Console Look-And-Feel project

This is the first Weblogic Console Look And Feel (LAF) project. These steps will familiarize you with the initialization of a Weblogic Console LAF project and make your first small customization and deploy it to your local Weblogic Server.

Create new project

First create a new project Java Web project. We will not particulary need a Java Web project to build a new LAF, but Netbeans offers the war.name property which can be extracted by the build scripts which will be used to created the LAF filename.

- Start Netbeans- Open a new project (File > New Project)- Select Web Application projects in category Java Web as a project type- Use the following Name and Location

Project Name: MyFirstLAFProject Location: /home/developer/NetBeansProjects

- In the server and Settings step choose the previously created server WLS_Domain_mydomain and Java EE Version Java EE 6 Web

- Finish the wizard

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �7 44

Page 8: Weblogic Console Customization labs

Initialize the project In this step you will add the ant build file and the netuix-extension.xml to your project and subsequently initialize the project. The build file simplifies the initial setup and compilation of a LAF. The netuix-extension.xml is till at least version 12.1.2 incorrectly documented in the documentation supplied by Oracle and therefore delivered separately.

- Copy the build-laf.xml and the netuix-extension.xml to the root of the project.cp ~/Desktop/LAB\ files/Lab_01/build-laf.xml \/home/developer/NetBeansProjects/MyFirstLAF/cp ~/Desktop/LAB\ files/Lab_01/netuix-extension.xml \/home/developer/NetBeansProjects/MyFirstLAF/

- Open the build-laf.xml in Netbeans and change the following properties.The build-laf.xml is hidden in the Project window, therefore select the Files window. If the tab is not shown then select Window > Files in the menu bar.wl.homeChange the value of this property matching the location of your weblogic home. Change the value to /home/developer/oracle/wls12130/wlserver wl.domainhomeChange the value of this property matching the location of the domain home. Change the value to /home/developer/oracle/domains/mydomainIf you chose to give your domain another name than written in the lab instruction, then change to value of wl.domainhome accordingly.wl.serverportSet this property value to the listing port of the Weblogic server.wl.adminnameThis property contains the name of the Weblogic admin. Default value is weblogicwl.adminpasswordUse this property for the Weblogic admin password. Change this value to the password for the Weblogic admin specified in property wl.adminname.netuix propertiesYou can optionally change the values of the netuix properties netuix.title, netuix.version, netuix.description, netuix.author and netuix.url. These properties have no programmatic significance and will be merged into the netuix-extension.xml. These settings are only relevant for keeping track of version and author.

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �8 44

Page 9: Weblogic Console Customization labs

- Initialize the project by running the ant target laf.project.initialize.- Expand the build-laf.xml node which will reveal all ant targets.- Right click on the ant target laf.project.initialize and select Run

Target. This target will cleanup temporary directories used for compiling the LAF and unzip the laftemplate to extsource folder located in the root of your project. The extsource folder is your laf project location. After unzipping the laftemplate the target makes the necessary name changes in the expanded template to match the name of the chosen LAF project name.

- When finished the extsource directory structure will be similar as the structure shown below.Get familiar with the structure by examining the directories and files.

Customize the login page

In this step you will make your first customization to the look and feel of the Weblogic Console. After making the change the look and feel the Weblogic Console login page should look like the example below. Here the login section has moved to the center of the screen, the border frame has changed to red and a legal notice has been added.

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �9 44

. └── MyFirstLAF └── extsource    ├── css    ├── errors    ├── framework    ├── images    ├── javascript    ├── layouts    ├── login    └── WEB-INF

Page 10: Weblogic Console Customization labs

- Open the login.css in MyFirstLAF > extsource > css - Find the css selector for the element with id login

The selector starts at line 68- Change the border property to 5 pixels with and the color red;

border: 5px solid #C80000;- Change the value of property float from right to left- Save and close login.css- Open the LoginForm.jsp in MyFirstLAF > extsource > login- Find the form element with id loginData- Find the end tag of the form element and cut-and-paste the following paragraph element before

the end-tag.

- Save and close LoginForm.jsp- Run the Ant target laf.build and verify if the build completes successfully.- Copy the compiled MyFirstLAF.war to the console-ext directory in the domain home by

executing the ant target laf.deploy.- Restart the Weblogic server from the services tab.- Open the Weblogic Admin Console on http://127.0.0.1:7001/console using the installed

browser to test the changes to the Weblogic Console login-page.

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �10 44

<p>This computer system is the property of Me It is for authorized use only. By using this system, all users acknowledge notice of, and agree to comply with, My Use of Information Technology Resources Policy (&quot;AUP&quot;).</p>

Instead of executing the ant tasks laf.compile, laf.deploy and restarting the Weblogic server from the services you can execute the ant task laf.buildanddeploy. This has only the disadvantage that the server output is not shown within the IDE output window.

Page 11: Weblogic Console Customization labs

Lab 2 In this exercise you will explore the existing code in the weblogic console template, learn from it and customize the Weblogic console using this new knowledge.At the end of this lab you will have customized the Weblogic Console of which the border color of the login window and the color of the toolbar depends on the domain name you are connected with. In this lab we assume that the naming convention for domain names is [DTAP]_{domain_name}. An example development domain then could be D_MyDomain and P_MyDomain for a production domain.

Explore the MBeanUtils class

- Open the LoginForm.jsp file- Note that the java class MBeanUtils is imported by a JSP page directive- Find the jar containing the MBeanUtils class by executing the following instructions at the

command-line.

Grep will return two different version of console.jar. Select the version in wlserver/server/lib/consoleapp/webapp/WEB-INF/lib during this lab.

- Start jd-gui and open console.jar- Scroll through the methods and note that the scriptlet at line 6 - 19 in LoginForm.jsp also

invoke methods from the MBeanUtils class.

Retrieve and print domain name

First step is to retrieve and print the domain name in the weblogic console.

- Open the LoginForm.jsp file- Add the following scriptlet at approx line 20 right behind the first scriptlet.

This scriptlet retrieves the domain name using the getDomainName method of the MBeanUtils class.

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �11 44

# Go to the middleware home cd /home/developer/oracle/wls12130 # Find the jar grep -r "com/bea/console/utils/MBeanUtils" *

<% String domainName = MBeanUtils.getDomainName() ; %>

Page 12: Weblogic Console Customization labs

- Find the closing xml tag for the div element with attribute id and value login. The easiest way to find the closing tag is by finding the tag <div id="login">. Then select div, it will be highlighted as well as the closing tag.

- Insert the following html code right after the xml closing tag.

The JSP expression <%=domainName%> prints the value of the String domainName which defined in the scriptlet.

- Now build and deploy the LAF and open the weblogic console. The domain name should be printed on the right side of the login panel.

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �12 44

<div id="product-brand-name">Domain name: <%=domainName%></div></br></br>

The Inspector of Firefox Web Developer tools can help you finding the location in the JSP or HTML of the LAF source files for a specific location on a page.

Page 13: Weblogic Console Customization labs

Make login panel bordercolor dynamic

Now you are able to detect the name of the domain whereon the weblogic console is opened you can differentiate actions. So for example you can make the color of the login frame change depending on the first character of the domain name.

- Open the LoginForm.jsp file

- Add the following code to the in the previously created scriptlet in the LoginForm.jsp. Add the code after the declaration of the variable domainName.

This Java code added to the scriptlet assigns a description of the detected environment type to the String envIndication. A CSS color name is assigned to the string envCssColor. For example, when opening a Weblogic Console on domain P_MyDomain the variables envIndication and envCssColor will respectively contain the values Production and Red. The variable envCssColor is added as a session attribute so that it can be access anywhere in this session.

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �13 44

String envIndication = null ; String envCssColor = null ; // Retrieve environment from first position of domain name if (domainName.length() > 0) { char envIndicator = domainName.charAt(0) ; switch (Character.toUpperCase(envIndicator)) { case 'D': envIndication = "Development" ; envCssColor = "LimeGreen" ; break ; case 'T': envIndication = "Test" ; envCssColor = "LimeGreen" ; break ; case 'A': envIndication = "Acceptation" ; envCssColor = "Yellow" ; break ; case 'G': envIndication = "Production Acceptation" ; envCssColor = "Orange" ; break ; case 'P': envIndication = "Production" ; envCssColor = "Red" ; break ; default: envIndication = "Unspecified" ; envCssColor = "Navy" ; } }

// Add envCssColor as session attribute session.setAttribute("envCssColor",envCssColor) ;

Page 14: Weblogic Console Customization labs

- The border color of div with attribute id and value login is defined in login.css. This value can be overridden from within the LoginForm.jsp using the style attribute.Change the <div id="login"> to <div id="login" style="border:5px solid <%=envCssColor%>">Also here the JSP expression <%=envCssColor%> will be replaced at runtime with the CSS color name assigned to the variable envCssColor in the scriptlet.

- To print the environment name add the following html into the div with id product-brand-name after the html printing the Domain name.</br></br>Environment: <span style="color:<%=envCssColor%>;"><%=envIndication%></span></br></br>When done the div will look similar to the html snippet below.

- Now build and deploy the LAF and open the weblogic console. The environment name shown on the login page should print unspecified and the color of the login frame should be blue.

- Create a new domain, eg. P_MyDomain listening on port 7002 and add this new domain as a service in Netbeans.

- Deploy the LAF to the new domain. To deploy the LAF to the new domain, the property wl.domainhome in build-laf.xml have to be changed to the new domain. Restart the Weblogic server and open the weblogic console on port 7002. The login page now should look similar to the example below.

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �14 44

<div id="product-brand-name">Domain name: <%=domainName%></br></br> Environment: <span style="color:<%=envCssColor%>;"><%=envIndication%> </span></br></br>

Page 15: Weblogic Console Customization labs

Make the toolbar color dynamic

Now the look and feel of the login page is made dependent on the domain environment it is time to change the LAF of the console portal.

- Login to the Admin Console and logon.

- Activate the Inspector Web developer tool in Firefox from the menu barTools > Web Developer > Inspector

- Determine that the background color of the toolbar is defined in the content.css file and applied on the division (<div>) with class toolbar.

- Search the extsource directory structure for jsp files containing an html division element with class toolbar. You will notice that there is no such file. This HTML is generated by a server-side servlet or portlet. Therefore it is not possible to modify the style of division element in a LAF file as in the LoginPage.jsp. Another approach to change the toolbar color is by changing the style of an existing toolbar class using javascript. The best location for placing such a Javascript is the head of the page which is defined in head.jsp.

- Open head.jsp and add the following scriptlet after the <skeleton:children/> xml tag.

This will retrieve the color from the session attribute envCssColor set in LoginForm.jsp

- Now we have retrieved the value from the session attribute, the background color style of element(s) toolbar has to be changed. Because it is obvious that the content in header will be rendered before any content on the page you must make sure the page is fully rendered before making style changes. Add the following javascript after the previously added scriptlet.

The window.onload eventhandler executes the function when the window's load event fires. When fired all elements of class toolbar in the document are retrieved. And for each element retrieved the css property backgroundColor is changed to the value in JSP variable envCssColor.

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �15 44

<jsp:scriptlet> String envCssColor = (String) pageContext.getAttribute("envCssColor") ; </jsp:scriptlet>

<script type="text/javascript"> window.onload = function () { var elems = document.getElementsByClassName("toolbar"); for(x = 0 ; x &lt; elems.length; x++) { elems[x].style.backgroundColor = "${envCssColor}" ; } } ; </script>

Page 16: Weblogic Console Customization labs

- Deploy the LAF to the new domain. To deploy the LAF to the new domain, the property wl.domainhome in build-laf.xml has to be changed to the new domain. Restart the Weblogic server and open the weblogic console on port 7002. The login page now should look similar to the example below.

Adding environment to page header Another way of differentiate the environment of the weblogic console is by printing the environment into the header. Now it is up to you to change the LAF yourself. Change the LAF such that the environment is printed in the header of the page in the color of the toolbar.

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �16 44

Page 17: Weblogic Console Customization labs

Lab 3 In this lab you will add a list of managed server names and their state to the Weblogic Console login page. To realize this existing methods in the imported MBeanUtils class are utilized. Weblogic monitoring data is exposed through Runtime Server MBeans. Each server has an MBean Server exposing the Runtime Server MBeans of that specific host. To retrieve the status of all managed servers, a list of all MBean Servers has to be obtained. For each MBean Server the Server Runtime has to be accessed to retrieve the server state.

- Open the console.jar with JD-GUI- Look up the method getServerRuntimeMBeans()

Note that this method uses the Domain RuntimeService MBean to get a list of all server runtimes and returns an array of ServerRuntimeMBean instances. Therefore the following line will instantiate an ServerRuntimeMBean array with all available server runtimes.

- Very convenient, the MBeanUtils class contains the method getServerName(RuntimeMBean runtimeMBean) which returns the server name as a String. (look it up!) A list of all server names can be acquired by looping through elements of svrRuntimes and invoking the MBeanUtils.getServerName method for each ServerRuntimeMBean instance.

- No so convenient, there is no method in MBeanUtils to retrieve the state of an server. Because we are accessing an MBean, the attributes can be retrieved or changed using getters and setters. Open the Weblogic MBean Reference, lookup the ServerRuntimeMBean and it's attributes. Note there is a State attribute for which is a getState() and setState() method. The state of a specific server therefore can be obtained by invoking the getState() method on that servers ServerRuntimeMBean.

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �17 44

ServerRuntimeMBean[] svrRuntimes = MBeanUtils.getServerRuntimeMBeans() ;

String serverName = MBeanUtils.getServerName(svrRuntimes[x]) ;

String serverState = svrRuntimes[x].getState() ;

Page 18: Weblogic Console Customization labs

- Now add the following few lines to the scriptlet in LoginForm.jsp you created previously. Add the code after the first few declarations in the scriptlet.

Note that there is an unused invocation of method getDomainRuntimeMBeanServerConnection. Try to find explain why this method is necessary. Look up the methods getDomainRuntimeMBeanServerConnection and getServerRuntimeMBeans. Also investigate the weblogic server log after you build and deploy the extension after commenting out the line with the getDomainRuntimeMBeanServerConnection method to see what happens without this invocation.

- By adding the few lines above into the scriptlet, new previously not used classed need to be imported into the LoginForm.jsp. Add the next two jsp page directives to the beginning of the LoginForm.jsp file.

- The Array mngdServers[] now contains a list of managed servers with their actual state. Insert the following JSP expression right after the previously added printing of the environment at approximately line 160.

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �18 44

String[] mngdServers = new String[0] ;

// Connect to DomainRuntimeMBeanServer try { // Find out yourself why this statement is necessary MBeanServerConnection msc = MBeanUtils.getDomainRuntimeMBeanServerConnection() ;

// If serverConnection can be established retrieve server runtime MBeans ServerRuntimeMBean[] svrRuntimes = MBeanUtils.getServerRuntimeMBeans() ; mngdServers = new String[svrRuntimes.length] ;

for (int s=0 ; s < svrRuntimes.length; s++) { mngdServers[s] = MBeanUtils.getServerName(svrRuntimes[s]) + " [" + svrRuntimes[s].getState() + "]" ; } } catch (Exception e) { } ;

<%@ page import="weblogic.management.runtime.ServerRuntimeMBean"%> <%@ page import="javax.management.MBeanServerConnection"%>

<c:if test="<%=mngdServers.length > 0 %>"> Servers:<br/> <c:forEach var="svrState" items="<%=mngdServers%>"> - <c:out value="${svrState}"/><br/> </c:forEach> </c:if>

Page 19: Weblogic Console Customization labs

- Build and deploy the LAF. Restart the Weblogic server and open the Weblogic console. The login page now should look similar to the example below.

The list of servers and their state are now shown until after the first successful login. Explain why you need to logon once to show the server state on the logon page. Hint; Take a closer look at the used MBeanUtils methods using JD-GUI.

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �19 44

Page 20: Weblogic Console Customization labs

Showing server health

A running server still can have a Warning state. Change the LAF so that the state of the servers also is shown on the login page like in the example below.

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �20 44

Page 21: Weblogic Console Customization labs

Lab 4 When working in large organizations it is hard notify the right correct persons with important information about pending changes, known issues, etc. Something what can be useful is a 'ticker-tape' which shows important messages in the Weblogic Console. In this lab you will implement a ticker tape using two different frameworks. The first implementation is based on vTicker a jQuery plug-in, the second implementation is a AngularJS application.Both ticker tape examples use JSONP to retrieve the messages from a remote webserver. `JSONP or "JSON with padding" is a communication technique used in JavaScript programs running in web browsers to request data from a server in a different domain, something which is prohibited by typical web browsers when making JSON requests using AJAX because of the same-origin policy.` 1

Start the JSONP webserver

- Start a Terminal session (Applications > System Tools > Terminal)- Change to the LAB folder

cd ~/Desktop/LAB files/Lab_04/JSONPServer- Start the webserver using the following command.

./jsonweb.sh -p 8024 -j demomessages.json This wil make the webserver listen on port 8024 and return a JSONP message. This can be tested by opening the URL http://127.0.0.1:8024/. If no callback function is requested it will return the function JSONP_CALLBACK. A specific callback function can be requested by assigning the requested callback function to the URL variable callback. E.g. http://127.0.0.1:8024/?callback=MyCallBackFunction.

- Stop the webserver by executing the following instruction../jsonweb.sh -k 8024

vTicker (jQuery) ticker tape

Before making these changes to the LAF of the Weblogic Console, make a copy of the footer.jsp. This file needs to be restored later on when implementing a AngularJS version of the message ticker.

Because this message ticker is based on a jQuery plug-in, jQuery must be loaded. The best location is in the file head.jsp which renders the HTML head section.

- Create the directory ext in MyFirstLAF/extsource/javascript/ext

http://en.wikipedia.org/wiki/JSONP1

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �21 44

Page 22: Weblogic Console Customization labs

- Copy the file jquery.min.js and jquery.vticker.min.js from LAB files/Lab_03_Ticker/jQueryTicker/js to the directory MyFirstLAF/extsource/javascript/ext in the root of your NetBeansProjects folder.

- Open the Files view in your Netbeans LAF project and navigate to extsource > framework > skeletons > MyFirstLAF.

- Open the head.jsp- Add the following javascript import within the HTML head elements and save the file

- Open the footer.jsp- Find the opening tag div with attribute id and value console-footer , and add the following code

after this tag. This code section consists of three blocks

- Import of javascript for the vTicker jQuery plug-iin- Style declarations for the message ticker- HTML div element with class and id tickerMessage containing an unordered list. The list-

item elements in this unordered list will be updated with the ticker messages

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �22 44

<script src="${pageContext.request.contextPath}/javascript/ext/jquery.min.js"></script>

<script src="${pageContext.request.contextPath}/javascript/ext/jquery.vticker.min.js" type="text/javascript" charset="utf-8"> </script> <style> div.tickerMessage > ul > li { font-size:20px; } div.tickerMessage > ul > li > a { font-size:20px; font-style: italic; color:white; }

div.tickerMessage { height: 20px ;} </style> <div id="tickerMessage" class="tickerMessage" style="font-size: 16px;"> <ul> <li>No news yet...</li> </ul> </div>

Page 23: Weblogic Console Customization labs

- Add the Javascript below right after where you just copied the previous code. This Javascript makes the JSONP requests, processes the JSON data in the callback function and update the list-items in the vTicker div element.

- Now build and deploy the LAF and restart the Weblogic Server.- Logon to the Weblogic Console and see that the messages in the JSON file appear in the footer

of the Weblogic Console. (Make sure the JSONP webserver is running to see the messages)

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �23 44

<script type="text/javascript" charset="utf-8"> var htmlData = "<ul><li>Ticker was not successfully initialized</li></ul>" ; // callback function for JSONP ajax request function msgsJsonCallback(jsonData) { htmlData = "<ul>" ; // get all msg values from JSON data // JSON format ([{"msg":"message 1"{,{"msg":"message 2},......]) $.each(jsonData, function() { htmlData += "<li>" + this['msg'] + "</li>" ; }) ; httmlData = htmlData + "</ul>" ; $('#tickerMessage').vTicker('stop'); $('#tickerMessage ul').replaceWith(htmlData); $('#tickerMessage').vTicker('init',{speed: 1500, pause: 10000}); } // Make AJAX to retrieve JSONP object containing messages function RefreshMessages() { var url= "http://localhost:8024" ; $.ajax({ type: 'GET', url: url, jsonpCallback: 'msgsJsonCallback', dataType: 'jsonp', timeout: 5000 });

// schedule next refresh setTimeout(function() { RefreshMessages(); }, 60000); } // initialize message ticker on document-ready $(document).ready(function() { RefreshMessages(); }) ; </script>

Page 24: Weblogic Console Customization labs

AngularJS message ticker

This message ticker is another variant based on AngularJS instead of jQuery and does not required an external module like vTicker. It also has an indicator which shows the status of the connection with the JSONP server.If you have implemented the vTicker message ticker in this lab then replace the existing footer.jsp with the copy made at the start of this lab.

- Copy all image files from LAB files/Lab_04/AngularJSTicker/images to the folder MyFirstLAF/extsource/images in the root of your NetBeansProjects folder.

- Copy the file angular.min.js from LAB files/Lab_04/AngularJSTicker/js to the folder MyFirstLAF/extsource/javascript/ext in the root of your NetBeansProjects folder.

- Open the Files view in your Netbeans LAF project and navigate to extsource > framework > skeletons > MyFirstLAF.

- Open the footer.jsp- Find the tag div with attribute id and value console-footer , and add the following code after this

tag. This code section consists of three blocks

- Import of javascript delivering the AngularJS framework- Style declarations for the message ticker- AngularJS directives for the AngularJS ngSimpleTicker application

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �24 44

<script src="${pageContext.request.contextPath}/javascript/ext/angular.min.js"></script> <style> div.ngtickerMessage > ul > li { font-size:20px; display:initial; padding: 2px 0px 2px 0px; margin:0px; } div.ngtickerMessage > ul { margin:0px ; padding:0px; } div.ngticker { height:28px; } div.ngtickerStatus { float:left; } div.ngtickerStatus > img { padding: 6px ;} div.ngtickerMessage { float:left;} #ngtickerMessage .msgitem { position: absolute; -webkit-transition: all 2.0s; transition: all 2.0s; } </style>

Page 25: Weblogic Console Customization labs

- Add the Javascript show on the next page right after where you just copied the previous code.

This Javascript is the controller for the ngSimpleTicker application.

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �25 44

<div data-ng-app="ngSimpleTicker" data-ng-controller="messagesController" data-ng-init="msgs=[{msg:'Awaiting first message'}]" class="ngticker"> <div class="ngtickerStatus"> <img src="images/Aqua-Ball-{{ statusOK() &amp;&amp; 'Green' || 'Red'}}-icon.png"> </img> </div> <div id="ngtickerMessage" class="ngtickerMessage"> {{ updateModel("JSONP","http://127.0.0.1:8024/?callback=JSON_CALLBACK") }} <ul> <li class="msgitem" ng-style="{opacity:setVisible($index)}" data-ng-repeat="msgObj in msgs track by $index">{{msgObj.msg}}</li> </ul> </div> </div>

Page 26: Weblogic Console Customization labs

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �26 44

<script type="text/javascript" charset="utf-8">

var app = angular.module('ngSimpleTicker', []); app.controller('messagesController', ['$scope','$http', function ($scope,$http) { $scope.activeMsg = 0 ; $scope.status=404 ; /* Make selected li element visible */ $scope.setVisible = function(index) { if (index == $scope.activeMsg) { return("1") ; } else { return("0") ; } }

/* updates ticker with new messages */ $scope.refresh = function() { $scope.activeMsg++ ; $scope.$apply(function() { if ($scope.activeMsg >= $scope.msgs.length) { $scope.activeMsg = 0 ; } }) ; } /* fetch messages */ $scope.fetch = function() { $scope.code = null; $scope.response = null; $http({method: $scope.method, url: $scope.url, timeout: 5000}). success(function(data, status) { $scope.status = status; $scope.data = data; $scope.msgs = $scope.data; }). error(function(data, status, headers, config) { $scope.data = data || "Request failed"; $scope.status = status; }); }; $scope.updateModel = function(method, url) { $scope.method = method; $scope.url = url; }; $scope.statusOK = function() { return $scope.status == "200" ; }

// Message refresh interval setInterval($scope.refresh,5000) ; // Message retrieval interval setInterval($scope.fetch,60000) ; setTimeout($scope.fetch,1000) ; } ]); </script>

Page 27: Weblogic Console Customization labs

- Now build and deploy the LAF and restart the Weblogic Server.- Logon to the Weblogic Console and see that the messages in the JSON file appear in the footer

of the Weblogic Console.

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �27 44

Page 28: Weblogic Console Customization labs

Lab 5 When you are responsible for managing a substantial number of domains it can be useful to have the essential relevant data on hand when having to perform actions on a domain. A logical place to present this information is the Weblogic Console. In this lab you will add an extra 'Domain Info' tab to the generic domain configuration tabs, add details subtabs and add shortcuts to the domain structure to these subtabs. Each tab shows specific information related to the domain you are logged on to. This information is stored on a central location to simplify the administration of domain support information. The relevant support information in the Weblogic Console is retrieved from a central webserver using JSON and presented in the Domain Info sub-tabs.

Start the JSONP webserver

- Start a Terminal session (Applications > System Tools > Terminal)- Change to the LAB folder

cd ~/Desktop/LAB files/Lab_05/JSONPServer- Start the webserver using the following command.

./jsonweb.sh -p 8088 -j domaininfo.json This wil make the webserver listen on port 8088 and return a JSONP message. This can be tested by opening the URL http://127.0.0.1:8088/. If no callback function is requested it will return the function JSONP_CALLBACK. A specific callback function can be requested by assigning the requested callback function to the URL variable callback. E.g. http://127.0.0.1:8088/?callback=MyCallBackFunction.

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �28 44

Page 29: Weblogic Console Customization labs

- Stop the webserver by executing the following instruction../jsonweb.sh -k 8088

Adding the Book

Start by adding a book extension to the netuix-extension.xml. Create a book-extension which appends the book-file to the CoreDomainConfigGeneralBook that will create a tab with sub-tabs.

Now we have added the location of the book-file we can create the book-file defining the tab, sub-tabs and the portlets shown in the tabs. Create the file /controls/domaininfo.book in the extsource folder using the book-file shown on the next page. The <netuix:singleLevelMenu /> element will make that each page in the book-file will be rendered as a sub-page. The value assigned to the title attribute for each book (main tab) or page (sub tab) is the value shown on the tab.

The backingFile attribute for each page contains the class which will be invoked when the page is loaded. We will add this class later in this lab to add these sub-tabs to the Domain Structure.

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �29 44

<book-extension> <book-location> <parent-label-location label="CoreDomainConfigGeneralBook"/> <book-insertion-point action="append"/> </book-location> <book-content content-uri="/controls/domaininfo.book"/> </book-extension>

Page 30: Weblogic Console Customization labs

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �30 44

<?xml version="1.0" encoding="UTF-8"?> <portal:root xmlns:netuix="http://www.bea.com/servers/netuix/xsd/controls/netuix/1.0.0" xmlns:html="http://www.w3.org/1999/xhtml-netuix-modified/1.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:portal="http://www.bea.com/servers/netuix/xsd/portal/support/1.0.0" xsi:schemaLocation="http://www.bea.com/servers/netuix/xsd/portal/support /1.0.0 portal-support-1_0_0.xsd">

<netuix:book markupName="book" markupType="Book" definitionLabel="DomainInfoPage" title="Domain Info"> <netuix:singleLevelMenu markupType="Menu" markupName="singleLevelMenu" presentationClass="multi-level1"/> <netuix:meta name="skeleton-resource-bundle" content="Bundle"/> <netuix:content> <netuix:page markupName="page" markupType="Page" definitionLabel="DomainInfoPage_1" title="Owner details" presentationClass="page-table" backingFile="com.reddipped.consoleext.DomainInfoNavTreeExtension"> <netuix:meta name="skeleton-resource-bundle" content="Bundle"/> <netuix:content> <netuix:portletInstance markupType="Portlet" instanceLabel="DomainInfoPagePortlet_1" contentUri="/portlets/DomainInfoPage_1.portlet"/> </netuix:content> </netuix:page> <netuix:page markupName="page" markupType="Page" definitionLabel="DomainInfoPage_2" title="Support info" presentationClass="page-table" backingFile="com.reddipped.consoleext.DomainInfoNavTreeExtension"> <netuix:meta name="skeleton-resource-bundle" content="Bundle"/> <netuix:content> <netuix:portletInstance markupType="Portlet" instanceLabel="DomainInfoPagePortlet_2" contentUri="/portlets/DomainInfoPage_2.portlet"/> </netuix:content> </netuix:page> </netuix:content> </netuix:book> </portal:root>

Page 31: Weblogic Console Customization labs

Creating portlets

Now create the 2 portlets DomainInfoPage_1 and DomainInfoPage_2 using the sample code below. Make sure the definitionLabel for each created portlet is unique.

You now created the definitions of the main tab Domain Info with the sub-tabs Owner details and Support info. The Owner details tab contains the portlet DomainInfoPage_1 which loads domaininfo_1.jsp. Tab Support Info now contains the portlet DomainInfoPage_2 loading the domaininfo_2.jsp. Each tab will show specific domain specific information. To be able to retrieve domain specific information the name of the domain is required. To get the domain name we will use the same data source as the Weblogic Console for the toolbar.

Log on to the Weblogic console and open the uri http://localhost:7002//console/data/diagnostics/toolbar in that same session. This uri returns data in JSON format containing various data including the domain name.

The domaininfo_?.jsp files make use of an AngularJS module which retrieves the domain name by retrieving the toolbar JSON data. After making this request and extracting the domain name from the JSON data, it retrieves data in JSON format using JSONP from the webserver we have setup at the beginning of this lab. This JSON data contains the Domain Information we want to show on the domain info pages. Add the AngularJS controller domainInfoController to the project by copying the file domainInfo.js from Lab_05/lab_files/js to /javascript/ext in the project folder.

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �31 44

<?xml version="1.0" encoding="UTF-8"?> <portal:root xmlns:html="http://www.w3.org/1999/xhtml-netuix-modified/1.0.0" xmlns:portal="http://www.bea.com/servers/netuix/xsd/portal/support/1.0.0" xmlns:netuix="http://www.bea.com/servers/netuix/xsd/controls/netuix/1.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.bea.com/servers/netuix/xsd/portal/ support/1.0.0 portal-support-1_0_0.xsd"> <netuix:portlet definitionLabel="DomainInfo_1_Portlet" presentationClass="wlsc-window" > <netuix:content> <netuix:jspContent contentUri="/jspext/domaininfo_1.jsp"/> </netuix:content> </netuix:portlet> </portal:root>

{"body":{"loggedInUser":"weblogic","domain":"P_MyDomain","localeSettings":{"locale":"en_US","numberFormat":{"decimalSeparator":".","minusSign":"-","percent":"%","groupingSeparator":",","groupingSize":3},"dateTimeFormat":{"amPmStrings":["AM","PM"],"shortMonths":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec",""],"dateTimePattern":"M/d/yy h:mm:ss a","localizedDateTimePattern":"M/d/yy h:mm:ss a","datePattern":"M/d/yy","localizedDatePattern":"M/d/yy","timePattern":"h:mm:ss a","localizedTimePattern":"h:mm:ss a"}}},"messages":[]}

Page 32: Weblogic Console Customization labs

Copy the JSP files domaininfo_1.jsp and domaininfo_2.jsp from Lab_05/files/jsp to /jspext. Both JSP files are very similar, the difference is the data which presented. Notice that the data is presented by an AngularJS application, ngGetDomainInfo. The Angular application is initialized by calling function updateModel with three arguments. The first argument is the HTTP method used to invoke our web-server, the second the URL to the web-server including the URL parameter callback specifying the requested callback function. You can invoke this URL from the browser to view the data which will be used to build the domain info pages. The last argument is the URI to retrieve the toolbar data. The JSP pageContext is used to construct this URL. In this way the scheme, hostname and portnumber is used as is for accessing the Weblogic Console.

Test the new Tabs and sub-tabs by building and deploying the Console Extension.

Adding shortcuts to the Domain Structure

It can be convenient to add specific pages to the Domain Structure. You can append or insert single nodes or complete node-trees. In this lab you will append a node-tree to the existing Domain. You will add a root-node Domain Information with two child nodes, Owner details and Support Info which will contain hyperlinks to the corresponding tabs you created in the previous steps of this lab.

First review the /controls/domaininfo.book created earlier in this lab and note that both page definitions have an attribute backingFile. This attribute defines the class which is invoked when the pages are loaded.

Copy the file DomainInfoNavTreeExtension.java from Lab_05/lab_files/classes to MyFirstLAF/extsource/classes/com/reddipped/consoleext. Review the code of this Java class . Only the 2

PageBackingContext of the parent node is available when the getTreeExtension method is invoked. So when DomainInfoPage_1 is loaded only the PageBackingContext of this page is available. Therefore for any other TreeNode in the node-structure created by this method, the nodeId, nodeName and nodeUrl has to be hardcoded.

If imported classes cannot be found, go to Projects tab and choose Add Library from the context 2

menu in the Libraries folder. Then add the WeblogicLAF library and restart Netbeans.WEBLOGIC CONSOLE CUSTOMIZATION Page � of �32 44

<div data-ng-app="ngGetDomainInfo" data-ng-controller="domainInfoController" data-ng-init="updateModel('JSONP','http://127.0.0.1:8088/?callback=JSON_CALLBACK', '${pageContext.request.scheme}://${pageContext.request.localName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/data/diagnostics/toolbar')" class="ngDomainInfo">

Page 33: Weblogic Console Customization labs

The extract from the DomainInfoNavTreeExtension.java on the next page creates a Parent node firstLevelNode with nodeId 'DomainInfoPage' and nodeName 'Domain Information'. The value of the nodeName is the value shown in the NodeTree. Two child nodes are added to the parent node, for the first child node the values are retrieved from the PageBackingContext of DomainInfoPage_1. Because the PageBackingContext of DomainInfoPage_2 is not available the values from this context have to be added as static values. Last an NavTreeExtensionEvent is created which appends the Parent node to '/', the root the navigation tree.

Test the extension of the navigation tree by building and deploying the Console Extension.

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �33 44

public class DomainInfoNavTreeExtension extends NavTreeExtensionBacking { public NavTreeExtensionEvent getTreeExtension(PageBackingContext ppCtx, String extensionUrl){ // Construct the first TreeNode TreeNode firstLevelNode = new TreeNode("DomainInfoPage","Domain Information","") ; // Add the Page as a child node to the first node based on the backing context // This will be the page DomainInfoPage_1 defined in the domainInfo.book TreeNode secondLevelNode1 = new TreeNode(ppCtx.getDefinitionLabel(), ppCtx.getTitle(),extensionUrl,firstLevelNode); // Add additional pages using a hardcoded definitionLabel, title and url TreeNode secondLevelNode2 = new TreeNode("DomainInfoPage_2", "Support Info","/console/console.portal?_nfpb=true&_pageLabel=DomainInfoPage_2",firstLevelNode);

// Add TreeExtension to root of DomainStructure NavTreeExtensionEvent evt = new NavTreeExtensionEvent("/",firstLevelNode,NavTreeExtensionEvent.APPEND_ACTION); return evt; }

Page 34: Weblogic Console Customization labs

Lab 6 In this lab you will add a tab to the CoreDomainConfigGeneralBook with some, but less, guidance, than in the previous labs. If you get stuck, you can always take a peek into Lab_06/lab_files/resolution. After finishing this lab you will have added a the Server Status tab showing the server health and status in a table. You will also be able to access this tab directly through a link in the Domain Structure.

Add a book extension

The first step is to add a book extension to the netuix-extension.xml. Add the book extension to the CoreDomainConfigGeneralBook which loads the book content from /controls/MyFirst.book.

Create a book

Now we need to create the book file MyFirst.book in /controls. Create the book-file which defines a page using the following attributes.

definitionLabel MyFirstPagetitle Server StatuspresentationClass page-table

Add a netuix:content element to the page which loads an instance of portlet /portlets/MyFirst.portlet.

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �34 44

Page 35: Weblogic Console Customization labs

Create a portlet

Create the portlet MyFirst.portlet in /portlets which loads the content from the JSP-file MyFirst.jsp in /jspext.

Add the JSP

Now it is time to add the actual content to the tab by creating the JSP MyFirst.jsp. Create the file MyFirst.jsp in /jspext using the example code below.

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �35 44

<jsp:root version="2.0" xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:template="http://beehive.apache.org/netui/tags-template-1.0">

<jsp:directive.page import="com.bea.console.utils.MBeanUtils"/> <jsp:directive.page import="weblogic.management.runtime.ServerRuntimeMBean"/> <jsp:directive.page import="javax.management.MBeanServerConnection"/> <jsp:directive.page import="com.bea.console.utils.HealthUtils"/> <jsp:directive.page import="weblogic.health.HealthState"/> <jsp:directive.page import="java.util.HashMap"/> <jsp:directive.page import="java.util.List"/> <jsp:directive.page import="java.util.ArrayList"/> <jsp:scriptlet>

String domainName = MBeanUtils.getDomainName() ; List mngdServers = new ArrayList&lt;HashMap&lt;String,String&gt;&gt;() ; // Connect to DomainRuntimeMBeanServer try { // Prevent java.io.IOException due to anonymous logons MBeanServerConnection msc = MBeanUtils.getDomainRuntimeMBeanServerConnection() ;

// If serverConnection can be established retrieve server runtime MBeans ServerRuntimeMBean[] svrRuntimes = MBeanUtils.getServerRuntimeMBeans() ; String healthStateTxt = "" ; for (int s=0 ; s &lt; svrRuntimes.length; s++) { HealthState health = HealthUtils.getIntegratedHealthState(svrRuntimes[s]); int healthState = -1 ; if (health != null) { healthState = health.getState(); } switch (healthState) { case 0: healthStateTxt = "ok"; break; case 1: healthStateTxt = "warning"; break; case 2: healthStateTxt = "critical"; break; case 3: healthStateTxt = "failed"; break; case 4: healthStateTxt = "overloaded"; break; default: healthStateTxt = "unknown"; }

Page 36: Weblogic Console Customization labs

Compile the Weblogic Console extension by executing the target laf.buildanddeploy. Review the outcome of the build process and correct the changes if necessary. Login to the Weblogic Console and select P_MyDomain in the Domain Structure. Select the tab Server Status to review the console extension.

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �36 44

HashMap mgdSvr = new HashMap&lt;String,String&gt;() ; mgdSvr.put("name",MBeanUtils.getServerName(svrRuntimes[s])) ; mgdSvr.put("state",svrRuntimes[s].getState()) ; mgdSvr.put("health",healthStateTxt) ; mngdServers.add(mgdSvr) ; }

} catch (Exception e) { } ;

request.setAttribute("mngdServers",mngdServers) ; </jsp:scriptlet> <table class="summaryTable" datatable="0" summary="" style="margin:3px;"> <tbody> <tr> <th scope="col">Managed Server</th> <th scope="col">State</th> <th scope="col">Health</th> </tr> <c:forEach var="svrState" items="${mngdServers}"> <tr> <td>${svrState.name}</td> <td>${svrState.state}</td> <td>${svrState.health}</td> </tr> </c:forEach> </tbody> </table>

</jsp:root>

Page 37: Weblogic Console Customization labs

Adding a shortcut to the Domain Structure

Now you have added a Server Status tab to the CoreDomainConfigGeneralBook, a link can be added to the Domain Structure redirecting to the new tab directly.

Create the java class com.reddipped.consoleext.MyFirstTreeExtension which adds a node to /Environment using the data from the PageBackingContext and URL of the Page. Create the file in the project folder /classes/com/reddipped/consoleext. Use the following java class as a jumpstart.

To invoke this backingFile, the class has to be added as a backingFile attribute to the page defined previously in MyFirst.book. Add an backingFile attribute to the netuix:page element in the book file and assign the class name including the package to this attribute.

Compile and deploy the Weblogic Console extension and determine that the node Server Status is added to the Domain Structure.

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �37 44

package com.reddipped.consoleext;

import com.bea.netuix.servlets.controls.page.PageBackingContext; import com.bea.jsptools.tree.TreeNode; import com.bea.console.utils.NavTreeExtensionBacking; import com.bea.console.utils.NavTreeExtensionEvent;

public class MyFirstTreeExtension extends NavTreeExtensionBacking {

@Override public NavTreeExtensionEvent getTreeExtension(PageBackingContext ppCtx, String extensionUrl) {

// Add your code here

return evt; }

}

Page 38: Weblogic Console Customization labs

Lab 7a Deploying and Exploring SysStats MBean In this lab you will import, compile and deploy the SysStats.ear which will make the SysStats MBean available within your domain. After successful deployment you will explore the attributes and operations of this bean using JConsole.

Deploying SysStats.ear

In the next few steps you will import the projects in NetBeans to build and deploy the SysStats.ear file containing the SysStatsMBean.

• Open the Projects Window in NetBeans by pressing Control+1.• Import the projects SysStatsMBean, SysStats-war and SysStats.• Repeat the following steps for each project

• Select File > Import Project > From ZIP• Select the ZIP-file corresponding with the project name from

LAB files/Lab_07/netbeans_projects• Use the Folder /home/developer/NetBeansProjects• Select Import

• Determine that there are 3 projects added to the projects window• Select the SysStats projects and right click to bring up the context-

menu. Select Clean and Build from the context-menu to compile the project.

• Deploy the project SysStats.ear by selecting Deploy from the SysStats context-menu.

If all steps were successfully executed, SysStats will now be active. A way to check this is by selecting Deployments in the Domain Structure of the Weblogic Console. The deployment SysStats should have the State Active and Health OK.

Exploring the SysStats MBean

In this lab you will be using JConsole to access the MBeans available in the Weblogic Domain and explore the attributes and operations of the SysStats MBean.

• Start JConsole from the Desktop and make a local connection to the weblogic.Server process.

• Select Insecure when a ConnectionFailed SSL1 is shown.• Select the tab MBeans• On the left side of the window a list of MBeans will be shown, select the MBean

com.reddipped.systats.jmx.bean.• Expand the branches Attributes and Operation of MBean myserver and type SysStats.• There are 2 different types of Attributes.

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �38 44

Page 39: Weblogic Console Customization labs

• SimpleType attributes which contain a single value.Explore one SimpleType Attribute, e.g. CPULoadAverage.Select the Refresh button to get the actual value of the Attribute.

• ArrayType attributes containing an array of values.Explore an ArrayType Attribute, e.g. AvgCPULoadHistory.The presented value is javax.management.openmbean.CompositeData[50].Double-click on this value to explore the values. The values are shown in a Composite Navigator showing the current and total number of composites. The example below shows value 1 of 50.

The original Type for AvgCPULoadHistory is java.util.List<com.reddipped.sysstats.jmx.mbean.impl.CPULoadHistoryMBeanImpl>, a List of CPULoadHistoryMBeanImpl MBeans. These beans have two attributes, load an timestamp. By navigating through the values of AvgCPULoadHistory you go through a list of MBeans and displaying it's attributes values for load and timestamp.

• For each History Attribute value there is an operation which adds a sample to the History attribute. For example, the Operation takeAvgCPULoadHistorySample adds an sample to Attribute AvgCPULoadHistory.

• Explore the first value of attribute AvgCPULoadHistory.• Now invoke the operation takeAvgCPULoadHistorySample• Explore the first value of attribute AvgCPULoadHistory again.

Has the first value of the attribute been changed or has something else changed in the values of AvgCPULoadHistory?

• When invoking a takeAvgCPULoadHistorySample operation, a new sample is added to the AvgCPULoadHistory. If the total number of values in AvgCPULoadHistory is larger than the value of attribute HistorySize the oldest value is removed from the list.

• Now explore the HeapUsageHistory bean values and try to explain the data structure.

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �39 44

Page 40: Weblogic Console Customization labs

Lab 7b Installing the Servlet and Console Extension When finishing this lab you will have installed the Servlet which will convert the data in the SysStats MBean to JSON data structure. You also will have added an extra page containing a portlet with JSP content. This extension will periodically make requests to the servlet to get the current data from the SysStats MBean in JSON format.

Install Java classes

Create the folder /classes/com/reddipped/controller/json and /classes/com/reddipped/model. Copy the file JChartJSONObjects.java from LAB files/Lab_07/lab_files/classes to the project folder /classes/com/reddipped/controller/json. And copy the file JChartJSONHelper from LAB files/Lab_07/lab_files/classes to the project folder /classes/com/reddipped/model.To make the JChartJSONObjects to be accessible from a browser, the servlet container must know which servlets have to be deployed and which URL's are mapped to the servet. This has to be done in the web.xml. Open the web.xml in /extsource/WEB-INF and add the following servlet and servlet-mapping elements.

Compile and deploy the Weblogic Console extension. Logon to the Weblogic Console and open a new tab in the Webbrowser. Open the URL http://localhost:7002/console/JChartJSONObjects?chartType=cpuLoadRadarChart. The returned content is the data from the attribute AvgCPULoadHistory of the SysStats MBean in JSON format. The JSON format has the structure required for a Chart.js Radar Chart. More details about this format can be found at http://www.chartjs.org/docs/#radar-chart. Try to replace the value for url variable chartType with heapSizeStackedChart or loadedClassesLineChart. Notice that each chart has its own JSON format.

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �40 44

<servlet> <servlet-name>JChartJSONObjects</servlet-name> <servlet-class>com.reddipped.controller.json.JChartJSONObjects</servlet-class> </servlet> <servlet-mapping> <servlet-name>JChartJSONObjects</servlet-name> <url-pattern>/JChartJSONObjects</url-pattern> </servlet-mapping>

Page 41: Weblogic Console Customization labs

Add Book, Portlet and JSP

You will be adding a book to the Weblogic Console which will be positioned below the Change Center which will show the different graphs. The Console has two layout locations, the right part of the Weblogic Console with layout-location "0" and the left small column with layout-location "1". The first Book at layout-location "1" is the Change Center which has placeholder-position "0". To insert a new book just below the Change Center the layout-location and placeholde-postion have both to be set to 1.Add the following page-extension definition to the netuix-extension.xml to insert the book defined in /controls/systemresources.book

Copy the file systemresources.book from LAB files/Lab_07/lab_files to MyFirstLAF/extsource/controls. The systemresources.book loads the systemresources.portlet, copy the systemresources.portlet from LAB files/Lab_07/lab_files to MyFirstLAF/extsource/portlets. As last copy the systemresources.jsp from LAB files/Lab_07/lab_files to MyFirstLAF/extsource/jspext.

The systemresources.jsp requires bxslider, chart.js and the chart.js extension Chart.StackedBar.js. Copy jquery.bxslider.min.js from LAB files/Lab_07/lab_files/js to MyFirstLAF/extsource/javascript/ext. Copy the folder bxslider from LAB files/Lab_07/lab_files/css to MyFirstLAF/extsource/css. Copy Chart.min.js and Chart.StackedBar.js from LAB files/Lab_07/lab_files/js to MyFirstLAF/extsource/javascript/ext.

Compile and deploy the Weblogic Console extension. Logon to the Weblogic Console and wait a some minutes to be able to gather some samples and feed the graphs with some historical data.

Note: For demo purposes the Java classes and MBean do contain some extra code to virtualize extra Managed Servers and the metrics.

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �41 44

<page-extension> <page-location> <parent-label-location label="page"/> <page-insertion-point layout-location="1" placeholder-position="1"/> </page-location> <book-content content-uri="/controls/systemresources.book"/> </page-extension>

Page 42: Weblogic Console Customization labs

Appendi

Useful websites

Developing Enterprise JavaBeans, Version 2.1, for Oracle WebLogic Server http://docs.oracle.com/middleware/1213/wls/EJBPG/appc_ejbc.htm

Tutorialspoint JSP http://www.tutorialspoint.com/jsp

Extending the Administration Console for Oracle WebLogic Server http://docs.oracle.com/middleware/1212/wls/CNSLX/title.htm#BEGIN

Weblogic server MBean reference docs.oracle.com/middleware/1212/wls/WLMBR/core/index.html

AngularJS http://www.w3schools.com/angular/default.asp http://campus.codeschool.com/courses/shaping-up-with-angular-js

Bxslider http://bxslider.com

Chart.JS http://chartjs.org https://github.com/Regaddi/Chart.StackedBar.js

Relevant files

Netuix schema definitions<WL_HOME>/server/lib/consoleapp/APP-INF/lib/netuix-schemas.jar

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �42 44

Page 43: Weblogic Console Customization labs

Solutions

Lab 2 Adding environment to page header

Add the following line session.setAttribute("envIndication",envIndication) ;to the scriptlet LoginForm.jsp just before or after line session.setAttribute("envCssColor",envCssColor) ;

Add the line <span id="product-brand-name" style="padding-left:100px;color:${envCssColor}">${envIndication}</span> after <span id="product-name"><fmt:message key='product.name' bundle="${current_bundle}"/></span> at line 34 of header.jsp

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �43 44

Page 44: Weblogic Console Customization labs

Lab 3 Showing server healthstate

WEBLOGIC CONSOLE CUSTOMIZATION Page � of �44 44

<%@ page language="java"%> <%@ page import="com.bea.console.utils.MBeanUtils"%> <%@ page import="weblogic.management.runtime.ServerRuntimeMBean"%> <%@ page import="javax.management.MBeanServerConnection"%> <%@ page import="com.bea.console.utils.HealthUtils"%> <%@ page import="weblogic.health.HealthState"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ taglib uri="/WEB-INF/console-html.tld" prefix="wl"%>

.....

<% String domainName = MBeanUtils.getDomainName() ; String envIndication = null ; String envCssColor = null ; String[] mngdServers = new String[0] ;

// Connect to DomainRuntimeMBeanServer try { // Prevent java.io.IOException due to anonymous logons MBeanServerConnection msc = MBeanUtils.getDomainRuntimeMBeanServerConnection() ;

// If serverConnection can be established retrieve server runtime MBeans ServerRuntimeMBean[] svrRuntimes = MBeanUtils.getServerRuntimeMBeans() ; mngdServers = new String[svrRuntimes.length] ; String healthStateTxt = "" ; for (int s=0 ; s < svrRuntimes.length; s++) { HealthState health = HealthUtils.getIntegratedHealthState(svrRuntimes[s]); int healthState = -1 ; if (health != null) { healthState = health.getState(); } switch (healthState) { case 0: healthStateTxt = "ok"; break; case 1: healthStateTxt = "warning"; break; case 2: healthStateTxt = "critical"; break; case 3: healthStateTxt = "failed";