Escenic Widget Framework

Escenic Widget Framework is a modular widget framework for efficiently implementing websites on Escenic Content Engine 5.

Escenic Content Engine separates content from presentation, and the JavaServer Pages (JSP) presentation templates may be very different between websites. This approach provides great flexibility, but also means that an implementation project may be quite demanding. The Escenic Widget Framework is Escenic's offer to customers wanting to build a full-featured website without scaling up to a big project.

Escenic Widget Framework is a flexible, modular framework for implementing a full-featured presentation layer utilizing the standard components of Escenic Content Engine 5, providing a high level of configuration and adaption to specific customer requirements.

Escenic Widget Framework is designed to be used with visual requirements, as well as functional. The main grid is based on 12 columns and may be used in numerous ways. The grid complies current advertisement standards, including the IAB Ad Unit Guidelines.

Escenic Widget Framework introduces a new way of working with Escenic Templates, adding a configuration layer to Escenic Content Studio. All configuration is done using widget content types together with groups and configuration sections. This means that what used to be coded into the JSP presentation templates, can now be controlled directly from Escenic Content Studio (depending on user permissions).

What is a widget?

A widget is, in this context, an isolated set of logic and presentation related to content stored in Escenic Content Engine. It is configurable, parameterized and possibly interactive. A widget may be removed or added to websites freely, it can can be developed by external parties, complying to a widget specification. Widgets can be customized by customers by overriding the default rendering and presentation provided by Escenic.

Goals

The main goals for Escenic Widget Framework are:

Provide a ready-scoped website and process
Provide a cost-effective implementation process
Initial delivery provided by Escenic Professional Services, extensible by customers
Introduce best practices and reference code for Escenic Content Engine 5
Predictable scope and cost for implementation projects

Usage

Escenic Widget Framework is designed to be used for:

Getting one or more websites quickly up and running
Providing a starting point for customers that are new to Escenic
Reference point for doing code clean-up of old Escenic implementations
Reference point for upgrades to Escenic Content Engine 5
Proof of concept projects, rapid prototyping

Performance

Escenic Widget Framework is designed with Edge Side Includes (ESI) support built in. The cache controls for each widget is managed in Escenic Content Studio and may be changed at any time. Esceinc Widget Framework and ESI provides excellent cache control for dynamic, personalized websites, and ensures that the server hardware is used as efficiently as possible. For web users, Escenic Widget Framework and ESI means a faster browsing experience.

Widgets

Escenic Widget Framework will contain the following widgets:

Menu widget (includes navigation)
Story widget (multi-puropse widget for advanced display of complex article pages)
Comment widget (includes flat/threaded discussion, pre/post moderation, etc)
Poll widget (includes "question of the day", quiz, etc)
Picture widget (includes comics, "picture of the day")
Carousel widget (displays a number of stories as a slideshow with "filmstrip" navigation, and timer controls)
Slideshow widget (image gallery)
Search widget (uses Escenic Content Engine's standard Apache Solr search)
List widget (includes "latest" lists, etc)
Page tools widget (print, email, share, etc)
Popularity widget (includes "most read", "most commented", etc)
Newsletter widget (multiple newsletters are supported)
Dateline widget (published, last updated, either absolut or relative times)
Tickertape widget (for breaking news headlines)
Trailers widget (traffic drivers, also called "teasers")
Ad widget (includes integration with ad agencies, supports scripting, etc)
Breadcrumb widget (navigation)
Related widget (display related content)
Code widget (render raw XHTML/CSS/JavaScript/etc code)
Contact form
User registration and personalization (user profiles)
Video widget (display video from various sources, including Escenic content and YouTube videos)
Weather widget (display weather, user selects location)
RSS widget (include external RSS content)
Newsletter widget (subscribe to nesletter(s))
Rating widget (allows users to rate content)
Web analytics widget (built-in functionality for Google Analytics)

Additional widgets may be added later, and customers are free to develop custom widgets and extending the standard widgets.

Sample images

The presentation layer of Escenic Widget Framework can easily be adapted and designed according to customer requirements. There are no fixed designs. Escenic Content Studio users with sufficient privileges may easily change the layout, placement, etc with drag and drop functionality. Switching between design is as easy as selecting the design from a list and clicking "Preview" (without changing anything on the website) or "Save" (instantly updating the entire website).

In order to show an example of the flexibility, here are two different presentations of similar content using Escenic Widget Framework (click for larger images).

Football website:

Escenic Times (newspaper website):

Escenic Content Studio screenshots

The following screenshots outline how Escenic Widget Framework is managed in Escenic Content Studio.

Configuration of a section page

This screenshot shows how a section may be built using widgets:

The left area shows a search for widgets, filtered for "Story" widgets. The names of the widgets, and the preset filters may be changed according to customer preferences.

The right area shows the placement of the widgets on a section page. In this example installation, there are four areas: Top, Main, Right and (not shown) Bottom. Users with appropriate permissions may arrange the widgets within the common design grid, with great flexibility.

In this example the "Top" area contains the following widgets:

Dateline: Used for displaying the published date/time, and optionally the last modified date/time
Static header: normally used for displaying the logo and name for the website
Trailers: Trailers/teasers for stories, several different ways for presenting them
Main menu: Normally a two-level horizonal top menu, but with several options
Breadcrumbs: Easy navigation in the site structure
Tickertape: Automatically updated display of story headlines

Each of these widgets have different options for how to appear on the website. It is possible to create pre-configured widgets, for instane for ads of various sizes, either with static images or with JavaScript for automatically displaying ads served from advertizing companies.

Configuration of a single widget

The "Dateline" widget is very simple, and has only a few options for setting the time format, whether to display just the publish date or both the publish and last changed date, whether to display the specific time or "time difference" ("Updated: 3 hours ago", etc).

Widget options may be dropdown lists, checkboxes, text fields, etc. In this example, the "Date format" field allows for very detailed control of how the date is displayed. The "Locale" field allows for localization of the date, in this example US English.

Some widgets have a wide range of options, and may be configured to appear very different. All widgets come with a default setting, and users may change the settings and create new ready-to-use widgets. One example might be to create today's header/banner promotion.