Embeddable Web-based Designer

Embeddable Web-based Designer

This example illustrates how to embed the Flux Web-based Designer into a Java web application. The requirements for embedding the Designer are minimal:

  1. Include designer.jar and flux.jar in WEB-INF/lib of your web application.
  2. Deploy the Designer servlet.
  3. Include the Designer CSS.
  4. Include the Designer JavaScript.
  5. Instantiate the Designer in JavaScript.

Include designer.jar and flux.jar

The Designer servlet provides all of the resources required by the Web-based Designer. This includes all CSS, JavaScript, and images. The resources are shipped with the Flux distribution in flux.war. A script is provided to build a designer.jar file from the necessary resources in flux.war. This script is shipped with Flux in the examples/web_designers/designer sub directory. The build.bat and build.sh scripts in that directory will build the designer.jar, which can then be embedded in your Java web application in WEB-INF/lib. The flux.jar will also need to be added to your web application as well.

Deploy the Designer servlet

The Designer servlet is the server-side component of the embeddable Web-based Designer. The Designer servlet will need to be available in your Java web application in order to embed the Designer. Add the following lines to your web.xml to deploy the Designer servlet:


Include CSS and JavaScript

Add the following includes to your HTML. This could be in a plain HTML file, JSP, etc.

<link rel="stylesheet" type="text/css" href="DesignerServlet?resource=css"/>
<script type="text/javascript" src="DesignerServlet?resource=javascript"></script>

Instantiate the Designer

The Designer will not be rendered until it has been instantiated in JavaScript. The Designer can be instantiated by calling the flux.Designer() constructor:

var designer = new flux.Designer();

It is imporant to wait for the document to be fully loaded before attempting to instantiate the Designer. This can be done by instantiating the Designer after the "onLoad" event has fired for the HTML document:

<body onload="instantiateDesigner();">

Then, define the instantiateDesigner() function that will instantiate the Designer after the HTML document has loaded.

<script type="text/javascript">
  function instantiateDesigner() {
    var designer = new flux.Designer();
Was this article helpful?
0 out of 0 found this helpful



Please sign in to leave a comment.