第41回 Alfresco勉強会 Share UIカスタマイズ Widget 編 2017年10月25日 Moritaka Soma
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
第41回 Alfresco勉強会
Share UIカスタマイズWidget 編
2017年10月25日Moritaka Soma
自己紹介
相馬盛孝オープンソースコンサルティングチーム所属Alfrescoのカスタマイズやサポートをしています最近はVR技術に興味があります
本日の発表内容
本日の発表内容:
これからAlfresco ShareのUIカスタマイズを行おうと考えている方の参考となりそうな内容をご紹介※前半の説明はAlfresco勉強会39回「Share UIカスタマイズの第一歩」の内容と同じです
• Surf Extension Modulesの紹介• UI挙動の変更（不具合修正）
環境
環境:
Alfresco SDK 3.0 (All-In-One Project)
• Alfresco Platform 5.2.e
• Alfresco Share 5.2.d
＊共にAlfresco SDK 3.0のデフォルトで選択されているバージョンです
Alfresco SDKの使い方については割愛します…
環境
現状のAlfresco SDK 3.0 AIOの注意点:
Share Servicesが適用されているのに、「Alfresco is running without Share Services.
See your System Administrator for more details.」というメッセージが出てしまう。https://github.com/Alfresco/alfresco-sdk/issues/445
src/test/resources/share/share-config-custom.xmlの<endpoint-url>${alfresco.repo.url}/alfresco/api</endpoint-url> を<endpoint-url>${alfresco.repo.url}/api</endpoint-url> と修正することで対処可能です。
Surf Extension Modules
Surf Extension Modulesとは？：
Surf Extension Modules are the main tool
to use when adding, updating, or hiding content
in the Share User Interface (UI). ** http://docs.alfresco.com/5.2/concepts/dev-extensions-share-surf-extension-modules.html
意訳：Share UIで、要素の追加・更新・削除（隠蔽）カスタマイズを行う上でのメインツール
Surf Extension Modules
Surf Extension Modules：RuntimeにModuleデプロイの有効/無効を切り替えることが可能です。http://<host>:<port>/share/page/modules/deploy
デバッグやテストの際、便利です。
Surf Extension Modules
Alfresco SDKでは<artifactId>-share-jar/src/main/resources/alfresco/
web-extension/site-data/extensions
フォルダにモジュール定義のxmlを配置します。
例: custom-header-extension-modules.xml<extension>
<modules>
<module>
<id>Custom Share Header Menu</id>
<version>1.0</version>
<auto-deploy>true</auto-deploy>
<customizations>
<customization>
<targetPackageRoot>org.alfresco.share.header</targetPackageRoot>
<sourcePackageRoot>jp.aegif.share.header</sourcePackageRoot>
</customization>
</customizations>
</module>
</modules>
</extension>
Surf Extension Modules
モジュール定義の説明::
<customizations>
<customization>
<targetPackageRoot>org.alfresco.share.header</targetPackageRoot>
<sourcePackageRoot>jp.aegif.share.header</sourcePackageRoot>
</customization>
</customizations>
:
この例では、Alfresco ShareのWEB-INF/classes/alfresco/site-webscripts/org/alfresco/share/header/
以下に配置される、WebScriptのjavascriptに対して、Alfresco SDK上で<artifactId>-share-jar/src/main/resources/alfresco/web-extension/
site-webscripts/jp/aegif/share/header/
以下の、同名のjavascriptファイルを追加して実行することで、カスタマイズを行う定義となります。
他にも様々な定義を行うことができますが、今回は割愛します…
Share Headerのカスタマイズ
Share Header：
比較的カスタマイズの要望が多い部分です。
• 不要なメニュー項目を隠したい• ワークフローは使わないのでタスク項目を隠したい• SSOを使うので明示的にログアウトさせたくない
• よく使う項目を追加したい• ごみ箱へ1クリックで移動したい
• 検索フィールドのメッセージが中途半端なので修正したいetc…
Share Headerのカスタマイズ
カスタマイズ方法：
Share HeaderはAikauのWidgetとして実装されているため、Share HeaderのWebScriptが作成するオリジナルのWidget
モデルを、Surf Extension Modulesを利用して変更することでカスタマイズを行います。
Share Header
WebScript
Original
Widget
モデル
Surf Extension
Module
作成 変更
Customized
Widget
モデル
Share Headerのカスタマイズ
対象Widgetの調査：
ShareでClient Debug Modeを有効＊にし、Debug Menuの「Toggle Developer View」で、対象項目を調べるのが簡単です。アイコンをクリックすることで、WidgetのIDと取得のための
Snippetを確認できます。＊SDKから起動した場合Client Debug Modeは有効化されています。
Share Headerのカスタマイズ
Surf Extension Module作成：Share Headerのモデルを返すWebScriptのJavascriptはWEB-INF/classes/alfresco/site-webscripts/org/alfresco/share/header/share-header.get.js
なので、以下のSurf Extension Moduleを作成。
<artifactId>-share-jar/src/main/resources/alfresco/web-extension/site-data/extensions
custom-header-extension-modules.xml :
<extension>
<modules>
<module>
<id>Custom Share Header Menu</id>
<version>1.0</version>
<auto-deploy>true</auto-deploy>
<customizations>
<customization>
<targetPackageRoot>org.alfresco.share.header</targetPackageRoot>
<sourcePackageRoot>jp.aegif.share.header</sourcePackageRoot>
</customization>
</customizations>
</module>
</modules>
</extension>
Share Headerのカスタマイズ
• 項目の消去• 項目の追加• (オプションで設定可能な）挙動の変更
上記内容については39回で発表していますので以下の資料をご参照下さい。
弊社 Labo Blog:
第39回Alfresco勉強会 Share UIカスタマイズの第一歩
Share Headerのカスタマイズ
検索フィールドのカスタマイズ：
検索フィールドのWidgetを調べると
alfresco/header/SearchBoxというWidgetであることが分かる
Alfresco ShareのソースコードからこのWidgetを調べると、aikau-1.0.101.3.jar に含まれるMETA-INF/js/aikau/1.0.101.3/alfresco/header/SearchBox.js
がWidgetの実体であることがわかる。
Share Headerのカスタマイズ
検索フィールドの不具合(?)修正：
Share Headerの検索フィールドは日本語IMEと相性が悪く日本語変換の確定のEnterキーを押すと、そのまま検索が実行されてしまう*。* Firefox/IE11/Safariで発生、Chromeでは発生しない
参考: 弊社Blog Alfresco Community 5.0の検索BOXとIMEの相性が悪い
Share Headerのカスタマイズ
検索フィールドの不具合(?)修正：
Widgetの実体であるSearchBox.jsを確認すると検索フィールドの検索実行のトリガーとしてKeyUpイベントを利用していることが原因で発生。(Alfresco Community 4.2系まではKeyDownをトリガーとしていて問題は発生しなかったのに…)
SearchBox.js Line:1129-onSearchBoxKeyUp: function alfresco_header_SearchBox__onSearchBoxKeyUp(evt) {
var terms = lang.trim(this._searchTextNode.value);switch (evt.keyCode){
// Enter key presscase 13:
if (terms.length !== 0 && this.suppressRedirect !== true){
this.onSaveLastUserSearch();// ACE-1798 - always close the live search drop-down on enter keypress..this.clearResults();this.alfLog("log", "Search request for: ", terms);var url = this.generateSearchPageLink(terms);this.alfPublish("ALF_NAVIGATE_TO_PAGE", {
url: url,type: urlTypes.PAGE_RELATIVE,target: "CURRENT"
});}break;
Share Headerのカスタマイズ
検索フィールドの不具合(?)修正：
前述の弊社BlogでのSearchBox.jsを書き換える対応方法はAlfresco Share 5.2.dでは利用できない。
• SearchBox.jsがjarファイル中に配置されているため、直接書き換え不可
• SDKを利用してオリジナルのSearchBox.jsを置き換えるのは簡単にはできない（そもそも可能かどうか不明）
Share Headerのカスタマイズ
検索フィールドの不具合(?)修正：
修正方針：検索実行のトリガーとしてKeyDownイベントを利用するように修正を行ったSearchBox Widgetを作成し、こちらを利用するように置き換える。
Share Header
WebScript
Original
Widget
モデル
Surf Extension
Module
作成 変更 Customized
Widget
モデル
Original
SearchBox
Widget
Customized
SearchBox
Widget
参照 参照
継承
Share Headerのカスタマイズ
検索フィールドの不具合(?)修正：
SearchBox Widgetの修正：検索実行のトリガーとしてKeyDownイベントを利用するように修正を行ったSearchBox Widgetを作成。オリジナルのSearchBoxを継承し、修正の必要なメソッドを上書きする。
Share Headerのカスタマイズ
検索フィールドの不具合(?)修正：オリジナルのSearchBoxを継承し、修正の必要なメソッドを上書きする。/src/main/resources/META-INF/js/aikau/1.0.101.3/alfresco/customize/CustomizedSearchBox.js: /*** Customized SearchBox module* Extends module:alfresco/header/SearchBox* @module alfresco/customize/CustomizedSearchBox*/
define(["dojo/_base/declare","dojo/_base/lang","alfresco/enums/urlTypes","alfresco/header/SearchBox"],
function(declare, lang, urlTypes, SearchBox) {return declare([SearchBox], {
/*** 日本語変換時のEnterキー入力で検索が行われないように修正
* override alfresco/header/SearchBox#onSearchBoxKeyDown*/
onSearchBoxKeyDown: function alfresco_header_SearchBox__onSearchBoxKeyDown(evt) {<次ページ参照>
},
/*** 日本語変換時のEnterキー入力で検索が行われないように修正
* override alfresco/search/SearchBox#onSearchBoxKeyUp*/
onSearchBoxKeyUp: function alfresco_header_SearchBox__onSearchBoxKeyUp(evt) {<次々ページ参照>
}
});}
);
Widgetの指定は相対パスで行わ
れているため、オリジナルのファイルと同じパスの下に配置
Share Headerのカスタマイズ
検索フィールドの不具合(?)修正：オリジナルのSearchBoxを継承し、修正の必要なメソッドを上書きする。CustomizedSearchBox.js#onSearchBoxKeyDown:
/*** 日本語変換時のEnterキー入力で検索が行われないように修正
* override alfresco/header/SearchBox#onSearchBoxKeyDown*/onSearchBoxKeyDown: function alfresco_header_SearchBox__onSearchBoxKeyDown(evt) {// jshint maxcomplexity:falsevar searches;switch (evt.keyCode){
<オリジナルと同じため省略>case 13:
var terms = lang.trim(this._searchTextNode.value);if (terms.length !== 0 && this.suppressRedirect !== true){
this.onSaveLastUserSearch();// ACE-1798 - always close the live search drop-down on enter keypress..this.clearResults();this.alfLog("log", "Search request for: ", terms);var url = this.generateSearchPageLink(terms);this.alfPublish("ALF_NAVIGATE_TO_PAGE", {
url: url,type: urlTypes.PAGE_RELATIVE,target: "CURRENT"
});}break;
}},
追加
Share Headerのカスタマイズ
検索フィールドの不具合(?)修正：オリジナルのSearchBoxを継承し、修正の必要なメソッドを上書きする。CustomizedSearchBox.js#onSearchBoxKeyUp:
/*** 日本語変換時のEnterキー入力で検索が行われないように修正
* override alfresco/search/SearchBox#onSearchBoxKeyUp*/onSearchBoxKeyUp: function alfresco_header_SearchBox__onSearchBoxKeyUp(evt) {
var terms = lang.trim(this._searchTextNode.value);switch (evt.keyCode){
// Enter key presscase 13:
// Do nothing// if (terms.length !== 0 && this.suppressRedirect !== true)// {// this.onSaveLastUserSearch();// // ACE-1798 - always close the live search drop-down on enter keypress..// this.clearResults();// this.alfLog("log", "Search request for: ", terms);// var url = this.generateSearchPageLink(terms);// this.alfPublish("ALF_NAVIGATE_TO_PAGE", { // url: url,// type: urlTypes.PAGE_RELATIVE,// target: "CURRENT"// });// }
break;<オリジナルと同じため省略>
}}
削除
Share Headerのカスタマイズ
検索フィールドの不具合(?)修正：Share Headerのモデル作成部分からid: HEADER_SEARCHを定義している部分を探す。WEB-INF/classes/alfresco/site-webscripts/org/alfresco/share/imports/share-header.lib.js
Line: 1723-
var headerModel = [{id: "SHARE_HEADER",name: "alfresco/header/Header",config: {
<省略>widgets: [
{ id: "HEADER_APP_MENU_BAR”, <省略> },{ id: "HEADER_USER_MENU_BAR”,<省略> },{
id: "HEADER_SEARCH",name: "alfresco/header/SearchBox",align: "right",config: {
id: "HEADER_SEARCH_BOX",site: page.url.templateArgs.site,siteName: siteTitle,enableContextLiveSearch: true,linkToFacetedSearch: true,sitePage: ""
}}
]}
},
HEADER_SEARCH定義部
Share Headerのカスタマイズ
検索フィールドの不具合(?)修正：定義部を参考にShare Headerのモデルを修正するJavascriptにSearchBox Widgetの実装を入れ替えるする処理を追加。
/src/main/resources/alfresco/web-extension/site-webscripts/jp/aegif/share/header/share-header.get.js:
//Change SearchBox to Customized ModulewidgetUtils.findObject(model.jsonModel, "id", "HEADER_SEARCH").name
= "alfresco/customize/CustomizedSearchBox”;
デモ
ご質問など
ありがとうございました。
Related Documents
