CXBOX UI

CXBOX - Rapid Enterprise Level Application Development Platform

Website | Demo | Documentation

Description

CXBOX main purpose is to speed up development of typical Enterprise Level Application based on Spring Boot. A fixed contract with a user interface called Cxbox-UI allows backend developer to create typical interfaces providing just Json meta files. Full set of typical Enterprise Level UI components included - widgets, fields, layouts (views), navigation (screens).

Using CXBOX

• download Intellij Plugin adds platform specific autocomplete, inspection, navigation and code generation features.
• download Demo and follow README.md instructions. Feel free to use demo as template project to start your own projects

CXBOX UI

Main concepts

UI side of Cxbox framework is based on a concept of configurable dashboards (“views”) with widgets. Visually widgets could be represented as a card with a table, graph, form or something more exotic inside. Internally, every widget has a direct link to an entity that we call “business component” (BC). BC controls what data is displayed on widget and whhich interactions are available to the user. Interactions could be a simple filtration or some complex business process, initiated through Cxbox API. Information about loaded views and widgets grouped into “screens” and stored in application Redux store. Client applications could reuse, extend and customize that functionality by providing its own reducers and epics, widgets and ui controls.

Installation

Cxbox UI distributed in form of ES5 compatible npm package:

yarn add @cxbox-ui/core

Several libraries are specified as peer dependencies and should be installed for client application: react, react-dom, redux, react-redux, rxjs, redux-observable, antd, axios.

Usage

component provides configurable Redux context and should be used on top level of your application:

import {Provider} from '@cxbox-ui/core'
import {reducers} from 'reducers'

const App = <Provider>
    <div>Client side application</div>
</Provider>

render(App, document.getElementById('root'))

After that, components of your own application could access combined Redux store and import library components:

import React from 'react'
import {connect, View} from '@cxbox-ui/core'

export const ClientComponent: FunctionComponent = (props: { screenName }) => {
    const Card = (props) => <div>
        <h1>Client side component</h1>
        {props.children}
    </div>
    return <View card={Card} />
}

function mapStateToProps(store) {
    return { screenName: store.router.screenName }
}

export default connect(mapStateToProps)(ClientComponent)

Contributing

All contributions are welcomed, as even a minor pull request with grammar fixes or a single documentation update is of a significant help for us!
We promise to handle all PR reviews in a friendly and respectful manner.