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
Eugenio Romano
Learn. Connect. Collaborate.
Eugenio Romano
Architect & Team Lead at Alfresco
Learn. Connect. Collaborate.
SOME NEW FEATURES
New JS-API
SSO
Extensibility
ACTIVITI CE/EE Components
Tree View Component
...
Tomorrow Tinto 10:45-11:30
ADF PIPELINE
Learn. Connect. Collaborate.
• Code Review
• Build Size check
• Code Coverage
• Security Vulnerabilities
Learn. Connect. Collaborate.
• Lint checks: TS, SCSS, JS
• Quality assurance
– Over 700 E2E Test
– Around 3500 Unit test 8...
@ALFRESCO/JS-API
Learn. Connect. Collaborate.
• Performance
• Tree shakable
• Smaller output Size
• Web components future
• SSO Full suppor...
Learn. Connect. Collaborate.
• Packages name deprecated:
– alfresco-js-api
– alfresco-js-api-node
• Node and Browser are n...
Learn. Connect. Collaborate.
• Version 3.0.0 has been completely rewritten in
Typescript
• Final Output still JavaScript
–...
JS API 2 VS JS API 3
JS-API 2
JS-API 3
import { AlfrescoApi, PeopleApi } from '@alfresco/js-api';
let alfrescoApi = new Al...
JS API 2 Compatibility Layer
import { AlfrescoApiCompatibility } from '@alfresco/js-api';
let alfrescoApi = new AlfrescoAp...
Performance improvement
JS-API 2
JS-API 3
Learn. Connect. Collaborate.
WEB COMPONENTS
ACTIVITI 7 CE & EE
Tomorrow Tinto 10:45-11:30
Tomorrow Tinto 16:00-16:30
Components Description
App list Shows all deployed cloud application instances.
Group cloud component Searches Groups.
Edi...
Learn. Connect. Collaborate.
import { ProcessServicesCloudModule } from '@alfresco/adf-process-services-cloud';
@NgModule(...
Learn. Connect. Collaborate.
Code Example – List Your Apps
<adf-cloud-app-list (appClick)="onAppClick($event)">
</adf-clou...
Learn. Connect. Collaborate.
Code Example – Start Process
<adf-cloud-start-process
[appName]="applicationName"
(success)="...
Learn. Connect. Collaborate.
Code Example – List Process
<adf-cloud-process-list
[applicationName]="applicationName"
(rowC...
Learn. Connect. Collaborate.
Code Example – List Process
<adf-cloud-process-filters
[appName]=" applicationName"
[filterPa...
Learn. Connect. Collaborate.
Code Example – List Process
<adf-cloud-edit-process-filter
[appName]="applicationName"
[id]="...
EXTENSIBILITY
Tomorrow Moorfoot 14:15-14:45
Learn. Connect. Collaborate.
• @alfresco/adf-extensions
• You can create plugins that change, toggle, or extend :
– Naviga...
Learn. Connect. Collaborate.
• alfresco/adf-extensions
• What do we have in 3.0.0
– Icons
– Viewer
– Columns template docu...
Learn. Connect. Collaborate.
@alfresco/adf-extensions
ADF Application
Plugins
Learn. Connect. Collaborate.
@alfresco/adf-extensions
ADF Application
Plugins
Code Example – Import extension module
import { ExtensionsModule } from '@alfresco/adf-extensions';
@NgModule({
imports: [...
Code Example – Define extension JSON
your-app/src/assets/app.extensions.json
{
"$schema": "./app-extension.schema.json",
"...
Learn. Connect. Collaborate.
@alfresco/adf-extensions
ADF Application
Plugins
Code Example – Plugin registration
<ngx-monaco-editor id="adf-monaco-file-editor"
class="adf-monaco-file-editor"
[options]...
Code Example – Plugin registration
@Component({
selector: 'adf-monaco-view',
templateUrl: './monaco-view.component.html',
...
Code Example – Plugin registration
import …
@NgModule({
imports: [
CoreModule.forChild(),
MonacoEditorModule.forRoot()
],
...
Code Example – Define Plugin JSON
• your-app/src/assets/plugins/monaco-extension.json
{
"$version": "1.0.0",
"$name": "mon...
Build Plugin
Distribute It (if you want it)
Build
Copy the plugin JSON in the distribution or use the angular cli assets c...
Code Example – Assemble it
1. Install extension
2. Add the module
@NgModule({
imports: [
ExtensionsModule.forRoot(),
AdfMo...
SSO
Learn. Connect. Collaborate.
• alfresco/adf-core
• SSO Full support
– ACS 6.1+ / APS 1.9+ / ACTIVITI 7EE / CE
The Alfresco...
SSO Configuration
app.config.json
"authType" : "OAUTH",
"oauth2": {
"host": ”http://AUTH_SERVER/auth/realms/alfresco",
"cl...
app.config.json
"authType" : "OAUTH",
"oauth2": {
"host": ”http://AUTH_SERVER/auth/realms/alfresco",
"clientId": "alfresco...
Learn. Connect. Collaborate.
ADF
Application
1
2
3
SIGN IN SSO Button
User redirect to Identity Service Log In
User Logged...
OAuth 2.0 Implicit Grant Flow with Silent login
app.config.json
"authType" : "OAUTH",
"oauth2": {
"host": ”http://AUTH_SER...
Learn. Connect. Collaborate.
ADF
Application
OAuth 2.0 Implicit Grant Flow with Silent login
1
2
User redirect to Identity...
OAuth 2.0 Password Grant
app.config.json
"authType" : "OAUTH",
"oauth2": {
"host": ”http://AUTH_SERVER/auth/realms/alfresc...
Learn. Connect. Collaborate.
ADF
Application
1
3
User stay in the APP and introduce the
credential in the Login component
...
Code Example
Implicit Flow ON Implicit Flow OFF
The Login component dynamically adapt itself you need only
to change the a...
CONTENT AND SEARCH
Search
Metadata
Tree view
Learn. Connect. Collaborate.
Tree view listSearch Filters
<adf-search-filter #searchFilter>
</adf-search-filter>
1. Catego...
Learn. Connect. Collaborate.
Search Filters
The Search Filter supports a number of widgets out of the box, each implemente...
Learn. Connect. Collaborate.
Categories and widgets
"categories": [
{
"id": "queryName",
"name": "Name",
"enabled": true,
...
Learn. Connect. Collaborate.
Learn. Connect. Collaborate.
FacetField
"search": {
"facetFields": {
"expanded": true,
"fields": [
{ "field": "content.mim...
Learn. Connect. Collaborate.
Learn. Connect. Collaborate.
Search chip list
<adf-search-filter #searchFilter></adf-search-filter>
<adf-search-chip-list ...
Learn. Connect. Collaborate.
Learn. Connect. Collaborate.
<adf-tree-view-list
[nodeId]="'-my-'"
(nodeClicked)="onClick($event)
"
(error)="onError($even...
Learn. Connect. Collaborate.
USEFUL
RESOURCES
• ADF Documentation
– https://www.alfresco.com/abn/adf/docs/
• ADF Repositor...
Learn. Connect. Collaborate.
CONTACT ME
https://twitter.com/RomanoEugenio
https://github.com/eromano
eugenio.romano@alfres...
Let's play with adf 3.0
Prochain SlideShare
Chargement dans…5
×

Let's play with adf 3.0

611 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
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ♣♣♣ https://tinyurl.com/rockhardxx
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

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

×