Getting Started

Basic Concepts

Understanding how data-binding works and concepts such as Store and JSX syntax will make it easier to understand CxJS. Start by thinking of spreadsheets.

While holding the application state, the Store offers different methods of accessing and modifying the data. The Store is at your disposal for all widgets where the user can access data directly using bindings, and/or the user can calculate required values using different expressions (formulas).

CxJS uses JSX syntax, introduced by React, which enables structures similar to HTML/XML inside JavaScript. CxJS has custom data binding instructions that specify how widgets connect to the underlying data store. You can access data from the Store using references (bindings) like you would on a spreadsheet. Spreadsheet cell references have a predefined format such as A1 or B2, but with CxJS you choose the names that custom fit you. Nested data can be accessed using the . operator, for example person.name. Widget properties can be connected (bound) to values from the Store and are automatically updated whenever the referenced data changes.

Check out the following example:

<div>
    <Checkbox value-bind="enabled">Enable</Checkbox>
    <br/>
    <TextField value-bind="text" disabled-expr="!{enabled}"/>
</div>

Looking at the source code, you will see an example of how CxJS works. The user will be able to freely combine widgets with plain HTML and use special attributes to connect the data. Data changes are applied automatically, so it saves you the hassle of writing code required for updating the page.

Click the links below to learn more:

• Store
• JSX
• Data Binding
• NPM Packages

Widgets

CxJS offers an extensive library of widgets. Get familiar with the widgets most commonly used:

• TextField
• NumberField
• DateField
• LookupField
• List
• Grid
• Menu
• Tabs

Advanced Concepts

In order to put all the pieces together, get familiar with the concepts listed below:

• Controllers
• Repeater
• Rescope
• Sandbox
• Data Proxy
• Layouts
• Selection
• Formatting
• Validation Groups
• Router
• Charts

CxJS Fiddle

CxJS Fiddle allows you to experiment with CxJS directly in the browser, without setting up a new project. Below are some examples to test out. You can also create, save, and share your own snippets. Check out the links below:

• BMI Calculator
• Simple Grid
• Dashboard Grid
• Pong Game
• Loan Calculator
• Bullet Chart
• SVG Box Positioning

Demo Applications

Below are demo applications which will provide a deeper insight into how CxJS projects function:

• CxJS Starter Kit - dashboards, admin pages, routing, layouts
• Worldoscope - charts, data tables, Material theme.
• CxJS Hacker News - startup performance, layout, infinite scrolling
• Employee Directory + blog post - layout, REST API
• State of JS Explorer - charts, styling
• tdo - dark appearance, keyboard navigation

Starting a new Project

You are now ready to start a new project with CxJS.

• Command Line Interface - quickly generate new applications using Cx CLI
• Step by Step Tutorial - step-by-step tutorial on creating a new CxJS application. You will also configure both webpack and Babel along the way