Creating a site in Delphi, or How to use uniGUI to a minimum

uniGUI is a library that allows you to create web applications in the classic Delphi-style, through visual components, and what is important, in most cases, it completely hides from the developer the entire client (browser) "kitchen": you do not need to know neither HTML nor CSS, not JavaScript, and all development is conducted only in one language - Delphi.

If you look at the picture from afar, you will see 3 scenarios for using the library:

1. The most favorable, for which it as a whole was created, when the described bright, bright side of uniGUI manifests itself fully - the transfer (full or partial - not important) of desktop applications to the web, which can be done quickly, in a familiar way and with high quality only when the components supplied with the library immediately provide the required functionality - for example, filtering and sorting by table columns.
2. It is very similar to the first and to some extent derives from it, with the only difference that the regular set of components does not cover all the possibilities of the TOR ; if we take the table again for example, then such a requirement could be a multi-level grouping of rows into arbitrary columns. If you manage to find third-party solutions with the necessary capabilities, the script comes down to the first, and if not, then you will need to customize yourself, which is already very nontrivial, because here you can’t just do not need JavaScript, but also deep knowledge of the Ext JS framework based on which the browser side uniGUI.
3. The last scenario may seem strange and even alien to those who put the first one into practice - talking about abandoning the entire rich palette of visual components and developing the client part of a web application exclusively using its native triad - HTML, CSS and JavaScript. This article will show in which cases such a thing is permissible, and will also demonstrate a way to realize our plans.

Formulation of the problem

Consider two situations.
')
The first is characterized by the fact that a Delphi developer is familiar with the web exclusively in one library (uniGUI, of course) and has no desire or time resources to search and explore alternatives, and the following task is put before him: to create a modern-looking dynamic (with AJAX ) the site on the provided layout, the adherence to which must be very accurate - all colors, fonts, indents, possible shadows and other design solutions are reinforced concrete, moving away from them is unacceptable. The likelihood that the layout will match one of the themes supplied with the library is almost zero; the chance that with the help of the standard settings (through the Object Inspector) and some techniques (via CSS) you can adjust the appearance of the components to the required, already higher, but also small. If it turns out that the design, in addition, contains various animations, then write is gone - uniGUI bypasses this topic and cannot help with anything.

Here, the best output (meant for the end user) seems to be manual layout on the layout, plus which is also at maximum performance, because often even a few dozen of uniGUI graphic objects are not only created with a noticeable delay, but also drawn not instantly, but if the score reaches up to hundreds and above, an unacceptable slowdown is almost guaranteed. By itself, when a Delphi programmer owns the layout, he can also do this part of the work, and if not, then it is quite possible to transfer it to another person, because, as will be seen below, these structural blocks of the site are the client triad and server code - very independent and can be developed separately.

A second, more rare situation is also possible, in which the approach described below is similarly applicable: initially the work is carried out according to the first scenario, using any visual components, but then at some point, due to uniGUI problems that cannot be resolved or circumvented, it becomes It is impossible to continue creating and a different path is required (preferably with preservation of all the server code already written).

Statics

So, having a layered model in your hands, you need to decide how to display it, which does not have such an obvious solution, since the work is carried out on the basis of the particular library chosen with its inherent limitations and rules, so the first task is clear - somehow embed arbitrary HTML in a container from the composition of uniGUI.

Container search

Let's start small and explore a minimal, empty project, using the wizard to create it:


As a result of his work, a project with three files will appear:

1. ServerModule.pas – UniServerModule, -.
2. MainModule.pas – , .
3. Main.pas – MainForm – , .

, ( -) :


, , ( ), – , :


, div, ; HTML, , , OnCreate ( , , , ):

procedure TMainForm.UniFormCreate(Sender: TObject);
const
  HTML =
    '<p> </p>' +
    '<table>' +
      '<tr> <td>1</td><td>2</td> </tr>' +
      '<tr> <td>3</td><td>4</td> </tr>' +
    '</table>';
begin
  WebForm.JSForm.Update(HTML);
end;

:

HTML, , – UniServerModule.MainFormDisplayMode, mfPage:


, , : , ( dfm-):

object MainForm: TMainForm
  ...
  AlignmentControl = uniAlignmentClient
  Layout = 'fit'
end

, , , .

, – , – , , , . . – , .

, . , , – , () , :


, AJAX- :

1. , . .
2. .

. , , HTML-:

<img src="files/ .svg" onclick="Search( document.getElementById('header-search-input') )">

onclick, Search , :

function Search(Input)
{
  if (Input.value.trim() != '')
    ajaxRequest( Ext.getCmp("MainForm"), "Search", ["Phrase=" + Input.value] );
}

ajaxRequest:

1. Ext.getCmp("MainForm") – , AJAX-, , , (), . , , – , , , MainForm.Button1, MainForm, , , , , .
2. "Search" – , , .
3. ["Phrase=" + Input.value] – .

, , , , OnAjaxEvent, :

procedure TMainForm.UniFormAjaxEvent(Sender: TComponent; EventName: string; Params: TUniStrings);
begin
  if EventName = 'Search' then
    Search( Params.Values['Phrase'] );

  ...
end;

, Search, :

procedure TMainForm.Search(const Phrase: string);

  function StringToJSString(const UnsafeString: string; const QuoteChar: Char = ''''): string;
  begin
    Result := QuoteChar + UnsafeString.Replace('\', '\\').Replace(QuoteChar, '\' + QuoteChar) + QuoteChar;
  end;

var
  BandsHTML, AlbumsHTML: string;
begin
  //  HTML-        .
  BandsHTML := ...;
  AlbumsHTML := ...;

  UniSession.AddJS( Format('ShowSearchResults(%s, %s);', [StringToJSString(BandsHTML), StringToJSString(AlbumsHTML)]) );
end;

ShowSearchResults, AJAX-. - :

function ShowSearchResults(BandsHTML, AlbumsHTML)
{
  document.getElementById("found-bands").innerHTML = BandsHTML;
  document.getElementById("found-albums").innerHTML = AlbumsHTML;
}

, DOM, :


, , , AJAX-, – , ClientEvents.UniEvents:


MainForm ( – ).

- uniGUI, , , – CSS ; UniServerModule CustomFiles, :