Get started with TMS WEB Core for Visual Studio Code

• Gjalt's 101: Get started with TMS WEB Core for Visual Studio Code

• playlist

• Preview of TMS WEB Core for Visual Studio Code
• TMS WEB Core for Visual Studio Code: Videos
• TMS WEB Core for Visual Studio Code beta is ready for TMS ALL-ACCESS users
• TMS WEB Core for Visual Studio Code public beta is here!
• TMS WEB Core for Visual Studio Code v1.0 released

• TMS WEB Core: Web Application Development with Delphi

• Online course: Spanish
• Online course: English

This year in February, we launched TMS VCL UI Pack Academic. In April, we launched TMS FNC UI Pack Academic. And now in September, we launch TMS WEB Core Academic!

TMS Academic program

TMS WEB Core Academic

Getting started

Request the academic license now!

I have been a Delphi developer since 1996. During this journey, I have learned new skills and acquired new tools to keep up with the demands of the the software market. In the early 2000s, I learned about AJAX, web services, and basic web design. However, my studies did not require extensive software development for the World Wide Web, and I was happy to go back to developing user interfaces with Delphi in the VCL.

Times have changed significantly since then, and I have to be honest that right now I am still learning about web design for modern web development each day. It has become a major part of my daily routine to learn one new aspect of web development each day. I consider web development a mandatory tool in every software developer's tool belt. Basic web design skills go just along with it.

If you struggle with HTML and CSS just as much as I, look no further. I might just have the video tutorial you need. The best thing about it: It's free. It will start right at the beginning.

From the perspective of a Delphi developer, you will learn step-by-step how to build my application that I built to make ordering my books easier.

As you can see, you can select the store and book title you want to order and the application will navigate to the page for you where you can order the book.

Very simple. Or really? Three months ago, the design of the page would have been an impossible thing to do.

You will learn about:

• Separating application development with TMS WEB Core and web design
• Bootstrap
• FontAwesome
• Using (free) plugins in Visual Studio Code for web design
• Emmets and code completion for web design with Visual Studio Code
• WYSIWYG of your web design in the web browser
• Link you web design to your application controls

Create documentation is boring. At least that's my opinion, and most developers I know also don't like to write it. But that's something we need to do, of course. Thus, the easiest it gets to document things, the better.

Photo by Aaron Burden on Unsplash

With TMS XData, you create your REST API server using Delphi very easily, but you also get it documented almost automatically using the automatic Swagger generation feature. Since all endpoints are strong typed in server, all it takes is just to enable a single property and have your endpoints listed and testable. This feature has been available for years already.

But now XData takes it to another level. A good (if not the best) way to document your source code is to use XML Documentation Comments. In the interfaces and methods that build your service contract, you can simply add specific XML tags and content, like this:

    /// <summary>
    ///   Retrieves the sine (sin) of an angle
    /// </summary>
    /// <remarks>
    ///  Returns the Sine (Sin) value of an angle radians value.
    ///  The value returned will be between -1 and 1.
    ///  If the angle is zero, the returned value will be zero.
    /// </remarks>
    /// <param name="Angle">
    ///   The angle in radians.
    /// </param>
    function Sin(Angle: Double): Double;

And Delphi IDE will automatically use it for Help Insight , showing you information about the method on-the-fly. For example, if some developer is trying to use the Sin method of your API, information will be conveniently displayed:

The good news is that, with XData, you can use such XML comments in the Swagger document and Swagger-UI that are generated automatically by XData, improving even more your REST API documentation. Since the API endpoints are generated directly from the interfaced and methods, XData knows exactly the meaning of each documentation and can map it accordingly to Swagger.

By asking Delphi to generate the XML documentation files, and using a single line of code like this:

uses {...}, XData.Aurelius.ModelBuilder;
 ...
   TXDataModelBuilder.LoadXmlDoc(XDataServer.Model);

XData will reuse the documentation and include it in Swagger:

Using different documentation for Help Insight and Swagger

Reusing the same XML comments is nice as you don't repeat yourself. Document your code just once, and the same documentation is used for documenting your Delphi interfaces (Delphi developments) and your REST API (API consumer development).

But, if for some reason you want to use different documentation content for Delphi developers and for REST API users, that's also possible. For example, suppose the following documentation:

Note that tags summary and param are the regular XML documentation tags. They will be used for Help Insight:

And swagger tags with no name attribute (A), or name param-A (B), param-B (C) and remarks (D) will be used exclusively for Swagger documentation:

Customizing tags

You can also customize the tags in Swagger. Endpoints are grouped together inside a tag, which can have a name and description.

By default, the name of the tag will be path segment of the interface service. But you can change it using either swagger tag using tag-name attribute.

The description of the tag by default is empty, but you can define it using the regular summary tag, or optionally using the swagger tag with tag-description attribute.

Consider the following documentation for both IArithmenticService and ITrigonometryService :

The above tags will generate the following output in Swagger UI:

Customizing document header and description

XData also takes the model name, version and description into account to build the final document. You can configure such settings directly by changing some properties of the XData model:

  XDataServer.Model.Title := 'Mathematics API';
  XDataServer.Model.Version := '1.0';
  XDataServer.Model.Description :=
    '### Overview'#13#10 +
    'This is an API for **mathematical** operations. '#13#10 +
    'Feel free to browse and execute several operations like *arithmetic* and *trigonometric* functions'#13#10#13#10 +
    '### More info'#13#10 +
    'Build with [TMS XData](https://www.tmssoftware.com/site/xdata.asp), from [TMS Software](https://www.tmssoftware.com).' +
    'A Delphi framework for building REST servers'#13#10 +
    '[![TMS Software](https://download.tmssoftware.com/business/tms-logo-small.png)](https://www.tmssoftware.com)';

Note that you can use Markdown syntax to format the final text. Here is what it will look like:

You can read more about using XML documentation in Swagger with TMS XData by referring to the official documentation page.

Finally, this video shows in details how REST/JSON documentation works with XData, explaining how Swagger and Help Insight documentation is built from single source, how XML comments can be used, and even more. Lots of useful information there!

We already have an extensive set of powerful and feature-rich UI controls in our TMS FNC UI Pack. But there is always room for some additional tools to help you with your cross framework and cross platform work. In this new release of our TMS FNC UI Pack we’ve added 5 new components which were requested by you, our community of great developers who see the enormous advantages of components that can be used on VCL, TMS Web Core, FMX and Lazarus with just one code base.

TMS FNC Controls can be simultaneously used on these frameworks:

New to the TMS FNC UI family

TTMSFNCRichEditorHorizontalRuler

TTMSFNCSplitter

TTMSFNCProgressBar

TTMSFNCRating

TTMSFNCWaitingIndicator

TX509Certificate is a component of TMS Cryptography Pack to use X509 certificates. With it, we can sign certificate signing request (CSR) or use it in XAdES, CAdES or PAdES to sign or verify documents.

We can generate self-signed certificates, import them from PEM file, from PEM string, from PFX file.

In this post, I will explain how to import certificate from Windows Certificate Store.

To do that, we have to use the crypt32 DLL and CertOpenSystemStore and CertFindCertificateInStore.

CertOpenSystemStore

function CertOpenSystemStore(hProv: HCRYPTPROV; szSubsystemProtocol: LPCTSTR)
 : hCertStore;

function CertFindCertificateInStore(hCertStore: hCertStore;
 dwCertEncodingType, dwFindFlags, dwFindType: DWORD; pvFindPara: Pointer;
 pPrevCertContext: PCCERT_CONTEXT): PCCERT_CONTEXT;

• X509_ASN_ENCODING
• PKCS_7_ASN_ENCODING

_CERT_CONTEXT = record
    dwCertEncodingType: DWORD;
    pbCertEncoded: LPBYTE;
    cbCertEncoded: DWORD;
    pCertInfo: PCERT_INFO;
    hCertStore: hCertStore;
  end;

unit Unit1;

interface

uses
  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants,
  System.Classes, Vcl.Graphics,
  Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.StdCtrls,
  CryptBase, X509Obj, MiscObj;

const
  X509_ASN_ENCODING = $00000001;
  CERT_FIND_SUBJECT_STR = 8 shl 16 or 7;  // values taken from System.Net.HttpClient.Win

type
  HCRYPTPROV = ULONG_PTR;

  _CERT_CONTEXT = record
    dwCertEncodingType: DWORD;
    pbCertEncoded: LPBYTE;
    cbCertEncoded: DWORD;
    pCertInfo: PCERT_INFO;
    hCertStore: hCertStore;
  end;

  PCERT_CONTEXT = ^_CERT_CONTEXT;
  PCCERT_CONTECT = PCERT_CONTEXT;

  function ExtractCertWindowsStore(subjectName: string): TX509Certificate;

  function CertOpenSystemStore(hProv: HCRYPTPROV; szSubsystemProtocol: LPCTSTR)
    : hCertStore; stdcall; external 'crypt32.dll' name 'CertOpenSystemStoreW';

  function CertFindCertificateInStore(hCertStore: hCertStore;
    dwCertEncodingType, dwFindFlags, dwFindType: DWORD; pvFindPara: Pointer;
    pPrevCertContext: PCCERT_CONTEXT): PCCERT_CONTEXT; stdcall;
    external 'crypt32.dll' name 'CertFindCertificateInStore';

implementation

{$R *.dfm}

function ExtractCertWindowsStore(subjectName: string): TX509Certificate;
var
  Store: hCertStore;
  Cert: PCCERT_CONTEXT;
  s: string;
  i: integer;
  Conv: TConvert;
  X509Cert: TX509Certificate;
begin
  Cert := nil;
  Store := CertOpenSystemStore(0, PChar('MY'));
  if (Store <> nil) then
    Cert := CertFindCertificateInStore(Store, X509_ASN_ENCODING, 0,
      CERT_FIND_SUBJECT_STR, PChar(subjectName), nil)
  else
     raise Exception.Create('Unable to open certificate store');

  if (Cert <> nil) then
  begin
    s := '';
    for i := 0 to Cert.cbCertEncoded - 1 do
      s := s + IntToHex(integer(Cert.pbCertEncoded[i]), 2);

    Conv := TConvert.Create(hexa);
    try
      s := Conv.HexaToBase64(s);
    finally
      Conv.Free;
    end;
    X509Cert := TX509Certificate.Create;
    X509Cert.CrtStr := s;
    X509Cert.Decode;
    Result := X509Cert;
  end
  else
    raise Exception.Create('Certificate ' + subjectName + ' not found');
end;

end.

20% longer updates and support with licenses in the next 20 days

Your opportunity to get one of a limited edition run of 20 pieces of the book "Delphi Hands-on with TMS FNC Maps"

O maior evento Delphi do mundo irá acontecer novamente este ano. Mesmo com toda a situação da pandemia do COVID-19, a Embarcadero Conference 2020 irá se realizar no dia 20 de Outubro, em um novo formato, 100% online.

Apesar dos participantes perderem algumas coisas que só acontecem em eventos presenciais, com conversas valiosas e trocas de experiências com outros participantes nos intervalos das sessões, haverá benefícios interessantes nesse novo formato:

• Taxa de inscrição mais acessível;
• Você pode participar de onde estiver - sem precisar pegar um avião e reservar um hotel;
• As palestras serão gravadas, assim os participantes não perderão nenhuma delas!

Note que todas as palestras devem ser ao vivo. Assim, mesmo que elas sejam gravadas para serem vistas depois, escolhendo a palestra a participar trará os benefícios de poder interagir com o palestrante, fazer perguntas, conversar com os outros participantes, e assim por diante.

Assim, aqui estão nossas sugestões para as palestras pra você participar:

9 am - SERVIÇOS NA NUVEM: NÃO COMETA ESTES ERROS! (Wagner Landgraf)

Após anos lidando com desenvolvimento de serviços na nuvem, seja criando aplicações ou frameworks dedicados nessa área, o palestrante mostrará os principais conceitos, segredos, dicas e experiências para a construção de serviços na nuvem em Delphi. É um compartilhamento das experiências reais, problemas reais e sucessos reais, focando nas armadilhas e problemas que podem ocorrer ao longo do desenvolvimento e mostrando as soluções e prevenções para tais.

1 pm - SEU PRIMEIRO CRUD COM TMS WEB CORE (Marcos Moreira)

Será mostrado como configurar o ambiente, criar sua primeira aplicação, e os aspectos para sua distribuição.

3:40 pm - TMS ACADEMIC - THE TMS SOFTWARE ACADEMIC PROGRAM (Wagner Landgraf)

O programa TMS Academic será apresentado - suas motivações, seu futuro e como embarcar neste programa para obter licenças 100% gratuitas e funcionais dos produtos TMS se você for um aluno ou professor!

Visite a página oficial da Embarcadero Conference 2020, registre-se e participe!

---

The biggest Delphi event in the world is coming again this year. Even with all the COVID-19 pandemic situation, Embarcadero Conference 2020 in Brazil will happen on October, 20th, in a new format, 100% online.

Even though attendants will lose some things, like the great and valuable in-person conversations, there will be some great benefits with this format:

• More affordable fee;
• You can participate from where you are - no need to take a plane and book a hotel;
• Sessions will be recorded so attendants won't miss any of them!

Note that all sessions are supposed to be live. So even though they will be record, choosing a session to attend will bring you the benefit of interacting live with the speaker, asking questions, chatting with other attendants, and so on.

Thus, here is our suggestions for sessions you could attend:

9 am - CLOUD SERVICES: DON'T MAKE THESE MISTAKES! (Wagner Landgraf)

After years of dealing with cloud service development, whether creating applications or dedicated frameworks in this area, the speaker will show the main concepts, secrets, tips and experiences for building cloud services with Delphi. He will share real experiences, real problems and real successes, focusing on the pitfalls and problems that can occur throughout development and showing the solutions and preventions for them.

1 pm - YOUR FIRST CRUD WITH TMS WEBCORE (Marcos Moreira)

You will be shown how to configure the environment, create your first application, and the aspects for its distribution.

3:40 pm - TMS ACADEMIC - THE TMS SOFTWARE ACADEMIC PROGRAM (Wagner Landgraf)

The TMS Academic program will be presented - the motivations, the future, and how to embark in this program to get 100% free and functional licenses of TMS products if you are a student or a teacher!

Visit the Embarcadero Conference 2020 official page, register and participate.

Available courses

What is the language spoken in the course?

Full source code for examples

Your Instructor

Company foundation

First steps

A technical adventure with software progress and new frameworks

Our ultra limited anniversary gift for you!

A big thank you to family, friends, colleagues and community

A big thank you to you, loyal customer

Let passion drive the future

Team Effort

• Introducing Apple MapKit JS service
  
  
  
  
• TTMSFNCOpenLayers with the ability to configure a custom tile server
• TTMSFNCMapBox & TTMSFNCTomTom with a property to control the map style
• Anchoring & Z-Index support in TTMSFNCGoogleMaps
• TTMSFNCElevation: A new non-visual component to retrieve elevation data based on coordinate
• Greatly Improved performance loading & parsing GPX files
• Faster loading of markers & poly elements
• Getting elevation data from GPX files

• Bart Holvoet: Extensive API knowledge and master in REST services, implementation
• Gjalt Vanhouwaert: Intensive feedback & testing, creating cross-platform demos
• Holger Flick: Providing feedback & testing, creator of the TMS FNC Maps book
• Pieter Scheldeman: Architecture & design choices, research on APIs & services, implementation
• Masiha Zemarai: Marketing campaign, social media & support

REST API & mapping services

Creating cross-platform demos

Edge Chromium

TMS FNC Maps Book

Intro

1) Make sure Microsoft Edge Chromium is available on your system

• Install the latest Windows updates.
• Install BETA, DEV or CANARY build: https://www.microsoftedgeinsider.com/en-us/download/
• Install the Evergreen WebView2 runtime: https://developer.microsoft.com/en-us/microsoft-edge/webview2/

2) Copy the necessary DLLs to communicate with WebView2 embedded browser control

Deploying your application to your customer

In this article, we start from a TWebResponsiveGrid and use it to demonstrate various tricks that apply throughout the TMS WEB Core framework but are here in combination with the TWebResponsiveGrid perfect to show. The purpose of the article is to show how well the web HTML/CSS world blends with the Delphi developers components world and this in different & flexible ways. We will show you a couple of techniques to customize TWebResponsiveGrid items and make these interactive.

TWebResponsiveGrid intro

Beyond simple HTML in items

  for i := 0 to 20 do
  begin
    WebResponsiveGrid1.Items.Add.HTML := 'Grid item '+i.ToString+'
OK>/button>';
  end;

  AddCSS('respgriditem','.mygriditem { background-color: aliceblue; border-radius: 4px; border: 1px solid darkgray; padding:10px; font-name: Arial; font-size: 12pt;}');
  AddCSS('respgrid','.mygrid {padding:10px;}');

  WebResponsiveGrid1.ElementClassName := 'mygrid';
  WebResponsiveGrid1.Options.ItemClassName := 'mygriditem';

Blending the Object Pascal world with HTML elements

  TForm3 = class(TWebForm)
  public
    { Public declarations }
    procedure ButtonClick(Sender: TObject);
  end;

procedure TForm3.WebFormCreate(Sender: TObject);
var
  i: integer;
  btn: TWebButton;
begin
  for i := 0 to 20 do
  begin
    WebResponsiveGrid1.Items.Add.HTML := 'Grid item '+i.ToString+'
OK';

    btn := TWebButton.Create('btn'+i.ToString);
    btn.Tag := i;
    btn.OnClick := ButtonClick;
  end;
end;

procedure TForm3.ButtonClick(Sender: TObject);
begin
  if (Sender is TWebButton) then
    WebListbox1.Items.Add('Clicked button ' +(Sender as TWebButton).Tag.ToString);
end;

  for i := 0 to 20 do
  begin
    chk := TWebCheckBox.Create(Self);
    chk.ShowFocus := false;
    chk.ParentElement := WebResponsiveGrid1.Items[i].ElementHandle;
    chk.Tag := i;
    chk.OnClick := ButtonClick;
    WebResponsiveGrid1.Items[i].ItemObject := chk;
  end;

    chk.ParentElement := WebResponsiveGrid1.Items[i].ElementHandle;

  for i := 0 to 20 do
  begin
    (WebResponsiveGrid1.Items[i].ItemObject as TWebCheckBox).Checked := true;
  end;

procedure TForm3.ButtonClick(Sender: TObject);
begin
  if (Sender is TWebButton) then
    WebListbox1.Items.Add('Clicked button ' +(Sender as TWebButton).Tag.ToString);

  if (Sender is TWebCheckBox) then
  begin
    if (Sender as TWebCheckBox).Checked then
      WebListbox1.Items.Add('Checked checkBox ' +(Sender as TWebCheckBox).Tag.ToString)
    else
      WebListbox1.Items.Add('Unchecked checkBox ' +(Sender as TWebCheckBox).Tag.ToString);
  end;
end;

Summary

20% longer updates and support

WIN a limited edition "Delphi Hands-on with TMS FNC Maps"

We are getting closer to the next milestone of our TMS WEB Core for Visual Studio Code project. So, this is an ideal moment for letting TMS ALL-ACCESS users have access to the TMS WEB Core for Visual Studio Code v1.1 beta that we released today.

New features v1.1 beta

• Support for creating PWA's (Progressive Web Applications, i.e. installable and offline usable apps for iOS and Android mobile devices).
• Support for Electron cross platform desktop apps (Windows, macOS, Linux)
• In sync with the TMS WEB Core framework latest release v1.5.5.2
• Lots of further polishing on IDE integration in Visual Studio Code.

Roadmap Q4 2020/Q1 2021

Summary

• Large number of included visual and non-visual components: With these components, a RAD approach allows you to build solutions fast.
• Visual data-binding: A data-binding mechanism similar to Delphi VCL data-binding enables to hook-up your client application via client datasets to data sent from a REST API based backend quickly.
• Use existing or custom HTML web templates: The Visual Studio Code IDE has built-in strong support for editing HTML/CSS and a vast array of extensions. This adds even more power to it. The visual designer shows the pages ”as is” using the templates.
• Integrate any existing JavaScript library: The underlying pas2js compiler for transpiling Object Pascal code to JavaScript code running in the browser facilitates programmatic access to any existing JavaScript library. This opens up the huge availability of all kinds of easily available web functionality to integrate.
• Debug using Object Pascal code: All modern debugging capabilities like breakpoints, watches, stepping in code, ... can be done in the Object Pascal code base from the Visual Studio Code IDE.
• Project compatibility with Delphi. Create projects in Delphi and open & work further on these in Visual Studio Code and vice versa.

Get in the front seat today

TAdvWebBrowser/TTMSFNCWebBrowser

Get started

TAdvWebBrowser built-in features

AdvWebBrowser.Navigate(AURL);
AdvWebBrowser.goBack;
AdvWebBrowser.goForward;

procedure TForm.AdvWebBrowserNavigateComplete(Sender: TObject;
  var Params: TAdvCustomWebBrowserNavigateCompleteParams);
begin
  ListBox1.Items.Add(Params.URL);

  Back.Enabled := AdvWebBrowser1.CanGoBack;
  Forward.Enabled := AdvWebBrowser1.CanGoForward;
end;

AdvWebBrowser1.LoadHTML(MyHTML);

Go to the next level

AdvWebBrowser.ExecuteJavascript('document.getElementById("myParagraph").innerHTML = "' + s + '";');

AdvWebBrowser.ExecuteJavascript('function GetHTML(){return document.documentElement.innerHTML;} GetHTML();',
   procedure(const AValue: string)
   begin
     memo.Lines.Text:= TJSONObject.ParseJSONValue(AValue).Value;;
   end
   );

TMyBridgeObject = class(TInterfacedPersistent, IAdvCustomWebBrowserBridge)
  private
    function GetObjectMessage: string;
    procedure SetObjectMessage(const Value: string);
  published
    property ObjectMessage: string read GetObjectMessage write SetObjectMessage;
  end;
  
  procedure TMyBridgeObject.SetObjectMessage(const Value: string);
  begin
    //Use the Value parameter.
  end;
 

 AHTML := '' + #13 + 
          ' ' + #13 +
          '   ' + #13 + 
          ' ' + #13 + 
		  ' ' + #13 + 
		  '  Yes!' + #13 + 
		  ' ' + #13 + 
		  '';
  o := TMyBridgeObject.Create;
  AdvWebBrowser1.AddBridge(BridgeName, o);

Intro

Editing

• Inplace editing
• Dialog editing
• Custom editing

Inplace editing

Dialog editing

Custom editing

type
  TCustomInplaceEditor = class(TTMSFNCCustomControl)
  private
    FHTMLImport: TTMSFNCRichEditorHTMLIO;
    FRichEditor: TTMSFNCRichEditor;
    FRichEditorToolBar: TTMSFNCRichEditorFormatToolBar;
    FScrollBox: TScrollBox;
  public
    constructor Create(AOwner: TComponent); override;
  end;

implementation

{ TCustomInplaceEditor }

constructor TCustomInplaceEditor.Create(AOwner: TComponent);
begin
  inherited;
  FScrollBox := TScrollBox.Create(Self);
  FScrollBox.Parent := Self;
  FScrollBox.Align := TAlignLayout.Client;

  FRichEditor := TTMSFNCRichEditor.Create(FScrollbox);
  FRichEditor.Parent := FScrollbox;

  FRichEditorToolBar := TTMSFNCRichEditorFormatToolBar.Create(FScrollbox);
  FRichEditorToolBar.RichEditor := FRichEditor;
  FRichEditorToolBar.Parent := FScrollbox;

  FRichEditor.Position.Y := FRichEditorToolBar.Height;

  FRichEditor.Width := FRichEditorToolBar.Width;

  FHTMLImport := TTMSFNCRichEditorHTMLIO.Create(Self);
  FHTMLImport.RichEditor := FRichEditor;
end;

procedure TForm1.TMSFNCPlanner1GetInplaceEditor(Sender: TObject; AStartTime,
  AEndTime: TDateTime; APosition: Integer; AItem: TTMSFNCPlannerItem;
  var AInplaceEditorClass: TTMSFNCPlannerInplaceEditorClass);
begin
  AInplaceEditorClass := TCustomInplaceEditor;
end;

procedure TForm1.TMSFNCPlanner1AfterOpenInplaceEditor(Sender: TObject;
  AStartTime, AEndTime: TDateTime; APosition: Integer;
  AItem: TTMSFNCPlannerItem; AInplaceEditor: TControl;
  AInplaceEditorRect: TRectF);
var
  c: TCustomInplaceEditor;
begin
  c := (AInplaceEditor as TCustomInplaceEditor);
  c.SetBounds(c.Left, c.Top, c.FRichEditorToolBar.Width + 20, 200);
  c.FHTMLImport.InsertHTML(AItem.Text);
end;

procedure TForm1.TMSFNCPlanner1BeforeUpdateItem(Sender: TObject; AStartTime,
  AEndTime: TDateTime; APosition: Integer; AItem: TTMSFNCPlannerItem;
  var ATitle, AText: string; var ACanUpdate: Boolean);
var
  c: TCustomInplaceEditor;
  sl: TStringList;
begin
  c := (TMSFNCPlanner1.GetInplaceEditor as TCustomInplaceEditor);
  sl := TStringList.Create;
  try
    sl.Text := c.FRichEditor.ContentAsPlainHTML;
    AText := sl.Text;
  finally
    sl.Free;
  end;
end;

procedure TForm1.TMSFNCPlanner1AfterOpenUpdateDialog(Sender: TObject;
  AStartTime, AEndTime: TDateTime; APosition: Integer;
  AItem: TTMSFNCPlannerItem);
begin
  TMSFNCPlanner1.GetEditingDialog(AItem.Index).ButtonRemove.Visible := False;
end;

function FindChild(AContainer: TControl; AName: String): TControl;
var
  I: Integer;
begin
  Result := nil;
  for I := 0 to AContainer.ControlsCount - 1 do
  begin
    if AContainer.Controls[I].Name = AName then
    begin
      Result := AContainer.Controls[I];
      Break;
    end;
    Result := FindChild(AContainer.Controls[I], AName);
  end;
end;

procedure TForm1.TMSFNCPlanner1ItemToCustomContentPanel(Sender: TObject;
  AItem: TTMSFNCPlannerItem; AContentPanel: TControl);
var
  l: TLabel;
  c: TCheckBox;
  img: TImage;
  b: TColorComboBox;
begin
  l := FindChild(AContentPanel, 'lblPatient') as TLabel;
  l.Text := 'Patiënt: ' + AItem.Title;
  c := FindChild(AContentPanel, 'chkOperation') as TCheckBox;
  c.IsChecked := AItem.DataBoolean;
  img := FindChild(AContentPanel, 'imgPatient') as TImage;
  img.Bitmap.Assign(TMSFMXBitmapContainer1.FindBitmap(AItem.DataString));
  b := FindChild(AContentPanel, 'cboCategory') as TColorComboBox;
  b.Color := AItem.Color;
end;

procedure TForm1.TMSFNCPlanner1CustomContentPanelToItem(Sender: TObject;
  AContentPanel: TControl; AItem: TTMSFNCPlannerItem);
var
  c: TCheckBox;
  b: TColorComboBox;
begin
  c := FindChild(AContentPanel, 'chkOperation') as TCheckBox;
  b := FindChild(AContentPanel, 'cboCategory') as TColorComboBox;
  AItem.BeginUpdate;
  AItem.Color := b.Color;
  AItem.DataBoolean := c.IsChecked;
  AItem.EndUpdate;
end;

procedure TForm1.TMSFNCPlanner1GetCustomContentPanel(Sender: TObject;
  AItem: TTMSFNCPlannerItem; var AContentPanel: TControl);
begin
  if Assigned(AItem) and (AItem.Resource = 1) then
    AContentPanel := Panel1;
end;

Today we want to bring to your attention two totally different TMS WEB Core features. These little tidbits that can bring your TMS WEB Core web client application from good to great. The first is about handling application termination and the second is about getting something more out of TWebStretchPanel.

Application termination

type
  TForm1 = class(TWebForm)
  public
    { Public declarations }
    s: string;
  end;

procedure TForm1.WebFormCreate(Sender: TObject);
begin
  s := '';
end;

procedure TForm1.WebButton1Click(Sender: TObject);
begin
  s := 'Action needed before leaving';
end;

procedure TForm1.WebFormBeforeUnload(Sender: TObject; var AMessage: string);
begin
  AMessage := s;
end;

procedure TForm1.WebFormUnload(Sender: TObject);
begin
  if (s <> '') then
    DoHandleUnloadHere;
end;

Stretching the use of the TWebStretchPanel

procedure TForm1.WebButton2Click(Sender: TObject);
begin
  WebListControl1.Items.Add.Text := 'Item ' + WebListControl1.Items.Count.ToString;
end;

procedure TForm1.WebButton3Click(Sender: TObject);
var
  it: TListItem;
begin
  it := WebListControl1.Items[WebListControl1.Items.Count - 1];
  it.Free;
end;

procedure TForm1.WebFormCreate(Sender: TObject);
begin
  AddCSS('btnmargin','.btnmargin { margin:10px; float:left; outline:none; border:none;} .btnmargin:focus {outline: none;}');
  WebBitBtn1.ElementClassName := WebBitBtn1.ElementClassName + ' btnmargin';
  WebBitBtn2.ElementClassName := WebBitBtn2.ElementClassName + ' btnmargin';
end;

procedure TForm1.WebFormShow(Sender: TObject);
var
  el: TJSHTMLElement;
begin
  el := TJSHTMLElement(WebStretchPanel1.ElementHandle.children.item(1));
  el.style.setProperty('background-color','silver');
end;

Explorer the wonderful world of TMS WEB Core

We are excited to announce the immediate availability of TMS WEB Core for Visual Studio Code v1.1 that now enables developing cross-platform Electron desktop apps and PWA's. This is a new milestone in the development of RAD component Object Pascal language based web development. The key differentiators of TMS WEB Core for Visual Studio Code are:

• RAD component based development from the free Visual Studio Code IDE
• RAD designer using web technology, enabling live, wysiwyg design-time rendering
• Development directly from Windows, macOS and Linux desktop machine
• Rich eco system of web related development extensions for the IDE
• Modern IDE with multiview editing, direct high-DPI/retina support

Electron

PWA

Summary

Availability

What's next