Bonita UI designer

Create your own pages for your Bonita application or your own project.

Quick start

Pre-requisite

• Java 17 for compilation or
• Docker

Build

Using Maven

• Build it using maven ./mvnw clean package
• Run it using java -jar backend/webapp/target/ui-designer-1.19.0-SNAPSHOT-standalone.jar

Using Docker

• Build docker image:

    docker build -t bonita/ui-designer
  

• Run it :

    docker run --name uid -d -p 50000:8080 bonita/ui-designer
  

Usage

Application is now available at http://localhost:50000/bonita/

Start creating your pages, take a look at the Documentation.

To go further

How does it work

The UI-designer is composed of a Java backend application and an AngularJs frontend. It is packaged in a war file and provided by default in the Bonita Studio

It produces standalone AngularJs pages that are compatible with Bonita platform.

Contribute

Report issues

If you want to report an issue or a bug use our official bugtracker

How to contribute

Before contributing, read the guidelines

Build and Test

Build

You can build entire project using maven.

./mvnw clean package

This will build frontend and backend and create this artifact: backend/webapp/target/ui-designer-1.19.0-SNAPSHOT-standalone.jar

Test

while running ./mvnw clean package only unit tests are run. If you want to run the integration tests, run the following command

./mvnw clean install -Pintegration-test

Also frontend e2e test could be launched via

./mvnw clean install -Pe2e

Run

To run build standalone jar, just launch it as a standard jar :

java -jar backend/webapp/target/ui-designer-1.19.0-SNAPSHOT-standalone.jar [-Dworkspace=/path/to/workspace] [-Drepository.widgets=/path/widgets/repository] [-Drepository.pages=/path/pages/repository][-Dbonita.data.repository.origin=datarepository.url]

Application is now available at http://localhost:8080/designer/

You can specify workspace location where pages and widgets are stored. Default value is {user.home}/.bonita

Available options can be listed by running

java -jar backend/webapp/target/ui-designer-1.19.0-SNAPSHOT-standalone.jar -h

Other available options are listed here : http://tomcat.apache.org/maven-plugin-2.0/executable-war-jar.html

Develop

Backend and frontend side could be launched in dev mode by using server.sh script. It launch gulp serve backend task, waits for backend webabb to be running then launches gulp serve frontend task.

$ ./server.sh

You can access the application at http://localhost:3000/index-dev.html, backend side is accessible at http://localhost:8080/bonita

Debug mode

How to debug backend with some breakpoint ?

IntelliJ

Run Start Backend target configuration as debug mode.

Run Start Frontend target configuration to get liveReload on html/javascript frontend part.

Command line

In backend run debug mode:

    ./mvnw spring-boot:run -Dagentlib:jdwp=transport=dt_socket,server=y,suspend=n,address=8000

Go in your IDE, edit run configuration: Select Remote. Only change port value (5000 by default) to value display in your shell. Run this configuration in debug.

In frontend, run:

    yarn start

Now you can debug your application with breakpoint.

Docker

You can run the ui-designer locally using Docker (of course, you need to install Docker to do so). The Dockerfile is a really simple one, using a base image with java7, adding the build standalone jar and starting it. Before building docker image, you need to build the project.

To build the image :

docker build -t bonita/ui-designer .

To run the image built with the previous command :

docker run -p 8080 bonita/ui-designer

This will start the builder on a random port on your docker host (either the local host if you're running linux, or the boot2docker VM if you're on MacOS). For boot2docker, you can find your VM IP with :

boot2docker ip

You can find the random port used with :

docker ps

For example, the application can start on http://192.168.59.103:49153/designer (192.168.59.103 being the default boot2docker IP and 49153 the random port used).

You can also run the image on a fixed port, 8000 for example, with :

docker run -p 8000:8080 bonita/ui-designer

Resources

• Documentation