• Introduction
• Single Interface - Multiple Implementation
• Spacer Structure

Introduction

---

Spacer makes input field validation is very easy though comprehensive validation patterns and rules. In the other hand, Spacer helps you write much less code to achieve your tasks through helpful APIs that deal with different aspect of your web application.

Please refers to Spacer Structure for more details.

Single Interface - Multiple Implementation

---

Spacer use this principle for several reasons:

• Separate User Interface output from the core functionality
  For example, validation process is separated from how the errors messages are shown to user.

• Make Spacer extendable by implementing custom drivers
  You can easily implement your own validation driver to show errors in desired way. Or you can implement your own dialog driver to show dialogs in different way.

To explain this principle, let's talk about dialogs:

You can show message like so: spa.dialog.message(title, msg, status, icon) (which is a single interface). But how the message will appear depends on which current dialog driver selected in Spacer options.

Spacer offers multiple dialog drivers:

• alert driver uses browser native dialogs
• bootstrap3 driver show dialogs as bootstrap 3 dialogs
• sweetAlert driver show SweetAlert dialogs

This means that every driver has its own implementation to show dialogs. Let's take this example:

spa.dialog.message('Message Title', 'Message content goes here', 'success', 'success');

We see that a single message can be shown in different ways according to the current dialog driver.

The same thing apply to validation. How the validation error messages are shown to the user depends on which current validation driver selected in Spacer options.

Spacer Structure

---

Spacer has several namespaces which are:

• dialog: Simple dialog API.
• validation: Contains validation functions.
• resource: Resource management tool.
• input: Contains inputs manipulation functions.
• ajax: Contains ajax helper functions.
• form: Contains form submission functions.
• web: Contains functions related to url and redirection.
• table: Contains table manipulation functions.
• array: Contains array helper functions.