bones_ui

Description:

bones ui

Bones_UI #









Bones_UI - An intuitive and user-friendly Web User Interface framework for Dart.
CLI #
You can use the command-line interface (CLI) bones_ui to create or serve a project:
To activate it globally:
$> dart pub global activate bones_ui
copied to clipboard
Now you can use the CLI directly:
$> bones_ui --help
copied to clipboard
To run Bones_UI unit tests in your project:
$> bones_ui test
copied to clipboard

See bones_ui test --help for more information.

To show the Bones_UI project template information:
$> bones_ui info
copied to clipboard
To create a Bones_UI project from the default template:
$> bones_ui create -o /path/to/workspace -p project_name_dir=simple_project -p "project_name=Simple Project"
copied to clipboard
Usage #
A simple usage example:
import 'dart:html';

import 'package:bones_ui/bones_ui_kit.dart';

void main() async {
// Create `bones_ui` root and initialize it:
var root = MyUIRoot(querySelector('#output'));
root.initialize();
}

// `Bones_UI` UI root.
class MyUIRoot extends UIRoot {
MyUIRoot(Element? rootContainer) : super(rootContainer);

MyMenu _menu;
MyHome _home;

@override
void configure() {
_menu = MyMenu(content);
_home = MyHome(content);
}

// Returns the menu component.
@override
UIComponent renderMenu() => _menu;

// Returns the content component.
@override
UIComponent renderContent() => _home;
}

// Top menu.
class MyMenu extends UIComponent {
MyMenu(Element parent) : super(parent);

// Renders a fixed top menu with a title.
@override
dynamic render() {
return $div(
classes: 'menu',
style: 'position: fixed; top: 0; left: 0; width: 100%; background-color: black; color: white; padding: 10px',
content: '<span style="font-size: 120%; font-weight: bold">Bones_UI: '
'<a hrf="#register">Register</a> | '
'<a hrf="#login">Login</a>'
'</span>'
);
}
}

// The `home` component.
class MyHome extends UIComponent {
MyHome(Element parent) : super(parent);

@override
dynamic render() {
return markdownToDiv(('''
<br>

# Home

Welcome!

This is a VERY simple example!
'''));
}
}

copied to clipboard
Example from Sources #
Get the source
$> git clone https://github.com/Colossus-Services/bones_ui.git
copied to clipboard
...and see the Web Example (just follow the README file for instructions).
Bones_UI App Example #
Also see the App example @ GitHub:
Unite Tests #
You can create unit tests for your Bones_UI app.
A Simple example with a login test:
@TestOn('browser')
import 'package:bones_ui/bones_ui_test.dart';
import 'package:test/test.dart';

// Import your `UIRoot` class
import '../web/lib/ui_root.dart'; // ignore: avoid_relative_lib_imports

void main() async {
group('UIRoot', () {
late MyUIRoot uiRoot;

setUpAll(() async {
// Initialize your `UIRoot`:
uiRoot = await initializeTestUIRoot(MyUIRoot.new);
});

tearDownAll(() async {
await testUISleep(ms: 200);
uiRoot.clear();
});

test('menu: routes', () async {
await uiRoot.callRenderAndWait();
await testUISleep(ms: 100);

var menu = uiRoot.querySelector('.menu');
expect(menu, isNotNull);

var routes = menu!.selectAnchorLinksTargets();

expect(routes,
unorderedEquals(['register', 'login']));
});

test('login', () async {
await uiRoot.callRenderAndWait();
await testUISleep(ms: 100);

var menu = uiRoot.querySelector('.menu');
expect(menu, isNotNull);

var linkLogin = menu!
.selectAnchorElements()
.firstWhere((e) => e.href?.endsWith('#login') ?? false);

linkLogin.click();

await testUISleepUntilRoute('login', timeoutMs: 2000, minMs: 100);

expectUIRoute('login');

var navigableContent = uiRoot.querySelector('.navigable-content');

var inputElements = navigableContent!.selectInputElement();

var emailInput = inputElements.withID('email').first;
var passInput = inputElements.withID('password').first;

emailInput.value = '[email protected]';
passInput.value = '123456';

await testUISleep(ms: 100);

var btnLoginDiv = uiRoot.querySelector('#btn-login');

btnLoginDiv!.click();

await testUISleepUntilRoutes(['home', ''], timeoutMs: 1000, minMs: 100);

expectUIRoutes(['home', '']);
});
});
}

copied to clipboard
To run the unit tests, run the CLI in your project directory:
$> bones_ui test
copied to clipboard
To see the browser running the tests:
$> bones_ui test --show-ui
copied to clipboard
Bootstrap Integration #
You can use the Dart package Bones_UI_Bootstrap
to activate Bootstrap integration with Bones_UI.
Bones_UI_Bootstrap automatically handles loading of JavaScript libraries and CSS.
With it you don't need to add any HTML or JavaScript code to have full integration of Bootstrap with Bones_UI.
Features and bugs #
Please file feature requests and bugs at the issue tracker.
Colossus.Services #
This is an open-source project from Colossus.Services:
the gateway for smooth solutions.
Author #
Graciliano M. Passos: gmpassos@GitHub.
License #
Artistic License - Version 2.0