354 Lotus blogs updated hourly. Who will post next? Home | Downloads | Events | Pods | Blogs | Search | myPL | About 
 
Latest 7 Posts
On SocialBizUg - Web Worker Basics
Sun, Apr 13th 2014 96
Popover to Google Maps
Wed, Jan 1st 2014 110
My first impressions of using Titanium Appcelerator
Sun, Dec 8th 2013 170
Asymmetric Modernization Explained
Mon, Nov 25th 2013 83
2 Days with Domino 9.0.1 Mobile Controls - And I'm not happy
Wed, Oct 30th 2013 128
Make your Bootstrap site Responsive
Fri, Sep 20th 2013 91
The Modern Notes Developer
Mon, Aug 19th 2013 79
Top 10
My first impressions of using Titanium Appcelerator
Sun, Dec 8th 2013 170
Easy Mobile Browser Detection
Tue, Nov 27th 2012 128
2 Days with Domino 9.0.1 Mobile Controls - And I'm not happy
Wed, Oct 30th 2013 128
JQuery FullCalendar in XPages
Sun, Feb 17th 2013 114
Popover to Google Maps
Wed, Jan 1st 2014 110
On SocialBizUg - Web Worker Basics
Sun, Apr 13th 2014 96
Make your Bootstrap site Responsive
Fri, Sep 20th 2013 91
Implementing a Dojo Scrollable pane with the XPages Mobile Controls
Mon, Jul 29th 2013 86
Asymmetric Modernization Explained
Mon, Nov 25th 2013 83
Dojo Mobile ScrollablePane implementation
Sun, Apr 21st 2013 81


Custom Component Creation in an NSF
Keith Strickland    

Today we're looking at custom component creation within an NSF. We're not talking about custom controls, though creating a custom control before creating a component is definately a good way to prototype a custom component. Plus the DDE Builder does kind-of turn our custom controls into components, so they are kind-of custom components, but not really. What we're really talking about is a component that shows up in the DDE Component Palette and has it's own properties, methods and visual representation within designer and on an XPage and is serializable. This component can be used in multiple applications without any modification and may require a complex type in order to function (if you're familiar with the application layout in the extension library, all of the different nodes you can add to the various properties are complex types).

So you're asking, but don't I have to include these in a plugin that lives on the server? Well, you can certainly do that and by including your component in a library that resides on the server you won't have to move your custom component from application to application, it would just be available. But that is a whole different topic altogether, we're wanting to create our component in an NSF so we don't have to bug an administrator to put files on the server for us.

Since this will be a rather lengthy article, we will cover this topic in multiple posts. In part 1 we'll setup our DDE environment to allow us to create java class files and come up with what the properties of the component will be. And if it's not too long of a post, going ahead and creating our component class file.

To start with we'll need to setup our NSF so that we have a place to put our class files. So, go ahead and create a new application and in DDE add the package explorer view to your perspective. You do this by clicking "WindowShow Eclipse ViewsOther" and in the resulting dialog navigate to "JavaPackage Explorer" and click OK. You should now have a new tab next to the Application Explorer called Package Explorer. Go ahead and open that up if you haven't already.

Navigate to your new application and open up the WebContent folder, right click the WEB-INF folder and select "NewFolder" (if you don't have this option click other and select folder from the dialog). Name your folder "src". Now right click the "src" folder and select "Build PathUse as Source Folder". This will cause the folder to disappear from WebContentWEB-INFsrc and be moved towards the top of the folder list into "WebContent/WEB-INF/src". This is where we'll be placing all of our java files for this series. As a side note, if you're using 8.5.3 you really don't have to do this. You can use the Java section underneath the code category. But I don't like how it organizes the class files as it doesn't "categorize" the class files underneath their respective packages. But that's my personal preference.

Right click the "WebContent/WEB-INF/src" folder and select "NewPackage" (if you don't have this option click other and select package from the dialog). This will be where our component classes are stored. I'm naming mine "com.keithstric.components". Follow the same process and add another package called "com.keithstric.renderkit" and this will be where our renderers are stored.

This component will be for a contact type application with some basic information. So for reusability and simplicity sake we'll create a component with a few fields within a fieldset. This should allow us to demonstrate a couple of different methods and show that a component doesn't have to be just a single html element but can be something more complex also.

Now that we've got our basic structure setup we can start writing some code. We'll start off with the component class. This class should have a few different properties and all of these properties will have getters and setters. The properties will be:

  • Boolean showFirstName
  • Boolean showLastName
  • Boolean showEmailAddress
  • Boolean showPhoneNumber
  • String firstName
  • String lastName
  • String emailAddress
  • String phoneNumber

We'll be defining these properties and then let eclipse create getters and setters for us. So, let's start our class by right clicking the com.keithstric.components package we created earlier and pick "Class" from the drop down menu (If you don't have this option click other and select class from the dialog). Give it a name of CommonContactInfo and set the "Super class" to javax.faces.component.UIComponent and click the "Finish" button. This should create a new .java file in our com.keithstric.components package and our class will have a name of com.keithstric.components.CommonContactInfo.

Once that is completed we can now define our properties like below:

private static final String RENDERER_TYPE = "com.keithstric.CommonContactInfo";
private static final String COMPONENT_FAMILY = "com.keithstric";

private Boolean showFirstName;
private Boolean showLastName;
private Boolean showEmailAddress;
private Boolean showPhoneNumber;
private String firstName;
private String lastName;
private String emailAddress;
private String phoneNumber;

Once that is done, right click one of the properties and select "SourceGenerate Getters and Setters" from the drop down menu. This will generate all of our getters and setters for us. You can also define a code template to help us stick to any company standards that may be present. I generally try to stick with the IBM standard and format my getters like:

public String getFirstName() {
	if (this.firstName != null) {
		return this.firstName;
	}
	ValueBinding _vb = getValueBinding("firstName");
	if (_vb != null) {
		return (String) _vb.getValue(getFacesContext());
	} else {
		//Or return a default value of some sort, can be hard coded or
		// determined programmatically
		return null;
	}
}

public void setFirstName(String firstName) {
	this.firstName = firstName;
}

Next up for the component class is to define the constructor and override the "getFamily()" method like below. Take note of the "RENDERER_TYPE" and "COMPONENT_FAMILY" constants used in the constructor where we set the renderer type and then in the getFamily() method. This is VERY IMPORTANT as it tells the server via the faces-config and xsp-config which renderer class to use to render this component. If you forget this, your component will not render, or at least won't use your renderer class:

public CommonContactInfo(){
	setRendererType(RENDERER_TYPE);
}

@Override
public getFamily() {
	return COMPONENT_FAMILY;
}

So, we should end up with this:

package com.keithstric.components;

import javax.faces.component.UIComponent;
import javax.faces.el.ValueBinding;

public class CommonContactInfo extends UIComponent {

	private static final String RENDERER_TYPE = "com.keithstric.CommonContactInfo";
	private static final String COMPONENT_FAMILY = "com.keithstric";

	private Boolean showFirstName;
	private Boolean showLastName;
	private Boolean showEmailAddress;
	private Boolean showPhoneNumber;
	private String firstName;
	private String lastName;
	private String emailAddress;
	private String phoneNumber;
	
	public CommonContactInfo(){
		setRendererType(RENDERER_TYPE);
	}

	@Override
	public getFamily() {
		return COMPONENT_FAMILY;
	}

	public Boolean isShowFirstName() {
		if (showFirstName != null) {
			return showFirstName;
		}
		ValueBinding _vb = getValueBinding("showFirstName");
		if (_vb != null) {
			return (Boolean) _vb.getValue("showFirstName");
		} else {
			return null;
		}
	}

	public void setShowFirstName(Boolean showFirstName) {
		this.showFirstName = showFirstName;
	}

	public Boolean isShowLastName() {
		if (showLastName != null) {
			return showLastName;
		}
		ValueBinding _vb = getValueBinding("showLastName");
		if (_vb != null) {
			return (Boolean) _vb.getValue("showLastName");
		} else {
			return null;
		}
	}

	public void setShowLastName(Boolean showLastName) {
		this.showLastName = showLastName;
	}

	public Boolean isShowEmailAddress() {
		if (showEmailAddress != null) {
			return showEmailAddress;
		}
		ValueBinding _vb = getValueBinding("showEmailAddress");
		if (_vb != null) {
			return (Boolean) _vb.getValue("showEmailAddress");
		} else {
			return null;
		}
	}

	public void setShowEmailAddress(Boolean showEmailAddress) {
		this.showEmailAddress = showEmailAddress;
	}

	public Boolean isShowPhoneNumber() {
		if (showPhoneNumber != null) {
			return showPhoneNumber;
		}
		ValueBinding _vb = getValueBinding("showPhoneNumber");
		if (_vb != null) {
			return (Boolean) _vb.getValue("showPhoneNumber");
		} else {
			return null;
		}
	}

	public void setShowPhoneNumber(Boolean showPhoneNumber) {
		this.showPhoneNumber = showPhoneNumber;
	}

	public String getFirstName() {
		if (firstName != null) {
			return firstName;
		}
		ValueBinding _vb = getValueBinding("firstName");
		if (_vb != null) {
			return (String) _vb.getValue("firstName");
		} else {
			return null;
		}
	}

	public void setFirstName(String firstName) {
		this.firstName = firstName;
	}

	public String getLastName() {
		if (lastName != null) {
			return lastName;
		}
		ValueBinding _vb = getValueBinding("lastName");
		if (_vb != null) {
			return (String) _vb.getValue("lastName");
		} else {
			return null;
		}
	}

	public void setLastName(String lastName) {
		this.lastName = lastName;
	}

	public String getEmailAddress() {
		if (emailAddress != null) {
			return emailAddress;
		}
		ValueBinding _vb = getValueBinding("emailAddress");
		if (_vb != null) {
			return (String) _vb.getValue("emailAddress");
		} else {
			return null;
		}
	}

	public void setEmailAddress(String emailAddress) {
		this.emailAddress = emailAddress;
	}

	public String getPhoneNumber() {
		if (phoneNumber != null) {
			return phoneNumber;
		}
		ValueBinding _vb = getValueBinding("phoneNumber");
		if (_vb != null) {
			return (String) _vb.getValue("phoneNumber");
		} else {
			return null;
		}
	}

	public void setPhoneNumber(String phoneNumber) {
		this.phoneNumber = phoneNumber;
	}	
	
}

You now have a component definition class with the preliminary structure defined and something to work with. In the next installment we'll create a renderer that will define how the component is represented in the browser. We'll also be coming back to this class to add the Save & Restore State methods with a short discussion around those methods which make the serialization of the component possible.



---------------------
http://xprentice.gbs.com/A55BAC/keithstric.nsf/default.xsp?documentId=E54655CC596DF550852579840054E294
Feb 14, 2012
32 hits



Recent Blog Posts
96


On SocialBizUg - Web Worker Basics
Sun, Apr 13th 2014 11:26a   Keith Strickland
Over on SocialBizUg - Web Worker Basics [read] Keywords:
110


Popover to Google Maps
Wed, Jan 1st 2014 11:34a   Keith Strickland
Posted over on SocialBizUg - Popover to Google Maps [read] Keywords: google
170


My first impressions of using Titanium Appcelerator
Sun, Dec 8th 2013 11:48a   Keith Strickland
A couple of weeks ago I started messing with Titanium Appcelerator. Coming from Domino Designer and Eclipse the IDE will look very familiar. It's eclipse and it's based off of Aptana Studio. I guess the biggest issue to being productive is the learning curve for the API. But honestly when is that not the case? So starting to delve into this, Titanium apps are purely client side javascript based. You write the CSJS that builds the UI, Business Logic, Layout, everything. While this may [read] Keywords: domino ibm lotus notes notes client application dojo eclipse iphone javascript mobile oop openntf wiki
83


Asymmetric Modernization Explained
Mon, Nov 25th 2013 6:32a   Keith Strickland
Posted Asymmetric Modernization Explained over on SocialBizUg. [read] Keywords:
128


2 Days with Domino 9.0.1 Mobile Controls - And I'm not happy
Wed, Oct 30th 2013 1:42p   Keith Strickland
OK, so today is the 2nd day I've spent with the Mobile controls from Domino 9.0.1. I must say the lack of a 9.0.1 Beta is quite obvious. So some of the "improvements" IBM made to the mobile controls are the addition of onBeforeTransitionIn/Out onAfterTransitionIn/Out. While these events are sorely needed, the implementation IBM chose to use doesn't work is kind-of odd. So, a brief rundown of the transition events pre 9.0.1. I posted a while back about how to implement these methods i [read] Keywords: domino ibm application community dojo mobile network server
91


Make your Bootstrap site Responsive
Fri, Sep 20th 2013 2:50p   Keith Strickland
Just posted over on SocialBizUg a tutorial for putting together a responsive layout for your XPage Applications. [read] Keywords: applications




79


The Modern Notes Developer
Mon, Aug 19th 2013 8:09a   Keith Strickland
On SocialBiz User Group - The Modern Notes Developer [read] Keywords: notes xpages
86


Implementing a Dojo Scrollable pane with the XPages Mobile Controls
Mon, Jul 29th 2013 4:45p   Keith Strickland
Check out my first NotesIn9 video about adding a Dojo Scrollable Pane in order to get a fixed bottom tab bar with the Extension Library Mobile Controls. A big thanks to David Leedy for publishing my video. Hope you enjoy the video. [read] Keywords: xpages dojo mobile planetlotus planetlotus.org
63


Add Custom Style Classes to IBM Renderers
Tue, Jul 16th 2013 7:25a   Keith Strickland
I've published an article over on SocialBizUG describing how to take over an IBM Renderer to include your own style classes. Check it out, hopefully you'll find some use for it. [read] Keywords: ibm
77


Mobile First Development
Fri, May 10th 2013 9:06a   Keith Strickland
At Red Pill Development, Peter Presnell has encouraged our development efforts to use a "Mobile First" approach. The process is that you design your mobile interface first, get everything working properly and then move on from there to Tablet and then Web Browser interfaces re-using as much as possible from the previously working mobile implementation. This approach has several advantages: It forces you to research, gather requirements and only display and write code for the things you [read] Keywords: application development interface mobile properties widgets




Created and Maintained by Yancy Lent - About - Blog Submission - Suggestions - Change Log - Blog Widget - Advertising - Mobile Edition