0.1.0 • Published 11 years ago
json-ui v0.1.0
json-ui
Json in editing in friendly UIs.
require
- Install nodejs
- Install npm
Usage
get js from ./dist/json_ui.js, css from ./app/css/json_ui.css and all views from app/views
Including files:
<link rel="stylesheet" href="./css/json_ui.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/json_ui.js"></script>HTML structure
Set json-ui in page
<html ng-app="json.ui">
<body ng-controller="jsonUIController as jsonUI">
<div class="json-ui">
<object class="root" id="json-ui" ng-init="jsonUI.config()">
</object>
</div>Set raw json editor in page
<div class="raw_json">
<div id="editor"></div>
</div>Set json-ui <-> raw-json buttons in page
<button class="to-json-raw" ng-click="jsonUI.toRawJson()">></button>
<button class="to-json-ui" ng-click="jsonUI.toJsonUI()"><</button>Set export json link
<a ng-href="{{jsonUI.jsonLink}}" download="jsonui.json" ng-click="jsonUI.getDownloadLink()">Export</a>Initialization
Initialize Raw Json
var initJson = {
"Name": "Robert",
"Family": ["Dad", "Mom", "Sister", "ME"],
"Home": {"Country": "Taiwan", "City": "Tainan"}
};
editor.init(initJson);Initialize json-ui
Default Initialization
angular.module('json.ui')
.config(function (AppConfigProvider) {
AppConfigProvider.set({
id: '#json-ui'
});
});Alter options
angular.module('json.ui')
.config(function (AppConfigProvider) {
AppConfigProvider.set({
initialSync : true
});
});###Options
| Options | value | default | explain | example |
|---|---|---|---|---|
| id | element id (string) | '#json-ui' | 'json-ui': set root object id | |
| initialSync | true / false | false | true: Json-ui and Raw json synchronization when page load |
Develop
First run the following command (installing bower npm install -g bower)
$ bower installstart server (you should install npm install http-server -g first)
$ npm startopen the browser and type this http://localhost:8000/app/
compile scss file & js file
We are using browserify so you should install browserify in global first ( npm install -g browserify ).
$ npm install
$ gulpdeploy
$ ./deploy