Dimensional Data

Last time out, we had a good look at CodeMirror 5, a JavaScript text editor that, among many other things, can be used to edit native HTML. This time out, we’re going to tackle the general topic of editing HTML in TMS WEB Core projects using two very similar JS libraries that both provide a WYSIWYG HTML editing interface – Summernote and SunEditor. And if neither of those are to your liking, there’s also a section at the end about how to convert Markdown text into HTML, using Showdown. Three different ways to tackle the same problem. Motivation Why might you need a WYSIWYG HTML editor in the first place? There are at least a handful of places I can think of where it might (or has) come up in TMS WEB Core projects. RichEditor. As a replacement for any needs that have historically been addressed using typical Windows RichEdit controls. Places where you want users to enter information, but you also want them to be able to use different text colors, bold or italic text, lists, tables, images, links, and so on. While such RichEdit controls have included support for some or all of these kinds of features, a WYSIWYG HTML control can typically do all of this and more, and usually you’re turning off things rather than trying to add editing functionality. Forums. If you have an area within your project where users can discuss things, like in a forum-type environment, this is sometimes a useful thing to have.  Markdown is also popular for this kind of thing, and is used to varying degrees in the TMS Support Center and on GitHub, keeping the UI as simple as possible. Documentation. For example, on a settings form, there might be a header at the top that describes some aspects about the settings that are specific to a client.  This description is stored as an HTML object in the client’s database and is displayed, if available, instead of the description that might be used by default. Naturally, access to editing these descriptions would be restricted to appropriate people. Or even if it isn’t customer-specific, sometimes storing the documentation in a database like this makes it possible to update the documentation that might be static within the application, but without having to release a new code update to make changes. Landing Pages. Customized web pages that cater to particular customers or marketing events or advertising campaigns.  These are just web pages that you track to see how much traffic is being generated by a particular campaign.  Or maybe you use them to A/B test what gets more conversions for a particular product.  Or something like that.  By being able to edit HTML directly within the application, these pages can all be managed from within your application – no need to worry about file access or server configurations or anything like that. Other Content. Sometimes applications have a ‘news feed’ or an ‘about’ page or a ‘contact us page’ or maybe corporate profiles, that kind of thing. Having a built-in HTML editor makes it easy to keep this kind of content up-to-date and also secured in a way that would likely be more difficult if people were editing HTML files in some other application and then uploading them to your server, for […]

Do you want to display or edit code directly within your TMS WEB Core application? Then this is the post for you.  This time out, we’re diving head-first into CodeMirror 5, which describes itself as “a versatile text editor implemented in JavaScript for the browser.”  Which it certainly is.  Beyond just being a text editor, it is natively aware of more than 100 different programming languages.  Beyond that, it has numerous add-ons and configurable options to mimic the many styles and conventions of other editors you might already be familiar with, like Vim, Emacs, and so on. And using it in a TMS WEB Core project is just as easy as any of the other JS libraries we’ve covered so far. Motivation. Why do we need a code editor at all? The very first benefit of a code editor, as compared to a simple text editor or an editable TWebMemo field, for example, is that it typically comes with syntax-highlighting that is configured for the programming language that you’re editing. For Pascal, this means that begin and end are automatically shown in a different color, as well as any other Pascal-related reserved keywords.  This also typically means that the various kinds of brackets are shown in a way that makes it easy to find the matching pairs of brackets, or that comments show up in a different color or style.  Might not seem like much, but if you’ve ever tried writing code without this, it is a very different experience. Of course, you’re likely very familiar with this kind of thing, as the Delphi IDE does exactly this (and much, much more!) when editing code.   Sometimes it is even helpful to display other text using this kind of mechanism, if for no reason other than to make it a little nicer to look at.  If you have log files that are potentially visible to your users, for example, they can be setup so that they are viewed through CodeMirror.  Perhaps set to something like SQL (my personal preference) will make the log files a little easier to read, depending on how they’ve been formatted, with dates and numbers and other things displayed potentially in a different color.  Or perhaps you want to display text that has line numbers beside it.  Or perhaps the most common of all, you want to edit HTML source and have the tags shown in a different color.  We’ll be taking a look at both Summernote and SunEditor in an upcoming post, both of which use CodeMirror to provide their “edit HTML source” functionality. CodeMirror 5 vs. CodeMirror 6. Before we get any further, let’s quickly sort this out.  Normally I’m 100% all-in when it comes to using the leading (bleeding) edge of any particular JS Library, with the thought that it will likely have the best support for the latest browsers and the most active development efforts, as compared to older versions of the same library.  And this does indeed apply here as well.  However, they’re a little too far out on the leading edge at the moment.  So far out that CodeMirror 6 is really a collection of modules that cannot be directly (perhaps easily would be more accurate) loaded into a web application, as we’ve been doing.  Instead, the various modules and their […]

Hello world!  You might have been used to see and read Stephanie in past posts, but today it’s time to introduce a new face! I’m Emmanuel, the internship Marketing and communication since 25th of January. My goal in this internship is to learn about the marketing side of development world, as well as creating video-, photo- and audio content for social media channels. In this blogpost we will discuss a new application that Stephanie created as internship project. The app in question is a navigation system that is based on FNC components. Before going further into it, I would like to discuss my journey within the development world as a Marketing student. It is quite important to know that I have little to no experience with coding, and that most of the components and code languages discussed in this video are mostly unknown to me. Which means that the experiences and point of view expressed could be different and less educated than most. My point of view, in some situations, is handful for having a full user perspective on the software that is being created. Sometimes a developer can create or design tools that might seem easy to them but isn’t really for the regular customer. It happens sometimes that I’m a first tester of a software that Stephanie creates. I, for example, helped her with the French language for the navigation software, as I am a native speaker. My first usage of the app also gave us path to new bugs, which were immediately patched. It feels good to know that even with no understanding of the coding world, one can still help in other ways.  My main task within the navigation app was to create a video for a quick demo of the finished application. There are a few steps to get done before starting with the video editing, which are: Introduction and learning of the software functionalities Agreement on what should be demoed Shooting and creating content + directing the present persons And afterwards starts the video-editing part, which isn’t a walk in the park! In the video, that was created in iMovie, you can also hear and see me for the French tutorial. Emmanuel Dernoncourt, Intern Marketing 

Version 2.0 of the TMS FNC Chart is available. This major release brings a lot of new features.Most of them are related to quickly get the chart that you want with just a couple lines of code. An overview of the features that were implemented: Chart type specific sub classes Appearance: with the color scheme and global font Load From CSV Load From Array Load From JSON Database Adapter Grid Adapter In this blogpost we will elaborate on the first three features mentioned in the list. The others will be addressed in a follow-up blogpost. Holger has created a great video, where he combines some of the new features in a simple application.With just one line of code, he loads a CSV file in a bar chart.  Chart Type Specific Sub Classes A lot of new components were added to the package, these are all instances of the TTMSFNCChart each with a different chart type set as default. This way you can immediately start working with a bar chart (or any other) without the need to change the type of the series. Appearance You can easily set the overall look of the chart with the new Appearance property. This property currently exist of two larger parts. The color scheme can be set with a list of predefined colors, you can use the default Excel colors or you can get different shades of a selected color. The other one is the GlobalFont. This property gives you the ability to set all the fonts of the chart with one setting.You can change the size, font name, color and/or style and you can keep the proportions of all the fonts and just scale them a little bigger or smaller. Load From CSV Different ways were added to load data from a file, stream or text. And those will be further explained in some upcoming blogposts.But now we will focus on the LoadFromCSV method.This method will take the indices of the different columns that you want to use. For some parameters these are arrays of integer, that way you can create multiple series in one call. Another new property in the chart is the DefaultLoadOptions, with this property you can choose how series will be added/updated when using some kind of data loading. If you want to deviate from the defaults for one csv you can add an instance of the TTMSFNCChartLoadOptions that you’ve created to the parameters of the LoadFromCSV call. This was added because we want to be as flexible as possible. And in that regard we’ve made three different ways to add different types of data. First you have the short method: TMSFNCChart.LoadFromCSVData(myFile.csv, [1,2], -1, 0); //Parameter 1: my file, stream or text variable. //Parameter 2: Array of Integer that are mapped on the y-values. A Series will be created for each value. //Parameter 3: The x-values that you can use, as this is -1 they are skipped while loading. //Parameter 4: The index for the column that uses the labels shown on the x-axis. If not set this is -1 and skipped. A more detailed procedure that takes the second or variable values: TMSFNCChart.LoadFromCSVDataEx(myCSVStream, myLoadOptions, [1,3], -1, 0, nil, [2,4]); //Parameter 1: my file, stream or text variable. //Parameter 2: Optional load options, if not define the DefaultLoadOptions are used. […]