Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Let's play with adf 3.0

273 vues

Publié le

In this talk, I'll show you how you can build Alfresco ADF applications using the new version 3.0.0. The new ADF versions include a number of new features and some breaking changes with the past that will make your life easier, I'll show you how to take advantage of it and embrace the change.

Publié dans : Logiciels
  • Soyez le premier à commenter

Let's play with adf 3.0

  1. 1. Let's Play with ADF 3.0 Eugenio Romano
  2. 2. Learn. Connect. Collaborate. Eugenio Romano Architect & Team Lead at Alfresco
  3. 3. Learn. Connect. Collaborate. SOME NEW FEATURES New JS-API SSO Extensibility ACTIVITI CE/EE Components Tree View Component Search enhancements Update Angular 7 Remove deprecated code
  4. 4. Tomorrow Tinto 10:45-11:30
  5. 5. ADF PIPELINE
  6. 6. Learn. Connect. Collaborate. • Code Review • Build Size check • Code Coverage • Security Vulnerabilities
  7. 7. Learn. Connect. Collaborate. • Lint checks: TS, SCSS, JS • Quality assurance – Over 700 E2E Test – Around 3500 Unit test 85% code coverage • Docker Image • Build and deploy packages on NPM
  8. 8. @ALFRESCO/JS-API
  9. 9. Learn. Connect. Collaborate. • Performance • Tree shakable • Smaller output Size • Web components future • SSO Full support – ACS 6.1.0 / APS 1.9.0 / ACTIVITI 7 CE EE • Bug Fixing – Refresh token with Grant password – WithCredential option for Kerberos 3.0.0
  10. 10. Learn. Connect. Collaborate. • Packages name deprecated: – alfresco-js-api – alfresco-js-api-node • Node and Browser are now both in: – @alfresco/js-api • Project repository still the same : https://github.com/Alfresco/alfresco-js-api 3.0.0
  11. 11. Learn. Connect. Collaborate. • Version 3.0.0 has been completely rewritten in Typescript • Final Output still JavaScript – Types enhance code quality and readability – Simple to maintain – Simple to generate new code – TypeScript provides a number of features that are planned in future version of JavaScript now – Intellisense in your IDE is now working much better 3.0.0
  12. 12. JS API 2 VS JS API 3 JS-API 2 JS-API 3 import { AlfrescoApi, PeopleApi } from '@alfresco/js-api'; let alfrescoApi = new AlfrescoApi(config); let peopleApiService = new PeopleApi(this.alfrescoApi); peopleApiService.createPerson(); import { AlfrescoApi } from 'alfresco-js-api'; import * as alfrescoApi from 'alfresco-js-api'; let alfrescoApi = <AlfrescoApi> new alfrescoApi(config); alfrescoApi.core.peopleApi.createPerson();
  13. 13. JS API 2 Compatibility Layer import { AlfrescoApiCompatibility } from '@alfresco/js-api'; let alfrescoApi = new AlfrescoApiCompatibility(this.config); alfrescoApi.core.peopleApi.createPerson(); alfrescoApi.activiti.taskApi.listTasks(); You can still use the old syntax wit the JS-API using the compatibility layer: Use it only until you don’t complete the update to the new syntax we could may decide to not support it in the future
  14. 14. Performance improvement JS-API 2 JS-API 3
  15. 15. Learn. Connect. Collaborate. WEB COMPONENTS
  16. 16. ACTIVITI 7 CE & EE
  17. 17. Tomorrow Tinto 10:45-11:30 Tomorrow Tinto 16:00-16:30
  18. 18. Components Description App list Shows all deployed cloud application instances. Group cloud component Searches Groups. Edit process filter Shows Process Filter Details. Process filters Lists all available process filters and allows to select a filter. Process list Renders a list containing all the process instances matched by the parameters specified. Start process Starts a process. People cloud component Allows one or more users to be selected (with auto- suggestion) based on the input parameters. Start task Creates/starts a new task for the specified app. Edit task filter Edits Task Filter Details. Task filters Shows all available filters. Task header Shows all the information related to a task. Task list Renders a list containing all the tasks matched by the parameters specified.
  19. 19. Learn. Connect. Collaborate. import { ProcessServicesCloudModule } from '@alfresco/adf-process-services-cloud'; @NgModule({ imports: [ …… ProcessServicesCloudModule ……. ], }) export class AppModule {} npm install --save @alfresco/adf-process-services-cloud Code Example – Import Process Activiti module
  20. 20. Learn. Connect. Collaborate. Code Example – List Your Apps <adf-cloud-app-list (appClick)="onAppClick($event)"> </adf-cloud-app-list> onAppClick(app) { this.router.navigate([`/cloud/${app.name}`]); }
  21. 21. Learn. Connect. Collaborate. Code Example – Start Process <adf-cloud-start-process [appName]="applicationName" (success)="onStartProcessSuccess()"> </adf-cloud-start-process> onStartProcessSuccess() { this.router.navigate([`/cloud/${this.applicationName}/processes`]); }
  22. 22. Learn. Connect. Collaborate. Code Example – List Process <adf-cloud-process-list [applicationName]="applicationName" (rowClick)="onRowClick($event)" #processCloud> </adf-cloud-process-list> <adf-pagination [target]="processCloud" > </adf-pagination>
  23. 23. Learn. Connect. Collaborate. Code Example – List Process <adf-cloud-process-filters [appName]=" applicationName" [filterParam]="currentProcessFilter$ | async" (filterClick)="onProcessFilterSelected($event)"> </adf-cloud-process-filters> <adf-cloud-process-list [applicationName]="applicationName" (rowClick)="onRowClick($event)" #processCloud> </adf-cloud-process-list> <adf-pagination [target]="processCloud" > </adf-pagination>
  24. 24. Learn. Connect. Collaborate. Code Example – List Process <adf-cloud-edit-process-filter [appName]="applicationName" [id]="filterId" (filterChange)="onFilterChange($event)" (action)="onProcessFilterAction($event)"> </adf-cloud-edit-process-filter>
  25. 25. EXTENSIBILITY
  26. 26. Tomorrow Moorfoot 14:15-14:45
  27. 27. Learn. Connect. Collaborate. • @alfresco/adf-extensions • You can create plugins that change, toggle, or extend : – Navigation sidebar links and groups – Context Menu – Sidebar (aka Info Drawer) – Toolbar entries (buttons, menu buttons ,separators) – Viewer actions – Content metadata – Custom icons – Extensions can also: – Overwrite or disable extension points of the main application or other plugins – Change rules, actions or any visual element – Register new application routes based on empty pages or layouts – Register new rule evaluators, components, guards
  28. 28. Learn. Connect. Collaborate. • alfresco/adf-extensions • What do we have in 3.0.0 – Icons – Viewer – Columns template document list • What we are going to have in 3.1.0 – All the others
  29. 29. Learn. Connect. Collaborate. @alfresco/adf-extensions ADF Application Plugins
  30. 30. Learn. Connect. Collaborate. @alfresco/adf-extensions ADF Application Plugins
  31. 31. Code Example – Import extension module import { ExtensionsModule } from '@alfresco/adf-extensions'; @NgModule({ imports: [ ..... ExtensionsModule.forRoot(), .... ] }) export class AppModule {} npm install --save @alfresco/adf-extensions
  32. 32. Code Example – Define extension JSON your-app/src/assets/app.extensions.json { "$schema": "./app-extension.schema.json", "$references": [ "plugin1.json", "plugin2.json" ] } • File plugins list used in your app: Plugin List installed
  33. 33. Learn. Connect. Collaborate. @alfresco/adf-extensions ADF Application Plugins
  34. 34. Code Example – Plugin registration <ngx-monaco-editor id="adf-monaco-file-editor" class="adf-monaco-file-editor" [options]="editorOptions" [(ngModel)]="code" (onInit)="onInit($event)"> </ngx-monaco-editor>
  35. 35. Code Example – Plugin registration @Component({ selector: 'adf-monaco-view', templateUrl: './monaco-view.component.html', styleUrls: ['./monaco-view.component.scss'], encapsulation: ViewEncapsulation.None }) export class MonacoViewComponent implements OnInit { constructor(private apiService: AlfrescoApiService) {} ngOnInit() { this.apiService.nodesApi.getFileContent(this.node.id).then( fileContent => { this.code = fileContent; }, err => console.log(err) ); } } @Input() url: string; @Input() node: Node;
  36. 36. Code Example – Plugin registration import … @NgModule({ imports: [ CoreModule.forChild(), MonacoEditorModule.forRoot() ], declarations: MonacoViewComponent, exports: MonacoViewComponent, entryComponents: MonacoViewComponent }) export class AdfMonacoModule { constructor(extensions: ExtensionService) { extensions.setComponents({ 'monaco-extension.main.component': MonacoViewComponent }); } }
  37. 37. Code Example – Define Plugin JSON • your-app/src/assets/plugins/monaco-extension.json { "$version": "1.0.0", "$name": "monaco extension", "$description": "monaco plugin", "features": { "viewer": { "content": [ { "id": "dev.tools.viewer", "fileExtension": "js", "component": "monaco-extension.main.component" } ] } } } Define your Plugin
  38. 38. Build Plugin Distribute It (if you want it) Build Copy the plugin JSON in the distribution or use the angular cli assets copy:
  39. 39. Code Example – Assemble it 1. Install extension 2. Add the module @NgModule({ imports: [ ExtensionsModule.forRoot(), AdfMonacoModule ] }) export class AppModule {} 3. Copy extension plugin JSON in plugin folder (no need in the future) 4. START YOUR APP
  40. 40. SSO
  41. 41. Learn. Connect. Collaborate. • alfresco/adf-core • SSO Full support – ACS 6.1+ / APS 1.9+ / ACTIVITI 7EE / CE The Alfresco Identity Service will become the central component responsible for identity-related capabilities needed by other Alfresco software, such as managing users, groups, roles, profiles, and authentication. Currently it deals just with authentication.
  42. 42. SSO Configuration app.config.json "authType" : "OAUTH", "oauth2": { "host": ”http://AUTH_SERVER/auth/realms/alfresco", "clientId": "alfresco", "scope": "openid", "secret": "", "implicitFlow": true, "silentLogin": true, "redirectSilentIframeUri": http://APP_SERVER/assets/silent-refresh.html", "redirectUri": "/", "redirectUriLogout": "/logout" },
  43. 43. app.config.json "authType" : "OAUTH", "oauth2": { "host": ”http://AUTH_SERVER/auth/realms/alfresco", "clientId": "alfresco", "scope": "openid", "secret": "", "implicitFlow": true, "silentLogin": false, "redirectSilentIframeUri": http://APP_SERVER/assets/silent-refresh.html", "redirectUri": "/", "redirectUriLogout": "/logout" }, "implicitFlow": true, "silentLogin": false, OAuth 2.0 Implicit Grant Flow with Silent login
  44. 44. Learn. Connect. Collaborate. ADF Application 1 2 3 SIGN IN SSO Button User redirect to Identity Service Log In User Logged In OAuth 2.0 Implicit Grant Flow with Silent login
  45. 45. OAuth 2.0 Implicit Grant Flow with Silent login app.config.json "authType" : "OAUTH", "oauth2": { "host": ”http://AUTH_SERVER/auth/realms/alfresco", "clientId": "alfresco", "scope": "openid", "secret": "", "implicitFlow": true, "silentLogin": true, "redirectSilentIframeUri": http://APP_SERVER/assets/silent-refresh.html", "redirectUri": "/", "redirectUriLogout": "/logout" }, "implicitFlow": true, "silentLogin": true,
  46. 46. Learn. Connect. Collaborate. ADF Application OAuth 2.0 Implicit Grant Flow with Silent login 1 2 User redirect to Identity Service Log In User Logged In
  47. 47. OAuth 2.0 Password Grant app.config.json "authType" : "OAUTH", "oauth2": { "host": ”http://AUTH_SERVER/auth/realms/alfresco", "clientId": "alfresco", "scope": "openid", "secret": "", "implicitFlow": true, "redirectSilentIframeUri": http://APP_SERVER/assets/silent-refresh.html", "redirectUri": "/", "redirectUriLogout": "/logout" }, "implicitFlow": false,
  48. 48. Learn. Connect. Collaborate. ADF Application 1 3 User stay in the APP and introduce the credential in the Login component User Logged In OAuth 2.0 Password Grant 2 Credential are exchanged credential for token with the identity service
  49. 49. Code Example Implicit Flow ON Implicit Flow OFF The Login component dynamically adapt itself you need only to change the app.config.json configuration <adf-login> </adf-login>
  50. 50. CONTENT AND SEARCH
  51. 51. Search Metadata Tree view
  52. 52. Learn. Connect. Collaborate. Tree view listSearch Filters <adf-search-filter #searchFilter> </adf-search-filter> 1. Categories and widgets 2. Chip List Component 3. Facet Fields
  53. 53. Learn. Connect. Collaborate. Search Filters The Search Filter supports a number of widgets out of the box, each implemented by an ADF component:
  54. 54. Learn. Connect. Collaborate. Categories and widgets "categories": [ { "id": "queryName", "name": "Name", "enabled": true, "expanded": true, "component": { "selector": "text", "settings": { "pattern": "cm:name:'(.*?)'", "field": "cm:name", "placeholder": "Enter the name” }}}, { "id": "checkList", "name": "Check List", "enabled": true, "component": { "selector": "check-list", "settings": { "pageSize": 5, "operator": "OR", "options": [ { "name": "Folder", "value": "TYPE:'cm:folder'" }, { "name": "Document", "value": "TYPE:'cm:content'" } ] }}}, <adf-search-filter #searchFilter> </adf-search-filter>
  55. 55. Learn. Connect. Collaborate.
  56. 56. Learn. Connect. Collaborate. FacetField "search": { "facetFields": { "expanded": true, "fields": [ { "field": "content.mimetype", "mincount": 1, "label": "SEARCH.FACET_FIELDS.TYPE" }, { "field": "content.size", "mincount": 1, "label": "SEARCH.FACET_FIELDS.SIZE" }, { "field": "creator", "mincount": 1, "label": "SEARCH.FACET_FIELDS.CREATOR" }, { "field": "modifier", "mincount": 1, "label": "SEARCH.FACET_FIELDS.MODIFIER" }, { "field": "created", "mincount": 1, "label": "SEARCH.FACET_FIELDS.CREATED" } ] }, } <adf-search-filter #searchFilter> </adf-search-filter>
  57. 57. Learn. Connect. Collaborate.
  58. 58. Learn. Connect. Collaborate. Search chip list <adf-search-filter #searchFilter></adf-search-filter> <adf-search-chip-list [searchFilter]="searchFilter"></adf-search-chip-list>
  59. 59. Learn. Connect. Collaborate.
  60. 60. Learn. Connect. Collaborate. <adf-tree-view-list [nodeId]="'-my-'" (nodeClicked)="onClick($event) " (error)="onError($event)"> </adf-tree-view-list> Tree view listTree view list
  61. 61. Learn. Connect. Collaborate. USEFUL RESOURCES • ADF Documentation – https://www.alfresco.com/abn/adf/docs/ • ADF Repository – https://github.com/Alfresco/alfresco-ng2- components • JS-API – https://github.com/Alfresco/alfresco-js-api • Gitter Channel – https://gitter.im/Alfresco/alfresco-ng2- components
  62. 62. Learn. Connect. Collaborate. CONTACT ME https://twitter.com/RomanoEugenio https://github.com/eromano eugenio.romano@alfresco.com

×