HTML5 GUI-Builder

HTML5 GUI-Builder auf Basis von Vaadin.
Beeindruckende UI-Controls auf Basis von Google Web-Toolkit.
Oberflächen per Drag&Drop designen und direkt mit der Datenbank verbinden.

Moderne HTML5-Oberflächen mit Vaadin

Beeindruckende HTML5 Oberflächen die sich an jede Displaygröße anpassen und auf allen Plattformen lauffähig sind.


Cross-Platform

Vaadin als GUI-Framework

  • Gesamte HTML5 Oberfläche in Java schreiben
  • UI Widgetset basiert auf Google Web-Toolkit (GWT)
  • Individuelles Styles mit SCSS
  • Dynamische Generierung des Clients
  • Vollautomatisierte Client-Server Kommunikation
  • Serverseitige Architektur bietet optimale Sicherheit
  • Kein Kontakt mit HTML und JavaScript und Sie müssen sich nicht um DOM Manipulationen, Browser History und andere Low-Level Probleme kümmern.

Vaadin basiert auf Google Web-Toolkit

  • GWT Komponenten sind die Basis für das Vaadin UI Widgetset
  • Der JavaScript Code aller GWT Komponenten ist bereits für alle wichtigen Browser optimiert
  • Eigene GWT-Widgets lassen sich in Java schreiben
  • GWT-Compiler generiert den gesamten JavaScript Code

Beeindruckende UI-Widgets

Beeindruckende HTML5 Oberflächen die sich an jede Displaygröße anpassen und auf allen Plattformen lauffähig sind.


Panel

Table & Tree-Table

Die Table ermöglicht die Darstellung von Text und Bilder, erlaubt Sortierungen und bietet automatisiertes Lazy- Loading, d.h. die Datensätze werden erst beim Scrollen nach unten nachgeladen. Die Struktur wird automatisch durch Zuweisung eines Entities erzeugt.
TreeTable

Menus

Menüleisten lassen sich blitzschnell konstruieren, indem Sie einfach per drag-and-drop weitere Menüpunkte in das vorhandene Menü einhängen. Anschließend lässt sich per Mausklick für jedes Menü-Item ein Event generieren.
MenuBar

Accordion

Per Drag&Drop können Sie die Accordion-Komponente schnell und einfach mit belieibigen Widgets erweitern, die dann automatisch als neue Tabs angezeigt werden.
Accordion

Richtext Editor

Der Funktionsumfang der Richtext Editor Komponente kann via Properties schnell und einfach individuell konfiguriert werden.
Richtext Editor

Databinding zu Hibernate

Hibernate Entities lassen sich kinderleicht per Drag&Drop mit UI-Widgets verknüpfen.
Der entsprechende Abfragecode wird automatisch generiert.


Vaadin
Hibernate

Intuitive Layout-Manager

Mit Hilfe von Layout-Manager lassen sich Oberflächen erstellen, die sich automatisch flexibel an jede Displaygröße anpassen. RapidClipse bietet Ihnen intuitive Assistenten, sodass Sie sich nicht mit der komplizierten Layout-Manager-Programmierung auseinandersetzen müssen und sich dadurch eine Menge Entwicklungs- und Testaufwand sparen.


GWT Laoyut


GWT Laoyut

Formular Generator

Mit dem Formular-Assistenten können Sie für jede Datenbanktabelle ein passendes, voll funktionsfähiges Formular generieren lassen. Auch mehrspaltige und selbst über mehrere Tabs verteilte Formulare sowie kombinierte Eingabe- und Such-Formulare sind möglich. Alle Controls lassen sich anschließend beliebig mit der Maus verschieben und neu anordnen.


Form Wizard


Generated Form

Master-Detail Ansichten

Für die Umsetzung von Master-Detail Ansichten müssen Sie lediglich zwei UI-Widgets miteinander verknüpfen, welche die entsprechend zueinander passende Daten enthalten. Die notwendigen Datenbankabfragen generiert RapidClipse automatisch für Sie.


MasterDetail

Konvertierungs Assistent

Mit dem Konvertierungs-Assistenten können Sie Ihren Formular-Controls nicht nur Formatierungen zuweisen, z.B. Währungszeichen oder Datums-Format. Auch häufig benötigte Konvertierungen und Berechnungen werden standardmäßig unterstüzt.


con_date


con_numer

Table Designer

Mit dem Table-Editor können Sie für jede einzelne Spalte zahlreiche Einstellungen vornehmen, ohne komplizierte Table-Renderer schreiben zu müssen, u.a. Sichtbar- und Sortierbarkeit, Skalierverhalten, Beschriftung sowie Formatierung. Auch Computed-Fields, Internationaliserung und das Einbinden weiterer GUI-Widgets lässt sich auf einfache Weise umsetzen.


Format Wizard


Format Wizard Result

Validierungs-Assistent

Eingabe-Prüfungen müssen Sie nicht selber programmieren. Mit dem Validation Assistent können Sie sämtlichen Formular-Controls sowie Ihren Entities leistungsfähige Validatoren per Mausklick zuweisen. Auch Regular Expressions werden unterstützt. Neben den Standard-Validatoren können Sie auch eigene Validatoren per Annotation einbinden.



Validation Wizard

Navigations-Assistent

Der Aufruf von Seiten (Views) und die Übergabe von Parameter ist mit dem Navigations-Assistenten simpel. Das gesamte View-Management (u.a. Browser Vor und -Zurück) ist vollautomatisiert, sodass Sie sich darüber keine Gedanken machen müssen.



Navigation Wizard

Styling mit SCSS

Mit SCSS können Sie das Aussehen einzelner Controls bis hin zur gesamten Oberfläche individuell abändern. Umfangreichere Style-Definitionen lassen sich dabei zu Style-Variablen und ganzen Style-Klassen zusammenfassen, die Sie einem Widget im UI-Designer als Eigenschaft (Property) zuweisen können.


Button
Properties
Button Css3

CSS3+Sass

Eigene UI-Komponenten

Mit RapidClipse können Sie alle UI-Widgets mit zusätzlichen Funktionen erweitern, indem Sie einfach per Assistent von der jeweiligen Basis-Komponente ableiten. Ihre neuen Komponenten integrieren sich automatisch in die Widget-Palette, sodass Sie RapidClipse auf diese Weise grenzenlos erweitern und Ihre Widgets auch weitergeben können.


NewUIElement


CustomButton

Internationalisierung & Lokalisierung

RapidClipse bietet Ihnen einen Assistenten, der die Internationalisierung von Oberflächen nach dem Standardverfahren in Java vollständig automatisiert. Zuerst wir der gesamte Text einer Oberfläche ausgelesen, in Resource-Dateien mit Länderkürzel ausgelagert und durch Variablen ersetzt. In der Sprachdatei müssen Sie dann nur noch zu jedem Eintrag die passende Übersetzung angeben. Zur Laufzeit werden alle Texte je nach Spracheinstellung automatisch aus der passenden Resource-Datei ausgelesen und auf der Oberfläche angezeigt. Länderspezifische Angaben wie z.B. Datum, Uhrzeit, Währung etc., lassen sich in Java ebenfalls automatisch lokalisieren.


Externalize Settings

Deklarativ & Bidirektional

Mit RapidClipse können Sie Ihre Oberflächen auch deklarativ mit XML erstellen. GUI-Builder und XML- Code werden bei jeder Änderung automatisch synchronisiert (bidirektional). Auf Basis des XML-Codes erzeugt RapidClipse dann den finalen Javacode auf Basis von Vaadin.


GUI-Builder - GUI Entwicklung mit Drag&Drop

GUI Editor


XML Editor - GUI Beschreibung im XML-Editor

XMLDesigner


XML Code - GUI Entwicklung direkt im 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 - Ergebnis ist automatisch generierter 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>
}

Live-Vorschau auf mobilen Geräten

RapidClipse stellt eine bereits vorkonfigurierte Server-Umgebung zur Verfügung, sodass Sie Ihre Anwendung mit nur einem Mausklick lokal testen können. Durch Scannen eines QR-Codes können Sie Ihre Anwendung auch auf Ihrem Tablet oder Smartphone aufrufen und unter realen Bedingungen testen. Dabei wird jede Änderung im UI-Designer wird automatisch auf Ihr Gerät gepusht.


Preview Wizard


RapidClipse App Preview

RapidClipse is powered by

XDEV

Diese Website verwendet Cookies. Durch die weitere Nutzung dieser Website stimmen Sie der Verwendung von Cookies zu.
Weitere Informationen finden Sie in Datenschutz