Webデザイナコンポーネントの組み込み

Webデザイナコンポーネントは、様々なフロントエンドソリューションに組み込むことができるJavaScriptコンポーネントです。組み込む方法は、アプリケーションのアーキテクチャによって異なります。このトピックでは、最も人気のあるフロントエンドフレームワークに対していくつかの方法を説明しています。Webデザイナコンポーネントは、@grapecity/activereportsのnpmパッケージ内に配布されるため、Angular-CLI、CRA、Vue-CLIアプリケーションなどのJSバンドラーに基づいたアプリケーションに対してこのパッケージがインストールされていることが前提となります。

Angularアプリケーション

Webデザイナコンポーネントは、次のようにホストコンポーネントのngAfterViewInitコールバックで初期化できます。

import { Component, AfterViewInit } from "@angular/core";
import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";

@Component({
  selector: "app-designer-host",
  template: "<div id='designer-host'></div>",
  styleUrls: ["./designer-host.component.css"],
})
export class DesignerHostComponent implements AfterViewInit {
  constructor() {}

  ngAfterViewInit() {
    new ReportDesigner("#designer-host");
  }
}

AngularアプリケーションでWebデザイナコンポーネントを使用する方法については、Angularを参照してください。完全なコードについては、デモを参照してください。

Reactアプリケーション

Webデザイナコンポーネントは、ホストコンポーネントのcomponentDidMountハンドラ、またはReactエンジンが1回だけ呼び出すように、空の依存関係リストを使用するuseEffectフックで初期化できます。

import React from "react";
import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";

const initDesigner = (designerHostSelector) => {
  new ReportDesigner(designerHostSelector);
};

export const DesignerHost = () => {
  React.useEffect(() => initDesigner("#designer-host"), []);
  return <div id="designer-host"></div>;
};

ReactアプリケーションでWebデザイナコンポーネントを使用する方法については、Reactを参照してください。完全なコードについては、デモを参照してください。

Vueアプリケーション

Webデザイナコンポーネントは、次のようにマウントされたフックで初期化できます。

<template>
  <div id="designer-host"></div>
</template>

<script>
import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";

export default {
  name: "DesignerHost",
  mounted: function() {
    new ReportDesigner("#designer-host");
  },
};
</script>

VueアプリケーションでWebデザイナコンポーネントを使用する方法については、Vueを参照してください。完全なコードについては、デモを参照してください。

JavaScriptアプリケーション

JavaScriptアプリケーションは、次のようにCDNでホストされているスクリプトを使用します。

<script src="http://cdn.grapecity.com/activereportsjs/2.0.0-beta/dist/ar-js-core.js"></script>
<script src="http://cdn.grapecity.com/activereportsjs/2.0.0-beta/dist/ar-js-designer.js"></script>

これらのスクリプトが参照されると、GC.ActiveReports.ReportDesigner.Designerコンストラクタがグローバルスコープで利用可能になり、Webデザイナコンポーネントを初期化するために使用できます。

<div id="designer-host"></div>

<script>
  new GC.ActiveReports.ReportDesigner.Designer("#designer-host");
</script>

JavaScriptアプリケーションでWebデザイナコンポーネントを使用する方法については、JavaScriptを参照してください。完全なコードについては、デモを参照してください。