fc-ui2

v2.0.2

Published

2 years ago

FCUI2, a lightweight UI based on React and underscore.js.

Downloads

0High
0Medium
0Low

fcfe

FCUI2

What is FCUI2?

FCUI2 is a lightweight UI based on React and underscore.js.
FCUI2 adhere to AMD mechanism, your project need to employ javascript module loaders such as RequireJS, curl, Dojo to import FCUI2 modules.
All widgets in FCUI2 are written in JSX, you need to import compilation tools such as Babel to your development environment and package tools.

See FCUI2 examples

Enter FCUI2 root directory, install scaffold tools by running:

    npm install edp

Start a http server by running:

    edp webserver start

or by running

    npm install
    mkdir -p node_modules/edp/node_modules
    npm start

Using a browser to access URL:
```
  http://localhost:8847/index.html
```

Use FCUI2 in browsers

Clone a copy of the main git repo by running:

    git clone https://github.com/fcfe/fcui2.git

Compile fcui2/src/css/main.less, fcui2/src/css/icon/fc-icon.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="./dep/fcui2/src/css/icon/fc-icon.css"/>
    <link rel="stylesheet" href="./dep/fcui2/src/css/main.css"/>

Configure the underlying dependency like:

    require.config({
        baseUrl: './src',
        paths: {
            'react-dom': '../dep/react/react-dom',
            'react': '../dep/react/react-with-addons'
        },
        packages: [
            {
                name: 'fcui',
                location: '../dep/fcui/src',
                main: 'main'
            },
            {
                name: 'underscore',
                location: '../dep/underscore/1.8.5/src',
                main: 'underscore'
            }
        ]
    });

Create a simple project in src/main.js like:

    define(function (require) {

        var ReactDOM = require('react-dom');
        var React = require('react');
        var App = require('./app.jsx');
        var props = {};

        ReactDOM.render(
            React.createElement(App, props),
            document.getElementById('react-container')
        );

    });

Create a html file for access like:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./dep/fcui2/css/icon/fc-icon.css"/>
<link rel="stylesheet" href="./dep/fcui2/src/css/main.css"/>
</head>
<body><div id="react-container"></div></body>
<script type="text/javascript" src="./dep/require.js"></script>
<script type="text/javascript">
    require.config({
        baseUrl: './src',
        paths: {
            'react-dom': '../dep/react/react-dom',
            'react': '../dep/react/react-with-addons'
        },
        packages: [
            {
                name: 'fcui',
                location: '../dep/fcui/src',
                main: 'main'
            },
            {
                name: 'underscore',
                location: '../dep/underscore/1.8.5/src',
                main: 'underscore'
            }
        ]
    });
    require(['main']);
</script>
</html>

Here is an example for src/App.jsx.js:

    define(function (require) {

        var React = require('react');
        var TextBox = require('fcui/TextBox.jsx');
        var Button = require('fcui/Button.jsx');

        return React.createClass({
            // @override
            getDefaultProps: function () {
                return {
                    name: 'Brian',
                    age: '18'
                };
            },
            // @override
            getInitialState: function () {
                return {

                };
            },
            render: function () {
                return (
                    <div>
                        Name: <TextBox value={this.props.name} /><br/>
                        Age: <TextBox value={this.props.age} /><br/>
                        <Button label="OK" />
                    </div>
                );
            }
        });
    });

How to run FCUI2 test

$ npm install
$ npm test

$ npm install
$ edp test start

Author

email: [email protected]
weibo: http://weibo.com/lbxx1984
blog: http://blog.csdn.net/lbxx1984

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

FCUI2

What is FCUI2?

See FCUI2 examples

Use FCUI2 in browsers

How to run FCUI2 test

Author