Codeer.LowCode.Blazor.Extras.Designer 0.2.0

Codeer.LowCode.Blazor.Extras

Codeer.LowCode.Blazor に高機能UIコンポーネントと、 アプリケーション開発でよく使うクライアント/サーバーサービスを追加する拡張ライブラリです。 ソースは MIT で公開しているため、動作を変えたい場合はクラスを丸ごと差し替えたり、ソースをコピーして改変できます。

パッケージ構成

提供フィールド

スクリプトオブジェクト

スクリプト (*.mod.cs) から利用できるサービス・型です。ExtrasClientInitializer.Initialize で一括登録されます。

各オブジェクトの正確なシグネチャと使用例は、デザイナの入力補完、またはデザイナ CLI の script-catalog サブコマンドが生成するカタログで確認できます。

クライアントサービス

アプリテンプレートの DI に登録して使う実装です。インターフェース (IHttpService / IToastService 等) で 登録するため、自前実装への丸ごと差し替えができます。

• HttpService — ローディング表示・エラー通知付きの HTTP 通信ラッパー
• UIService — ファイルダウンロード・通知トースト
• Logger — ブラウザコンソール + トースト通知のロガー
• ToastService — Sotsera.Blazor.Toaster ベースのトースト実装
• LocalizeService — TSV リソースによるローカライズ

サーバーサービス (Codeer.LowCode.Blazor.Extras.Server)

• AITextAnalyzeService — Azure Document Intelligence + Azure OpenAI による帳票・テキスト解析 (AITextAnalyzerField のサーバー側)
• SmtpMailService — MailMessage 対応の SMTP 送信
• DbAccessor — マルチDBアクセス (SQL Server / PostgreSQL / MySQL / Oracle / SQLite)
• StorageAccess / TemporaryFileManager — ファイルストレージ (ファイルシステム / Azure Blob) と一時ファイル管理
• CustomFontResolver — Excel PDF 変換用のフォントリゾルバ
• Web ヘルパ — ETag 付きファイル応答 (FileWithETag)、ホットリロード (HotReloadHub / FileWatcherService)

セットアップ

新しいアプリテンプレートで作成したプロジェクトには最初から組み込まれています。 既存プロジェクトに追加する場合は以下の手順で設定してください。

1. NuGet パッケージのインストール

2. コードの修正

LowCodeApp.Client.Shared

Services/AppInfoService.cs の AppInfoService コンストラクタに以下のコードを追加してください。

using Codeer.LowCode.Blazor.Extras;

// フィールドのみ使う場合
ExtrasClientInitializer.Initialize(this);

// スクリプトオブジェクト (Excel / WebApi / Toaster / Mail) も使う場合
ExtrasClientInitializer.Initialize(this, http, logger, toaster);

メール送信・Excel PDF 変換・AI 解析を使う場合は、エンドポイント URL を起動時に設定します (URL はアプリのコントローラに合わせて変更してください)。

using Codeer.LowCode.Blazor.Extras.Fields;
using Codeer.LowCode.Blazor.Extras.ScriptObjects;

MailService.SendMailEndPoint = "/api/mail";
Codeer.LowCode.Blazor.Extras.ScriptObjects.Excel.ConvertPdfEndPoint = "api/excel/pdf";
AITextAnalyzerField.FileToModuleDataEndPoint = "/api/ai_text_analyze/file";
AITextAnalyzerField.TextToModuleDataEndPoint = "/api/ai_text_analyze/text";

LowCodeApp.Server

Program.cs に以下のコードを追加してください。

using Codeer.LowCode.Blazor.Extras;

ExtrasServerInitializer.Initialize();

LowCodeApp.Designer

App.xaml.cs に以下のコードを追加してください。

using Codeer.LowCode.Blazor.Extras.Designer;

// OnStartup メソッド内
ExtrasDesignerInitializer.Initialize(BlazorRuntime);

3. セットアップ完了

以上でセットアップは完了です。Designer から Extras のフィールドが配置できるようになります。

カスタマイズ

ソースは MIT で公開しています。動作を変えたい場合は次のいずれかで対応できます。

• インターフェースで登録するサービス (IHttpService / IToastService / ITemporaryFileManager 等) は、自前実装を DI 登録して丸ごと差し替える
• それ以外のクラスは、このリポジトリのソースをコピーしてアプリ内で改変し、元のクラスの代わりに使う

各フィールドの詳細

各フィールドの詳しい説明は以下のドキュメントを参照してください。

• CalendarField - カレンダー
• GanttField - ガントチャート
• TaskBoardField - カンバンボード
• RichTextField - リッチテキストエディタ
• ColorPickerField - カラーピッカー
• MarkerListField - 画像マーカー
• QrCodeField - QRコード
• ProgressField - 進捗バー
• EnterFocusMoveField - Enterキーでフォーカス移動
• PasswordHashField - パスワードハッシュ
• OrientationLockField - 画面の向き制御
• AITextAnalyzerField - AI 帳票解析

CSS カスタマイズ

各フィールドの見た目はCSSで自由にカスタマイズできます。詳しくは CSS カスタマイズガイド を参照してください。

ライセンス

MIT License