The Isomorphic Blog


Databound dragging in SmartClient 7.0

One of SmartClient’s most powerful and popular features is built-in support for dragging between grids and trees that you can simply enable with property settings. That’s pretty easily understood and has been a part of SmartClient since 2001. What’s new and more interesting is what should happen when you have a databound grid connected to data from web services, SQL tables or other permanent data stores, and then you perform a drag. Can we ascribe any sensible, user-intuitive meaning to dragging an item from one databound list and dropping it on another?

Forgetting for a moment the rich diversity of things that a SmartClient DataSource might be connected to, let’s just think in terms of SQL. If we have grid A showing SQL table A and grid B showing SQL table B, what does a drag of rows from A to B mean? Does it even have a sensible meaning at all? And if there is a sensible meaning to be inferred, what SQL operations does that imply?

For release 7.0 of SmartClient, we have added a number of automatic databound dragging behaviors to grids; these arose as a result of asking ourselves these questions. It turns out that there often is a sensible meaning to be inferred from a drag of rows from A to B, a meaning that a user might even describe as “obvious”.

Firstly, it turns out that changing a dropped record so that it conforms to the drag target’s search criteria will usually give sensible and intuitive results if the two grids are bound to the same DataSource. For example, imagine we had two lists, both bound to the Products DataSource, where has one search criteria that causes it to show only Products of type “widgets”, and the other has search criteria causing it to show Products of type “gizmos”. If the user drags something out of the gizmo list and drops it on the widget list, the meaning of that gesture might seem obvious to the user – she intends that the item be recategorized as a widget. Similarly, if we were in a part of the application where new products are being created, a clear inference can be drawn from the drag gesture: the user intends that a new product be created that is just like this one, but in a different category.

This is one type of code-free databound dragging behavior that SmartClient 7.0 supports. We add or change properties on the dropped item, so that those properties now match the selection criteria of the grid, and then update the record through the DataSource. The record changes in the SQL database and, as a side-effect of that, moves from one grid to the other – SmartClient’s intelligent cache synchronization ensures that all databound components are automatically updated to reflect any changes in the underlying data. These screenshots show the result of a simple, code-free drag operation.

Dragging a record to automatically recategorize it

The record is recategorized, both visually and persistently - no code required

Another, potentially even more interesting, case where we provide automatic databound dragging behaviors is when two grids are bound to different DataSources, but those DataSources are related via a foreign key relationship. Again, it turns out that mutating the dropped record so that it conforms to the target grid’s search criteria gives sensible and intuitive results. For example, let’s say we have a grid bound to the employees DataSource, and another bound to the TeamMembers DataSource. TeamMembers holds details of which Employees are in which project teams, and thus has a foreign key reference to Employees (declared in the DataSource). So, if our TeamMembers grid is showing members of the “Online Billing” project team, what does it mean if the user drags a record out of the Employees grid and drops it on the TeamMembers grid? It seems clear that they intend that employee to be added as a member of that project team.

In this case, SmartClient will create a new TeamMembers record, automatically setting the foreign key reference from the equivalent field on the dropped employee record, and the project code from the selection criteria of the grid. Again, a couple of screenshots show this (and give me an excuse to show one of the pretty new skins)

Dragging an employee into the 'New Costing System' project

New TeamMember record created and inserted

We also provide an override point in this logic, so data manipulations can be as complex as you need them to be for any given use case. We’re sure people will find uses for this that haven’t even occurred to us, creating applications that make intelligent use of drag and drop to provide natural, intuitive UI’s.

At the top of this article, I asked you to forget about all the things that a DataSource might be connected to; I’ll now ask you to remember again! We’ve looked at these examples using the language of SQL tables here, but of course a DataSource can be connected to anything;. So really, we’re potentially talking about a drag from a WSDL web service to a corporate LDAP server, or from a legacy mainframe app to an EJB stack. DataSources truly are a wonderful thing…

SmartGWT is out

 SmartGWT

Yes it’s true!  SmartGWT was officially released yesterday with an announcement on Sanjiv’s blog.  The SmartGWT project is hosted on Google Code –  go there for downloads, JavaDocs and an online showcase featuring about 250 samples.

I’d like to thank Sanjiv for all his hard work in getting this release out so much sooner than anyone expected was possible.  As far as I can tell, Sanjiv has not slept since late September. 

Sanjiv’s release announcement for SmartGWT is quite possibly the best single explanation of how SmartClient & SmartGWT differ fundamentally from the many “widget libraries” that have crowded the Ajax space, and is well worth a read.

 For those just joining us, some quick points about SmartGWT:

  • SmartGWT lets you write Ajax RIAs in 100% Java using standard Java tools like Eclipse, with a programming model similar to Java Swing
  • SmartGWT and the underlying SmartClient library are LGPL, free for use inside commercial, closed source applications without payment of any kind
  • Through SmartClient, SmartGWT insulates you from all cross-browser issues, even when building custom components or branding/theming an application
  • SmartGWT exposes the complete SmartClient API to Java, offering dramatically richer and broader functionality than any other GWT-based solution
  • SmartGWT can be used with any type of server (not just Java) via integration with REST and WSDL services

 Look into it :)

SmartGWT Showcase

7.0 Beta is out; SmartGWT right around the corner

At long last, the fabled 7.0 is available for everyone to try out.  Use the download links below.

http://smartclient.com/releases/SmartClient_70beta_LGPL.zip

http://smartclient.com/releases/SmartClient_70beta_Evaluation.zip (30 day eval)

Please post any issues with 7.0 in the SmartClient Forums as usual, but please be very sure to mention that you are reporting an issue with 7.0 beta (ideally, put it in the subject line).

The list of new features in 7.0 is just staggering.  Here’s what you’ll find in the release notes, which covers major features only:

What’s New in 7.0

  • SilverWave and BlackOps skins, two more professionally designed, free (LGPL) skins
  • Calendar component: complete drag and drop, databound event editing similar to Google Calendar
  • TileGrid component: display records as a series of tiles, with databinding, load on demand,
    filter and sort capability
  • Advanced Filtering: client- and server-side support for field-operator-value filtering of
    data, including arbitrarily nested queries
  • Filter Builder: specialized form for end user construction of advanced filters of arbitrary
    complexity
  • Automatic databound dragging behaviors: grids and trees will now inspect data
    relations declared in DataSources and automatically “do the right thing” for a databound drag
  • ColumnTree component: ITunes™-like tree navigation (one column per level)
  • Printing: comprehensive and customizable support for rendering printable views of
    SmartClient applications
  • HeaderSpans: second level headers in grids, for grouping related columns
  • Grid row rollover effects and controls: general purpose ability to attach SmartClient
    components to rows, allowing rounded selection, controls that appear on rollover, and more
  • Grid header rollover: drop-down menus appear on rollover, offering column show/hide,
    freezing and grouping options that previously required right click to discover
  • Data autofitting: horizontal and vertical autofitting to data for ListGrids
  • Grouping modes: built-in and custom grouping modes, such as the ability to group a date
    column by week, day, month or year
  • Visual Builder “toolskin”: edit applications in any skin while Visual Builder itself
    retains consistent look and feel
  • Visual Builder “auto-add”: double-click palette items to intelligently add to last, for
    ludicrously fast screen building
  • AutoFitTextAreaItem: autofits to contained text
  • Full Tree connectors: TreeGrid connectors support now optionally includes full connectors
  • CubeGrid facet auto-derivation: greatly simplified creation of simple cubes
While you wait for your download, take a look at the new skins as they appear in Visual Builder.  This is a real, unmodified screenshot of Visual Builder editing an application using the new SilverWave skin.

Visual Builder

SmartGWT Beta on the verge of release

As if this wasn’t enough excitement for one day, in other news, SmartGWT is right on the verge of final release.  Early adopters (those who emailed us) have already been working with the technology for several weeks, contributing samples and helping with testing (thanks guys!).  Calling this a “First beta release” would give a very false impression of how comprehensive and robust SmartGWT has already become – with over 500 classes and almost 4000 documented APIs, all of SmartClient’s core features are now exposed through Java, and we have an example browser with nearly 250 samples already contributed, covering the same range of use cases as are shown for SmartClient’s set of default examples.

Stay tuned.

Cheers,

Charles

Video Tour of Visual Builder

As the first of more to come, we’ve created a video tour of the SmartClient Visual Builder tool.  The video shows you how to use Visual Builder to create a web application without writing any code.  The tool can be used by business analysts and semi-technical folks to create working prototypes or by developers just learning SmartClient to create simple applications.

Watch the video to see the drag and drop screen building and event wiring in action.  You’ll also learn about data binding made simple with the DataSource wizard.

Visual Builder was built using SmartClient, so it’s a web page that doesn’t require installation and is easy to share  within a team.  It’s a great tool for teams collaborating to create working prototypes of SmartClient applications.  The best part is that the code created by Visual Builder is clean and can be used by developers to further enrich using the entire SmartClient framework – that means the end of throwaway prototypes.

Visual Builder is extensible so developers can extend it with connectors to any kind of enterprise data provider and any kind of custom component that can be built in SmartClient – even third party controls.  Custom components can then be used to build your screens with drag and drop – just as easy as the out of the box components.

Learn more about Visual Builder – watch the video here.   We’d love to hear your feedback on the video, as well as, get requests for future video topics.

Best practices: loading DataSources dynamically

Just came across this great blog post from SmartClient user David Johnson about a technique for loading required DataSources dynamically as part of a view.

“So how do we provide DataSources customized for the user? Well, we could easily pull the metadata from the database, merge in the user’s security and then write the DataSources into the web page (we are using ASP.Net).

As there will ultimately be around 200 DataSources in the application the time to build every one of them at login time was considered too long.”

The post goes on to describe a custom class, similar to ViewLoader, that handles automatic DataSource loading as part of a transition to a new set of application views.  Usage ultimately look like this, where the viewClass provides a list of DataSources that it requires in order to function:

_rightPane.addTab({
     ID: tabId,
     title: name,
     canClose: true,
     pane: ViewDependencyLoader.create({
         autoDraw: false,
         viewClass: className
     })
});

Great stuff, and David shares the complete source to his solution.

This is also an area where SmartClient will be expanding in the future, with APIs designed to help you more easily load a view along with the data it will need to initially operate, as well as manage a pool of views, for very large applications where LRU (least recently used) or similar view management approaches become important.

Come see us at the Ajax Experience in Boston

We’ll be exhibiting at the Ajax Experience in Boston September 29th – October 1st.   Come out and meet the team at our booth outside the general session hall.   If you’ve been looking forward to seeing SmartClient 7.0 in action,  we’ll be giving sneak preview demos of the new Calendar functionality, Advanced Criteria/FilterBuilder, TileList, and much more.  In addition, we’ll also be demoing the much awaited SmartGWT.    Please come by and see us, and get the first look at these new exciting features!

Browser JavaScript performance leapfrogged again

The race for the JavaScript performance crown is heating up to an almost absurd extent.

Back In June, Apple’s Safari browser was updated with their “SquirrelFish” JavaScript interpreter, providing a huge boost to JavaScript performance that actually put Safari ahead of Tamarin, the JavaScript engine used in Adobe Flex. 

Then, just weeks ago Google released Chrome, including a JavaScript engine, dubbed “V8″, that delivers near-native execution speed for JavaScript code, jumping ahead of SquirrelFish.

Not to be outdone, Brendan Eich of the Mozilla Foundation announced shortly thereafter that pre-release versions of Firefox 3.1 are yet faster than Chrome.

Finally, today Apple has announced further improvements to the SquirrelFish JavaScript interpreter in Safari, more than doubling speed, and blowing by Chrome by almost 1/3.

Of course the million dollar question is, will Internet Explorer keep up?  Apparently, yes.  An in-depth analysis by John Resig of JQuery fame shows that beta versions of IE8 are at least in the ballpark, that is, within 3x of Chrome.  That may sound slow until you realize that still puts IE8 3x ahead of IE7, because the overall speed gains indicated by these announcements are over 10x.  And this is just a beta, released before the performance bar was so drastically and so visibly raised, which should provide motivation to keep up.

Microsoft has also been blogging about IE8 performance work, reportedly looking both at JavaScript performance improvements and improvements in other areas, such as IE’s rendering engine.  From personal experience tuning SmartClient, substantial rendering performance improvements will provide at least as much of a boost as JavaScript performance improvements.

But, bigger picture: the attention being paid to JavaScript performance very, very strongly indicates that all of the major browser vendors are focused on making their browsers the best Ajax platform available, including, for once, the vendors that also have a proprietary platform (Microsoft’s Windows and Apple’s MacOS).  This should be the first of many highly publicized feature, performance and tooling wars which will benefit all applications running on the open web platform. 

The next battle?  Possibly tools.  One of the most encouraging pieces of recent news is that Microsoft is adding a near-clone of Firebug to IE8, including a JavaScript profiler.  At long last, we can all move beyond “‘undefined’ is null or not an object” with an incorrect file and line number.  And it only took – what – 12 years? :)

Catching dangling commas in Aptana

Aptana can be configured to catch one of the most common Javascript programming errors: the dreaded “dangling comma”, an extra comma left trailing after the last property in an object literal. This problem can be fiendishly difficult to spot, particularly if you have a complex, nested arrangement of object literals.

Aptana can point you at these bugs right there in your source editor. To set this up, go to the Window menu and select Preferences, then navigate to Aptana -> Editors -> Javascript -> Validation. Your screen now looks like this:

Ensure that the “JSLint Javascript Validator” box is checked. And that’s it – dangling commas will now be reported as you type, like this:

Announcing SmartGWT

Yes, it’s true! A project has been underway for some time to create a GWT (Google Web Toolkit) wrapper for SmartClient.

The project, dubbed SmartGWT, will be made available under the same LPGLv3 license as SmartClient LGPL, with commercial licensing available as well. It will be hosted on Google Code with public SVN access, and external committers will be welcome to participate as with SmartClient LGPL.

We are happy to say that Sanjiv Jivan, the creator of another popular GWT wrapper, is involved in the development of SmartGWT. Sanjiv brings expertise in precisely the right areas, and with his help we’ve been able to make much more rapid progress with SmartGWT than would otherwise be possible. We expect a preview release sometime in late October to early November.

Our Approach

(if you’re asking ‘what is GWT?’ read “Why GWT?” below)

Anyone who has looked deeply knows that SmartClient is a vast, very complete system – a recent count is that SmartClient supports more than 4000 documented, supported APIs. Translated to Java, this number will be far larger.

For this reason, we’ve taken an approach of generating GWT code from SmartClient’s documentation, combined with hand-coding portions that can’t feasibly be generated. By tweaking our documentation set to contain additional metadata (some of it GWT-specific), we’ve been able to generate code you might not otherwise expect, including things like enumerated constants and convenience constructors.

What this means is that the first release of SmartGWT will provide the complete SmartClient API, fully documented. Out of the gate, SmartGWT will be the most complete GWT platform in existence. And of course, all future versions of SmartGWT will match the API set of the latest SmartClient release.

Why GWT?

GWT allows you to write Java code which is translated to JavaScript by a special compiler, so that it can be run in the browser. This is best explained by example:

You write Java like:

import org.smartgwt.client.*;
import org.smartgwt.client.widgets.Button;
...
Button button = new Button("myButton", "Click me");
button.addClickListener(new ClickListener() {
    public void onClick(ClickEvent event) {
        ISC.say("Hello World!");
    }
});

This means the same thing as:

isc.Button.create({
    ID:"myButton",
    title:"Click me",
    click:"isc.say('hello world!')"
})

There are many approaches for “hiding” JavaScript behind a server-side Java abstraction (such as JSF, JMaki, etc). All these approaches have a common flaw that any code you write in Java requires a trip to the server to execute. The more customization, the more trips to the server, throwing away the primary benefits of Ajax (scalability and responsiveness). In these frameworks, something like a custom drag and drop interaction is essentially impossible – it’s not realistic to contact the server every onmousemove().

GWT differs fundamentally from these server-oriented Ajax approaches. In GWT, the Java code you write actually executes as JavaScript in the browser. So you can write event handlers, drag and drop logic, even custom subclasses of SmartClient widgets, and all of this code executes in-browser, exactly as though you were using SmartClient directly via JavaScript.

In a nutshell, with GWT you get the robust toolset of Java and the performance and scalability of a true “smart client” architecture.

It’s also important to understand that, although you are using Java instead of JavaScript to build your UI, you aren’t tied to a Java server. You can use SmartGWT with any server technology supported by SmartClient itself, including XML or JSON services built in PHP, or WSDL web services. And that combination is still an entirely free, open source offering.

Get Involved

If you are interested in getting the absolute first available sneak peak of SmartGWT, or if you are interested in getting involved in the project, send email to smartgwt at isomorphic.com.

In the meantime, it’s important that anyone choosing platforms right now knows about this very compelling option.  Please help us spread the word – to your colleagues, and to the Ajax blogs and sites you read most!

Thanks,

              Charles

We’ve made it onto Ajax Alltop

We’re happy to say that our blog has now been included on the Alltop Ajax.

If you’re not familiar with it, Alltop groups RSS feeds for sites by category and then lists the five latest postings for each site.  They have many different categories for topics from Ajax to food to iPhones.  You can roll over headlines to get more text of the news item.  You can visit the Ajax Alltop here.   A helpful tip, if you think there are too many feeds, you can click on the “x” to hide some.

Alltop. We're kind of a big deal.

Page 6 of 7« First...«34567»