Announcing Touch4j and Pilot 2.2.7

Hello folks,

We are pleased to announce the release of Touch4j!
Touch4j is our enterprise leading web application framework that leverages the GWT and Sencha Touch frameworks to help developers build high performance HTML5 mobile web applications using Java.

Support for Sencha Touch 2.2.1

This release of Touch4j is compatible with the latest stable release of Sencha Touch (2.2.1). You may notice the versions of Emitrom libraries that bind other frameworks to include their version number as part of the overall string. In the case of Touch4j, this means Version 4 is the major version for the binding, and 2.2.1 is the version of Sencha Touch that is supported. Again, this is a theme that you will start seeing in libraries that are bindings to others (e.g., Touch4j, Titanium4j, and Flash4j).

Sencha Touch 2.2 added support for BlackBerry and Windows Phone, and Touch4j now gives you access to this features.

Enhanced Charting Support

In this release we improved the charting API. Fixed some bugs a made it more intuitive to use. Panel panel = new Panel(Layout.FIT); ToolBar tb = new ToolBar("Touch4j Charting"); panel.add(tb); panel.add(ChartCreator.createLineChart()); ViewPort.get().add(panel);

A real world example can be seen here.

JavaBean support for data driven components

Data driven components like ListDataView or Grid can only work with BaseModel instances. BaseModel wraps a lightweight JavaScripObject allowing easy data transmission between GWT and Sencha Touch. Although this approach works, it forces you to create a class that extends BaseModel and some kind of Data Transfer Object (DTO) to turn your JavaBean into a BaseModel.

What is missing is a way to use your JavaBeans as is, without having to extend the Touch4j base classes.

With the release of Touch4j, it is now possible to use any JavaBeans for data-bound components. This allows you to send your JavaBeans from the server to the client using GWT RPC or any other GWT server mechanism.

Lets assume you have the following JavaBean public class Person { private String lastName; private String firstName; public Person() { } public Person(String lastName, String firstName) { super(); this.lastName = lastName; this.firstName = firstName; } /** * @return the lastName */ public String getLastName() { return lastName; } /** * @param lastName * the lastName to set */ public void setLastName(String lastName) { this.lastName = lastName; } /** * @return the firstName */ public String getFirstName() { return firstName; } /** * @param firstName * the firstName to set */ public void setFirstName(String firstName) { this.firstName = firstName; } public static List<Person> getList() { List<Person> list = new ArrayList<Person>(); list.add(new Person("Cuban", "Marc")); list.add(new Person("Wayne", "Bruce")); list.add(new Person("Doe", "John")); list.add(new Person("Muster", "Max")); return list; } }

As you can see this is a plain old Java object not extending any of Touch4j classes. The 'getList' method could be a service method that retrieves the list of persons from a database.

With Touch4j you can use this class directly in a ListDataView(or any other data driven component) without any modification.

public class HelloTouch extends TouchEntryPoint { @Override public void onLoad() { List<BeanModel> data = ModelLocator.locate(Person.class).createModel(Person.getList()); Store store = new Store(data); final ListDataView listView = new ListDataView("{firstName} - {lastName}", store); TabPanel tabPanel = new TabPanel(); tabPanel.setTabBarPosition(Alignment.BOTTOM); TabItem item = new TabItem("Users"); item.setIconCls(TouchIcons.USER); item.add(listView); tabPanel.add(item); ToolBar tb = new ToolBar("Emitrom - Team"); tabPanel.add(tb); ViewPort.get().add(tabPanel); } }

On line 6 you see how we use the ModelLocator class to turn the List of persons into a list on BeanModel. The conversion from POJO to BeanModel is done automatically for you. Below is the result.

Touch4j also gives you the ability to retrieve the original bean from the BaseModel

listView.addItemTapHandler(new DataViewItemTapHandler() { @Override public void onItemTap(DataView dataView, int index, Element element, BaseModel record, EventObject eventObject, Object eOpts) { BeanModel beanModel = (BeanModel) store.getAt(index); Person person = beanModel.getBean(); Window.alert(person.getFirstName()); } });

Component Support in ListDataView

Being able to display UI Compoments in a ListDataView has been of the most recurrent request from the community. We are glad to announce that as for Touch4j UI Components are now supported in a ListDataView row. Unlike in native Sencha Touch, the API is simple and intuitive.

listView.setUseComponents(true); listView.setItemComponentRenderer(new ListItemComponentRenderer() { @Override public List<Component> getComponents() { List<Component> toReturn = new ArrayList<Component>(); toReturn.add(new Button("Delete", UI.DECLINE)); toReturn.add(new Button("Edit", UI.CONFIRM)); return toReturn; } });

Swipe to delete plugin

Based on the new UI Components support in the ListDataView item we added a new pluging the ListDataView: The SwipeToDelete plugin. listView.setPlugins(new PullRefresh(), new SlideToRemove());

We are convinced that you will make good use of this new plugin.

UberGrid Support

This release also add support for the awesome UberGrid component. If you are looking for a powerful grid component to display your data, UberGrid is the right component for you. Please visit the UberGrid page for details on pricing; it is worth mentioning we have no connection to the Bryntum folks, we just think their component is very nice, and want to provide that option to Touch4j users. List<BeanModel> data = ModelLocator.locate(Person.class).createModel(Person.getList()); final Store store = new Store(data); UberGrid grid = new UberGrid(); grid.setStore(store); UberGridColumn col = new UberGridColumn("Firstname", "firstName"); col.setFlex(1); grid.addColumn(col); col = new UberGridColumn("LastName", "lastName"); col.setFlex(1); grid.addColumn(col); TabPanel tabPanel = new TabPanel(); tabPanel.setTabBarPosition(Alignment.BOTTOM); TabItem item = new TabItem("Users"); item.setIconCls(TouchIcons.USER); item.add(grid); tabPanel.add(item); ToolBar tb = new ToolBar("Emitrom - Team"); tabPanel.add(tb); ViewPort.get().add(tabPanel);

Cordova 2.7 Support!

Going native is an important part of mobile development. Emitrom makes it easy by providing a 100% implementation of the Cordova (PhoneGap) API. This is made possible through version 2.2.7 of out Pilot library. As with Touch4j, Pilot bears an Emitrom version (2), plus the version of the library it supports (2.7). As such, this release of Pilot is 2.2.7. if (Device.isReady()) { Notification.get().alert("Touch4j", "You are using " + Device.get().getCordovaVersion()); }

In this release of Pilot we also added support for the PhoneGap Build PushNotification. Also, we especially want to thank Mvniekerk for his incredible work (among others) on the BlackBerry support for PushWoosh. The PushPlugin from PhoneGap Build does not have support for BlackBerry, so Michael's contribution is a welcome addition to Pilot.

The future

Again, we thank the community for your bug reports, questions, and suggestions which have helped us in shape and deliver this release. Pilot 2.2.7 and Touch4j are a big advancement in our product line and we hope you enjoy using it. Still, we are planning on adding support for more amazing features in the future, so stay tuned to this space or in our Google+ community.

Download Touch4j and Pilot 2.2.7 today.

Happy coding!

The Emitrom Team