#967 internal demo for custom editors (demo shell)

demo-shell-ng2/app/app.module.ts

@@ -35,6 +35,7 @@ import { AnalyticsModule } from 'ng2-activiti-analytics';
 
 import { AppComponent } from './app.component';
 import { routing } from './app.routes';
+import { CustomEditorsModule } from './components/activiti/custom-editor/custom-editor.component';
 
 import {
     DataTableDemoComponent,
@@ -68,7 +69,8 @@ import {
         ActivitiTaskListModule.forRoot(),
         ActivitiProcessListModule.forRoot(),
         UserInfoComponentModule.forRoot(),
-        AnalyticsModule.forRoot()
+        AnalyticsModule.forRoot(),
+        CustomEditorsModule
     ],
     declarations: [
         AppComponent,

demo-shell-ng2/app/components/activiti/activiti-demo.component.ts

@@ -30,6 +30,9 @@ import {
     DataSorting
 } from 'ng2-alfresco-datatable';
 
+import { FormRenderingService } from 'ng2-activiti-form';
+import { CustomEditorComponent } from './custom-editor/custom-editor.component';
+
 declare let __moduleName: string;
 declare var componentHandler;
 
@@ -87,7 +90,7 @@ export class ActivitiDemoComponent implements AfterViewChecked {
     dataTasks: ObjectDataTableAdapter;
     dataProcesses: ObjectDataTableAdapter;
 
-    constructor(private route: ActivatedRoute) {
+    constructor(private route: ActivatedRoute, private formRenderingService: FormRenderingService) {
         this.dataTasks = new ObjectDataTableAdapter(
             [],
             [
@@ -105,6 +108,9 @@ export class ActivitiDemoComponent implements AfterViewChecked {
             ]
         );
         this.dataProcesses.setSorting(new DataSorting('started', 'desc'));
+
+        // Uncomment this line to replace all 'text' field editors with custom component
+        // formRenderingService.setComponentTypeResolver('text', () => CustomEditorComponent, true);
     }
 
     ngOnInit() {

demo-shell-ng2/app/components/activiti/custom-editor/custom-editor.component.ts

@@ -0,0 +1,23 @@
+import { NgModule, Component, ElementRef } from '@angular/core';
+import { TextFieldWidgetComponent } from 'ng2-activiti-form';
+
+@Component({
+    selector: 'custom-editor',
+    template: `
+        <div style="color: red">Look, I'm a custom editor!</div>
+    `
+})
+export class CustomEditorComponent extends TextFieldWidgetComponent {
+
+    constructor(elementRef: ElementRef) {
+        super(elementRef);
+    }
+
+}
+
+@NgModule({
+    declarations: [ CustomEditorComponent ],
+    exports: [ CustomEditorComponent ],
+    entryComponents: [ CustomEditorComponent ]
+})
+export class CustomEditorsModule {}

ng2-components/ng2-activiti-form/index.ts

@@ -32,10 +32,12 @@ import { WIDGET_DIRECTIVES } from './src/components/widgets/index';
 
 export * from './src/components/activiti-form.component';
 export * from './src/components/activiti-start-form.component';
+export * from './src/components/widgets/textfield-widget.component';
 export * from './src/services/form.service';
 export * from './src/components/widgets/index';
 export * from  './src/services/ecm-model.service';
 export * from  './src/services/node.service';
+export * from './src/services/form-rendering.service';
 
 export const ACTIVITI_FORM_DIRECTIVES: any[] = [
     ActivitiForm,