/domino-ui

Domino-ui

Primary LanguageJavaApache License 2.0Apache-2.0

Build Status Maven Central Sonatype Nexus (Snapshots)

Domino-ui

A type safe material design with bootstrap builder for java developer with GWT without dependencies on external JavaScript.

Demo app

Domino-ui Demo app

Setup

Maven dependency

<dependency>
  <groupId>org.dominokit</groupId>
  <artifactId>domino-ui</artifactId>
  <version>1.0-SNAPSHOT</version>
</dependency>
<dependency>
  <groupId>org.dominokit</groupId>
  <artifactId>domino-ui</artifactId>
  <version>1.0-SNAPSHOT</version>
  <classifier>sources</classifier>
</dependency>

To use the snapshot version without building locally, configure the snapshot repository

<repository>
   <id>sonatype-snapshots-repo</id>
   <url>https://oss.sonatype.org/content/repositories/snapshots</url>
   <snapshots>
      <enabled>true</enabled>
      <updatePolicy>always</updatePolicy>
      <checksumPolicy>fail</checksumPolicy>
   </snapshots>
</repository>

GWT module inheritance

<inherits name="org.dominokit.domino.ui.DominoUI"/>

Css

Add the following css files to your index page:

Replace [module-short-name] with the proper module name.

<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

<link type="text/css" rel="stylesheet" href="{module-short-name}/css/domino-ui.css">
<link type="text/css" rel="stylesheet" href="{module-short-name}/css/themes/all-themes.css">

Domino-ui Release 1.0 Road map

Checked item are already completed

Build All basic components :

  • Cards
  • Info box
  • Buttons
  • Alerts
  • Badges
  • Labels
  • Modals
  • Lists
  • Loaders
  • Icons
  • Breadcrumbs
  • Collapse
  • Notifications
  • Media Objects
  • Pagination
  • Preloaders
  • Progress bars
  • Tabs
  • Thumbnails
  • Dialogs
  • Tooltips and Popovers
  • Waves
  • Typography
  • Helper classes
  • Colors
  • Animations
  • File upload
  • Date picker
  • Time picker
  • Date time picker
  • Inputs decorations : Labels, Helper text, validation, Icons
  • Advanced Select
  • Multi-Select
  • Tag field
  • Spinners
  • Field masking
  • Simple grids - Table based -
  • Form wizards / Steppers
  • Carousel
  • Sliders

Third Party libs and tools integration

  • make sure that domino-ui can be used with other third party tools and libs, this might indicate a standarized API and split between the builders and actual element class.

Sample of third party tools and frameworks:

  • Editors framework.
  • UI Binder

Restructure CSS and Themeing

  • Restructure the CSS allowing easy themeing, writing a new theme by the uusers should be easy.

  • Simplify the injection of the css resources.

Java docs

  • Make sure all Domino-ui classes has the proper JavaDocs.

Documentation

  • Create a full documentation describing how to use Domino-ui, setup a project, and document each element/component on its own, this could be in github pages.

Build Samples

  • Implement a 3 different samples with different types of contents, the samples should try to use most of the avialable components.

Sample

DomGlobal.document.body.appendChild(Row.create()
        .addColumn(Column.span4()
                .addElement(Card.create("CARD TITLE", "Card description")
                        .appendContent(Paragraph.create("I love Domino-ui, Domino-ui does not use jquery or js and is typesafe, I love Domino-ui, Domino-ui does not use jquery or js and is typesafe, I love Domino-ui, Domino-ui does not use jquery or js and is typesafe")
                                .asElement())
                        .setHeaderBackground(Color.BLUE)
                        .setBodyBackground(Color.LIGHT_BLUE)
                        .asElement()))
        .addColumn(Column.span4()
                .addElement(Card.create("CARD TITLE", "Card description")
                        .appendContent(Paragraph.create("I love Domino-ui, Domino-ui does not use jquery or js and is typesafe, I love Domino-ui, Domino-ui does not use jquery or js and is typesafe, I love Domino-ui, Domino-ui does not use jquery or js and is typesafe")
                                .asElement())
                        .setHeaderBackground(Color.GREEN)
                        .setBodyBackground(Color.LIGHT_GREEN)
                        .asElement()))
        .addColumn(Column.span4()
                .addElement(Card.create("CARD TITLE", "Card description")
                        .appendContent(Paragraph.create("I love Domino-ui, Domino-ui does not use jquery or js and is typesafe, I love Domino-ui, Domino-ui does not use jquery or js and is typesafe, I love Domino-ui, Domino-ui does not use jquery or js and is typesafe")
                                .asElement())
                        .setHeaderBackground(Color.ORANGE)
                        .setBodyBackground(Color.AMBER)
                        .asElement()))
        .asElement());

Imgur