inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +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

1
ng2-components/ng2-alfresco-tag/README.md
View File

@@ -1,4 +1,5 @@
# Alfresco Tag 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

158
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,30 +109,24 @@ 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';
@@ -114,16 +134,32 @@ export class AppComponent {
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,6 +282,7 @@ 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:
@@ -254,10 +291,10 @@ 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
@@ -266,7 +303,7 @@ npm run build:w
npm test
```
## Running unit tests in browser
### Running unit tests in browser
```sh
npm test-browser
@@ -275,7 +312,7 @@ npm test-browser
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"
},