Components. ItsNat: Feature Set & Examples

Feature Showcase : Feature Set & Examples

Use joystick mode

ItsNat p
- Feature Showcase Overview p
- Core p
  - Core Examples in Manual p
    - HTML Example in Manual p
    - XML Example in Manual p
  - Listeners p
    - DOM Event Listeners p
    - Communication Modes p
    - Mutation Event Listeners p
    - Auto Sync Server From Client p
    - Continue Event Listeners p
    - User Defined Event Listeners p
    - AJAX (or SCRIPT) Timers p
    - Asynchronous Task p
    - Comet Notifier p
    - Event Timeout p
    - Event Listener Chain Control p
  - DOM Utils p
    - Free Element Lists p
    - Free Element Tables p
    - DOM Renderers p
    - Pattern Based Element Labels p
    - Pattern Based Element Lists p
    - Pattern Based Element Tables p
    - Pattern Based Element Trees p
    - Variable Resolver p
    - W3C's ElementCSSInlineStyle p
    - String to DOM p
    - Markup Fragments p
  - Other Namespaces p
    - SVG in XHTML and XHTML MIME p
    - SVG in XHTML and HTML MIME p
    - SVG in XHTML, HTML MIME and ASV p
    - SVG in XHTML, HTML MIME and SVGWeb p
    - Pure SVG p
    - Pure XUL p
    - XML Generation p
  - IFr/Obj/Emb/Applet Auto-Binding p
    - HTML IFrame Example p
    - SVG IFr/Obj/Emb Example p
    - SVG Obj/Emb Ssrc Example p
    - SVG App/Obj/Emb Batik Example p
  - JavaScript Utils p
    - Java to JavaScript Generation p
    - Event Monitor p
  - Server-sent Events p
    - Using The Browser p
    - Not Using The Browser p
  - Referrers p
    - Referrer Pull & Fwd/Back Buttons p
    - Referrer Push & Fwd/Back Button p
  - Degraded Modes p
    - Disabled Events p
    - Disabled JavaScript p
  - Extreme Mashups p
    - Extreme Mashup HTML Mime p
    - Extreme Mashup XHTML Mime p
  - Misc. Features p
    - Bookmarking with AJAX p
    - Pretty URLs p
    - Remote View/Control p
    - Remote Templates p
- Components p
  - Component Based Example in Manual p
  - Buttons p
    - Normal p
      - HTML Buttons p
      - Input Submit with Form p
      - Free Button p
      - Mouse Up/Down/Over/Out p
    - Toggle p
      - Input Check Box p
      - Input Radio p
      - Free Check Box p
      - Free Radio Button p
  - Text p
    - Text Fields p
      - Input Text Based p
      - Input Hidden p
      - Input Text Formatted p
      - Input Text Formatted with Factory p
      - Key Up/Down p
    - Text Area p
  - Labels p
    - Label p
    - Free Label p
    - Custom Editor p
    - Custom Renderer p
  - Lists p
    - Select Combo Box p
    - Select List p
    - Free Combo Box p
    - Free List p
    - Free List Custom Structure p
    - Free List Compound p
    - Free List SVG Embedded p
    - Free List Pure SVG and XHTML p
  - Tables p
    - Table p
    - Free Table p
    - Table using Row Span p
    - Free Table SVG Embedded p
  - Trees p
    - Tree using <ul> p
    - Tree using <table> p
    - Tree Rootless p
    - Tree-Table p
    - Tree-Table without <table> p
  - Modal Layers p
    - HTML Modal Layers p
    - SVG Modal Layers p
    - XUL Modal Layers p
  - Other Components p
    - Form p
    - File Upload p
    - Free Include p
    - Custom Components p
  - Auto. Component Build p
    - Auto. Comp. Build: All Types p
    - Markup Driven Forms p
      - Check Box p
      - Radio Buttons p
      - Input Text p
      - Text Area p
      - Combo Box p
      - Select Multiple p
  - Server-Driven Func. Testing p
    - Func. Testing Using Browser p
    - Func. Testing Not Using Browser p
  - Degraded Modes & Components p
    - Disabled Events & Components p
    - Disabled JavaScript & Components p
  - XML & Components p
  - PIE/Moto/UCWEB Examples p
    - PIE/Moto/UCWEB Free Combo Box p
    - PIE/Moto/UCWEB Free List p
    - PIE/Moto/UCWEB Table p
    - PIE/Moto/UCWEB Tree p

Components

Example P
Source Code P
Explanation P

ItsNat core is enough to build event based web applications, but if we talk about events we are nearer to the desktop paradigm, then a component system fits perfectly well in this scenario, furthermore a component system without events is interesting though is a strange artifact (consequence of the old and poor web paradigm).

ItsNat component system:

Is fully based on events (AJAX or SCRIPT)
Many components are namespace and tag agnostic, every DOM element group can be a component including events (for instance a list of SVG circles).
Reuses Swing as far as possible including data models, selection models and related listeners, in fact the architecture is similar to Swing MVC, but is not forced, ItsNat components are not a web clone of Swing and are not "pixel based".
Pattern based: the markup is not imposed by the component, ItsNat components leverages the pattern based DOM utilities (ElementList etc) as components (with events, data models and selection models).
Extensible: components offer many extension points as model listeners, selection listeners, renderers and structures.
Building user defined components amazingly easy, for instance custom components build as compound components.

All ItsNat components implement the ItsNatComponent and implementations provided by ItsNat are obtained with specific ItsNatComponentManager.createX and ItsNatHTMLComponentManager.createX methods.

Components uses internal DOM event/listeners to do the expected task, the user can add listeners to be notified when a DOM event is received by the component registering them with the method ItsNatComponent.addEventListener. This notification is complementary to the usual Swing based listener system of models.

When a component is no longer be used is recommended to call the method ItsNatComponent.dispose() to remove listener disconnect listeners of data and selection models etc. A disposed component can not be reused.

There are several ways to create components such as:

ItsNatComponentManager.createItsNatComponent or ItsNatComponentManager.createItsNatComponentById methods: the concrete component is obtained as the most appropriated component to specified node specified or using the optional compType component type (free components). The artifacts may be used to specify initial objects like custom structures.
Concrete factory methods as ItsNatHTMLComponentManager.createItsNatHTMLCompName methods.
Using the automatic build from the markup calling ItsNatComponentManager.buildItsNatComponents(Node), the necessary data must be in the markup.