Auto-resize Dojo Mobile Charts on Orientation Change

The best I can tell, Dojo’s dojox.mobile.Charts2D do not auto-resize on their own when the phone’s orientation changes. I posted a question on how to get around this on the Dojo Community Forum and never got an answer. So, I had to cobble together my own solution.

I have to point out that the functionality I built by hand is inherent in Flex and Silverlight, and you wouldn’t even bat an eyelash thinking about this. So, from a productivity standpoint I spent about double and maybe even triple the time I should have needed in order to sort through why things weren’t working as they should, and to build my own best practice for handling it. 

I do consider what I built as a hack, so caveat emptor. It should at least give you a good starting point to improve on what I’ve already done. There are some important things to note.

  • Here’s a sample demonstrating the functionality: http://andygup.net/samples/realestate/
  • Dojo does not provide any State properties on the View. So, I had to build that.
  • Dojo does not provide any way to bind a dijit to a mobile View. In other words, this enables the Chart to take action automatically when something happens in the View. Check…yep, I bolted that in.
  • Dojo, as far as I know, does not provide a way to detect when the phone’s orientation changes. So you have to listen for that at the window object level. I’m fairly certain that the pattern I used is not completely reliable across all platforms, but it’s what I had to work with. So, I built that too.
  • I also had to detect if there was no orientation change prior to a View transition. This was so that I didn’t unnecessarily redraw the chart and make it appear to flicker. This check was important because my chart is in a secondary View. There seems to be a bug in charts redraw() function in that the chart may self destruct if you try to redraw it from a different View.
  • There’s a bug in the Android native browser that passes the previous orientation event object to the listener. You actually have to set an event timer so that you retrieve the final, and most recent, orientation event object.
Here’s how you initialize the chart. In this case, I’m using a pieChart. This snippet also includes the html markup:
pieChart = new com.agup.PieChart("chart1","statsView").pieChart;

<div id="chart1ParentDiv" dojoType="dojox.mobile.RoundRect">
        <div id="chart1" style="width:100%; height: 350px;"></div>
</div>

Here’s the PieChart Class that I built to encapsulate the functionality I described above:

dojo.declare("com.agup.PieChart",null,{
    pieChart:null,
    orientationChanged:null,
    constructor:function(chartDiv,chartView){
        this.pieChart = this._createChart(chartDiv);
        this.orientationChanged = false;
        if(chartView)this._setTransitionListener(chartView);
        if(chartView)this._setOrientationListener();
    },
    _createChart:function(chartDiv){
        //create the chart
        //Had problems with using just HTML markup, so creating it here and piping to DIV
        var pieChart = new dojox.charting.Chart2D(chartDiv);
        //set the theme
        pieChart.setTheme(dojox.charting.themes.PlotKit.blue);
        //add plot
        pieChart.addPlot("default", {
            type: "Pie",
            radius: 100,
            fontColor: "black",
            labelOffset: "-20"
        });

        pieChart.isVisible = false; //NOTE: this is a new public property that we inject

        return pieChart;
    },
    _setTransitionListener:function(/* DIV of dojox.mobile.View where chart resides - typeof String  */view){
        var test = dijit.byId(view);
        var pieChart = this.pieChart;
        dojo.connect(test, "onAfterTransitionIn",null,
                dojo.hitch(this,function(){
                    pieChart.isVisible = true;
                    if(pieChart != null && this.orientationChanged == true)var time = setTimeout(function(){pieChart.resize()},700);
                })
        );

        dojo.connect(test, "onAfterTransitionOut",null,
                function(){
                    pieChart.isVisible = false;
                }
        );
    },
    _setOrientationListener:function(){
        var supportsOrientationChange = "onorientationchange" in window,
                orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

        window.addEventListener(orientationEvent,
            dojo.hitch(this,function(){
                var pieChart = this.pieChart;
                var orientationChanged = this.orientationChanged;
                if(pieChart != null && pieChart.isVisible == false){
                    orientationChanged = true;
                }
                if(pieChart != null && pieChart.isVisible == true){
                    orientationChanged = false;
                    var time = setTimeout(function(){pieChart.resize()},700);
                }
        }), false);
    }
});

Major public web sites miss the mark on using advanced web technology

As a developer I notice things about web sites that the average person wouldn’t think twice about. I also know that the level of technology that’s available to build user interfaces is well beyond what we had in the early 2000’s. And, the ability to build amazing, user-centric interfaces is as easy as ever. But, I’m always perplexed that most major web sites today incorporate very little of this technology in their full functionality web pages.

So, I’ve been doing an informal survey for the past month and my list includes major news sites, airline web sites and retailers. The vast majority of them aren’t much easier to use than they were five years ago with a great a selection of hyperlinks, tabs and full page refreshes. For the fun of it I decided to travel back in time using an internet time machine call the Wayback Machine and compare some of these sites to their predecessors. I challenge you to do the same.

I have a few suspicions as to why this is happening, or not happening as the case may be. First, plug-in based technology such as Adobe Flex and Microsoft Silverlight typically require some amount of time to load the initial payload into the browser. Sometimes you can create highly optimized or lazy-load packages, but it challenging. It’s rare to find one of these apps that load in the sub-second timeframe required in today’s hyper-competitive environment. The general impression is that the longer your page takes to load, the fewer the visitors you will have. So most major websites code is mostly made up of HTML, JavaScript, jQuery and CSS which most browsers have gotten really, really good at parsing extremely fast.

Second, it’s challenging to build Flex and Silverlight websites so that web crawlers can read text-based content. This seems fairly academic. If you can’t effectively index the content of your site, then potential visitors can’t search it via external search engines such as Bing and Google. Period.

These two items alone may explain why visually spectacular interfaces are limited to small portions of most public websites such as video plug-ins, or just specific sections of a much larger website. Where these more advanced interfaces typically reside are in back office applications where functionality trumps the need for millisecond application load times. There are some very cool exceptions for consumer apps such as the end-user experiences shown Mini Cooper’s build your own car online website. Yet, unfortunately for us as consumers, these are few and far between as consumer companies cater to the vast hunger for ever faster page load times.

The good news for advanced web technology in consumer apps is I’m seeing a large opening with mobile deployments. The plug-in technologies now have the capability to allow you to deliver visually enticing experiences across a wide array of devices. And this can be done, for the most part, without the tedium of worrying about all the vast nuances of different browser types and versions. Plus there is a bonus: the application is manually loaded and ready to go on your device minus the on-device load time when you turn on the app. I’m seeing some really innovative uses of the technology in what I call focused solutions, or applications built for a very specific purpose. Unfortunately most are in commercial beta and I can’t link to them. But, you’ll see them soon in an online marketplace right at your fingertips.

References:

Mobile Development with Adobe Flex 4.5

Silverlight for Windows Phone

Flex.org Showcase

Study: Consumers abandon slow loading websites (April 2010)

Let’s make the web faster (Google, May 2010)

Browser updates…too many too fast?

We’ve finally reached the point where the number of browser updates is out of control. There’s an all-out war between the various browser companies to see who can push out the most updates and improvements in the shortest period of time.

All these updates are causing a ripple effect on everything else that is dependent on the browser; for example, plug-in vendors, IT support staff, computer and smart phone vendors, application developers, any company that has a website, and your average consumer.  I’m guessing that on average the pace of updates is starting to outpacing business and consumer’s ability to keep up…and it seems to be accelerating.

Yes, I wholeheartedly agree we benefit from the advancements. No argument there. However that is balanced by reality. And, reality is architecting our products to support the latest and greatest. There is also the fact that most of us also have to maintain support for older versions of browsers and there is a cost associated with backward compatibility. And, there is a cost to upgrading. Not everyone is able to update all the time.

As a case in point, let’s take a look at Firefox since it’s fairly easy to find an archive of their older releases. We are only seven months into the year 2011 and Firefox has had two major releases: Firefox 4 and Firefox 5. However, if you include releases candidates, betas and updates to Firefox 3.x the total number climbs to around twenty-two releases so far this year. Yikes!

Sure, most consumers only saw the two major updates: Firefox 4 and Firefox 5. But, they also experience a plethora of plug-in updates. For example, Flash Player has had eight updates so far this year. Silverlight has had three general distribution releases this year and one beta release of Silverlight 5. And, I wasn’t counting but it seems like I’ve had a bunch of Adobe Reader updates in the last few months.

My concern is that the speed of browser innovation is starting to cause businesses and consumers to get fatigued. It begs the question: how long can the ecosystem of browser consumers maintain this pace? Or, at what point do people just start jumping off the bandwagon and simply starting skipping releases? Do most consumers really care if their browser is now 100ms faster in parsing JavaScript? How many new ways can we create tabs?

In summary, I think browser vendors should slow down and become better custodians of their systems. How about also focusing on innovation in security, memory leaks and best practices documentation and vendor-provided validation engines? Indeed, they have sparked tremendous innovation across the entire world wide web since Mosaic released in 1993. But, depending on how many websites you visit, you can still experience slow web pages, in-consistent cross-browser support and browser crashes. I know there are no easy answers because competition breeds creativity. Perhaps we’ll all go back to just looking at basic text, pictures and videos in the future. And, there will just be specific widgets with very focused functionality for other things.

References:

Flash Player Archive

Firefox Archive

Silverlight Release History

The pace of technological change: Do Android’s really dream of electric sheep?*

Google’s Android v1.5 (Rev 1) was released in April 2009. In 2010, there were three major dot-X releases of the 2.x platform: v2.1, v2.3 and finally v2.3 in December 2010. According to Gartner in a February 2011 report, Android grew from 3.9% of the worldwide smartphone market, to almost 23% in the span of one year, from 2009 to 2010. That’s roughly 888% growth.

As a developer, I’m awed by the pace of change and the rate of adoption. I like being on the cutting, and now the consumer competition is furious for mindshare, and the mad push is on for developers to build applications that take advantage of the latest software and hardware technology. It’s a developers dream. Cool new toys, ever better functionality and hardware with new releases just six months away!

And while I like to simply pay attention to the technology and ignore everything else, I’ve been asked a number of questions recently by other developers who work in a variety of industries from around the world, and to which I have no answer. If you read this please share your thoughts:

  • How do we plan software development cycles around mobile phone system(s) that change dramatically every six months? We are talking about both hardware and software.
  • If I build an application now, will it still work on the next generation of hardware which will come out in one year or less?
  • Will applications that were built on the latest mobile OS still be backward compatible in one year?

What’s interesting is we have been faced with similar questions before when Adobe Flex, Microsoft Silverlight and even HTML 5 were announced. And, yes, they are changing the way we build applications and to a large extent changing what our users expect to experience. However, internet browsers have been around for a while, web development technologies in general aren’t exactly new, and all computers these days come with a pre-installed browser. But, all the sudden we could more quickly develop beautiful applications in days and weeks that used to take many months, or years. And, it’s been an eye-opener as far as our surfing experiences go.

Many commercial applications have never been more powerful with built-in charting and dynamic access to data with very graceful interfaces. These applications opened our eyes to what’s possible by letting us build applications independent of the machine they ran on. And, in a sense it was liberating. The idea of building one version of the software and then deploying it across many machines and devices became true. I, for one, touted that I no longer had to worry about esoteric items such as pointers and garbage collection. The browser took care of all that for the most part, even though it still had a few issues.

Maybe I celebrated too soon. What’s changing now is the pace of adoption which is in the form device that fits in your hand, and you can carry with you anywhere even when you hike, that accesses the internet, and that has similar functionality to a desktop/laptop system. Smart phone access is changing how people communicate: live, work and play. It’s becoming the primary connection to the internet in many parts of the world. It’s becoming a primary work tool while on the road.

We, as developers, are at the heart of this change and with a front row seat.

Our use cases are changing to accommodate people accessing our applications while they are standing in line ordering their morning coffee. We’re back to looking at native applications which don’t run in the browser and are subject to all sorts of interesting limitations and challenges. We are back to adapting code to different devices, limited battery life, testy internet connections, varying processor power, and dealing again with problems related to device drivers.

It’s funny that I caught myself thinking how nice it would be to have a software framework that would let me abstract away all these pesty problems that low-level code development entails: a sort of Flash Player environment for low-level code on a mobile phone. I mused about how easy it was to use FlashBuilder “Burrito” to convert my Adobe Flex applications directly to Android without having to deal with Java code (which works very nicely by the way). Or, do I build a rich functionality web app?

But, you know, I chuckled as soon as I had a requirement that asked for closer access to the smart phone hardware and operating system: things related to power management, and getting more information from the device GPS. Do I wait until the functionality I need is built into an abstraction library…or do I build a native application today? Which applications do I build for the web, and which application should be native?

These are all business question that many of you will also face. I’m certain it’s being asked thousands of times around the world. And ultimately, whatever the answer is… it will change the way we all do business.

*I pay full respect to Philip K. Dick’s 1968 science fiction novel, Do Androids Dream of Electric Sheep?, that served as the primary motivator for the movie Blade Runner which was first released in 1982.