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';

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!
    '''));
  }
}

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` 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 = 'admin@mail.com';
      passInput.value = '123456';

      await testUISleep(ms: 100);

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

      btnLoginDiv!.click();
      
      await testUISleepUntilRoutes(['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