Clicky

Announcing Touch4j 4.0



We're excited to announce the General Availability of Touch4j 4.0!
Touch4j is our popular Java-based web application framework that leverages the Google Web Toolkit compiler and Sencha Touch to help developers build high performance HTML5 mobile web applications.

Developing in the Open

The Touch4j codebase (along with our other products) is now hosted on GitHub! This gives everyone the possibility to follow the framework's evolution and even contribuate to it.

Breaking Changes!

In this release we are moving away from com.emitrom.gwt4.touch to com.emitrom.touch4j.

We are aware that this will break a lot of code out there--sorry!--but this new namespace is more inline with our product name and will give us more flexibility going into the future. We trust your IDE will do most of the refactoring legwork, so the package name transition should be fairly painless.

Another breaking change is that all UI components are now under com.emitrom.touch4j.ui. The reason for this change is a better support for GWT UI Binder

Support for Sencha Touch 2.1

This release of Touch4j is compatible with the latest stable release of Sencha Touch (2.1).

Full UI Binder Support

The previous release of Touch4j introduced support for UI Binder. UI Binder enables a declarative way to define the User Interface, making it easier for non-programmers to understand the code and participate in the developement process. All UI components in Touch4j now support UI Binder. <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:touch="urn:import:com.emitrom.touch4j.client.ui" > <touch:Panel ui:field="container" > <touch:ToolBar docked="top" title="My ToolBar"> <touch:Button text="Back" ui="back" /> <touch:Spacer /> <touch:Button ui="plain" iconMask="true" iconCls="info" ui:field="infoButton" /> </touch:ToolBar> <touch:GoogleMap useCurrentLocation="true" /> </touch:Panel> </ui:UiBinder> Like you can see, the code is simpler and less verbose than if it was written in pure Java. Below is the result.

Handler Registration

Touch4j 4.0 now includes the ability to unregister event handlers on a given component. package com.emitrom.touch4j.helloworld.client; import com.emitrom.touch4j.client.core.EventObject; import com.emitrom.touch4j.client.core.Touch; import com.emitrom.touch4j.client.core.TouchEntryPoint; import com.emitrom.touch4j.client.core.handlers.CallbackRegistration; import com.emitrom.touch4j.client.core.handlers.button.TapHandler; import com.emitrom.touch4j.client.laf.UI; import com.emitrom.touch4j.client.ui.Button; import com.emitrom.touch4j.client.ui.MessageBox; import com.emitrom.touch4j.client.ui.Panel; import com.emitrom.touch4j.client.ui.ToolBar; import com.emitrom.touch4j.client.ui.ViewPort; /** * Entry point classes define <code>onModuleLoad()</code>. */ public class HelloTouch extends TouchEntryPoint { private CallbackRegistration registration; @Override public void onLoad() { Panel panel = new Panel(); ToolBar toolBar = new ToolBar(); toolBar.setUi(UI.NEUTRAL); Button button = new Button("Tap Me"); registration = button.addTapHandler(new TapHandler() { @Override public void onTap(Button button, EventObject event) { MessageBox.alert("Hello MyTouch " + Touch.getVersion()); registration.unregister(); } }); toolBar.add(button); panel.add(toolBar); ViewPort.get().add(panel); } }
The code above will add a TapHandler on the button and remove it after the first click. So that subsequent click will have no effects. Pretty cool no ? :)

Going Native With Titanium

Native support has always been present in Touch4j through our Pilot library. Pilot contains a Java binding for Apache Cordova (PhoneGap), giving you the ability to natively deploy your Touch4j application to Android, iOS or any other platform supported by PhoneGap.

Today we are pleased to announce that Touch4j now also support deploying your app to Appcelerator Titanium Mobile!
Touch4j 4.0 ships with a bridge class that gives access to the Titanium API through our Ti4j library--and all that in Java! public class Touch4jApp extends TiTouchEntryPoint { @Override public void onWebStart() { Panel p = new Panel(); Button btn = new Button("Tap Me"); btn.setCentered(true); btn.addTapHandler(new TapHandler() { @Override public void onTap(Button button, EventObject event) { // Fire an event that will be handled on the ti4j side App.get().fireEvent("touch4jEvent", null); } }); p.add(btn); ViewPort.get().add(p); } @Override public void onNativeStart() { App.get().addEventHandler("touch4jEvent", new EventHandler() { @Override public void onEvent(TiEvent event) { // handle the event send from Touch4j Titanium.alert("Emitrom", "Ti4j and Touch4j for the win "); } }); Window w = new Window("Ti4j and Touch4j"); w.add(Touch4jView.get()); w.setFullscreen(true); w.open(); } }

Improved Grid Component

We cleaned the API of the Grid component, making it easier and more intuitive to use. The grid is also now backed by a ListDataview, inherently offering all of its capabilities. Store store = new Store(Company.getList()); Grid g = new Grid(); g.setStore(store); GridColumn column = new GridColumn(); column.setHeader("Company"); column.setDataIndex("name"); column.setWidth("50%"); column.setStyle("text-align:center;"); g.addColumn(column); column = new GridColumn(); column.setHeader("Price"); column.setDataIndex("price"); column.setWidth("50%"); column.setStyle("text-align:center;"); g.addColumn(column); g.addFeatures(GridFeature.ITEM_DISCLOSURE); g.getView().setIndexBar(true); g.getView().addItemTapHandler(new DataViewItemTapHandler() { @Override public void onItemTap(DataView dataView, int index, Element element, BaseModel record, Object eventObject, Object eOpts) { Window.alert(record.get("name")); } }); ViewPort.get().add(g);

Brand new SlideNavigation Compoment

This relase also introduces a brand new component called SlideNavigation. This component will let you create a Facebook-like slide navigation for your application. The API is simple and intuitive: SlideNavigation nav = new SlideNavigation(); ToolBar tb = new ToolBar("News Feed"); tb.setDocked(Dock.TOP); Panel p = new Panel(); p.add(tb); p.setHtml("Hello World"); SlideNavigationItem item = new SlideNavigationItem("News Feed", "Favorites", p); item.setSlideButton(true); nav.addItem(item); tb = new ToolBar("Maps"); tb.setDocked(Dock.TOP); p = new Panel(Layout.FIT); p.add(tb); p.add(new GoogleMap()); item = new SlideNavigationItem(); item.setTitle("Maps"); item.setGroup("Apps"); item.setSlideButton(true); item.setContainer(p); ViewPort.get().add(nav);

Cordova Live API Explorer

Last but not least, we are also releasing the source code of the Cordova Live API Explorer on GitHub This application contains a demo illustrating how to access the PhoneGap API using Touch4j. The picture below shows which APIs are covered.

Touch4j 4.x Roadmap

Touch4j 4.0 lays the groundwork for the next generation of Java-based mobile web development. 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.

Again, we thank the community for your bug reports, questions, and suggestions which have helped us in shape and deliver this release. Touch4j is a big advancement in the product line and we hope you enjoy using it.



Happy coding!

The Emitrom Team

It will be wonderful if the demo can be updated to the new namespaces!

Good job!

Thanks in Advance
JM

Thank you.
The new demo with the updated namespace is available on GitHub:
https://github.com/emitrom/touch4jks

Cheers,

Pat

i found this demo(https://github.com/emitrom/touch4jks) based touch4j 3.0

Hi!,

I just recently downloaded the KS demo from https://github.com/emitrom/touch4jks , with the updated namespace, but the chart part is not in the version, is there another version with the updated namespace and the chart part implemented ?

Greetings

Starting with Sencha Touch 2.1 Sencha introduced a new Charting API.
We are working on a new Demo App with the Chart API.
Hopefully we will be able to share that soon.
In the meantime feel free to reach out may you have any questions.
Cheers,
Pat

Hi!

Thx for the reply, so....

1.-Charts are not supported in Touch4j 4.0.0, right ?

2.-Where can I download Touch4j 2.2 to work with charts ?

Thanks in advance!

Below the answers to your questions:

1- Yes Chart are supported in Touch4j 4.0.0 ! We just dont have sample code for the general public (yet). We are looking into putting something out soon though. Probably in the 4.1 release that's around the corner.

2- You dont need 2.2. Like I was saying in 1) We do have a Chart API in Touch4j 4.0.0. Only examples are missing. If you urgently need some charting example please contact us via support@emitrom.com

Cheers,

Pat

We are slowly starting to roll out the chart demo app.
Please check it out at http://touch4j-charts.appspot.com/.
For now only the 2 first demo work.
But we will add more before the 4.1 release.
Cheers,

Pat