Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Share UIカスタマイズ Widget編
Semelhante a Share UIカスタマイズ Widget編 (20)
Share UIカスタマイズ Widget編
- 1. 第41回 Alfresco勉強会 Share UIカスタマイズ Widget 編 2017年10月25日 Moritaka Soma
- 3. 本日の発表内容 本日の発表内容: これからAlfresco ShareのUIカスタマイズを 行おうと考えている方の参考となりそうな 内容をご紹介 ※前半の説明はAlfresco勉強会39回 「Share UIカスタマイズの第一歩」の内容と同じです • Surf Extension Modulesの紹介 • UI挙動の変更（不具合修正）
- 4. 環境 環境: Alfresco SDK 3.0 (All-In-One Project) • Alfresco Platform 5.2.e • Alfresco Share 5.2.d ＊共にAlfresco SDK 3.0のデフォルトで 選択されているバージョンです Alfresco SDKの使い方については割愛します…
- 5. 環境 現状の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> と修正することで 対処可能です。
- 6. 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で、要素の追加・更新・削除（隠蔽） カスタマイズを行う上でのメインツール
- 7. Surf Extension Modules Surf Extension Modules： RuntimeにModuleデプロイの有効/無効を切り替える ことが可能です。 http://<host>:<port>/share/page/modules/deploy デバッグやテストの際、便利です。
- 8. 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>
- 9. 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ファイルを追加して実行することで、 カスタマイズを行う定義となります。 他にも様々な定義を行うことができますが、今回は割愛します…
- 10. Share Headerのカスタマイズ Share Header： 比較的カスタマイズの要望が多い部分です。 • 不要なメニュー項目を隠したい • ワークフローは使わないのでタスク項目を隠したい • SSOを使うので明示的にログアウトさせたくない • よく使う項目を追加したい • ごみ箱へ1クリックで移動したい • 検索フィールドのメッセージが中途半端なので修正したい etc…
- 11. Share Headerのカスタマイズ カスタマイズ方法： Share HeaderはAikauのWidgetとして実装されているため、 Share HeaderのWebScriptが作成するオリジナルのWidget モデルを、Surf Extension Modulesを利用して変更することで カスタマイズを行います。 Share Header WebScript Original Widget モデル Surf Extension Module 作成 変更 Customized Widget モデル
- 12. Share Headerのカスタマイズ 対象Widgetの調査： ShareでClient Debug Modeを有効＊にし、Debug Menuの 「Toggle Developer View」で、対象項目を調べるのが簡単です。 アイコンをクリックすることで、WidgetのIDと取得のための Snippetを確認できます。 ＊SDKから起動した場合Client Debug Modeは有効化されています。
- 13. 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>
- 14. Share Headerのカスタマイズ • 項目の消去 • 項目の追加 • (オプションで設定可能な）挙動の変更 上記内容については39回で発表していますので 以下の資料をご参照下さい。 弊社 Labo Blog: 第39回Alfresco勉強会 Share UIカスタマイズの第一歩
- 15. 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の実体であることがわかる。
- 16. Share Headerのカスタマイズ 検索フィールドの不具合(?)修正： Share Headerの検索フィールドは日本語IMEと相性が悪く 日本語変換の確定のEnterキーを押すと、そのまま検索が 実行されてしまう*。 * Firefox/IE11/Safariで発生、Chromeでは発生しない 参考: 弊社Blog Alfresco Community 5.0の検索BOXとIMEの相性が悪い
- 17. 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 press case 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;
- 18. Share Headerのカスタマイズ 検索フィールドの不具合(?)修正： 前述の弊社BlogでのSearchBox.jsを書き換える対応方法は Alfresco Share 5.2.d では利用できない。 • SearchBox.jsがjarファイル中に配置されているため、 直接書き換え不可 • SDKを利用してオリジナルのSearchBox.jsを置き換えるのは 簡単にはできない（そもそも可能かどうか不明）
- 19. Share Headerのカスタマイズ 検索フィールドの不具合(?)修正： 修正方針： 検索実行のトリガーとしてKeyDownイベントを利用するように 修正を行ったSearchBox Widgetを作成し、こちらを利用する ように置き換える。 Share Header WebScript Original Widget モデル Surf Extension Module 作成 変更 Customized Widget モデル Original SearchBox Widget Customized SearchBox Widget 参照 参照 継承
- 20. Share Headerのカスタマイズ 検索フィールドの不具合(?)修正： SearchBox Widgetの修正 ： 検索実行のトリガーとしてKeyDownイベントを利用するように 修正を行ったSearchBox Widgetを作成。 オリジナルのSearchBoxを継承し、修正の必要なメソッドを 上書きする。
- 21. 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の指定は相対パスで行わ れているため、オリジナルの ファイルと同じパスの下に配置
- 22. Share Headerのカスタマイズ 検索フィールドの不具合(?)修正： オリジナルのSearchBoxを継承し、修正の必要なメソッドを上書きする。 CustomizedSearchBox.js#onSearchBoxKeyDown: /** * 日本語変換時のEnterキー入力で検索が行われないように修正 * override alfresco/header/SearchBox#onSearchBoxKeyDown */ onSearchBoxKeyDown: function alfresco_header_SearchBox__onSearchBoxKeyDown(evt) { // jshint maxcomplexity:false var 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; } }, 追加
- 23. 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 press case 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; <オリジナルと同じため省略> } } 削除
- 24. 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定義部
- 25. 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 Module widgetUtils.findObject(model.jsonModel, "id", "HEADER_SEARCH").name = "alfresco/customize/CustomizedSearchBox”;
- 26. デモ
- 27. ご質問など
- 28. ありがとうございました。