Tag Archives: how-to

How to use Cordova

Posted on by Posted in Developers log, News

CordovaWhile the next version 2.0 is still not entirely ready, here’s a post about how your HTML5 application can be converted to a native application with Cordova (the open source base of PhoneGap). It’s a bit more tricky than with PhoneGap, but completely free of any costs and you don’t need to transmit your application to any server, which might be in times of NSA surveillance always a bit critical.

The tutorial below only covers the basics. If you want to use plugins to enhance the native experience (e.g. to access hardware directly), you need to consult the plugin’s documentation.
Continue reading→

Playing with the design

Posted on by Posted in Developers log, Documentation, News

There was a question about “adjusting the background color of a form” a while ago. There are actually several ways to adjust the background color of a form, and one should know how Smart works on this area to be able to give the app you’re working on a visual face lift.
Since the various methods might interfere with each-other, it’s important to know the dependencies between the various methods. For example, if you set color by code in the OnCreate method, this will ignore the color in the Object Inspector…

I’ll go trough the various methods by using the classical “Calc (by Eric Grange)” demo in the Demos folder.
Continue reading→

Keyboard events, how to?

Posted on by Posted in Developers log, Documentation

Smart supports normal keyboard events for all HTML elements that triggers them. It can be confusing since we bolted the events into TW3CustomControl – which gives the impression that you can catch events from everything. Sadly this is not the case (support varies between browsers – and there is the technicality of “setfocus” which is not consistent under browsers. A native call to alert for instance, breaks the focus cycle that we take for granted in native applications).

I wanted to share how you can hook into the global keyboard event chain of the window object. This is of-course a must for games and multimedia designed for the desktop rather than touch devices. You also want to catch and buffer the key-presses to make your games respond as quickly as possible.

In this example we are going to setup the event handler inside a form. If you use multiple forms in your app but want to isolate keyboard handling handling on a global scale, then you should move this code to your application class rather than the form. Either way, here is how you can do it:

[sourcecode language=”delphi”]

// We start off by binding our handler to the event.
// In this case we bind to the window handle.
Procedure TForm1.InitializeObject;
Begin
inherited;
{$I ‘Form1:impl’}
w3_Bind2(browserapi.getwindow,’onkeydown’,doKeyDown);
End;

// Here we catch the JS event, extract the event value we want
// And ship it off to our handler. In a game, I would handle the
// key here since the extra call adds overhead. Every CPU cycle
// counts in the world of HTML5 programming.
Procedure TForm1.doKeyDown;
var
mCode: Integer;
begin
asm
@mCode = event.keyCode;
end;
HandleKeyDown(self,mCode);

(* As an alternative, you can also access JS objects via a variant,
which is a neat way of getting access to the native JS object
directly:

var
mEvent: variant;
Begin
asm @mEvent = event; end;
case mEvent.keyCode of
//do your thing here
end;
end;
*)
end;

// This is basically the standard onKeyDown event handler that
// all Smart components have. But by rule only input elements
// actually bouble this event. So for games and fullscreen apps
// it makes sense to centralize handling in one place.
procedure TForm1.HandleKeyDown(Sender:TObject;aKeyCode:Integer);
begin
writeln(aKeyCode);
end;
[/sourcecode]

If you want the other events, like onKeyPress – simply look at how TW3CustomControl does it (w3components.pas unit). All event handling methods are prefixed with CB (callback). Just copy the code into your form or app unit and adapt it. The keyboard events will be added to TW3CustomApplication in the next release.

Debugging smart apps on your mac

Posted on by Posted in Developers log, Documentation

If you happen to own a Mac computer, there is a cool trick i can teach you to make better Smart Mobile applications. It’s also a trick which can benefit native development. In short: the iPhone emulator that ships with Apple’s SDK have many hidden aspects and parameters. One of the most useful is an option to highlight GUI elements that iOS have marked for the GPU. This is a really cool feature and very helpful for both Firemonkey, C#, C++, FreePascal and (drumroll) Javascript apps.

Detecting hardware acceleration

First, make sure the Smart IDE is set to use the built-in server. Now simply load in a project (one of the demos for instance) and execute the application. The server window appears and displays the full URL of your app.

Smart running inside VMWare on a Mac

Smart running inside VMWare on a Mac

Second, go to your Mac and open up a new terminal window. The terminal is more or less what we call a command-line prompt under Windows. On the Mac the terminal is located at “/Applications/Utilities/Terminal”.

In the terminal window punch in the following to start the iPhone emulator with the “magic” setting:

[sourcecode language=”bash”]
CA_COLOR_OPAQUE=1 /Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone\ Simulator.app/Contents/MacOS/iPhone\ Simulator
[/sourcecode]

Note: The above should be a single line of text. Remove any formatting before pasting it into the terminal.

Punch in the commands and hit enter

Punch in the commands and hit enter

The iPhone emulator should now start up and you will notice that there is a red-tint covering different GUI elements. The elements which have a red tint are those marked for hardware acceleration.

Watching Smart go

Next, click on the safari icon to start Safari Mobile, and when loaded – punch in the URL to your running Smart application. Hit enter and wait for the application to load.

Once your app is safely running inside the iOS emulator, click the shortcut button and select “Add to home screen”. All Smart apps can run in full-screen directly from the iPhone screen – we don’t want to waste 30% of the screen on Safari.

Add the app to the home screen

Everything is HW accelerated here

Now you can start the app directly from the iPhone screen – and you can clearly see which components in your Smart app that uses hardware acceleration. It is also worth noting that elements turn red when they are cached and handled by the GPU. In our case the Buddha below does not turn red until you click the “spin the Buddha” button.

Click the button and hardware rotation takes over

Click the button and hardware rotation takes over

Marking your own controls

If you want to ensure that a custom control (or indeed, any TW3CustomControl descendant) makes use of hardware acceleration, there are two ways of achieving it. Both do the same thing and simply hints to the browser that it needs to cache the element in video memory rather than casual memory:

You can add the following to the control’s CSS:

[sourcecode language=”css”]
-webkit-transform: translateZ(0);
[/sourcecode]

Or, you can set the property directly in your code. Preferably by overriding the StyleTagObject method:

[sourcecode language=”delphi”]
Procedure TMyControl.StyleTagObject;
Begin
inherited;
w3_setStyle(tagRef,’webkitTransform’,’translateZ(0)’);
end;
[/sourcecode]