なでしこ3掲示板

頭では、なでしこ（Windows版）とは別物と理解していても、エディタやUI作成含めとても便利だったのでなでしこ３にも同じことを期待してしまいます。例えばグリッドはどうやって表示するのか（そもそもあるのか？）とか、部品の位置関係はどのように調整するのか、ｘ方向やｙ方向の概念があるのかとか、その違いに戸惑っています。なでしこ３の本を買っても、それらに対する答えは得られませんでした。
グリッドはどうなりましたか？
部品の配置を思い通りに出来ないのですか？
ここで止まって、内部の処理まで及んでいません。
なでしこで作成したプログラムをなでしこ３に移植したいのですが、それは困難なことでしょうか？

なでしこ3で部品関連はかなり変わりました。
私もめちゃくちゃ悩んだ経験があります。

なでしこ3はブラウザ上で動くので、部品はHTMLタグによって作られます。
「xxとはボタン」のような宣言から「ボタン作成」のように命令によって部品を作るように変わりました。
「ボタン作成」命令ではHTML上にbuttonタグを作成し、ブラウザがボタンとして表示してくれます。

作れる部品はマニュアルを参照
https://nadesi.com/v3/doc/index.php?plugin_browser%2FDOM%E9%83%A8%E5%93%81%E6%93%8D%E4%BD%9C&show

部品を作成した時、XY座標の指定はできません。
部品の配置ルールは「文字列と同じ」で、左から右へ並べられます。
文章同様に右端まで行ったら自動で改行されて部品が下の行にズレます。

任意のところで下に行きたいときは「改行作成」命令で改行の部品（brタグ）を挿入できます。
「　」のラベル作成　でスペースのラベルを作ると右にズレます。

HTMLに詳しければもっと自由な配置ができるようになるようですが
私の場合はスペースと改行でそれっぽくしてヨシとしています。
自由配置を可能にするプラグインも貯蔵庫で見たような・・・？

グリッドは表示するだけなら「テーブル作成」（tableタグ）が対応しているでしょうか。
ソートや記入などは自力での実装となるので現状きびしいかも。

マニュアルのテーブルセル変更のページを貼っておきます
https://nadesi.com/v3/doc/index.php?plugin_browser%2F%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%82%BB%E3%83%AB%E5%A4%89%E6%9B%B4&show

なでしこ３のDOM部品にグリッドはないのですが、表のような物を表示するものとしてはテーブルがあります。
でも、確かグリッドは内容を編集出来たんですよねー？
テーブルの内容が編集出来るようなのがあると、便利ですよね～。

部品の位置は、DOMのpositionと、top、leftにDOMスタイル設定することで設定出来ます。
起点となる0,0がどこになるかは、positionの設定で変わります。
実際どこにボタンが作成されているか、確認してみて下さい✨
#=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
テストは空配列
テスト[0]は「static」のボタン作成。
テスト[1]は「absolute」のボタン作成。
テスト[2]は「relative」のボタン作成。
テスト[3]は「fixed」のボタン作成。

テスト[0]の「position」に「static」をDOMスタイル設定。# 既定
テスト[1]の「position」に「absolute」をDOMスタイル設定。# 絶対位置
テスト[2]の「position」に「relative」をDOMスタイル設定。# 相対位置
テスト[3]の「position」に「fixed」をDOMスタイル設定。# ビューポートからの相対位置

４回:
　テスト[回数-1]の「top」に「100px」をDOMスタイル設定。
　テスト[回数-1]の「left」に「300px」をDOMスタイル設定。
#=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

なでしこ３のUIは、HTML5のフォームのinput要素などを利用しており、色々細かいことをやりたいと思うと、HTML5とCSS3を調べなければならないのが現状です。
もう少し使いやすくなると良いですよね

Grid.jsを使ってグリッドっぽいもの実装出来ないかな🤔

https://gridjs.io/docs

ちょっとやってみたよ！
結構見た目グリッドっぽくて良きーと思ったのですが、gridjsには編集機能がないっぽい～😭

https://n3s.nadesi.com/index.php?page=2896&action=show

ソートやサーチを殺せば無理矢理系で編集出来るようにも出来そうだけど、ソートやサーチで見た目が変化した時、元データの行番号を知れる手立てがなさそげ～🤔