MAVERICK™

The JavaScript Framework for Software Engineers

Maverick™ is a cutting-edge framework designed to tackle the challenges of modern web application development. It brings proven software engineering practices into the world of web applications, delivering unparalleled flexibility, ease of use, and developer productivity.

Packed with powerful features like widgets, fields, and built-in state management, Maverick™ empowers developers to build exceptional applications effortlessly. This documentation will be regularly updated to provide a deeper understanding of what Maverick™ offers.

Developer

Safak Oner.

https://www.safakoner.com

Contact

Core Features of Maverick™

Built-in State Management

Maverick™ features integrated state management, eliminating the need for complex or bulky external solutions. This ensures a seamless and efficient development experience.

Fields

Fields are interactive widgets that allow users to provide information, such as text inputs, date pickers, and more.

Layouts

Layouts enable effortless arrangement of widgets and fields, offering powerful tools to enhance form functionality and design.

Libraries (Libs)

Maverick™ Libraries equip you with everything you need to develop robust web applications, from utilities to advanced integrations.

Widgets

Widgets are the interactive elements that engage users, such as buttons, message boxes, notifications, and more.

Signal and Slots (Preview)

Take a look at the example below.

import MLineField   from "@MaverickFields/MLineField/MLineField";
import MLabelWidget from "@MaverickWidgets/MLabelWidget/MLabelWidget";

const line  = new MLineField();
const label = new MLabelWidget();

line.signalTextChanged.connect(label.setText);

We created a line field that allows users to enter text, along with a label widget. Then, we connected the signalTextChanged signal of the line field to the label's setText slot. As a result, whenever the text in the line field changes, the label widget is automatically updated to display the new text.

You might say, "So what? We could achieve the same functionality using events." True. However, this mechanism, known as signal/slots (familiar to C++ developers with Qt experience), offers much more flexibility. For example, you can define and use custom signals.

Here’s an example to demonstrate this concept:

import MSignal from "@MaverickLibs/MSignal/MSignal";
import MWidget from "@MaverickWidget/MWidget/MWidget";

class ReceiverWidget extends MWidget
{
    constructor()
    {
        super();
    }
    
    valueReceived(value)
    {
        console.log(this.signalSender(), value);
    }
}

class SenderWidget extends MWidget
{
    constuctor()
    {
        super();
        this.signalValueChanged = new MSignal(this); 
    }

    _onLoad(data)
    {
        this.signalValueChanged.emit(data);
    }
}

const senderWidget   = new SenderWidget();
const receiverWidget = new ReceiverWidget();

senderWidget.signalValueChanged.connect(receiverWidget.valueReceived);

In the example above, we connect the signalValueChanged signal of the senderWidget to the valueReceived slot of the receiverWidget object. The _onLoad method of the senderWidget receives data from an asynchronous call. Consequently, the data is propagated to the receiverWidget via its valueReceived method, which logs the following output:

SenderWidget {signalSender: ƒ, setSignalSender: ƒ, setDisabled: ƒ,...}, {id:'39274d24-7546-4ac6-a0aa-4e9456d31f87'}

State Management (Preview)

State management in Maverick™ leverages the power of the signal/slot system.

import MDataBlock from "@MaverickLibs/MDataBlock/MDataBlock";

function displayCustomerDetail(key, data)
{
    console.log(key, data);
}

const dataBlock = MDataBlock.getInstance();

// Add a watcher for the key
dataBlock.addWatcher('customerDetail', displayCustomerDetail);

// Fetch data for the key by passing parameters when needed
dataBlock.fetchData('customerDetail', {id:'f7dda856-5920-4cca-8dcd-e42cb5fb1867'})

When the application receives data from the asynchronous call, the displayCustomerDetail method will be invoked, as it has been added as a watcher.

We can also update the data in the following way:

dataBlock.setData('customerDetail', {'id':'27ee07e9-88c8-4d83-a58d-291fa7c66c0a', name:'Alias|Wavefront'})

This will notify all the watchers, including displayCustomerDetail.

Fields

module:MAccountNumberLineField

module:MAddressLineField

module:MBusinessNameLineField

module:MCheckBoxField

module:MCityLineField

module:MColorPickerField

module:MComboBoxField

module:MCountryLineField

module:MDateField

module:MDateFormatField

module:MEmailField

module:MFaxNumberField

module:MField

module:MFields

module:MImageSelectField

module:MIntegerField

module:MLineField

module:MListField

module:MListItemField

module:MMobilePhoneNumberField

module:MMoneyField

module:MNameField

module:MPaginationObjectCountField

module:MPaginationField

module:MPasswordField

module:MPercentageField

module:MPhoneNumberField

module:MPostalCodeLineField

module:MRadioButtonField

module:MSearchField

module:MStateLineField

module:MTextField

module:MTollFreePhoneNumberField

module:MURLField

Libraries

module:MApplication

module:MDecimal

module:MEnum

module:MFormatter

module:MMoneyFormatter

module:MPaginationFormatter

module:MPaginationObjectCountFormatter

module:MURLFormatter

module:MHashRouter

module:MHTMLDataElement

module:MHTMLDataElementExceptions

module:MValidatorExceptions

module:MValidators

module:MEmailValidator

module:MMinimumOneCharacterValidator

module:MNameValidator

module:MPasswordValidator

module:MURLValidator

Widgets

module:MFontAwesomeIconWidget

module:MFrameLayoutWidget

module:MImagePlaceholderWidget

module:MImagePlaceholderWidgetEnums

module:MImageWidget

module:MLabelWidget

module:MLinearProgressBarWidget

module:MMessageBoxWidget

module:MMessageBoxEnums

module:MModalDialogWidget

module:MNotificationManager

module:MNotificationWidget

module:MNotificationWidgetEnums

module:MNotificationWidgetUtilities

module:MRoleLabelWidget

module:MRoleLabelWidgetEnums

module:MRoleLabelWidgetUtilities

module:MRolePushButtonWidget

module:MRolePushButtonWidgetEnums

module:MRolePushButtonWidgetUtilities

module:MPushButtonWidget

module:MSeparationLineWidget

module:MTopBarWidget

module:MToolButtonWidget

module:MToolButtonWidgetEnums

module:MToolButtonWidgetUtilities

module:MUserAvatarWidget

module:MWidget

module:MWidgetEnums

module:MWidgetExceptions

module:MWidgetUtilities