inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

#878 doc and demo webscript component

Browse Source
This commit is contained in:
Mario Romano
2016-11-09 03:32:24 +00:00
parent bb9cfd2913
commit 3aa64626de
5 changed files with 107 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
ng2-components/ng2-alfresco-webscript/README.md
View File

@@ -1,4 +1,5 @@
# Alfresco Webscript Component for Angular 2
<p>
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
<img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master' alt='travis
@@ -14,56 +15,81 @@
<a href='https://www.npmjs.com/package/ng2-alfresco-webscript'>
<img src='https://img.shields.io/npm/dt/ng2-alfresco-webscript.svg' alt='npm downloads' />
</a>
<a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
<img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
</a>
<a href='https://angular.io/'>
<img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
</a>
<a href='https://www.typescriptlang.org/docs/tutorial.html'>
<img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
</a>
<a href='https://www.alfresco.com/'>
<img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
</a>
</p>
### Node
To correctly use this component check that on your machine is running Node version 5.0.0 or higher.
## Prerequisites
Before you start using this development framework, make sure you have installed all required software and done all the
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
## Install
```sh
npm install --save ng2-alfresco-webscript
```
Follow the 3 steps below:
Components included:
1. Npm
* Alfresco Webscript Component
```sh
npm install ng2-alfresco-webscript --save
```
#### Dependencies
2. Html
Add the following dependency to your index.html:
Include these dependencies in your index.html page:
```html
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
```
```html
The following component needs to be added to your systemjs.config:
<!-- Google Material Design Lite -->
<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
<script src="node_modules/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
- ng2-translate
- ng2-alfresco-core
- ng2-alfresco-datatable
<!-- Polyfill(s) for Safari (pre-10.x) -->
<script src="node_modules/intl/dist/Intl.min.js"></script>
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
Please refer to the following example to have an idea of how your systemjs.config should look like :
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-webscript/demo/systemjs.config.js
<!-- Polyfill(s) for dialogs -->
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
<style>._dialog_overlay { position: static !important; } </style>
#### Style
The style of this component is based on material design, so if you want to visualize it correctly you have to add the material
design dependency to your project:
<!-- Modules -->
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
```sh
npm install --save material-design-icons material-design-lite
```
```
Also make sure you include these dependencies in your .html page:
3. SystemJs
```html
<!-- Google Material Design Lite -->
<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
<script src="node_modules/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
```
Add the following components to your systemjs.config.js file:
- ng2-translate
- alfresco-js-api
- ng2-alfresco-core
- ng2-alfresco-datatable
Please refer to the following example file: [systemjs.config.js](demo/systemjs
.config.js) .
#### Basic usage
@@ -83,47 +109,57 @@ Example of an App that use Alfresco webscript component :
main.ts
```ts
import { Component } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';
import {
ALFRESCO_CORE_PROVIDERS,
AlfrescoSettingsService,
AlfrescoAuthenticationService
} from 'ng2-alfresco-core';
import { WEBSCRIPTCOMPONENT } from 'ng2-alfresco-webscript';
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { DataTableModule } from 'ng2-alfresco-datatable';
import { WebScriptModule } from 'ng2-alfresco-webscript';
@Component({
selector: 'my-app',
template: `
<alfresco-webscript-get [scriptPath]="scriptPath"
selector: 'alfresco-app-demo',
template: `<alfresco-webscript-get [scriptPath]="scriptPath"
[scriptArgs]="scriptArgs"
[contextRoot]="contextRoot"
[servicePath]="servicePath"
[contentType]="'HTML'">
</alfresco-webscript-get>`,
directives: [WEBSCRIPTCOMPONENT]
</alfresco-webscript-get>
`
})
export class AppComponent {
class WebscriptDemo {
scriptPath: string = 'sample/folder/Company%20Home';
contextRoot: string = 'alfresco';
servicePath: string = 'service';
constructor(public auth: AlfrescoAuthenticationService,
alfrescoSettingsService: AlfrescoSettingsService) {
alfrescoSettingsService.host = 'http://myalfrescoip';
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
settingsService.ecmHost = 'http://localhost:8080';
this.authService.login('admin', 'admin').subscribe(
ticket => {
console.log(ticket);
},
error => {
console.log(error);
});
}
}
bootstrap(AppComponent, [
HTTP_PROVIDERS,
ALFRESCO_CORE_PROVIDERS
]);
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
DataTableModule,
WebScriptModule
],
declarations: [ WebscriptDemo ],
bootstrap: [ WebscriptDemo ]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
```
@@ -246,36 +282,37 @@ You can get the plain data from the webscript through the **onSuccess** event pa
## Build from sources
Alternatively you can build component from sources with the following commands:
```sh
npm install
npm run build
```
##Build the files and keep watching for changes
### Build the files and keep watching for changes
```sh
npm run build:w
$ npm run build:w
```
## Running unit tests
```sh
npm test
```
## Running unit tests in browser
### Running unit tests in browser
```sh
npm test-browser
```
This task rebuilds all the code, runs tslint, license checks and other quality check tools
before performing unit testing.
This task rebuilds all the code, runs tslint, license checks and other quality check tools
before performing unit testing.
## Code coverage
### Code coverage
```sh
npm run coverage
@@ -291,3 +328,6 @@ npm install
npm start
```
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

22
ng2-components/ng2-alfresco-webscript/demo/package.json
View File

@@ -17,28 +17,6 @@
},
"license": "Apache-2.0",
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"@angular/upgrade": "2.0.0",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23",
"material-design-icons": "2.2.3",
"material-design-lite": "1.2.1",
"ng2-translate": "2.5.0",
"alfresco-js-api": "^0.3.0",
"ng2-alfresco-core": "^0.3.0",
"ng2-alfresco-datatable": "^0.3.0",
"ng2-alfresco-webscript": "^0.3.0"
},
"devDependencies": {

21
ng2-components/ng2-alfresco-webscript/demo/systemjs.config.js
View File

@@ -26,17 +26,8 @@
'ng2-translate': 'npm:ng2-translate',
'ng2-alfresco-core': 'npm:ng2-alfresco-core/dist',
'ng2-alfresco-datatable': 'npm:ng2-alfresco-datatable/dist',
'ng2-alfresco-documentlist': 'npm:ng2-alfresco-documentlist/dist',
'ng2-alfresco-login': 'npm:ng2-alfresco-login/dist',
'ng2-alfresco-search': 'npm:ng2-alfresco-search/dist',
'ng2-alfresco-upload': 'npm:ng2-alfresco-upload/dist',
'ng2-activiti-form': 'npm:ng2-activiti-form/dist',
'ng2-alfresco-viewer': 'npm:ng2-alfresco-viewer/dist',
'ng2-alfresco-webscript': 'npm:ng2-alfresco-webscript/dist',
'ng2-alfresco-tag': 'npm:ng2-alfresco-tag/dist',
'ng2-activiti-tasklist': 'npm:ng2-activiti-tasklist/dist',
'alfresco-js-api': 'npm:alfresco-js-api/dist',
'ng2-activiti-processlist': 'npm:ng2-activiti-processlist/dist'
'alfresco-js-api': 'npm:alfresco-js-api/dist'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
@@ -48,19 +39,9 @@
defaultExtension: 'js'
},
'ng2-translate': { defaultExtension: 'js' },
'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
'ng2-alfresco-datatable': { main: './index.js', defaultExtension: 'js'},
'ng2-alfresco-documentlist': { main: './index.js', defaultExtension: 'js'},
'ng2-alfresco-login': { main: './index.js', defaultExtension: 'js'},
'ng2-alfresco-search': { main: './index.js', defaultExtension: 'js'},
'ng2-alfresco-upload': { main: './index.js', defaultExtension: 'js'},
'ng2-alfresco-viewer': { main: './index.js', defaultExtension: 'js'},
'ng2-activiti-form': { main: './index.js', defaultExtension: 'js'},
'ng2-activiti-processlist': { main: './index.js', defaultExtension: 'js'},
'ng2-activiti-tasklist': { main: './index.js', defaultExtension: 'js'},
'ng2-alfresco-webscript': { main: './index.js', defaultExtension: 'js'},
'ng2-alfresco-tag': { main: './index.js', defaultExtension: 'js'},
'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'}
}
});

18
ng2-components/ng2-alfresco-webscript/package.json
View File

@@ -31,24 +31,6 @@
"url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
},
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"@angular/upgrade": "2.0.0",
"@types/node": "^6.0.42",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23",
"alfresco-js-api": "^0.3.0",
"ng2-translate": "2.5.0",
"ng2-alfresco-core": "0.3.2",
"ng2-alfresco-datatable": "0.3.2"
},