Dui NPM | npm.io

##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

email: lbxxlht@163.com
weibo: http://weibo.com/lbxx1984
blog: http://blog.csdn.net/lbxx1984

less clean-css uglify-js

@infinitebrahmanuniverse/nolb-dui @everything-registry/sub-chunk-1536 @zalastax/nolb-dui

8 years ago

8 years ago

8 years ago

8 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago