node-red-trexmes-service
Version:
service Nodes for trexMes systems
227 lines (175 loc) • 8.51 kB
Markdown
# Control Properties
<div class="node-header">
<span class="node-preview green-light">Control Properties</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>
Form üzerindeki kontrollerin **görsel ve davranışsal özelliklerini** çalışma zamanında ayarlar. Visible, Enabled, Text, ForeColor gibi her türlü property atamasını yapar.
## Ne Zaman Kullanılır?
Form üzerindeki herhangi bir kontrolün (`Label`, `Button`, `TextBox`, `Panel`, vb.) **herhangi bir özelliğini** çalışma zamanında değiştirmek için kullanılır: metni güncelleme, görünürlük, renk, etkinleştirme/devre dışı bırakma, boyut…
**Formun kendisini kapatmak** için de kullanılır — formun `Visible` property'si `false` yapılır.
!!! info "Form Bind Controls ile farkı"
`Control Properties` **özellik** atar; `Form Bind Controls` yalnızca **Grid datasource veya web kontrol source** değeri atamak için kullanılır.
- Bir Label veya Button'un `Text`'ini değiştirmek → **Control Properties**
- Bir formu kapatmak → **Control Properties** (`Visible = false`)
- Bir Grid'in `DataSource`'una JSON array bağlamak → **Form Bind Controls**
## Kullanımı
1. **Form Name** listesinden değişiklik yapılacak formu seç.
2. Değiştirilecek kontrol trexEdge **ana formuna** (`AppForm`) aitse **"For Main-Form"** seçeneğini işaretle. Kendi `Custom Form`'un için bu seçimi **yapma**.
3. **Add** butonuna tıkla; listeye yeni bir satır eklenir.
4. **Control** alanına hedef kontrolün adını gir (XML'deki `name` ile birebir). Örnek: `btnOk`
5. **Property** alanına değiştirilecek özelliğin adını gir. Örnek: `Text`
6. **Value** bölümünde değer kaynağını seç (`msg.`, `flow.`, `global.`, sabit `string`, `bool`, `num` vb.) ve değeri gir.
```
Control : btnOk
Property: Text
Value : msg. → payload.orderLabel
```
## Property Tablosu
| Alan | Tip | Varsayılan | Açıklama |
|---|---|---|---|
| `name` | string | — | Canvas üzerinde gösterilecek ad |
| `formname` | string | _(boş)_ | Hedef form adı |
| `formainform` | boolean | `false` | Ana form (`AppForm`) mı? |
| `props` | array | `[]` | Özellik atama listesi |
## `props` Yapısı
Her satır 4 alan içerir:
| Anahtar | Açıklama | Örnek |
|---|---|---|
| `p` | Kontrol adı (ControlName) | `btnSubmit` |
| `v` | Özellik adı (PropertyName) | `Enabled` |
| `d` | Değer veya path | `true` |
| `dt` | Değer kaynağı (dataType) | `bool` |
```json
[
{ "p": "btnSubmit", "v": "Enabled", "d": "true", "dt": "bool" },
{ "p": "lblTitle", "v": "Text", "d": "Yeni Sipariş", "dt": "str" },
{ "p": "txtQty", "v": "ForeColor", "d": "Red", "dt": "str" },
{ "p": "btnSave", "v": "Visible", "d": "payload.canSave","dt": "msg" }
]
```
## `dataType` Çeşitleri
`dt` alanı değerin nereden okunacağını belirler:
| `dataType` | Anlam | Tipik Kullanım |
|---|---|---|
| `msg` | Mesaj nesnesinden | Dinamik değerler |
| `flow` | Flow context | Geçici state |
| `global` | Global context | Sabit ayarlar |
| `num` | Sabit sayı | `42`, `100` |
| `json` | Sabit JSON | `{"color":"red"}` |
| `bool` | Sabit boolean | `true`, `false` |
| `jsonata` | JSONata ifadesi | `$count(payload.items) > 5` |
| _diğer_ | Sabit string | `"Red"`, `"Verdana"` |
## Çıkış Mesajı
```json
{
"operationtype": "ControlProperties",
"receiveddata": { /* event data */ },
"name": "OrderForm",
"value": [
{ "ControlName": "btnSubmit", "PropertyName": "Enabled", "Value": true },
{ "ControlName": "lblTitle", "PropertyName": "Text", "Value": "Yeni" },
{ "ControlName": "txtQty", "PropertyName": "ForeColor", "Value": "Red" }
]
}
```
## Asenkron İşlem Modeli
Node, tüm property atamalarını **`Promise.all`** ile paralel çözümler:
```javascript
let tasks = node.props.map((item) => {
return new Promise((resolve, reject) => {
switch (item.dt) {
case 'msg': computedValue = RED.util.getMessageProperty(msg, item.d); break;
case 'flow': computedValue = node.context().flow.get(item.d); break;
case 'global': computedValue = node.context().global.get(item.d); break;
case 'jsonata':
// Async JSONata çözümlemesi
let expr = RED.util.prepareJSONataExpression(item.d, node);
RED.util.evaluateJSONataExpression(expr, msg, (err, result) => {
err ? reject(err) : resolve({
ControlName: item.p,
PropertyName: item.v,
Value: result
});
});
return;
// ...
}
resolve({ ControlName: item.p, PropertyName: item.v, Value: computedValue });
});
});
Promise.all(tasks).then((bindcontrols) => { /* msg.payload.push */ });
```
## Tipik Property İsimleri
WinForm kontrolleri için en sık kullanılan özellikler:
| Property | Tip | Örnek Değer |
|---|---|---|
| `Visible` | bool | `true` / `false` |
| `Enabled` | bool | `true` / `false` |
| `Text` | string | `"Kaydet"` |
| `BackColor` | string | `"Red"`, `"#FF0000"` |
| `ForeColor` | string | `"White"` |
| `Font.Bold` | bool | `true` |
| `Width` | number | `200` |
| `Height` | number | `40` |
## Form Kapatma
Bir Custom Form'u programatik olarak kapatmak için formun adını hem **Form Name** hem **Control** alanına girin ve `Visible` property'sini `false` yapın.
### Yapılandırma
1. **Form Name** listesinden kapatılacak formu seç (örn. `frmTest`)
2. **Add** butonuna tıkla
3. **Control** alanına formun adını gir (örn. `frmTest`)
4. **Property** alanına `Visible` gir
5. **Value** olarak `bool` → `false` seç
```
Form Name : frmTest
Control : frmTest
Property : Visible
Value : bool → false
```
### Akış Örneği — Buton ile Formu Kapat
```mermaid
flowchart LR
A["Form Events\nfrmTest / btnKapat / Click"] --> B["Control Properties\nfrmTest.Visible = false"]
B --> C[Responser]
style A fill:#ccffcc,color:#000
style B fill:#ccffcc,color:#000
style C fill:#ccffcc,color:#000
```
!!! tip "Aynı node'da birden fazla işlem"
Formu kapatırken aynı `Control Properties` node'una ek satırlar ekleyerek başka işlemler de yapabilirsiniz. Örneğin formu kapatıp aynı anda başka bir kontrolü güncelleyebilirsiniz.
## Tipik Akış
```mermaid
flowchart LR
A[Business Events] --> B[Custom Form]
B --> C[Form Bind Controls]
C --> D[Control Properties<br/>btnSave.Enabled=true]
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
```
## Önemli Notlar
!!! warning "Property isimleri büyük harfle başlar"
WinForm property isimleri **PascalCase**'dir: `Visible`, `Enabled`, `Text`, `BackColor` — küçük harfle başlamazlar.
!!! warning "Form henüz açılmadıysa"
`Control Properties` panele property atama gönderir; ancak form henüz açılmamışsa atama uygulanamaz. **Akışta önce `Custom Form` olmalıdır**.
## Sık Karşılaşılan Hatalar
!!! failure "Property uygulanmıyor"
- Property adı yazımı doğru mu? (`Visible` ≠ `visible`)
- Kontrol adı XML'deki ile eşleşiyor mu?
- `dataType` seçimi tutarlı mı? `bool` seçtiyseniz değer `"true"`/`"false"` string olmalı.
!!! failure "JSONata hatası"
JSONata ifadesi sentaks hatası içeriyorsa node hata fırlatır. İfadeyi önce başka bir akışta `change` node'unda test edin.
## İpuçları
!!! tip "Toplu disable/enable"
Bir formun tüm input'larını disable etmek istiyorsanız her birini tek tek listelemek yerine bir `function` node ile dinamik liste oluşturun ve `dataType: jsonata` ile döndürün.
!!! tip "Renkler için string formatı"
Renk değerleri için **WinForm Color enum** isimleri (`Red`, `LightBlue`, `Crimson`) veya **HTML hex** (`#FF0000`) kullanılabilir.
## İlgili
- [Custom Form](custom-form.md)
- [Form Bind Controls](form-bind-controls.md)
- [Button Configurator](button-configurator.md)
- [Mesaj Yapısı — dataType](../baslangic/mesaj-yapisi.md#datatype-cozumleme)