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

Now you can use the CLI directly:

 $> bones_ui --help

To run Bones_UI unit tests in your project:

 $> bones_ui test

• See bones_ui test --help for more information.

To show the Bones_UI project template information:

 $> bones_ui info

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"

Usage

A simple usage example:

import'dart:html';
import'package:bones_ui/bones_ui_kit.dart';
voidmain() async {
// Create `bones_ui` root and initialize it:var root =MyUIRoot(querySelector('#output'));
root.initialize();
}
// `Bones_UI` UI root.classMyUIRootextendsUIRoot {
MyUIRoot(Element? rootContainer) :super(rootContainer);
MyMenu _menu;
MyHome _home;
@overridevoidconfigure() {
_menu =MyMenu(content);
_home =MyHome(content);
}
// Returns the menu component.@overrideUIComponentrenderMenu() => _menu;
// Returns the content component.@overrideUIComponentrenderContent() => _home;
}
// Top menu.classMyMenuextendsUIComponent {
MyMenu(Element parent) :super(parent);
// Renders a fixed top menu with a title.@overridedynamicrender() {
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.classMyHomeextendsUIComponent {
MyHome(Element parent) :super(parent);
@overridedynamicrender() {
returnmarkdownToDiv((''' <br> # Home Welcome! This is a VERY simple example! '''));
}
}

Example from Sources

Get the source

 $> git clone https://github.com/Colossus-Services/bones_ui.git

...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` classimport'../web/lib/ui_root.dart'; // ignore: avoid_relative_lib_importsvoidmain() async {
group('UIRoot', () {
lateMyUIRoot uiRoot;
setUpAll(() async {
// Initialize your `UIRoot`:
uiRoot =awaitinitializeTestUIRoot(MyUIRoot.new);
});
tearDownAll(() async {
awaittestUISleep(ms:200);
uiRoot.clear();
});
test('menu: routes', () async {
await uiRoot.callRenderAndWait();
awaittestUISleep(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();
awaittestUISleep(ms:100);
var menu = uiRoot.querySelector('.menu');
expect(menu, isNotNull);
var linkLogin = menu!
.selectAnchorElements()
.firstWhere((e) => e.href?.endsWith('#login') ??false);
linkLogin.click();
awaittestUISleepUntilRoute('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 ='admin@mail.com';
passInput.value ='123456';
awaittestUISleep(ms:100);
var btnLoginDiv = uiRoot.querySelector('#btn-login');
btnLoginDiv!.click();
awaittestUISleepUntilRoutes(['home', ''], timeoutMs:1000, minMs:100);
expectUIRoutes(['home', '']);
});
});
}

To run the unit tests, run the CLI in your project directory:

 $> bones_ui test

To see the browser running the tests:

 $> bones_ui test --show-ui

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