メインコンテンツへスキップ
サインイン

etupirkaTemplate導入手順

MSJ Admin
  • 更新

目標

etupirka(エトピリカ)テンプレートを導入することで
Magic xpaからレスポンシブ対応のタグを出力するものです。
Bootstrap5に対応しています。

対応バージョン

Magic xpa 4.8.1
4.8.1以下には対応しておりません。

Angularは13限定となります

Magic xpa にて行うこと

  1. Magic xpa 4.8 プロジェクト作成
  2. Web → Webアプリケーションの構築にてAngularのコードを作成

ここまでは通常のWebClientの構築と同じ手段です。

Magic xpa で変更するところ

Web→Webアプリケーションの設定のWebの設定にてテーマをネイティブに変更してください。
image.png (19.8 kB)

できないこと

テーブルコントロールの「プロパティWebスタイル」で「マテリアルデザイングリッド」は対応していませんので必ず、「HTMLテーブル」か「繰り返し可能な項目のみ」に変更してください。

VisualStudioCodeにて行う

こちらのコマンドをコピーアンドペーストして一行づつ行ってください
npm i bootstrap@5
npm i @ng-bootstrap/ng-bootstrap@12
npm i @fortawesome/fontawesome-free@6
npm i @popperjs/core

ファイルのダウンロード･解凍

assets.zip (178.8 kB)
上記のassets.zipを解凍して

src\assetsフォルダにscssフォルダとimgフォルダをコピー

angular.jsonの修正

32行目当たりの"styles": [の中を追記、修正します。
css、scssを読み込む順番も関係あります。

            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
　　　　　　　 "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
              "src/styles.css",
              ".//src/magic-styles.css",

              "src/assets/scss/main.scss",
              "src/assets/scss/sidemenu.scss"

            ],

40行目あたりの"scripts": [の中にfortawesomeを使用するjavascriptをコールしておきます。

            "scripts": [
              "node_modules/@fortawesome/fontawesome-free/js/all.min.js"
            ]

@magic-xpa を入れ替え

@magic-xpa.zip (8.6 MB)

node_modules内の@magic-xpaフォルダをリネームまたは削除して上記のファイルを解凍して置換します。

node_modules@magic-xpa\cliの中身は以下のようになっているはずです。

image.png (33.0 kB)

tsconfig.json に以下を設定

"compilerOptions": {内に以下の三行を追加します

    "strictNullChecks": false,  /* 厳密なヌルチェックを有効にします。 */
    "noImplicitAny": false,     /* 暗黙の 'any'型で式と宣言のエラーを発生させます。 */
    "noImplicitThis":false,     /* 暗黙の 'this'使用で式と宣言のエラーを発生させます。 */

Routingの再構築

ルーティングが設定されたプログラムがあれば再作成する

ここまでを行うと

ここまでを行いMagicプログラムを再生成するとBootstrapテンプレート対応のフォームが出力されます。

でも各HTMLに手を入れる必要があります。

一番上のタスクのHTMLについて変更する必要があります。
例えばTestMenuというプログラムだと

<div
    novalidate
    [formGroup]="screenFormGroup"
>
    <div [magic]="mgc.TestMenu">

となっているのですが

<div
    novalidate
    [formGroup]="screenFormGroup"
>
    <div [magic]="mgc.TestMenu" class="container-fluid">

と、container-fluidクラスを追加してください

カスタムアラート・カスタムオーバーレイ

通常の警告などのデザインを変更します

image.png (23.7 kB)image.png (23.6 kB)

src\app\magic_Custom のコピー

_Custom.zip (11.3 kB)

上記のファイルを\src\app\magicフォルダ内に解凍します。

src\app\app.module.tsを設定

11行目あたりの
import { LazyLoaderService } from './magic/lazy-loader.service';
の下に次の３行を追加します。

/**
 * カスタムオーバーレイ
 */
 import { OverlayContainerMagicProvider } from '@magic-xpa/angular';
 import { OverlayContainer } from './magic/_Custom/custom-overlay/custom-overlay';
 import { OverlayContainerProvider } from './magic/_Custom/custom-overlay/custom-overlayProvider';

declarations: [の中にOverlayContainerを設定します。また、entryComponentsグループが無いので追加いたします。

declarations: [
    AppComponent,
    OverlayContainer
  ],
  entryComponents: [
    OverlayContainer,
  ],

providers:グループを以下のように設定します。

 providers: [    {
  provide: OverlayContainerMagicProvider,
  useClass: OverlayContainerProvider,
},{ provide: MagicLazyLoaderService, useClass: LazyLoaderService }],

src\app\magic\magic.gen.lib.module.ts を設定

31行目あたりのimport {CurrencyMaskConfig, CurrencyMaskInputMode, NgxCurrencyModule} from "ngx-currency";の下に追加します。

  // カスタムアラート
import { ConfirmationComponentsMagicProvider } from "@magic-xpa/angular";
import { CustomAlertComponent } from './_Custom/custom-alert/custom-alert.component';
import { customConfirmationMagicProviderService } from './_Custom/customConfirmationMagicProviderService';
import { CustomCnfComponent } from './_Custom/custom-cnf/custom-cnf.component';

declarations: グループに以下の2行を追加します。

declarations: [
  ...magicGenComponents,
  CustomAlertComponent,
  CustomCnfComponent
],

providers: グループを以下のように設定します

   providers: [ExitMagicService, 
   { provide: ConfirmationComponentsMagicProvider, useClass: customConfirmationMagicProviderService }],

これでエラーや警告の表示がカッコよくなったはずです。

関連記事

コメント

0件のコメント

サインインしてコメントを残してください。

この記事は役に立ちましたか？
0人中0人がこの記事が役に立ったと言っています