Form Builder

TsgcHTMLComponent_FormBuilder: tarayıcıda çalışan görsel bir form tasarımcısıdır, böylece uygulamanızın kullanıcıları kendi formlarını tasarlar. Yayımladıkları şey, doğrulama kuralları, giriş maskeleri, koşullu alanlar ve canlı doğrulama ile sıradan bir TsgcHTMLComponent_Form'dur; Delphi, C++ Builder ve .NET'te kullanılabilir.

TsgcHTMLComponent_FormBuilder

Bir TsgcHTMLComponent_Form ile bağlayın ve işleyin. Kullanıcılar alanları araç kutusundan 12 sütunlu tuvale sürükler, denetçide ayarlar ve Kaydet düğmesine basar. OnSave tanımı saklamanız için JSON olarak verir; AutoApply ile bağlı form yeni tasarımı hemen gösterir.

Bileşen sınıfı

TsgcHTMLComponent_FormBuilder, bağlı bir TsgcHTMLComponent_Form tanımını düzenler

İşler

Bir araç kutusu, bir tasarım tuvali, bir denetçi, bir Önizleme ve bir JSON görünümü; harici kitaplık olmadan düz JavaScript ve CSS ile

Diller

Delphi, C++ Builder, .NET

Bir form bağlayın, tasarımı saklayın, yayımlayın

Oluşturucu, bağlı formun tanımını düzenler. OnSave saklanacak JSON'u alır ve herkese açık sayfa onu LoadFromJSON ile kendi formuna yükler. Gönderimde Validate gönderilen değerleri denetler, GetValuesJSON ise bunları türlü tek bir JSON nesnesi olarak döndürür.

uses
  sgcHTML_Component_Form, sgcHTML_Component_FormBuilder;

// Formda bir TsgcHTMLComponent_Form (Form1) ve
// Form = Form1 olan bir TsgcHTMLComponent_FormBuilder (FormBuilder1)

procedure TMainModule.FormBuilder1Save(Sender: TObject; const aJSON: string;
  var aAccept: Boolean; var aErrorMessage: string);
begin
  // aJSON normalleştirilmiş tanımdır ve sunucu tarafından zaten denetlenmiştir
  StoreDefinition('contact', aJSON);   // kendi deponuz: bir dosya, bir tablo
end;

// Herkese açık sayfa: istek başına bir form, saklanan tasarımdan yüklenir
function TMainModule.ContactPage: string;
var
  oForm: TsgcHTMLComponent_Form;
begin
  oForm := TsgcHTMLComponent_Form.Create(nil);
  try
    oForm.Action := '/f/contact';
    oForm.LoadFromJSON(ReadDefinition('contact'));
    Result := oForm.HTML;
  finally
    oForm.Free;
  end;
end;

// Gönderimde: doğrulayın, ardından türlü değerleri saklayın
function TMainModule.ContactPost(const aParams: TStrings): string;
var
  oForm: TsgcHTMLComponent_Form;
  oErrors: TStringList;
begin
  oForm := TsgcHTMLComponent_Form.Create(nil);
  oErrors := TStringList.Create;
  try
    oForm.LoadFromJSON(ReadDefinition('contact'));
    if oForm.Validate(aParams, oErrors) then
    begin
      StoreResponse('contact', oForm.GetValuesJSON(aParams));
      Result := ThankYouPage;
    end
    else
      Result := oForm.GetValidationResponse(oErrors);
  finally
    oErrors.Free;
    oForm.Free;
  end;
end;
@* Views/Forms/Builder.cshtml: bir formun tasarımcısı *@
@model FormsModel

<sgc-form-builder name="builder" form="@Model.Form"
                  max-fields="50" css-height="720px"
                  on-save="Model.SaveDefinition" />
using esegece.sgcWebSockets;

// Oluşturucunun OnSave olayı: aJSON normalleştirilmiş tanımdır
public void SaveDefinition(object Sender, string aJSON, ref bool aAccept,
    ref string aErrorMessage)
{
    store.Save("contact", aJSON);
}

// Herkese açık form, POST /f/contact
var form = new TsgcHTMLComponent_Form();
form.Action = "/f/contact";
form.LoadFromJSON(store.Load("contact"));

var fields = Request.Form.Select(f => f.Key + "=" + f.Value).ToList();
var errors = new List<string>();
if (form.Validate(fields, errors))
    responses.Add("contact", form.GetValuesJSON(fields));

string schema = form.GetJSONSchema();   // Verinin JSON Schema 2020-12 çıktısı

Kullanıcılarınızın elde ettikleri

Geliştirici olmayan kişiler için bir tasarımcı ve kodla yazdığınız bir form gibi davranan bir form.

Araç kutusu ve tuval

Araç kutusu alanları Temel, Seçimler, Gelişmiş ve Düzen olarak gruplar. Bir alanı tuvale sürükleyin ya da Enter tuşuyla seçimin ardına ekleyin. Tuval, gerçek denetimlerin canlı görünümünü gösteren 12 sütunlu bir ızgaradır: 3, 4, 6, 8, 9 veya 12 sütun genişlik belirleyin, bir alanı sürükleyerek veya Alt+Yukarı ve Alt+Aşağı ile taşıyın, çoğaltın ya da silin. Geri al ve Yinele işlemleri Ctrl+Z ve Ctrl+Y ile çalışır.

Denetçi

Alan sekmesi etiketi, etiketten üretilip benzersiz tutulan adı, yer tutucuyu, yardım metnini, varsayılan değeri, zorunlu ve salt okunur ayarlarını, satır başına bir seçenek olacak şekilde seçenekleri, en küçük ve en büyük değeri, satır sayısını ve giriş maskesini belirler. Form sekmesi başlığı, açıklamayı, dikey veya yatay düzeni, gönder düğmesinin metnini ve sıfırlama düğmesini belirler.

Doğrulama kuralları

Her alan bir kural listesi alır: uzunluk, aralık, desen, e-posta ve özel; her birinin kendi hata iletisi vardır. Bunlar TsgcHTMLComponent_Form kurallarıdır, bu yüzden yayımlanan form tarayıcıda kullanıcı yazarken LiveValidation ile, sunucuda ise Validate ile yeniden doğrulanır.

Koşullu alanlar

Bir alanı yalnızca önceki bir alan bir değere eşitken, eşit değilken ya da onu içerirken, boşken ya da boş değilken veya bir sayıdan büyük ya da küçükken gösterin. Tarayıcı ve sunucu aynı kuralları uygular: gizli bir alan gönderilmez, koşulu nedeniyle gizlenen zorunlu bir alan asla hata vermez ve gizli bir alana bağlı olan alan da gizlenir.

18 alan türü

Metin, e-posta, parola, sayı, çok satırlı metin, seçim, radyo, onay kutusu, anahtar, tarih, saat, renk, aralık, dosya ve gizli alanların yanı sıra formu düzenlemek için başlık, paragraf ve ayırıcı bulunur. FieldTypes, araç kutusunun bunlardan hangilerini sunacağını belirler.

Önizleme ve JSON

Önizleme, tasarımı sunucuda bağlı formun görünümüyle gerçek bir form olarak işler; böylece doğrulama, maskeler ve koşullar çalışır, formu göndermek ise hiçbir şey göndermez. JSON görünümü tanımı görüntülemenizi, kopyalamanızı, düzenlemenizi ve uygulamanızı sağlar. ShowPreview ve ShowJSON görünümleri açar veya kapatır.

Şablonlar

Şablonlar her şablon için bir Caption=JSON satırı tutar ve araç çubuğu yeni bir forma başlamak için bunları sunar. Yeni form, kaydedilmemiş değişiklikleri atmadan önce sorar; kaydedilmemiş değişikliklerle sayfadan ayrılırken de uyarır.

Erişilebilirlik

Her eylem klavyeyle çalışır. Araç kutusu ve tuval WAI-ARIA liste kutularıdır; kibar (polite) bir canlı bölge eklenen, silinen, taşınan ve kaydedilen alanları ve hataları duyurur. Oluşturucu sayfa temasını (data-bs-theme) izler, dir="rtl" altında kendini yansıtır ve azaltılmış hareket tercihine uyar.

Temel özellikler, yöntemler & olaylar

En sık başvuracağınız üyeler.

Form ve AutoApply

Form, tasarlanmakta olan TsgcHTMLComponent_Form bileşenidir. AutoApply (varsayılan olarak açık) ile bir kayıt, yeni tanımı Form.Lock içinde ona yükler; böylece formu aynı anda işleyen bir sayfa yarım bir tasarım görmez. ReadOnly tasarımı gösterir ve Kaydet işlemini reddeder.

OnSave

OnSave(Sender, aJSON, aAccept, aErrorMessage) normalleştirilmiş tanımı alır: gönderilen JSON geçici bir forma yüklenip geri yazılır. Verilerinizi tuttuğunuz yerde saklayın. Reddetmek için aAccept değerini False yapın ve aErrorMessage içine kendi metninizi yazın.

Kullanıcıya özel tasarımlar

OnGetForm(Sender, aForm) isteği yapan kullanıcının formunu döndürür. İşleme sırasında ve her istekte çağrılır; oluşturucu döndürdüğünüz formu asla serbest bırakmaz. Oluşturucu istekler arasında durum tutmaz, bu yüzden tek bir bileşen tüm kullanıcılara hizmet eder.

Güvenlik

Tarayıcı göndermeden önce adları ve sınırları denetler, sunucu ise gönderilen her tanımı yeniden denetler: boyutu MaxSize (varsayılan 256 KB) ile, alan sayısını MaxFields (varsayılan 100) ile, alan türlerini, geçerli ve benzersiz adları, sütun genişliklerini, kuralları ve koşulları. Denetimi geçemeyen bir tanım, OnSave çalışmadan önce nedeniyle birlikte reddedilir.

Tanım JSON'u

Formdaki SaveToJSON ve LoadFromJSON tanımı yazar ve okur: başlık, açıklama, düzen, düğmeler ve alanlar, kuralları ve koşullarıyla birlikte. Delphi ve .NET bunu bayt bayt aynı yazar, bu yüzden birinde kaydedilen tasarım diğerinde yüklenir. LoadFromJSON ayrıca LoadFieldsFromJSON alan dizisini de okur.

JSON Schema ve türlü değerler

GetJSONSchema, gönderilen verinin bir JSON Schema 2020-12 çıktısını türler, biçimler, seçenekler, sınırlar ve zorunlu alanlarla birlikte verir. GetValuesJSON(aParams), gönderilen değerleri alan sırasına göre tek bir JSON nesnesi olarak döndürür: sayılar sayı olarak, onay kutusu ve anahtar true veya false olarak, koşuluyla gizlenen alanlar ise dışarıda bırakılarak.

Sunucu olayı olmadan

Oluşturucu, HTMX motorunun bileşen olayları uç noktasına veya ActionURL adresine gönderir. İkisi de yoksa yine tasarım yapar ve Kaydet, oluşturucuda DOM olayı sgc-form-builder-save olayını detail içinde JSON ile tetikler. Bir URL varsa olay başarılı bir kaydı da izler.

ASP.NET Core

Bir Razor görünümünde <sgc-form-builder> Tag Helper oluşturucuyu işler; kaydetme ve önizleme istekleri ise UseSgcHtml içindeki sgcHTML ara yazılımı tarafından yanıtlanır. Olaylar C# işleyicileridir ve düzenlediği form aynı TsgcHTMLComponent_Form sınıfıdır.

Demo

Demos\60.HTML\01.RunTime\34.FormBuilder, 8136 numaralı bağlantı noktasında çalışan bir sunucu olan sgc Forms Studio'dur ve şablon olarak da kullanılan dört form içerir: bir etkinlik kaydı, bir müşteri anketi, bir iş başvurusu ve bir BT destek talebi. Her formun canlı doğrulamalı herkese açık bir sayfası ve bir ızgara, bir grafik, bir Excel dışa aktarımı ve JSON Schema içeren bir yanıtlar sayfası vardır. Tasarım zamanı, Lazarus ve .NET sürümleri de aynısını yansıtır.

Keşfetmeye devam edin

Online DeneyinForm Oluşturucu demosunda görün, eSeGeCe demo sunucusunda canlı çalışıyor.
Çevrimiçi yardımBu bileşenin tam API başvurusu ve kullanım kılavuzu.
Form BileşeniOluşturucunun tasarladığı form: alanlar, düzenler, kurallar ve veri kümesi bağlama.
Tüm sgcHTML Bileşenleri80'den fazla bileşenin tüm özellik matrisine göz atın.
Ücretsiz Deneme Sürümünü İndirin30 günlük deneme sürümü 60.HTML demo projelerini içerir.
FiyatlandırmaTam kaynak kodlu Single, Team ve Site lisansları.
En avantajlı seçenek: All-AccessTüm eSeGeCe ürünleri, Premium Destek dahil, yılda €1,059'dan itibaren.
All-Access fiyatlarına bakın

Başlamaya Hazır mısınız?

Ücretsiz deneme sürümünü indirin ve Delphi, C++ Builder ve .NET'te web arayüzleri oluşturmaya başlayın.