Angular 2 and Wijmo 5 - GrapeCity Echo 2016 Tokyo

Angular 2 and Wijmo 5
Next generation of Google’s
Development Framework
with integrated Wijmo components

Angular 2
• Angular 2 Alpha - first requests for Wijmo integration.
• Angular 2 Beta – first customers started development
of their LOB applications.
• Angular RC – there are customers in the middle or
end of their app development.

What is Angular 2 application?
• Consists of Components
– application component
– view components
– UI control components

What is Component?
<element name>
Property bindings
Event bindings
TypeScript class
Template
@Component
Behavior
Run-time API
Look

Component example
@Component({
selector: 'date-time-view',
template: `
<wj-input-date #date [(value)]="dateTime" [format]="'d'"></wj-input-date>
<wj-input-time #time [(value)]="dateTime" [format]="'t'"></wj-input-time>
<b>Date, Time:</b> {{dateTime}}`,
directives: [WjInputDate, WjInputTime]
})
export class DateTimeView {
dateTime = new Date();
increment(days: number) {
this.dateTime = new Date(this.dateTime.getTime() + days * 24*60*60*1000);
}
}

Component features
• Reusable piece of application
• Component can be used in other component
templates
– create component hierarchy
Template
TypeScript class
@Component

Root application component
• Is a regular component
• Specific functionality:
– Bootstrap
– SPA navigation - Router

Root component - navigation
<a [routerLink]="['/DateTimePureJsView']">
Date Time Pure JS</a>
<router-outlet></router-outlet>
Create and
insert
Component
click
Find Route
Definition
@RouteConfig([
{component: DateTimePureJsView,
name: 'DateTimePureJsView',
path: '/UsingWijmo/DateTimePureJsView'},
……
])

Root component class
@Component({ selector: 'app-cmp', ... })
@RouteConfig([
{ path: '/', redirectTo: ['DateTimePureJsView'] },
{ path: '/UsingWijmo/DateTimePureJsView',
component: DateTimePureJsView, name: 'DateTimePureJsView' },
{ path: '/UsingWijmo/dateTimeView',
component: DateTimeView, name: 'DateTimeView' },
...
])
export class AppCmp {
}
bootstrap(AppCmp);

Root component template
<ul class="flatList">
<li>
<a [routerLink]="['/DateTimePureJsView']">Date Time Pure JS</a>
</li>
<li >
<a [routerLink]="['/DateTimeView']">Date Time Angular 2</a>
</li>
</ul>
...
<div class="col-md-9" >
<router-outlet></router-outlet>
</div>

What is Wijmo Interop?
Wijmo library
Wijmo Angular 2 interop
InputDate InputNumber Other controls…
WjInputDate WjInputNumber
Other
components…
Set of UI
Controls
Pure JS, no
dependencies
TypeScript
classes
Derived from
Controls
Set of Angular 2
components

Controls vs. Components - templates
Control
<div id="date"></div>
<div id="time"></div>
Date, Time: {{dateTime}}
Component
<wj-input-date #date
[(value)]="dateTime"
[format]="'d'">
</wj-input-date>
<wj-input-time #time
[(value)]="dateTime"
[format]="'t'">
</wj-input-time>
Date, Time: {{dateTime}}

Controls vs. Components - code
Control
export class DateTimePureJsView implements AfterViewInit {
private _dateTime; // = new Date();
private _inputDate: wijmo.input.InputDate;
private _inputTime: wijmo.input.InputTime;
get dateTime(): Date {
return this._dateTime;
}
set dateTime(value: Date) {
if (!wijmo.DateTime.equals(this._dateTime, value)) {
console.log('dateTime setter');
this._dateTime = value;
this._inputDate.value = this._dateTime;
this._inputTime.value = this._dateTime;
}
}
ngAfterViewInit() {
this._inputDate = new wijmo.input.InputDate('#date');
this._inputTime = new wijmo.input.InputTime('#time');
this._inputDate.valueChanged.addHandler(() => { this._onUiDateTimeChanged(); });
this._inputTime.valueChanged.addHandler(() => { this._onUiDateTimeChanged(); });
this.dateTime = new Date();
}
private _onUiDateTimeChanged() {
this.dateTime = wijmo.DateTime.fromDateTime(this._inputDate.value,
this._inputTime.value);
}
}
Component
export class DateTimeView {
dateTime = new Date();
}

Wijmo Component implementation – key steps
<my-input-number
[step]="1"
(valueChanged)=“onChange()“
[(value)]=“amount"
>
</my-input-number>
two-way bindings
event bindings
property bindings
element name
translate
Wijmo
events
splits to property + event bindings:
[value]=“amount”
(valueChange)=“amount=$event”

Wijmo Component implementation example
@Component({
selector: 'my-input-number', template: '',
inputs: ['isRequired', 'value', 'format', 'step', 'placeholder'],
outputs: ['valueChangedImpl: valueChanged', 'valueChange'],
})
export class MyInputNumber extends wijmo.input.InputNumber {
valueChangedImpl = new EventEmitter(false);
valueChange = new EventEmitter(false);
constructor( @Inject(ElementRef) elRef: ElementRef) {
super(elRef.nativeElement);
}
onValueChanged(e?: wijmo.EventArgs) {
super.onValueChanged(e);
this.valueChangedImpl.emit(e);
this.valueChange.emit(this.value);
}
}

Wijmo Component implementation
• Lightweight
• Minimal code overhead
• No performance penalties

Complex components - FlexGrid
• Create grid with columns declaratively
• wj-flex-grid component for FlexGrid
• wj-flex-grid-column child components
for grid Columns

FlexGrid with columns
<wj-flex-grid #grid [itemsSource]="reservations" [allowAddNew]="true">
<wj-flex-grid-column [header]="'Check-in'" [binding]="'checkIn'“
[width]="130"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'Check-out'" [binding]="'checkOut'"
<wj-flex-grid-column [header]="'Price per Night'" [binding]="'pricePerNight'"
[format]="'c2'" [width]="140"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'Discount'" [binding]="'discount'" [format]="'p2'"
</wj-flex-grid>

FlexGrid with cell templates
• Customize cell content using templates
• Allows any valid Angular markup
– components with bindings
– interpolation expressions
• Customize any kind of cells
– data cells
– cell editors
– column/row/group headers
– any others

Data cell template
<wj-flex-grid-column [header]="'Discount'" [binding]="'discount'"
[format]="'p2'" [width]="140">
<template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
<span [ngStyle]="cell.item.discount > 0.1 ?
{color: 'red', textDecoration: 'underline'} : {}">
{{grid.getCellData(cell.row.index, cell.col.index, true)}}
</span>
</template>
</wj-flex-grid-column>
</wj-flex-grid>

Cell editor template
<wj-flex-grid-column [header]="'Check-in'" [binding]="'checkIn'“
[width]="130">
<template wjFlexGridCellTemplate [cellType]="'CellEdit'" let-cell="cell">
<wj-input-date [(value)]="cell.value" [isRequired]="false"></wj-input-date>
</template>
</wj-flex-grid-column>
</wj-flex-grid>

Cons – Learning curve
• TypeScript
• ES6 modules, module loaders
• Angular 2
Components Routing Animations Structural
Directives
Lifecycle
Hooks
Template
syntax
Attribute
Directives
Injection Local styles Pipes
HTTP client Offline
compiler
Universal
applications
Rendering
layer
Zones

Pros - Solid foundation
• Solid foundation for app development
• Covers all the application aspects – view, controller,
app wide services, client-server interaction
• Uses modern OOP language – TypeScript
• Forces you to build app from reusable units,
components, that provide a highest level of
maintainability and testability.

Thank You!
Angular 2 and Typescript:
• https://angular.io
• https://angular.io/docs/ts/latest/quickstart.html
• https://www.typescriptlang.org/index.html
Wijmo for Angular 2
• http://wijmo.com/angular2/
• http://demos.wijmo.com/5/SampleExplorer/SampleExplorer/Sample/Explorer
• http://wijmo.com/blog/best-angular-2-data-grid-flexgrid/
• http://wijmo.com/blog/angular-2-first-impressions-the-wijmo-dev-team/

Angular 2 and Wijmo 5 - GrapeCity Echo 2016 Tokyo

More Related Content

What's hot (20)

Recently uploaded (20)

Angular 2 and Wijmo 5 - GrapeCity Echo 2016 Tokyo

Editor's Notes