Software

TMS WEB Core for Visual Studio Code

TMS WEB Core for Visual Studio Code beta is ready for TMS ALL-ACCESS users. On July 26, 2018, we released the first version of TMS WEB Core for the Delphi IDE, hereby offering a RADically new way for creating web applications directly from the Delphi IDE. RADically different because TMS WEB Core offers RAD component based rich web client application development thanks to the technology of compiling the Object Pascal code to JavaScript with the pas2js compiler. The next step was to also enable using TMS WEB Core from the Lazarus IDE with the first version introduced in October 2018. At the same time, TMS WEB Core was extended with support for creating PWA’s, which is progressive web applications, meaning web applications that can be installed on mobile devices or Chrome desktop browsers, run offline, and access several parts of the device hardware. In a later step, February 2019, we announced support for creating cross-platform desktop applications via the Electron framework. On November 15, 2019, we unveiled that TMS WEB Core was also coming to Visual Studio Code. And now, today, after a huge amount of intensive work, we feel confident to give our baby in the hands of TMS ALL-ACCESS users. It took more time than expected to reach this level as the challenges turned out to be quite complex. Challenges we couldn’t have coped without having the absolute best engineers on board. In the first place, José Leon Serna, the architect of the IDE integration into Visual Studio Code, Roman Kassebaum overlooking and ensuring the Visual Studio Code integration works on 3 operating systems and remains compatible with Delphi’s project management, the pas2js compiler team assisting with debugging integration, the framework team itself taking up the huge task for making the UI controls all design-time editable. Let’s go back to the WHY of taking up this huge & challenging task. Before embarking on this project, José Leon Serna, former Embarcadero IDE architect and head of the engineering team in Spain, and myself mutually shared the vision that Visual Studio Code offered a couple of unique technical features that could potentially make it an ideal candidate for using it for TMS WEB Core web client development. Visual Studio Code is based on web technology. Visual Studio Code is an Electron application and internally, everything is rendered via web views. This makes it ideal to offer design-time live rendering of the forms designed by TMS WEB Core. This is the primary driver. But there are nice additional benefits coming with Visual Studio Code. So, in a nutshell, key decision factors for our endeavour were: Based on web technology, offers a live web rendered designer form Is cross-platform, Visual Studio Code can be used on Windows, macOS, Linux Designed to be extended via plugins with seamless plugin ‘marketplace’ distribution A powerful established Pascal code editing plugin OmniPascal is already available It is a high-DPI compliant IDE Features built-in mechanisms for debugging of applications running in a browser It features side-by-side editing, multi-view code editor windows that can be freely arranged It has a very low barrier of entry, as Visual Studio Code itself is free and open-source Just like our support for Lazarus adds freedom of choice, the capability to use Visual Studio Code now is extra freedom of choice. Of course, this won’t stop nor influence our plans for TMS WEB Core for Delphi. Version 1.4 of TMS WEB Core […]

Read More

Ext JS și Google Maps pentru vizualizarea datelor geospațiale

Vizualizarea datelor geospatiale utilizând Ext JS și Google Maps Deseori,când vine vorba de lucrul cu date geospatiale (adică date care au asociate informații despre locație), aveți de multe ori nevoie de o modalitate faină de a vizualiza datele din aplicația dvs. pentru a fi utile. Ext JS include un pachet „ux” care conține diferite extensii de utilizator (inclusiv una pentru Google Maps) care vă permite să încorporați cu ușurință o hartă cu informații pe ea în aplicația dvs. Ext JS, împreună cu funcționalitatea încorporată de adăugare automată a markerilor pe hartă în baza datelor dintr-o baza de date din aplicația Dvs. Prin aceasta postare vom demonstra o aplicație simplă construită folosind Ext JS și Google Maps care conține o grilă și o hartă pentru vizualizarea locației clienților. Această aplicație este proiectată să funcționeze atât pe telefon, cât și pe desktop. Atât grila, cât și harta se vor lega de aceeași sursă de date – un set de date de exemplu care conține nume de clienți, adrese, coordonate latitudine / longitudine și număr de licențe software pe care le dețin. Primii pași Vom începe cu setările inițieale în Ext JS și Google Maps. Pentru a crea această aplicație, începeți prin crearea unei aplicații Ext JS noi. Pentru acest exemplu, am folosit Sencha Ext JS 7.0 Modern Toolkit. Pentru ca Google Maps să se redea corect în aplicația dvs., va trebui să generați o cheie API Google Maps prin intermediul consolei Google Cloud Platform, așa cum este descris aici. Această cheie API se asociază la una sau mai multe adrese URL unde aplicația rulează și permite redarea hărților personalizate fără a fi necesar un mesaj de eroare „Google Maps API is required”. După ce ați generat cheia API prin Google Cloud Platform Console și i-ați asociat o adresă URL permisă (de exemplu http: // localhost: 1841), deschideți fișierul app.json și adăugați următoarele în rădăcina fișierului, făcând astfel asigurați-vă că introduceți propria cheie API: Sencha Ext JS va adăuga această cheie (împreună cu orice alți parametri de șir de interogare specificați) la solicitarea la încărcarea Google Maps JavaScript API. În timp ce aveți fișierul app.json deschis, va trebui să adăugați și pachetele ux și google în tabloul necesar: Crearea modelului și a Main View Data model pentru această aplicație este o structură simplă, cu coordonate de nume, adresă, latitudine și longitudine și un câmp care conține numărul de licențe deținute de client: Codul pentru Main View va combina vizualizarea grilă și harta (ambele sunt create în secțiunea următoare). Aceast View prezintă grila și harta poziționate unul lângă celălalt pe orizontală folosind un layout hbox. Totuși, acest lucru nu va arăta grozav pe un telefon, datorită ecranului îngust, așa că putem schimba dinamic aspectul în funcție de tipul platformei și puteți trece la utilizarea unui layout vbox dacă nu folosiți un dispozitiv desktop, specificând următoarea platformConfig pe Main View. Această configurație va poziționa grila deasupra hărții folosind un layout vbox, folosind mai bine spațiul disponibil fără a fi nevoie să definiți vizualizări complet separate (una pentru desktop și alta pentru telefon). Puteți perfecționa acest lucru în continuare adăugând reguli suplimentare bazate pe dimensiunea ecranului sau orientarea ecranului. Vederea principală are, de asemenea, un View Model asociat cu acesta, care conține configurația Magazinelor Clientului și câteva exemple de date înscrise: Ext JS și Google Maps […]

Read More