Features and Benefits

In Controls.js, GUI definition is defined by structured JavaScript objects. This GUI definition is extremely useful as it brings the possibility to use the same language for both source code writing and GUI definition – JavaScript. It also supports inheritance as well as quick and easy dynamic GUI generation.

Learn more

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

Manual GUI coding is lengthy and boring. Seeing the GUI at once is surely much better than fixing it one hundred times. Controls.js Form Editor understands the source code of the application. Open the application source code in Form Editor and design what you need in a visual form. Or else, have a UX specialist or a graphic designer do it for you.

Try Form Editor

It is not good to compose the GUI from primitive elements. Forget about HTML. What you really need are suitable structural elements – the components, especially if these components are easy to create.
If a part of the application is repeated all over again, the ideal solution is to make it a component. Quick and easy.

You surely don't have time to create the basic components yourself. As a part of Controls.js, Controls UI is designed to define a set of components (>100) for desktop-like application development (buttons, edit boxes, etc.). These components are created in such a way that the user is not aware he is using a web technology. The components also support touch control; they run in all the browsers and on all the platforms.

It is, however, not necessary to use Controls UI components while using Controls.js. You can use components of a third party or create your own ones while developing your application.

Do you still have to tackle browser compatibility issues? You don't have to. Controls.js works in all the browsers with no problem. Controls UI was designed to support as wide a variety of browsers as possible. This is especially important for enterprise customers who very often do not or cannot use the latest browser version available.

Compatible browsers:
IE6+, FF2+, Opera 9.26+, Chrome, Safari….

Model-View-ViewModel (MVVM) is a design model in which the GUI is separated from the business logics of the application. They communicate by way of the so-called ViewModel. Even though this method provides a number of advantages, it may not suit everyone. That's the reason why Controls.js supports both the MVVM architecture as well as common event-driven architecture.

Controls.js uses the Knockout.js technology as the basis for MVVM, expanding it in a significant way.

Requirements on specific data type are very frequently encountered in application development – in databases, at the backend, in web service parameters etc. It is for this reason that Controls.js provides functions for basic data conversion, testing, and data validation.

ViewModels support working with properties, defined by way of ngFieldDef class, that format, parse, and validate data values automatically. Once ViewModel and the GUI are connected, the validation errors may by visualized in the GUI.

There are a number of components available in Controls.js that you can use while working with databases (and other systems). They were designed especially for this purpose.

Use DB ViewModel with CRUD operations and primary key support for the representation of a database record.

Different screen size, as well as other properties of individual devices, can have an effect on the behaviour of your application. It is entirely up to you to set the rules for the values (or value range) of the device properties.

Then, Controls.js will "tell" your application whether the device you are using meets the rules you defined and which of these rules are met. Controls.js will also notify the application, if any rule gets changed while the application is running (by turning the phone for instance).

Just one source code to generate native applications for various mobile platforms. This is exactly what you get when using Controls.js combined with Apache Cordova technology.

Thanks to Controls UI components, the users of your application will not even know that it is a web technology they are using.

Localization is not just about text translation. It is a complex process of adapting the application for different languages and environments. Controls.js has the means to support the whole process.

Text definition for different languages and theirs variants is the very basics in Controls.js. Dynamic language change is perfectly possible without the need to restart the application. You can even define local GUI modifications depending on the language used.

Many people will appreciate an application that remembers the settings or/and the state it was in when previously used. In common desktop applications, this is solved by way of saving the settings into separate files for instance (xml, ini, ...).

In Controls.js, you can use the so-called Settings to do that. Different ways to save them are available (LocalStorage, cookies, ...) all of which are perfectly transparent for the application.

Settings: {
  LastPage: 'summary',
  PageSize: 478,
  ShowWizard: true
}

Information about the state of the application may be part of the application's URL in the form of the so-called Client Parameters (everything that follows # in the URL). That gives you the advantage to easily open the application in the required state just by using the URL. The browser buttons also reflect the changes in the URL. In this way, the user of the application can easily return to the previous state of the application just by clicking the back button.

Controls.js also includes functions for working with client parameters, which are not w3c standard, and notifies the application if any changes are made to them.

Skin is a set of components that adopt the same visual style. In Controls.js, there are ready to use Controls UI skin components available. If none of the existing components satisfies you or if your customer requires a specific visual style, you can create your own skin based on the Controls UI components.

Have a look at Controls.js skins for mobile and desktop applications.

Controls.js Form Editor can work with the components that you create. The properties of these components are described by the so-called DesignInfo so as to make their type and editation method known.

Both the types and properties editors can be extended via API of Controls.js Form Editor.

If you load the application by using Controls.js Loader, it brings you several features you will surely appreciate. Loader can load the individual parts of the application asynchronously (that is to say faster) while making sure the JavaScript code is processed in an exactly defined sequence. It can also display the progress of the loading or load different files depending on the characteristics of the device used.

Are you a Java developer? Try a technology that enables you to develop GUI application in Controls.js Form Editor and to connect it to the business logics written in Java. Not only will it work in desktop, it will also work on mobile devices (Android, iOS) as a native application or directly in a web browser (no applets needed).

Learn more

Integration of Controls.js with NetBeans IDE is also available. Controls.js Plugins integrate Form Editor directly with NetBeans IDE. The Wizard will help you create your new projects.

Learn how to create a new project in NetBeans IDE

Controls.js is packed with functionality that is constantly developed and improved. It was not possible to cover everything in the features listed above.

By way of example, Controls.js also includes object copying and object merging support, text and time data formatting, encoding, debug logs and asserts, DOM elements measuring, and many more.