Quantcast
Channel: TMS Software
Viewing all 1006 articles
Browse latest View live

Building Android/iOS Native App from TMS Web Core/TMS XData application using PhoneGap

$
0
0

Since TMS Web Core generates pure stand-alone HTML/JS/CSS applications, and because that applications can be fully responsive, I have decided to do a quick experiment on how to convert the TMS Web Core application to a native mobile application using PhoneGap tool, more specifically PhoneGap Build.

My intention was to turn the XData Music demo (https://app.devgems.com/xdata/music/app) into a mobile application.

I have never used PhoneGap before. It's a software development framework from Adobe used to develop mobile applications using web-development technologies like HTML, CSS and JS. PhoneGap Build is a cloud service that goes further and do all the job of creating such application for you, instead of requiring you to install PhoneGap in your computer and configure it.

So what I did was signing up to PhoneGap Build - I could just login with my Google account, and clicked "New App". I then got the following screen:



What I did then was just zip the folder with html/js/css files from XData Music demo and upload it to PhoneGap using the "upload a .zip file" button. And that's it. Well, not exactly that. Since I tried it on iOS besides Android, I still had to deal with provisioning and certificate stuff, sending it to PhoneGap so it could generate the iOS app according to Apple guidelines. But after that, it provided me with links to download my mobile application for iOS, Android and - mind you - Windows Phone.

The whole process took literally 30 minutes. Most of it was just dealing with the Apple provisioning and certificate stuff. Here is a video of the mobile application running on my iPhone.




Larry's To Do List: a tuturial on using TMS WEB Core

$
0
0

Larry’s To Do List (guest article)

Introduction.

This is a tutorial describing my journey learning TMS Web Core from TMS Software. I’m a Delphi / Pascal developer who started writing Pascal back in the early Turbo Pascal days and then moved on to Delphi when it was first released. For the last 20 plus years I’ve been writing Windows accounting apps for my clients, using many of TMS Software's great components.

A few years back, with the advent of mobile devices, my clients started requesting that pieces of the software be accessible from their smart phones and tablets. I had tried many approaches but was struggling with the way things are handled on the web vs Windows. Of late I’ve been playing with Bootstrap, jQuery using Ajax to communicate with PHP backends. But JavaScript wasn’t my “native” language. So, when TMS Web Core came out I was a pretty happy guy. At last I would be able to put some of my apps onto the web.

As a way of learning TMS Web Core I decided to write a small app to keep track of my To Do’s. I’m a list maker who at the start of each day reviews what needs doing. This hand-written list has the Date Due, a Description and the Priority and usually which client it’s for. And when the task is complete, I check it off as being done. With this in mind, I decided to create a simple MySQL database named “todos” with initially a single table “todolist”. And use TMS Web Core with Bootstrap 4 and PHP to maintain this list.

As I was working on this project the thought came to mind that maybe other Delphi developers could use this project as a way for them to learn TMS Web Core. It’s a project in progress, as I’m still learning the in’s and out’s of TMS Web Core.

Sample screens.



Above is the main screen. The app uses TMS Web Core with various elements linked to the Bootstrap 4 CSS using primarily “ElementId” and “ElementClass” properties in the components of TMS Web Core. When you click “Edit”, you’ll get the screen below.

Here the TMS Web Core components are merged with a Bootstrap 4 form to produce the results shown.

Briefly the “Date Due” uses the component “TWebDateTimePicker” linked to a “form-group” item on the Bootstrap 4 form. “Priority” uses the “TWebComboBox” linked to a “select” form item on the Bootstrap 4 form.

The “Post” and “Cancel” buttons are “TWebButton” components linked to Bootstrap 4 styled buttons with “OnClick” events to handle the Posting or Cancelling of the information.

The initial templates I used are at the website “Start Bootstrap”. They are an “MIT” license. Here’s the link:

Start Bootstrap

I downloaded these templates and placed on my external drive and then copied the necessary html, JavaScript and CSS into my run time folders. All these files are on the run time zip I’ll be providing.

Please refer to a description of the folder usage later in this tutorial for more information.

The database.

MySQL is used to store the table “todolist”.

Here is the definition of the “todolist” table:

		DROP DATABASE IF EXISTS todos;
		CREATE DATABASE todos;
		USE todos;
		DROP TABLE IF EXISTS todolist;
		CREATE TABLE todos.todolist (
		  Id INT(11) NOT NULL AUTO_INCREMENT,
		  Description VARCHAR(255) DEFAULT NULL,
		  Complete INT(1) DEFAULT NULL,
		  Priority INT(11) DEFAULT NULL,
		  DateDue DATE DEFAULT NULL,
		  PRIMARY KEY (Id)
		)
		ENGINE = INNODB
		AUTO_INCREMENT = 1
		CHARACTER SET utf8
		COLLATE utf8_general_ci
		ROW_FORMAT = DYNAMIC;
	

Nearly all tables I use in my apps have a field named “Id”, which is the primary key and is “auto increment”. Using this method it’s very easy to link tables on queries.

The field “Complete” is treated as a Boolean with zero indicating it’s still open and one indicating complete.

If there was going to be a large amount of data, I would also be defining alternate keys. But for the tutorial, I’m keeping it as simple as possible.

Delphi source files.

I created a folder named “Tutorials” and within it a folder named “ToDo1”. In the “TutorialsToDo1” folder are the following source files:

The next sections will briefly describe the files. For further information please refer to the comments in the source.

Index.html

This file contains skeleton html. This file was modified for the Bootstrap 4, jQuery components. Here are the key parts:

Main.pas / Main.dfm / Main.html

This the main screen which contains the menu sidebar, plus a panel that acts as a parent to sub-forms. The “ElementId” properties on “Main.frm” are linked to html “id’s” in the “Main.html”.

Here’s the form:

Here’s the form after being merged with the html:

Pretty neat. Here’s what is in Main.html for “Refresh To Do’s”:

Note the span above with the id “main.menu.todo.list”. Here is the Delphi side:

When the Main form is opened, TMS Web Code merges these items to render the page.

View.ToDo.List.pas / View.ToDo.List.dfm / View.ToDo.List.html

This form is where the To Do items are listed in a Bootstrap 4 table. The form is embedded as a sub-form on the panel container in “Main.frm”. Please to the screen shots above which shows the embedded form in the Main container panel.

Here is Main.html and where the embedded form is placed:

Here is View.ToDo.List.html:

The above html is merged with “main.container” to show the list of To Do’s.

Within this form is a “TWebTableControl” named DataGrid. When this form is created, it calls the PHP script todolist.php.

Here is the call that is made to the php script:

When the “LoadFromJSON” is made the URL looks like this:

todolist.php builds a JSON response using the criteria passed as shown above. Then encodes the JSON response in PHP as:

Here is a sample of the JSON returned:

“Id” shown above becomes Column zero in DataGrid, “DateDue” becomes Column 1 in DataGrid, etc. Here’s what it looks like once loaded:

You’ll notice that “Id” is not really showing. Instead is a Bootstrap Button. This is accomplished with the “OnGetCellChildren” event that is part of “TWebTableControl”. Here's the code:

If the column passed is Column zero, “AValue” contains the “Id” of the To Do item being loaded. A "TWebButton" is created. The contents in Column zero are replaced with a Bootstrap Button and “Id” is placed in “TWebButton.Tag”. At this point when you click on one of the Edit buttons, you’ll be able to retrieve the To Do item’s Id and in turn create the form “EditToDoItem” and pass the Id to the form. The editing process is described in the next section. Here’s the code that does this:

The “Sender: TObject” above is the Edit button. The “Tag” contains the “Id” of the To Do item. When “EditForm” is created it uses “@AfterCreate” that is called once the form is created. And in “AfterCreate” a call is made to load the To Do item’s information. At this point the Edit form is shown via “EditForm.ShowModal”.

Edit.ToDo.Item.pas / Edit.ToDo.Item.dfm / Edit.ToDo.Item.html

This is a popup modal form where you can add new items and edit existing items. This form is created when you click the “Edit” button to edit existing To Do’s or when you click “New To Do” on the main form. Here’s the form:

Here’s the form after being merged with the html:

When the form is created to edit a To Do, “gettodoitem.php” is called passing the Id of the To Do item this way:

The “ToDoRequest” above is a “TWebHttpRequest” component. Here is a sample URL passed to “gettodoitem.php”:

Here is the JSON response:

Part of a “TWebHttpRequest” component is the event “OnResponse”. One of the variables passed to this event is the Response which is the JSON response shown above. Here I use TMS’ JSON to decode and place the values into the form:

Once the information is entered, you will press “Post”. This button is labeled “PostBtn” and has an event associated with it, which takes the information off the form and builds arguments which are then passed to “posttodoitem.php” which updates the To Do list data. The call is made here:

What I used.

Delphi and TMS Web Core.

I’m using Delphi Tokyo (10.2.2) with TMS Web Core. I assume you have both Delphi and TMS Web Core already installed.

MySQL

I separately downloaded and installed the MySQL community edition. Please note, Apache as described below, now comes with “MariaDB” instead of MySQL, thus the separate download. Here is the link to the MySQL community edition:

MySQL download

Apache and PHP.

I’m using MySQL and Apache (with PHP) to handle the web server and database. As noted I installed MySQL separately. Here is a link to “XAMPP” along with instructions for installation:

Apache download

dbForge Studio Express for MySQL from Devart.

Apache “XAMPP” comes with “PhpMyAdmin”. This is just my opinion, but I think it’s clunky. I’ve been using DevArt’s “UniDac” components in my Delphi apps for quite some time and like the way I can easily switch between MySQL and SQL Server. As an alternative to “PhpMyAdmin” I use their Studio Express to maintain the MySQL databases. Here is the link:

dbForge Studio download

Note, select the download for the Express version.

Folders used.

Source folders.

The Delphi source for this project is on my “C:” drive and is located here:


Source download

Note "todolist-create.sql" is also on this download. Use it to create your "todo" database.

Run time folders.

The Apache run times are installed on my “C:” drive at the standard XMAPP location:

Runtime download

Conclusion.

I hope this has been useful. If there are suggestions, bugs found, etc, you can reach me at larry@lwadsworth.com Based on reception, I might create a version two of the tutorial, which would have Categories for the To Do’s. This way you would be able have you items categorized, such as “Personal”, “Client” To Do’s.

Thanks again,

Larry Wadsworth



TMS FNC UI Pack v2.3 is here and brings 5 new UI controls

$
0
0

We continue on our mission to make TMS FNC UI controls not only the UI control set that you can put to work everywhere as Delphi/Pascal developer but also the most comprehensive UI control set for your toolkit.
For those not yet familiar with 'FNC' controls, these are what we call Framework Neutral Components. This means that these UI controls can be simultaneously used with different frameworks, are fully cross platform, can be used from Delphi, C++Builder and Lazarus and most spectacularly can be used to create web applications with TMS WEB Core. Read more about FNC for the web here.

TMS FNC Controls can be simultaneously used on these frameworks:


TMS FNC Controls can be simultaneously used on these operating systems/browsers:


TMS FNC Controls can be simultaneously used on these IDE's:


What's new in TMS FNC UI Pack v2.3:

TMS FNC Object Inspector

This is a versatile Object Inspector control. The control fully utilizes RTTI to provide a properties view of all properties of an associated component. Property filtering is possible to show only a select number of properties of a control. Moreover, when connected to a dataset, it will allow immediate viewing and editing of all fields in the associated dataset.



  • Automatic retrieval of published properties of an object
  • Various inplace editors such as a combobox for enum values, or checkgroup dropdown picker for set properties.
  • Events for customization, filtering of properties and property values
  • Can handle class properties, collection properties, set properties ...
  • Datasource support for direct data editing

TTMSFNCTaskDialog

Supercharge your message boxes with the TTMSFNCTaskDialog that is modeled after the task dialog that was introduced in newer Windows operating system versions. The task dialog message can contain HTML formatted text, optional text, radio group based options and much more...



  • HTML formatted texts for content, expandable text and footer
  • Optional radio buttons, progress bar, verify checkbox, input field, and custom input
  • Custom buttons with the option to turn them into command links
  • Auto close after timeout

TTMSFNCStatusBar

  • Various panel styles including HTML formatted text, images, progress bar and more
  • Optional auto size, button and hint per panel
  • Multiple progress bar levelst

TTMSFNCSignatureCapture

Allow the end user to draw a signature on touch screens and the component can capture this signature either as image file or as scaleable vector data.



  • Save signature to a file, memory stream or an image
  • Load signature from a file or memory stream
  • Customizable pen, clear icon and text

TTMSFNCColorWheel

End user selection of the full RGB color range is possible with the new TTMSFNCColorWheel.



  • Separate R, G, B and HEX values
  • Used in TTMSFNCColorPicker/TTMSFNCColorSelector as a mode

All users with an active registration for TMS FNC UI Pack can now obtain the new update free and get started to build fantastic applications for Windows, Web, mobile, Linux or macOS.
A fully functional trial version of TMS FNC UI Pack is available and even in combination with a TMS WEB Core trial, it can be used to explore the fascinating new & never seen before capabilities to use these UI controls also in web applications.
Or you can even explore the components directly via your browser by checking the TMS WEB Core demos that have several FNC control demos.

We hope you're as passionate about FNC UI controls as our team is and we're eager to learn what more UI controls you would like to see coming in future updates or what features or improvements you would like to see added to the existing controls! Be in touch, talk with our engineers and let's keep the interesting technical conversations going!

FREE TMS WEB Core event @London Oct 23, 2018

$
0
0


Thanks to Jason Chapman and the UK DevGroup of enthusiast Delphi developers, we have been able to cooperate and organise a TMS WEB Core event in London on October 23, 2018!

Bruno Fierens, CTO of tmssoftware.com will personally come to present TMS WEB Core, give live demonstrations, explain the architecture, show a glimpse of future developments and answer all your questions and listen to your suggestions and feedback.

The event is FREE and we welcome UK Dev Group members, existing TMS software customers and future TMS software customers interested in doing modern web application development in their beloved Object Pascal language and from the beloved Delphi IDE.

The TMS WEB Core event

Sessions are presented by
  • Bruno Fierens, CTO of tmssoftware.com
  • Jason Chapman

Location of the event:

The Prince Albert, 163 Royal College Street, London, NW1 0SG


The agenda of the day:

Time Description Speaker
12:00 Introduction UK devgroup + event Jason Chapman
12:15 TMS Company organisation & product line overview Bruno Fierens
12:30 Break/Lunch  
13:00 TMS WEB Core architecture in-depth Bruno Fierens
13:45 TMS WEB Core architecture hands-on / live demos Bruno Fierens
14:30 Break  
15:00 Connecting from TMS WEB Core to the back-end Wagner Landgraf (online) / Bruno Fierens
16:00 Hands-on experience with TMS WEB Core Jason Chapman
16:30 Q&A Bruno Fierens / Jason Chapman
17:00 End of TMS WEB Core event  


Registrations

The number of places is strictly limited to 30, so be fast to sign-up as we cannot go over the limit of the venue.
To register, please use the following online form

REGISTRATION FORM


We look forward to see you there.
Don't hesitate to contact us if you have any questions regarding the TMS WEB Core event in London or TMS WEB Core in general.

Native SQL Server access and more! TMS Aurelius 4.0 has been released!

$
0
0


Photo by Makarios Tang on Unsplash

TMS Aurelius 4.0 has just been released! It's a major update with exciting new features:

TAureliusConnection component
First, a new TAureliusConnection component is now available. Even though creating a database connection in TMS Aurelius has always been as easy as writing one line of code, with TAureliusConnection you can now do it at design-time. Just drop a TAureliusConnection component on the form and double-click it to configure (or set properties in object inspector, of course):



As expected, you can adapt any supported database-access component (like TFDConnection from FireDAC), set SQL dialect, and you are done.

This makes it even easier to configure a connection, test it in advance at design-time, and provide further design-time support for both Aurelius and XData. Expect lots of new components for both frameworks with great design-time support!

But TAureliusConnection component already brings great stuff for this 4.0 version:

Generate entities from existing database, from the IDE
It is now possible to generate TMS Aurelius entity classes from an existing database directly from the IDE. Creating classes from database has always been possible by using the great TMS Data Modeler tool. It is a database modeling tool which can import existing database structure to the model, and then generate Delphi source code with TMS Aurelius classes. It's very powerful, with a scripting system to customize the source code output, ability to separate classes by units, among other things. But now you don't need to use a separate tool, and not even leave Delphi IDE, you can quickly generate entity classes using TAureliusConnection component. Simply configure the database connection on it, then right-click the component and choose "Generate entities from database..."



This will connect to the database, import the existing database structure, and open the export dialog with several options to customize the output source code. You can then select tables to export, choose naming policy for classes and properties, among other options. You can even preview the final source code in the "Preview" tab, before confirming.



When you click "Ok" button, a new unit with the declared entities will be created in the same project of TAureliusConnection component. You can start using your Aurelius classes in your project without even saving it!

But, for me personally, the greatest feature of this release is direct Microsoft SQL Server access.

Direct Microsoft SQL Server database access
TMS Aurelius (and TAureliusConnection) now has the concept of "adapter mode" and "driver mode". The former is the one you are used to: use an existing db component library and Aurelius will adapt and abstract it. But now you can also use "driver mode" which is a direct connection to the database without needing such components! Yes: to access Microsoft SQL Server with Aurelius, you don't need FireDAC, dbExpress or ADO anymore!

Here is how the TAureliusConnection configuration dialog looks for driver mode:



If you prefer not to use the TAureliusConnection and just create the IDBConnection interface yourself like you are used to, just use the new TMSSQLConnection class, which implements IDBConnection, and pass the parameters to it:
Conn := TMSSQLConnection.Create('Server=.SQLEXPRESS;Database=Northwnd;TrustedConnection=True');
That's the greatest feature of this release in my opinion. And stay tuned to support for more databases in upcoming releases!

Finally, the short video below will show you the new features in action. You can try TMS Aurelius and all the other TMS Business products right now! Download the trial version, watch tutorial videos and many more from the TMS Business main page.


Visiting the TMS lab day 1: TMS WEB Core support for Google charts

$
0
0



Two weeks of TMS lab visits

From today till October 12, we'll have a daily visit in the TMS lab to see what the team is working on, experimenting with, researching... for future TMS WEB Core releases. For some of this work, there are already firm plans for adding this to upcoming releases, for other more exploratory research work, this is not set in stone yet. But we wanted to take you on this visit to the TMS lab to let you see future capabilities and features and get in touch to listen what you look most forward to, to hear where your needs are, so we can align our efforts best to your needs.

Lab visit 1: Google Charts integration

On this first day, we are having a look at where we are with support for Google Charts. Google Charts is an extensive web charts library consisting of a huge range of chart types for integration into your web applications.



We have been researching how we could best enable the integration of Google Charts in TMS WEB Core applications from the perspective of a Delphi developer used to OO component based RAD development. From this, we deducted, we'd need to create a Google Charts component that can be dropped on the form and that gives you the desired chart by just setting a few properties and call methods to add the actual chart data, all in 100% Pascal code.

Setting up a series in a Google Charts becomes with the help of the TWebGoogleChart component as easy & intuitive for Delphi developers as:

uses
  WEBLib.GoogleChart;

var
  it: TGoogleChartSerieItem;
begin
  WebGoogleChart1.BeginUpdate;

  WebGoogleChart1.Title := 'Browser Market Share';

  it := WebGoogleChart1.Series.Add;

  it.ChartType := gctPie;
  it.Title := 'September 2018';

  it.Values.AddPiePoint(60.3, 'Chrome');
  it.Values.AddPiePoint(13.1, 'Safari');
  // extract this pie out of the pie chart 
  it.Values.AddPiePoint(7.2, 'Firefox', 0.4);
  it.Values.AddPiePoint(6.7, 'IE/Edge');
  it.Values.AddPiePoint(3.1, 'Opera');
  it.Values.AddPiePoint(9.6, 'Other');
  WebGoogleChart1.EndUpdate;
end;


Adding other chart types such as line, bar, OHLC, area, ... is very similar. Google Charts features such as chart animation, curved lines, legend, ... are equally easily enabled.

For interaction with the chart, a component event such as OnSelect() is exposed for the TWebGoogleChart component. Here we can display the value of the clicked chart part via:

procedure TForm1.WebGoogleChart1Select(Sender: TObject;
  Event: TGoogleChartSelectEventArgs);
var
  chart: TWebGoogleChart;
begin
  chart := (Sender as TWebGoogleChart);

  lbSelect.Caption := chart.Series[Event.SerieIndex].Title + ' '
      + chart.Series[Event.SerieIndex].Values[Event.PointIndex].DataPoint.Title + ': '
      + FloatToStr(chart.Series[Event.SerieIndex].Values[Event.PointIndex].DataPoint.X) + '%';
end;


Thanks to the power of TMS WEB Core, we can easily embed a sample Google Charts based TMS WEB Core application here in this blog:


or you can visit this demo full page on this page

Today we have in the lab most Google Charts types supported and we're working on the last finishing touches to make the component as intuitive as possible for a Delphi developer while at the same time allowing to take advantage of the vast range of features offered in Google Charts. The end result should empower Delphi developers to create web applications with on-the-fly flexible & feature-rich chart reporting.

Lab visit feedback & win!

Our team loves to hear what you think about what is brewing in the lab, how you plan to use the upcoming features, what priority our team should give to it and if you have possibly interesting and/or creative ideas to make this even more powerful for Delphi developers. To reward your interaction & feedback, we'll pick 3 blog comments on October 15 that we liked the most and first prize is a free TMS WEB Core license, the 2nd and 3rd prize is a 50% discount coupon on TMS WEB Core. Let yourself hear to increase your chances!

Get started

Meanwhile, you can go ahead and explore the new & exciting territories of web client development that become available for Delphi developers with TMS WEB Core! You can download the trial version that is generally available, go ahead with the standalone version you purchased or with TMS WEB Core and additional tools that are all included in TMS ALL-ACCESS. Note also that in October, you can still take advantage of purchasing TMS WEB Core at launch price from 295EUR for a single developer license. From Nov 1, regular pricing will be active on TMS WEB Core (395EUR for a single developer license).

Visiting the TMS lab day 2: Adding artificial intelligence to TMS WEB Core apps

$
0
0



There is no doubt about it that artificial intelligence is a hot topic. Wondering how this cool technology could be used by Delphi developers creating web applications, we researched how we could leverage existing technology. In the area of artificial intelligence, the Tensorflow.js library is one of the most popular and powerful libraries for use in web clients. So, we embarked on investigating how we could enable using TensorFlow.js easily from our beloved Pascal language in a TMS WEB Core web client application.

First sample: sequential prediction

This first small sample is based on creating first a model with sample data ourselves and then let the machine predict a value based on the model. The model is simply a series of points (X,Y values). After we feed the point data into the model, it is up to the model to predict the next point on a line.

In Pascal, this translates to using a class TTMSTFPredictSequentialNext that internally uses the Tensorflow model tf.keras.models.Sequential. This is made available as a TComponent with following public interface:

  TTMSTFPredictSequentialNext = class(TComponent)
  public 
    procedure createModelWithSample(xs, ys: TJSArray);
    function predictYforX(aValue: JSValue): JSValue;
  end;

To feed the model with sample data, a Javascript array of X values and Y values is created, initialized with the dots clicked on the user-interface in a TWebPaintBox. Drawing the dot on the TWebPaintBox is just like a Delphi developer would do this for years with the TCanvas in a TPaintbox:
procedure TForm2.DrawDot(X, Y: Integer);
begin
  WebPaintBox1.Canvas.Brush.Style := bsSolid;
  WebPaintBox1.Canvas.Brush.Color := clRed;
  WebPaintBox1.Canvas.Pen.Style := psSolid;
  WebPaintBox1.Canvas.Pen.Width := 2;
  WebPaintBox1.Canvas.Pen.color := clRed;
  WebPaintBox1.Canvas.Ellipse(X-4, Y-4, X+4, Y+4);
end;
Note that the Sequential model expects normalized data. This means that we need to normalize the pixel coordinates into the 0..1 space, meaning the minimum X value translates to 0, the maximum X value to 1.

Initialize the model
var
  xs,ys: TJSArray;
begin
  tfModel := TTMSTFPredictSequentialNext.create;
  xs := TJSArray.New;
  ys := TJSArray.New;

  FillData(xs, ys);
  NormalizeData(xs, ys);
  tfModel.createModelWithSample(xs, ys);
end;
Getting the predicted value

Note that here we of course need to first normalize the X value, i.e. convert it to the range 0..1 where 0 is the minimum X value and 1 is the maximum X value. The predicted Y value is normalized as well, so here we need to denormalize it, i.e. convert the value between 0..1 back to Y pixel coordinates based on the minimum and maximum Y value.
var
  predictY: single;
  X,Y: integer;
begin
  X := LastPointX + 50;
  predictY := tfModel.predictYforX(normalize(X)));
  y := denormalize(predictY);
end;


This is a sample prediction:



or you can discover how this works by directly using the online TMS WEB Core demo.

Second sample: digit identification

In the second sample, we show how existing model data can be loaded in the TensorFlow model and can be used to identify a drawn number. The model data is taken from a Tensorflow example using a MNIST database. It is loaded into the model with:
  tfModel := TTMSTFDigitIdentifier.Create;
When the model is initialized, we can load the sample data:

  tfModel.loadModelFromUrl('ModelJs/model.json');
We then allow to draw a number with the mouse on a TWebPaintBox:
procedure TForm2.WebPaintBox1MouseDown(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
begin
  doPaint := true;
  remX := X;
  remY := Y;
end;

procedure TForm2.WebPaintBox1MouseMove(Sender: TObject; Shift: TShiftState; X,
  Y: Integer);
begin
  if doPaint then
  begin
    WebPaintBox1.Canvas.Pen.Width := 30;
    WebPaintBox1.Canvas.Pen.Color := colorStroke;
    WebPaintBox1.Canvas.MoveTo(X, Y);
    WebPaintBox1.Canvas.LineTo(X + 30, Y);
    remX := X;
    remY := Y;
  end;
end;

procedure TForm2.WebPaintBox1MouseUp(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
begin
  doPaint := false;
end;


The next step is to get the image data from the TWebPaintBox, normalize its size, i.e. reduce it to a 28x28 image and call the method model.IdentifyDigit() to let the identification happen. This identifyDigit() method expects the image data as type JSImageData, defined in Pascal as TJSImageData. When it is recognized, IdentifyDigit returns a number from 0 to 9, when not, it returns -1. The returned value is set as caption of a panel.

The code used is:
var
  ImgData: TJSImageData;
  v: JSValue;
begin
  ImgData := normalizeddigit.Canvas.Context.getImageData(0, 0, 28, 28);
  v := tfModel.identifyDigit(x);
  if v = -1 then
    pnlDigit.Caption := '?'
  else
    pnlDigit.Caption := Format('%d', [v]);
end;
You can experiment with the model and code yourself by opening the TMS WEB Core web client app we created for this digit identifying app using the TensorFlow library.



Summary

The area of artificial intelligence is big. Different problems require different models and different approaches. We just presented two small samples here, but it is clear that much more can be done, not only with TensorFlow but also with other libraries. In our lab, we did the experimental work to use this in a convenient way from our beloved Pascal language for these two samples, but clearly, there is still quite some work ahead to expose all capabilities as convenient to use Pascal classes. We're curious and very interested to hear what AI problems you might want to solve and thus, with what priority and on what we should focus first.

Lab visit feedback & win!

Our team loves to hear what you think about what is brewing in the lab, how you plan to use the upcoming features, what priority our team should give to it and if you have possibly interesting and/or creative ideas to make this even more powerful for Delphi developers. To reward your interaction & feedback, we'll pick 3 blog comments on October 15 that we liked the most and first prize is a free TMS WEB Core license, the 2nd and 3rd prize is a 50% discount coupon on TMS WEB Core. Let yourself hear to increase your chances!

Meanwhile, you can go ahead and explore the new & exciting territories of web client development that become available for Delphi developers with TMS WEB Core! You can download the trial version that is generally available, go ahead with the standalone version you purchased or with TMS WEB Core and additional tools that are all included in TMS ALL-ACCESS. Note also that in October, you can still take advantage of purchasing TMS WEB Core at launch price from 295EUR for a single developer license. From Nov 1, regular pricing will be active on TMS WEB Core (395EUR for a single developer license).

Visiting the TMS lab day 3: ExtJS & TMS WEB Core

$
0
0



The fact that IDERA acquired the company Sencha behind the ExtJS framework and has now both Embarcadero and Sencha under its umbrella generated also some interest among Delphi developers for this framework. From time to time we get a request if the ExtJS framework can be used from TMS WEB Core. This triggered our team to investigate if this was technically feasible. And after the needed research, we are happy to inform that we managed to integrate a couple of ExtJS controls as proof of concept in TMS WEB Core. Technically this means that we can:

  1. Create the ExtJS control from a Pascal class
  2. Manage the ExtJS control settings via the Pascal class properties
  3. Map class methods on ExtJS control functions
  4. Catch the events triggered by the ExtJS control and route these to the Pascal class events

If this can be technically achieved for one ExtJS control, it typically means that this can be achieved for the full set of ExtJS controls. Further things that are nice to have but need deeper research are: control the ExtJS layouting setup from the Delphi form designer and use the TDataSource & TDataSet based data-binding mechanism also for ExtJS controls like the ExtJS grid.

With what could we better demonstrate this than with the Fishfact dataset, that wonderful dataset we all learned about and loved when it was demonstrated the first time by David Intersimone in 1995 with Borland's Delphi 1.

Here are some nostalgic pictures of these great days:



Back to 2018 though, where we have an ExtJS button, ExtJS label and an ExtJS grid on the Delphi form designer in the Delphi 10.2.3 Tokyo IDE:



When dropped on the form, from the ExtJS button OnClick event handler, the Fishfact dataset in JSON format is loaded in the ExtJS grid with the code:

WebEXTJsGrid1.ConnectToJSONUrl('http://www.tmssoftware.biz/tmsweb/fishfacti2.json');
This dataset contains the image URLs to the Fishfact fish images and these are rendered automatically in the ExtJS grid. At runtime, this becomes in the browser

Or of course, you can directly play with this prototype application here live from our website

Summary

ExtJS is a rich JavaScrpt framework with a large set of UI controls. Similar to the ability to use jQuery controls from TMS WEB Core, with some effort, it is also possible to integrate the ExtJS framework with TMS WEB Core. To make it really user-friendly, it is quite some work though to create well-designed Pascal wrapper classes to make the framework and its controls convenient to use from the 100% Pascal based TMS WEB Core framework. We love to hear your voice and your thoughts how much priority we should give to bring integration of the full ExtJS framework in TMS WEB Core. You, the user of TMS WEB Core are behind the steering wheel of the TMS WEB Core Mille Miglia route from Brescia to Rome and back to Brescia.

You can determine with your vote in what city along our route, you wish to see full ExtJS support.

Lab visit feedback & win!

Our team loves to hear what you think about what is brewing in the lab, how you plan to use the upcoming features, what priority our team should give to it and if you have possibly interesting and/or creative ideas to make this even more powerful for Delphi developers. To reward your interaction & feedback, we'll pick 3 blog comments on October 15 that we liked the most and first prize is a free TMS WEB Core license, the 2nd and 3rd prize is a 50% discount coupon on TMS WEB Core. Let yourself hear to increase your chances!

Get started

Meanwhile, you can go ahead and explore the new & exciting territories of web client development that become available for Delphi developers with TMS WEB Core! You can download the trial version that is generally available, go ahead with the standalone version you purchased or with TMS WEB Core and additional tools that are all included in TMS ALL-ACCESS. Or you can come to see TMS WEB Core and discover and discuss it face to face with Bruno Fierens of tmssoftware.com showing it in London on October 23, 2018. Note also that in October, you can still take advantage of purchasing TMS WEB Core at launch price from 295EUR for a single developer license. From Nov 1, regular pricing will be active on TMS WEB Core (395EUR for a single developer license).


Visiting the TMS lab day 4: TMS WEB Core from Lazarus

$
0
0



It is nice there is also free open-source IDE for Pascal developers, but what is really nice is that this free IDE runs on multiple operating systems. It can be natively run from Windows, macOS and Linux. And yes, Raspbian being in the Linux family, Lazarus also runs on Raspbian on a Raspberry Pi!

So, of course, our team was challenged to research if we could also have TMS WEB Core running on Lazarus and with this, eventually allow Pascal developers to build web client applications from their beloved operating system, whatever that is.

Our team already has extensive experience with building components for Lazarus, as our FNC range of components already all support Lazarus on all target operating systems, Windows, macOS, Linux. But building the kind of IDE integration that something like TMS WEB Core needs is a higher level of complexity.

The good news is that after a lot of investigation and effort, we have a first prototype of TMS WEB Core running in Lazarus (on Windows). This means you can:

  • Create a new TMS WEB Core application type from Lazarus
  • Add TMS WEB Core UI controls on the form
  • Use the Lazarus code editor to write the application code
  • Press F9 and the TMS WEB Core application gets compiled & launched in the browser
  • Debugging is done from the browser (when desired also directly at Pascal code level) as it is for Delphi

So, obviously in the Lazarus, this means we have:

  1. The new TMS WEB Core project type that can be chosen:


  2. The default TMS WEB Core project now looks like this in the Project Inspector:


  3. Under Tools, Options, there is a new tab for setting the TMS WEB Core configuration:


  4. On the tool palette, the large number of TMS WEB Core controls show up:


  5. And of course, the TMS FNC UI controls are also available and ready to be used for TMS WEB Core applications:


Putting a first Lazarus based TMS WEB Core application together

Having this, writing TMS WEB Core applications from Lazarus is very similar to writing these from the Delphi IDE. Here we have the Lazarus form designer, added a button and a grid to the form:



And then we wrote following code to load JSON data (the Fishfact dataset, what else?) into the grid and an event handler for the grid to show the image URLs in the Fishfact dataset as images instead of URL text:

procedure TForm1.WebButton2Click(Sender: TObject);
begin
  WebStringGrid1.DefaultRowheight := 64;
  WebStringGrid1.RowHeights[0] := 24;
  WebStringGrid1.FixedCols := 0;
  WebStringGrid1.ColCount := 8;
  WebStringGrid1.ColWidths[6] := 128;
  WebStringGrid1.ColWidths[7] := 128;
  WebStringGrid1.Options := WebStringGrid1.Options + [goRowSelect];
  WebStringGrid1.loadfromjson('http://www.tmssoftware.biz/tmsweb/fishfacti2.json','ROW');
end;

procedure TForm1.WebStringGrid1GetCellChildren(Sender: TObject; ACol,
  ARow: integer; AField: TField; AValue: string; AElement: TJSHTMLElement);
var
 img: TJSHTMLImageElement;
begin
  if (ACol = WebStringGrid1.ColCount - 1) and (ARow > 0) then
  begin
    img := TJSHTMLImageElement(document.createElement('img'));
    img.src := AValue;
    img.style.setProperty('height','64px');
    AElement.innerHTML := '';
    AElement.appendChild(img);
  end;
end;

The result in the browser is:



Of course, we could do something very similar with a Bootstrap style controlled table control. The result looks like:



Conclusion

We're happy to have a proof of concept that shows technically it is perfectly possible to create a TMS WEB Core application from the Lazarus IDE (on Windows). It remains a proof of concept and to have a finished product, a lot more work must happen. After all, we spend almost a year on perfecting the Delphi IDE integration, so it's not realistic to expect we can finish this in a couple of weeks. What is on the todo list:

  1. Port the command-line tools used by TMS WEB Core to macOS & Linux
  2. Do more work on the integration of things like automatically adding JavaScript library references like we have in Delphi
  3. Implement the property editors for the Object Inspector for properties for selecting HTML elements & CSS class names
  4. Do a lot more polishing and fine-tuning
  5. Create a distribution with install steps

We are really eager to learn how much users are interested in TMS WEB Core for Lazarus as this will determine the priorities of our team in the coming months. Let your voice be heard!

Lab visit feedback & win!

Our team loves to hear what you think about what is brewing in the lab, how you plan to use the upcoming features, what priority our team should give to it and if you have possibly interesting and/or creative ideas to make this even more powerful for Delphi developers. To reward your interaction & feedback, we'll pick 3 blog comments on October 15 that we liked the most and first prize is a free TMS WEB Core license, the 2nd and 3rd prize is a 50% discount coupon on TMS WEB Core. Let yourself hear to increase your chances!

Meanwhile, you can go ahead and explore the new & exciting territories of web client development that become available for Delphi developers with TMS WEB Core! You can download the trial version that is generally available, go ahead with the standalone version you purchased or with TMS WEB Core and additional tools that are all included in TMS ALL-ACCESS. Note also that in October, you can still take advantage of purchasing TMS WEB Core at launch price from 295EUR for a single developer license. From Nov 1, regular pricing will be active on TMS WEB Core (395EUR for a single developer license).

Visiting the TMS lab: Week 1 in a nutshell

$
0
0



Two weeks of TMS lab visits

At the beginning of this week we announced that we will publish a series of blogs for the coming 2 weeks. Well the first week is over!

Each day we visited the TMS lab to see what the team is working on and what other plans we have for the future TMS WEB Core releases. Not only this, we also wanted to listen to YOU, as a TMS customer!
Are there things that you want our team to expand, new ideas you want to share or maybe you've just seen nice features and you want to congratulate us ....everything is appreciated!



The following topics were covered in week 1

    Lab visit 1: Google Charts integration

    To integrate Google Charts in TMS WEB Core applications, we'd need to create a Google Charts component that can be dropped on the form and that gives you the desired chart by just setting a few properties and call methods to add the actual chart data, all in 100% Pascal code.

  • Lab visit 2: Adding artificial intelligence to TMS WEB Core apps



    The Tensorflow.js library is one of the most powerful libraries for use in web clients.
    In our blog we presented two small samples, sequential prediction and digit identification, but it is clear that much more can be done, not only with TensorFlow but also with other libraries.

  • Lab visit 3: ExtJS & TMS WEB Core


    Our team was very curious to know if the ExtJS framework can be used from TMS WEB Core. After some research we can now say that TMS WEB Core can do the following:

    1. Create the ExtJS control from a Pascal class
    2. Manage the ExtJS control settings via the Pascal class properties
    3. Map class methods on ExtJS control functions
    4. Catch the events triggered by the ExtJS control and route these to the Pascal class events

  • Lab visit 4: TMS WEB Core from Lazarus


    Here we also have the long awaited (and requested) first prototype of TMS WEB Core running in Lazarus!
    This means we can now:

    1. Create a new TMS WEB Core application type from Lazarus
    2. Add TMS WEB Core UI controls on the form
    3. Use the Lazarus code editor to write the application code
    4. Press F9 and the TMS WEB Core application gets compiled & launched in the browser
    5. Debugging is done from the browser (when desired also directly at Pascal code level) as it is for Delphi

    Lab visit, feedback & win!

    Let's make WEB even more fun and exciting. Tell us about your favourite subject/blog and win a prize!
    Now it's your turn! Give our team a new challange, give your opinion on the topics covered in the blogs and share with us your creative ideas.

    To reward your interaction & feedback, we'll pick 3 blog comments on October 15 that we liked the most and first prize is a free TMS WEB Core license, the 2nd and 3rd prize is a 50% discount coupon on TMS WEB Core. Let yourself hear to increase your chances!

    Reminder

    Note: in October you can still take advantage of purchasing TMS WEB Core at launch price from 295EUR for a single developer license. From November 1, 2018 regular pricing will be active on TMS WEB Core (395EUR for a single developer license).

Visiting the TMS lab day 5: Using external classes in pas2js

$
0
0



For todays visit in the lab, we dive deep into the workings of the pas2js compiler. This technical article is therefore provided by Michael Van Canneyt, one of the two masterminds behind the pas2js compiler. Michael Van Canneyt has been involved in the Pascal language development community for over 20 years, wrote numerous articles, books, open-source Pascal projects, commercial Pascal based desktop and server applications and much more. In other words, a very highly respected Pascal language professional we have the honour to work with!

Using external classes in pas2js

Using Classes in Object Pascal goes without saying. JavaScript also has objects and classes - sort of. Meanwhile, the amount of JavaScript APIs and libraries dwarfs probably the amount of available libraries in any other language. So, the natural question is: how do we use all these native JavaScript objects and classes in Object Pascal as efficiently as possible?

One way would be to actually create classes in Object Pascal which mimic the classes in JavaScript, and use assembler blocks to access the fields and methods of the actual underlying object. This approach has the advantage that it allows you to reshape the native JavaScript object into something that is more pascal-friendly. Or, if you don’t like the API of a JavaScript object, this approach also allows you to create a better API. The disadvantage of this approach is that it requires a lot of work, code and is error prone.

Another approach is to let the compiler understand JavaScript classes: provide the compiler with an object pascal description of a JavaScript object, but without an implementation in pascal: an external class definition.

In essence, this is nothing more than an extension of the ‘external’ declaration that programmers have used for ages to access functions in a library. Nobody thinks twice when looking at the following external function declaration:

function CreateFile(lpFileName: LPCWSTR; dwDesiredAccess, 
wShareMode: DWORD; lpSecurityAttributes: PSecurityAttributes; dwCreationDisposition,
dwFlagsAndAttributes: DWORD; hTemplateFile: THandle): THandle; stdcall; external kernelbase name 'CreateFileW';  

Or, if you want, an extension of an ‘Interface’ for a COM or other object which you import using a type library:

IInterface = interface   ['{00000000-0000-0000-C000-000000000046}']   
function QueryInterface(const IID: TGUID; out Obj): HResult; stdcall;
function _AddRef: Integer; stdcall;
function _Release: Integer; stdcall;
end;

This is also an external definition: the compiler knows what methods to expect, and can generate code to call each of the methods. In Object pascal, you can add property definitions to an interface: this is actually a convenience feature for the pascal programmer, since COM by itself does not know properties. When reading or writing the property, the compiler just knows it must insert calls to the getter and setter methods of the interface.

So, extending this idea, it is only a natural extension to be able to say

TJSHTMLCollection = class external name 'HTMLCollection'  
private 
  FLength : NativeInt; external name 'length';  
public    
  function item(aIndex : Integer) : TJSNode;
  function namedItem(aName : string) : TJSNode;
  property Items[aIndex : Integer] : TJSNode read item; default;    
  property NamedItems[aName : String] : TJSNode read namedItem;
  property length : NativeInt Read FLength;  
end;
To let the compiler know that there exists a class called HTMLCollection in JavaScript, and that whenever we create an instance of TJSHTMLCollection, the compiler should actually generate the necessary code to create a HTMLCollection class.

A big advantage of using such an external class definition is that it is very efficient at runtime: the transpiled code emitted by the compiler will contain direct method calls for all methods of external classes, there will be no extra generated intermediate code or conversion code.
This means that writing

var
  a: TJSNode;  
begin
  a:=Coll[0];  
end;


Where Coll is of type TJSHTMLCollection presented above, will map directly on
{
    var a = null;
    a=Coll.item(0);
}


Which is about as efficient as it can get for transpiled code.

An external class definition is also easy to understand: the above does not really differ a lot from an interface definition. Any Object Pascal programmer will at a glance understand what API this class offers. The only new concept to grasp is the header:

TJSHTMLCollection = class external name 'HTMLCollection'


The external name ‘HTMLCollection’ is almost verbatim what one can find in a function definition when importing a function from an external library, only now applied to complete classes. One can also view it as an equivalent of the GUID identifier in an interface definition.

The example shows that array properties for external classes are supported, just as they are in interface declarations. It also shows how to declare a read-only field: JavaScript does not know properties as we know them in Object Pascal, but only knows fields. For JavaScript objects that are backed by some native API, these fields can be read-only. The ‘length’ field in the above JavaScript HTMLCollection object is an example. If we were to declare it as

TJSHTMLCollection = class external name 'HTMLCollection'
   length : NativeInt;
end;


The compiler would know there is a field length, but it would be read-write. Obviously, this is not good. Since we can declare read-only or write-only properties, their syntax is used to solve this problem:

TJSHTMLCollection = class external name 'HTMLCollection'
private
  FLength : NativeInt; external name 'length';
public
  property length : NativeInt read FLength;
end;


From this definition it is clear for the programmer that there is a read-only property length. At the same time compiler knows that when it needs to read the property, it can use the name ‘length’. Why this syntax and not introduce something else, for example:

TJSHTMLCollection = class external name 'HTMLCollection'
    length : NativeInt; ReadOnly;
end;


Besides the fact that we don’t want to pollute the language with too many keywords, the external syntax was needed anyway, for two reasons:
First, JavaScript allows field names to start with the $ character, so a syntax to be able to give a valid pascal name was needed. The ‘external name’ was again reused:

TSomeJavaScriptClass = class external name ‘SomeJSClass' 
  MetaField : NativeInt; external name ‘$metaField';
end;

This tells the compiler that there is a ‘MetaField’ field in pascal, but that the JavaScript name is $metaField. Secondly, some JavaScript identifiers are valid pascal keywords.

This can be solved using the & escape character:

TSomeJavascriptClass = class external name ‘SomeJSClass'
    &end : NativeInt;
end;

Or using the external name syntax:

TSomeJavascriptClass = class external name ‘SomeJSClass'
    _end : NativeInt; external name ‘end’
end;

The same 2 reasons for having the external syntax apply of course for methods as well.

There is a special use for the ‘external name’ construct, namely to allow using object properties. The following is valid javascript:

MyObj[SomeName]=123;
A JavaScript is also a named array of arbitrary JavaScript values. This is translated in the TJSObject class declaration as follows:

TJSObject = class external name 'Object'
private
  function GetProperties(Name: String): JSValue; external name '[]';
  procedure SetProperties(Name: String; const AValue: JSValue); external name '[]';
public
  property Properties[Name: String]: JSValue read GetProperties write SetProperties; default;
end;

The external name ‘[]’ incantation tells the compiler that this function or procedure is in fact an array property access. As a result the above statement syntax can be kept:
MyObj[SomeName] := 123;


The same construct can be found in the JavaScript Array object declaration of TJSArray, and several other object definitions.

The above highlights the possibilities of the external class syntax. This syntax is actually nothing new or invented specially for pas2js: the Free Pascal Java bytecode compiler uses the same syntax to import Java classes, and uses a similar syntax to import Objective C class definitions on Mac OS, thus giving the pascal programmer access to all the possibilities offered by the platform.

In order to access JavaScript APIs, it is necessary to create external object definitions. The pas2js RTL delivers such definitions: units JS and web consist almost entirely from external definitions. The same is true for library imports such as libjquery, webaudio and webbluetooth.

How to create such units ? Three possible approaches exist:

-Manually:
This is how the JS, Web and Libjquery units were made, based on official documentation, the object declarations were coded manually. Needless to say, this is a cumbersome and error-prone approach.

-If a WebIDL specification is available, the webidl2pas tool can be used
This is discussed below.

-Using the classtopas function
The classtopas function is a function in the class2pas unit. It comes in several forms:
function ClassToPas(Const aName : string; Obj: TJSObject; aAncestor : string = ''; recurse : Boolean = False): string;
function ClassToPas(Const aJSName,aPascalName : string; Obj: TJSObject; aAncestor : string = ''; recurse : Boolean = False): string;
procedure ClassToPas(Const aJSName,aPascalName,aAncestor : string; Obj: TJSObject; aDecl : TStrings; recurse : Boolean = False);

The meaning of these arguments is intuitively clear from their names.
How to use this function ?

Get a reference to an instance of the object you want to create a declaration for, and call the function or procedure.

The demos of the pas2js compiler show how to do this.

program democlasstopas;

uses Web,Classes, JS, class2pas, browserconsole;

procedure ShowRTLProps(aClassName,aJSClassName : String; O : TJSObject);  Var    S : TStrings;    I : Integer;    
begin
    S:=TStringList.Create;
    try
      ClassToPas(aClassName,aJSClassName,'',O,S);
      for I:=0 to S.Count-1 do
         Writeln(S[i]);
    finally
      S.Free;
    end;
end;

var
   o : TJSObject;    
begin
    // get the new JavaScript object:
asm
      $mod.o = new Ext.form.Panel;
end;
MaxConsoleLines:=5000;
ShowRTLProps('Ext.form.Panel','TExtJSForm',o);  end.


Combine this with the following HTML page:

  

<!DOCTYPE html>  
<html>   
<head>   
<meta charset="utf-8"/>   
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>   
<script type="application/javascript" src="democlasstopas.js"></script>    
</head>    
<body>   
<script type="application/javascript">    rtl.run();   
</script>   
</body>  
</html>


Will result in the following output when the page is opened in the browser:


The declaration is far from perfect: it still needs a lot of manual tweaking. The argument types of functions are unknown (if they are declared at all) the return types too. Objects do not have an actual type other than the TJSObject.

But it is a start, and it should be easy to create a program that allows you to enter a class name in an edit box, and which outputs a class declaration in a memo.

It should be clear that the ClassToPas function is limited. However, if you are lucky, a WebIDL file exists for the API you are trying to access. WebIDL is a standard of sorts to describe Javascript APIS: https://www.w3.org/TR/WebIDL-1/ Version 2 is in preparation on https://heycam.github.io/webidl/

If such an IDL exists you can use the webidl2pas tool. This is a commandline tool (it could easily be converted to a GUI tool) which takes as input a WebIDL file, and outputs a pascal file with external class definitions.

Basically, this means that the command webidl2pas -i webaudio.idl -o webaudio.pas

Will create a unit webaudio.pas from the input file webaudio.idl. The output can be tweaked somewhat, the command webidl2pas -h or webidl2pas --help will give an overview of all available options.

Using these tools, there is no excuse for not exploiting the many Javascript libraries out there in your next TMS Web Core project!

Thanks Michael Van Canneyt for this excellent article with many very interesting insights!

Visiting the TMS lab day 6: TMS WEB Core Progressive Web Apps

$
0
0


Another day, another visit this week in the TMS lab and today we're going to have a look at what progressive web application development can bring for us, Delphi developers and how we prepare TMS WEB Core in the lab to be ready to take advantage of this technology.

First of all, what exactly is a "progressive web application"?

Easiest is to borrow the information from Wikipedia on progressive web applications:

Progressive Web Apps (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native mobile applications. PWAs are an emerging technology that combine the open standards of the web offered by modern browsers to provide benefits of a rich mobile experience.

What does it mean in relationship to TMS WEB Core?

This means a couple of things for the application:

  • Adapts automatically to the device screen, i.e. looks good on mobile and desktop. Also called responsive design
  • Is aware of online versus offline state, i.e. continues to work in offline state
  • Can be installed on a mobile device, Chrome OS machines and most likely in the future also on desktop machines without going to a censored application store
  • Will look like a native application, i.e. will use the full screen on the mobile device, no navigation bar etc..
  • Has access to device hardware
  • Will need to be initially accessed via HTTPS

As such, we are working in the lab to make it as easy as possible to create PWAs directly from TMS WEB Core with minimal effort. As a proof of concept, we created with TMS WEB Core and some manual help (that will become automated in the future) a full 100% compliant progressive web application.

First a word about compliance testing. A great tool for web application developer is Google Lighthouse. With Lighthouse, you can directly submit your web application to several tests related to performance, accessibility, best practices, SEO and compatibility with progressive web app requirements. This proof of concept is a simple calculator. It is built using:

  • The TTMSFNCWidgetLCDLabel as display that is top aligned
  • The TWebGridPanel as automatic sizing grid that is client aligned
  • The TWebGridPanel is configured with 4 25% width columns and 5 20% height rows
  • The TWebButton controls on the TWebGridPanel are client aligned on the panel
Responsive design
This layout already takes care of properly adapting to mobile, tablet and desktop screens, so makes it responsive if you want to call it this way

Service worker
Next we need to make this application work offline. This is achieved through a service worker. A service worker is JavaScript code that instructs the browser how to deal with fetching the parts that make up the application. So, we manually created the serviceworker.js file that gets registered from the main HTML file. This service worker contains the code to instruct the browser to install all involved files in the cache.

Manifest file
To make the application installable on a mobile device, there needs to be a manifest.json file that holds details about the application, including the application icon that will appear on the mobile device to start the application from. So, we've created such manifest.json file here as well as icon files (PNG format) in several sizes with our company logo as application icon.

With all this in-place, it is time to start verifying we effectively have a progressive web application. With Google Lighthouse installed in the Chrome browser, this is as easy as navigating to our web application and starting Lighthouse to let it generate a report.
So, in this case, we have deployed the prototype application to:

https://www.tmssoftware.com/pwa/calculator.html

and when we let Lighthouse generate its report, we get the result:


All in all, a pretty impressive result overall (certainly when you compare to many mainstream websites) and 100% satisfying the progressive web application requirement. While the performance is mostly server related here, this is not something directly under control of the TMS WEB Core application, but our team is committed to make TMS WEB Core applications shine even more in the other areas.

Now that we have the confidence that we really have a progressive web application, we can do the next step and try it out on a mobile device, in this case an iPhone. While Android had support for PWAs for some time already, since iOS 11.3, Apple also added support too.

So, when we navigate to the application URL https://www.tmssoftware.com/pwa/calculator.html, we can now choose to add it to the desktop:



From the manifest, iOS found out the application name & icon and suggests to add it this way to the desktop:



And now comes the really nice thing, let's switch the iPhone to airplane mode (notice the airplane mode indicator in the top left corner of the screen), we can still start our TMS WEB Core application and use it:



Conclusion

Progressive web applications will play in many ways a very important role and will be a crucial technology to make web applications behave nicely when switching between online / offline situations, switching between desktop and mobile devices and as such offer a better user experience. Moreover, it offers a mechanism to deploy applications to end-users without passing via the Apple, Google or Microsoft gateways and paywalls. We're researching and implementing the needed support in the TMS WEB Core framework to make developing such progressive web applications as easy as it can be.

Thanks

A big thank you goes to Danny Wind , a long time Delphi guru, trainer, Embarcadero MVP, ... who brought up the initial ideas and experimental work to create progressive web applications from TMS WEB Core apps!

Lab visit feedback & win!

Our team loves to hear what you think about what is brewing in the lab, how you plan to use the upcoming features, what priority our team should give to it and if you have possibly interesting and/or creative ideas to make this even more powerful for Delphi developers. To reward your interaction & feedback, we'll pick 3 blog comments on October 15 that we liked the most and first prize is a free TMS WEB Core license, the 2nd and 3rd prize is a 50% discount coupon on TMS WEB Core. Let yourself hear to increase your chances!

Get started

Meanwhile, you can go ahead and explore the new & exciting territories of web client development that become available for Delphi developers with TMS WEB Core! You can download the trial version that is generally available, go ahead with the standalone version you purchased or with TMS WEB Core and additional tools that are all included in TMS ALL-ACCESS. Or you can come to see TMS WEB Core and discover and discuss it face to face with Bruno Fierens of tmssoftware.com showing it in London on October 23, 2018. Note also that in October, you can still take advantage of purchasing TMS WEB Core at launch price from 295EUR for a single developer license. From Nov 1, regular pricing will be active on TMS WEB Core (395EUR for a single developer license).

Visiting the TMS lab day 7: TMS WEB Core testing and exploring

$
0
0



With the ever growing number of TMS WEB Core UI controls we have and the ever growing complexity, testing web UI controls becomes a non-trivial task. Our team clearly has a need to allow an efficient way testing not only by the developer of the UI controls but also by other users. One of the chores for testing a UI control with numerous settings that affect the appearance and the behavior, is that typically an application needs to be developed that will surface all the combinations of settings. And then we are not yet talking about interactions between multiple UI controls. So, we found ourselves both writing a lot of test application code and also going a lot through the cycle of configuring a UI control, compile, run, test and repeat with other configurations.

Out of this laborious experience, the idea for creating a test environment was born. We wanted to have a runtime test environment for the TMS WEB Core components. Wanting the ability to test with every possible property setting of the control and realizing we had in our TMS FNC UI Pack component library an object inspector control, developing this test environment turned out to be faster than we imagined.

After using our test environment for a while now, we realized that this would probably also be interesting for users new to the TMS WEB Core framework. It allows to play with the TMS WEB Core UI Controls directly from the web without the need to install anything. It allows to learn all features and capabilities and discover the rich set of controls meanwhile available that can help you build your web applications. So, we thought of a name for this environment and came up with "Component Explorer".

During these 2 weeks of visits to the TMS lab, we wanted to show you the experimental version of our Component Explorer. You can use it to explore our TMS WEB Core UI controls, play with it without installing it, experiment and test. And oh, of course we would appreciate if you'd let us know if you find an issue so our team can look into it.

Head to http://www.tmssoftware.biz/tmsweb/demos/ComponentExplorer now and discover.



Some notes for your information:



  1. A nice technical detail about the Component Explorer is that it is not a monolithic single-page web application. This means that the Component Explorer consisting of the Object Inspector, designer and component palette dynamically loads the UI control libraries. So, when we develop new UI controls or update the UI controls, this can be done by deploying compiled UI control library JavaScript files to a "component" folder.

  2. Another nice tidbit, is that the Component Explorer is mainly made up of FNC UI controls. The Object Inspector, the design surface, the tool palette, ... were all developed with TMS FNC UI Controls. Given that FNC controls can be used for VCL, FMX, LCL and WEB, this means that theoretically, we could also create a desktop Component Explorer versions. In that case it would be limited to exploring FNC controls of course as the native TMS WEB Core UI controls of course cannot be used from VCL, FMX or LCL applications

  3. There is an edit mode and runtime mode. Normally on the design surface, the mouse interacts with the UI controls to move & resize the controls. When unchecking the "Edit Mode" checkbox, we can interact with the UI controls directly with the mouse.

  4. There are still several shortcomings in the Component Explorer. One of these shortcomings is that it is not yet possible to insert controls as child of other controls. All inserted controls are child of the form. So far, for our testing purposes, we could live with this limitation but as our testing becomes more complex (for example testing a ribbon control), this is something high on the priority list.

  5. Although there is already a TStringList property editor, TCollection property editor, there is no mechanism yet for custom property editors. Class properties can be edited by expanding the class and that is in most of our testing scenarios more than sufficient.

  6. In working on integrating testability of our TMS XData backend framework, we discovered a nice side effect that we could create on-the-fly not only a component exploring environment but also a data exploring environment. An example for exploring this, is by dropping a TXDataWebDataSet, TXDataWebConnection, TWebDataSource and TWebDBGrid on the form. Hook the grid to the datasource, the datasource to the dataset and the dataset to the connection. You can use your own XData endpoint or you can use our test endpoint https://app.devgems.com/music Then set the TXDataWebConnection.Active to true and set TXDataWebDataSet.DesignLoad to true. You can see now the XData data in the TWebDBGrid.



  7. We did use Bootstrap in the Component Explorer, so you can also play with Bootstrap styles. Use the TMS WEB Core UI controls ElementClassName property to assign a fitting Bootstrap class and it should update live. For example, drop a TWebButton on the form and set WebButton.ElementClassName = 'btn btn-primary' and you should get a nice looking blue Bootstrap button.


Lab visit feedback & win!

Our team loves to hear what you think about what is brewing in the lab, how you plan to use the upcoming features, what priority our team should give to it and if you have possibly interesting and/or creative ideas to make this even more powerful for Delphi developers. To reward your interaction & feedback, we'll pick 3 blog comments on October 15 that we liked the most and first prize is a free TMS WEB Core license, the 2nd and 3rd prize is a 50% discount coupon on TMS WEB Core. Let yourself hear to increase your chances!

Get started

Meanwhile, you can go ahead and explore the new & exciting territories of web client development that become available for Delphi developers with TMS WEB Core! You can download the trial version that is generally available, go ahead with the standalone version you purchased or with TMS WEB Core and additional tools that are all included in TMS ALL-ACCESS. Or you can come to see TMS WEB Core and discover and discuss it face to face with Bruno Fierens of tmssoftware.com showing it in London on October 23, 2018. Note also that in October, you can still take advantage of purchasing TMS WEB Core at launch price from 295EUR for a single developer license. From Nov 1, regular pricing will be active on TMS WEB Core (395EUR for a single developer license).

Visiting the TMS lab day 8: TMS WEB Core meets Electron

$
0
0



One of the more exciting technologies of past years is Electron. For those not familiar with Electron, a small background first. Electron was first created to enable the development of Github's Atom editor, which is meanwhile a highly popular a cross platform editor. Via Electron, it was possible to write the Atom editor code once with JavaScript and create desktop applications for Windows, macOS and Linux. Electron consists of the Chromium browser and node.js packaged in a native Windows, macOS or Linux executable. The application code consists of JavaScript, the layout and design of the appliction is equally done with web technologies HTML5 and CSS3. The Electron API meanwhile offers a wide set of bridges to the operating system the executable is running on and most parts of this API is of course fully operating system agnostic. As such, it is possible to use the local file system, use shell dialogs, clipboard access and much more. You can explore the Electron API here.

So, where does TMS WEB Core fit in? As you are aware, with TMS WEB Core, you can create web client applications in an RAD OO component based way. The web client runs JavaScript code that is compiled from your Pascal code. Connecting the dots, this JavaScript client application can of course also run under Electron and as such, offer the ability to have a desktop cross platform application for Windows, macOS and Linux, all with the same code base.

Although it is virtually dead-easy to let any JavaScript web client run via Electron in a desktop application, the real power comes from the bridge to the native operating system. And this means, using the Electron API which is a JavaScript API. As it is TMS WEB Core primary goal to facilitate Delphi developers to continue using the beloved Pascal language and a RAD component based development methodology, we've explored exposing the Electron API via components.

Therefore, during this 8th lab visit, we'd like to present you a first experimental version of a TMS WEB Core application running under Electron. It is a kind of Notepad editor. It uses the TWebMemo as editing control and to open and save text files to the local file system we have introduced TElectronOpenDialog, TElectronSaveDialog and also TElectronStringList. To have access to the application main menu, there is also the TElectronMainMenu. On the main form of the application, it looks like:



The TElectronOpenDialog and TElectronSaveDialog are nearly identical to the VCL counterparts TOpenDialog and TSaveDialog. As such, opening and saving local files from the TMS WEB Core application running as desktop application via Electron becomes as easy as:

Opening a local file:

var
  sl: TElectronStringList;
begin
  ElectronOpenDialog1.Title := 'Select text file';
  if ElectronOpenDialog1.Execute then
  begin
    sl := TElectronStringList.Create;
    sl.LoadFromFile(ElectronOpenDialog1.FileName);
    Meditor.Lines.Assign(sl);
    sl.Free;
  end;
end;
Saving to a local file:

var
  sl: TElectronStringList;

begin
  ElectronSaveDialog1.Title := 'Save to text file';
  if ElectronSaveDialog1.Execute then
  begin
    sl := TElectronStringList.Create;
    sl.Assign(MEditor.Lines);
    sl.SaveToFile(ElectronSaveDialog1.FileName);
    sl.Free;
  end;
This application in action on the Windows operating system looks like:



Now that we have this proof of concept working, it is a matter of further wrapping the full Electron API in easy to use functions, classes, components. And that will enable you to create not only web client applications with TMS WEB Core, but also desktop applications that can be deployed to Windows, macOS, Linux. And this comes with many advantages. To name a few:

  • Many existing web technologies can be used & integrated in the desktop application
  • The UI look & feel can be created with web technologies, i.e. graphics artists can create the HTML template for you with designs that outshine any classic desktop application design
  • A lot of code can be reused between web and desktop application if the company has a strategy for web access + desktop deployment


Lab visit feedback & win!

Our team loves to hear what you think about what is brewing in the lab, how you plan to use the upcoming features, what priority our team should give to it and if you have possibly interesting and/or creative ideas to make this even more powerful for Delphi developers. To reward your interaction & feedback, we'll pick 3 blog comments on October 15 that we liked the most and first prize is a free TMS WEB Core license, the 2nd and 3rd prize is a 50% discount coupon on TMS WEB Core. Let yourself hear to increase your chances!

Get started

Meanwhile, you can go ahead and explore the new & exciting territories of web client development that become available for Delphi developers with TMS WEB Core! You can download the trial version that is generally available, go ahead with the standalone version you purchased or with TMS WEB Core and additional tools that are all included in TMS ALL-ACCESS. Or you can come to see TMS WEB Core and discover and discuss it face to face with Bruno Fierens of tmssoftware.com showing it in London on October 23, 2018. Note also that in October, you can still take advantage of purchasing TMS WEB Core at launch price from 295EUR for a single developer license. From Nov 1, regular pricing will be active on TMS WEB Core (395EUR for a single developer license).

Visiting the TMS lab day 9: Automatic XData Web App Generator

$
0
0



TMS WEB Core and even web development itself is something new for some Delphi users. Even though TMS WEB Core is RAD, feels completely home by using Delphi IDE, a framework that is very similar to RTL and VCL, we felt the need to create a more "real-world" demo that would handle several aspects that potential Web Core users would have in their applications:

  • Authentication
  • Responsive design
  • Dynamic content from database
  • REST backend
  • Data modification
  • Data filtering, ordering, pagination
  • And more...

With that in mind, we have created the XData Music demo. Full source code is available upon install of TMS WEB Core or TMS XData.

And you can try the demo online here: https://app.devgems.com/xdata/music/app.

The demo has a simple database in the backend, which consists of music artists, genres and albums (with their respective tracks). Here is the listing of albums, for example:



And it illustrates how to require authentication in the application, as well responsive design, as the following screenshots show:



So far so good. The demo is serving the purpose of being an example of how to build an app using TMS WEB Core. But we have then noticed something interesting: users were not only using the demo as a learning resource, but in addition to that, they were starting their own application from the demo source code. Which made us wonder: what if we create a scaffolding tool that generates a source code similar to the demo, automatically, based on the existing XData server of the user?

That's one of the things we are working on now. You can get a glimpse of the current wizard form (under work) in the next screenshots:





So, in a nutshell, you choose the URL of an existing XData server, the wizard will retrieve the metamodel of the server and dynamically generate the source code of your application, with an UI interface for the CRUD operations of your database data, filtering, pagination, ordering, associated entities (lookup), all automatically.

A great time-saving start! And this should be only the start, as we intend to add more and more features to the generated source code so that it eventually becomes a full-featured application generator. Stay tuned for the TMS XData Web App Generator!

Lab visit feedback & win!

Our team loves to hear what you think about what is brewing in the lab, how you plan to use the upcoming features, what priority our team should give to it and if you have possibly interesting and/or creative ideas to make this even more powerful for Delphi developers. To reward your interaction & feedback, we'll pick 3 blog comments on October 15 that we liked the most and first prize is a free TMS WEB Core license, the 2nd and 3rd prize is a 50% discount coupon on TMS WEB Core. Let yourself hear to increase your chances!

Get started

Meanwhile, you can go ahead and explore the new & exciting territories of web client development that become available for Delphi developers with TMS WEB Core! You can download the trial version that is generally available, go ahead with the standalone version you purchased or with TMS WEB Core and additional tools that are all included in TMS ALL-ACCESS. Or you can come to see TMS WEB Core and discover and discuss it face to face with Bruno Fierens of tmssoftware.com showing it in London on October 23, 2018. Note also that in October, you can still take advantage of purchasing TMS WEB Core at launch price from 295EUR for a single developer license. From Nov 1, regular pricing will be active on TMS WEB Core (395EUR for a single developer license).


Visiting the TMS lab: Week 2 summary

$
0
0



Two weeks of TMS lab visits

Last 2 weeks were very busy, with many novelties and interesting ideas!

This week again we visited the TMS lab to see what the team is working on and what other plans we have for the future TMS WEB Core releases.

Our team would like to thank you for the many positive feedback. Your support gives us the energy to bring even better results. And so we have come up with the following topics this week.

The following topics were covered in week 2

  • Lab visit 5: Using external classes in pas2js



    Learn how TMS WEB Core benefits from:
    1. High-performance pascal to JavaScript mapping
    2. Ultra-light Pascal wrapper classes
    3. Automatic javascript obkect defination imports


  • Lab visit 6: TMS WEB Core Progressive Web Apps


    Progressive Web Apps
    1. responsive design
    2. continues to work in offline state
    3. install on device without need of censored app. store
    4. looks and behaves as native application


  • Lab visit 7: TMS WEB Core testing and exploring



    Test our TMS WEB Core UI controls with Component explorer
    1. Runtime test environment for the TMS WEB Core component
    2. Test directly from the web without installing anything


  • Lab visit 8: TMS WEB Core meets Electron


    Create a desktop cross platform application with the same code base using Electron API from TMS WEB Core.

  • Lab visit 9: Automatic XData Web App Generator


    1. Scaffolding coming to TMS WEB Core / TMS XData
    2. Automatic CRUD DB web app generation
    3. Includes authentication, filtering, pagination,...


Lab visit, feedback & win!

Until October 15 you still have the chance to win a prize. Read our blogs and leave a comment!

To reward your interaction & feedback, we'll pick 3 blog comments on October 15 that we liked the most and first prize is a free TMS WEB Core license, the 2nd and 3rd prize is a 50% discount coupon on TMS WEB Core. Let yourself hear to increase your chances!



Visiting the TMS lab: Winners

$
0
0



Two weeks of TMS lab visits: Winners

Last 2 weeks we have received many interesting comments on the blogs. Thank you everyone!
It is time to announce the winners today.

Winner: Murat Ak
We congratulate Murat for his excellent post, containing source code to add your own 3rd party components to TMS WEB Core. Great post by Murat showing how easy it is to add any existing web component to TMS WEB Core. We will soon inform how we will stimulate such initiatives even more.

Second place: Manuel
Thanks Manuel for valuable insights on how we could provide even better integration with frameworks like Cordova or Electron in the future.

Third place: Vieira Edson
We want to thank Vieira Edson also for various post comments exploring how TMS WEB Core is a dream for Delphi developers coming true.



We will contact the winners by email.

New symbolic math features in TMS Analytics & Physics library

$
0
0

TMS Analytics & Physics developing library provides many useful and unique features for working with symbolic math expressions. New version 2.6 introduces new capabilities and improvements for symbolic manipulations with math formula.

First great innovation is that the partial derivative operator can be used in math formulae as an implicit operation. This means there is no need to evaluate symbolic expression for some derivative and then use the expression in some math formula. The derivative can be used in formula implicitly. For example, it is possible to use the following expression in formulae ‘?sin(x^2)/?x’. The derivative by ‘x’ evaluated by the system implicitly and used when required for other operations.
Some examples of syntactically correct expressions with the derivative operator:


∂²(x^2*sin(a*x))/∂x²
∂²(y^2+1-e^-x)/∂x∂y
∂sinh(x*y)/∂x-∂ln(y/x)/∂y

Implicit derivative operator supports mixed and high-order derivatives (up to 9-th order). Using the operator allows write math expressions in short and readable form without substituting explicit expression for the derivative, which could be more complicated in common case.
Here is an example code for calculating value of an expression, containing implicit derivative operator:

var
  f: string;
  v: TValue;
begin
  f:= 'e^(b*x)*(∂y^2/∂y)-∂sin(a*x)/∂x';
  v:= translator.Calculate(f);
  // code for using ‘v’ value...
end;

The code for the expression calculation is simple and does not require explicit derivative expression – all operations done by the evaluation machine in the background. All other methods, such as simplification and derivative, are applicable for expression with the operator. Let us consider the following example:

var
  f1, f2, df1, df2: string;
begin
  f1:= 'a*x^2+∂²(sin(a*x)*e^(b*y))/∂x∂y';
  df1:= translator.Derivative(f1, 'x');

  f2:= 'a*x^2+∂²(sin(a*x)*e^(b*y))/∂a∂b';
  df2:= translator.Derivative(f2, 'x');

  // code for using symbolic derivatives ‘df1’ and ‘df2’...
end;

Result symbolic expressions for ‘df1’ and ‘df2’ are the following:

df1 = a*2*x+∂³(sin(a*x)*e^(b*y))/∂x;²∂y
df2 = a*2*x+∂²(cos(a*x)*a*e^(b*y))/∂a∂b

This shows that symbolic operations applied to the implicit derivative operator with some features and the expressions still contain the operator (see documentation for full information about the features). The new method ‘Explicit’ of the Translator class can be used to get explicit symbolic expression for any formula, containing implicit operations. Here is the example code:

var
  f, ef: string;
begin
  f:= 'e^(b*x)*(∂y^2/∂y)-∂sin(a*x)/∂x';
  ef:= translator.Explicit(f);
  // code for using explicit symbolic expression ‘ef’...
end;
The explicit symbolic expressions for the example is the following: ef = e^(b*x)*(2*y)-cos(a*x)*a Another great feature of the version is functional operators. They are like ‘user defined’ functions and allow introducing new functionality without writing new classes or adding new packages. New function can be introduced with the ‘AddFunction’ method. Here is the code of a simple example:
var
  f: string;
  v: TValue;
begin
  translator.AddFunction('S', 'Pi*r^2', TArray.Create('r'));

  f:= 'S(a)-S(a/2)';
  v:= translator.Calculate(f);
  // code for using ‘v’ value...
end;
First, we added new function (functional operator) with name ‘S’, one argument ‘r’ and the expression for circle area formula ‘Pi*r^2’. As the function introduced it can be called in symbolic expressions as other functions with different arguments. In the example code the function used to calculate area of the ring with outer radius ‘a’ and inner radius ‘a/2’. Functional operators not restricted with simple formula and can include many arguments and any acceptable expressions as function formula or arguments. For example:

var
  f: string;
  v: TValue;
begin
  translator.AddFunction('Series', '1+(∂F/∂x)*x+(∂²F/∂x²)/2!*x^2+(∂³F/∂x³)/3!*x^3+(∂4F/∂x4)/4!*x^4', TArray.Create('F', 'x'));

  f:= 'Series(e^y y)';
  v:= translator.Calculate(f);
  // code for using ‘v’ value...
end;

The introduced function ‘Series’ is the Tailor’s series with degrees up to fourth for F(x). The function accepts two arguments: function ‘F’ and variable ‘x’. The function then used to calculate ‘approximate’ value of ‘e^y’ represented with the series.
Using functional operators together with implicit derivative operator allows defining differential operators, such as gradient, Laplacian and other. Let us consider the following code:

var
  f, ef: string;
begin
  translator.AddFunction('Laplace', '∂²F/∂x²+∂²F/∂y²', TArray.Create('F', 'x', 'y'));

  f:= 'Laplace(A*sin(x)*y^2+B*cos(x)*e^-y x y)';
  ef:= translator.Explicit(f);
  ef:= translator.Simplify(ef);
  // code for using explicit symbolic expression ‘ef’...
end;

The introduced function ‘Laplace’ is the 2D Laplacian differential operator for function ‘F’ and variables ‘x’ and ‘y’. The function used for evaluating symbolic expression of Laplacian for the math expression ‘A*sin(x)*y^2+B*cos(x)*e^-y’. After simplification the result expression is ‘-A*sin(x)*y^2+A*sin(x)*2’. It should be noted here that the result does not contain the ‘B’ variable. It is because Laplacian for the part ‘B*cos(x)*e^-y’ gives zero.
Thus, all new symbolic capabilities allow using TMS Analytics & Physics library to build applications like Computer Algebra Systems (CAS). The version 2.6 is already released now. Source code of the example application can be downloaded from here.

TMS WEB Core: a bridge to the future!

$
0
0

Intro
While working in the TMS Labs this week, we had a fruitful discussion on how we could interact with a desktop or mobile environment, where the browser that hosts a TMS WEB Core application, runs on. We already had some experience creating a JavaScript bridge between a TWebBrowser and Google Maps (http://www.tmssoftware.com/site/webgmaps.asp) and figured out this could be useful for TMS WEB Core as well. We wanted to give the user the capability of hosting its TMS WEB Core application in a native desktop or mobile application that offers access to all of the operating system functionality and make it accessible via the browser.

Finding an entry point
We created a TTMSFNCWebCoreClientBrowser class that acts as the communication and viewing component for a TMS WEB Core application. To setup the communication, we needed an entry point. In JavaScript, a global variable can be defined and that was just the entry point we were looking for. In TMS WEB Core, during the creation of TApplication, we also injected a global variable "TMSWEBCoreClientBrowser", that is initialized with a string "unknown". This variable is filled in, when the TTMSFNCWebCoreClientBrowser establishes a conection to the TMS WEB Core application.

  if ExecuteJavascript('document.readyState', true) = 'complete' then
  begin
    if ExecuteJavascript('window.TMSWEBCoreClientIdentifier', true) = 'unknown' then
      FInitialized := True;
  end;
Handshake
After the initialization is complete, the TTMSFNCWebCoreClientBrowser instance performs a handshake. This is being done by executing JavaScript. The HandshakeScript is dynamically being added during the initialization of the TMS WEB Core Application and initializes the TMSWEBCoreClientIdentifier global variable.
initialization
begin
  HandShakeScript := TJSHTMLScriptElement(document.createElement('script'));
  HandShakeScript.id := 'HandShakeScript';
  HandShakeScript.type_ := 'text/javascript';
  HandShakeScript.innerHTML :=
  'var TMSWEBCoreClientIdentifier = "unknown";'+#13#10+
  'function HandShake(cid){'+#13#10+
  '  TMSWEBCoreClientIdentifier = cid;'+#13#10+
  '}';
  document.body.appendChild(HandShakeScript);

  Application := TApplication.Create(nil);
end;
The handshake script is being called from the TTMSFNCWebCoreClientBrowser instance after the initialization is complete.
procedure TTMSFNCCustomWebCoreClientBrowser.PerformHandshake;
var
  c: string;
begin
  {$IFDEF MSWINDOWS}
  c := 'windows';
  {$ENDIF}
  {$IFDEF MACOS}
  {$IFDEF IOS}
  c := 'ios';
  {$ENDIF}
  {$IFNDEF IOS}
  c := 'macos';
  {$ENDIF}
  {$ENDIF}
  {$IFDEF ANDROID}
  c := 'android';
  {$ENDIF}
  ExecuteJavascript('HandShake("'+c+'");');
end;
Sending and receiving messages
When the handshake is complete, the client can send and receive messages. The communication format is a JSON string that is automatically URL encoded and parsed to a JSON object. A sample sending from the client to the TMS WEB Core application:
procedure TForm1.ClientSendButtonClick(Sender: TObject);
var
  c: TJSONObject;
begin
  c := TJSONObject.Create;
  c.AddPair('Message From Client', 'Hello World !');
  w.Send(c);
  c.Free;
end;
And of course, sending back from a TMS WEB Core Application to the client:
procedure TForm1.WebButton1Click(Sender: TObject);
var
  o: TJSONObject;
  js: TJSON;
  s: string;
begin
  js := TJSON.Create;
  s := '{"Message From TMS WEB Core Application":"'Hello World !"}';
  o := js.parse(s);
  w.Send(o);
  o.Free;
end;
The future
This technology opens up a lot of possibilities for the future. You can send and receive messages with plain text, as well as small binary data encoded inside a JSON string between the client and the TMS WEB Core Application. The client application can then interact with the operating system, such as opening files, and other operating system specific functionality. The code runs on FMX (Windows, macOS, iOS, Android) and VCL (Windows) and is coming to TMS WEB Core in the near future!


On our way to Verona: TMS WEB Core v1.1 coming

$
0
0


After a stunning start in Brescia on July 25, 2018 with the TMS WEB Core v1.0 release, we're well underway to our next destination along our Mille Miglia track: Verona. As explained, to visualize the roadmap of TMS WEB Core, we use the historic 1955 Mille Miglia race and each subsequent versions of TMS WEB Core will be named after cities along the Mille Miglia. That means that our next major TMS WEB Core v1.1 release will be named Verona. We expect to arrive in Verona in November.

So, what will be included in TMS WEB Core v1.1 Verona:

  • Initial Progressive Web Application (PWA) support
    A new project type with all necessary settings & preconfigured needed files will be available to let you start building progressive web applications out of the box.

  • Google Charts
    Google Charts will be available via an easy to use Pascal component offering most of the Google Chart types and features.

  • Google and Facebook signin
    Using Google or Facebook to offer signin for your web applications will be as easy as dropping a component on the form.

  • Autocompletion control
    As there is no native editable combobox in a browser, we've created an editable combobox with autocompletion.

  • Google ReCaptcha v3.0 support
    The next generation Google Captcha functionality wrapped in a Pascal component.

  • Accelerator keys support
    For heavy keyboard users, you'll be able to use accelerator keys for buttons, labels just like you do now in VCL applications.

  • Beta support for Lazarus
    A first version that can be used in the Lazarus IDE will be included.

  • PayPal payment support
    Also here, a RAD component based way to make integrating payment processing from your web application really easy.

  • Desktop browser bridge
    Send and receive commands/data between a TMS WEB Core web client and a desktop application hosting the browser that runs the TMS WEB Core client application.

  • Enhancements for TWebClientDataSet and DB-aware controls
    Several enhancements make it even easier to connect DB-aware controls to a dataset.

  • Many smaller improvements & fixes
    Many small enhancements and new functions to make the life easier for web client application development are included, too many to name here.


At the same time, a lot of work is also going into TMS XData, to make it work even more seamless as data backend for TMS WEB Core web client applications. We're making it even more RAD, let you write less code and give you more functionality. We're also hard at work to deliver this major TMS XData update in Q4 2018.

We will have a beta version of TMS WEB Core v1.1 Verona shortly for all TMS ALL-ACCESS users. Note also that TMS WEB Core v1.0 can still be purchased till Nov 1 at our discount launch price of 295EUR. From Nov 1, we'll switch to regular pricing 395EUR for a single developer license. Of course, existing TMS ALL-ACCESS and TMS WEB Core users will all receive the upcoming new TMS WEB Core v1.1 Verona release as a free update in the one-year subscription purchased.

Get started

Meanwhile, you can go ahead and explore the new & exciting territories of web client development that become available for Delphi developers with TMS WEB Core! You can download the trial version that is generally available, go ahead with the standalone version you purchased or with TMS WEB Core and additional tools that are all included in TMS ALL-ACCESS. Our team looks forward to all your comments, feedback, feature-requests to help steering the development of TMS WEB Core to the next stages!



Viewing all 1006 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>