SlideShare a Scribd company logo
Alfresco Development
Framework
Learn. Connect. Collaborate.
What is ADF?
• 100+ reusable Angular components &
services
• Dev tooling to save time
• Alfresco JavaScript API
• Vibrant open source community
• Based on standard technologies
Learn. Connect. Collaborate.
The 4 ADF Pillars
JavaScript
Library
Angular
Components
App
Generator
Example
Apps
ADF
APPS
Framework Core Technologies
Testing / Continuous
Jasmine
Selenium Robot
Framework
Travis
Languages
JavaScript
HTML5
CSS
Typescript
Frameworks
Angular 2
Angular Material
Design Lite
We pick this technologies because most of them are standard de facto.
Development Tools
Node
NPM
Yeoman
GitHub
Angular CLI
ADF
Packages
@Alfresco/adf-process-services
. . .
@Alfresco/adf-core
. . .
Button
Angular
Material Design
Components
Input
Icons
Dialog
Card
Options
. . .
Sidenav
Document List
Search Versions
Metadata
. . .
@Alfresco/adf-content-services
Login
Data Table User Info
Viewer
Upload
Form
Task List
Process List
@Alfresco/adf-content-insight
Reports Diagrams
Learn. Connect. Collaborate.
Architecture
+ JavaScript
Angular 5
Process Services REST API
Content Services REST
API
Common components Process components Content components
Governance Services
REST API
AlfrescoJSAPI
Learn. Connect. Collaborate.
Anatomy of a component
Code Base
Separation
HTML
EXTENSION
POINTS
CONFIG
PROPERTIES
EVENT
LISTENERS
ADF
FRAMEWORK
COMPONENTS
DEVELOPER
CUSTOM
APP
Common Pitfalls
• Customize or extend – don’t overwrite
• Never change anything in node_modules
• Contribute instead of local forks
• Use “Starters” like the Content Application
Alfresco
JavaScript API
• Unified Login for Content and Process
• Wraps Content API methods
• Wraps Process API methods
• Frontend use
• Backend use
• Leverage any JavaScript based framework
Learn. Connect. Collaborate.
Semantic versioning and package.json symbols
"@alfresco/adf-core": ”^1.8.0”
Will get all 1.*.*
"@alfresco/adf-core": ”~1.8.0”
Will get all 1.8.*
Learn. Connect. Collaborate.
Release Strategy
https://community.alfresco.com/docs/DOC-7026-adf-release-strategy
Learn. Connect. Collaborate.
What do you need to aspect from a release
• Release Note
• How to upgrade article
• How to use new feature articles
• No breaking change in your app
• Unless we change the major version, and in this case the step for the upgrade
are documented in community articles (usually once or twice a year).
Production
Quality
• Unit tests
• Automation tests
• Public continues integration system
• Public code coverage report
• Public issues on Github + Public JIRA Project
• Clean Coding
• Contribution based on PR system
• Extensive documentation
• JavaScript/TypeScript Doc
How to get started
with an
application?
+
• Generate your first application in minutes
• Using modern standard tools from the
community
• Angular CLI Templates via Yeoman Generator:
– Process project
– Content project
– Process project + Content project
$ npm install -g generator-alfresco-adf-app
$ yo alfresco-adf-app
Deployment
• Look to overall Angular deployment strategies
• ADF / Angular Apps are just static assets, can be
served up from any web server
Common Strategies
• nginx to serve the static files – also include
reverse proxy to eliminate CORS
• Also works great in a Docker container
• Zip all static assets as a WAR file and deploy in
Tomcat
• Might require a bit of tweaking if serving in subfolder
• Create Spring Boot project to include your ADF
app
• Use Zuul as proxy to avoid CORS, help deal with SSO
Join Gitter!
• Go to https://gitter.im
• Sign in with you GitHub user
• Search for: alfresco
• Join to: alfresco-ng2-components
Useful Links
• Where to start
• Community portal
• https://community.alfresco.com/community/application-
development-framework/pages/get-started
• Github
• https://github.com/Alfresco/alfresco-ng2-components
• https://github.com/Alfresco/alfresco-js-api
• https://github.com/Alfresco/generator-ng2-alfresco-component
• https://github.com/Alfresco/generator-ng2-alfresco-app
• Npm
• https://www.npmjs.com/~alfresco
• Gitter Channel
• https://gitter.im/Alfresco/alfresco-ng2-components
• ADF Component Catalog
• https://alfresco.github.io/adf-component-catalog/index.html
ADF Components
9.30am – 10.00am
Node version
$ node -v
v8.5.0
Any version of node >= 8 is ok.
Upgrading to node 8 via official installer:
• https://nodejs.org/dist/v8.6.0/node-v8.6.0.pkg
What you get
out of the box
• Extensible behavior
• Internationalization
• Accessibility
• Consistent UX Experience with Material Design
• Responsiveness
• Customizable style
• High tests coverage
• Easy to install with npm
• Each component is independent from each
other, so you can use just the components that
you need
Anatomy of a
component
• Components consists of three parts
1. Typescript controller
2. Template
3. CSS
• Components need to be imported into the
application in app.module.ts and made
available in the declarations section.
Anatomy of a
component:
Typescript
Anatomy of a
component:
Template
Anatomy of a
component:
CSS
Nothing in here by default ;)
Component
Hierarchy
• Angular is all about components
• index.html - <app-root>
• app.component.html - <app-hello>
• hello.component.html - <your-code>
Component
Hierarchy
Customize Login Component
(events, style customization, extensions points)
Where to start DOCUMENTATION
• https://github.com/Alfresco/alfresco-ng2-
components/blob/master/docIndex.md
Basic Login
Component
<adf-login></adf-login>
HEADER
FOOTER
CONTENT
LOGO
BACKGROUND
Provider
parameter
<adf-login
providers="ALL">
</adf-login>
<adf-login
providers="ECM">
</adf-login>
<adf-login
providers="BPM">
</adf-login>
Process & Content:
Content:
Process:
Customize logo
and background
<adf-login
[backgroundImageUrl]="'http://images.freeimages.com/images/
previews/638/wood-wall-for-background-1634466.jpg'"
[logoImageUrl]="'http://images.freeimages.com/images/preview
s/eac/honeybee-with-a-house-1633609.jpg'">
</adf-login>
Alfresco Development Framework Basic
Customize
Header, Footer,
Content
<adf-login>
<login-header>
<ng-template>
My custom HTML for the header
</ng-template>
</login-header>
</adf-login>
<adf-login>
<login-footer>
<ng-template>
My custom HTML for the footer
</ng-template>
</login-footer>
</adf-login>
<adf-login>
<div>
My custom content
</dic>
</adf-login>
Custom content:
Custom footer:
Custom header:
Alfresco Development Framework Basic
Listen on events
<adf-login
(onSuccess)="mySuccessMethod($event)"
(onError)="myErrorMethod($event)"
(executeSubmit)="validateForm($event)" >
</adf-login>
HTML:
export class MyCustomLogin {
mySuccessMethod(event: any) {
console.log(event);
alert(‘success’);
}
myErrorMethod(event: any) {
console.log(event);
alert(‘error’);
}
validateForm(event: any) {
console.log(event);
alert(‘validate’);
}
}
TYPESCRIPT:
Alfresco Development Framework Basic
How it looks – Login Component
Default Style Custom Style Custom Style
Generating applications &
Customizing Components12.45am - 12:00am
Agenda
• How to use the application generator
• Customize the login component
• How to use the component generator
Application
Generator
What is the App generator:
• The App generator uses the Yeoman generator to
generate an ADF app based on the Angular CLI
project.
When to use the App generator:
• Use it when you want to create a new
application.
Source code and Documentation:
• https://github.com/Alfresco/generator-ng2-
alfresco-app
+
What is Yeoman
“Yeoman is a generic scaffolding system allowing
the creation of any kind of app. It allows for
rapidly getting started on new projects and
streamlines the maintenance of existing projects.”
Link
• http://yeoman.io/generators/
What is Angular
CLI
“The Angular CLI is a tool to initialize, develop,
scaffold and maintain Angular applications”
Link
• https://cli.angular.io/
Node version
$ node -v
v8.5.0+
Any version of node >= 8 are ok.
Upgrading to node 8 via official installer:
• https://nodejs.org/dist/v8.6.0/node-v8.6.0.pkg
Install and
Upgrade the
Application
Generator
+ $ npm install -g yo
$ npm install generator-ng2-alfresco-app
How to install the application generator:
Run the
Application
Generator
$ yo
? Your project name: test-app
? Application blueprint (Use arrow keys)
❯ Process Service and Content Service
Content Service
Process Service
$ cd test-app
$ npm start
+
Change proxy
$ vi proxy.conf.json
0 {
1 "/ecm": {
2 "target": "http://0.0.0.0:8080",
3 "secure": false,
4 "pathRewrite": {
5 "^/ecm": ""
6 },
7 "changeOrigin": true
8 },
9 "/bpm": {
10 "target": "http://0.0.0.0:9999",
11 "secure": false,
12 "pathRewrite": {
13 "^/bpm": ""
14 },
15 "changeOrigin": true
16 } }
+
Replace “/ecm” and “/bpm” “target” url with:
• http://adftraining.lab.alfresco.me
Remember to use “npm start” from now on
Generated APP
+
Angular CLI
commands
+
…Let’s try wiring in a component with Angular CLI
Component
Generator
What is the Component generator:
• The Component generator uses the Yeoman
generator to generate an empty ADF component.
When to use the Component generator:
• Use it when you want to create a new
component
• IT DOESN’T GENERATE E RUNNABLE
APPLICATION.
Source code and Documentation:
• https://github.com/Alfresco/generator-ng2-
alfresco-component
CORS
Cross-Origin Resource Sharing (CORS)
CORS is a mechanism that allows restricted resources (e.g. fonts) on
a web page to be requested from another domain outside the domain
from which the first resource was served.
CORS
A resource makes a cross-origin HTTP request when it requests a
resource from a different domain, protocol, or port to its own. For
example, an HTML page served from http://domain-a.com makes
an <img> src request for http://domain-b.com/image.jpg. Many
pages on the web today load resources like CSS stylesheets, images,
and scripts from separate domains.
Learn. Connect. Collaborate.
ADF CORS solving strategies
1.Configuring webpack proxy
2.Configuring angular-cli proxy
3.Configuring nginx proxy
4.Enabling CORS in ACS and APS
PROXY
STRATEGY
Learn. Connect. Collaborate.
CORS symptoms in ADF
• Login Error message
• Console log Error message
• Back end and Front end are on different domains
Content Service localhost:8080
ADF localhost:3000
Process Service localhost:9999 All different port it will cause CORS ERROR
Learn. Connect. Collaborate.
NOT CORS symptoms in ADF
• Login Error message
• Network errors
• Back end and Front end are on the same domain
Learn. Connect. Collaborate.
Configure PROXY angular
'/ecm': {
target: {
host:
"0.0.0.0",
protocol:
'http:',
port: 8080
},
pathRewrite: {
'^/ecm': ''
},
secure: false,
changeOrigin:
true
},
'/bpm': {
target: {
host:
"0.0.0.0",
protocol:
'http:',
port: 9999
},
pathRewrite: {
'^/bpm': ''
},
secure: false,
changeOrigin:
proxy.conf.json
Configure webpack proxy file:
webpack.common.js
Configure angualr-cli proxy file:
Learn. Connect. Collaborate.
Enabling CORS in ACS and APS
• If you want completely enable CORS call on your Alfresco Content
Services and Alfresco Process Services, please refer to the following
alfresco documents:
• Enable Cross Origin Resource Sharing CORS for ACS
• Enable Cross Origin Resource Sharing CORS for APS
Generators and Login Lab
Exercise
10.00am - 10:45am
Generators Lab Exercise
Repository:
https://gitlab.alfresco.com/alfresco-adf-training/adf-
generator-exercise/tree/master
Generators Lab
Exercise 1
Generate a content application
1.Change proxy configurations to point to:
http://adftraining.lab.alfresco.me (use npm start)
2.Change login component logo
3.Change login component background
4.Change login component footer and add in it a custom Angular
Material Design Component : https://material.angular.io/
5.Change login component header and add in it a custom Angular
Material Design Component : https://material.angular.io/
6.Change login component content and add in it a custom Angular
Material Design Component : https://material.angular.io/
7.Display an alert or console message on the onError event
Lab Exercise 2
(Optional)
Generate a process application
Lab Exercise 3
(Optional)
Generate a process + content application
Working with the Alfresco
JavaScript API
15.00 am – 16.00 am
Agenda
• What is the Alfresco JavaScript API
• Why to use the Alfresco JavaScript API
• How to use the Alfresco JavaScript API
• Back end use
• Front end use
Learn. Connect. Collaborate.
The 4 ADF Pillars
JavaScript
Library
Angular
Components
App
Generator
Example
Apps
ADF
APPS
What is the
Alfresco
JavaScript API
• Open Source
• Unified Login for Content and Process
• Wraps Process Service API
• Wraps Content Service API
• Wraps Governance Service API
• Compatible with any JavaScript framework
• Separate project from the Angular component library
Architecture
Unified JS API
Front end Client
(Any JavaScript based)
Back end Client
(NodeJs)
Authentication API
Process Service
API
Content Service
API
Governance
Service API
Release process
https://community.alfresco.com/docs/DOC-7026-adf-release-strategy
Why to use the
Alfresco
JavaScript API?
• Back end development with Node.js
• You can’t use Angular components
• You don’t want to hard code http calls in your code
and maintain it
Where to start?
Documentation
https://github.com/Alfresco/alfresco-js-api
Learn. Connect. Collaborate.
Login – Content & Process
var AlfrescoApi = require('alfresco-js-api');
this.alfrescoJsApi = new AlfrescoApi({
hostEcm:'http://127.0.0.1:8080',
hostBpm:'http://127.0.0.1:9999’,
provider:'ALL'
});
this.alfrescoJsApi.login('admin', 'admin').then(function (data) {
console.log('API called successfully Login in BPM and ECM performed ‘, data);
}, function (error) {
console.error(error);
});
Learn. Connect. Collaborate.
Get a file or a folder - Content
var fileOrFolderId = '80a94ac8-3ece-47ad-864e-5d939424c47c';
this.alfrescoJsApi.nodes.getNodeInfo(fileOrFolderId).then(function
(data) {
console.log('This is the name' + data.name );
}, function (error) {
console.log('This node does not exist');
});
Learn. Connect. Collaborate.
Get task list - Process
var requestTasks = new
this.alfrescoJsApi.activiti.TaskQueryRequestRepresentation();
this.alfrescoJsApi.activiti.taskApi.listTasks(requestTasks).then(function
(data) {
console.log('listTasks ’, data);
}, function (error) {
console.log('Error’, error);
});
How to use it…
import * as AlfrescoApi from 'alfresco-js-api';
$ npm install --save alfresco-js-api
+
Node.js
$ npm init
$ npm install --save alfresco-js-api
$ vi index.js
$ node index.js
Debug:
$ node --inspect index.js // chrome://inspecthttps://github.com/Alfresco/alfresco-js-api
React
$ npm install -g create-react-app
$ create-react-app adf-react — scripts-
version=react-scripts-ts
$npm install alfresco-js-api --save
$ npm start
Vue.js
$ npm install -g vue-cli
$ vue init webpack adf-vue
$ npm install alfresco-js-api –save
$ npm start
Angular
$ npm install -g @angular/cli
$ ng new adf-angular
$ npm install alfresco-js-api –save
$ npm start
How to create a new component

More Related Content

What's hot

Alfresco Security Best Practices Guide
Alfresco Security Best Practices GuideAlfresco Security Best Practices Guide
Alfresco Security Best Practices Guide
Toni de la Fuente
 
Alfresco勉強会#33 alfresco 5.1でコンテンツ自動削除を実装してみた
Alfresco勉強会#33 alfresco 5.1でコンテンツ自動削除を実装してみたAlfresco勉強会#33 alfresco 5.1でコンテンツ自動削除を実装してみた
Alfresco勉強会#33 alfresco 5.1でコンテンツ自動削除を実装してみた
Tasuku Otani
 
Metadata Extraction and Content Transformation
Metadata Extraction and Content TransformationMetadata Extraction and Content Transformation
Metadata Extraction and Content Transformation
Alfresco Software
 
Alfresco tuning part1
Alfresco tuning part1Alfresco tuning part1
Alfresco tuning part1
Luis Cabaceira
 
Alfresco Share - Recycle Bin Ideas
Alfresco Share - Recycle Bin IdeasAlfresco Share - Recycle Bin Ideas
Alfresco Share - Recycle Bin Ideas
AlfrescoUE
 
Alfresco DevCon 2019 Performance Tools of the Trade
Alfresco DevCon 2019   Performance Tools of the TradeAlfresco DevCon 2019   Performance Tools of the Trade
Alfresco DevCon 2019 Performance Tools of the Trade
Luis Colorado
 
Alfresco Certificates
Alfresco Certificates Alfresco Certificates
Alfresco Certificates
Angel Borroy López
 
Alfresco Bulk Import toolのご紹介
Alfresco Bulk Import toolのご紹介Alfresco Bulk Import toolのご紹介
Alfresco Bulk Import toolのご紹介
MoritakaSoma
 
Alfresco tuning part2
Alfresco tuning part2Alfresco tuning part2
Alfresco tuning part2
Luis Cabaceira
 
(Re)Indexing Large Repositories in Alfresco
(Re)Indexing Large Repositories in Alfresco(Re)Indexing Large Repositories in Alfresco
(Re)Indexing Large Repositories in Alfresco
Angel Borroy López
 
Alfresco Transform Service DevCon 2019
Alfresco Transform Service DevCon 2019Alfresco Transform Service DevCon 2019
Alfresco Transform Service DevCon 2019
J V
 
Alfresco in an hour
Alfresco in an hourAlfresco in an hour
Alfresco in an hour
Alfresco Software
 
Alfresco Records Management
Alfresco Records ManagementAlfresco Records Management
Alfresco Records Management
Alfresco Software
 
Scale your Alfresco Solutions
Scale your Alfresco Solutions Scale your Alfresco Solutions
Scale your Alfresco Solutions
Alfresco Software
 
Apache Atlas: Why Big Data Management Requires Hierarchical Taxonomies
Apache Atlas: Why Big Data Management Requires Hierarchical Taxonomies Apache Atlas: Why Big Data Management Requires Hierarchical Taxonomies
Apache Atlas: Why Big Data Management Requires Hierarchical Taxonomies
DataWorks Summit/Hadoop Summit
 
Alfresco Workshop: Installing Alfresco Content Services and Alfresco Governan...
Alfresco Workshop: Installing Alfresco Content Services and Alfresco Governan...Alfresco Workshop: Installing Alfresco Content Services and Alfresco Governan...
Alfresco Workshop: Installing Alfresco Content Services and Alfresco Governan...
Lighton Phiri
 
Actions rules and workflow in alfresco
Actions rules and workflow in alfrescoActions rules and workflow in alfresco
Actions rules and workflow in alfresco
Alfresco Software
 
Alfresco Security Best Practices 2014
Alfresco Security Best Practices 2014Alfresco Security Best Practices 2014
Alfresco Security Best Practices 2014
Toni de la Fuente
 
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみようAlfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Tasuku Otani
 
Event streaming: A paradigm shift in enterprise software architecture
Event streaming: A paradigm shift in enterprise software architectureEvent streaming: A paradigm shift in enterprise software architecture
Event streaming: A paradigm shift in enterprise software architecture
Sina Sojoodi
 

What's hot (20)

Alfresco Security Best Practices Guide
Alfresco Security Best Practices GuideAlfresco Security Best Practices Guide
Alfresco Security Best Practices Guide
 
Alfresco勉強会#33 alfresco 5.1でコンテンツ自動削除を実装してみた
Alfresco勉強会#33 alfresco 5.1でコンテンツ自動削除を実装してみたAlfresco勉強会#33 alfresco 5.1でコンテンツ自動削除を実装してみた
Alfresco勉強会#33 alfresco 5.1でコンテンツ自動削除を実装してみた
 
Metadata Extraction and Content Transformation
Metadata Extraction and Content TransformationMetadata Extraction and Content Transformation
Metadata Extraction and Content Transformation
 
Alfresco tuning part1
Alfresco tuning part1Alfresco tuning part1
Alfresco tuning part1
 
Alfresco Share - Recycle Bin Ideas
Alfresco Share - Recycle Bin IdeasAlfresco Share - Recycle Bin Ideas
Alfresco Share - Recycle Bin Ideas
 
Alfresco DevCon 2019 Performance Tools of the Trade
Alfresco DevCon 2019   Performance Tools of the TradeAlfresco DevCon 2019   Performance Tools of the Trade
Alfresco DevCon 2019 Performance Tools of the Trade
 
Alfresco Certificates
Alfresco Certificates Alfresco Certificates
Alfresco Certificates
 
Alfresco Bulk Import toolのご紹介
Alfresco Bulk Import toolのご紹介Alfresco Bulk Import toolのご紹介
Alfresco Bulk Import toolのご紹介
 
Alfresco tuning part2
Alfresco tuning part2Alfresco tuning part2
Alfresco tuning part2
 
(Re)Indexing Large Repositories in Alfresco
(Re)Indexing Large Repositories in Alfresco(Re)Indexing Large Repositories in Alfresco
(Re)Indexing Large Repositories in Alfresco
 
Alfresco Transform Service DevCon 2019
Alfresco Transform Service DevCon 2019Alfresco Transform Service DevCon 2019
Alfresco Transform Service DevCon 2019
 
Alfresco in an hour
Alfresco in an hourAlfresco in an hour
Alfresco in an hour
 
Alfresco Records Management
Alfresco Records ManagementAlfresco Records Management
Alfresco Records Management
 
Scale your Alfresco Solutions
Scale your Alfresco Solutions Scale your Alfresco Solutions
Scale your Alfresco Solutions
 
Apache Atlas: Why Big Data Management Requires Hierarchical Taxonomies
Apache Atlas: Why Big Data Management Requires Hierarchical Taxonomies Apache Atlas: Why Big Data Management Requires Hierarchical Taxonomies
Apache Atlas: Why Big Data Management Requires Hierarchical Taxonomies
 
Alfresco Workshop: Installing Alfresco Content Services and Alfresco Governan...
Alfresco Workshop: Installing Alfresco Content Services and Alfresco Governan...Alfresco Workshop: Installing Alfresco Content Services and Alfresco Governan...
Alfresco Workshop: Installing Alfresco Content Services and Alfresco Governan...
 
Actions rules and workflow in alfresco
Actions rules and workflow in alfrescoActions rules and workflow in alfresco
Actions rules and workflow in alfresco
 
Alfresco Security Best Practices 2014
Alfresco Security Best Practices 2014Alfresco Security Best Practices 2014
Alfresco Security Best Practices 2014
 
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみようAlfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
 
Event streaming: A paradigm shift in enterprise software architecture
Event streaming: A paradigm shift in enterprise software architectureEvent streaming: A paradigm shift in enterprise software architecture
Event streaming: A paradigm shift in enterprise software architecture
 

Similar to Alfresco Development Framework Basic

ADF Basics and Beyond - Alfresco Devcon 2018
ADF Basics and Beyond - Alfresco Devcon 2018ADF Basics and Beyond - Alfresco Devcon 2018
ADF Basics and Beyond - Alfresco Devcon 2018
Mario Romano
 
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Brian Culver
 
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Brian Culver
 
Tutorial 1: Your First Science App - Araport Developer Workshop
Tutorial 1: Your First Science App - Araport Developer WorkshopTutorial 1: Your First Science App - Araport Developer Workshop
Tutorial 1: Your First Science App - Araport Developer Workshop
Vivek Krishnakumar
 
Let's build Developer Portal with Backstage
Let's build Developer Portal with BackstageLet's build Developer Portal with Backstage
Let's build Developer Portal with Backstage
Opsta
 
[Struyf] Automate Your Tasks With Azure Functions
[Struyf] Automate Your Tasks With Azure Functions[Struyf] Automate Your Tasks With Azure Functions
[Struyf] Automate Your Tasks With Azure Functions
European Collaboration Summit
 
Streamlined Geek Talk
Streamlined Geek TalkStreamlined Geek Talk
Streamlined Geek Talk
Sarah Allen
 
DevOps on AWS: Accelerating Software Delivery with the AWS Developer Tools
DevOps on AWS: Accelerating Software Delivery with the AWS Developer ToolsDevOps on AWS: Accelerating Software Delivery with the AWS Developer Tools
DevOps on AWS: Accelerating Software Delivery with the AWS Developer Tools
Amazon Web Services
 
Building CI/CD Pipelines for Serverless Applications - SRV302 - re:Invent 2017
Building CI/CD Pipelines for Serverless Applications - SRV302 - re:Invent 2017Building CI/CD Pipelines for Serverless Applications - SRV302 - re:Invent 2017
Building CI/CD Pipelines for Serverless Applications - SRV302 - re:Invent 2017
Amazon Web Services
 
Spinnaker Summit 2018: CI/CD Patterns for Kubernetes with Spinnaker
Spinnaker Summit 2018: CI/CD Patterns for Kubernetes with SpinnakerSpinnaker Summit 2018: CI/CD Patterns for Kubernetes with Spinnaker
Spinnaker Summit 2018: CI/CD Patterns for Kubernetes with Spinnaker
Andrew Phillips
 
Practices and tools for building better APIs
Practices and tools for building better APIsPractices and tools for building better APIs
Practices and tools for building better APIs
NLJUG
 
Practices and tools for building better API (JFall 2013)
Practices and tools for building better API (JFall 2013)Practices and tools for building better API (JFall 2013)
Practices and tools for building better API (JFall 2013)
Peter Hendriks
 
Integrate any Angular Project into WebSphere Portal
Integrate any Angular Project into WebSphere PortalIntegrate any Angular Project into WebSphere Portal
Integrate any Angular Project into WebSphere Portal
Himanshu Mendiratta
 
DevOps of Python applications using OpenShift (Italian version)
DevOps of Python applications using OpenShift (Italian version)DevOps of Python applications using OpenShift (Italian version)
DevOps of Python applications using OpenShift (Italian version)
Francesco Fiore
 
Alfresco Coding mit dem Alfresco SDK (auf Englisch) - Julien Bruinaud, Techni...
Alfresco Coding mit dem Alfresco SDK (auf Englisch) - Julien Bruinaud, Techni...Alfresco Coding mit dem Alfresco SDK (auf Englisch) - Julien Bruinaud, Techni...
Alfresco Coding mit dem Alfresco SDK (auf Englisch) - Julien Bruinaud, Techni...
Nicole Szigeti
 
NET Aspire - NET Conf IL 2024 - Tamir Dresher.pdf
NET Aspire - NET Conf IL 2024 - Tamir Dresher.pdfNET Aspire - NET Conf IL 2024 - Tamir Dresher.pdf
NET Aspire - NET Conf IL 2024 - Tamir Dresher.pdf
Tamir Dresher
 
An Overview of Angular 4
An Overview of Angular 4 An Overview of Angular 4
How to Implement Micro Frontend Architecture using Angular Framework
How to Implement Micro Frontend Architecture using Angular FrameworkHow to Implement Micro Frontend Architecture using Angular Framework
How to Implement Micro Frontend Architecture using Angular Framework
RapidValue
 
Chris OBrien - Pitfalls when developing with the SharePoint Framework (SPFx)
Chris OBrien - Pitfalls when developing with the SharePoint Framework (SPFx)Chris OBrien - Pitfalls when developing with the SharePoint Framework (SPFx)
Chris OBrien - Pitfalls when developing with the SharePoint Framework (SPFx)
Chris O'Brien
 
Application Lifecycle Management in a Serverless World
Application Lifecycle Management in a Serverless WorldApplication Lifecycle Management in a Serverless World
Application Lifecycle Management in a Serverless World
Amazon Web Services
 

Similar to Alfresco Development Framework Basic (20)

ADF Basics and Beyond - Alfresco Devcon 2018
ADF Basics and Beyond - Alfresco Devcon 2018ADF Basics and Beyond - Alfresco Devcon 2018
ADF Basics and Beyond - Alfresco Devcon 2018
 
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
 
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
 
Tutorial 1: Your First Science App - Araport Developer Workshop
Tutorial 1: Your First Science App - Araport Developer WorkshopTutorial 1: Your First Science App - Araport Developer Workshop
Tutorial 1: Your First Science App - Araport Developer Workshop
 
Let's build Developer Portal with Backstage
Let's build Developer Portal with BackstageLet's build Developer Portal with Backstage
Let's build Developer Portal with Backstage
 
[Struyf] Automate Your Tasks With Azure Functions
[Struyf] Automate Your Tasks With Azure Functions[Struyf] Automate Your Tasks With Azure Functions
[Struyf] Automate Your Tasks With Azure Functions
 
Streamlined Geek Talk
Streamlined Geek TalkStreamlined Geek Talk
Streamlined Geek Talk
 
DevOps on AWS: Accelerating Software Delivery with the AWS Developer Tools
DevOps on AWS: Accelerating Software Delivery with the AWS Developer ToolsDevOps on AWS: Accelerating Software Delivery with the AWS Developer Tools
DevOps on AWS: Accelerating Software Delivery with the AWS Developer Tools
 
Building CI/CD Pipelines for Serverless Applications - SRV302 - re:Invent 2017
Building CI/CD Pipelines for Serverless Applications - SRV302 - re:Invent 2017Building CI/CD Pipelines for Serverless Applications - SRV302 - re:Invent 2017
Building CI/CD Pipelines for Serverless Applications - SRV302 - re:Invent 2017
 
Spinnaker Summit 2018: CI/CD Patterns for Kubernetes with Spinnaker
Spinnaker Summit 2018: CI/CD Patterns for Kubernetes with SpinnakerSpinnaker Summit 2018: CI/CD Patterns for Kubernetes with Spinnaker
Spinnaker Summit 2018: CI/CD Patterns for Kubernetes with Spinnaker
 
Practices and tools for building better APIs
Practices and tools for building better APIsPractices and tools for building better APIs
Practices and tools for building better APIs
 
Practices and tools for building better API (JFall 2013)
Practices and tools for building better API (JFall 2013)Practices and tools for building better API (JFall 2013)
Practices and tools for building better API (JFall 2013)
 
Integrate any Angular Project into WebSphere Portal
Integrate any Angular Project into WebSphere PortalIntegrate any Angular Project into WebSphere Portal
Integrate any Angular Project into WebSphere Portal
 
DevOps of Python applications using OpenShift (Italian version)
DevOps of Python applications using OpenShift (Italian version)DevOps of Python applications using OpenShift (Italian version)
DevOps of Python applications using OpenShift (Italian version)
 
Alfresco Coding mit dem Alfresco SDK (auf Englisch) - Julien Bruinaud, Techni...
Alfresco Coding mit dem Alfresco SDK (auf Englisch) - Julien Bruinaud, Techni...Alfresco Coding mit dem Alfresco SDK (auf Englisch) - Julien Bruinaud, Techni...
Alfresco Coding mit dem Alfresco SDK (auf Englisch) - Julien Bruinaud, Techni...
 
NET Aspire - NET Conf IL 2024 - Tamir Dresher.pdf
NET Aspire - NET Conf IL 2024 - Tamir Dresher.pdfNET Aspire - NET Conf IL 2024 - Tamir Dresher.pdf
NET Aspire - NET Conf IL 2024 - Tamir Dresher.pdf
 
An Overview of Angular 4
An Overview of Angular 4 An Overview of Angular 4
An Overview of Angular 4
 
How to Implement Micro Frontend Architecture using Angular Framework
How to Implement Micro Frontend Architecture using Angular FrameworkHow to Implement Micro Frontend Architecture using Angular Framework
How to Implement Micro Frontend Architecture using Angular Framework
 
Chris OBrien - Pitfalls when developing with the SharePoint Framework (SPFx)
Chris OBrien - Pitfalls when developing with the SharePoint Framework (SPFx)Chris OBrien - Pitfalls when developing with the SharePoint Framework (SPFx)
Chris OBrien - Pitfalls when developing with the SharePoint Framework (SPFx)
 
Application Lifecycle Management in a Serverless World
Application Lifecycle Management in a Serverless WorldApplication Lifecycle Management in a Serverless World
Application Lifecycle Management in a Serverless World
 

Recently uploaded

Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
bhumivarma35300
 
GT degree offer diploma Transcript
GT degree offer diploma TranscriptGT degree offer diploma Transcript
GT degree offer diploma Transcript
attueb
 
PathSpotter: Exploring Tested Paths to Discover Missing Tests (FSE 2024)
PathSpotter: Exploring Tested Paths to Discover Missing Tests (FSE 2024)PathSpotter: Exploring Tested Paths to Discover Missing Tests (FSE 2024)
PathSpotter: Exploring Tested Paths to Discover Missing Tests (FSE 2024)
andrehoraa
 
Amadeus Travel API, Amadeus Booking API, Amadeus GDS
Amadeus Travel API, Amadeus Booking API, Amadeus GDSAmadeus Travel API, Amadeus Booking API, Amadeus GDS
Amadeus Travel API, Amadeus Booking API, Amadeus GDS
aadhiyaeliza
 
AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.
AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.
AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.
Srinivas Dukka
 
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
ashiklo9823
 
Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...
Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...
Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...
aslasdfmkhan4750
 
Empowering Businesses with Intelligent Software Solutions - Grawlix
Empowering Businesses with Intelligent Software Solutions - GrawlixEmpowering Businesses with Intelligent Software Solutions - Grawlix
Empowering Businesses with Intelligent Software Solutions - Grawlix
Aarisha Shaikh
 
BATber53 AWS Modernize your applications with purpose-built AWS databases
BATber53 AWS Modernize your applications with purpose-built AWS databasesBATber53 AWS Modernize your applications with purpose-built AWS databases
BATber53 AWS Modernize your applications with purpose-built AWS databases
BATbern
 
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
45unexpected
 
Verified Girls Call Mumbai 👀 9820252231 👀 Cash Payment With Room DeliveryDeli...
Verified Girls Call Mumbai 👀 9820252231 👀 Cash Payment With Room DeliveryDeli...Verified Girls Call Mumbai 👀 9820252231 👀 Cash Payment With Room DeliveryDeli...
Verified Girls Call Mumbai 👀 9820252231 👀 Cash Payment With Room DeliveryDeli...
87tomato
 
Amazon Music Spelling Correction - SIGIR 2024
Amazon Music Spelling Correction - SIGIR 2024Amazon Music Spelling Correction - SIGIR 2024
Amazon Music Spelling Correction - SIGIR 2024
siddharth1729
 
bangalore Girls call 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
bangalore Girls call  👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Deliverybangalore Girls call  👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
bangalore Girls call 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 
Authentication Review-June -2024 AP & TS.pptx
Authentication Review-June -2024 AP & TS.pptxAuthentication Review-June -2024 AP & TS.pptx
Authentication Review-June -2024 AP & TS.pptx
DEMONDUOS
 
SEO Cheat Sheet with Learning Resources by Balti Bloggers.pdf
SEO Cheat Sheet with Learning Resources by Balti Bloggers.pdfSEO Cheat Sheet with Learning Resources by Balti Bloggers.pdf
SEO Cheat Sheet with Learning Resources by Balti Bloggers.pdf
Balti Bloggers
 
Predicting Test Results without Execution (FSE 2024)
Predicting Test Results without Execution (FSE 2024)Predicting Test Results without Execution (FSE 2024)
Predicting Test Results without Execution (FSE 2024)
andrehoraa
 
welcome to presentation on Google Apps
welcome to   presentation on Google Appswelcome to   presentation on Google Apps
welcome to presentation on Google Apps
AsifKarimJim
 
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
3610stuck
 
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
confluent
 
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdfA Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
kalichargn70th171
 

Recently uploaded (20)

Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
 
GT degree offer diploma Transcript
GT degree offer diploma TranscriptGT degree offer diploma Transcript
GT degree offer diploma Transcript
 
PathSpotter: Exploring Tested Paths to Discover Missing Tests (FSE 2024)
PathSpotter: Exploring Tested Paths to Discover Missing Tests (FSE 2024)PathSpotter: Exploring Tested Paths to Discover Missing Tests (FSE 2024)
PathSpotter: Exploring Tested Paths to Discover Missing Tests (FSE 2024)
 
Amadeus Travel API, Amadeus Booking API, Amadeus GDS
Amadeus Travel API, Amadeus Booking API, Amadeus GDSAmadeus Travel API, Amadeus Booking API, Amadeus GDS
Amadeus Travel API, Amadeus Booking API, Amadeus GDS
 
AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.
AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.
AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.
 
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
Vip Girls Call ServiCe Hyderabad 0000000000 Pooja Best High Class Hyderabad A...
 
Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...
Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...
Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...
 
Empowering Businesses with Intelligent Software Solutions - Grawlix
Empowering Businesses with Intelligent Software Solutions - GrawlixEmpowering Businesses with Intelligent Software Solutions - Grawlix
Empowering Businesses with Intelligent Software Solutions - Grawlix
 
BATber53 AWS Modernize your applications with purpose-built AWS databases
BATber53 AWS Modernize your applications with purpose-built AWS databasesBATber53 AWS Modernize your applications with purpose-built AWS databases
BATber53 AWS Modernize your applications with purpose-built AWS databases
 
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
 
Verified Girls Call Mumbai 👀 9820252231 👀 Cash Payment With Room DeliveryDeli...
Verified Girls Call Mumbai 👀 9820252231 👀 Cash Payment With Room DeliveryDeli...Verified Girls Call Mumbai 👀 9820252231 👀 Cash Payment With Room DeliveryDeli...
Verified Girls Call Mumbai 👀 9820252231 👀 Cash Payment With Room DeliveryDeli...
 
Amazon Music Spelling Correction - SIGIR 2024
Amazon Music Spelling Correction - SIGIR 2024Amazon Music Spelling Correction - SIGIR 2024
Amazon Music Spelling Correction - SIGIR 2024
 
bangalore Girls call 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
bangalore Girls call  👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Deliverybangalore Girls call  👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
bangalore Girls call 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 
Authentication Review-June -2024 AP & TS.pptx
Authentication Review-June -2024 AP & TS.pptxAuthentication Review-June -2024 AP & TS.pptx
Authentication Review-June -2024 AP & TS.pptx
 
SEO Cheat Sheet with Learning Resources by Balti Bloggers.pdf
SEO Cheat Sheet with Learning Resources by Balti Bloggers.pdfSEO Cheat Sheet with Learning Resources by Balti Bloggers.pdf
SEO Cheat Sheet with Learning Resources by Balti Bloggers.pdf
 
Predicting Test Results without Execution (FSE 2024)
Predicting Test Results without Execution (FSE 2024)Predicting Test Results without Execution (FSE 2024)
Predicting Test Results without Execution (FSE 2024)
 
welcome to presentation on Google Apps
welcome to   presentation on Google Appswelcome to   presentation on Google Apps
welcome to presentation on Google Apps
 
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
 
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
 
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdfA Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
 

Alfresco Development Framework Basic

Editor's Notes

  1. Mario
  2. Mario
  3. Mario
  4. Mario
  5. Mario
  6. "ng2-alfresco-core": "1.8.0",
  7. Mario
  8. The component typescript controller always consists of three parts: Imports – just like java, import other components, libraries and utilities Component decorator The selector defines the HTML tag or class that can be used to invoke the component TemplateUrl or inline template CSS files or inline CSS The Component Class Best practise is to implement OnInit. This would be the place to prepare data because the application is actually ready and loaded – this might not be the case for the constructor
  9. Simple HTML template. Use standard HTML or invoke other 3rd party components or use your own! 
  10. Empty by default. CSS is always local to the component. This means if a component’s CSS defines a color for paragraphs or links, this will only apply to this component. To style globally use the style.css file
  11. CSRF attack if CORS is enabled proxy is prefed Browsers save cookies as the user navigates through many application origins and send them back any time a new request to that origin is made. This led to the first cross-origin security problems. For example, although https://evil-example.com can’t read https://bank-example.com’s cookies and access your account directly, it could create a form that sent a POST to https://bank-example.com/transferFunds with instructions to transfer money to a different account. As the request would be sent with your cookie, the bank might execute the transfer as if it it was on your instructions. This kind of attack is called Cross Site Request Forgery (CSRF), a class of the “Confused Deputy” problem. CSRF exists because a cookie is present in the browser and attached to every request by default, without requiring additional user action, regardless of where the request originated. This style of access control interaction is often referred to as ambient authority. Managing ambient authority and defending against CSRF are key motivators for much of the subsequent evolution of the Web security model, including CORS.