Aikau pages are built up of widgets. There are two types of widgets, presentation widgets and service widgets. These JavaScript widgets are Dojo classes. A widget can have its own CSS, HTML, and Properties.
Architecture Information:Share Architecture
Aikau menus, pages, and dashlets are all using Aikau widgets to build their user interface. An Aikau Widget contains both JavaScript, HTML, CSS, and resource properties to form a self contained component. Aikau widgets are implemented as Dojo classes and uses classes from the Dijit widget library. Alfresco Share comes with a lot of Aikau widgets out of the box such as for example:
For a full list of widgets, and documentation, seeAikau Widget Library. If there is no widget here that fits your needs then you implement your own custom Aikau widget. Let’s take an example of a simple page with a custom HelloWorld widget, the page JSON looks like this:
model.jsonModel = { widgets: [ { id: "SET_PAGE_TITLE", name: "alfresco/header/SetTitle", config: { title: "Hello World" } }, { id: "DEMO_SIMPLE_MSG", name: "example/widgets/HelloWorldTextWidget" } ]};Here we got a custom widget calledHelloWorldTextWidget in the Dojo AMD packageexmaple/widgets. To implement this widget we need to create a JavaScript file calledHelloWorldTextWidget.js and put it in the/js/example/widgets directory. The implementation of the widget looks like this:
define(["dojo/_base/declare", "dijit/_WidgetBase", "alfresco/core/Core", "dijit/_TemplatedMixin", "dojo/text!./HelloWorldTextWidget.html" ], function(declare, _Widget, Core, _Templated, template) { return declare([_Widget, Core, _Templated], { templateString: template, i18nRequirements: [ {i18nFile: "./HelloWorldTextWidget.properties"} ], cssRequirements: [{cssFile:"./HelloWorldTextWidget.css"}], buildRendering: function example_widgets_HelloWorldTextWidget__buildRendering() { this.helloWorldMsg = this.message('hello.world'); this.inherited(arguments); } });});This widget is based on an HTML template defined in a file calledHelloWorldTextWidget.html, this file should be placed in the same place as the Widget class:
<div>${helloWorldMsg}</div>The widget also uses a property calledhello.world that needs to be available in a resource file calledHelloWorldTextWidget.properties, it also needs to be located in the same place as the Widget class:
hello.world=This is just a test page. Hello World! (Aikau)Finally the widget template uses a CSS style calledhelloWorldMsgStyle that needs to be available in a resource file calledHelloWorldTextWidget.css, located in the same place as the Widget class:
.helloWorldMsgStyle { border: 1px #000000 solid; padding: 1em; width: 100px; background-color:lightgrey;}Before this widget can be loaded by the Dojo AMD loader the package that it is located in must be registered. This is done via a Surf Extension Module as follows:
<extension> <modules> <module> <id>Example Aikau Widgets</id> <version>1.0</version> <auto-deploy>true</auto-deploy> <configurations> <config evaluator="string-compare" condition="WebFramework" replace="false"> <web-framework> <dojo-pages> <packages> <package name="example" location="js/example"/> </packages> </dojo-pages> </web-framework> </config> </configurations> </module> </modules></extension>tomcat/shared/classes/alfresco/web-extension/site-webscripts (Untouched by re-deployments and upgrades)Best practice is to put the file in a directory that explains what the file is for, such as for example:
aio/share-jar/src/main/resources/alfresco/web-extension/site-data/extensions - Extension modules with Dojo package definitions (i.e. the JavaScript packages where the Widgets live)aio/share-jar/src/main/resources/META-INF/resources/share-jar/js/<dojo package> - web resources, such as Aikau Widgets