New improvements in jComponent v18

I have added a lot of nice features and improvements to jComponent v18.

• New documentation
• Join Componentator Telegram
• Follow us on Twitter
• More than +230 UI components
• Commercial support

https://www.youtube.com/watch?v=Gc2tStqKtBA

New documentation

We have prepared a new documentation site for jComponent library. The new documentation is much cleaner, and finally, you can search for methods or properties.

• Documentation

Flags

Flags are a convenient feature because flags can be defined in SET(), GET() etc.. and EXEC(), SETTER() methods directly. We have divided flags into two categories, internal and custom:

Internal flags

Internal flags are preddefined flags which perform some special tasks. Can be part of SET(), GET(), UPD(), EXTEND(), INC() or PUSH() methods.

// SET:
SET('userform @default', {});

// GET:
var model = GET('userform @reset @clone');

What flags are supported? List of supported flags is defined in the documentation for each supported method.

Custom flags

Custom flags can be called everywhere like e.g. SET() or EXEC() or SETTER(). Custom flags execute only events in the form:

Capturing of flags:

ON('@flag showloading', function() {
    SETTER('loading/show');
});

ON('@flag hideloading', function() {
    SETTER('loading/hide', 1000);
});

Usage:

// In AJAX
AJAX('GET /api/products @showloading', '?.items @hideloading');

// Or
EXEC('products/refresh @showloading');

// Or
SET('common.form @showloading', 'accountform');

New methods ASETTER(), AEXEC() AND ACMD()

These new methods simplify development. Char A means asynchronous processing of the method.

• ACMD() documentation
• AEXEC() documentation
• ASETTER() documentation

Quick example:

setTimeout(AEXEC('products/refresh'), 1000);

Big advantages with ASETTER():

Some UI components like j-Message, j-SnackBar, j-NofifyBar supports method name response, the below example describes more:

Example 1:

// Errors will be handled automatically by "message" component
AJAX('POST /api/products', ASETTER('message/response', 'Product has been saved successfully'));

Example 2:

AJAX('POST /api/products', ASETTER('snackbar/response', function(response) {
    // error are handled automatically by "snackbar"
    // this callback will be executed when the response won't contain any ERROR
}));

Example 3:

// Errors will be handled automatically by "notifybar" component
AJAX('POST /api/products', ASETTER('notifybar/response', 'Product has been saved successfully', AEXEC('products/refresh')));

Anonymous plugins

Anonymous plugins contain very great implementation for anonymous scopes, and this is one of the best features in jComponent v18. Look at the example below, which describes more:

<!-- You can use this element unlimited count and each scope will be independent -->
<div data-scope="? contactform__init:?/init">

    <div data---="textbox__?.name">Name</div>
    <!-- path will be e.g.: xsngbvdllnidnaownly.name -->

    <div data---="validation__?">
        <button name="submit" class="exec" data-exec="?/submit" disabled>SUBMIT</button>
    </div>

</div>

<script>

    // Each anonymous scope with "? contactform" will have its own instance of the plugin

    PLUGIN('? contactform', function(exports) {

        // exports.scope;
        // Contains scope instance

        exports.init = function() {
            // Scope is initialized
        };

        exports.submit = function() {
            var model = GET('? @reset');
            // do something
        };

    });

</script>

Anonymous plugins are a famous way how to handle the same dynamic and independent parts.

Pluginables

Pluginables are Plugins that aren't processed when they are declared (unlike default Plugin). Plugins must execute them via the EXEC() method. Pluginables can be very helpful in some types of SPA.

Definition:

PLUGINABLE('orderform', function(exports) {

    exports.create = function(somedata) {
        SET('? @reset', somedata);
        SET('common.form', 'orderform');
    };

}, function(next) {

    // Async initialization
    // Here you can do some tasks
    // next() must be called
    setTimeout(next, 1000);

});

Usage:

EXEC('orderform/create', somedata);

Improved scopes

We have improved a bit scopes, and this change affects some UI components like j-Form, j-LargeForm, j-Window or j-MiniForm. The example says more:

Old decleration:

<div data---="form__common.form__if:channel;reload:channelform/reload;...">
    <div data-scope="channelform">

New decleration:

<div data---="form__common.form__if:channel;reload:?/reload;..." data-scope="channelform">
    <div>

API() method

This method offers a new way of how to send data to the Total.js 4 application. API is a new REST endpoint declared in Total.js framework v4. The endpoint brings more clarity on the client and server-side, stability, and client <> server encryption. Method has same functionality like AJAX() method.

• API documentation
• DEF.api documentation
• DAPI documentation

Usage:

API('/apiv1/ users', 'users.items');

Usage with preddefined API:

// Must be declared in some "index" file
DEF.api = '/apiv1/';

// D-API means Default API
// Calling of API:
DAPI('users', 'users.items');

Encryption

With Total.js 4 is possible to encrypt/decrypt communication between client-side and server-side. The secret must be defined same and on both sides.

• all requests created via AJAX() or API() will be encrypted with except file upload
• all responses will be decrypted with except static files

DEF.secret('YOUR-KEY');
// After is "secret" defined then the method will be "undefined"
// "secret" value is hidden

• DEF.secret() documentation

New commands for data-bind

We have added new commands which simplify work with this incredible part of the jComponent library.

helper command

helper command can transform value through the Tangular helper. value is automatically bound always as the first argument.

Thelpers.uppercase = function(value) {
    return value ? value.toUpperCase() : '';
};

<div data-bind="?.name__helper:uppercase"></div>

<!-- OR -->

<div data-bind="?.beers__html__helper:pluralize('# beers', '# beer', '# beers', '# beers')"></div>

set command

This command can set a value to a component and vice versa. Primarily it's targeted for vbindarray.

Added two CSS variables

I have added new CSS variables to spa.min@18.css and spa.min@17.css:

• var(--color) contains a blue color #4285F4
• var(--radius) contains a default border radius 3px

These variables use UI components. We added a new method called APPEARANCE() which can help you to change appearance in JS:

• APPEARANCE()

Example:

APPEARANCE({ darkmode: true, color: 'red', radius: '10px' });

Improved custom scrollbars

Shadows

I have improved custom scrollbars by adding shadow option to config SCROLLBAR(.., { shadow: true }), which enables slick shadows. You can test it with the help of the j-ViewBox component. Shadows are disabled for all mobile devices because they used native scrollbars.

Added rgba color to scrollbars

Now the scrollbars look much better on various backgrounds.

One more thing ...

I have added a small handy feature. Look to example:

<div data---="datagrid__some.path__$assign:MyDataGrid">
    ...
    ...
    ...
</div>

<script>
    ON('ready', function() {
        // "MyDataGrid" variable will contain datagrid instance
        console.log(MyDataGrid);
    });
</script>

New UI components

We add some new components each month, and now the componentator contains 231 UI components. This is a great message for everyone because Componentator is maybe only the one website that has so many free UI components.

• Download UI components
• Join Componentator Telegram
• Follow us on Twitter

What's next?

I have prepared a great UI designer with a lot of features. We will inform you soon about it.