LS10/EC10 session sample #2: Adding custom properties to DDE design elements
Karsten Lehmann 11 March 2010 18:00:51
Sample 2 of our Lotusphere and Entwickercamp sessions is an add-on for Domino Designer on Eclipse.(I changed the order of the samples, because we need to work on a few others before we can publish them)
As a long time web developer for the Notes/Domino platform, I have always missed one Designer feature a lot: There was obviously no easy way to get the pixel dimensions of image resources.
My workaround was to extract the image to disk, open it in an image viewer and write down the width and height. A real pain.
But now, that Domino Designer is based on the Eclipse platform, things have changed. Developers don't have to wait any more for IBM to implement a specific new feature. They can just create they own Designer add-ons!
By leveraging the Eclipse APIs and new Domino Designer extensibility APIs we were able to build a small helper plugin, that hooks directly into the properties pane of DDE:
There are no methods in the DDE API to add such a section. It's basically an API that lets you convert the standard Eclipse selection into Designer specific classes. It offers some basic set/get methods for design elements and refresh methods to notify DDE that the design has been changed, e.g. by a DXL import using the backend Notes classes.
But fortunately, IBM built DDE right on top of Eclipse and made use of standard Eclipse property panels for the design properties.
Those panels can be extended by plugins with the following XML code:
< extension point="org.eclipse.ui.views.properties.tabbed.propertySections" >
< propertySections contributorId="com.ibm.designer.domino.navigator.panels" >
< propertySection
afterSection="com.ibm.designer.domino.navigator.panels.image.basic"
enablesFor="1"
class="com.mindoo.dde.imageproperties.WebImageSizeSection"
filter="com.mindoo.dde.imageproperties.ImagePropFilter"
id="com.ibm.designer.domino.navigator.panels.image.websize"
tab="com.ibm.designer.domino.navigator.panels.file.basic" / >
< /propertySections >
< /extension >
It adds a custom section to an existing property panel. In this case, we are adding it to the "basics" panel and use a filter to hide it if no image resource is selected:
package com.mindoo.dde.imageproperties;
import org.eclipse.core.resources.IResource;
import org.eclipse.jface.viewers.IFilter;
import com.ibm.designer.domino.ide.resources.extensions.DesignerDesignElement;
import com.ibm.designer.domino.ui.commons.extensions.DesignerResource;
public class ImagePropFilter implements IFilter {
public boolean select(Object paramObject) {
if (paramObject instanceof IResource) {
IResource resource=(IResource) paramObject;
DesignerDesignElement designElement=DesignerResource.getDesignElement(resource);
if (designElement!=null) {
String deType=designElement.getDesignElementType();
if (DesignerResource.TYPE_IMAGE.equals(deType))
return true;
}
}
return false;
}
}
When the selected image changes, the implementation class schedules a background job that grabs the DXL content of the image's design element. It converts the base64 encoded DXL content to a byte stream, uses Eclipse API methods to load the image, reads the width and height and displays them in the specific fields of the "Image size in px" area.
Since we are doing this in a background operation, the DDE UI is still responsive.
If you are asking yourself where to get those internal section IDs from, I highly recommend you to take a look at the plugin.xml file of the DDE plugin "com.ibm.designer.domino.navigator" in the "framework/shared subfolder" of your Notes program directory. :-)
Finally, here is the plugin source code and an update site to install from:
- Comments [1]