dui

dui

Usage no npm install needed!

<script type="module">
  import dui from 'https://cdn.skypack.dev/dui';
</script>

README

What is DUI?

  • DUI is a lightweight ui framework based on plugin mechanism, that can run in both node.js and browsers.
  • In DUI, everything is plugin exactly, e.g., themes, extendtions, features, APIs.
  • DUI adhere to AMD mechanism, your project need to employ javascript module loaders such as RequireJS, curl, Dojo to import DUI modules.
  • Our code adopted a compatible coding style in order to make DUI could run in node.js smoothly, and collaborators need to observe this compatible style.
  • Everyone could use scaffold tools to create primitive widget or plugin.

Use DUI in browsers

  • Clone a copy of the main git repo by running:
    git clone git://github.com/lbxx1984/dui.git
  • Compile css/dui.less to css file, or add less compiling module to your development environment, then import style sheet in your home page:
    <link rel="stylesheet" href="./dui/css/dui.css"/>
  • Import widget modules and plugin modules to your customized module like:
    define([
        'dui/src/widget/Table',
        'dui/src/plugin/TableHeader'
    ], function (Table, TableHeader) {
        // TODO
    });
  • Create plugin instances like:
    var tableHeader = new TableHeader({height: 35});
  • Create initialization parameters for UI constructor like:
    var param = {
        container: document.getElementById('tableContainer'), // HtmlElement or String
        fields: [
            {width: 100, tip: 'name', field: 'name'},
            {width: 50, tip: 'age', field: 'age'}
        ],
        datasource: [
            {name: 'tom', age: 18},
            {name: 'jim', age: 21}
        ],
        plugin: [
            tableHeader
        ]
    };
  • Create an ui instance like:
    var table = new Table(param);
    console.log(table); // output table to console.

Use DUI without module loaders

  • Import style sheet:
    <link rel="stylesheet" href="./dui/build/dui.min.css"/>
  • Import js file:
    <script type="text/javascript" src="./dui/build/dui.min.js"></script>
    <script type="text/javascript" src="./deps/jquery.min.js"></script>
    <body onload="test()">
        <div id="container"></div>
    </body>
  • Use DUI as a normal library:
    function test() {
        if (!window.DUI) {
            // Because DUI loading takes some time, you need to check if it has been loaded.
            setTimeout(test, 50);
            return;
        }
        var param = {
            container: document.getElementById("container"),
            fields: [
                {tip: "column1", field: "column1"},
                {tip: "column2", field: "column2"},
                {tip: "column3", field: "column3"}
            ],
            datasource: [
                {column1: "1-1", column2: "1-2", column3: "1-3"},
                {column1: "2-1", column2: "2-2", column3: "2-3"},
                {column1: "3-1", column2: "3-2", column3: "3-3"}
            ],
            skin: "colorful",
            plugin: [
                new DUI.TableHeader(),
                new DUI.TableSelector({mode: "row", select: "multiple"})
            ]
        };
        var table = new DUI.Table(param);
        console.log(table);
    }

Use DUI in node.js

  • Install DUI by running:
    npm install dui
  • Import widget modules and plugin modules to your customized module like:
    var Table = require('dui/src/widget/Table');
    var TableHeader = require('dui/src/plugin/TableHeader');
  • Create plugin instances like:
    var tableHeader = new TableHeader({height: 35});
  • Create initialization parameters for UI constructor like:
    var param = {
        // no need to appoint container.
        // container: document.getElementById('tableContainer'),
        fields: [
            {width: 100, tip: 'name', field: 'name'},
            {width: 50, tip: 'age', field: 'age'}
        ],
        datasource: [
            {name: 'tom', age: 18},
            {name: 'jim', age: 21}
        ],
        plugin: [
            tableHeader
        ]
    };
  • Create an ui instance like:
    var table = new Table(param);
  • Export html and class name of ui instances like:
    var html = table.html;
    var className = table._temp.className;
  • Use the derived results elsewhere like:
    var http = require('http');
    http.createServer(function (req, res) {
        var status = req.url.substr(1);
        res.writeHeader(status, {'Content-Type': 'text/plain'});
        res.write('<div class="' + className + '">' + html + '</div>');
        res.end(http.STATUS_CODES[status]);
    }).listen(3000);

scaffold

  • Use scaffold tool to add widget/plugin templet automatically:
    node add TestWidget
    node add TextPlugin plugin
  • Scaffold tool will trigger a building process.

Testing

  • Install test tool by running:
   npm install -g istanbul
  • Regist test project by modifying './test/config.js';
  • Add entry js to './test/entry/';
  • Add cases, results, processers in ONE js, like './test/cases/picker.js';
  • Enter DUI root directory and run test project like:
   istanbul cover test.js
  • Check test report by accessing './coverage/index.html'.

Build

  • Enter DUI root directory and run build project like:
    node build
  • Check output files in './build'.

Author