Skip to content

Getting started

Jump to bottom
Ahmad K. Bawaneh edited this page Nov 21, 2019 · 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 ui -g [groupId here]
  • Your are done, CD into the project folder, execute mvn clean install and run the application using the provided run.sh file.

Method 2: Create project from domino-ui archetype:

Prerequisites

  • Java
  • Maven

the snapshot repository should be added to the maven setting.xml file:

<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>
<repository>
	<id>vertispan-snapshots</id>
	<name>Vertispan Snapshots</name>
	<url>https://repo.vertispan.com/gwt-snapshot/</url>
	<snapshots>
		<enabled>true</enabled>
		<updatePolicy>always</updatePolicy>
		<checksumPolicy>fail</checksumPolicy>
	</snapshots>
</repository>

Steps

  • Crate a new folder for the project, this could be any empty folder
  • Open a terminal in the created folder
  • Execute the below command, it will create a new domino-ui project.
 mvn archetype:generate \
   -DarchetypeGroupId=org.dominokit \
   -DarchetypeVersion=1.0-SNAPSHOT \
   -DarchetypeArtifactId=dominouiStarter-archetype

While executing, it will ask you to fill some values : groupId, artifactId, version, package

  • Once the last command completed, cd into the generated project folder, the folder name is the artifact name you entered in the previous step.
  • Execute the command : mvn clean install.

Run the generated project

Execute the below commands each in different terminal:

mvn tomcat7:run -pl *-server -am -Denv=dev

this command will start the application server

mvn gwt:codeserver -pl *-client -am

this command will start gwt super dev mode.

You can run both commands in one terminal:

mvn tomcat7:run -pl *-server -am -Denv=dev | mvn gwt:codeserver -pl *-client -am

find more information about this archetype and the run commands here

OR

Run the application using the shell script included in the generated project

In project root folder make sure the file run.sh is executable then execute

./run.sh

Access the application at :

localhost:8080

Method 3: Create project using Nalu project initializer

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 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">
  • in your pom.xml add the following dependencies
<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>
  • 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 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.

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.

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

Clone this wiki locally