Aikauのカスタマイズ方法 - aegif Labo Blog Alfresco
こんにちは、今回はAikauのカスタマイズについてご紹介します。
Aikauが何か気になる方はAikauの紹介を参考にしていただけると幸いです。
カスタムAikauウィジェットを使うための設定
- ${sdkのshareパス}/src/main/resources/alfresco/web-extension/site-data/extensionsフォルダ直下に以下の内容でxmlファイル（ファイル名に規定なし）を作成する
<extension>
<modules>
<module>
<id>Custom Aikau</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="custom-aikau" location="resources/custom-aikau"/>
</packages>
</dojo-pages>
</web-framework>
</config>
</configurations>
</module>
</modules>
</extension>
- 以下のパスに合わせてフォルダを作る
${sdkのshareパス}/src/main/resources/META-INF/resources/custom-aikau
ウィジェットのカスタマイズの方法
ウィジェットのカスタマイズには二つの方法があります。
一つ目はウィジェットをそのままコピーして少し修正する方法で、二つ目は該当ウィジェットを継承して新しいウィジェットを作る方法です。
ウィジェットをコピーして修正する方法の例（LeftAndRight）
alfresco/layout/LeftAndRight.js
define(["dojo/_base/declare",
"alfresco/core/ProcessWidgets",
"alfresco/accessibility/_SemanticWrapperMixin",
"dojo/text!./templates/LeftAndRight.html",
"dojo/dom-construct",
"dojo/dom-class",
"dojo/_base/array"],
function(declare, ProcessWidgets, _SemanticWrapperMixin, template, domConstruct, domClass, array) {
return declare([ProcessWidgets, _SemanticWrapperMixin], {
cssRequirements: [{cssFile:"./css/LeftAndRight.css"},
{cssFile:"./css/HorizontalWidgets.css"}],
templateString: template,
widgetsRight: null,
widgetsLeft: null,
postCreate: function alfresco_layout_LeftAndRight__postCreate() {
domClass.add(this.domNode, this.additionalCssClasses || "");
if (!this.widgetsRight &&
!this.widgetsLeft &&
this.widgets)
{
this.widgetsRight = array.filter(this.widgets, function(widget) {
return widget.align === "right";
});
this.widgetsLeft = array.filter(this.widgets, function(widget) {
return widget.align !== "right";
});
}
this.widgetsRight && this.widgetsRight.reverse();
this.widgetsRight && this.processWidgets(this.widgetsRight, this.rightWidgets, "RIGHT");
this.widgetsLeft && this.processWidgets(this.widgetsLeft, this.leftWidgets, "LEFT");
if(this.semanticWrapper)
{
this.generateSemanticWrapper(this.parentNode, this.containerNode);
}
}
});
});
Aikauのウィジェットでよく登場するメソッドpostCreateは実際のウィジェットを作るメソッドです。
今回はちゃんとカスタマイズされたか確認するためにpostCreateの中にconsole.log("this is a customized widget")を書き足します。
custom-aikau/LeftAndRight.js
define(["dojo/_base/declare",
"alfresco/core/ProcessWidgets",
"alfresco/accessibility/_SemanticWrapperMixin",
"dojo/text!./templates/LeftAndRight.html",
"dojo/dom-construct",
"dojo/dom-class",
"dojo/_base/array"],
function(declare, ProcessWidgets, _SemanticWrapperMixin, template, domConstruct, domClass, array) {
return declare([ProcessWidgets, _SemanticWrapperMixin], {
cssRequirements: [{cssFile:"./css/LeftAndRight.css"},
{cssFile:"./css/HorizontalWidgets.css"}],
templateString: template,
widgetsRight: null,
widgetsLeft: null,
postCreate: function alfresco_layout_LeftAndRight__postCreate() {
domClass.add(this.domNode, this.additionalCssClasses || "");
if (!this.widgetsRight &&
!this.widgetsLeft &&
this.widgets)
{
this.widgetsRight = array.filter(this.widgets, function(widget) {
return widget.align === "right";
});
this.widgetsLeft = array.filter(this.widgets, function(widget) {
return widget.align !== "right";
});
}
this.widgetsRight && this.widgetsRight.reverse();
this.widgetsRight && this.processWidgets(this.widgetsRight, this.rightWidgets, "RIGHT");
this.widgetsLeft && this.processWidgets(this.widgetsLeft, this.leftWidgets, "LEFT");
if(this.semanticWrapper)
{
this.generateSemanticWrapper(this.parentNode, this.containerNode);
}
console.log("this is a customized widget");
}
});
});
custom-aikauフォルダの中にLeftAndRight.jsを作成して上の内容をコピーしておきます。
次にLeftAndRight.htmlの中身を修正します。
alfresco/layout/templates/LeftAndRight.html
<div class="alfresco-layout-LeftAndRight" data-dojo-attach-point="parentNode">
<div data-dojo-attach-point="containerNode" class="">
<div class="alfresco-layout-LeftAndRight__left" data-dojo-attach-point="leftWidgets"></div>
<div class="alfresco-layout-LeftAndRight__right" data-dojo-attach-point="rightWidgets"></div>
<div class="clear-both"></div>
</div>
</div>
今回は本来の書式に影響が出ないようにdata-dojo-attach-pointがparentNodeに指定されているdivの最後にこれはカスタマイズされたウィジェットですというテキストを表示するように修正します。
custom-aikau/templates/LeftAndRight.html
<div class="alfresco-layout-LeftAndRight" data-dojo-attach-point="parentNode">
<div data-dojo-attach-point="containerNode" class="">
<div class="alfresco-layout-LeftAndRight__left" data-dojo-attach-point="leftWidgets"></div>
<div class="alfresco-layout-LeftAndRight__right" data-dojo-attach-point="rightWidgets"></div>
<div class="clear-both"></div>
</div>
<div class="customized-left-and-right-div">これはカスタマイズされたウィジェットです</div>
</div>
ここでhtmlのパスは上でcustom-aikau/LeftAndRight.jsで指定したhtmlの相対パスと同じところになります。
次にはcssファイルを修正します。
alfresco/layout/css/LeftAndRight.css
.alfresco-layout-LeftAndRight {
width: 100%;
&__left {
float: left;
> * {
float: left;
}
}
&__right {
float: right;
> * {
float: right;
}
}
}
htmlで追加したdivのclassにcustomized-left-and-right-divを指定したのでcssファイルに追加して動作を確認します。
custom-aikau/css/LeftAndRight.css
.alfresco-layout-LeftAndRight {
width: 100%;
&__left {
float: left;
> * {
float: left;
}
}
&__right {
float: right;
> * {
float: right;
}
}
}
.customized-left-and-right-div {
color: blue;
}
cssファイルもhtmlと同じくcustom-aikau/LeftAndRight.jsで指定したパスにおきます。
もし多言語化が必要な場合はcssと似たような感じでi18nRequirementsを宣言して追加することができます。
/**
* An array of the i18n files to use with this widget.
*
* @instance
* @type {object[]}
* @default [{i18nFile: "./i18n/AlfSitesMenu.properties"}]
*/
i18nRequirements: [{i18nFile: "./i18n/AlfSitesMenu.properties"}],
実際にページに挿入する方法
faceted-searchなどaikauで作成されているページに関しては書き換え対象のウィジェットのnameにカスタマイズしたウィジェット名を入れることで適用できる。
例えば以下のような用例を考えられる。
...,
{
id: "HEADER_TITLE_BAR",
name: "alfresco/layout/LeftAndRight",
className: "share-header-title",
config:
{
semanticWrapper: "header",
widgets:
[
{
id: "HEADER_LOGO",
name: "alfresco/logo/Logo",
align: "left",
config:
{
logoClasses: "alfresco-logo-only",
currentTheme: theme,
logoSrc: getHeaderLogoUrl()
}
},
{
id: "HEADER_TITLE",
name: "alfresco/header/Title",
align: "left",
config: {
targetUrl: page.url.templateArgs.site != null ? "site/" + page.url.templateArgs.site : null,
label: (pageTitle != null) ? pageTitle : getPageTitle(),
setBrowserTitle: (pageTitle != null),
maxWidth: "500px"
}
},
{
id: "HEADER_NAVIGATION_MENU_BAR",
name: "alfresco/header/AlfMenuBar",
align: "right",
className: "navigation-menu",
config: {
widgets: getSubNavigationWidgets()
}
},
{
id: "HEADER_TITLE_MENU",
name: "alfresco/menus/AlfMenuBar",
align: "right",
className: "title-menu",
config: {
widgets: getTitleBarModel()
}
}
]
}
}
,...
この場合だとname: "alfresco/layout/LeftAndRight"のところをname: "custom-aikau/LeftAndRight"に書き換えるだけで上で修正したLeftAndRightウィジェットが呼ばれるようになり、元のウィジェットの下に青色でこれはカスタマイズされたウィジェットですが表示され、コンソールのログにはthis is a customized widgetが残っていることが確認できます。
※HEADER_TITLE_BARのLeftAndRightにカスタマイズ入れる前の画像
※HEADER_TITLE_BARのLeftAndRightにカスタマイズ入れた後の画像
ウィジェットを継承して新しいウィジェットを作る方法
今回はAlfShareFooterを継承したCustomAlfShareFooterを作ってみる。
custom-aikau/CustomAlfShareFooter.js
define(["dojo/_base/declare",
"alfresco/footer/AlfShareFooter",
"dojo/text!./templates/AlfShareFooter.html"],
function(declare, AlfShareFooter, template) {
return declare([AlfShareFooter], {
/**
* An array of the CSS files to use with this widget.
*
* @instance cssRequirements {Array}
* @type {object[]}
* @default [{cssFile:"./css/AlfShareFooter.css"},{cssFile:"/modules/about-share.css"}]
*/
cssRequirements: [{cssFile:"./css/AlfShareFooter.css"},
{cssFile:"/modules/about-share.css"}],
/**
* The HTML template to use for the widget.
* @instance
* @type {String}
*/
templateString: template,
});
});
AlfShareFooter.htmlにはこのウィジェットはAlfShareFooterを継承しましたという文言を追加する。
custom-aikau.templates/AlfShareFooter.html
<div class="alfresco-footer-AlfShareFooter" data-dojo-attach-point="footerParentNode">
<span class="copyright" data-dojo-attach-point="footerContainerNode">
<a href="#" onclick="Alfresco.module.getAboutShareInstance().show(); return false;">
<img src="${logoImageSrc}" alt="${altText}" border="0"/>
</a>
<span class="licenseHolder" data-dojo-attach-point="licenseHolderNode">${licensedToLabel} ${licenseLabel}<br></span>
<span>${copyrightLabel}</span>
<span class="extended-footer">このウィジェットはAlfShareFooterを継承しました</span>
</span>
</div>
AlfShareFooter.cssにはhtmlで追加したspanが緑色で表示されるように追加する。
custom-aikau/css/AlfShareFooter.css
/* Footer Component */
.footer
{
background-color: #fafafa;
border-top: 1px solid #ccc;
text-align: center;
padding: 0;
}
.footer .links
{
padding: 0 2em;
}
.footer .copyright
{
font-size: 9px;
}
.footer-ent .copyright
{
margin: 0 auto;
width: 450px;
display: block;
}
.footer-com .copyright
{
display: inline-block;
line-height: 22px;
padding: 2px;
}
.footer-ent .copyright
{
padding: 13px 1.5em;
}
.footer-ent .licenseHolder
{
}
.footer-ent .copyright a
{
float: left;
margin-top: -2px;
}
.footer-com .copyright img
{
padding-right: 1em;
vertical-align: baseline;
}
.footer-ent .copyright img
{
padding-right: 1em;
}
.footer-com .copyright span
{
display: inline-block;
}
.footer-ent .copyright span
{
position: relative;
}
.extended-footer {
color: green
}
多言語化に対してはウィジェット修正と同じくi18nRequirementsを追加することで実装できる。
※CustomAlfShareFooterにカスタマイズを入れる前の画像
※CustomAlfShareFooterにカスタマイズを入れた後の画像
結論
AikauはHeaderや検索ページなどAlfresco Shareの各所で使われており、カスタマイズの方法を知っておくとAlfrescoの開発に役立つと思います。
以上、Aikauのカスタマイズ方法でした。
