dom_builder

Description:

dom builder

dom_builder #









Generate and manipulate DOM elements (virtual or real), DSX (like JSX) and HTML declarations (Web and Native support).
Usage #
You can generate a DOM tree using HTML, Object Orientation or manipulating an already instantiated DOM tree.
Here's a simple usage example, that can work in any platform (Web or Native):
import 'package:dom_builder/dom_builder.dart';

void main() {

var div = $divHTML('<div class="container"><span>Builder</span></div>')
.insertAt( 0, $span( id: 's1', content: 'The ' ) )
.insertAfter( '#s1' , $span( id: 's2', content: 'DOM ', style: 'font-weight: bold' ) )
;

print( div.buildHTML( withIdent: true ) ) ;

////////////
// Output //
////////////
// <div class="container">
// <span id="s1">The </span>
// <span id="s2" style="font-weight: bold">DOM </span>
// <span>Builder</span>
// </div>


div.select('#s1').remove() ;
print( div.buildHTML( withIdent: true ) ) ;

////////////
// Output //
////////////
// <div class="container">
// <span id="s2" style="font-weight: bold">DOM </span>
// <span>Builder</span>
// </div>

}

copied to clipboard
Generating a real DOM Element (dart:html): #
As example, let's create a Bootstrap navbar-toggler:
import 'dart:html' ;
import 'package:dom_builder/dom_builder.dart';

class BootstrapNavbarToggler {

static DOMGenerator domGenerator = DOMGenerator.dartHTML() ;

Element render() {
var button = $button( type: 'button', classes: 'navbar-toggler', attributes: {'data-toggle': "collapse", 'data-target': "#navbarCollapse", 'aria-controls': "navbarCollapse", 'aria-expanded':"false", 'aria-label':"Toggle navigation"} ,
content: $span( classes: 'navbar-toggler-icon')
);

return button.buildDOM(domGenerator) ;
}

}

copied to clipboard
Mixing real DOM Element (dart:html) with virtual DOMElement: #
import 'dart:html' ;
import 'package:dom_builder/dom_builder_html.dart';

class TitleComponent {

static DOMGenerator domGenerator = DOMGenerator.dartHTML() ;

Element render() {
var div = $divHTML('<div class="container"><span>The </span></div>') ;

div.add( SpanElement()..text = 'DOM Builder' ) ;

return div.buildDOM(domGenerator) ;
}

}

copied to clipboard
DSX #
Similar to JSX, DSX (Dart Syntax Extension) allows the declaration and construction of
a DOM tree using plain HTML with an extended syntax:
import 'dart:html' ;
import 'package:dom_builder/dom_builder_html.dart';

void main() {

var button = $dsx('''
<button onclick="${_btnClick.dsx()}">CLICK ME!</button>
''');

}

void _btnClick() {
print('Button Clicked!');
}
copied to clipboard
Example of Bootstrap Cards and Table: #
import 'dart:html' ;
import 'package:dom_builder/dom_builder_html.dart';

Element generateBSCards() {
// ...

var tableHeads = ['User', 'E-Mail'];
var usersEntries = [ ['Joe', '[email protected]'], ['Smith', '[email protected]']];

var content = $div(content: [
$div(classes: 'card', content: [
$div(classes: 'card-header', content: 'Activity Timeline:'),
$div(id: 'timeline-chart')
]),

$hr(),

$div(classes: 'card', content: [
$div(classes: 'card-header', content: "Users:"),
$div(classes: 'card-body', content:
$table(classes: 'table text-truncate', head: tableHeads, body: usersEntries)
..applyWhere('td , th', classes: 'd-inline text-truncate', style: 'max-width: 50vw')
)
]),

]);

// ...

if (timelineChartSeries != null) {
content.select('#timeline-chart').add(
(parent) {
// render Chart inside element parent...
}
);
}
else {
content.select('#timeline-chart').add('No Timeline Data.');
}

// ...

var domGenerator = DOMGenerator.dartHTML();
return content.buildDOM(domGenerator);
}
copied to clipboard
See Also #
See some related projects:

Bones_UI: A simple and easy Web User Interface framework for Dart.
Bones_UI_Bootstrap: Adds Bootstrap Bones_UI.
Bootstrap: Build fast and responsive sites.

Features and bugs #
Please file feature requests and bugs at the issue tracker.
Author #
Graciliano M. Passos: gmpassos@GitHub.
License #
Dart free & open-source license.