sgcHTML beş dakikada

sgcHTML, Object Pascal'ı HTML'e dönüştürür. Sayfayı bir bileşen ağacı olarak oluşturur, tek bir dize özelliğini okur ve bu dizeyi bir HTTP yanıtına yazarsınız. Bu sayfa tam olarak bunu yapar, ardından sizi sonra isteyeceğiniz bölümlere yönlendirir: formlar, ızgaralar, grafikler ve htmx.

Bootstrap 5 ve htmx, sunucu tarafında
Yazılacak JavaScript yok
Windows, Linux ve macOS

İlk sayfa için gerekenler

Kendini bir dizeye dönüştüren bir sayfa bileşeni ve bu dizeyi bir tarayıcıya ileten bir HTTP sunucusu. İki nesne.

Sayfa bileşeni

TsgcHTMLComponent_Site, sgcHTML_Component_Site.pas içinde bildirilir ve SGC HTML palet sayfasına kaydedilir. Navigasyon, kenar çubuğu, tema ve içerikten oluşan tüm kabuğu oluşturur.

Önemli olan tek özellik

TsgcHTMLComponent sınıfından devralınan HTML. Salt okunurdur ve okunduğunda geçerli bileşen ağacını eksiksiz bir HTML belgesine dönüştürür.

Sunucu

Bir HTTP yanıtına dize yazabilen herhangi bir şey. Pakette gelen demo, Professional sürüm mevcutsa sgcWebSocket_Server.pas içindeki TsgcWSHTTPServer bileşenini kullanır, aksi hâlde TIdHTTPServer bileşenine döner.

Platformlar

Yalnızca masaüstü ve sunucu. SGC_HTML, {$IFNDEF ANDROID} ve {$IFNDEF IOS} içinde tanımlanır; bu nedenle mobilde her sgcHTML unit'i hiçbir şeye derlenmez. Windows, macOS ve Linux'un hepsi sorunsuzdur.

Gereksinimler ve sürümler

Sürüm sütunu, kodu kısıtlayan tanımdır; yanında Source/sgcVer.inc içinde bulunduğu satır yer alır.

Konu Değer
IDE Delphi 7'den RAD Studio 13'e ve C++Builder 2007'den 13'e kadar. Lazarus da desteklenir ve Linux üzerinde çalıştırılmış bir ERP demosu pakette gelir.
Uses yan tümcesi Sayfa kabuğu için sgcHTML_Component_Site, ayrıca gerçekten kullandığınız düğüm unit'leri; örneğin sgcHTML_Nodes, sgcHTML_Nodes_Bootstrap, sgcHTML_Nodes_Table, sgcHTML_Nodes_Forms ve sgcHTML_Nodes_Charts.
Paket tanımı SGC_PACK_HTML, 870. satırdan 874. satıra kadar uzanan {$IFDEF SGC_EDT_ALL} bloğunun içinde, 871. satırda tanımlanır. sgcWebSockets kaynak ağacında bu, All-Access sürümünün onu açtığı anlamına gelir. sgcHTML ayrıca kendi yükleyicisi ve kendi lisansıyla ayrı bir ürün olarak da satılır.
Özellik tanımları 882 ile 892. satırlardaki {$IFDEF SGC_PACK_HTML} bloğunun içinde: 885. satırda SGC_HTML ve 886. satırda SGC_HTMX; ikisi de 883'teki {$IFNDEF ANDROID} ve 884'teki {$IFNDEF IOS} içindedir. Tasarım zamanı görsel yüzeyi olan SGC_HTML_CONTROL, 887'deki {$IFDEF MSWINDOWS} içinde, 888. satırdadır.
Mobilde bunun anlamı Her sgcHTML unit'i arayüzünü {$IFDEF SGC_HTML} içine sarar, bu nedenle bir Android veya iOS derlemesi onları boş unit'ler olarak derler. Bu sunucu tarafı bir kitaplıktır ve amaç da budur: telefon Pascal değil HTML alır.
Kayıt Palet sayfası yalnızca hem SGC_PACK_HTML hem de SGC_HTML tanımlıyken kaydedilir.

Hangi bileşenler var? Izgara ve zamanlayıcıdan grafiklere, zengin bir düzenleyiciye, bir QR koduna ve bir kamera tarayıcısına kadar yaklaşık seksen. Özellik matrisi bunları alana göre gruplar ve her birinin bileşenler altında kendi sayfası vardır.

Kurun ve palet sayfasını bulun

sgcHTML kendi paketiyle gelir ve ayrıca sgcWebSockets'in All-Access derlemesinin içinde de bulunur. Kurulum aynı biçimdedir.

1. Zip dosyasını açın

İndirdiğiniz dosyayı aşağıda {$DIR} olarak adlandırılan bir klasöre açın.

2. Kitaplık yolu

Tools, Options, Library. {$DIR}\source yolunu ve IDE'niz için lib klasörünü ekleyin; örneğin {$DIR}\libD13\$(Platform).

3. Paketleri derleyin

{$DIR}\Packages\ altında IDE sürümünüz için paket grubunu açın. Önce çalışma zamanı .dpk dosyasını derleyin, ardından tasarım zamanı dcl dosyasını kurun. Lazarus bunun yerine .lpk kullanır.

4. Paleti kontrol edin

SGC HTML adlı bir sayfa görünür ve yaklaşık seksen bileşen içerir. Bir Android veya iOS hedefinde yoksa bu beklenen bir durumdur, çünkü SGC_HTML orada dışlanmıştır.

5. Önce bir demo çalıştırın

{$DIR}\Demos\60.HTML\01.RunTime\07.Site klasörünü açın, derleyin ve çalıştırın. Bir konsol sunucusudur, kendi URL'sini yazdırır ve aşağıdaki kod oradan gelir.

Pascal'da bir sayfa, HTTP üzerinden sunulur

Sayfayı oluşturun, HTML özelliğini okuyun, yanıta yazın. İlk sekme sayfa, ikincisi sunucu, üçüncüsü ise konsol programının tamamıdır.

sgcSiteDemo_Pages.pas
uses
  SysUtils, Classes,
  // sgc
  sgcHTML_Component_Site;

class function TsgcSiteDemoPages.BuildPage: string;
var
  oSite: TsgcHTMLComponent_Site;
begin
  oSite := TsgcHTMLComponent_Site.Create(nil);
  try
    oSite.Title := 'sgcHTML Site Layouts';
    oSite.Layout := slSidebarLeft;

    oSite.AddMenu('Dashboard', '/');
    oSite.AddMenu('Customers', '/?page=customers');

    oSite.AddSection('Welcome', '<p>Served from Delphi.</p>');

    // reading HTML is what runs the render
    Result := oSite.HTML;
  finally
    oSite.Free;
  end;
end;

Layout bir TsgcHTMLSiteLayout alır: slSidebarLeft, slSidebarRight, slTopNav, slTopNavSidebarLeft, slIconRail veya slOffcanvas. Varsayılan slTopNavSidebarLeft değeridir; bu nedenle yukarıdaki satır yalnızca geçişi göstermek için oradadır.

sgcSiteDemo_Server.pas
uses
  SysUtils, Classes,
  // sgc
  sgcWebSocket_Server,
{$IFDEF SGC_INDY}
  sgcIdContext, sgcIdCustomHTTPServer;
{$ELSE}
  IdContext, IdCustomHTTPServer;
{$ENDIF}

constructor TsgcSiteDemoServer.Create;
begin
  inherited Create;
  FPort := 8092;
  FHTTP := TsgcWSHTTPServer.Create(nil);
  FHTTP.Port := FPort;
  FHTTP.OnCommandGet := HandleCommandGet;
end;

procedure TsgcSiteDemoServer.Start;
begin
  FHTTP.Active := True;
end;

procedure TsgcSiteDemoServer.SendHTML(AResponseInfo: TIdHTTPResponseInfo;
  const aHTML: string);
begin
  AResponseInfo.ResponseNo := 200;
  AResponseInfo.ContentType := 'text/html; charset=utf-8';
  AResponseInfo.ContentText := aHTML;
end;

Indy unit'leri koşulludur, çünkü özel Indy kitaplığıyla yapılan bir derleme bunları sgcIdContext ve sgcIdCustomHTTPServer olarak, stok Indy ile yapılan bir derleme ise IdContext ve IdCustomHTTPServer olarak görür. Pakette gelen demo tam olarak bu koşulu taşır. Dize yazabilen herhangi bir sunucu işe yarar. Pakette gelen demo, Professional sürüm mevcutsa TsgcWSHTTPServer bileşenini seçer, aksi hâlde TIdHTTPServer bileşenine döner; demoda orada bir koşul olmasının, bu alıntıda ise olmamasının nedeni budur.

sgcSiteDemoServer.dpr
program sgcSiteDemoServer;

{$APPTYPE CONSOLE}

uses
  SysUtils,
  sgcSiteDemo_Server in 'sgcSiteDemo_Server.pas',
  sgcSiteDemo_Pages in 'sgcSiteDemo_Pages.pas';

var
  oServer: TsgcSiteDemoServer;
begin
  oServer := TsgcSiteDemoServer.Create;
  try
    oServer.Start;
    WriteLn('sgcHTML Site Layouts Demo - http://localhost:' +
      IntToStr(oServer.Port));
    WriteLn('Press Enter to stop.');
    ReadLn;
    oServer.Stop;
  finally
    oServer.Free;
  end;
end.

Bir konsol uygulaması olduğundan kurulacak form ve VCL yoktur. Bu, mümkün olan en kısa sgcHTML programıdır ve pakette gelen demo gerçekte budur.

Üç sekmenin hepsi, önemli kısımlara indirgenmiş olarak paketle gelen Demos\60.HTML\01.RunTime\07.Site demosundan alınmıştır. Tam proje ayrıca düzeni, temayı ve renk şemasını sorgu dizesinden değiştirir; ilk sayfa oluştuktan sonra bir kez okumaya değer.

Sayfanın oluştuğunu doğrulayın

Program dinlediği URL'yi yazdırır. Açın, ardından anahtarları deneyin.

Yazdırdığı URL

Program başlangıçta konsola http://localhost:8092 yazar. Açın. Navigasyonu, kenar çubuğu ve içeriğiniz olan bir sayfa, hem oluşturmanın hem de sunucunun çalıştığı anlamına gelir.

Active

FHTTP.Active := True ya başarılı olur ya da hata oluşturur. 8092 numaralı portu başka bir şey zaten kullanıyorsa bunu burada öğrenirsiniz.

İçerik türü

Sayfa yerine ham işaretleme gösteren bir tarayıcı, yanıtın text/html olmadan gönderildiği anlamına gelir. ContentText atamadan önce ContentType değerini ayarlayın.

Bir düzeni değiştirin

Pakette gelen demo layout, theme ve mode değerlerini sorgu dizesinden okur; böylece ?layout=topnav&mode=dark aynı sayfayı farklı biçimde yeniden oluşturur. Bileşenin ne yaptığını görmenin en hızlı yolu budur.

İlk seferde genellikle ne ters gider

Sayfanın oluşmadığı ilk denemelerin neredeyse tamamı altı sorundan kaynaklanır.

Palet sayfası hiç görünmüyor

Kayıt için hem SGC_PACK_HTML hem de SGC_HTML gerekir. Birincisi All-Access bloğunun içinde 871. satırda, ikincisi paket bloğunun içinde 885. satırda tanımlanır. Bir Android veya iOS hedefinde ikincisi bilerek yoktur.

Sayfa boş

Ağacı oluşturdunuz ama HTML özelliğini hiç okumadınız. Oluşturmayı çalıştıran bu özelliktir. Onu okumak oluşturma adımının tamamıdır ve bir parça değil, eksiksiz bir belge döndürür.

Sayfayı düzenleyince hiçbir şey değişmiyor

Demo her istekte yeni bir TsgcHTMLComponent_Site oluşturur ve sonrasında serbest bırakır. Nesneyi önbelleğe alıp yeniden kullanırsanız, yeniden oluşturmadan önce içeriğini ClearContent ile temizlemeyi unutmayın.

Tarayıcı ham işaretleme gösteriyor

Yanıtın içerik türü hiç ayarlanmadı. Demo, gövdeyi yazmadan önce ContentType := 'text/html; charset=utf-8' ayarını yapar; bu olmadan bazı istemciler HTML'i metin olarak gösterir.

HTML dizelerini elle yazıyorsunuz

Bunu yapmanız gerekmez. Bootstrap düzeni, tablolar, formlar ve grafikler için düğüm unit'leri vardır ve kitaplığın tüm amacı işaretlemeyi birleştirmek yerine bunları bir araya getirmenizdir.

Port zaten kullanımda

Demo 8092 numaralı portu dinler. Bu portu başka bir şey kullanıyorsa sunucu başlamaz, bu nedenle daha derin bir sorun aramadan önce portu değiştirin.

İnsanlar ilk sayfadan sonra ne oluşturuyor

Dört yön, hepsi aynı paketin içinde.

Geri gönderen formlar

Form düğümü unit'i girdileri, seçicileri, doğrulamayı ve düzeni oluşturur; htmx ise bunları sayfa yeniden yüklenmeden gönderir. Dizeler yerine düğümler oluşturduğunuzda kaçış işlemi sizin yerinize yapılır.

Form bileşenleri

Sayfadaki veriler

Sıralama, filtreleme ve sayfalama içeren bir ızgara; ayrıca grafikler, istatistik kartları, bir zamanlayıcı, bir Gantt grafiği ve bir diyagram bileşeni.

Özellik matrisi

Eksiksiz uygulamalar

Bir ERP panosundan satış noktasına, bir yardım masasına, bir depoya ve bir saha servisi uygulamasına kadar on beşten fazla çalışma zamanı demosu gelir. Kitaplığı gerçek ölçekte görmenin en hızlı yoludur.

Demo galerisi

Mevcut web katmanınızı getirin

WebBroker ve DataSnap için bileşenler vardır; böylece mevcut bir Delphi web uygulaması yeniden yazılmadan sgcHTML sayfaları oluşturabilir.

WebBroker ve DataSnap

Başvuru, demolar ve belgeler

Katalog her bileşeni bir önizlemeyle listeler. Demo projeleri indirmenin içinde, Demos\60.HTML altında gelir.

TsgcHTMLComponent_Site sayfası Bu hızlı başlangıcın dayandığı sayfa kabuğu, özellik özellik.
Özellik matrisi Düzen, formlar, veri, grafikler, kimlik doğrulama, sohbet ve diğerleri, alana göre gruplanmış.
Demo galerisi Paketle gelen çalışma zamanı demoları, her biri kısa bir videoyla.
WebBroker ve DataSnap Mevcut bir Delphi web katmanından sgcHTML sayfaları oluşturma.
Denemeyi indirin Üretimle aynı yükleyici, süre sınırlı.
Çevrimiçi yardım Oluşturulan başvuru, her zaman güncel sürümle uyumludur.

İlgili okumalar: Site bileşeni, Delphi'de web arayüz bileşenleri, daha akıllı formlar ve veri tabloları. Her ürünün kendi hızlı başlangıcı vardır ve başlarken sayfasında listelenir.

sgcHTML hızlı başlangıç soruları

sgcHTML_Component_Site.pas unit'inden TsgcHTMLComponent_Site. Eksiksiz bir sayfa kabuğu oluşturur; böylece navigasyonu, kenar çubuğunu, temayı ve içerik alanını kendiniz bir araya getirmeden elde edersiniz. Onu oluşturun, AddMenu ile AddContent veya AddSection çağırın, ardından HTML özelliğini okuyun. Pakette gelen Site demosu tam olarak bunu yapar.
Onu bir HTTP yanıtına kendiniz yazarsınız. HTML düz bir string özelliğidir, bu nedenle her sunucu işe yarar. Pakette gelen demo, Professional derlemede TsgcWSHTTPServer bileşenini kullanır, aksi hâlde TIdHTTPServer bileşenine döner, ResponseNo := 200 ve ContentType := 'text/html; charset=utf-8' ayarlarını yapar ve dizeyi ContentText özelliğine atar.
Kapı, sgcVer.inc dosyasının 871. satırında, 870 ile 874. satırlar arasındaki {$IFDEF SGC_EDT_ALL} bloğunun içinde tanımlanan SGC_PACK_HTML değeridir. Bu kaynak ağacında onu tanımlayan All-Access sürümüdür. sgcHTML ayrıca kendi yükleyicisiyle ayrı bir ürün olarak da satılır; bu nedenle güncel lisanslar için tanımdan çıkarım yapmak yerine sgcHTML fiyatlandırma sayfasına bakın.
Hayır ve bu bilinçli bir tercihtir. SGC_HTML, 883. satırdaki {$IFNDEF ANDROID} ve 884. satırdaki {$IFNDEF IOS} içinde, 885. satırda tanımlanır; bu nedenle bu hedeflerde her sgcHTML unit'i boş bir unit'e derlenir. Sunucu tarafı bir kitaplıktır: telefon HTML'i ağ üzerinden alır, bu yüzden mobil hedefin oluşturucuya ihtiyacı yoktur. Windows, macOS ve Linux'un hepsi desteklenir.
Hayır. Kitaplık Bootstrap 5 işaretlemesi ve htmx öznitelikleri üretir; bir düğmenin geri göndermesini ve sayfanın bir bölümünü yeniden yüklemeden değiştirmesini sağlayan htmx'tir. Etkileşimi Pascal'da tanımlarsınız ve öznitelikler sizin için üretilir. İsterseniz CustomHead ve BodyEndHTML aracılığıyla kendi betiğinizi de ekleyebilirsiniz.
Evet. Layout, üyeleri slSidebarLeft, slSidebarRight, slTopNav, slTopNavSidebarLeft, slIconRail ve slOffcanvas olan bir TsgcHTMLSiteLayout alır ve varsayılanı slTopNavSidebarLeft değeridir. Preset, üyeleri arasında spAdmin, spDashboard, spPortal, spDocs, spLanding ve spApp bulunan bir TsgcHTMLSitePreset alır. Renkler ve açık veya koyu mod Theme nesnesinde yer alır.
Sayfayı düğümler olarak oluşturduğunuzda evet, çünkü düğüm metni yazar ve kaçış işlemini yapar. Risk, düğümleri atlayıp işaretlemeyi kendiniz birleştirdiğinizde ortaya çıkar; örneğin kullanıcı girdisinden oluşturduğunuz bir dizeyle AddContent çağırdığınızda. Kullanıcı verisi taşıyan her şey için düğüm unit'lerini tercih edin.
İndirme, Demos\60.HTML\01.RunTime altında on beşten fazla çalışma zamanı demosu içerir; bunlar arasında bir ERP panosu, bir yardım masası, bir satış noktası, bir depo, bir rapor uygulaması ve bir saha servisi uygulaması vardır. Galeride her birinin kısa bir videosu bulunur.
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

Pascal'da bir web arayüzü oluşturmaya hazır mısınız?

Tek satır işaretleme yazmadan önce denemeyi indirin ve Site demosunu çalıştırın.