Delite Documentation
Overview and in-depth user guide as well as full API documentation
Delite provides a widget infrastructure that fits future standards but is possible to use on all modern browsers without performance concerns.
Specifically, it's based on the following concepts:
Custom elements: The node is the widget and the widget is the node. By using Custom Elements, the constructor for all widgets is based off of the
HTMLElement
DOM object. This has several advantages, in that as you manipulate the DOM nodes, you are also dealing with the widget instances. This also means there is no widget registry, because the document is effectively the registry. You can use whatever DOM manipulation API you want to move the widget around.Leverage ES5 accessor properties instead of using the discreet accessors. This means there is no
widget.get()
andwidget.set()
. You can affect the widget directly. See thedecor/Stateful
documentation for details.It directly supports reactive templating via the handlebars! plugin, see the handlebars documentation for details
General documentation
- Introduction to delite and custom elements
- Delite internal architecture documentation
- Migration notes for dijit based applications
- Notes on theme generation
- How to load delite modules
- Internationalization and localization
Utility modules
- activationTracker - utility for tracking the stack of "active" widgets; used by popup
- a11y - accessibility utility functions
- a11yclick - allow keyboard "click" (via ENTER or SPACE) on custom DOM nodes
- handlebars! - plugin to compile reactive templates for use in widgets
- place - low level module for placing a popup or dropdown at a certain position
- popup - popup manager
- register - utility module for declaring new custom element types
- Template - code generation library used by handlebars! plugin
- theme! - Plugin loading CSS file based on the current theme
- uacss - utility to set CSS classes on document root based on the current browser
- Viewport - utility to notify the application when the viewport size is changed, and also to get the effective viewport size on mobile devices when the virtual keyboard is displayed
Base classes
- Container - base class for widgets that contain a set of element children, such as a Toolbar or List widget
- CustomElement - base class for non-visual widgets, and also the base class for Widget itself
- DisplayContainer - Container subclass which adds the ability for the container to show/hide its children
- FormValueWidget - base class for form widgets where the user specifies a value, for example slider and textbox
- FormWidget - base class for FormValueWidget and also for form widgets where the user doesn't specify a value, for example buttons and checkboxes
- HasDropDown - base class for widgets that have a drop down, such as a ComboBox
- KeyNav - base class for widgets with keyboard navigation using arrow keys and also searching by typing alphabetic keys; for example, tree and grid widgets
- Scrollable - Widget subclass which adds scrolling capabilities
based on the
overflow: auto
CSS property. - Selection - Widget subclass which adds the ability for the widget to manage the selection state of its internal items.
- Store - mixin to query a store object from the dstore project and create render items for this widget based on the store items.
- StoreMap - extension of Store that performs some automatic mapping between the properties on the store items and the properties on the render items
- Widget - base class for visual widgets