This blog will add a 'Create' button to the toolbar of the Document Library module and open a popup when clicked showing a message 'feature not implemented yet'
Step 1 - mapping the terrain
As I have done in previous blog entries, I will draw a picture of the dependent files (xml, freemarker and javascript) that renders the relevant portion of the document library, and indicate what needs to be modified.
As shown before, the key files are:
- 'site-data/pages/documentLibrary.xml' page references 'documentLibrary.xml' template-instance
- 'site-data/template-instances/documentLibrary.xml' contains reference to 'org/alfresco/documentLibrary' template type
- 'templates/org/alfresco/documentLibrary.ftl' contains the structure of the page with regions containing components including the 'toolbar' region
- 'site-data/components/template.toolbar.documentLibrary.xml' defines the component to fit in region 'toolbar' of template 'documentLibrary' refrencing a webscript ui component registered to the url '/components/documentlibrary/toolbar'
- site-webscripts/org/alfresco/components/documentlibrary/toolbar.get.desc.xml' describes the ui webscript registered to the '/components/library/toolbar' url, it includes freemarker renderers 'toolbar.get.head.ftl' and 'toolbar.get.html.ftl'.
- 'toolbar.get.head.ftl' references toolbar.js and toolbar.css found in 'web/components/documentlibrary/' source folder.
The 'toolbar' component contains the space for the 'create' button I wish to add. Within the 'toolbar.get.html.ftl' I have added a couple of lines for the new button:
<div class="new-folder hideable DocListTree"><button id="${args.htmlid}-newFolder-button" name="newFolder">${msg("button.new-folder")}</button></div>
<!-- Added by EEW 20081030 -->
<div class="separator hideable DocListTree"> </div>
<div class="file-create hideable DocListTree"><button id="${args.htmlid}-fileCreate-button" name="fileCreate">${msg("button.create")}</button></div>
<!-- End Added -->
<div class="separator hideable DocListTree"> </div>
<div class="file-upload hideable DocListTree"><button id="${args.htmlid}-fileUpload-button" name="fileUpload">${msg("button.upload")}</button></div>
Step 3 - Add Messages for the button
This code also changes the 'toolbar.get.properties' file adding the key/value 'button.create=Create',
Step 4 - Add CSS Entries and Images for the button
and the toolbar.css used to render the button:
As implied by the css above, I have also created two new images to appear with the button: create-16.png and create-disabled-16.png. For testing purposes, I simply copied edit-blog-16.png.
/* added by EEW 20081030 */
.toolbar .file-create button
{
background: transparent url(images/create-16.png) no-repeat 12px 4px;
padding-left: 32px;
}
.toolbar .file-create .yui-button-disabled button
{
background-image: url(images/create-disabled-16.png);
}
/* done added */
As implied by the css above, I have also created two new images to appear with the button: create-16.png and create-disabled-16.png. For testing purposes, I simply copied edit-blog-16.png.
Step 5 - Add the Button as a YUI Button
In 'toolbar.js', I have added a line to instantiate the YUI button named in the toolbar template in the 'onReady' YUI event listener
// added by EEW 20081030
// File Create button: user needs "create" access
this.widgets.fileCreate = Alfresco.util.createYUIButton(this, "fileCreate-button", this.onFileCreate,
{
disabled: true,
value: "create"
});
// done added
// File Upload button: user needs "create" access
this.widgets.fileUpload = Alfresco.util.createYUIButton(this, "fileUpload-button", this.onFileUpload,
{
disabled: true,
value: "create"
});
In this code, we see that the YUI button ties the name 'fileCreate-button' (which is the id in the button tag defined in 'toolbar.get.html.ftl'), and the event name 'onFileCreate', which will fire when the button is clicked.
Step 6 - Add the Event Code
The event is also defined in toolbar.js:
This event handler will open a popup message for now showing that this feature is not yet implemented.
/**
* File Create click handler
*
* @method onFileCreate
* @param e {object} DomEvent
* @param p_obj {object} Object passed back from addListener method
*/
onFileCreate: function DLTB_onFileCreate(e, p_obj)
{
/*
var url = YAHOO.lang.substitute(Alfresco.constants.URL_CONTEXT + "page/site/{site}/blog-postedit?container={container}",
{
site: this.options.siteId,
container: this.options.containerId
});
window.location = url;
Event.preventDefault(e);
*/
var notimpTitle = this._msg("title.notimp");
var notimpMsg = this._msg("message.notimp", "Create Content");
Alfresco.util.PopupManager.displayPrompt(
{
title: notimpTitle,
text: Alfresco.util.decodeHTML(notimpMsg),
noEscape: true,
modal: true,
buttons: [
{
text: this._msg("button.cancel"),
handler: function DLTB_onActionDelete_cancel()
{
this.destroy();
}
}]
});
},
This event handler will open a popup message for now showing that this feature is not yet implemented.
Step 7 - Add The Messages for the Popup Message Box
At this point I am only defining a placeholder for this event. In order to support the above popup, I have included the message keys to 'toolbar.get.properties':
## Added by EEW 20081031
button.create=Create
title.notimp=Not Implemented
message.notimp = Feature {0} is not implemented yet.
## Done Added
Step 8 - Build, Deploy and Test
To test, I use ant task 'incremental-slingshot-tomcat' to build and deploy my changes to tomat. As a remider, the ant task requires environment variables TOMCAT_HOME and APP_TOMCAT_HOME to be defined to the installed tomcat.
And you should see this:
