Skip to content

Getting started

Jump to bottom
Ahmad K. Bawaneh edited this page May 5, 2022 · 27 revisions

In this short getting started document we will learn how to create and setup a project for domino-ui.

Let's create your first domino-ui project, steps below will guide you through the whole process it will only take you less than 5 minutes!

Create a Domino-ui Project

There is more than one way to create a new domino-ui project and we will go through them all

Method 1: Create project using dominokit-cli tool:

Prerequisites

  • Java
  • Maven

Steps

  • Download and install dominokit-cli tool from here dominokit-cli

  • After installing the tool in a terminal execute the following command:

dominokit gen app -n [yourAppNameHere] -t basic -g [groupId here]
  • Your are done, CD into the project folder, execute mvn clean install and follow the readme file to run the application.

Method 2: Create project using GWT tbroyer archetype

follow the steps here then follow steps in Method 4 below to add domino-ui to the project.

Method 3: Create project using Nalu project initializer

Nalu project nitializer is not maintained by DominoKit team, we recommend creating DominoKit projects with domino-cli, but if you face issues with Nalu Initializer please visit the project repository for more support.

Nalu is a lightweight MVP framework which comes with a project initializer for easy getting started and offers domino-ui as the default widget set

The UI for Nalu project initializer itself is built using domino-ui, find Nalu initializer here

Prerequisites

  • Java
  • Maven

Steps

  • Open Nalu project initializer
  • Fill the Group id and Artifact id
  • Click generate
  • Download the generated project
  • Extract the downloaded project
  • cd into the extracted folder
  • execute mvn clean install

Run the generated project

execute the following command mvn gwt:devmode

Access the project

From the gwt devmode dialog click on Launch default browser

Method 4: adding domino-ui to an existing project

If you want to add domino-ui to an existing project rather than starting one from scratch you will need to follow these steps

  • In the index html page add the following into the head section
<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">

replace {module-short-name} with the name of your module - that can be found in the "rename-to" of the *.gwt.xml or if you used https://github.com/tbroyer/gwt-maven-archetypes/ to create the GWT project - it's the actual name of the module-short-name you typed in.

  • in your client module pom.xml add the following dependencies
<dependency>
  <groupId>org.dominokit</groupId>
  <artifactId>domino-ui</artifactId>
  <version>1.0.0-RC10</version>
</dependency>
<dependency>
  <groupId>org.dominokit</groupId>
  <artifactId>domino-ui</artifactId>
  <version>1.0.0-RC10</version>
  <classifier>sources</classifier>
</dependency>
  • in your .gwt.xml file add the following inherits :

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

with this you should be ready to use domino-ui in your project.

Create a project with spring-boot

GWTBoot project is not maintained by DominoKit team, we recommend creating DominoKit projects with domino-cli, but if you face issues with GWTBoot please visit the project repository for more support.

GWTBoot is a set of starter modules for gwt with spring-boot as a backend that already offer a module for domino-ui: gwt-boot-starter-ui-domino

there is 2 ready samples using this starter modules for domino-ui, gwt-boot-sample-ui-domino which is a pure gwt sample without dependency injection nor mvp framworks and gwt-boot-sample-ui-domino-dagger2 which is the same sample but uses dagger2 for dependency injection.

Static resources are available as a webjar dependency :

<dependency>
  <groupId>org.dominokit</groupId>
  <artifactId>domino-ui-webjar</artifactId>
  <version>1.0.0-RC10</version>
</dependency>

Where to go next:

  • Starting by checking our demo app and try different code snippets, learn more about the layout, and start testing one component at a time.

  • Joining our gitter channel is a very good idea, we will be there to answer your questions and help you if you face any issue, we help with both domino-ui and gwt related stuff.

  • Checkout the sample applications built with domino-ui, we have some listed in our demo app

Clone this wiki locally