sgcHTML Design Surface — Sayfaları Sadece Kodla Değil, Görsel Olarak Oluşturun

sgcWebSockets 2026.9.0, sgcHTML sayfaları oluşturmak için yeni bir yol ekliyor: Design Surface. Şimdiye kadar her sayfa kodla oluşturuluyordu — bileşenleri yaratın, özelliklerini ayarlayın, ortaya çıkan HTML'yi okuyun. Bu yöntem hâlâ çalışıyor ve bir sayfa oluşturmanın birincil yolu olmaya devam ediyor. Yeni olan, ikinci, görsel bir yol: aynı bileşenleri doğrudan sıradan bir VCL formuna bırakın, düzenleyin, özelliklerini Nesne Denetçisi'nde ayarlayın ve aksi takdirde elle yazacağınız sayfanın birebir aynısını render edin.

Bir Sayfa Oluşturmanın İki Yolu

Çalışma zamanı yaklaşımı değişmedi. Bileşenleri oluşturun veya bırakın, özelliklerini ayarlayın ve verileri Pascal, C# veya .NET kodunda bağlayın, ardından bileşenin HTML özelliğini okuyun:

uses
  sgcHTML_Component_Grid;

var
  oGrid: TsgcHTMLComponent_Grid;
begin
  oGrid := TsgcHTMLComponent_Grid.Create(nil);
  try
    oGrid.Columns.Add.Title := 'Customer';
    oGrid.Columns.Add.Title := 'Total';
    oGrid.Clear;
    oGrid.AddRow(['Acme Corp', '1,240.00']);
    Response.Write(oGrid.HTML);
  finally
    oGrid.Free;
  end;
end;

Design Surface, aynı bileşenler için ikinci bir seçenek daha ekliyor: bunları bir forma bırakın ve sayfanın yapısının, constructor çağrıları yerine formun kendi düzeninden gelmesine izin verin.

Design Surface

Bir bileşenin form üzerindeki konumu ve genişliği, onun Bootstrap satırını ve sütununu belirler; published özellikleri ise kod yerine Nesne Denetçisi'nde ayarlanır. Forma eklenen bir TsgcHTMLDesignSurface bileşeni bu düzeni okur. Formdaki bırakılmış bileşenleri surface'ın node ağacına aktarmak için genellikle başlangıçta bir kez sgcHTMLDesignBuildFromControls çağrılır, ardından bunu render etmek için Surface.GetBodyHTML okunur:

uses
  sgcHTMLDesign_Surface;

procedure TfrmDashboard.Build;
begin
  sgcHTMLDesignBuildFromControls(Surface, Self);
end;

function TfrmDashboard.BodyHTML: string;
begin
  Surface.Invalidate;
  Result := Surface.GetBodyHTML;
end;

Bileşen paletinin kapsamadığı işaretlemeler için Surface.AddHTML, aynı ağaca sabit bir HTML node'u ekler; bu node'un konumu Order özelliğiyle belirlenir veya Slot := 'Body' ile bırakılmış bir bileşenin kendi gövdesinin içine yerleştirilir.

Aynı Bileşenler, Aynı Çıktı

Design Surface yalnızca bir sayfanın yapısının nasıl ifade edildiğini değiştirir; bileşenlerin kendisini veya davranışlarını değiştirmez. Tasarlanmış bir forma bırakılan bir bileşen, sıradan bir bileşen örneğidir — Grid1.LoadFromDataSet(qry), tamamen kodla oluşturulmuş bir sayfada olduğu gibi çalışır. İki yazım stili aynı sayfada serbestçe karıştırılabilir ve her ikisi de derlendikten sonra aynı şekilde derlenen ve çalışan bileşenler üretir.

Hangisi Ne Zaman Kullanılır

Çalışma zamanı kompozisyonu, bir sayfanın yapısının kendisi dinamik veya veriye bağlı olduğunda — döngüyle oluşturulan satırlar, koşullu bölümler, yalnızca çalışma zamanında bilinen duruma bağlı içerik — ve IDE bağımlılığı olmadan Delphi 7–13 arasında paylaşılan tek bir kaynak için en uygun olmaya devam ediyor. Design Surface ise çoğunlukla statik sayfa yapısını görsel olarak düzenlemek, sayfayı oluştururken şeklini görmek ve özellikleri kodla değil Nesne Denetçisi üzerinden ayarlamak için en uygunu. Hiçbiri bir çalışma zamanı yetenek farkı değildir: birini diğerine tercih etmek tamamen bir yazım zamanı tercihidir.

Hâlâ Büyüyor

Design Surface'ın bileşen paleti aktif olarak genişliyor ve bugün itibarıyla birkaç eksiklik hâlâ mevcut. Bazı bileşenlerin kendi wrapper işaretlemesinin, örneğin TsgcHTMLComponent_Panel'ın kart kabuğunun, bunu bastırmak için henüz bir özelliği yok. TsgcHTMLComponent_Form alanları şu anda elle yazılmış işaretlemenin yapabildiği gibi sütun sınıfları veya span'leri uygulamıyor. Her özellik her kardeş bileşende bulunmuyor — örneğin UseColorClass, Panel'de var ama Login veya StatCard'da yok. Ve TsgcHTMLComponent_Grid henüz sıralanabilir sütun başlıklarını bir tasarım zamanı özelliği olarak sunmuyor. Bunların hiçbiri çalışma zamanı yolunu etkilemiyor ve palet, sürümden sürüme bu eksiklikleri kapatmaya devam ediyor.

Uygulamada Görün

İki yaklaşımı yan yana görmenin en net yolu, sgcWebSockets ile birlikte gelen Demos\60.HTML klasörüdür. 01.RunTime, orijinal, kodla oluşturulmuş demoları barındırır; 02.DesignTime ise bunların her birini — AdminCRUD, LiveMonitor, Portal, HTMX, Grid, Site, Components, Helpdesk, ShopAssistant, WebBroker ve WebBrokerHTML, artı bu deseni başlatan ERP demosu — tamamen formlar üzerinde Design Surface ile yeniden inşa edilmiş olarak barındırır. Aynı demo için iki klasörü karşılaştırdığınızda, iki farklı yazım stilinden aynı sayfayı elde edersiniz.

Yükseltme

sgcWebSockets 2026.9.0'daki sgcHTML paketinin bir parçası olarak gelen Design Surface, mevcut çalışma zamanında oluşturulmuş sayfalar için herhangi bir geçiş gerektirmez. Denemek için ücretsiz deneme sürümünü alın ve tam bileşen setine bileşenler merkezinde göz atın.

Sorularınız, geri bildiriminiz veya geçiş konusunda yardıma mı ihtiyacınız var? Bize ulaşın — kodu yazan kişilerden bir yanıt alacaksınız.