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.

Basic widgets

Escenic Widget Framework contains the following widgets for general use:

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)

New widgets (and extensions of existing widgets) are developed continually. As of May 2010 there are more than 40 widgets for general website functionality.

Community widgets

Communities based on Escenic Community Engine can be built with widgets that provide functionality for creating social networking website. As of May 2010 Escenic's community widgets include:

Blog Action
Blog Archive Actions
Blogpost Content
Blog Content Actions
Blog Navigation
Blog List
Profile
Profile Actions
Profile Menu
Comments
Favorites List
Rating
User Activity

Mobile widgets

Mobile websites are managed in the same way as full websites, and there are several widgets created especially for mobile-adaptes websites. Device detection and adaption is handle automatically, for instance for iPhone and iPad. As of May 2010 Escenic's mobile widgets include:

Mobile Ad
Mobile Articleshow
Mobile Logo
Mobile Menu
Mobile Popular List
Mobile Router
Mobile Slideshow
Mobile Stories
Mobile Story Content
Mobile Ticker
Mobile Twitter
Mobile Video

See also Mobiletech announces iPad and tablet support for a demo video showing some of the features of the mobile widgets above.

Sample websites

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.