node red contrib uibuilder
Bug fix
Node-RED用のuibuilderを使用すると、データ駆動型のフロントエンドWebアプリケーションを簡単に作成できます。
これには、データ駆動型のWebアプリケーションを構築するためのコードを作成する必要性を削減または排除できる多くのヘルパー機能と、ノードレッドと統合されたユーザーインターフェイスが含まれています。
注記
uibuilderは、フロースコアカードエントリで品質の警告をトリガーします。
「依存関係の数」は> 6です。これは、uibuilderの多数の機能によるもので、予想されます。それでも、V7には7つの依存関係しかありません。さらに1つは、将来のリリースで削除される予定です。
Uibuilderは、Node-Redのパレットマネージャーを使用してインストールするのが最適です。
ノードレッドサーバーのコマンドラインから手動でインストールするには：
cd ~ /.node-red
npm install node-red-contrib-uibuilder古いバージョンをインストールするには、メジャーバージョン番号を提供します。
cd ~ /.node-red
npm install node-red-contrib-uibuilder@v5開発ブランチをインストールするには、Githubからインストールしてください。 BranchNamesは将来のバージョン番号です。Githubを確認してください。
cd ~ /.node-red
npm install totallyinformation/node-red-contrib-uibuilder#v7.1.0手動でインストールする場合は、ノードレッドを再起動する必要があります。
現在のChangelogには、各バージョンのすべての変更と要件の詳細が含まれています。
古い変更は、以前の変更ドキュメントで見つけることができます：changelog-v5、changelog-v5、changelog-v3/v4、changelog-v2、およびchangelog-v2。
インストールすると、以下は典型的な単純なフローです。
uibuilderノードを追加します。設定を開き、識別名として使用される「URL」を提供します。設定を閉じて、展開ボタンをクリックします。uibuilderノードの設定を再開し、[開く]ボタンをクリックして、結果のWebページを表示します。必要に応じて、フロントエンドのHTML/JavaScript/CSSを編集し、入力を提供して出力を処理するためにノードレッドにロジックを追加する準備ができました。 UIBUilderのノーコード機能を使用して、UIも作成または代わりに作成することもできます。
ドキュメントの最初のタイマーのウォークスルーと、より多くのヘルプを開始するための紹介ビデオをご覧ください。また、組み込みのサンプルフローを試してください。
ノードレッド内で、ハンバーガーメニューを使用します。 [インポート]をクリックします。例をクリックします。 Node-Red-Contrib-Uibuilderフォルダーを選択し、例を選択します。
Uibuilderのテンプレート機能は、さまざまな構成の作業フロントエンドコードを提供します。
他の例は、ノードレッドフローサイトとuibuilder wikiにあります。また、FAQを参照して、ノードレッドフォーラムで質問に答えました。
ドキュメントWebサイトを参照してください。これは、インターネット接続がなくても、uibuilderノード内からアクセスすることもできます。
YouTubeには「公式」ビデオチュートリアルのライブラリがあります。他の人々はまた、Uibuilder関連のコンテンツを生産しています。
質問をしたり、可能な機能強化について話し合うのに最適な場所は、ノードレッドフォーラムです。
または、Githubの問題ログを使用して、問題を提起したり、提案や拡張機能を提供したり、一般的な質問、提案などについてはGitHubディスカッションページを使用したりします。
node-red用のuibuilder
？ UIBUILDERが使用するUIライブラリモジュール - UI標準構成JSONをHTMLに変えるためにスタンドアロンを使用できます
？ Node-Red-Contrib-Moment-Node-Redのモーメントjs日付/時刻処理ライブラリを使用するノード
？ノードレッドのテストノード - すべてがどのように機能するかを理解するのに役立つノードレッド用のテストノード
？ HotnipiゲージWebコンポーネント - 本当に見栄えの良いゲージコンポーネント。 Node-Red、Uibuilder、またはStand-Aloneで動作します
？実験的なWebコンポーネント - ノードレッドとuibuilder固有の拡張機能をいくつか持っていますが、スタンドアロンもうまく機能します
？アレイハタ - オブジェクトの配列を再構築するためのスタンドアロン関数
uibuilderの目的は次のとおりです。
uibuilderのコア機能：
uibuilderノードインスタンスを用意してください。各インスタンスを使用すると、多くのWebページとサブフォルダーを作成して、簡単に管理できます。uibuilderノードインスタンスは、ノードレッドサーバー（バックエンド）とブラウザ（フロントエンド）UIコードの間のプライベート2ウェイ通信チャネルを提供します。 Uibuilderは、ノーコード機能を拡大し続けています。 uib-element 、 uib-tag 、およびuib-updateノードは、データ駆動型のWeb UIを作成および更新するためのノーコードメソッドを提供します。
uib-element簡単なデータを取り入れ、構成データを出力します。これは、 uibuilderノードを介してフロントエンドに送信できます。あるいは、保存することができ、結果は初期負荷で使用されます。テーブルやリストなどのいくつかの簡単なオプションは、uibuilder v6.1で利用できます。追加の要素と構造は、将来のバージョンで利用可能になります。 uibuilderのフロントエンドクライアントは、構成情報を取得し、HTML要素を動的にビルドし、それらをWebページに挿入します（または必要に応じて削除/更新）。
これは最も効率的な処理アプローチではありませんが（更新は主に大きなテーブルのようなもので非常に大きい可能性のある要素全体を置き換えるためです）、オーサリングの観点からは非常に効率的です。したがって、 uib-updateノードは、特定の属性と要素の「スロット」コンテンツを更新および変更するためのよりターゲットを絞ったアプローチを提供します。
uib-tagノードを使用すると、単一のHTML要素を作成できるため、 uib-elementカバーしない可能性のあるすべてのものをカバーします。これは、HTMLのバニラHTML/JavaScriptネイティブエンハンスメントであるWebコンポーネントでも機能します。
このアプローチには、VuejsやReactなどのフロントエンドの第3パーティのフレームワークが必要ではないことに注意することが重要です。すべてが皮膚の下でバニラHTML、JavaScript、CSSを使用しているため、現在および将来のWeb標準と互換性があります。
uib-element出力が出力するデータは、必要に応じて、ノードレッドおよびフロントエンドコードでも、独自のフローで使用できる形式です。 HTML UI要素のセットについて説明しますが、実際にHTMLコードを作成する必要はありません。構成スキーマは非常に柔軟であり、外部ファイルから構成データ、HTML、スクリプト、および新しいECMAモジュール/コンポーネントをロードすることもできます。
フロントエンドクライアントに組み込まれたスキーマとUIクリエーター機能は、第3パーティのフロントエンドフレームワークを使用する際に一般的に遭遇する種類の問題を回避するために、現在および将来のHTML標準で動作するように特別に設計されています（たとえば、すべてのツールの書き直しを強制的に変更します）。したがって、ESモジュール、ECMAコンポーネント、および将来のECMAバージョンをすべてサポートする必要があります。
ui.jsライブラリは、誰でも自分のプロジェクトで使用できるようになり、Uibuilderなしで完全にスタンドアロンで動作します。また、Node-RED内から低コード構成をHTMLに変えるuib-htmlノードにも焼き付けられます。
Uibuilderは、引き続きフロントエンドのフレームワークとは独立していますが、可能な限り互換性があり続けるため、目的のフレームワークを使用できます。
package.jsonで定義されたnpm runスクリプトを実行する機能を改善します。コーディングスキルのない人が優れたデータ駆動型のWebアプリを構築できるように、ページビルダー機能を構築したいという願望が残っています。
fs-extraの最終的な除去から始まり、ネイティブのプロモーションFSライブラリを支持します。おそらくarunが続いた。uib-elementノードでこれを試してください。uibuilder.iife.js 、 uibuilder.esm.js ）は、いくつかのヘルパーユーティリティ機能とともに、ノードレッドおよびMSGイベントの処理への接続を提供します。ui.jsライブラリを使用してください！ このノードに貢献したい場合は、GitHubを介して完全に情報に連絡するか、GitHubの問題ログでリクエストを提起することができます。
コードとドキュメントの両方のリクエストを歓迎し、Wikiは新しいエントリと修正に対して開かれています（ただし、変更を加えた場合はお知らせください）。
詳細については、貢献ガイドラインを参照してください。
また、開発を後援することにより、Uibuilderの開発をサポートすることもできます。
Githubスポンサーシップ、PayPalスポンサーシップ
他の多くの人々がアイデアや提案に貢献しています。そうするすべての人のおかげで、彼らは大歓迎です。
また、私のブログ、それについて多くのAdoをチェックしてください。それは、ノードレッドを含む主にIT関連のあらゆる種類のトピックに関する情報を持っています。
