Blog Options

Archive

<< February 2018 >>

Authors




TMS RADical WEB, history, the team and future

Bookmarks: 

Friday, February 23, 2018



There is the famous quote: "Everything starts with a dream" and many years ago, Michael Van Canneyt, one of the main contributors to the Lazarus and Free Pascal compiler project had the dream of having the Pascal language as a first-class language for creating web applications in pretty much the same way as Delphi developers can since 1995 create first-class Windows applications with the Pascal language and VCL.
Michael Van Canneyt did years of research on ways to achieve this goal, including what the best approaches are to create a high-performance Pascal to Javascript compiler and how to best map the Delphi RTL on Javascript. When Michael Van Canneyt shared his dreams with Detlef Overbeek, editor of the Blaise Pascal magazine, Detlef was so enthusiast that he initially funded the further development of this idea and this enabled to involve Mattias Gaertner to help the development of the compiler. Realizing much more would be needed than just a compiler, Detlef Overbeek got in touch with Bruno Fierens, founder & director of TMS software. Given the expertise of TMS software in UI control frameworks, bundling the forces would finally enable the dream to come true. Bruno Fierens was so thrilled by the idea of having the ability to create modern web applications in a component-based RAD way with the strictly typed and object oriented Pascal language from the Delphi IDE that he put a big part of the TMS team behind the project and even attracted some more brilliant minds to realize this goal. Over one year now, this team closely worked together to bring a first version of the product under the TMS RADical WEB umbrella: TMS WEB Core. The power team that brought this first part of the dream to reality is at this moment:

Bart Holvoet: Expert at TMS software in web development + cloud services and responsible for standard TMS WEB Core UI controls and jQuery control wrappers

Bruno Fierens: Embarcadero MVP, TMS software founder, director and responsible for the TMS RADical WEB strategy & overall product architecture

Detlef Overbeek: Editor of the Blaise Pascal magazine and never-ending source of inspiration, motivation & ideas

Holger Flick: Embarcadero MVP and TMS WEB Core evangelist, QA, training and UX expert and advisor

Masiha Zemarai: Marketing manager at TMS software responsible for TMS WEB Core sales & marketing

Mattias Gaertner: Compiler engineer responsible for the Pascal to Javascript compiler

Michael Van Canneyt: Architect of compiler and RTL and overall technical advisor

Pieter Scheldeman: Architect at TMS software responsible for the FNC framework and web-enabling the FNC framework for TMS WEB Core

Roman Kassebaum: Embarcadero MVP and responsible for the TMS WEB Core IDE integration

Sanjay Kanade: Software developer at TMS software developing web-enabled FNC UI controls

Wagner R. Landgraf: Architect of TMS Business Subscription line of tools and responsible for the XData client for TMS WEB Core



We have many plans for extending the capabilities of this technology and reach into new territories with new products under the TMS RADical WEB umbrella. Our roadmap for the next years is filled with ideas and we especially look forward to all your ideas & wishes to further extend and steer the plans for innovative new developments.

You feel as excited & thrilled as we are and want to become part of this brilliant top team? We've got much more plans and work to roll-out the full TMS RADical WEB. If you are the bright, motivated talent wanting to help make dreams come true, contact us today!



Get started today: Technical previews of TMS WEB Core, TMS FNC UI web-enabled controls, web-enabled TMS XData, the first parts under the TMS RADical WEB umbrella are exclusively available now for all active TMS-ALL-ACCESS customers.

Bruno Fierens


Bookmarks: 

This blog post has received 9 comments. Add a comment.



TMS RADical WEB, debugging your code

Bookmarks: 

Thursday, February 22, 2018

Given TMS WEB Core is based on a Pascal to Javascript compiler with the Javascript code running in the browser, there is not a direct way to debug the code from the Delphi IDE. From the IDE, the Javascript code is generated and the browser is launched with the HTML page URL. After launching the browser, there is no further interaction between the IDE and the browser. Of course, since modern browsers come with a Javascript debugger integrated, you can debug the web applications this way directly from the browser. Of course, debugging this way means you need to need to be familiar with Javascript and figure out how the Javascript you step through corresponds to the Pascal code in your web application. Although this is still a possible way to debug, the Pascal to Javascript compiler provides for a way easier method to debug your code as original Pascal code when using the Google Chrome or the Mozilla Firefox browser debugger.



So, when you launch your web application in debug mode, with the help of an automatic generated map file, the Google browser debugger allows you to step through your original Pascal source code, inspect values, use watches, set breakpoints etc.. pretty much the same way as you would do from the Delphi IDE. So, all in all, this offers excellent debugging facilities for your web applications when using the Google Chrome browser or Mozilla Firefox browser.



So, with TMS WEB Core, if you compile in debug mode, this extra map file is generated that allows you to debug from the browser in Pascal code and when you compile in release mode, this map file is not generated and your Pascal code is not visible to users.

Get started today: Technical previews of TMS WEB Core, TMS FNC UI web-enabled controls, web-enabled TMS XData, the first parts under the TMS RADical WEB umbrella are exclusively available now for all active TMS-ALL-ACCESS customers.

Bruno Fierens


Bookmarks: 

This blog post has received 4 comments. Add a comment.



TMS RADical WEB, using common web functionality & consuming cloud services

Bookmarks: 

Wednesday, February 21, 2018

In web applications, we have come to expect that we can easily integrate audio, video or services like Youtube or Google Maps to embed video or geographical functionality. TMS WEB Core provides a multimedia component with which audio & video can be played. It provides a control that makes it dead-easy to add a Youtube video in a web application. All that is needed is setting the Youtube video ID and that's it. Also adding a map with Google Maps is easy. Drop the Google Maps component on the form and you see the map in the web application. The component offers right now already access to markers, zooming and panning and we plan to extend it over time with many more capabilities all easily accessible in Pascal code in a RAD way.

procedure TForm4.WebButton2Click(Sender: TObject);
var
  lat,lon: double;
begin
  lat := 48.8566;
  lon := 2.3522;
  WebGoogleMaps1.SetCenter(lat,lon);
  WebGoogleMaps1.AddMarker(lat,lon,'Paris');
end;

procedure TForm4.WebButton3Click(Sender: TObject);
var
  lat,lon: double;
begin
  lat := 51.5074;
  lon := 0.1278;
  WebGoogleMaps1.SetCenter(lat,lon);
  WebGoogleMaps1.AddMarker(lat,lon,'London');
end;



And of course, you can also experience this demo live.

Also, in a non-visual way, access to cloud services is possible. For consuming OAuth 2.0 based cloud services, there is a OAuth web client. Alternatively, for more strict & secure purposes, a server side accessor helper will be needed. At this time, there is a sample component demonstrating access to Google calendar as well as access to our myCloudData.net service. It is clear that over time, we will add more out of the box ready web clients for other cloud services as well as helpers to facilitate server-side cloud service access.





Get started today: Technical previews of TMS WEB Core, TMS FNC UI web-enabled controls, web-enabled TMS XData, the first parts under the TMS RADical WEB umbrella are exclusively available now for all active TMS-ALL-ACCESS customers.

Bruno Fierens


Bookmarks: 

This blog post has received 1 comment. Add a comment.



TMS RADical WEB, using HTML & CSS for design & layout of your application pages

Bookmarks: 

Tuesday, February 20, 2018

By default, the Delphi form designer serves as a WYSIWYG design surface for your web application forms. This means that the UI controls on the Delphi form will appear absolute positioned on the web page. For page layout & organization, there are the typical Delphi container controls like a panel, groupbox, scrollbox, gridpanel.



The parent/child relationship of the Delphi controls is also reflected on the produced web pages. Additional facilities like control alignment, anchoring and a splitter control are available to let you and the end user control the layout of the pages. In this default mode, everything is as such very familiar to Delphi developers and users of Delphi VCL Windows applications and sometimes this similarity is desirable. However, the TMS WEB Core framework is also completely open to have the page layout designed directly from HTML & CSS. The architecture of the framework provides for separating design & code and even have the design done by people with a role, i.e. graphical designers.
So, how is this separation handled? Fortunately, in a very easy and straightforward way. The link between HTML and the UI controls and code used in the Delphi IDE is based on the unique HTML element ID. Every TMS WEB Core control has a property ElementID. When the ElementID is not used, i.e. left empty, the HTML elements the control consists of is generated by the TMS WEB Core framework. When the ElementID is specified, the HTML element found is hooked up to the Pascal class for the control. This means that property accessors directly get and set values from the HTML element and the various HTML element Javascript events are hooked up the class and exposed as Pascal event handlers.
Here the TWebMemo is hooked up via the ElementID property to a TEXTAREA HTML element with ID set to “mem” and already in the HTML file.



The software developer and the graphical designer can collaborate by simply ensuring that the designer provides the HTML element IDs to the software developer or the software developer can provide a list of IDs of controls needed to the graphical designer. It speaks for itself that using this technique empowers us to take advantage of responsive design for TMS WEB Core web applications. When the HTML template for the page is applying responsive design techniques, i.e. different layouts for different device screen sizes, the UI controls will appear where the designer defined these should appear depending on the screen size. That is not all though. It is also possible to let the Delphi designed UI be generated in the body part of a HTML page or in any specified HTML container element in a HTML page. As such, a graphical designer could create a page layout with a header, footer and other elements in the HTML page and add a specific area via a HTML DIV or SPAN element where the Delphi designed UI will be generated in. To do so, all that is needed is set to the ID for the HTML element where the form should be generated via the Form.AppContent property. Finally, each UI control also exposes an ElementClass property. Via this ElementClass property a CSS style can be specified for an UI control. Via this way for example, it is very easy to use a popular framework like bootstrap. It is sufficient to set the bootstrap CSS class names to the UI controls on the Delphi form designer by their ElementClass properties.


Here the ElementClass property of the edit control on the form is set to the bootstrap ‘form-control’ style:

One of the demos included in the TMS WEB Core framework shows this. By simply changing the bootstrap theme via changing the reference in the HTML page template, the appearance of the web application will adapt automatically.

Demo without styling:
http://www.tmssoftware.biz/tmsweb/demos/tmsweb_simple/

Demo with bootstrap styling applied:
http://www.tmssoftware.biz/tmsweb/demos/tmsweb_bootstrap/

Get started today: Technical previews of TMS WEB Core, TMS FNC UI web-enabled controls, web-enabled TMS XData, the first parts under the TMS RADical WEB umbrella are exclusively available now for all active TMS-ALL-ACCESS customers.

Bruno Fierens


Bookmarks: 

This blog post has received 12 comments. Add a comment.




Previous  |  Next  |  Index