Why Controls.js?

Controls.js is a original JavaScript framework for a rapid desktop-like development of web and cross-platform apps. Controls.js minimizes HTML and CSS usage, which helps to give focus to a single technology: JavaScript.

GUI defined in JavaScript

Edit1: {
  Type: 'weEdit',
  L: 20, T: 20, W: 200,
  Data: {
    Text: 'Hello, world!'
  }
}

WYSIWYG Form Editor

Features

CROSS-BROWSER // Compatibility with variety of browsers: IE6+, FF2+, Opera 9.26+, Chrome, Safari….
COMPONENT BASED // Build application using more than 100 visual and non-visual controls.

MOBILE APPLICATIONS // Same code runs on all mobile platforms, optimized for Apache Cordova and HTML/Java applications.
LOCALIZATION // Translate application into multiple languages. Adjust GUI according to the languages.

TOOLS // Use the Form Editor and other tools to speed up the development process.

JAVA INTEGRATION // Easy creation of user interfaces in HTML/Java applications. See Java Integration.

COMPACT // Full-featured product which contains everything you need in one package.
MODULAR // Create new controls based on existing ones or create new ones from scratch.
MULTI-DEVICE // Design GUI for different devices. Supports device auto detection.
SKINS // Customize visual styles of controls or use pre-defined skins. Utilize Skin Editor.
SMART LOADER // Asynchronous application loader detects device type and loads only relevant parts of application for this device

TOUCH SUPPORT // Supports gestures, unifies touch and mouse events.
MODEL-VIEW-VIEW MODEL // Supported by MVVM design pattern which lets you separate GUI from business logic. Take advantage of live bindings, computed and typed properties.
INPUT VALIDATION // Customizable ViewModel's typed properties handles parsing, formatting and validation.
STATE HANDLING // Easy setting of URL hash parameters and instant notifications when parameters are changed.

Benefits

Click on an icon below to find out what benefits you get if you are a...

Live Examples

Select example:
var AppForm = null;

function ngMain()
{
  AppForm = new ngControls({

    Edit1: 
    {
      Type: 'weEdit',
      L: 20, T: 20, W: 200,
      Data: {
        Text: 'Hello, world!'
      }
    }

  });
  AppForm.Update();
}
Tip: Here, you can edit and run modified example. Check out docs to explore what else Controls.js can do.