sigemp / 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}/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 items 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
• Chips
• Tree

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 Theming

• Restructure the CSS allowing easy theming, writing a new theme by the users 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 three samples with different types of contents, the samples should try to use most of the available 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());