Casebook updated

Took the time to update CaseBook, an example mobile application written completely in Smart Mobile Studio.

It is a skeleton application, meaning that it’s just intended as a “bare bones” mobile app, demoing the basic components that ship with Smart Mobile Studio – as well as a few custom enhancements (QTXLibrary) which is freely available.

CaseBook

Written for IPhone 5

The mobile application was written especially for IPhone 5 (Safari webkit) but has been tested on Android (Galaxy S4) and works fine there as well. But Android is sadly not capable of the same level of animation as IOS. The application has also been tested in Chrome, which it works more or less identical to iOS – and also Safari on IPad 3 without any difficulty.

CaseBook welcome screen

Future development

Casebook will be continously updated (code will be available on Google Code shortly). Next in line is in-memory database support, which will later be coupled with a live online webservice (Remobjects SDK or node.JS). A purely file-based version will also be available (where each article is represented by a separate file online).

Casebook “edit article” form

Instant CSS3 smoothness

Here is a fun little one-liner which forces the browser to turn all horizontal movement of a component into a CSS3 transformation. Simply add this one-liner to your component’s InitializeObject() method and enjoy:

procedure TMyControl.InitializeObject;
begin
  inherited;
  w3_setStyle(Handle,w3_CSSPrefix('Transition'), 'left .12s');
end;

What it does is to tell the browser, that all and any changes to the “left” property should be delayed and transitioned to 0.12 seconds. This means that if you do a simple:

FMyControl.left:=100;

Your control (or any control, you can apply this to any TW3MovableObject descendant) will slide from it’s current position – to it’s new position at 100px, within a timeframe of 0.12 seconds. So it will smoothly glide over the screen as opposed to be moved instantly.

Try it out! Make a new visual project, drop a button on the form – and apply the one-liner using the button-handle (W3Button1.handle for instance). Now add an onClick event handler to the button with a self.moveTo(100,100); and see what happens 🙂

QTX updated + casebook

As promised in the previous article, I have replaced the standard TW3HeaderControl with the new one we made yesterday. To make it easier to spot the effects on the title, i have turned it’s background red.

Head over to http://lennartaasenden.magix.net/public/ and have a peek at the new header