Quickly Customizing Alfresco
•Télécharger en tant que PPTX, PDF•
2 j'aime•4,788 vues
Find out how easy it is to brand a Share installation. We will create a custom theme using CSS and a Tag cloud dashlet implemented as a simple WebScript that you can later add to the dashboard.
![Use case: Adding Simple Extensions 3 ,[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Quickly Customizing Alfresco
Similaire à Quickly Customizing Alfresco (20)
Plus de Alfresco Software
Plus de Alfresco Software (20)
Dernier
Dernier (20)
Quickly Customizing Alfresco
- 1. Quickly Customizing Alfresco Share 2 AingaranPillai Founder, Zazi twitter: @apillaiz
- 5. Tag Cloud Dashlet 5 Site Dashlet Displays dynamic data Tags associated with the current site, as a tag cloud Loads data from repository via existingRESTful API GET /alfresco/service/api/tagscopes/site/{site}/tags GET /alfresco/service/api/tagscopes/site/{site}/{container}/tags Business logic could be implemented entirely in the web tier But better using client-side JavaScript Allows ‘refreshing’ of data Deploy as a JAR
- 6. 6
- 7. Typical Dashlet Pattern 7 (function() { ... Alfresco.dashlet.SiteTags = functionSiteTags_constructor(htmlId) { returnAlfresco.dashlet.SiteTags.superclass.constructor.call(this, "Alfresco.dashlet.SiteTags", htmlId); }; YAHOO.extend(Alfresco.dashlet.SiteTags, Alfresco.component.Base, { options: { ... }, onReady: function SiteTags_onReady() { ... }, ... } }
- 8. Code Walk Though 8 Client-side JS source/web/components/dashlets/site-tags.js Web script config/alfresco/site-webscripts/org/alfresco/components/dashlets/site-tags.get
- 9. Twitter Feed Dashlet 9 Generic Dashlet (User or Site dashboards) Displays last ten tweets of a specific user Loads data from Twitter JSON API GET /alfresco/service/api/tagscopes/site/{site}/tags GET /alfresco/service/api/tagscopes/site/{site}/{container}/tags Data loading performed by a second ‘list’ web script Dashlet web script just acts as a container Allows simple refreshing of data Configuration dialogue UI to set Twitter username Yet another web script! Glue it all together using client-side JavaScript Deploy as a JAR
- 10. 10
- 11. Code Walk Though 11 Client-side JS source/web/components/dashlets/twitter-user-timeline.js Web script config/alfresco/site-webscripts/org/alfresco/components/dashlets/twitter-user-timeline.get Web script config/alfresco/site-webscripts/org/alfresco/components/dashlets/twitter-user-timeline-list.get Web script config/alfresco/site-webscripts/org/alfresco/modules/dashlets/config-twitter-user-timeline.get
- 12. Dashlet Development Considerations 12 How should I load my data? Web tier only for simple dashlets Complement with client-side JavaScript where needed More client-side JS allows richer user experience and shifts processing burden onto the clients What format? JSON, XML or direct HTML? What configuration parameters can be applied? e.g. Number of tags, default Twitter user Configuration dialogue allows users to change it Store default values in .config.xmlfile Are any user preferences required?
- 13. Custom Red Theme 13 Custom Theme for Alfresco Share Provides custom CSS plus (optional) images Allow selection of theme in Admin Console Deploy as an AMP (not a JAR)
- 14. Custom Theme Walk-Through 14 Changing the title bar colour/background Changing the site navigation bar Changing the hyperlink colour Changing the default logos YUI Controls YUI Tree controls YUI Buttons YUI Menus
- 15. 15
- 16. Code Walk Though 16
- 17. Packaging Extensions 17 Always package simple extensions in JAR format where possible Share Extras uses a standard source structure and Ant built script to acheivethis Some extensions (e.g. Custom themes) cannot be packaged as JARs - use AMP files instead Use a build process to do the hard work Create directory structures Create JAR/AMP files JavaScript compression See example in Share Extras projects
- 18. Tools 18 Use whatever tools you like, BUT Separate your source from your deployment Do not develop inside the webapp! Use a source code management tool Use a standard project structure Build tools (e.g. Ant) can help you JavaScript/FreeMarker code completion/syntax checking will save you a LOT of time Eclipse can do all of this Test across different browsers Firefox/Firebug and Google Chrome are best for debugging
- 19. General Points 19 Share is a powerful platform But modularity leads to a lot of files You may want to copy/paste from similar areas of functionality Don’t forget to document!
- 20. More Information 20 Share Extras project - http://code.google.com/p/share-extras/ Advanced Share Customisation Using Forms in Share
Notes de l'éditeur
- Applicable for any Share JS module, not just dashletsObjects created are namespaced within Alfresco.dashlet scopeVariables and functions are scoped by enclosing within functions (variable scope in JavaScript is function-wide)Aliases declared at start of module – keeps code shorterConstructor sets up the object – unique object ID is passed inoptions property used to set parameters for a particular instance of the object (as we could have more than one on a page)onReady() function called by YUI when the parent element is available for scripting, usually used to add further listeners to particular Dom elements and set up YUI widgetsOther functions may define additional behaviour and be called by onReady()Other functions will define event handlers that are attached to objects
- Client-side JS source/web/components/dashlets/site-tags.jsAlias Dom and Event YUI classes which are used heavily within the moduleAlias html() and combine() Alfresco util functionsDeclare preference key values used as constantsConstructor is standardOptions holds max number of tags to show, plus parameters for sizing each tag displayed (use fixed font-sizes for the least-occurring and most-occurring tags, with a linear algorithm for tags in-between)Container <div> Dom element that is frequently used is cached as tagsContaineronReady() initialisestagsContainer, Adds event listeners to form controls, initialises YUI widgets and fires off loading of tags via XHRonRefresh() provides event handler when a user clicks the refresh buttonrefreshTags() does the work of refreshing the tags, loading data via Alfresco.util.Ajax.jsonGet() onTagsSuccess() and onTagsFailed() provide the async call-backs for the JSON callgetUriTemplate() is a convenience method to return the URL that a tag should be hyperlinked to in the UIupdateFilterUI() sets the active filter highlight in the UIsetActiveFilter() persists the new active filter (using prefs as well as local option val), calls updateFilterUI() and refreshes the list of tagsonAllCheckedChanged(), onFilterClicked() and onFilterChanged() provides event handlers for when users change the tag filters in the UIWeb script config/alfresco/site-webscripts/org/alfresco/components/dashlets/site-tags.getThe Tag Cloud dashlet. Renders a container for the tag cloud and instantiates the JS object to start doing the real work.
- Client-side JS source/web/components/dashlets/twitter-user-timeline.jsAlias Dom and Event YUI classes which are used heavily within the moduleAlias html() and combine() Alfresco util functionsConstructor is standardOptions holds the currently-configured Twitter username, plus a default username if the user clears the current configurationContainer <div> Dom element that contains the Twitter stream, plus the dashlet title Dom element are cached as timeline and title.onReady() initialisestimeline and title, calls refreshTimeline() and adds event listener to the ‘Configure’ link in the UIonRefresh() provides event handler when a user clicks the refresh buttonrefreshTimeline() does the work of refreshing the twitter stream, making an AJAX request to the second ‘data’ web script via Alfresco.util.Ajax.request() onTimelineLoaded() and onTimelineLoadFailed () provide the async call-backs for the JSON callonConfigClick() does the work of attaching the config dialogue to the ‘Configure’ link. All behaviour of the dialogue is programmed in here declaratively, including loading the config dialogue web script and persisting the configuration when the ‘OK’ button is clicked.Web script config/alfresco/site-webscripts/org/alfresco/components/dashlets/twitter-user-timeline.getThe Twitter User dashlet. Really just acts as a container for the Twitter stream and instantiates the JS object.Web script config/alfresco/site-webscripts/org/alfresco/components/dashlets/twitter-user-timeline-list.getReturns the actual user timeline of a specific Twitter user in HTML formatWeb script config/alfresco/site-webscripts/org/alfresco/modules/dashlets/config-twitter-user-timeline.getRenders the config dialogue UI for configuring the Twitter User dashlet
- Directory source/web/themes/redThemeAll your theme assets live here – CSS and imagesThese can be copied over from existing themes (But if copying from the default theme several files and directories will be missing from the ‘yui’ directory. Other themes have these already.)Style sheet source/web/themes/redTheme/presentation.cssMost styles defined by the theme are in here. Note many style classes are defined within a container .yui-skin-redTheme. If you create your own theme based on another, you will need to do a find-and-replace to change this class name throughout the file, e.g. to .yui-skin-myCustomTheme.Line 881 – set background of main title bar.theme-bg-color-1,div.theme-bg-color-1{ background-color: #ef1216;}Line 456 – background of buttons displayed on main title bar.yui-skin-redTheme .title-button .yui-button{ background: transparent url(images/title-button-bg.png) repeat-x 0 0;}Line 311 – set colour/background of site navigation barPick a lighter colour than the main navigation bar - Around 50% opacity of main colour works well.site-navigation{ background-color: #f7898b; /*background-image: url(../../components/images/navigation-bg.png);*/ border-bottom: 1px solid #f34d50; border-top: 1px solid #b50e11;color: white;}Colour of navigation links set following thisLine 109 – Dashlet title bars background.dashlet .title{ background-color: #d7e0e7; background-image: url(images/dashlet-title-bg.png); background-repeat: repeat-x; border-bottom: 1px dashed #bababa;color: #262d35;}Stylesheet source/web/themes/redTheme/yui/skin.cssOther YUI-specific style definitions. Again, developers must perform a find-and-replace based on the theme name in this file, if copied from elsewhere.Images in source/web/themes/redTheme/imagestitle-bg.png – Background for the title bar (not used in red theme)title-button-bg.png – buttons appearing on the title bar – 1x48 gradient imagedashlet-title-bg.png – Dashlet title bar background (not customised)app-logo.png – Application logo used in the main application (not customised)logo.png – Logo used on login page (not customised)loginbg.png – Background of login page (not customised)