Text file widgets in Elementi 2015

From SpinetiX Support Wiki

Jump to: navigation, search
This page is about the text-file data-driven widgets included into Elementi 2015.
For other Elementi versions, see Text file widgets in Elementi 2016 and Feed widgets in Elementi 3.x pages.

Introduction

Because of their simplicity, plain-text files are commonly used for storage of information, like service / product descriptions, details of a procedure / process, notifications, rules, warnings etc.

Text file widgets can be used to display the content of such text files, allowing to add styling information to the text and using animations whenever the entire text doesn't fit into the widget area.

There are many software tools that allows writing / modifying text files, like Notepad, WordPad, Microsoft Word, Google Docs, OpenOffice Writer, LibreOffice Writer etc.

Note Note: See more about Data feeds in general.

Text file example

Video tutorial

Text widgets

Under the "Text" folder of Elementi 2015 Library, you can find three ready-to-use widgets that automatically display data extracted from a text file data source:

Text file widgets
  • Text Bar
    Displays text content using a fixed number of lines and applying a bottom-to-top & line-by-line scrolling effect whenever the entire text doesn't fit into the widget area.
  • Text Ticker
    Displays text content using a continuous horizontal scrolling effect. The font size is adjusted automatically for the text to fit into the widget area.
  • Text Roll
    Displays text content using a continuous vertical scrolling effect. The font size is adjusted automatically for the selected number of lines to fit into the predefined area.

See also:

Configuration

Each of the widgets above can be customized using the options provided under "Properties" tab - for more details go to the dedicated page of each widget type, linked above.

To edit the properties related to the data source, click on the Data Feed Properties button. This opens the Data Feed Properties dialog, which allows changing the URI from where the data are retrieved, the refresh rate, and the optional limit of items.

Note Note: At any point, the data source configuration can be tested by clicking on the "Test..." button.

Advanced configuration

Note  
This section applies only for Elementi X users.

For Elementi X users, the "Data Feed Properties" dialog offers advanced options for more complex data processing.

RegExp text parser

The built-in text parser uses regular expressions (RegExp) to parse the text file content into rows and columns of data - the default behavior is to put each line of the input text file into a new row having a single column called "title".

When configuring the data source property of any of the text file widgets above, a "RegExp Parser" tab is displayed within the "Data Feed Properties" dialog, which allows configuring the following properties:

"RegExp Parser" tab of "Data Feed Properties" dialog in Elementi 2015 X
  • Split
    Enable this to be able to enter a string or a regular expression as separator for splitting the input text into rows. The separator itself is not included in the output data.
    Default value (when enabled): [\r\n]+
    This is a regular expression that splits the original text using the end-of-line characters, thus each line from the text file becomes a row in the results set.
    Examples:
    • Use "\s+" to split the text input after every space character (e.g. every word is put on a new row).
    • Use ";" to split the text input into rows after each semicolon character.
  • Match
    Enter a regular expression to be used to generate the output data; the matched text is added into the output data, while the rest is discarded.
    Default value: (.*)
    This is a regular expression that will map each input line to a new row (because in JavaScript, ".*" matches all the characters except the new-line (\n) character).
    Examples:
    • Use ".{10}" to have each match of 10 characters (excepting the new-line character) assigned to a row of data.
    • Use "[\s\S]{50}" to have each match of 50 characters (including the new-line character) assigned to a row of data.
  • Specify output
    Allows to create different output columns based on the match groups (i.e. round brackets pairs) used within the regular expression (entered under "Match" option).
    When enabled, you can specify inside the mapping table the following:
    • Name -> enter the name of the new column; (this name will be used as data placeholder, i.e. [[column_name]])
    • Match # -> enter the index of the numbered capturing group starting from 1. (index 0 refers to the entire match)

Notes:

  • The RegExp engine tries to use the match expression multiple times and, in case of success, each match creates a new row of data.
  • If the regular expression is empty, then the entire content is put on a single row of output data.
  • If the regular expression contains match groups (i.e. round brackets pairs), then each match group can be assigned to a new column under the "Specify output" option.
  • If the "Specify output" option is not enabled, then the results are put in a single column named "title".
  • Character encoding is inferred from the mime type string returned by the web server, or from the byte order mark if there is one at the beginning of the file. The default encoding, and most recommended for proper formatting of the output data, is UTF-8.


For more details about this parser, see $.parseTXT(), RegExp.exec(), and String.split() functions.

Customization example

Let's say that we would like customize a text file widget so that the first word of each line is displayed using a different styling (e.g., color, font etc.). That means that we need to split the input text into lines (rows) and to use a matching expression that separates the first word from the rest. For that, follow these steps:

Custom RegExp configuration
  1. Open the "Data Feed Properties" dialog and click on the "RegExp Parser" tab.
  2. Enable the "Spit" option (leave the default value).
  3. Change the "Match" expression to "(\S*)\s(.*)". You can also use "(\w*)\W(.*)".
  4. Enable the "Specify output" option.
  5. Add three entries to the table:
    • "sentence" (as match #0, containing the entire line),
    • "first_word" (as match #1, containing the first word),
    • "next_words" (as match #2, containing the rest of the words).
  6. Click on the "OK" button to save the changes.
  7. Next modify the "Text template" property of the widget to incorporate the data placeholders specified above:
    1. Click on the "Edit Text" button (it opens the "Edit Text" dialog) to edit the text template.
    2. Change the text content to something like this:
      [[first_word]] [[next_words]]
    3. Select only "[[first_word]]" and change its font style to bold and its color to blue.
    4. Click on the "OK" button to apply the changes.
  8. Click on the "Save" button on the toolbar.
This page was last modified on 6 September 2016, at 16:09.