Fork me on GitHub

Ext4j: Sencha's Ext JS for the Java Platform


Ext4j Icon

Simple, Familiar, Powerful API



        Button button = new Button("Ext Button");
        button.setScale(ButtonScale.LARGE);
        button.setXY(100, 100);
        button.setIcon("user.png");
        button.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                Window.alert(event.getSource().getText());
            }
        });

Declarative User Interface

  
<x:Panel ui:field="mainPanel"
  title="Declarative UI for Ext JS"
  width="400"
  height="400"
  x="400"
  y="50"
  draggable="true"
  collapsible="true">
           
     <x:Button ui:field="myButton" text="Click Me"  x="100" y="100" />

</x:Panel>

Built-In MVP Support

public class LoginPanel extends Composite {
   ........
    
    @UiField
    Button loginButton;

    public LoginPanel() {
        initWidget(uiBinder.createAndBindUi(this));
    }
     ........
   
    @UiHandler("loginButton")
    void handleClick(ClickEvent event) {
        logger.log(Level.INFO, event.getSource().getText());
    }

}

Real Software Engineering Practices


public class DesktopModuleWindow extends Window {

    private double initialWidth;
   
    public DesktopModuleWindow() {
        
        this.setConstrainHeader(true);
        this.setClosable(true);
        this.setMaximizable(true);
        this.setMinimizable(true);
        this.setSize(500, 500);
        this.setShadow(false);

        .......

      }

}

Typesafe RPC and AJAX Client


RequestBuilder req = new RequestBuilder(RequestBuilder.GET, "index.php");
try {
      panel.getEl().unmask("Loading Data ...");
      req.sendRequest("", new RequestCallback() {
      @Override
      public void onResponseReceived(Request request, Response response) {
        panel.setHtml(response.getText());
        panel.getEl().unmask();
      }

      @Override
      public void onError(Request request, Throwable exception) {
        panel.setHtml("No content found");
        panel.getEl().unmask();
      }
    });
} 
.....

First class Tooling Support



Amazing Results


Build amazing web applications now!

Download Ext4j   See Ext4j in Action
HTML5 templates

Build on a Powerful Foundation

Create standard conform HTML5 applications based on two of the best frameworks : GWT and Ext JS.

Boilerplate-free

First class Tooling

Leverage all the free and powerful tools available in the Java Ecosystem. Run and debug your code in the browser and your IDE.

Share Code

Shared Code

Share code between the client and the server. Reuse your data model, validation and business accross devices and platforms. Don't repeat yourself!

Open Source

Open Source

Join the Ext4j open source community! Ext4j is developed under the Apache License, Version 2.0.

Latest Release
1.0.0 Beta

Get to know the Ext4j library with this first release  Get Started

Source | Release notes | Forums | Docs | Guides

Simple, Familiar, Powerful Java API for Ext JS !

Simple and yet powerful: That's the goal of Ext4j.
This project aims to helps developers build awesome web based applications. For that Ext4j leverage two of the best frameworks on the market: GWT and Ext JS. Ext JS gives access to an amazing desktop application development platform while GWT provides the Java Ecosystem and all its free available tools. With this combination we believe that you will get amazing results with an incredible productivity.

MyApp.java
package com.eemi.ext4jdemo.client;

import com.eemi.ext4j.client.core.ExtEntryPoint;
import com.eemi.ext4j.client.ui.DatePicker;
import com.eemi.ext4j.client.ui.Panel;
import com.eemi.ext4j.client.ui.Viewport;

public class HelloExt extends ExtEntryPoint {

    @Override
    public void onLoad() {

        Panel panel = new Panel("Ext Panel");
        panel.setSize(600, 600);
        panel.setDraggable(true);
        panel.setResizable(true);
        panel.setXY(300, 100);
        panel.setFrame(true);
       

        DatePicker datePicker = new DatePicker();
        datePicker.setXY(10, 10);

        panel.add(datePicker);

        Viewport.get().add(panel);

    }
}

Below is the result. As you can see it's the same as regular Ext JS JavaScript code.

Because it leverages GWT and the Java Platform Ext4j will bring unique capabilities to your Ext JS development :

  • Strong typing : Catch errors at compile time rather than runtime.
  • IDE support at no cost: Use any Java IDE to develop, run, debug and test your application (off course you can still use a text editor if you like).
  • Real Software Engineering practices(Encapsulation, Design pattern, Interface based design, etc...) out of the box.
  • Seamless integration with J2EE and other platforms.
  • Code reuse across devices and platforms(share code between the web, the desktop, android , iOS and others).
  • Progressive enhancement of existing Ext JS Applications written with Javascript
  • Seamless integration with other GWT based libraries
  • Seamless integration between Ext JS and GWT widgets
  • And way more ...

Declarative UIs for Ext JS !

Let's face it : Java is verbose. Writing the user interface in a swing like API can be really tedious as the application grows. This is why Ext4j introduces a declarative way to define the UI for Ext JS applications! Implement real separation of concern by separating the view code with the view logic . The .ui.xml file just serves as a type-safe template(all errors will be caught at compile time). Each template file has a companion Java class that provides access to the fields in the templates and implement the client-side logic.

MyView.ui.xml
<x:Panel title="My Panel"  width="500px" height="500px">
      <x:Button ui:field="myButton" xy="10, 10" text="Click Me" />
</x:Panel>

Attaching an event handler requires just a single annotation and a method that handles the given event.

MyView.java

public class MyView extends Composite {
  ....

  @UiField 
  Button myButton;

  @UiHandler("myButton")
  public void onSave(ClickEvent event) {    
    MessageBox.alert("I was clicked");
  }
}

Templates from HTML files!

Take an HTML file directly from your designer or brand team and use it in your application. No need to battle string concatenation when bringing in design changes. The HTML file will get parsed by Ext4j in a simple and yet powerful way.

myTemplate.html

  

   {firstName}
    

    {firstName}
UserTemplate.java
@TemplateResource(source="myTemplate.html")
interface UserTemplate extends Template{
}
MyApp.java
public class MyApp extends ExtEntryPoint {
@Override
public void onLoad(){
  ....
  Store userStore = StoreManager.getUserStore();

  Template template = (Template) GWT.create(UserTemplate.class);
  String content =  template.getContent().asString();

  DataView view = new DataView(userStore, content);

  Window userWindow = new Window("User Profile");
  userWindow.setLayout(Layout.FIT);
  userWindow.add(view);
  userWindow.show();

  }
}

Share code across platforms and devices !

Ext4j is designed to enable developers to create a new generation of hybrid applications. In the spirit of open source we leverage projects like Lienzo (Rich Graphics toolkit for the web), Touch4j (Java API for Sencha Touch), Flash4j(Java API for Flash) and Titanium4j (Java API for Titanium Mobile) to help you bring even more capabilities in your Ext JS application and share code between the Desktop and mobile platforms.


This page was forked from the Errai Framework Homepage