<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" type="image/png" href="favicon.png">
<title>Evolutility-UI-jQuery</title>
<meta name="description" content="Evolutility-UI-jQuery :: Views which adapt to your data by changing form, volume and structure." /></head>
<meta name="keywords" content="low-code UI Backbone model MVC open source metadata driven SPA single page app application generic MDDA MDA CRUD framework Bootstrap" />
<link id="bwCSS" href="dist/css/dependencies.min.css" rel="stylesheet" />
<link href="dist/css/demo.css" rel="stylesheet" />
<link href="dist/css/evolutility-ui-jquery.min.css" rel="stylesheet" />
<script src="config.js" type="text/javascript"></script>
<script src="demo/demo.js" type="text/javascript"></script>
<script src="demo/demo-data.min.js" type="text/javascript"></script>
<script src="models/contacts.js" type="text/javascript"></script>
<script src="models/todo.js" type="text/javascript"></script>
<script src="models/winecellar.js" type="text/javascript"></script>
<script src="models/comics.js" type="text/javascript"></script>
<script src="dist/dependencies.min.js" type="text/javascript"></script>
<script src="dist/evolutility-ui-jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div class="evo-page">
<div class="evo-header">
<div class="evo-logo"><a href="index.html"><span>evol</span>utility<br/>ui-jquery</a></div>
<ul class="evo-head-links">
<li><a href="demo/index.html">Demos</a></li>
<li class="evo-link2">
<div class="evo-head-links2">
<div><a href="demo/index.html#todo" data-id="todo">To-do list</a></div>
<div><a href="demo/index.html#contact" data-id="contact">Addressbook</a></div>
<div><a href="demo/index.html#winecellar" data-id="winecellar">Wine cellar</a></div>
<div><a href="demo/index.html#comics/cards" data-id="comics">Graphic novels</a></div>
</div>
</li>
<li><a href="doc/index.html">Doc</a></li>
<li class="spaced">
<a href="https://github.com/evoluteur/evolutility-ui-jquery" target="_new">GitHub</a>
<div class="hideIfSmall">
<br/>
<iframe src="https://ghbtns.com/github-btn.html?user=evoluteur&repo=evolutility-ui-jquery&type=star&count=true&size=small" frameborder="0" scrolling="0" width="170px" height="30px"></iframe>
</div>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="evo-content page-index">
<section id="s-splash">
<h1 class="titleindex">Evolutility-UI-jQuery</nobr></h1>
<h1 style="color:#BBDEFB;">A set of model-driven views to list, browse, edit, and chart data.</h1>
</section>
<section id="s-intro">
<p>Evolutility-UI-jQuery (currently v1.2.4) provides a set of generic Views ("V" as in "MVC") to
browse, edit, filter, export and chart
data of different structures and volumes.
</p>
<p>With Evolutility-UI-jQuery, views are not hand-coded in Javascript, HTML templates, and CSS but configured with ui-models.</p>
<p> </p>
<h3 class="mt20">Sample views</h3>
<div id="evol-views-params" class="demo-controls">
<div><span class="hideIfSmall">See the </span>
<select id="evolView" class="form-control" style="width:auto">
<optgroup label="One = model">
<option value="browse" selected>Browse</option>
<option value="edit">Edit</option>
<option value="mini">Mini</option>
<option value="json">JSON</option>
</optgroup>
<optgroup label="Many = collection">
<option value="list">List</option>
<option value="cards">Cards</option>
<option value="bubbles">Bubbles</option>
<option value="charts">Charts</option>
</optgroup>
<optgroup label="Action">
<option value="export">Export</option>
<option value="filter">Filter</option>
</optgroup>
</select>
view for a
<select id="evolModel" class="form-control" style="width:auto">
<option value="todo">To Do</option>
<option value="contact">AddressBook</option>
<option value="winecellar">Wine Cellar</option>
<option value="comics">Graphic Novels</option>
</select>
app.
</div>
<div id="viewInfo" class="hideIfSmall"></div>
<div style="clear:both;"></div>
</div>
<div id="evol1"></div>
<p><br>If you are wondering, No, I didn't write 40 templates (10 views for 4 entities = 40 views) for the demo above. I only wrote 4 ui-models, Evolutility-UI-jQuery is doing the rest.</p>
</section>
<section>
<h3 class="mt20">From a set of views to a single page app</h3>
<p>Together the views "browse", "edit", "list" and "filter" provide CRUD (Create, Read, Update, Delete) functionality.
The other views "cards", "bubbles", "charts" and "mini" make the app more user-friendly and powerful.</p>
<p>Demo applications (using your browser's local storage):
<div class="demo-links links-bih">
<div><a href="demo/index.html#todo" data-id="todo"><img src="demo/pix/todo.gif" class="evo-icon-16">To Do</a></div>
<div><a href="demo/index.html#contact" data-id="contact"><img src="demo/pix/contact.gif" class="evo-icon-16">AddressBook</a></div>
<div><a href="demo/index.html#winecellar" data-id="wine"><img src="demo/pix/wine.gif" class="evo-icon-16">Wine cellar</a></div>
<div><a href="demo/index.html#comics/cards" data-id="comics"><img src="demo/pix/comics.png" class="evo-icon-16">Graphic novels</a></div>
</div>
</p>
</section>
<section>
<h3 class="mt20">UI model to configure the views</h3>
<p>Views are configured with a UI-model. Each UI-model is the single source of truth for all UI elements in all views of a specific entity.
It contains a DRY (Don't Repeat Yourself) description of the UI elements on screen and how they map to the model.
From a single UI-model, many views of an entity can be generated at run-time to browse, edit, filter, export, chart the data (for CRUD and more).</p>
<p>The "vocabulary" of UI-models is abstracted from the DOM and uses words like
"<a href="doc/ui-model.html#tab">tab</a>", "<a href="doc/ui-model.html#panel">panel</a>" or
"<a href="doc/ui-model.html#field">field</a>"
rather than "div", "span", "input"...
</p>
<p>Example of UI-Models used in the demos:
<a href="javascript:showUIModel('todo')">To Do</a>,
<a href="javascript:showUIModel('contact')">Addressbook</a>,
<a href="javascript:showUIModel('winecellar')">Wine Cellar</a>,
<a href="javascript:showUIModel('comics')">Graphic Novels</a>.
<small id="hide_def" style="display:none;"><a href="javascript:hideUIModel()">[Hide]</a></small>
</p>
<div style="display:none;" id="uimodel"></div>
</section>
<section>
<h3 class="mt20">Documentation</h3>
<p>Learn more about <a href="doc/ui-model.html">UI-models</a> and <a href="doc/views.html">generic Views</a>.</p>
</section>
<section>
<h3 class="mt20">Download & Code</h3>
<p>Evolutility-UI-jQuery source code is available at <a href="https://github.com/evoluteur/evolutility-ui-jquery" target="gh">GitHub</a>
under the MIT license.</p>
<p>For a matching model-driven RESTful API, use <a href="https://github.com/evoluteur/evolutility-server-node" target="esn">Evolutility-Server-Node</a> with Node.js, Express, and Postgres.</p>
</section>
<section>
<h3 class="mt20">The meaning of Evolutility</h3>
<p>In biology, Evolutility means "The faculty possessed by all substances capable of self-nourishment of manifesting the nutritive acts by changes of form, of volume, or of structure."</p>
<p>This open source project is a UI which changes form, volume and structure. It's DNA is metadata.</p>
</section>
<div class="clearfix"></div>
</div>
</div>
<div class="footer">© 2020 <a href="https://evoluteur.github.io/">Olivier Giulieri</a></div>
<script>
$(document).ready(function(){
var curView=null;
function showView(){
var modelName=$('#evolModel').val(),
viewName=$('#evolView').val(),
uiModel=uiModels[modelName];
var $e = $('<div data-eid="'+uiModel.id+'"></div>'),
collec = new Backbone.Collection(uiModels[modelName+'_data']),
config = {
style: 'panel-primary',
collection: collec,
model: collec.at(0),
uiModel: uiModel,
title:'',
el: $e,
iconsPath:'demo/pix/'
};
$('#evol1').append($e);
if(curView){
curView.remove();
}
curView = new Evol.viewClasses[viewName](config)
.render();
var vwInfo = ViewDescriptions[viewName];
$('#viewInfo').html(vwInfo.desc);
}
$('#evolModel,#evolView').on('change', function(){
showView();
});
showView();
});
</script>
</body>
</html>