Smart Mobile Studio
  • News
  • Forums
  • Download
  • Store
  • Showcases
    • Featured demos
    • The Smart Contest 2013, Round 1 – Graphics
  • Documentation
    • Get the book
    • System requirements
    • Prerequisites
    • Getting started
      • Introduction
      • Application architecture
      • The application object
      • Forms and navigation
      • Message dialogs
      • Themes and styles
    • Project types
      • Visual project
      • Game project
      • Console project
    • Layout manager
    • Networking
      • TW3HttpRequest
      • TW3JSONP
      • Loading files
  • About

Control complexity and mobile resource management

Posted on 04.10.2011 by Jon Lennart Posted in News and articles 2 Comments
This is not just a picture, but actually the background set for a picture

This is not just a picture, but actually a multi layered view. The buddha is a background for an image placeholder. Quite dynamic and neat

Products like Embarcadero Delphi comes with a rich set of controls ready for use in your applications. If we compare the resource demands of these controls today (Delphi XE or XE2) to those that once shipped with Delphi 1 – or Delphi 7 even, the amount of resources a well designed form consumes has grown exponentially over the years.

As the operative system was grown more complex both in terms for functionality, responsiveness, mobility and the developers need for modern features, the amount of methods and auxiliary classes connected to a single control has become very large. As a result, the amount of memory and CPU requirements have grown with it.

The mobile scene

One of my primary concerns when we sat down to talk about OP4JS control library was simply that it would be over-kill to even attempt to emulate the VCL under javascript. In my notes the primary points were:

  • The amount of JavaScript generated would exceed the restrictions of these devices
  • The HTML5 architecture is incompatible with classical VCL programming
  • The controls would be to slow for practical use

Thankfully my worries were unfounded on all accounts, because we have more or less built a VCL clone. It is and has been quite a challenge. As you may know HTML5 introduces a high-level interface onto ordinary html. It is different not so much in terms of syntax, but rather in philosophy, inspired no doubt by the MVC (model view controller) paradigm imposed on the world by Apple computers. In short, the CSS styling represents the “view” part, the actual html tags the “model” and Javascript the controlling factor. Javascript is what provides behavior to otherwise empty, stateless constructs.

Getting these things to even resemble the VCL has been, well, let’s just say I havent played with my kids in a few weeks.

Doing the math

CSS transitions and events

CSS transitions and events

Luckily, the complexity versus efficiency argument is turning in our favour. Delphi developers like myself have a tendency to over-think the actual needs of our customers, and inside our own heads we are always trying to outsmart other programmers that may – or in most cases – may not be going over our code with a fine tooth comb. This can either drive us to excel at what we do or into obsessive nerds that polishes a piece of code so long – that the platform is dead if he ever finishes.

So, once in a while it’s wise to do a sanity check on your code-base (and your own expectations). Fact is that mobile apps are for the most part quite lightweight. If we for sake of argument say that a mobile app has 10 forms (or views if you prefer) and each of these views is populated by 20 controls. Some controls are composite, meaning that they have child controls (like a toolbar which uses a buttons) while other are vanilla, run of the mill stuff like labels and lists. You may also have a database running under the hood as well.

Adaptable and suitable

So an app consisting of 200 javascript objects is really not that huge. It would result in quite a bit of generated code of-course, but the browser chews through this like it was nothing at all. And you wouldn’t even be close to the limitations set down by Apple or Google regarding size. Strange as it may seem – my test app written in Op4JS both loads and executes faster than it’s native counterpart written in C# (which compiles to a single binary on iOS). The only exception being complex graphics (which you would normally use a DIB library for) and heavy-duty number crunching. But those are things you don’t want to have on your phone anyways. It’s possible of-course, but not practical.

To me at least, mobile development is about information and communication and presentation. It’s about getting or storing data and presenting it on a portable device in a practical manner. It’s also about using the format in a way that makes sense to the consumer.

External resources

  • Model View Controller – Wikipedia article
  • C# Mono Touch – Xamarin website
  • HTML5, A vocabulary and associated APIs for HTML and XHTML, WC3 reference
  • Embarcadero Delphi website
HTML5 javascript Smart Mobile Studio
« Focus, callstack and recursive processing
Your first OP4JS custom control »

2 thoughts on “Control complexity and mobile resource management”

  1. brent says:
    04.10.2011 at 14:57

    It looks great! Will there be a checkbox or the switch control that we see in many apps such as the Settings? In XE2, there is no switch either and frankly it is too small as is the radio button.

    • Jon Lennart Aasenden says:
      05.10.2011 at 01:15

      iOS actually has a very cool Checkbox (normal), but people rarely use it. The checkbox you see in my photo above is rendered by Chrome and is not styled yet. As for the switch… yes, i want that to.

      But it’s very easy to put it together custom controls yourself. On top of my head, a quick switch could be implemented like this:

      [sourcecode language=”delphi”]
      Type

      //All controls, except canvas based, derive from TW3CustomControl
      TSwitchControl = Class(TW3CustomControl)
      private
      //We want some nice sliding effect of the background
      FEffect: TW3HorizontalSlideEffect;

      //Just to keep track of the effect
      FBusy:Boolean;

      //our "checked" value
      FValue:Boolean;

      //event handler for when the effect is done
      Procedure HandleSlideDone(sender:TObject);
      Protected
      //This is an internal message handler,
      // a bit like Delphi’s winapi message handler. It happens before the On[xyz] events..
      Procedure CMClick;override;

      //We dont override the constructor unless we absolutely have to
      procedure InitializeObject;override;
      published
      // our "checked" value for the world
      Property Checked:Boolean read FValue;
      End;

      //and in the implementation section

      procedure TSwitchControl.InitializeObject;
      Begin
      inherited;
      // load an image of the switch, the knob in the center of the image
      // It’s blue (checked) on the left side and grey on the right (unchecked)
      self.background.Image.fromURL(‘res/switch_mask.png’);
      end;

      Procedure TSwitchControl.CMClick;
      Begin
      //If the slider is moving, ignore click
      if not FBusy then
      Begin
      //remember that we are busy
      FBusy:=True;

      //ok, let’s put webkit to work!
      FEffect:=TW3HorizontalSlideEffect.Create;
      FEffect.duration:=0.3;
      FEffect.fromPos = makePosition(0,0,width,height);
      FEffect.toPos = makePosition(-50,0,width,height);
      FEffect.onTransitionDone:=HandleSlideDone;
      FEffect.execute(self.content);
      end;
      inherited;
      end;

      //This method is called when the slide transition is done
      Procedure TSwitchControl.HandleSlideDone(Sender:Tobject);
      Begin
      //Togge the "checked" value
      FValue:=w3_ToggleBoolean(FValue);

      //release our effect instance
      FEffect.free;

      //ready for another click!
      FBusy:=False;
      end;
      [/sourcecode]

      The above code uses harware accellerated sliding (if possible) through the effect classes. There are more parameters to set naturally (like ease-in/out/linear etc. etc.) but in general terms — it’s very easy to make your own controls. And you are expected to do so in many cases. But if you know how to create a button from code in ordinary Delphi – then you will have no problems what so ever coding new and exciting controls yourself. In fact, we are hoping to get a budding control marked going 🙂

Comments are closed.

Pages

  • About
  • Feature Matrix
  • Forums
  • News
  • Release History
  • Download
  • Showcases
    • The Smart Contest 2013, Round 1 – Graphics
  • Store
  • Documentation
    • Creating your own controls
    • Debugging, exceptions and error handling
    • Differences between Delphi and Smart
    • Get the book
    • Getting started
      • Introduction
      • Local storage, session storage and global storage
      • Application architecture
      • The application object
      • Forms and navigation
      • Message dialogs
      • pmSmart Box Model
      • Themes and styles
    • Layout manager
    • Networking
      • Loading files
      • TW3HttpRequest
      • TW3JSONP
    • Prerequisites
    • Real data, talking to sqLite
    • System requirements
    • Project types
      • Visual project
      • Game project
      • Console project

Archives

  • December 2019
  • December 2018
  • November 2018
  • July 2018
  • June 2018
  • February 2018
  • September 2017
  • April 2017
  • November 2016
  • October 2016
  • September 2016
  • April 2016
  • March 2016
  • January 2016
  • October 2015
  • September 2015
  • July 2015
  • April 2015
  • January 2015
  • December 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • November 2011
  • October 2011
  • September 2011

Categories

  • Announcements (25)
  • Developers log (119)
  • Documentation (26)
  • News (104)
  • News and articles (16)

WordPress

  • Register
  • Log in
  • WordPress

Subscribe

  • Entries (RSS)
  • Comments (RSS)
© Optimale Systemer AS