Aikauの紹介 - aegif Labo Blog Alfresco
こんにちは、今回はAlfrescoのUIフレームワークであるAikauについてご紹介します。
Aikauとは？
AikauはDojoをベースにしたUIフレームワークです。
主にレポジトリにアクセスするためのウェブアプリを簡単に組み立てられるウィジェットのライブラリを提供することを目的としています。
そして開発とカスタマイズを単純化し、効率よく開発できるようにするためのUIフレームワークです。
特にUIを個別単位でカスタマイズできるようにし、作業の手間を減らしてくれます。
AikauがAlfresco内で使われているところ
ACS23.2系のShareでは以下の箇所でAikauのウィジェットが使われています。
- Header
- Live Search
- Filtered Search Page
- Search Management Page
- Site Management Page
- Analytics and Reporting Widgets
- Page Creator
- Document List Prototype
Aikauウィジェットの構成
Aikauのウィジェットはjs、html、cssで構成されます。
jsにはそのウィジェットの操作を記述し、htmlにはウィジェットの構造、cssにはウィジェットの外見を記述します。
Aikauウィジェットの一例
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);
}
}
});
});
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>
alfresco/layout/css/LeftAndRight.css
.alfresco-layout-LeftAndRight {
width: 100%;
&__left {
float: left;
> * {
float: left;
}
}
&__right {
float: right;
> * {
float: right;
}
}
}
上記のLeftAndRightウィジェットを見ると、ウィジェットの操作はJavaScriptで書かれ、構造はhtmlに書かれ、cssファイルで外見を記述していることがわかります。
このようにAikauのウィジェットはjs, html, cssがウィジェット別に管理されカスタマイズしやすくなっています。
Aikauウィジェットの継承
Aikauではウィジェットを継承することができます。
上で紹介したLeftAndRightウィジェットはalfresco/core/ProcessWidgetsと_SemanticWrapperMixinを継承して作られたものです。
どのウィジェットを継承してるかはdeclareの引数として与えられる配列から確認できます。
return declare([ProcessWidgets, _SemanticWrapperMixin], {...})
このような継承を行うことで、継承したウィジェットのメソッドを自由に使うことができます。
その一例がthis.processWidgetsとthis.generateSemanticWrapperです。
両メソッドともLeftAndRightで定義されていないですが、 processWidgetsはalfresco/core/ProcessWidgetsで定義されていて、 generateSemanticWrapperは_SemanticWrapperMixinで定義されているので、 LeftAndRight内で自由に使うことができます。
Aikauウィジェットの配置
share/imports/share-header.lib.js
...,
{
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を登録したパス名に指定するだけでAikauウィジェットをページ内に配置できます。configのwidgetsに子になるウィジェットを入れるとウィジェットのjsのthis.widgetsで利用することもできます。
実際の画面で上記のLeftAndRightウィジェットは以下のように表現されます。
画像を見るとconfigのwidgetsに入っているロゴとタイトルが左寄せになって詰め込まれていることがわかります。あと右には検索マネージャというナビゲーションメニューが配置されていることがわかります。
このようにLeftAndRightウィジェットは左と右にウィジェットを寄せる役割を持つウィジェットであることがわかります。
結論
Alfresco Shareの開発の場合、Aikauで作られたページが多少存在するので構造を理解しておくとカスタマイズする際に役に立つと思います。
以上、AlfrescoのUIフレームワークAikauの紹介でした。
以降Aikauウィジェットのカスタマイズ方法などについても記事を書いていきますので目を通していただけると幸いです。
