HTML5 GUI-Builder

HTML5 GUI Builder based on Vaadin.
Impressive UI widgets based on Google Web-Toolkit.
Design HMLT5 user interfaces and connect it with your database by using drag&drop.

Modern HTML5 user interfaces with Vaadin

Impressive HTML5 user interfaces matching to any display size and running on all major platforms automatically


Cross-Platform

Using Vaadin as UI-Framework

  • The entire HTML5 user interface can be written in Java
  • The UI widget set is based on GWT (Google Web-Toolkit) components
  • Individual styling with SCSS
  • Generates the entire HTML client dynamically
  • Fully automated client-server communitcation
  • The serverside architecture provides optimally security
  • You do not get in contact with HTML and JavaScript
  • and you need not bother for DOM manipulation, browser history and other low-level problems.

Vaadin bases on Google WebToolkit

  • GWT components are the base for the Vaadin UI widget set
  • The JavaScript code of all GWT components is already optimized for all major browsers
  • Custom GWT widgets can be written in pure Java
  • GWT compiler generates the entire JavaScript code

Great looking UI Widgets

Impressive HTML5 user interfaces matching to all display sizes automatically and running on all major platforms and mobile devices.


Panel

Table & Tree-Table

The table lets you display text and images, allows sorting, and provides automated lazy loading, i.e. data is only loaded as the user scrolls. The structure is automatically generated by assigning entities.
TreeTable

Menus

Menu bars can be constructed in a flash by simply dragging-and-dropping additional menu items to an existing menu. You can then create an event for each menu item with just the click of a mouse.
MenuBar

Accordion

Simply drag and drop and you can easily and quickly expand the Accordion components with any widgets of your choice which are then automatically displayed as new tabs.
Accordion

Richtext Editor

The functionality of the rich text editor components can be quickly and easily individually configured through the properties menu.
Richtext Editor

Databinding for Hibernate

Hibernate entities can be connected with UI widgets by using drag&drop very easily.
The query code is then generated automatically.


Vaadin
Hibernate

Intuitive Layout Manager

Use layout manager to create interfaces that automatically and flexibly adapt to any screen size. RapidClipse offers intuitive wizards so you don't have to deal with complicated layout manager programming, thus saving you lots of development and testing effort.


GWT Laoyut


GWT Laoyut

Form Generator

The form wizard lets you generate appropriate, fully functional forms for each database table. Even forms with multiple columns and spread over several tabs and combined input/search forms are possible. All controls can then be moved around the interface with your mouse.


Form Wizard


Generated Form

Master-Detail Views

To implement master-detail views, all you need to do is link two UI widgets containing the matching data. RapidClipse handles the necessary database queries automatically.


MasterDetail

Conversion Wizard

The conversion wizard lets you assign more than formatting such as currency symbols or date formats to your form controls. Frequently used conversions and calculations are also supported by default.


con_date


con_numer

Table Designer

The table editor lets you make various settings for each column without having to write complicated table renderers; the settings include visibility, sortability, scaling behavior, labeling, and formatting. Also computed fields, internationalizations, and the inclusion of other GUI widgets can be readily implemented.


Format Wizard


Format Wizard Result

Validation Wizard

You don't need to program your own input validators. The validation wizard lets you assign all form controls and their entities to powerful validators with just the click of a mouse. Even regular expressions are supported. In addition to the standard validators, you can also integrate your own validators per annotation.



Validation Wizard

Navigation Wizard

Page views and copying parameters made simple with the navigation wizard. The entire view management (including browser back and forward functions) is fully automated, so you don't have to worry about it.



Navigation Wizard

Styling with SCSS

With SCSS, you can change the look of everything from individual controls to the entire interface. More extensive style definitions can be summarized into style variables and entire style classes that you can assign to a widget in the UI designer as a property.


Button
Properties
Button Css3

CSS3+Sass

Custom UI-Widgets

RapidClipse lets you expand all UI widgets with additional functions with a wizard that lets you derive the base components. Your new components are automatically integrated into the widget palette, allowing you to expand RapidClipse as much as you like and also share your widgets with others. You can also integrate external Vaadin and GWT components.


NewUIElement


CustomButton

Internationalization & Localization

RapidClipse offers a wizard that completely automates the internationalization of interfaces by standard Java methods. First, the entire text of an interface is read, outsourced in resource files with its country code, and then replaced by variables. You only need the appropriate translation for each entry in the language file. When run, all texts are read automatically from the matching resource file depending on the language setting and displayed on the interface. Country- specific information such as date, time, currency settings, etc. can also be automatically localized in Java.


Externalize Settings

Declarative & Bi-directional

RapidClipse enables you to write or change your user interace with XML as well. GUI-Builder and XML code are automatically synchronized (bi-directional) with each change. Based on the XML code, RapidClipse then generates the final Javacode based on Vaadin.


GUI-Builder - GUI development with drag&drop

GUI Editor


XML Editor - GUI description XML Editor

XMLDesigner


XML Code - GUI development by writing or editing XML code

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xml>
 
<?xdevuiml version="1.0"?>
<?template BROWSER_XGA?>
<?import com.xdev.ui.XdevButton?>
<?import com.xdev.ui.XdevView?>
<XdevView xmlns:x="http://xml.xdev-software.com/xdevuiml" x:name="MainView">
   
<x:constraints zpos="0" width="100%" height="100%" />
   
<XdevButton caption="Button" x:name="button">
       
<x:constraints zpos="0" width="-1px" height="-1px" />
   
</XdevButton>
</XdevView>


Java Code - Fully automated generated Javacode

package com.company.examples.ui;
import com.xdev.ui.XdevButton;
import com.xdev.ui.XdevView;
  
public class MainView extends XdevView {
  
  
/**
   *
   */
  
public MainView() {
      
super();
      
this.initUI();
  }
  
  
/*
   * WARNING: Do NOT edit!
   */
  
// <generated-code name="initUI">
  
private void initUI() {
      
this.button = new XdevButton();
  
      
this.button.setCaption("Button");
  
      
this.button.setSizeUndefined();
      
this.setContent(this.button);
      
this.setSizeFull();
  }
// </generated-code>
  
  
// <generated-code name="variables">
  
private XdevButton button;
  
// </generated-code>
}

Preview directly on Mobile Devices

RapidClipse provides a pre-configured server environment that allows you to test your application locally with just one click. By scanning a QR code, you can access your app on your tablet or smartphone and test it under real conditions. Each change in the UI designer is then automatically pushed to your device.


Preview Wizard


RapidClipse App Preview

RapidClipse is powered by

XDEV

This website uses cookies. By continuing to use this site, you agree to this cookie usage. You can learn more in the Privacy policy