node-red-trexmes-service

# Custom Form <div class="node-header"> <span class="node-preview green-light">Custom Form</span> <div class="meta-item"><strong>Inputs:</strong> <span class="io-badge in">1</span></div> <div class="meta-item"><strong>Outputs:</strong> <span class="io-badge out">1</span></div> <div class="meta-item"><strong>Kategori:</strong> trexMes service</div> </div> trexMes panelinde **çalışma zamanında özel form** açar. XML formatında tanımlanmış form tasarımını panele gönderir. Panel bu XML'i parse ederek WinForm UI'ı oluşturur. ## Özet `Custom Form` bu paketin **görsel arayüz** tarafının kalbidir. Modal dialog veya ana form (main form) üzerine yeni içerik basabilirsiniz. Form içeriği XML formatındadır ve genellikle birlikte gelen **Custom Form Designer** aracı ile görsel olarak tasarlanır. ## Property Tablosu | Alan | Tip | Varsayılan | Açıklama | |---|---|---|---| | `name` | string | — | Form'un panel tarafındaki adı | | `customformxml` | string | _(boş)_ | XML formatında form tasarımı | | `isstyled` | boolean | `false` | Form stillendirilmiş mi? | | `formainform` | boolean | `false` | Ana form üzerinde mi göstereceğiz? | | `designformname` | string | _(boş)_ | Linked Form Design node'unun adı | ## XML Kaynak Seçenekleri Form XML'i **iki kaynaktan** sağlanabilir: 1. **Doğrudan `customformxml`** alanına yapıştırılarak 2. **`Form Design`** config node'undan link verilerek (`designformname` ile) ```javascript if (node.designformname) { RED.nodes.eachNode(function (n) { if (n.type === "Form Design" && n.name === node.designformname) { if (n.formdesignxml) { selectedXml = n.formdesignxml; } } }); } if (node.customformxml !== "") { selectedXml = node.customformxml; // Inline override } ``` !!! tip "Hangi kaynak kullanılır?" `customformxml` alanı dolu ise her zaman **o** kullanılır. Boş bırakırsanız `Form Design` config node'undaki XML kullanılır. Bu sayede aynı tasarımı birden fazla `Custom Form` node'unda paylaşabilirsiniz. ## `formainform` Davranışı | Değer | Anlam | `operationtype` | `continueevent` | |---|---|---|---| | `false` | Modal dialog olarak aç | `CustomDialog` | `Continue` | | `true` | Ana formu güncelle (`AppForm`) | `MainForm` | `Break` | ## Çıkış Mesajı `msg.payload` array'ine eklenen operasyon: ```json { "operationtype": "CustomDialog", "receiveddata": { "orderNo": "ORD-001" }, "name": "OrderEntryForm", "continueevent": "Continue", "customformxml": "<form>...</form>", "isstyled": true } ``` ## XML Formatı Form XML'i `trexForm.Designer` tarafından üretilen **WinForms tabanlı** bir formattır. Kök eleman `<Object name="CustomForm" type="trexForm.Designer.CustomForm, ...">` şeklindedir; her kontrol de ayrı bir `<Object>` olarak iç içe tanımlanır. ### Genel Yapı ```xml <Object name="CustomForm" type="trexForm.Designer.CustomForm, trexForm.Designer, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" version="1">  <AutoValidate>EnablePreventFocusChange</AutoValidate> <BackColor>Control</BackColor> <ClientSize>600, 400</ClientSize> <Font>Microsoft Sans Serif, 8.25pt</Font> <Name>CustomForm</Name>  <Object type="System.Windows.Forms.Label, System.Windows.Forms, ..." name="lblBaslik"> <Text>Başlık</Text> <Location>20, 20</Location> <Size>200, 30</Size> <TabIndex>0</TabIndex> </Object> <Object type="System.Windows.Forms.Button, System.Windows.Forms, ..." name="btnTamam"> <Text>TAMAM</Text> <Location>20, 100</Location> <Size>120, 40</Size> <TabIndex>1</TabIndex> </Object> </Object> ``` ### Örnek: Label ve Buton Aşağıdaki XML, form üzerinde bir adet büyük başlık etiketi ve sarı zemin renkli bir buton tanımlar: ```xml <Object name="CustomForm" type="trexForm.Designer.CustomForm, trexForm.Designer, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" version="1"> <AutoValidate>EnablePreventFocusChange</AutoValidate> <BackColor>LightCoral</BackColor> <ClientSize>556, 369</ClientSize> <AutoScaleDimensions>6, 13</AutoScaleDimensions> <Cursor>Default</Cursor> <Font>Microsoft Sans Serif, 8.25pt</Font> <ForeColor>ControlText</ForeColor> <Name>CustomForm</Name> <RightToLeft>No</RightToLeft> <Object type="System.Windows.Forms.Label, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" name="lblMesaj"> <TextAlign>MiddleCenter</TextAlign> <Text>Label1</Text> <Dock>Top</Dock> <Font>Microsoft Sans Serif, 20.25pt, style=Bold</Font> <Location>0, 0</Location> <Name>lblMesaj</Name> <Size>556, 145</Size> <TabIndex>1</TabIndex> </Object> <Object type="System.Windows.Forms.Button, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" name="btnTamam"> <BackColor>Yellow</BackColor> <FlatAppearance control="true"> <Object type="System.Windows.Forms.FlatButtonAppearance, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" name="FlatButtonAppearance1"/> </FlatAppearance> <Text>TAMAM</Text> <UseVisualStyleBackColor>False</UseVisualStyleBackColor> <Font>Microsoft Sans Serif, 15.75pt</Font> <Location>174, 251</Location> <Name>btnTamam</Name> <Size>192, 100</Size> <TabIndex>0</TabIndex> </Object> </Object> ``` Bu tasarımda: - `lblMesaj` — forma üstten (`Dock: Top`) sabitlenen, 20.25pt kalın fontlu bir etiket - `btnTamam` — sarı arka planlı, ortada konumlandırılmış bir buton !!! info "Form Events ile Olay Dinleme" Form üzerindeki kontrol olayları (buton tıklaması, değer değişimi vb.) **Form Events** nodu ile dinlenebilir. `btnTamam`'ın tıklanmasını yakalamak için `Form Events` nodunu aynı akışa ekleyin ve ilgili kontrol adını (`btnTamam`) belirtin. ### Sık Kullanılan Kontrol Tipleri | Kontrol | `type` Değeri (kısaltılmış) | |---|---| | Etiket | `System.Windows.Forms.Label` | | Buton | `System.Windows.Forms.Button` | | Metin Kutusu | `System.Windows.Forms.TextBox` | | Sayısal Giriş | `System.Windows.Forms.NumericUpDown` | | Onay Kutusu | `System.Windows.Forms.CheckBox` | | Açılır Liste | `System.Windows.Forms.ComboBox` | | DataGridView | `System.Windows.Forms.DataGridView` | !!! tip "Tasarımı elle yazmayın" XML formatı karmaşık olduğundan **Custom Form Designer** aracını kullanın. Designer'dan dışa aktarılan XML doğrudan `customformxml` alanına yapıştırılabilir. ### DataGridView Varsayılan XML Formatı Aksı belirtilmedikçe bir `DataGridView` eklendiğinde aşağıdaki varsayılan format kullanılır. Yalnızca `name`, `Location`, `Size` ve `TabIndex` değerleri forma göre ayarlanır. ```xml <Object type="System.Windows.Forms.DataGridView, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" name="dbGrid"> <AllowUserToAddRows>False</AllowUserToAddRows> <AllowUserToDeleteRows>False</AllowUserToDeleteRows> <AllowUserToOrderColumns>True</AllowUserToOrderColumns> <AllowUserToResizeColumns>False</AllowUserToResizeColumns> <AutoSizeColumnsMode>Fill</AutoSizeColumnsMode> <AutoSizeRowsMode>AllCells</AutoSizeRowsMode> <ColumnHeadersDefaultCellStyle mode="constructor"> <type>System.Windows.Forms.DataGridViewCellStyle, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</type> <Alignment>MiddleCenter</Alignment> <BackColor>Control</BackColor> <Font>Microsoft Sans Serif, 8.25pt</Font> <ForeColor>WindowText</ForeColor> <SelectionBackColor>Highlight</SelectionBackColor> <SelectionForeColor>HighlightText</SelectionForeColor> <WrapMode>True</WrapMode> </ColumnHeadersDefaultCellStyle> <ColumnHeadersHeightSizeMode>AutoSize</ColumnHeadersHeightSizeMode> <EditMode>EditProgrammatically</EditMode> <MultiSelect>False</MultiSelect> <ReadOnly>True</ReadOnly> <RowHeadersBorderStyle>None</RowHeadersBorderStyle> <RowHeadersVisible>False</RowHeadersVisible> <RowHeadersWidthSizeMode>AutoSizeToAllHeaders</RowHeadersWidthSizeMode> <RowTemplate control="true"> <Object type="System.Windows.Forms.DataGridViewRow, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" name="DataGridViewRow1"> <DefaultCellStyle control="true"> <Object type="System.Windows.Forms.DataGridViewCellStyle, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" name="DataGridViewCellStyle1"> <Alignment>MiddleLeft</Alignment> <Font>Microsoft Sans Serif, 18pt, style=Bold</Font> </Object> </DefaultCellStyle> <Height>100</Height> </Object> </RowTemplate> <SelectionMode>FullRowSelect</SelectionMode> <Location>10, 10</Location> <Name>dbGrid</Name> <Size>460, 300</Size> <TabIndex>0</TabIndex> </Object> ``` | Özellik | Değer | Açıklama | |---|---|---| | `AllowUserToAddRows` | `False` | Kullanıcı satır ekleyemez | | `AllowUserToDeleteRows` | `False` | Kullanıcı satır silemez | | `AllowUserToOrderColumns` | `True` | Sütunlar sürüklenerek sıralanabilir | | `AllowUserToResizeColumns` | `False` | Sütun genişliği elle değiştirilemez | | `AutoSizeColumnsMode` | `Fill` | Sütunlar grid genişliğini eşit paylaşır | | `AutoSizeRowsMode` | `AllCells` | Satır yüksekliği içeriğe göre otomatik ayarlanır | | `EditMode` | `EditProgrammatically` | Hücreler yalnızca kod ile düzenlenebilir | | `MultiSelect` | `False` | Tek satır seçimi | | `ReadOnly` | `True` | Kullanıcı veri giremez | | `RowHeadersVisible` | `False` | Sol taraftaki satır başlıkları gizlidir | | `SelectionMode` | `FullRowSelect` | Tıklama tüm satırı seçer | | `Font` (satır) | `18pt, Bold` | Satır içi hücre fontu büyük ve kalın | | `Height` (satır) | `100` | Satır yüksekliği 100 piksel | ## Custom Form Designer Entegrasyonu Node arayüzünde **"Designer'da Aç"** butonu bulunur. Bu buton `customFormDesigner.exe` aracını başlatır: ```javascript RED.httpAdmin.post("/custom-form/run-exe", function (req, res) { const exePath = RED.settings.functionGlobalContext.customFormDesignerPath; const process = spawn(exePath, [filename + "|" + xmlContent]); // Designer kapandığında çıktıyı oku const outputPath = "c:\\temp\\" + filename + "_form_design.xml"; }); ``` ### Gereksinimler 1. **Windows** işletim sistemi 2. `customFormDesigner.exe` dosyası mevcut 3. Node-RED `settings.js` içinde tanımlı: ```javascript functionGlobalContext: { customFormDesignerPath: "C:\\trex\\tools\\customFormDesigner.exe" } ``` 4. Çıktı dosyası `C:\temp\<formname>_form_design.xml` konumuna yazılır. ## Form Design Config Node `Custom Form` ile birlikte `Form Design` adında ayrı bir config node tipi de kaydedilir. Bu node yalnızca XML içeriğini tutar; akışa eklenemez (palette'te görünmez). | Alan | Açıklama | |---|---| | `name` | Tasarım adı (birden fazla form için ayırt edici) | | `formdesignxml` | XML içeriği | Custom Form node'unda `designformname` alanına bu config'in adını yazarak link verirsiniz. ## Tipik Akış ```mermaid flowchart LR A[Business Events] --> B[Custom Form<br/>OrderForm] B --> C[Form Bind Controls<br/>Veriyi bağla] C --> D[Button Configurator<br/>Butonları ayarla] D --> E[Responser] style A fill:#ccffcc,color:#000 style B fill:#ccffcc,color:#000 style C fill:#ccffcc,color:#000 style D fill:#ccffcc,color:#000 style E fill:#ccffcc,color:#000 ``` ## Sık Karşılaşılan Hatalar !!! failure "Designer çalışmıyor" `settings.js` içinde `customFormDesignerPath` tanımlı mı? Dosya yolu doğru ve dosya gerçekten var mı? !!! failure "Designer Output not found" Designer'ın çıktıyı yazacağı `C:\temp\` klasörü erişilebilir mi? Node-RED'in yazma izni var mı? !!! failure "Form panelde gözükmüyor" - `customformxml` veya `designformname` boş kalmış olabilir - XML formatı geçerli mi? (Açıkta kalmış tag, geçersiz attribute) - Akış sonunda `Responser` var mı? ## İpuçları !!! tip "XML'i versiyon kontrolüne alın" `customformxml` alanına büyük XML yapıştırmak yerine **`Form Design` config node** kullanın. Bu node'un içeriği flow JSON'una dahil olur ve git'te değişiklikleri takip edebilirsiniz. !!! tip "Stillendirme" `isstyled: true` seçeneği, panel tarafının form içeriğine **temaya özel stilleri** uygulamasını sağlar. Custom temalarla çalışıyorsanız mutlaka aktif edin. ## İlgili Nodlar - [Form Bind Controls](form-bind-controls.md) — Form alanlarına veri bağlama - [Control Properties](control-properties.md) — Kontrol özelliklerini ayarlama - [Button Configurator](button-configurator.md) — Form butonlarını yapılandırma - [Form Events](form-events.md) — Form etkileşim olayları