Raudus - RIA web vývoj v Delphi

Čas od času se dívám na některé komponenty, které podle mne mají potenciál, ale nejsou ve stavu kdy by se to dalo použít, např. nějaká zásadní funkce nefunguje. Něco podobného je resp. byl Raudus. A právě s nedávnou verzí 0.9 mne přesvědčil, že stojí za to se s ním zabývat.

Za technologickou špičku v oblasti RIA v Delphi (RIA - Rich Internet Application) stále považuji UniGui, které je ale díky použití ExtJS pro mne hůře použitelné a do integrace Sencha Touch, což bude snad za půl roku, ho nechávám být. Pro neznalé: Sencha Touch je verze ExtJS pro mobilní zařízení, která navíc má volnější licenci i pro komerční použití. Jak ExtJS, tak Touch verze představuje moderní framework pro psaní RIA aplikací (což v podstatě představuje javascript orgie) a pro použití v Delphi je komponenty zapouzdřují. Navíc nová verze UniGui umožňuje odstranit titulek a vypadá zajímavěji.

Proto mne překvapil Raudus, který na věc jde trochu jinak.

Je nutno uvést, že řada 0.8 obsahuje podporu pro ExtJS a Sensa Touch, ale řada 0.9 kromě jiných věcí přichází s vlastními prvky (zatím jen pár, ale předchozí verze ukazují, že autor tomu rozumí) a předchozí komponenty zahazuje. Přesto mi přijde toto zajímavé, jelikož kromě jiného v examples je ukázáno jak napsat vlastní komponentu jak pro ExtJS, tak pro Touch - takže to nevidím jako problém a předpokládám, že autor nějaké další dodá.

Proč o tom mluvím? Protože Raudus má vyřešen zásadní problém a to jak v design módu zobrazovat výsledek pro web.

Raudus v design modu se stylem cupertino - určený pro web

Jak to dokáže aby v normálním designeru měl HTML prvky? Nejsem si 100% jistý ale podle mne při změně komponenty zavolá jádro prohlížeče na bázi webkitu (tj. Safary, iOS …) a výsledek si uloží a pak ho normálně zobrazuje jako bitmapu. Každopádně součástí instalace komponent je i podadresář s jádrem webkitu. Což mimochodem umožňuje to, že Raudus se dá používat v Lazarusu - (tedy pokud máte konkrétní verzi, jelikož instalace je předkompilovaná), ale designer podle screenshotů je stejný jako v Delphi - tedy na Windows, na Linuxu se dá prý jen kompilovat.

Tímto oslím můstkem se dostáváme k další zajímavosti a to je výsledná podpora.

Kromě Delphi je tedy podporován i Lazarus. Ohledně běhu je podpora pro samostatný web server (k tomu dále) nebo modul Apache 2.2. Na rozdíl od UniGui, IntraWeb nebo WebBroker z Delphi, není HTTP server psán v Delphi, ale používá to mongoose32.dll, což je jedna knihovna bez instalace. Škoda - synapse by tomu slušela více. Navíc je možné za pomocí PhoneGAP vytvořit "boot loader" aplikace přímo pro Android nebo tak - zbytek aplikace běží na serveru.

To je z dema na webu, já tam to pozadí nemám, ale předpokládám, že to je nějaká vývojová verze

Poznámky: Je dobré na jejich wiki přečíst sekci multithreading, resp. to jejich wiki prolézt celé. Aplikace je neuvěřitelně rychlá ohledně odezev, přičemž možnost krokování v Delphi IDE zůstává. Hrál jsem si s tím relativně dlouho a přijde mi to celkem zajímavé (snad až na problém s ModalResult při zobrazení modálního okna, což je buďto zásadní průser nebo jen chyba). Online ukázky - samples.

Vložte si na formulář TRxTheme a pro vývoj na mobil si nastavte ForceMobile, jinak bude fungovat pouze autodetekce prohlížeče. Zároveň můžete pro komponentu nastavit styl (copermino pro mobil nebo redmont pro styl ala Windows).

Mimochodem DPR soubor pro web server je následující:

program Project1;

{$APPTYPE CONSOLE}

uses
  RaApplication,
  RaApplicationExe,
  RaConfig,
  Unit3 in 'Unit3.pas' {Form3};

{$R *.res}

begin
  WriteLn('http://localhost:88/ - open in browser');
  Application.Initialize;
  Application.Config.Port := 88;
  Application.Config.WwwDiskDirectory := 'd:\components\Raudus\www';
  Application.Config.SchedulerMode := rsmRunInSuperThread;
  Application.CreateForm(TForm3, Form3);
  Application.Run;
end.

Pro Apache je to podobné, jen se jedná o library.

Kromě jiného se mi líbí i styl psaní komponent. Třeba ty dva obrázky zeleného a červeného kolečka jsou ukázková komponenta, která používá Canvas v HTML stylem předefinování virtuální metody:

procedure TRxTickCross.RaDrawExtend(var AJavascript: String);
begin
  FCheckedMate := FChecked;
  AJavascript :=

    'var me=this;' +
    'me.CHECKED=' + IfThen(FChecked, 'true', 'false') + ';' +

    'me.onRender=function(){' +
      // it is better to render TickCross only after
      // "me.getDOM()" is inserted into the DOM tree
      'me.d=setTimeout(function(){' +
        'me.d=undefined;' +
        'me.canvas=document.createElement("canvas");' +
        'me.getDOM().appendChild(me.canvas);' +
        'me.refresh();' +
      '},0);' +
    '};' +

    'me.refresh=function(){' +
      'if(me.canvas){' +
        // REPLACE "REFRESH" BODY WITH YOUR CODE TO
        // CREATE CUSTOM CANVAS-BASED CONTROL
        'var width=me.getWidth(),' +
            'height=me.getHeight(),' +
            'minim=Math.min(width,height);' +
            'ctx=me.canvas.getContext("2d");' +
        'me.canvas.width=width;' +
        'me.canvas.height=height;' +
        'if(me.CHECKED){' +
          'ctx.beginPath();' +
          'ctx.fillStyle="green";' +
          'ctx.arc(minim/2,minim/2,minim/2,0,2*Math.PI,false);' +
          'ctx.fill();' +
          'ctx.beginPath();' +
          'ctx.strokeStyle="white";' +
          'ctx.lineWidth=7*minim/40;' +
          'ctx.moveTo(8*minim/40,18*minim/40);' +
          'ctx.lineTo(18*minim/40,28*minim/40);' +
          'ctx.lineTo(32*minim/40,12*minim/40);' +
          'ctx.stroke();' +
        '}else{' +
          'ctx.beginPath();' +
          'ctx.fillStyle="red";' +
          'ctx.arc(minim/2,minim/2,minim/2,0,2*Math.PI,false);' +
          'ctx.fill();' +
          'ctx.beginPath();' +
          'ctx.strokeStyle="white";' +
          'ctx.lineWidth=7*minim/40;' +
          'ctx.moveTo(11*minim/40,11*minim/40);' +
          'ctx.lineTo(29*minim/40,29*minim/40);' +
          'ctx.moveTo(29*minim/40,11*minim/40);' +
          'ctx.lineTo(11*minim/40,29*minim/40);' +
          'ctx.stroke();' +
        '};' +
      '};' +
    '};' +

    'me.onBoundsChanged=function(){' +
      'if(me.dbc){' +
        'clearTimeout(me.dbc);' +
        'me.dbc=undefined;' +
      '};' +
      // it is better to alter controls only
      // after borwser performs a reflow
      'me.dbc=setTimeout(function(){' +
        'me.dbc=undefined;' +
        'me.refresh();' +
      '},0);' +
    '};' +

    'me.onUnrender=function(){' +
      'if(me.d){' +
        'clearTimeout(me.d);' +
        'me.d=undefined;' +
      '};' +
      'if(me.dbc){' +
        'clearTimeout(me.dbc);' +
        'me.dbc=undefined;' +
      '};' +
      'if(me.canvas){' +
        'me.canvas=undefined;' +
      '};' +
    '};';

end;

Zavěr: jedná se o beta software, není tam moc komponent, ale ty základní ano a podle všeho budou rychle přibývat. Nepochybuji, že Embarcadero půjde podobnou cestou (viz. to co předvádí s HTML5 Builderem je začátek, a oznámení podpory Linux server tomu napovídá). UniGui je pořád vepředu, ale toto by mohla být zajímavá konkurence, zvláště když se jedná momentálně o freeware. IntraWeb je sice součástí Delphi, ale táhne za sebou historickou podporu prohlížečů a jeho licencování je šílené (5 konkurenčních session max. ve verzi Professional). Když nic jiného, tak to aspoň po očku sledujte. V další verzi má být DBGrid, což sice pro mobilní zařízení není košer, ale pro web ano a snad se přidají i další komponenty. Navíc v té starší verzi je jich halda, ale zase tam není tak pěkný designer.

Mi osobně se s tím pracovalo velmi pěkně a rychle, i když jsem ohledně komponent musel dělat kompromisy (např. bych ocenil OnClick na panelu atd).