| ページ一覧 | ブログ | twitter |  書式 | 書式(表) |

MyMemoWiki

「Wijmo」の版間の差分

提供: MyMemoWiki
ナビゲーションに移動 検索に移動
 
(同じ利用者による、間の1版が非表示)
7行目: 7行目:
 
<pre>
 
<pre>
 
$ npm install @grapecity/wijmo.all
 
$ npm install @grapecity/wijmo.all
 +
</pre>
 +
 +
===Sample===
 +
* https://github.com/pppiroto/visappproto
 +
 +
==[[Angular]]==
 +
===オートコンプリートでthisが見えない(コンポーネントでない)===
 +
<pre>
 +
        <wj-auto-complete #theAutoComplete id="autoFirstName"
 +
            [placeholder]="'FIRST_NAME'"
 +
            [displayMemberPath]="'masterValue'"
 +
            [itemsSourceFunction]="getFirstNameBySearch">
 +
        </wj-auto-complete>
 +
</pre>
 +
 +
<pre>
 +
import { Component, Inject, OnInit, ViewChild } from '@angular/core';
 +
import * as wjcCore from '@grapecity/wijmo';
 +
import * as wjcGrid from '@grapecity/wijmo.grid';
 +
import * as input from '@grapecity/wijmo.input';
 +
 +
import { Employee } from '../../models/employee';
 +
import { EmployeeService } from '../../services/employee.service';
 +
import { MasterKeyValue } from 'src/app/models/masterKeyValue';
 +
import { MasterService } from 'src/app/services/master.service';
 +
 +
@Component({
 +
  selector: 'app-employees',
 +
  templateUrl: './employees.component.html',
 +
  styleUrls: ['./employees.component.css'],
 +
})
 +
export class EmployeesComponent implements OnInit {
 +
 +
  public employees: Employee[] = [];
 +
  selectedItem: string = "";
 +
  jobIdList: string[] = [];
 +
  jobId: string = "";
 +
 +
  @ViewChild('flex', { static: true })
 +
  flex!: wjcGrid.FlexGrid;
 +
 +
  constructor(private masterService: MasterService, private employeeService: EmployeeService) {
 +
    console.log('constructor');
 +
    console.log(`${this.employeeService.getBaseUrl()}`);
 +
  }
 +
 +
  flexInitialized(flexgrid: wjcGrid.FlexGrid) {
 +
    // sort the data by country
 +
    let sd = new wjcCore.SortDescription('employeeId', true);
 +
    flexgrid.collectionView.sortDescriptions.push(sd);
 +
    flexgrid.collectionView.currentChanged.addHandler(this._updateCurrentInfo.bind(this));
 +
    this._updateCurrentInfo();
 +
  }
 +
 +
  private _updateCurrentInfo() {
 +
    console.log(`this.employeeService = ${this.employeeService}`);
 +
      // this.selectedItem = wjcCore.format(
 +
      //    '国: <b>{country}</b>、売上: <b>{sales:c0}</b>、費用: <b>{expenses:c0}</b>',
 +
      //    this.flex.collectionView.currentItem);
 +
  }
 +
 +
  // JOB_ID データソースロード
 +
  async loadJobIdList() {
 +
    try {
 +
      let jobIdList: MasterKeyValue[]
 +
        = await this.masterService.getJobIdList().toPromise();
 +
      let buf: string[] = [];
 +
      jobIdList.forEach((mst, idx) =>  buf.push(`${mst.masterValue}`));
 +
      this.jobIdList = buf;
 +
    } catch (error) {
 +
      console.log(error);
 +
    }
 +
  }
 +
 +
  getFirstNameBySearch(query: string, max: number, callback: Function) {
 +
    console.log(this); // this -> AutoCompleteコントロール
 +
   
 +
    if (!query) {
 +
        callback(null);
 +
        return;
 +
    }
 +
 +
    // TODO Service で処理をしたい
 +
    // 本関数は、AutoComplete のプロパティにセットされるため、
 +
    // ComponentにDIされてたサービスの参照方法が現在不明
 +
    // 最悪この書き方だとしても、同様にDIされるbaseURL を解決する必要がある。。。
 +
    //
 +
    // Function.prototype.bind() を利用して、変数を束縛する
 +
    // https://typescript-jp.gitbook.io/deep-dive/main-1/bind
 +
    // アロー関数のチェーン
 +
    // https://typescript-jp.gitbook.io/deep-dive/main-1/currying
 +
    wjcCore.httpRequest(`https://localhost:44472/Autocomplete/EmployeeFirstname?id=${encodeURIComponent(query)}`, {
 +
        success: (xhr: XMLHttpRequest) => {
 +
            let response = JSON.parse(xhr.response);
 +
            callback(response);
 +
        }
 +
    });
 +
  }
 +
  // Service 使用に書き換え From
 +
  async getFirstNameBySearchBindComponent(thisComponent: EmployeesComponent, query: string, max: number, callback: Function) {
 +
    console.log(thisComponent.employeeService);
 +
    if (!query) {
 +
      callback(null);
 +
      return;
 +
    }
 +
    try {
 +
      let result = await this.masterService.firstNameAutoComplete(query).toPromise();
 +
      console.log(result);
 +
      callback(result);
 +
    } catch(error) {
 +
      console.error(error);
 +
    }
 +
  }
 +
  getFirstNameBySearch2: Function = (query: string, max: number, callback: Function) =>
 +
  this.getFirstNameBySearchBindComponent(this, query, max, callback);
 +
  // Service 使用に書き換え To
 +
 +
  async searchSync() {
 +
    this.employees.splice(0);
 +
    this.employees = [];
 +
   
 +
    // Observable は宣言型で、購読するまで処理が開始されない。Promise は作成時に直ちに実行
 +
    // Observable は多くの値を提供します。Promise は1つです
 +
    try {
 +
      this.employees = await this.employeeService.getEmployees().toPromise();
 +
    } catch(error) {
 +
      console.error(error);
 +
    }
 +
  }
 +
 +
  searchASync() {
 +
    this.employees.splice(0);
 +
    this.employees = [];
 +
 +
    this.employeeService.getEmployees().subscribe(
 +
      result => {
 +
        this.employees = result;
 +
      },
 +
      error => {
 +
        console.error(error);
 +
      });
 +
  }
 +
 +
  ngOnInit(): void {
 +
    this.loadJobIdList();
 +
  }
 +
 +
}
 
</pre>
 
</pre>

2022年11月14日 (月) 11:21時点における最新版

Wijmo

| Angular |

Angular クイックスタート

インストール

$ npm install @grapecity/wijmo.all

Sample

Angular

オートコンプリートでthisが見えない(コンポーネントでない)

        <wj-auto-complete #theAutoComplete id="autoFirstName" 
            [placeholder]="'FIRST_NAME'" 
            [displayMemberPath]="'masterValue'"
            [itemsSourceFunction]="getFirstNameBySearch">
        </wj-auto-complete>
import { Component, Inject, OnInit, ViewChild } from '@angular/core';
import * as wjcCore from '@grapecity/wijmo';
import * as wjcGrid from '@grapecity/wijmo.grid';
import * as input from '@grapecity/wijmo.input';

import { Employee } from '../../models/employee';
import { EmployeeService } from '../../services/employee.service';
import { MasterKeyValue } from 'src/app/models/masterKeyValue';
import { MasterService } from 'src/app/services/master.service';

@Component({
  selector: 'app-employees',
  templateUrl: './employees.component.html',
  styleUrls: ['./employees.component.css'],
})
export class EmployeesComponent implements OnInit {

  public employees: Employee[] = [];
  selectedItem: string = "";
  jobIdList: string[] = [];
  jobId: string = "";

  @ViewChild('flex', { static: true })
  flex!: wjcGrid.FlexGrid;

  constructor(private masterService: MasterService, private employeeService: EmployeeService) { 
    console.log('constructor');
    console.log(`${this.employeeService.getBaseUrl()}`);
  } 

  flexInitialized(flexgrid: wjcGrid.FlexGrid) {
    // sort the data by country
    let sd = new wjcCore.SortDescription('employeeId', true);
    flexgrid.collectionView.sortDescriptions.push(sd);
    flexgrid.collectionView.currentChanged.addHandler(this._updateCurrentInfo.bind(this));
    this._updateCurrentInfo();
  }

  private _updateCurrentInfo() {
    console.log(`this.employeeService = ${this.employeeService}`);
      // this.selectedItem = wjcCore.format(
      //     '国: <b>{country}</b>、売上: <b>{sales:c0}</b>、費用: <b>{expenses:c0}</b>',
      //     this.flex.collectionView.currentItem);
  }

  // JOB_ID データソースロード
  async loadJobIdList() {
    try {
      let jobIdList: MasterKeyValue[] 
        = await this.masterService.getJobIdList().toPromise();
      let buf: string[] = [];
      jobIdList.forEach((mst, idx) =>  buf.push(`${mst.masterValue}`));
      this.jobIdList = buf;
    } catch (error) {
      console.log(error);
    }
  }

  getFirstNameBySearch(query: string, max: number, callback: Function) {
    console.log(this); // this -> AutoCompleteコントロール
    
    if (!query) {
        callback(null);
        return;
    }

    // TODO Service で処理をしたい
    // 本関数は、AutoComplete のプロパティにセットされるため、
    // ComponentにDIされてたサービスの参照方法が現在不明
    // 最悪この書き方だとしても、同様にDIされるbaseURL を解決する必要がある。。。
    // 
    // Function.prototype.bind() を利用して、変数を束縛する 
    // https://typescript-jp.gitbook.io/deep-dive/main-1/bind
    // アロー関数のチェーン
    // https://typescript-jp.gitbook.io/deep-dive/main-1/currying
    wjcCore.httpRequest(`https://localhost:44472/Autocomplete/EmployeeFirstname?id=${encodeURIComponent(query)}`, {
        success: (xhr: XMLHttpRequest) => {
            let response = JSON.parse(xhr.response);
            callback(response);
        }
    });
  }
  // Service 使用に書き換え From
  async getFirstNameBySearchBindComponent(thisComponent: EmployeesComponent, query: string, max: number, callback: Function) {
    console.log(thisComponent.employeeService); 
    if (!query) {
      callback(null);
      return;
    }
    try {
      let result = await this.masterService.firstNameAutoComplete(query).toPromise();
      console.log(result);
      callback(result);
    } catch(error) {
      console.error(error);
    }
  }
  getFirstNameBySearch2: Function = (query: string, max: number, callback: Function) => 
  this.getFirstNameBySearchBindComponent(this, query, max, callback);
  // Service 使用に書き換え To

  async searchSync() {
    this.employees.splice(0);
    this.employees = [];
    
    // Observable は宣言型で、購読するまで処理が開始されない。Promise は作成時に直ちに実行
    // Observable は多くの値を提供します。Promise は1つです
    try {
      this.employees = await this.employeeService.getEmployees().toPromise();
    } catch(error) {
      console.error(error);
    }
  }

  searchASync() {
    this.employees.splice(0);
    this.employees = [];

    this.employeeService.getEmployees().subscribe(
      result => {
        this.employees = result;
      }, 
      error => {
        console.error(error);
      });
  }

  ngOnInit(): void {
    this.loadJobIdList();
  }

}