Wednesday, 28 September 2016

What is a TACTIC Widget?



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:

  1. Keyword Arguments
  2. HTML
  3. Styles
  4. Behaviors
  5. 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.




2 comments:

  1. Thanks for giving me your time to share this article here about widget in Your article is very attractive and I am affected by the details that you have shared in this post. oracle fusion manufacturing certification in hyderabad

    ReplyDelete
  2. I was very happy to find this site. I really enjoyed reading this article today and think it might be one of the best articles I have read so far. I wanted to thank you for this excellent reading !! I really enjoy every part and have bookmarked you to see the new things you post. Well done for this excellent article. Please keep this work of the same quality.
    Data Science Course in Bangalore

    ReplyDelete