ibaca / domino-ui

Domino-UI

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]/font/material-icons.css">
<link type="text/css" rel="stylesheet" href="/[module-short-name]/plugins/bootstrap/css/bootstrap.css">
<link type="text/css" rel="stylesheet" href="/[module-short-name]/plugins/node-waves/waves.css">
<link type="text/css" rel="stylesheet" href="/[module-short-name]/plugins/animate-css/animate.css">
<link type="text/css" rel="stylesheet" href="/[module-short-name]/plugins/waitme/waitMe.css">
<link type="text/css" rel="stylesheet" href="/[module-short-name]/plugins/bootstrap-select/css/bootstrap-select.css">
<link type="text/css" rel="stylesheet" href="/[module-short-name]/css/materialize.css">
<link type="text/css" rel="stylesheet" href="/[module-short-name]/css/style.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 - in progress
• Simple grids - Table based -
• Form wizards / Steppers - in progress
• 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

Column column = Column.create()
        .onLarge(Column.OnLarge.four)
        .onMedium(Column.OnMedium.four)
        .onSmall(Column.OnSmall.twelve)
        .onXSmall(Column.OnXSmall.twelve);

DomGlobal.document.body.appendChild(Row.create()
        .addColumn(column.copy()
                .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.copy()
                .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.copy()
                .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());