Introduction
You have already seen some examples earlier in the series, where I've tried to illustrate how to do something without going into much detail. In this entry, we will build upon what we know so far and create some examples of the different component types.
Component Types and Examples
AbstractPortalComponent
DynPage
JSPDynPage
AbstractPortalComponent
You have seen the most basic of examples being rendered using the AbstractPortalComponent type in an earlier blog entry in this series. Today we'll create a more involving example. We'll also use one of our examples to showcase some of the UI components that SAP has made available via HTMLB for Java API provided by SAP.
Note: for details on how to do these steps, please refer to my previous blog entry (Java development methodologies (Part I)
Create a new Portal Project called MyAddressBook:
File > New > Project > Portal Application > Create a Portal Application Project
Create a new Portal Object of type AbstractPortalComponent
File > New > Other > Portal Application > Create a new Portal Application Object
Choose AbstractPortalComponent from the list of Portal Components
Name the object NewContacts and use com.democompany.demoapps.myaddressbook as the package name
The following file and the code it contains should be auto-generated for you: NewContacts.java in the src.core directory structure. This is just one of the files that gets created, there are other files, the most important of which is the deployment descriptor, portalapp.xml.
package com.umairsalam.demoapps.myaddressbook;
import com.sapportals.portal.prt.component.*;
public class NewContacts extends AbstractPortalComponent
{
public void doContent(IPortalComponentRequest request, IPortalComponentResponse response)
{
// this is where you'd write your code!
}
}
Pretty impressive, huh? You ain't seen nothin' yet!
Add the following code snippet within the curly brackets:
Don't worry about the ancient looking cryptic code above. Its only for illustration purposes here. I'd rather you use the JSPDynPage template and write UI code in the JSP page. Our code, when rendered as an iView in the Portal accomplishes the following:
DynPage
Next we'll take a quick look at the DynPage template to see how it differs from the above AbstractPortalComponent format. Also, we'll introduce HTMLB for Java libraries.
Create a new Portal Object of type DynPage
File > New > Other > Portal Application > Create a new Portal Application Object
Choose DynPage from the list of Portal Components
Name the object SearchContacts and use com.democompany.demoapps.myaddressbook as the package name
The following file and should be auto-generated for you: SearchContacts.java in the src.core directory structure. Add the following code for some UI elements:
package com.umairsalam.demoapps.myaddressbook;
import com.sapportals.htmlb.page.DynPage;
import com.sapportals.htmlb.page.PageException;
import com.sapportals.portal.htmlb.page.PageProcessorComponent;
import com.sapportals.htmlb.*;
import com.sapportals.htmlb.enum.*;
public class SearchContacts extends PageProcessorComponent {
public DynPage getPage() {
return new SearchContactsDynPage();
}
public static class SearchContactsDynPage extends DynPage {
/**
Initialization code executed once per user.
*/
public void doInitialization() {
// called first, used to create, initialize and setup data
}
/**
Input handling code. In general called the first time with the second page request from the user.
*/
public void doProcessAfterInput() throws PageException {
// called after user input, use for event handling
}
/**
Create output. Called once per request.
*/
public void doProcessBeforeOutput() throws PageException {
Form myForm = this.getForm(); // get the form from DynPage
// create your GUI here....
Form myForm = this.getForm(); // get the form from DynPage
GridLayout gl = new GridLayout();
// FirstName
Label lbFirstName = new Label("lb_firstname");
lbFirstName.setText("First Name:");
InputField inpFirstName = new InputField(FIELD_FIRSTNAME);
lbFirstName.setLabelFor(inpFirstName);
gl.addComponent(1,1,lbFirstName);
gl.addComponent(1,2,inpFirstName);
// LastName
Label lbLastName = new Label("lb_lastname");
lbLastName.setText("Last Name:");
InputField inpLastName = new InputField(FIELD_LASTNAME);
lbLastName.setLabelFor(inpLastName);
gl.addComponent(2,1,lbLastName);
gl.addComponent(2,2,inpLastName);
Label lbEmail = new Label("lb_email");
lbEmail.setText("Email:");
InputField inpEmail = new InputField(FIELD_EMAIL);
lbEmail.setLabelFor(inpEmail);
gl.addComponent(3,1,lbEmail);
gl.addComponent(3,2,inpEmail);
// DropdownListBox
Label lbDisplayType = new Label("lb_Province");
lbDisplayType.setText("Province: ");
DropdownListBox ddl = new DropdownListBox(FIELD_DISPLAYTYPE);
ddl.setWidth("300");
ddl.addItem(ALBERTA, "Alberta");
ddl.addItem(ONTARIO, "Ontario");
ddl.addItem(BRITISH_COLUMBIA, "British Columbia");
ddl.addItem(NEW_FOUNDLAND_LABRADOR, "New Foundland & Labrador");
ddl.addItem(NORTHWEST_TERRITORIES, "Northwest Territories");
ddl.addItem(NEW_BRUNSWICK, "New Brunswick");
ddl.addItem(NOVA_SCOTIA, "Nova Scotia");
ddl.addItem(MANITOBA, "Manitoba");
ddl.addItem(QUEBEC, "Quebec");
ddl.addItem(SASKATCHEWAN, "Saskatchewan");
ddl.addItem(YUKON, "Yukon");
ddl.addItem(PEI, "Prince Edward Island");
ddl.addItem(NUNAVUT, "Nunavut");
ddl.setWidth("130");
ddl.setTooltip("Select Province");
lbDisplayType.setLabelFor(ddl);
gl.addComponent(4,1,lbDisplayType);
gl.addComponent(4,2, ddl);
// Button
Button btn = new Button("submit");
btn.setText("Submit Details");
btn.setDesign(ButtonDesign.EMPHASIZED);
btn.setOnClientClick("javascript:alert('Button was clicked!')");
gl.addColSpanComponent(5,1,btn,2);
myForm.addComponent(gl);
myForm.setDefaultButton(btn);
}
}
}
A quick glance at the code above shows that the main difference between the simplistic AbstractPortalComponent and DynPage approaches is that there are different methods act as place holders for your code and make it easier to build and understand. However, there is more than meets the eye (I’ve wanted to use this phrase in my writing for a long while and finally got a chance!): the structure of the application is more flexible and lets you use the HTMLB for Java libraries easily and the three default methods let you break your code down into easily digestible chunks. Even though you can use the HTMLB for Java libraries with AbstractPortalComponent, the DynPage and JSPDynPage approaches make the task for GUI development much easier.
The doInitialization method gets called first. This is an ideal place for creating, initializing and setting up data.
The doProcessAfterInput method gets called whenever the client sends the form to the server or when an event occurs (caused when input is received from the user). So all event handling code should go here.
The doProcessBeforeOutput method gets called before the form is sent to the web client, every time, even when doInitialization is called. Therefore this is the place for the code to build GUI for the iView.
JSPDynPage
Finally, we’ll take a look at the JSPDynPage approach for building Java iViews in the Portal. JSPDynPage is by far the most flexible and advanced way of building robust J2EE based iViews.
Create a new Portal Object of type DynPage
File > New > Other > Portal Application > Create a new Portal Application Object
Choose JSPDynPage from the list of Portal Components
When you run the wizard to start the JSPDynPage application object, you get the following:
JSPDynPage class file
JSP file
Bean file (optional)
For brevity, I’ve left out everything but the three methods I want to point out.
JSPDynPage Class:
Bean Class:
package bean;
import java.io.Serializable;
public class JSPDynPageBean implements Serializable {
String firstName ="";
String lastName = "" ;
String eMail="";
String phone = "" ;
/**
@return
*/
public String getEMail() {
return eMail;
}
/**
@return
*/
public String getFirstName() {
return firstName;
}
/**
@return
*/
public String getLastName() {
return lastName;
}
/**
@return
*/
public String getPhone() {
return phone;
}
/**
@param string
*/
public void setEMail(String string) {
eMail = string;
}
/**
@param string
*/
public void setFirstName(String string) {
firstName = string;
}
/**
@param string
*/
public void setLastName(String string) {
lastName = string;
}
/**
@param string
*/
public void setPhone(String string) {
phone = string;
}
}
JSP file:
Summary
As you can see, various approaches are available for creating Java based iViews. There is no best approach for everything; it just depends on the task at hand. For example, I wouldn’t use a JSPDynPage approach for creating a simple iView to display some text/image where I probably wouldn’t need a Bean component.
