Widgets are self-contained user interface elements. In TACTIC, they combine HTML layout and CSS styling with server-side Python processing, client side Javascript behaviors, all encapsulated in a single entity called a widget.
Widgets are a fundamental building block to interfaces in TACTIC. Even the base HTML tags have been mapped to TACTIC Widgets, however, most users will create and combine higher level widgets using pure python classes or, more commonly, they can be created using the TACTIC Custom Layout Editor.
The custom layout editor enables the creation of widgets directly within the TACTIC interface. Very complex enterprise applications can be created using solely this editor without needing to resort to Python class (however, that is always an option, if desired)
There are 5 main components to a TACTIC Widget:
- Keyword Arguments
- HTML
- Styles
- Behaviors
- Python
Each of these components make up the definition of single widget. They are form a single interface element. The simplest widget is a pure html element.
<div>Hello</div>
In order to style this element, CSS can be attached to this element. Because this is HTML, you can add CSS styles directly on the element itself:
<div style=”color: #F00”>Hello</div>
A better method is to separate out the styling of the widget from the structure. Although, an “id” could be used to relate CSS to this element, it is generally not recommended. This is because “id” must be unique throughout the entire document. With widgets as reusable elements that can appear many times in a single interface, it is better to identify an element using “class”.
<div class=”element1”>
And in the styles tab of the Custom Layout Editor, you would add:
.element1 {
color: #F00;
}
TACTIC Widgets also bind server side processing into the widget. The python component has a predefined kwargs variable that contains input arguments to the widget. Thus in the python tab, you could write:
color = kwargs.get(“color”)
And you could use this variable in both the HTML tab and the styles tab. For example:
.example1 {
color: ${color};
}
This becomes a configurable widget that can be embedded into another widget using the HTML as follows:
<div>
<h1>Reference to another widget</h1>
<element view=”content1” color=”#0B0”/>
</div>
The would embed the word “Hello” with blue text into this widget.
Finally, you can access the kwargs variable in javascript in the behaviors tab from the implicit bvr variable:
<behavior class=”.element1” event=”click”>
var color = bvr.kwargs.color;
alert(color)
</behavior>
Using these together, you can build up more complex reusable widgets.
There are a number of significant advantages of using TACTIC for content delivery, despite the many web platforms out there and many that do a good job of delivering web content. For those more comfortable with these other platforms, there is a TACTIC javascript standalone API which can be imported into any web framework.
TACTIC widgets have a very strong encapsulation between the client side code and the server side code. Data structures are seamless transferred and shared between the two. TACTIC widgets can be loaded asynchronously and do not rely on full page refresh to load content. This makes TACTIC apps feel smoother because they only update parts of the interface that need updating. TACTIC also has many built-in widgets that do common widgets that together provide a wide range of tools to handle many enterprise requirements, especially when creating data driven workflow solutions.
