Merge branch 'image-example'

Author: hdeshev

ng-sample/app/App_Resources/iOS/300x300.jpg

@@ -24,4 +24,21 @@ button {
 
 .even {
     background-color: lightseagreen;
+}
+
+.btn {
+    horizontal-align: stretch;
+    text-align: center;
+    color:#3F60F9;
+}
+
+.btn-primary {
+  background-color: #3F60F9;
+  color: #fff;
+  padding: 10px 20px;
+}
+
+.input {
+  margin: 30px;
+  color:#444;
 }

ng-sample/app/app.css

@@ -0,0 +1,62 @@
+import {Component} from 'angular2/core';
+
+/* IMPORTANT
+In order to test out the full image example, to fix the App Transport Security error in iOS 9, you will need to follow this after adding the iOS platform:
+
+https://blog.nraboy.com/2015/12/fix-ios-9-app-transport-security-issues-in-nativescript/
+*/
+
+@Component({
+    selector: 'image-test',
+    template: `
+    <StackLayout horizontalAlignment="center">
+        <Image [src]="currentImage" width="300" height="300"></Image>
+        <GridLayout columns="*, *" rows="auto">
+          <Button text="Previous" (tap)="changeImage(-1)" row="0" col="0" cssClass="btn"></Button>
+          <Button text="Next" (tap)="changeImage(1)" row="0" col="1" cssClass="btn"></Button>
+        </GridLayout>
+        
+        <TextField #url hint="Enter URL to any image" cssClass="input"></TextField>
+        <Button text="Add Image" (tap)='addImage($event, url.text)' cssClass="btn-primary"></Button>
+    </StackLayout>
+    `
+})
+export class ImageTest {
+  
+  public currentImage: string;
+  private images: Array<string> = [
+    'res://300x300.jpg',
+    '~/examples/image/img/Default.png',
+    'http://www.codeproject.com/KB/mobile/883465/NativeScript.png'
+  ];
+  private cnt: number = 0;
+
+  constructor() { 
+    this.currentImage = this.images[this.cnt];
+  }
+  
+  changeImage(direction: number) {
+    if (direction > 0) {
+      this.cnt++;
+    } else {
+      this.cnt--;
+    }
+    if (this.cnt === this.images.length) {
+      // start over
+      this.cnt = 0;
+    } else if (this.cnt < 0) {
+      // go to end
+      this.cnt = this.images.length - 1;
+    }
+    this.currentImage = this.images[this.cnt];
+  }
+  
+  addImage(e: any, name: string): void {
+    if (name.indexOf('http') === -1) {
+      alert(`Must be a valid url to an image starting with 'http'!`);
+    } else {
+      this.images.push(name); 
+      this.currentImage = this.images[this.images.length - 1];
+    }
+  }
+}

ng-sample/app/examples/image/image-test.ts

@@ -0,0 +1,71 @@
+import {Component, Input} from 'angular2/core';
+
+class DataItem {
+    constructor(public id: number, public name: string) { }
+}
+
+@Component({
+    selector: 'item-component',
+    template: `
+        <StackLayout [class.odd]="odd" [class.even]="even">
+            <Label [text]='"id: " + data.id'></Label>
+            <Label [text]='"name: " + data.name'></Label>
+        </StackLayout>
+    `
+})
+export class ItemComponent {
+    @Input() data: DataItem;
+    @Input() odd: boolean;
+    @Input() even: boolean;
+    constructor() { }
+}
+
+@Component({
+    selector: 'list-test',
+    directives: [ItemComponent],
+    template: `
+            <GridLayout rows="auto, *, auto">
+            <Label row="0" text="-==START==-" fontSize="20"></Label>
+            <GridLayout row="1">
+                <ListView [items]="myItems" (itemTap)="onItemTap($event)">
+                    <item-template>
+                        <template #item="item" #i="index" #odd="odd" #even="even">
+                            <StackLayout [class.odd]="odd" [class.even]="even">
+                                <Label [text]='"index: " + i'></Label>
+                                <Label [text]='"[" + item.id +"] " + item.name'></Label>
+                            </StackLayout>
+                        </template>
+                    </item-template>
+                </ListView>
+            </GridLayout>
+            <Label row="2" text="-==END==-" fontSize="20"></Label>
+        </GridLayout>
+    `
+    // TEMPLATE WITH COMPONENT
+    // <template #item="item" #i="index" #odd="odd" #even="even">
+    //     <item-component [data]="item" [odd]='odd' [even]='even'></item-component>
+    // </template>
+    
+    // IN-PLACE TEMPLATE
+    // <template #item="item" #i="index" #odd="odd" #even="even">
+    //     <StackLayout [class.odd]="odd" [class.even]="even">
+    //         <Label [text]='"index: " + i'></Label>                        
+    //         <Label [text]='"[" + item.id +"]" + item.name'></Label>
+    //     </StackLayout>
+    // </template>
+})
+export class ListTest {
+    public myItems: Array<DataItem>;
+
+    constructor() {
+        this.myItems = [];
+        for (var i = 0; i < 30; i++) {
+            this.myItems.push(new DataItem(i, "data item " + i));
+        }
+    }
+
+    public onItemTap(args) {
+        console.log("------------------------ ItemTapped: " + args.index);
+    }
+}
+

ng-sample/app/examples/image/img/Default.png

@@ -7,7 +7,8 @@ import {nativeScriptBootstrap} from './nativescript-angular/application';
 // import {Benchmark} from './performance/benchmark';
 // import {RendererTest} from './examples/renderer-test';
 // import {ListTest} from './examples/list/list-test';
-import {ListTestAsync} from './examples/list/list-test-async';
+// import {ListTestAsync} from './examples/list/list-test-async';
+import {ImageTest} from './examples/image/image-test';
 
 export function createPage() {
     var page = new Page();
@@ -21,7 +22,8 @@ export function createPage() {
         // nativeScriptBootstrap(Benchmark, []).then((appRef) => {
         // nativeScriptBootstrap(RendererTest, []).then((appRef) => {
         // nativeScriptBootstrap(ListTest, []).then((appRef) => {
-        nativeScriptBootstrap(ListTestAsync, []).then((appRef) => {
+        // nativeScriptBootstrap(ListTestAsync, []).then((appRef) => {
+        nativeScriptBootstrap(ImageTest, []).then((appRef) => {
             profiling.stop('ng-bootstrap');
             console.log('ANGULAR BOOTSTRAP DONE.');
         }, (err) =>{