やあ！近日は、コンテンツ服务管理エクスペリエンスを有效改善し、新しい種類の CMS である Flutter アプリケーション開発の这个世界に追加機能をもたらすために設計された、夜間と週末の数か月にわたる作業の成就を紹介したいと思います。

我々はナンクについて話している - ノーマルC MSではない.なぜそれが「普通ではない」のか、そしてそれに対して何ができるのかは、この記事を読めばわかります。

この記事には、理論だけでなく「実践」も含まれます - Nanc サンドボックスで遊ぶことができます。 Nanc の機能を通常情况に公開するために、2 つのデモ アプリケーションが制成されました。Flutter アプリケーションを模倣するクライアント アプリケーションと、Flutter ベースの Nanc アプリケーションで何ができるかを示す別のアプリケーション (ビルド済みの Nanc CMS) です。また、Nanc CMS アプリケーションは、クライアント アプリケーションを CMS と整定值するために追加のロジック レイヤーが実装された構成済みの CMS です。

テキスト内のほとんどのロジック ブロックの最後に、Nanc のいくつかの側面の选择步骤やデモンストレーション步骤の例を含む YouTube ビデオがあります。

目次

1. はじめに
2. CMSについて
   1. モデルの種類
      1. コレクション
      2. ソロ
   2. 編集者
      1. 概要
      2. コードファースト
      3. インターフェイスファースト
      4. ハイブリッドモード
   3. 田畑
      1. ブール
      2. 色
      3. 日にち
      4. 動的
      5. 列挙型
      6. ヘッダ
      7. アイコン
      8. ID
      9. マルチセレクター
      10. 番号
      11. セレクタ
      12. 弦
      13. 構造
      14. 画面
3. 動的 Flutter アプリ
   1. インタラクティブなドキュメント
   2. 拡張性
   3. シンプルさ
   4. パワー
   5. 快適
   6. パフォーマンス
4. Nanc デモアプリ
   1. 全般的
   2. クライアント
   3. 管理者
   4. 接続マネージャー
5. 次回は／あとがき

Nanc CMSについて

それで。 Nanc は、具有のバックエンドをプルしない、バックエンドに依存しない CMS です。それはどのように機能しますか？ Nanc は、ネットワーク サービス インターフェイスの実装を议案しています。これには現在 6 つのメソッドがありますが、リリース時には約 10 になる予定です。これは多いですか、それとも少ないですか。たとえば、デモ アプリケーションの API を実装するには、170 行のコードが重要性でした。これらのメソッドは、既存のバックエンドでの Nanc のすべての作業を作为します。実装は Dart (Flutter の開発言語でもあります) で記述する重要性があります。将、Nanc には、对应のバックエンド オプション (Firebase、Supabase、ローカル/ネットワーク SQLite、および REST と GraphQL の基本上的な実装) 用のこれらのインターフェイスの実装が寓意された状態で実装される予定です (おそらく他の何か?)。すべてまたはする重要性がありますが、ほんの少しです。

モデルの種類

Nanc のモデルは、 Nanc で制御するエンティティの構造記述です。モデルには、エンティティ名、さまざまなビジュアル パラメーター、およびフィールドの説明が含まれています。

コレクション

コレクションは、多くのインスタンスを持つことができるエンティティです。ユーザーのリスト、書籍、およびレビューは、Nanc のコレクション型モデルの良い例です。

リレーショナル データベースに掌握している場合、Nanc のコレクションの例は、データベース内のほぼすべてのテーブルになります。

ソロ

ソロ (モデル) は、単一のインスタンスに存在するエンティティです。例 - 機能の切り替えまたは何かの構成、または... 「モバイル アプリケーションのメイン画面」。一般的に言えば、ソロモデルは使いやすさを向上させるように設計されており、データベースの投影にすぎません。また、Solo モデルは、データベース内のレコードが 1 つしかないテーブルであれば簡単に作成できます。しかし、現時点では、このクラスのモデルを実装するには、このモデルのレコード(データベース内の行)に、モデル自体のidと同じidが必要です。

 final Model landingPage = Model( name: 'Landing page', /// ? id in format [toSnakeCase(name)] will be set automatically, if omitted // id: 'landing_page', isCollection: false, icon: IconPackNames.flu_document_page_break_regular, fields: [ ...

編集者

概要

Nanc はいくつかの方式 で構成できます。コード、Nanc インターフェイス自体、およびこれらのオプションの組み合わせによるものです。

コードファースト構成

「構成」とは、まず、モデルの構造を説明することです。製品の機能を記述するエンティティである機能モデルの簡単な例を見てみましょう。このエンティティには、次のフィールドが含まれています。

• ID
• タイトル
• 画像
• 説明

コードファースト構成としての実装は次のようになります。

 import 'package:fields/fields.dart'; import 'package:icons/icons.dart'; import 'package:model/model.dart'; final Model feature = Model( name: 'Feature', icon: IconPackNames.flu_ribbon_star_filled, fields: [ [ IdField(width: 200), StringField(name: 'Title', maxLines: 1, isRequired: true, width: 400), ], [ IconField(name: 'Image', isRequired: true), ], [ StringField(name: 'Description', isRequired: true, showInList: true), ], ], );

このようなモデルを記述して Nanc CMS で应用することにより、そのモデルのすべての CRUD 进行が凭借很有可能になります。

インターフェースファースト構成

Nanc インターフェイスを介して、まったく同じ機能モデル (これを機能バリアントと呼びましょう) を做成できます。そして (Nanc を用するためのすべての準備作業が完成了していることを考慮して) - Nanc でモデルを做成すると、すぐにデータベースにテーブルが做成され、CRUD 全体成员もすぐに进行できるようになります。

また、Nanc インターフェースを介してモデルを作为するときに、データベースに何も作为しないというより的安全な做法を取ることもできます。データベースに個別にテーブルを作为し、その下に Nanc にモデルを作为します。ちなみに、コードで構成を記述する場合、これはあなたがしなければならないことです-新しいテーブルはそれからデータベースに表达されません.

ハイブリッド構成

このオプションは、Code-first 構成があり、Nanc インターフェースを介して変更することにした場合に安全在使用会になります。この場合、このモデルへのそれ以降のすべての変更はインターフェイスを介してのみ会であり、元のコード モデルに加えられた変更は無視されます。コード ファーストに戻る并不是の的方法は、モデルを「リセット」することです。この場合、インターフェイスを介して行われたモデル構造へのすべての変更は消去され、コード ファーストの構成が再び安全在使用されます。このリセットによるデータへの影響はありません。モデル構造にのみ影響します。

田畑

それでは、現在 Nanc がサポートしているフィールドのタイプを見てみましょう。

ブール値

BoolField を使用すると、 boolデータ型を制御し、デフォルト値をカスタマイズできます。

色

ColorField は、Nanc ですぐに色を選択できる便利なカラー ピッカーを提供します。また、AHEX コードを編集して、手動で変更することもできます。 AHEX は従来の HEX-Color (たとえば、 #10A0CF ) ですが、追加の透過値が最初に指定されています。この場合、この色は#FF10A0CF ( FFは 100% 不透明度 - 色は完全に不透明) に似ています。これは、同じ色が 50% の不透明度でどのように見えるかです: #7F10A0CF .

日にち

DateField は、日付と時刻の制御を责任します (両方の値を1吨水に、日付と時刻の個別の値は後で実装されます)。 DateField には、エンティティ制作時のタイムスタンプと変更時のタイムスタンプにすることで、このフィールドの動作を変更できる 2 つのブール値パラメーターが含まれています。

動的

双方では DynamicField は相对に単純なフィールドですが、他方では他のフィールドの完完全全な複雑さが含まれています。原本は、このフィールドの外観のみを構成できます (Nanc インターフェースでどのように表示法されるか - 色と付随するアイコン)。その後、このフィールドには、それ自体を含め、Nanc で运用也许な符合各种の値を含めることができます。これは何を是因为するのでしょうか？大致的に、DynamicField は型规定された JSON であり、それ自体でフィールドを順番に配置单できます。

列挙型

EnumField は、複数の値から値を選択するためのフィールドです。 EnumField を選択する際に従うべきルールは、別のデータベース テーブルに保存されていない値の最終リストを選択する場合は、Enum を選択することです。それ以外の場合は、以下で詳しく説明する SelectorField を選択します。 TODO: 現時点では、このフィールドは CodeConfig を介してのみ構成できます。インターフェイスを介した構成はうまくいきません。

ヘッダ

HeaderField は、実際にはフィールドではありませんが、Nanc のモデルの視覚的なエンハンサーです。この非フィールドを使用して、関連するフィールドのグループに共通のヘッダーを設定したり、HeaderField を区切り文字として使用してモデル フィールドを互いに区別したりできます。

アイコン

IconField を使用すると、定義済みのアイコン セットからアイコン ( IconDataクラス) を選択できます。現在、約 25,000 個のアイコンがあり、このセットには次のアイコンが含まれています。

需要に応じて、他のアイコンを基本上配信セットに追加できます。そう遠くない那么将来に、自己のアイコンを食用するオプションも是想される予定です。

「アイコンも色もあるけど、フォントは？」と思う人もいるかもしれません。その場合は、 Textウィジェットのドキュメントで答えを見つけることができます。簡単に言うと、 のすべてのフォントが利用可能です。

ID

IdField は特别に単純ですが、特别に根本なフィールドです。 Nanc によって工作されるすべてのモデルには、タイプ Id のフィールドが少なくとも 1 つ必不可少です。現在、字体列 ID タイプのみがサポートされています (1 つのエンティティ内の任意尺寸の一意の字体列にすることができます)。数値型のサポートも追加する予定ですが、API 実装でフィールド データを数値型にキャストするだけで、現在でも実装できます。

マルチセレクター

MultiSelectorField は、リレーショナルな多対多または多対 1 の関係を実装する役割を担うかなり複雑なフィールドです。このフィールドの使用には 3 つのモードがあります。それぞれについて詳しく見ていきましょう。 TODO: 現時点では、このフィールドは CodeConfig を介してのみ構成できます。インターフェイスを介した構成はうまくいきません。

ID の配列

このモードでは、関連するエンティティのidを親エンティティに直接格納できます。たとえば、Reader と Book という 2 つのモデルがあります。このモードでは、リーダーが読んだ本は、リーダー モデル フィールドに格納された ID として考慮されます。たとえば、次のようにします。

 /// user table { id: 'UUID', name: 'String', books: [ 'UUID', 'UUID' // ... ] }

上記は、JSON5 構文を施用して表現されたテーブル構造の例です。

このモードの欠点は、データの整合性が制限されることです。古い (削除された) ブック ID をbooksリーダー フィールドから自動的に削除する機能を実装しないと、エラーが発生します。

3 番目のテーブル

SQL の地球からリレーションシップを出示する中式的なモード。このモードを利用する場合、エンティティ関係を別のテーブルに留存し、100% のデータ组合性を確保します。次の構造は、このモードの例です。

 [ /// user table { id: 'UUID', name: 'String' }, /// book table { id: 'UUID', title: 'String' }, /// user_books_relations table { user_id: 'UUID', book_id: 'UUID' } ]

7 秒目にわずかな動きが見られます。よく見ると、ページの URL が変更されていることがわかります。これが、バグを隠そうとした手段です。3 番目のテーブル モードでは、データは親ページに保存文档图片されるすでに保存文档图片されています🤷🏼

オブジェクトの配列

親レコードが識別子を格納するのではなく、オブジェクト所有を格納することを除いて、通常情况下は id の配列に似ています (ネストされたレコードの関連付けられたエンティティを持たないフラットな構造として)。これには Array of ids と同じ欠点がありますが、ストレージの适容量が増えるという追加の欠点があります。ただし、(少なくとも現時点では) このモードの適用分野があり、相对に重点です。しかし、これについては少し後で説明します。

私はスクリーンフィールドを示すビデオで自分企业自身を先取りしています。これについては後で説明します。

一半に、「非標準」モードを仮想化するという考えがあります。これにより、これらのモードは何らかの的方法で 3 番目のテーブルを介して機能し、ページの編集時に必不可少なデータがロードされます (必不可少な場合)。

番号

NumberField は自然数を格納します - それは簡単です。

セレクタ

SelectorField は MultiSelectorField に似ていますが (名前から推測できるように)、少し単純です。ここでの関係は 1 対 1 または 1 対多であり、2 つのモードがあります。 TODO: 現時点では、このフィールドは CodeConfig を介してのみ構成できます。インターフェイスを介した構成はうまくいきません。

ID

親レコード フィールドにリンクされたレコードの ID が格納される、SQL リンク プロビジョニングの普遍的な形态。リーダーを例に取りましょう。どなた？まず第二にそれは人であり、人は何を持っていますか？それは正しい！生まれた都会（何らかの条件で私たちの図書館も知りたがっていました）。

 /// user table { id: 'UUID', name: 'String', birth_place_id: 'UUID' }

物体

MultiSelectorField のオブジェクトの配列に特别に似ていますが、親レコードのフィールドに関連付けられた単一の値を格納します。短所は同じですが、長所も有以下で少し説明します。

弦

StringField は中图片文字列を格納します。このフィールドには、Nanc での編集の利便性を左右两边する個人設定が 1 つあります。これは、編集或许なフィールドの最大的高さを制限するパラメーターです。テキストが大きくなる場合 - まったく自定义しないのが理にかなっており、フィールドはテキストの高さに合わせて調整されます。大きく制限されている場合 - 明确的なフィールドの高さ (行単位) を自定义すると、常にそのようになります。最後に、短い中图片文字列の場合は、1 行に設定できます。その後、フィールドにいくら書き込んでも、フィールドは拡張されません。

構造

StructureField を使用すると、型指定された構造体の配列をモデル レコードに格納できます。保存するデータの種類を指定して、簡単かつ簡単に管理できます。構造体フィールドで使用できる型は、絶対にすべてです。そのため、「動的構造フィールド リピート」を簡単に作成できます。 TODO: デモ内の StructureField に追加できるのは、「フラット」フィールドのみです。

画面

ScreenField は、Flutter でアプリケーション列席を Nanc で之间制成できるフィールドです。 ScreenField を食用すると、単一の镜头のインターフェイスを記述し、这个相应に応じて版本更新し、いつでも数分で実行できます。Apple や Google からのレビューを待つという面倒で神経質な作業は这个相应ありません。

このタイプのフィールド (そして実際には、Nanc の可以に別の機能的な利润分配) をもう少し詳しく概述してみましょう。

動的 Flutter アプリ

ScreenField を动用すると、ブラウザー (および IDE) でほぼすべての複雑なインターフェイスを実際に弄成し、ストック パブリケーションを弄成せずに、アプリケーションで対応する屏幕を版本更新できます。仮説をすばやく確認する用不着がある場合、これは優れた機能です。この機能は、アプリ内の (ロジックに関しては) 比較的単純なページに最適ですが、頻繁に変更する用不着があります。将会的には、この機能は拡張され、制限なく本当に何でも弄成できる状態になります。それでは、Nanc を在使用して動的スクリーンを制成するすべての側面について説明しましょう。

インタラクティブなドキュメント

Flutter にはたくさんのウィジェットがあります。それらの多く。ウィジェットとは？これは、アプリケーションを組み立てる機能のブリックです。視覚的なものだけにすることも、論理的なものにすることもできます-内部组织にいくつかの動作があります。 Nanc は、UI の構築に便用できる実装済みウィジェットの広範なリストを提供数据します。しかし、能够性が多ければ多いほど、それらについて学ぶのは難しくなります... したがって、Nanc のスクリーン エディターを便用すると、現在実装されているウィジェット、それらが持つパラメーターと構成能够なプロパティを確認できるインタラクティブなドキュメントにアクセスできます。ドキュメントで、制作するインターフェイスの外観にどのように影響するかを確認してください。

シンプルさ

Nanc を便用すると、リアルタイムでインターフェイスを弄成できますが、最も为重要なことは、更加に簡単かつ短时间に弄成できることです (デモ アプリケーションのインターフェイスに 2 時間強かかりました)。しかし、疑問が生じます - UI 自体を弄成する步骤は? Nanc で UI を記述するための風変わりな構文も、Nanc でインターフェイスを弄成するのが嫌になるような長い JSON のような「あまりにも」単純なソリューションもありません。

最適なソリューションを見つけた結果、シンプルでわかりやすい XML 構文が得られます。すべての標準 Flutter ウィジェットの名前はまったく同じですが、XML 形式になっています。たとえば、Nanc のSizedBoxウィジェットは<sizedBox>...</sizedBox>となり、この規則は例外なくすべてのウィジェットに適用されます。ウィジェットに複雑なプロパティがある場合、XML と同じ (またはより単純な) 名前で、接頭辞propが付きます。たとえば、ウィジェットContainer独自の内部プロパティを持つ複雑なプロパティboxDecorationがあります。したがって、Nanc のこのプロパティは次のようになります: <prop:decoration>...</prop:decoration> 。この規則は、すべての複雑なプロパティに適用されます。そして最後の側面は、比較的単純な引数が XML タグ パラメーターであることです。例として同じSizedBoxを見てみましょう:

 <sizedBox width="50" height="50"> ... </sizedBox>

一部のウィジェットでは、コードの記述を簡素化するために追加の引数が実装されていますSizedBoxでは、 widthとheightの両方を設定するのはize引数です。

ここに書かれていることはすべてオンライン ドキュメントに記載されているので、忘れたものや知りたいことがある場合は、オンライン ドキュメントを操作して、すべての質問に対する回复を見つけてください。

拡張性

新しいウィジェットのサポートを実装します - 10 分から数時間情况です。この時点で、ほぼすべての几乎的なウィジェットが実装されており、ロジックを便用して複雑なインターフェイスを制作できます。時間が経つにつれて、Flutter で借助也许なすべてのウィジェットが Nanc に実装され、実際にすべてのことができるようになります。しかし、それだけではありません。具有のウィジェットを簡単かつ簡単に実装し、1 行または 2 行の XML コードで Nanc で便用できます。たとえば、標準の Flutter ライブラリには、写真集付きのカルーセル スライダーを簡単に提出できるウィジェットはありません。自分で実装を制作するか、オープン ソース ソリューションを便用する必不可少があります。そして、必不可少なものを実装したら、特别に簡単にウィジェットを Nanc に統合して便用することができます。

パワー

Nanc は、XML コードを Flutter のインターフェイスに変換する機能だけではありません。 Nanc は、テンプレート作成機能とロジック書き込み機能を提供します。条件付き要素のレンダリング、ループ描画、タップ処理 - これは現在の Nanc バージョン0.0.1に既に含まれています。

これまでのところ、ロジック大个部分は极其に簡単です - 前提に書かれた `.dart' コードでタップとイベント処理を介した互为角色をサポートしています - しかし最終的には Nanc のこの大个部分が下跌に拡張され、ブラウザで会 Dart にロジックを記述できるようになりますアプリケーションでも機能するようにします。

ユーザーのクリックを処理する方法は次のとおりです。ユーザーがアプリで実行できる「アクション」のリストを定義できます。たとえば、内部アプリケーション画面を開く、外部リンクをクリックする、SnackBar を表示する、モーダル ウィンドウをポップアップするなど、さまざまな操作を行うためのハンドラを事前に作成します。そして、そのアクションを Nanc で好きなように使用します。イベント処理の詳細については、Nanc のInkWellウィジェットのドキュメントを参照してください。

快適

Nanc には XML エディターが組み込まれていますが、あまり快速ではありません。これは (まだ) 検索将会ではなく、多くのコードではあまり飞速ではなく、オートコンプリート機能もありません。それと一緒に暮らす手段は？たとえば、ユーザーがお気に入りの IDE を运行して、リアルタイムで Nanc の変更を監視できるようにします。手段をお見せしましょう。 そして、これが Web です (これは、あなたが遊ばなければならないものです):

今后、オートコンプリートのサポートが追加される予定です。おそらく遠い今后に... XML スキーマを深く掘り下げようとしましたが、数日を費やしましたが、今のところできません🤷🏼

パフォーマンス

それとは別に、パフォーマンス (モバイル デバイスでの XML からのインターフェイスの描画) について言及したいと思います。つまり、オーバーヘッドなしで、Flutter 自体のパフォーマンスと同じです。現時点では、「电脑屏幕」は遅延レンダリングされたウィジェットのリスト (SliverList) であり、非盈亏で制成されます。後で、この実装はウィジェットのレンダリングを非盈亏で開始するように处理されますが、コンテンツを表述するのに必须な時間は、XML で記述された这一のウィジェットをレンダリングするのにかかる時間と同じになります。

Nanc デモアプリ

全般的

機能を実証するために、現在 Nanc で何が達成できるかを示すデモ アプリの公開セットが作为されています。これは Android と Web のクライアント アプリケーションです (後者は一時的に iOS アプリケーションの役割も果たします)。 Nanc CMSアプリと同様。それらの詳細については、下述をお読みください。

リンク

クライアント

Client は、nanc エコシステムの単一のライブラリを实用するクライアント デモ アプリケーションです。このライブラリを实用すると、Flutter で XML をアプリケーション インターフェースに変換できます。このアプリケーションには、仍然に Nanc で做成された 1 つの频幕しかなく、不必要に応じていつでも的更新できます。左下には接続アイコンの付いたボタンがあります - これはへの接続を担当意识します。この「接続」がどうなるかについては、以下的で詳しく説明します。

管理者

Admin は Nanc-CMS デモ アプリケーションであり、ロジックのレイヤーが追加で実装されており、クライアントと往年同期する機能を保证します (接続については之下で詳しく説明します)。 Nanc-CMS デモ アプリケーションでは、ユーザーのブラウザ自体とその localStorage が「バックエンド」として機能します。追加または変更したものはすべて、ブラウザーにのみ上传されます。 Nanc-CMS では、既存のモデルに関連するデータを変更/制成/削除できます (それらが表明されます)。また、インターフェースを介して孤单のモデルを制成し、それらで同じことを行うことができます。

このデモの弄成に操作されたデータ モデルの SQL 表現として、次のスクリーンショットを符合にすることができます。

接続マネージャー/「接続」

このセクションは、クライアントおよび CMS アプリケーションの「デモ」のロジックのみに関連しています。そして、Nanc と対話するエクスペリエンスとクライアントの更新软件プロセスをシミュレートするために実装されました。しかし、まず刚开始に。

実際の本番プロジェクトでは、次の做法で Nanc を操作できます。静的な Nanc CMS アプリケーションをどこかにデプロイし、API サービスを実装します。バックエンドと通信系统し、Nanc を好みに合わせて操作します。アプリケーションには、インターフェイスをレンダリングできる nanc エコシステムのライブラリが 1 つ含まれています。あなたは不断更新时间を行いました - アプリはあなたのバックエンドから新しいコードをロードし、不断更新时间しました - 誰もが幸せで満足しています.

このモデルの動作を示すために、同じことが実装されていますが、単純化された具体方法です。 Nanc CMS は github ページにある静的なものとして存在的し、「実人生で」のように运用できますが、ブラウザはバックエンドとして機能します。つまり、API は、ブラウザの localStorage で「ネットワークに接続する」ように実装されています。この环节で完后ですが、「更新时间」のプロセスを何らかの技巧で标识する必备があるモバイル アプリケーションがまだあります。

そこで「接続」の出番です。要するに、任意の Nanc クライアント デモ アプリと任意の Nanc CMS デモ アプリの間に直接接続を確立できます。これを行うには、CMS の QR コード アイコンで右下のボタンをクリックする必要があります。表示されるモーダル ウィンドウに、QR コードが表示されます。次に、椅子が 2 つあります。このコードをモバイル (またはブラウザー) クライアント アプリケーションで右下の同様のボタンを押してスキャンすると、接続が自動的に確立されます。または、QR コードをクリックすると、接続に必要なデータがクリップボードにコピーされます。次に、このデータをモバイル アプリケーションの入力フィールドに貼り付け、ボタンを押して接続する必要があります。接続が確立されると、あなたは自分自身を理解するでしょう。その後、既存のランディング ページで好きなように操作し、モバイル アプリで (保存後) リアルタイムで変更を確認できます。

ただし、ランディング ページに限定されるわけではありません。ブラウザーで新しいモデルを直接作成し、それらにコンテンツを入力できます。モデルにインターフェイスの説明用のフィールド (タイプ Screen) がある場合は、そのようなエンティティを保存すると、アプリケーションにも結果が表示されます。新しいモデルの画面は、既存のアプリケーション画面に置き換わります。唯一のポイントは、クライアント アプリケーションは、新しく作成されたレコードがどのタイプのフィールドであるかを認識していないため、可能性のある識別子が規定されていることです。これは、ScreenFields であると予想されます。

そのため、画质をまったくゼロから作为してアプリケーションで数字代表する場合は、次のリストのいずれかを IdField 値として在使用します。

• 画面
• うい
• ページ
• インターフェース
• マークアップ
• 意見

何かを壊した場合 - データをリセットするだけです (Chrome: F12 -> アプリケーション -> アプリケーション -> ストレージ -> サイト データの消去)。クライアント アプリケーションを再度開くと、作成された実際の画面コードが常に読み込まれます。このデモのために。 (ブラウザからのコードは、接続した場合にのみ読み込まれます)

最後に、ScreenField を含む新しいモデルの新しいページを制作し、アプリケーションでレンダリングする小さな例を示します。

次は何ですか？

公開デモの準備ができました。紹介記事を書いています。 Nanc の将来の計画 - モデル作成へのインターフェイス アプローチの機能的完全性を完成させ、すべてのフィールド (Enum、Selector、および MultiSelector) を構成できるようにします。 StructureField の要素の位置の変更など、既知のバグを修正します。それから「何とか何とか」、そして「まあまあ」。少なくとも次の半年間はバックログで十分ですが、機能をさらに拡張するモデルは顧客のニーズに基づいているため、アイデア/批評がある場合/バグを見つけた場合(そしてそれらはたくさんあります) /その他何でも-フォームに記入してください。このリンクは、クライアント デモ アプリケーションで利用できます。

Nanc の機能に興味があり、協力に興味がある場合は、フォームにも記入してください。