Building Enterprise Java Web Apps—Your Questions Answered

In our recent webinar Best Practices for Building Enterprise Java Web Apps, we presented tips on building Gxtapplications with GXT and GWT. In addition, we answered several questions around the future of these frameworks. For the benefit of a wider audience, I’d like to take this opportunity to recap some of those questions and answers.

You can also watch the webinar recording.

Can we have a GXT 2.3 version that works with GWT 2.7?

Yes. GXT 2.3.1a works with GWT 2.7. It will be the last GXT 2 release to do so, however. The recommended GXT version to use with GWT 2.7 is 3.1.2. GWT is moving pretty quickly and is increasingly incompatible with older versions of GXT (for example, GWT 2.8 will replace CSS with GSS). It is no longer practical for us to support the latest versions of GWT in both GXT 2 and GXT 3.

Do you see a resurgence in the usage of GWT as opposed to JavaScript frameworks like Angular, etc?

I definitely see a resurgence in GWT. Anecdotally, this year’s GWT.create conference had a lot more energy than last year (and a few more attendees, as well). Last year, the GWT toolchain was less than ideal; however, with GWT 2.7, super dev mode now offers a faster development cycle time than classic dev mode. It’s well integrated with Eclipse and IntelliJ now and offers brand new possibilities like the ability to debug a GWT app running on a mobile browser or WebView with Chrome remote debugging. While Angular, Sencha Ext JS, and many other JavaScript frameworks (remember JQuery? Backbone?) continue to grow in popularity, the number of worldwide GWT developers continues to grow steadily as well. To get a better sense of where GWT is headed, I highly recommend watching the GWT.create videos.

What kind of long-term support guarantees does Sencha offer for making sure the display/behavior of GXT apps across OS and browser combinations continues to work? If we release a product with a lifespan of 5 years, can we be sure it will still work 5 years from now with the latest browsers at that time?

In general, we aim to maintain support for all browsers that are supported by current versions of GWT. We are still offering patches through our support channel to resolve specific issues in GXT 2.x on modern browsers, for example. However, as I mentioned above, as GWT itself moves forward to support newer browsers and drop old ones, we will move GXT forward with it, so you may need to migrate to a newer version of GXT in order to support the latest browsers.

Can you tell us a little bit about the future of GXT? Especially mobile support and compatibility with GWT 3.0.

We are currently working on adding touch / gesture support to GXT to help our customers take their existing apps from desktops to tablets with minimal effort. We will be showcasing the upcoming version of GXT with tablet support at SenchaCon 2015. As far as GWT 3 is concerned, we have a seat on the GWT Steering Committee and generally track changes in GWT very closely. For example, in GXT 3.1.x, we offered support for super dev mode in GWT 2.7 even before it was released. And we are already working on migrating GXT 3.1.x to use GSS for GWT 2.8. So while we don’t yet know exactly what GWT 3 may bring, we plan to support it in GXT 3 and the upcoming version of GXT.

Thank you

Thanks to everyone who attended the live webinar and participated in the Q&A. It’s always great to hear from you. If you asked a question that didn’t get answered, remember you can always ask in our forums and we’ll do our best to answer it.

SenchaCon – April 7-9, 2015

Don’t forget to register for SenchaCon while advance pricing is still available. We have a few GXT talks and two GXT training sessions planned. Email any of the GXT team members that you know or email me to receive a 20% discount code for SenchaCon 2015. We look forward to seeing you there!

Gxt No Comments   Read more

Taking a Look at Sencha GXT and GWT

I’m David Chandler, the new Developer Advocate for Sencha GXT. Having recently joined the Sencha GXT team, I wanted to take the opportunity to reflect on changes in the GWT ecosystem since GWT became fully open source in 2012 and talk about what’s coming up for Sencha GXT. You can learn about Sencha GXT in our upcoming webinar.

Best Practices for Building Enterprise Java Web Applications

February 10, 2015

10:00am PST

Best Practices for Building Java Web Applications

I am happy to report that the GWT ecosystem appears stronger than ever. According to Google’s Ray Cromwell, there are now 150,000 30-day active users of GWT, which makes it one of the most popular Web frameworks. This represents an increase of about 50% since the project became fully open source in 2012. In the last two years, GWT has enjoyed active community participation from ArcBees, Sencha, Vaadin, and many individual contributors besides Google.

Last year’s GWT.create conference drew over 700 attendees in the US and Europe and this year’s conference promises exciting updates on super dev mode, GSS (Closure stylesheets), Java 8, and the innards of Google’s brand new Inbox app, which is 70% GWT.

One major concern of GWT developers has been the gradual disappearance of classic dev mode, which has long been one of GWT’s strongest features because of browser plugin API changes. There was a brief period in which the tooling story was pretty ugly, especially on Mac, because Chrome and Safari both removed the API which was used by the GWT dev mode plugin. However, it appears that Google is not about to let 3,000 GWT developers within the company go without tooling. Thanks to GWT 2.7 and incremental compilation, the performance of the long-awaited super dev mode is now superior to classic dev mode for page refreshes and has the advantage of being completely platform independent. In fact, you can run super dev mode on a phone or tablet browser and debug on the desktop with Chrome Developer Tools via a USB connection. This was not possible with classic dev mode and is a huge boon to mobile Web developers.

While earlier versions of super dev mode were somewhat hard to configure and run, the latest versions of IntelliJ IDEA (14) and Google Plugin for Eclipse make it painless to launch SDM for GWT versions 2.5 and later, thanks to GWT community contributors including Manolo Carrasco (Vaadin) and Brandon Donnelson (Sencha). To see it in action, check out these screencasts:

Running GWT 2.7 Super Dev Mode in Eclipse with SDBG

Running GWT 2.7 Super Dev Mode in IDEA

GXT Update

Building on the success of GWT itself, the Sencha GXT team is planning major improvements for the GXT 4.0 release. The mobile web story gets better every day as mobile devices become more powerful. The recent unbundling of WebView from the Android OS and the ability to run super dev mode on WebView-based apps make mobile GWT development more attractive than ever. Sencha is building on these strengths by adding mobile-friendly features to GXT 4.0:

  • Touch support
  • Momentum scrolling
  • A new “Crisp” theme optimized for mobile

Also coming soon is a new graphical theme builder to make it easier to create custom themes. GXT 4.0 will make it easier than ever to create testable HTML5 apps that look good across desktop and tablets.

Prior versions of Sencha GXT

GXT 4.0 will incorporate bug fixes from the GXT 3.x platform, making it an easy migration for those who are currently on GXT 3.x. Sencha is making a significant new investment in the GXT platform. Besides new features like touch support, you can expect to see a lot more learning resources, screencasts, sample apps, and professional GXT training to make it easier to get started and build robust HTML5 application across multiple devices.

On a personal note, I am impressed with the capability and dedication of the growing GXT team. The team triages and fixes bugs daily, provides quality forum support, and has made significant contributions to the GWT community, especially the tooling, which is critical for GWT developers. I am pleased to be part of the team and am glad to be an active member of the GWT community again.

To stay abreast of the latest in GXT / GWT development, join our G+ community or see us at one of our upcoming events including GWT.create Silicon Valley and GWT.create Munich.

We will have several GXT tracks this year at SenchaCon 2015 and hope to see you there!

best-prac.jpg 3 Comments   Read more

Getting Started with GWT Super Dev Mode

Super Dev ModeIf you’ve been using GWT in the last few months, you’ve undoubtedly noticed that various browsers have been removing support for classic Dev Mode. This change has been a long time coming. It helps to ensure better performing browsers and plugins, but puts a kink in debugging GWT applications. The future is in Super Dev Mode, so we’ve been testing it regularly, making sure that GXT applications will work correctly in it, and improving the development process.

As of GWT 2.6.1, supported by GXT 3.1, Super Dev Mode works in all browsers on all operating systems. The next version of GWT will continue to streamline the development workflow, but until it gets here, we’ve been working on the Eclipse plugin to streamline getting Super Dev Mode running in your project.

Any project that uses Super Dev Mode must use a linker that supports it. Most projects use the default linker, and up until GWT 2.6.1, that is the ‘std’ linker, which loads the content of the application in an iframe. As of GWT 2.7, this default will change to xsiframe, but for now, we must modify our application to use it:

<!-- project.gwt.xml - enables SDM -->
<add-linker name="xsiframe"/>

Using Super Dev Mode or SDM means running two servers, one for the web application and one for the Code Server that compiles classes for SDM when the compile button is pushed on the web page or in the bookmark. So in the future, classic Dev Mode is being modified to include a
-superDevMode argument to start the SDM Code Server for SDM debugging. This means having classic Dev Mode arguments but with SDM debugging all in one launch configuration package. To back port this feature in Google Plugin for Eclipse, a legacy jar is being added and used to override current Dev Mode bootstrapping to provide a seamless transition to the SDM experience.

Start by right clicking on a project and running the “Web Application (GWT SDM)” shortcut, which will create a new launch configuration.

Super Dev Mode

This produces a Development Mode tab that contains a quick link to load the browser for debugging.

Super Dev Mode

Once the browser initializes, it will start the first Super Dev Mode compiling.

Super Dev Mode

While the Code Server provides bookmarks for “Dev Mode on”, “Dev Mode off” and “Compile”, there is a new compile button overlayed on the application that can conveniently compile the application after a change. It’s found in the lower right hand corner of the App. This will recompile and reload the application, and the output can be viewed in Eclipse console.

Super Dev Mode

Changing around launch configuration is done by editing the application launch configuration. Both “Super Development Mode” or “Classic Development Mode“ can be used to debug the application, although Classic Dev Mode will have to use the older browsers.

Super Dev Mode

At this point, you can make changes to your application code and see them in the browser by clicking the “GWT” compile button again. You can also simply refresh the page to reload it without recompiling — handy for testing the app when you aren’t actively making code changes.

Check out this screencast demonstrating the steps above:

At the time this article was written, this new addition to the plugin hadn’t yet shipped, but it will be going out soon. The improvements will make it easier to get started with Super Dev Mode in 2.5.x to 2.6.x+ and streamlines the transition to Super Dev Mode. GWT 2.7 also has more changes to enhance the performance and development experience as well.

20140702-gwt-super-dev.jpg 18 Comments   Read more

Announcing Sencha GXT 3.1

On behalf of the entire Sencha GXT team, I’m pleased to announce the general availability of Sencha GXT 3.1. It has been just over two months since we announced the public beta, and the feedback we received was tremendous. We have addressed several issues reported via the public beta forums. Thank you to all the beta testers. Your feedback has been really valuable.

GXT 3.1 introduces the new Theme Builder (a new tool for theming GXT applications), the Neptune theme built entirely using the Theme Builder, and adds support for GWT 2.6.

If you’re an existing Sencha GXT commercial customer with a valid Standard or Premium support subscription, you may download GXT 3.1 from the GXT upgrade page, or by logging into the Sencha support portal, or from our commercial Maven repository. We have also updated our docs to include guides for the new features.

If you are not an existing customer and would like to try GXT 3.1, please visit our download page or the GXT 3.1 GPL Maven repository. You’ll find everything you need to upgrade your projects or get started with a new one.

GXT 3.1 Theme Builder

The Theme Builder is a tool that saves simple configs in a file and generates a jar with all of the appearances necessary to theme a GXT app. It almost eliminates the need to manually theme each application. You can generate an entirely new theme at the framework level, and then reuse it across all your applications. We’re thrilled to hear from our early adopters that this feature will help them to achieve significant improvements in developer productivity.

The config files for the Theme Builder allow use of CSS3 values such as border radius and gradients, and the tool creates appearances that can be used across modern and legacy browsers. With over 350 configuration properties, almost all widgets and components available in GXT can be themed. For any widgets displaying text, the font family, size, color, weight can be specified via a single config. For widgets with borders, the color, width, style can also be specified. In many widgets, padding and spacing is configurable, as well as background colors, and sometimes even gradients.

The Theme Builder requires Java 7, but the code generated works beautifully with Java 6, and GXT 3.1 continues to support Java 6.

Neptune Theme

This release also includes the new Neptune theme, generated entirely using the Theme Builder, with no custom HTML, CSS, images or Java.

GXT3.1 GA Released

You can use Neptune (or whatever new theme you create) as your default theme by first moving to GXT 3.1 and then adding the gxt-theme-neptune.jar to your project. The following inherits statement needs to be added to your module file:

&ltinherits name=&quotcom.sencha.gxt.theme.neptune.Theme&quot/&gt

GWT 2.6

With GXT 3.1, we have added support for GWT 2.6, but it comes at the cost of breaking some compatibility with GWT versions 2.4 and 2.5. Any project that adopts GXT 3.1 will require GWT 2.6. Moving to GWT 2.6 comes with many fixes and improvements over GWT 2.5.1, which are documented in the GWT 2.6 release notes.

Also, we have removed official support for IE6 and IE7 in GXT 3.1 (because GWT 2.6 no longer supports these browsers). The code for IE6 and IE7 support is still included in the framework, so you can add support for IE6 and IE7 by compiling it yourself, but it will no longer be supported by Sencha.

We hope you enjoy the release, and we would like to hear how you use the Theme Builder to build amazing application experiences.

gxt-3.1-ga-released-teaser.png No Comments   Read more

GXT Customer Spotlight – Logic9s ClearFactr

Logic9sLogic9s develops scalable software solutions that simplify data complexity. Our premier product is ClearFactr™, a SaaS application that combines a Self-Describing Spreadsheet®, a powerful simulator, a suite of analytics, and the ability to easily share and monitor everything with others. Logic9s targets a broad audience of traditional spreadsheet users who have experienced the workflow pains of models and formulas that are impossible to understand, analytics that are cumbersome to use, and poor communication.

A typical use of ClearFactr might be entrepreneurs looking to develop a financial model for their new company, and then sharing that plan, including the ability to run simulations on it, with a community of investors. Both parties benefit from the Self-Describing Spreadsheet.

Logic9s

The Self-Describing Spreadsheet was built with the Sencha GXT Grid widget

Each party also gets to configure, run and save simulations based on their own assumptions, and then they can compare and contrast the results. Patent-pending analytics like the Sensitivity Analyzer use unique visualization techniques to draw attention to important drivers and relationships within the plan that might otherwise go unnoticed.The owner of the plan, all the while, can see who’s really interacting with things, so they know how to prioritize their follow-up.

The front end of ClearFactr is built entirely with Sencha GXT. Amazon Web Services drives the rest of the app.

Why We Chose Sencha GXT

We wanted to leverage Java in a front-to-back fashion. Google Web Toolkit fit that bill perfectly, but left us wanting for the elaborate user interfaces we were envisioning. GXT, conceived and built in Java from the ground up, was the clear choice over some other alternatives we surveyed and experimented with. The cohesive design and architecture of GXT shines through its excellent Javadoc. Class and method names are completely intuitive, and our many years of Java Swing history translated perfectly to GXT within hours. BorderLayoutContainer for example, modeled after Swing’s BorderLayout class, forms the basis for ClearFactr’s highly interactive Dashboard. The relationships between the various classes and the implicit design patterns are tried-and-true and correspondingly powerful.

The GXT Grid widget dramatically outperformed alternatives in rendering and navigation speed, including in “dev mode”, which allows our developers to be that much more productive. Working with Sencha engineers, we made some important customizations to the widget to deliver the kind of user experiences we needed. We often hear comments like: “I can’t believe this isn’t a native desktop app.” And we’re just getting started.

Logic9s

ClearFactr’s Cell Ancestry feature was built with GXT Grid, TabPanel, Slider, MenuItems and more

The Sencha GXT charting library was a clear standout as well. Again, the API was the selling point, providing a completely natural integration to ClearFactr’s elaborate front-end data structures of analytical results. The rendering capabilities, and the ease with which these could be customized, further sealed the deal.

Logic9s

ClearFactr’s Simulation Summary Chart panel was built with the Sencha GXT charting library

Business Value of Using GXT

The greatest value of Sencha GXT is its architecture-neutral stance and full embrace of Java’s history and feature set. The API is built around Java Generics, so the UI code can easily and naturally work with real business objects containing powerful behaviors, not just simple data structures. Better yet, those behaviors can also be easily accessed at the server-side via the ‘shared’ package every GXT app supports.

Sencha isn’t in the server business, so they’re not trying to push a particular application architecture at you. Using GWT-RPC to communicate with AWS Elastic Beanstalk, for example, is trivially simple. It delivers excellent performance and scalability, affords complete compile-time type safety (which yields a completely self-documenting codebase that dev tools like Intellij IDEA can make the most of) and allows for the easiest, most maintainable gateway to ClearFactr’s highly parallelized, multi-component backend.

I’m a developer with many years of large-scale end user application development experience, but not on the Web. All of the benefits above allowed me to transition to a high-performance, highly scalable, Web-centric platform in short order. Most importantly, the resulting code base is a pleasure to work with, so it allows us to stay focused on understanding what our customers want and delivering those solutions without fighting a UX framework.

Our Advice to New Developers

When coming up the GXT learning curve, definitely start with the excellent Sencha GXT Explorer showcase. It’s filled with examples that demonstrate both capabilities and best practices. But if you need something really special, don’t hesitate to reach out to Professional Services. Put a price on your own time and consider the cost of getting too far down a road that could eventually present some severe architectural obstacle.

Final Thoughts

Sencha GXT literally made ClearFactr possible. We will soon be upgrading ClearFactr to GXT 3.1.We plan on using the new Theme Builder to develop a custom theme that will tie the graphic design of our app into our website. We’re also eager to use the enhancements to the Grid widget that support multi-line cells; they’ll make the Self-Describing-Spreadsheet that much more effective. As we say, we love Excel, but not for everything. For those cases where ClearFactr is a better fit, Sencha GXT ensures that we give our users a great experience and unquestionable value.

Sencha GXT allowed us to take our years of large-scale app dev experience and transition to a high-performance, highly scalable, web-centric platform in a very short time. We’re able to give our users a great experience and unquestionable value. 3 Comments   Read more

Making a New GXT Theme Has Never Been Easier

A few weeks ago we shipped GXT 3.1.0 beta. This release includes our new Theme Builder tool, which generates Appearance based themes for GXT. It includes CSS3 features like gradients and rounded corners, and the Theme Builder can also generate images to enable older browsers to use these properties.

Sencha GXT Themer

Getting Ready

The GXT 3.1 beta download includes both the Theme Builder tool itself as well as a handful of examples. It shows you not only how to build a new theme, how variables and functions work, what properties can be set and what they mean, but also how to integrate building a theme into your build system. You can also check out the docs for more information.

With the GXT 3.1 beta downloaded, you already have all you need to build a theme for both Mac and Windows. On Linux, you’ll also need to download the appropriate version of PhantomJS for your platform, and modify the themer.sh file to point to the binary.

On Windows, you’ll run the themer.bat file:

> themebuilderbinthemer.bat

On Mac or Linux, you’ll run the themer.sh file:

$ themebuilder/bin/themer.sh

On any platform, you’ll get this output, describing how to run the themer:

usage: ThemeBuilder [options] [config …]
-gen <path> directory to generate code to
-generateConfig <outputFile> Generate sample configuration
-h,–help print this message
-imageFile <path> captured image used for slicing images
-manifestFile <manifestFile> json manifest file of the captured image
-out <jar> path to jar file to generate. Default is a jar named <theme.name>.jar in the current directory
-warDir <warDir> directory to compile the css3-based theme to before images are sliced from it

The only argument that is required is the name of the config file you wish to generate, the rest are all optional.

Config Files

The theme config file structure is a set of namespaces key/value pairs. Namespaces are used to group related properties and to keep key names short, consistent and easy to remember.

Property values can be strings or numbers, simple expressions (arithmetic, string concatenation), as well as references to other properties or built-in function calls to be run when the theme is generated.

When creating a theme config, there are two properties required: the name of the theme, and the package to generate the theme in. The name is used both to name the resulting jar file and as a value for a GWT property to enable an application to have more than one theme compiled.

Sample Configurations

The quick-start example provides a simple way to get started with the themer. You only have to change a few properties, and you can quickly get a completely different theme. It can be found in the themebuilder/examples/quick-start directory.

The first 20 lines of this file set the name and package for the theme, and define a few global variables that the rest of the theme is based off of:

theme {
    /* First, create a name for your theme, and define a package to place it in */
    name = "quickstart"
    basePackage = "com.example"
 
    /* Next, configure these basic defaults, to be used throughout the file */
    text = util.fontStyle("Tahoma, Arial, Verdana", "13px", "#000000", "normal")
    headerText = util.extend(text, {
        size = "15px"
        color = "#eeffff"
        weight = "bold"
    })
 
    borderRadius = 6
    headerBgColor = "#2299cc"
    iconColor = "#ddeeff"
    spacing = 10

First, you need to specify a package and name for the theme:

theme {
    name = "myfirsttheme"
    basePackage = "com.example.myfirsttheme"

Throughout the rest of the file, these remaining variables are used to provide the actual values to style each widget. For example, later in quick-start.theme, the Info widget uses this configuration:

info {
    backgroundColor="#000000"
    borderRadius=theme.borderRadius
    border=util.border('none')
    opacity=0.8
    margin=util.margin(4,0,0,0)
    padding=util.padding(0)
    headerPadding=util.padding(theme.spacing)
    headerText=util.extend(theme.headerText, {
            color = "#ffffff"
    })
    messagePadding=util.padding(0, theme.spacing, theme.spacing, theme.spacing)
    messageText=util.fontStyle(text.family,text.size,'#ffffff',text.weight)
    radiusMinusBorderWidth = util.radiusMinusBorderWidth(border, borderRadius)
}

Note that sometimes we refer to a variable with its full name like theme.headerText and other times refer to it without the ‘theme.’ prefix. The prefix isn’t always required, but the theme config language will try to resolve the closest variable that matches (either in the current namespace or the parent’s namespace and so on). Referencing ‘theme.headerText’ ensures that we don’t reference ‘theme.details.info.headerText’ — this is important because even though it matches ‘headerText’ on its own, it can’t match the more specific ‘theme.headerText’.

There are a few hardcoded values in here that are specific to the Info widget. They are not easily shared across other widgets in a meaningful way. This set of values is set just once. The default values here result in an info popup that looks like this:

Info.display("Hello, world!", "Testing a new generated theme")

Sencha GXT Themer

If you change theme.spacing to 4, instead you see:

Sencha GXT Themer

If you changed to theme.text to util.fontStyle(“monospace”, “11px”, “#000000″, “normal”), you get:

Sencha GXT Themer

For better or worse, you’ve also changed the spacing, font family and size everywhere else in the theme. What if instead you just wanted to change the Info popup? You could leave theme.text as is, and just tweak the info block. While you’re at it, you can also add a border, and change the background:

info {
    backgroundColor="#000000"
    borderRadius=theme.borderRadius
    border=util.border('solid', '#555555', 3)
    opacity=0.8
    margin=util.margin(4,0,0,0)
    padding=util.padding(0)
    headerPadding=util.padding(4)
    headerText=util.fontStyle("monospace", "15px", "#ffffff", "bold")
    messagePadding=util.padding(0, 4, 4, 4)
    messageText=util.fontStyle("monospace", "11px", "#ffffff", "normal")
    radiusMinusBorderWidth = util.radiusMinusBorderWidth(border, borderRadius)
}

Now, you have the same text and spacing as before, but with an added border style, and you haven’t affected other parts of the theme:

Sencha GXT Themer

How It Works

The Theme Builder takes one or more theme config files, which describe the font, color, border, padding, and background styles of each widget supported. As it generates each appearance, it looks for those variables in the config files and integrates their values into the finished jar file.

One of the main goals of the Theme Builder was to target CSS3 features like rounded corners and gradients, and to support browsers which don’t fully support those features. The Theme Builder achieves that by taking screenshots of the generated theme in a modern browser, and saving image files to be used when compiling for a legacy browser.

Conclusion

Creating visually compelling apps is hard work for developers. With the inclusion of the Theme Builder in GXT 3.1, along with the new Neptune theme, it becomes much easier. The Theme Builder provides a great opportunity for creating newer and better UX. We are very excited about this feature and would like to hear about your experience with it. Remember to give us your feedback in the the Sencha GXT 3.1 Beta forum, so we can keep improving it for you.

20140317-gxt-themer.png 1 Comment   Read more

Announcing Sencha GXT 3.1 Beta

Introduction

We’re excited to announce the release of Sencha GXT 3.1 beta, available for download here and from Maven Central. This latest release of GXT introduces Theme Builder, a new tool for theming GXT applications, as well as the Neptune theme built entirely with this tool, adds support for GWT 2.6, and fixes a variety of bugs reported by our users. We’d like to gather feedback from our community while we prepare for the general availability of GXT 3.1.

GXT 3.1 Theme Builder

Theme Builder is a tool that takes a simple config file and generates a jar file with all of the appearances necessary to theme a GXT app. The config file format allows for CSS3 values such as border radius and gradients, and Theme Builder creates appearances that can be used in browsers that may not support those features. It does this by using modern CSS and HTML where possible, and otherwise generating images of the required features.

theme {
    name = "neptune"
    basePackage = "com.sencha.gxt.theme.neptune"
    details {
        buttonGroup {
            borderRadius = 3
            border = util.border('solid', '#dfeaf2', 3)
            headerGradient = util.solidGradientString('#dfeaf2')
            font = util.fontStyle("helvetica, arial, verdana", '13px', '#666666');
            ...
        }
        ...

While GXT 3.1 continues to support Java 6, the Theme Builder itself requires Java 7, though the code generated by Theme Builder will be compatible with Java 6. The command line tool is tested to run on both Windows and OS X, as well as several Linux distributions. The shell and batch scripts in the download zip run only on Windows or OS X to keep the zip file from being much larger. To run the script on Linux, a copy of PhantomJS will be required.

With over 350 configuration properties, almost all widgets and cells available in GXT can be themed. For all widgets displaying text, the family, size, color, weight can be specified via a single config. For widgets with borders, the color, width, style can also be specified. In many widgets, padding and spacing is configurable, as well as background colors, and sometimes even gradients.

Neptune Theme

GXT 3.1 beta includes a new theme, Neptune, generated entirely with the Theme Builder. Neptune is generated entirely from its config file, with no custom HTML, CSS, images or Java.

GXT 3.1 beta includes a new theme, Neptune.

You can use Neptune as your default theme by first moving to GXT 3.1 and then adding the gxt-theme-neptune.jar to your project. The following inherits statement needs to be added to your module file:

<inherits name="com.sencha.gxt.theme.neptune.Theme"/>

GWT 2.6

When we added support for GWT 2.6, we had to break compatibility with GWT versions 2.4 and 2.5, so any project that adopts GXT 3.1 will need to also use GWT 2.6. Moving to GWT 2.6 comes with many fixes and improvements over GWT 2.5.1 that are documented in the release notes.

Documentation

With the GXT 3.1 beta release, we’ve updated our docs to include the new features like the Theme Builder, and we go into greater depth about many existing features.

Known Issues

There are a few known issues in the Theme Builder that are visible in Neptune or any other generated theme. These issues are all specific to browsers that are unable to handle modern CSS and HTML, such as IE8 and 9. TabPanel has the most obvious issues — for bottom tabpanels, the images are not aligned correctly. Dual list fields, grid row editing, and button groups do not show the same rounded corners in IE8 and 9 that you see in modern browsers. We are working on resolving some of these issues, and hope that these and other issues reported by the community will be resolved before the final release.

Feedback

Creating custom themes for GXT apps is hard work for developers. With the release of GXT 3.1 Theme Builder and Neptune theme, it becomes that much easier. We are very excited about this new feature and would like to hear about your experiences. Please give us your feedback in the Sencha GXT 3.1 Beta forum so we can improve it further before the general release.

20140226-gxt-beta-teaser.jpg 4 Comments   Read more

Using Sencha GXT To Build Interactive Web Apps That Manage Big Data

Guest Blog Post

In this article, we’ll tell you how we used Sencha GXT at Datenwerke to build one of our products called ReportServer, an open source Business Intelligence platform. First, we’d like to share our vision of reporting and business intelligence, which has greatly influenced and continues to affect the development and design choices of our product.

ReportServer dashboard

The ReportServer dashboard uses the SenchaGXT portal layout to display reports and bookmarks for easy access.

When we started developing our business intelligence platform, we found many existing solutions required users to be experts in reporting and, especially in the particular tool, instead of being experts in their fields with deep knowledge of their data. This requirement usually led to splitting the reporting process into at least three phases:

  1. A requirements specification phase, where “data experts” try to tell the “tool experts” what it is that they need,
  2. A development phase, where the tool and reporting experts develop what they understood,
  3. And if all went well, a deployment phase where the final outcome is made available to the data experts and they can finally start using the report in their daily work.

This process has several obvious disadvantages. It provides many points of failure, it is costly and time-consuming, doesn’t let users get started quickly, and makes it difficult to change reports.

Our vision was to shortcut this process and to provide the data experts with an intuitive and simple-to-use yet powerful tool to handle the largest part of their reporting requirements without the additional help of “tool experts.” Besides, we needed to find solutions to manage hundreds and thousands of reports and users, provide a platform on which user groups could collaborate to do their reporting, and give the system administrators the necessary tools to monitor and manage the whole operation.

For an open source reporting platform, Java is a natural candidate as there are many existing and well-known open source libraries for specialized reporting tasks (such as pixel-perfect reporting, for example, with the help of Eclipse Birt or JasperReports). For our vision, however, we needed to find a framework that would allow us to create an “intuitive yet powerful” user interface to drive all the functionality required by a large reporting platform.

We started off evaluating several Java EE frameworks but were mostly disappointed. It seemed to be one of two things: we’d have to either deal with a very static configuration of the user interface, for example, with XML (which leads to rather static and not so interactive GUIs) or develop the client side completely in JavaScript, which in essence meant maintaining not just one application, but two (plus the problem of maintaining JavaScript code for different browsers). We decided to try Sencha GXT, because we had good experiences with it previously in other projects.

GWT was lacking a set of well-tested, highly customizable, nice looking and high performance UI components to get the development started, so that’s why we chose to use Sencha GXT.

To a Java developer, using GWT feels very natural as it allows the developer to write not just the server code but also the client code in Java and, what is more, the compiled JavaScript code coming out of the GWT compiler is highly optimized and in many instances performs better. Also, dynamically coding the interface (instead of statically defining it, e.g., in XML) allows the developer to bring a high performance, highly interactive and (hopefully) intuitively usable interface to life. GWT was lacking a set of well-tested, highly customizable, nice looking and high performance UI components to get the development started, so that’s why we chose to use Sencha GXT.

Sencha GXT comes with a large set of well-documented components that make development considerably easier. The fact that the source code is available also provides a huge advantage when starting to extend GXT. Sencha GXT takes advantage of new GWT features and techniques and tries to be in sync with GWT best practices, which enables developers who know GWT to become familiar with GXT very quickly. Besides the many UI components offered by GXT, it makes it easy to code the client side logic such as handling events, working with data stores, applying custom CSS or implementing drag and drop.

TeamSpace

The TeamSpace uses Sencha GXT trees, grids and listview. The object preview on the right can be easily extended with customizable tabs.

Sencha GXT high-performance grid component

The Sencha GXT high-performance grid component enables us to display large datasets. We used context menus, so users can reconfigure reports directly from the preview.

Sencha GXT form components

We used Sencha GXT form components for our admin report management area. We also used trees throughout our app — you can see the report tree on the left.

Here is an overview of some of the features we built using Sencha GXT.

After logging into ReportServer, users are taken to the dashboard module in which they can store multiple dashboard tabs that allow them to access important information with a single click. Looking at the screenshot, you will notice that we have taken the standard Sencha GXT theme and created our own version. From Sencha GXT 3 onwards, core components use the appearance pattern, which made the process of adapting the theme straightforward. For the dashboard layout, we built on the many existing layout containers shipped with GXT, in this case mostly the portal layout container.

As explained above, we wanted to have an intuitive and easy-to-use interface. The various GXT components, such as trees, dataviews and toolbars allowed us to replicate components and workflows that users are familiar with from their everyday work with desktop computers. Furthermore, GXT allows us to incorporate natural feeling ways to manipulate objects using drag and drop or context-specific operations. The various ReportServer modules are accessed via the top navigation bar. The most important module for users is the TeamSpace module, which provides working spaces for groups of users. Here, users can jointly work on reports and share report variants. It is modeled after the interface of a standard explorer-like component offering a hierarchical view of objects on the left and information on the currently-selected object on the right. An important point about the TeamSpace is that the views on objects created here by groups of users are completely independent of one another, and, in particular, independent of the view that the administrative team has on the reporting objects.

We distinguish between two sorts of reports: graphical reports and dynamic lists. Graphical reports are reports handcrafted by a report designer which are usually used by management and are exported to pixel perfect PDF. On the other hand, we have dynamic lists, which is the ReportServer way of doing adhoc reporting. Dynamic lists are based on very large tables usually, that is, tables that might contain hundreds of columns and millions of rows. The preview component of dynamic lists uses the Sencha GXT data grid to provide users with an immediate preview of the selected data and allows them to explore the data directly from within the app.

The various GXT components, such as trees, dataviews and toolbars allowed us to replicate components and workflows that users are familiar with from their everyday work with desktop computers.

If you go on to explore the administration module, you’ll find management modules for the various objects (reports, users, resources, etc.). Here, we especially profited from the various form components offered by Sencha GXT. These allowed us to create reusable components that not only made the development easier but at the same time made the user interface consistent, thus, giving the user an enjoyable experience.

Sencha GXT has a lot to offer. To get started, you should browse the demo explorer and play with the examples. Then, you should start looking at the GXT code. This not only gives you insights into how GXT should be used, but also teaches you quite a bit about GWT. If you plan on having complex layouts, you should invest some time in understanding the different layout containers shipped with GXT and how these work together and where and how they can be extended. Finally, before you start building an app, take your time to become familiar with how GXT components access data, which includes having a look at the various stores, and learning how data models should be implemented for use with GXT. If you get the data model right, everything else will fall into place.

GWT is a great framework for developing small and large interactive web applications. Sencha GXT is a huge addition that gives developers all the tools they need to build great looking and easy-to-use user interfaces. If you are in the process of evaluating web application frameworks, the combination of GWT and Sencha GXT should be high on your list.

For more information, we invite you to have a look at our online demo system. Simply log in as demoadmin (password demoadmin) and play with ReportServer a bit.

20131018-gxt-teaser.png 2 Comments   Read more

GXT Roadmap Update

Sencha Product RoadmapFrom the attendees of SenchaCon 2013, and in the continuous feedback we receive from our GXT community, the single biggest question that we have been asked most number of times is, “What is the plan/roadmap for GXT?”. The feedback we have received from our customers has been overwhelming. Everyone wants more in the framework, especially support for tablets. With this post, I am excited to reveal the roadmap we have put together for GXT. And yes, tablet support is coming!

In the near term (Q4 2013), we are planning the release of GXT 3.1, which will include a new theme builder, and improved documentation support. With the introduction of a new theme builder, we will also include appearance tuning across the board. The public beta version of GXT 3.1 will be available in late October. Note that we have been keeping track of changes coming to GWT, and we will do our best to support any changes from GWT in our GXT 3.1 release. In summary, GXT 3.1 will include:

  1. New Theme Builder
  2. Improved Documentation
  3. Defect Fixes from Previous Version

In summer of 2014, we will be introducing tablet support to GXT. The GXT 4.0 release next summer will have a full tablet support (touch gestures, smooth scrolling, drag and drop, and more…), with iOS, Windows, and Android specific themes. Along with tablet support, we will update the charts package to provide zooming, panning, rotation, etc. capabilities to charts. The public beta date of GXT 4.0 will be announced in spring 2014 targeting a general availability by summer. In summary, GXT 4.0 will include:

  1. Tablet Support
  2. Tablet Specific Themes
  3. Charts Package Upgrade
  4. Possible improvements for ARIA
  5. Defect Fixes from Previous Version

To deliver this expanded feature set our customers need within the allotted time, we are also announcing a price increase for GXT licenses and support. With these new capabilities available, these prices represent a tremendous value for customers developing applications with the GXT platform.

As of October 1st, 2013, the new price of GXT License and Support will be as listed below:

GXT License with Support Current Price New Price
1 Developer Pack $755 $955
5 Developers Pack $3,665 $4,635
20 Developers Pack $14,295 $18,075

This is an opportunity if you do not already have a GXT license, since we will continue to sell at the current price till September 30th, 2013. So please take advantage by purchasing GXT license(s) by September 30th, before the new prices become effective on October 1st, 2013.

We believe the additions outlined above will address your needs and add great value in the framework, and there is something for everyone from our GXT community. We hope to see the community build more applications with the platform and provide tablet support to their end users.

5 Comments   Read more

Using GXT in Sencha Desktop Packager

Using GXT in Sencha Desktop PackagerLast month, Ariya wrote an article on Sencha Desktop Packager, a tool that wraps your web applications and delivers them as native solutions. In this article, we’ll look at using this tool to package GWT applications.

Since GWT applications are written in Java but run in JavaScript, you might want to package them to run Java on the desktop without a traditional browser. There could be advantages to structuring your application like this: you could build the product for the web and then offer a local solution for better file system and menu access. It might also be beneficial to ship with a specific version of an already supported browser, one which cannot reach other sites and will not receive updates to break the app. In this article, we’ll look at three different sample applications — a simple hello world with native features, one based on the GXT Explorer, and one based on the Quake2 GWT Demo.

Hello!

To start playing with Desktop Packager, I built a new GWT application in Eclipse and called it HelloDesktop. I renamed the default html file to index.html, because that is the required starting point for the application.

Talking to a Server

It is important to note that Desktop Packager will not run a real web server, so any calls that need to be made to a centralized app server will need to be configured to point directly at that server. For RPC, you will invoke setServiceEntryPoint, while for RequestFactory you will need to build a DefaultRequestTransport and call setRequestUrl to point to the real server url.

Because of this requirement, I deleted the sample RPC call, and modified the EntryPoint to just display a single message on the page, to confirm it works:

	public class HelloDesktop implements EntryPoint {
		@Override
		public void onModuleLoad() {
			Window.alert("Hello, desktop!");
		}
	}

Here’s what my sample project looked like after making these changes:

Using GXT in Sencha Desktop Packager

Compiling and Packaging a GWT Application

The first step to packaging an application is to create a manifest file. A manifest file describes details about where to find the resources to package, and how to start up the application. For most GWT projects, you’ll either be packaging the war/ directory, or if you use Maven, the target/<project&gr;-<version>/ directory. I created a new GWT application in Eclipse called HelloDesktop, and used the following as my manifest file, saved as HelloDesktop.json in the root of the project:

	{
	    "organizationName": "Sencha",
	    "applicationName": "Hello Desktop",
	    "versionString": "1.0",
	    "outputPath": "packaged app",
	    "webAppPath": "war/",
	    "settings": {
	        "mainWindow": {
	          "autoShow": true
	        },
	        "security": {
	          "allowCrossSite": true
	        }
	    }
	}

Before we actually package the app, there is one important step we must do: compile the application to JavaScript. We don’t presently have a Dev Mode plugin for the Desktop Packager, so we have two main options for debugging:

  • Run in Chrome with GWT Dev Mode. Since the Sencha Desktop Packager uses a modified version of Chromium, and it should behave mostly like Chrome, without the Ion APIs.
  • Compile with style set to PRETTY and use the remote JS debugging features to perform debugging and read any logged messages.

Finally, I ran the ionpackager command, opened the application, and saw the alert on the screen:

Using GXT in Sencha Desktop Packager

Adding GXT to such a project is just as simple as following the setup.txt instructions in GXT, or reading the getting started guide in our new online GXT guides. Once configured, we can build our applications in the same way as we normally would, using layouts, data widgets, etc.

Differences Between Ion and a Browser

There are several differences between running in a packaged app and running in a real browser that may require you to tweak your application slightly. First off, there is no address bar, no bookmarks, no back button, and no refresh button. As a result, the Window.Location class cannot be used to navigate the app, and the History class cannot be used. Instead, you need to structure your application differently to hold state internally, and to avoid making any calls to modify the url — since there is no url to modify, this can cause errors.

The second difference is that files are not being loaded from a webserver, but from within the packaged application. This usually doesn’t make a big difference, but some applications verify that they get a “200 OK” from the server when they load a file, or a “404 File Not Found” if it wasn’t available. Instead, all files will be loaded with a status code of zero, but missing files will have no content. This isn’t usually a concern, but it does come up from time to time.

Using the Ion APIs in GWT

We’ve released a beta version of a GWT module that provides access to the underlying Ion API. This module is a generated jar that is based on the API documentation and is still in its early stages. It automatically includes all other content as Javadocs, but sometimes isn’t very clear on what kind of argument is to be passed in or what should be returned. We welcome any questions or bug reports about the Ion bindings in the Desktop Packager forums.

As mentioned above, there is no url to use so when we ported the GXT Explorer, we removed the PlaceHistoryHandler to prevent it from interacting with the address bar. This enables us to continue to use Activities and Places in the application without the back/forward button or bookmarks. An application could replace this with a custom PlaceChangeHandler that stores the current place in local storage, and upon starting the application, reads that last token out as the PlaceHistoryHandler.handleCurrentHistory() method does. Just as a native application would have no address bar, it would have menu bars to more easily reach certain parts of the application. So, we replaced the history manipulation with a native menu bar that lists all possible examples:

	// Attach the Examples menu to the menubar
	Menu m = Ui.mainWindowStatic().menuBar().addMenu("Examples");
	// Add an overview item 
	// (example is a reference to the overview)
	m.addMenuItem("Overview", new Function(loadExampleFunc(
	  placeController, 
	  new ExamplePlace(example.getId()))), "");
	// For each category, 
	List<Category> cats = exampleModel.getCategories();
	for (int i = 0; i < cats.size(); i++) {
	  Category c = cats.get(i);
	  if (!ExplorerApp.OVERVIEW.equalsIgnoreCase(c.getName())) {
	    // add a new menu, and iterate through the examples there,
	    Menu catMenu = m.addMenu(c.getName());
	    List<Example> examples = c.getExamples();
	    for (int j = 0; j < examples.size(); j++) {
	      Example ex = examples.get(j);
	      if (!ExplorerApp.OVERVIEW.equalsIgnoreCase(examples.get(j).getName())) {
	        // adding a reference to each as we go
	        catMenu.addMenuItem(ex.getName(), new Function(
	          loadExampleFunc(placeController, 
	          new ExamplePlace(ex.getId()))), "");
	      }
	    }
	  }
	}

This code currently requires the use of a helper method called loadExampleFunc written in JSNI to build a function that can be used by the Ion JavaScript API and can call into our GWT code:

	private native JavaScriptObject loadExampleFunc(PlaceController placeController, ExamplePlace examplePlace) /*-{
	  return $entry(function() {
	     placeController.@com.google.gwt.place.shared.PlaceController::goTo(*)(examplePlace);
	  });
	}-*/;

The last argument, left blank in this sample, would enable a keyboard shortcut. In an app like the explorer with so many possible options, it makes more sense to skip using a shortcut, and leave the user to go through the options to find what they are looking for.

Using GXT in Sencha Desktop Packager

Playing (games) with HTML5

The Sencha Desktop Packager uses Chromium, so our application can use any features found in modern browsers such as LocalStorage, Canvas, WebGL, WebSockets, etc. When starting to write this article, I tried to think of a GWT project that uses many modern browser features to wrap up as a desktop application, and decided that the Quake 2 GWT port would be a fun and informative choice.

I started by building the project as instructed, and verifying that it worked correctly in current versions of Firefox and Chrome. While the game would play, I couldn’t seem to make multi-player work correctly — some quick investigation suggested that the websocket implementation in the nightly jetty build used doesn’t appear to work with recent browsers.

Next, I created a manifest that pointed at the war/ directory, enabled remote debugging to find any issues, compiled and ran the application. The application ran, and got us to the start screen, but the game itself wouldn’t start. Looking at the console, I discovered that many files were not loading correctly, or that the app thought that there was a problem with them. I ended up making a change to the filesystem code in GwtResourceLoaderImpl.loadResourceAsync to deal with cases where the file loaded without a 200 status code:

	//...
	String response;
	// if (xhr.getStatus() != 200) {
	// If we get a 200, then we loaded over http successfully
	// If we get a 0 and are in the the finished readyState, then:
	// - file size is not 0, and we loaded successfully
	// - file size is zero, and there was an error
	if ((xhr.getStatus() != 200 && xhr.getStatus() != 0) || xhr.getResponseText().length() == 0) {
	  Com.Printf("Failed to load file #" + mySequenceNumber + ": " + path + " status: " + 
	    xhr.getStatus() + "/" + xhr.getStatusText() + "n");
	  ResourceLoader.fail(new IOException("status = " + xhr.getStatus()));
	  response = null;
	} else {
	  response = xhr.getResponseText();
	  Com.Printf("Received response #" + mySequenceNumber + ": " + path + "r");
	}
	//...

With that change, the game was playable! The sound wasn’t working correctly — I wasn’t yet sure if this was an issue with an unsupported codec, another file loading issue, or a bug in the packager tool with <audio> tags. I also found that with Sencha Desktop Packager 1.1, the skin on the player and the other characters wasn’t being rendered – this is fixed in Desktop Packager 1.2. There were occasionally problems with the mouse or keyboard not responding, but clicking in the window seemed to resolve them.

Using GXT in Sencha Desktop Packager

Finally, to get the original Quake experience, I made one last modification — to run the game as full screen as soon as it started. This time, since I was only invoking the one method, rather than inheriting the Ion for GWT module, I called directly into JSNI to trigger it. First, I created this new JSNI method in GwtQuake.java:

	private native void fullscreen() /*-{
		$wnd.Ion.ui.mainWindow.fullscreen();
	}-*/;

Then, at the beginning of onModuleLoad, I called it:

	public void onModuleLoad() {
	  fullscreen();
	  // Initialize drivers.
	  Document doc = Document.get();
	  doc.setTitle("GWT Quake II");
	  //...

This resizes the application to fullscreen as soon as it starts. This gets much closer to the original Quake 2 experience, but I didn’t go far enough to try playing with the mouse lock API to see if that can keep the mouse from stopping at the edge of the window. You may still experience focus issues — click on the screen if keys or mouselook aren’t working.

Building your own

Download Sencha Desktop Packager, and try it out for yourself! If you have questions, check out the documentation, and visit our forums.

You can find the jar file to enable the Ion APIs in your GWT project in the Desktop Packager forums, along with some specific setup instructions and documentation.

20130702-sdp-gxt.png No Comments   Read more