Laying out Smart applications with Layout Manager [1]

Smart Mobile Studio was released today. To celebrate this – in my opinion – very important step for the Object Pascal language, I have prepared a series of articles on the Layout Manager – a feature of the Smart RTL that I wrote.

Smart is an excellent tool, but in some areas it clearly shows that there was only so much time allowed for the development. I’m sure Lennart will polish the rough edges in next releases but for now we have to do with what we have.

One of those rough edges is component placement. You can drop components on the designer and set their size but there’s no mechanism for dynamic size adjustments. In other words – there is no Align, no Anchors, no Margins and no layouts (as TFlowPanel and TGridPanel in Delphi). We have to resize components in code, in the overloaded Resize method.

I quickly got sick of writing resizing code and decided to alleviate the problem by writing a layout manager. It does not work in the designer, you have to declare and use it in code, but still it is a big simplification over the default “just call SetBounds from Resize” approach. I donated layout manager to the Smart project and it is included in the 1.0 release as the w3layout unit.

This article starts a short series which will explain layout manager on simple examples. All of those examples are also included with the Smart installations (look in Demos, LayoutManagerDemo).

SmartMS Demos

The Smart Mobile Studio is nearing its release date (no, can’t tell you when, but it will be soon, really soon) and it’s time to revisit my demos. You test them all from my website (just click on the images) and access the source code. If you don’t (yet) have Smart, you can browse OPP file with my primitive OPP Browser.

Accelerometer

Accelerometer-handling demo (iOS only). Move the square by tilting the device.

article, source

Game of Life

Conway’s Game of Life. Works on desktop and on tablets. Click in the gray rectangle on the left to open a library of building blocks then drag and drop a block on the game surface.

source

Gesture

Gesture-handling demo (iOS only). Handles move, zoom and rotate.

source

Mandelbrot Explorer

Mandelbrot explorer. Works on device (at least on iPad) and on desktop.

article, article, source

Multi Finger Paint

Paint with multiple fingers (iOS only; single finger may work on Android). Also handles mouse on desktop.

article, source

SmartTTT

Tic-tac-toe game.

source

TSmiley

No IDE is mature until it has a TSmiley component. Supports desktop and mobile. Click/touch to change TSmiley’s mood.

article, source

Accelerometer Revisited

I wrote about handling accelerometer in iOS from the browser before (Detecting Device Movement, Accelerometer Demo) but I wasn’t happy enough with my code and I promised to return with the third part. Today I returned to the topic with advanced features – handling data smoothing and calibration.

Accelerometer Demo

My accelerometer blog ended rather abruptly, without a demo program so today I’m returning to the topic.

To test the accelerometer control I wrote a very simple program in which you can move a rectangle around the screen by tilting your iOS device. You can test it here.

This program builds heavily upon the source code I found on Alberto Sarullo’s blog. Thanks!

Detecting Device Movement

For my next quest I decided to find out how accelerometer works in web applications. IOW, I wanted to control an object on my HTML page just by moving my iPad around.

I limited my quest to iOS because that’s my favorite toy. don’t know yet how to do it in Android – this StackOverflow post hinted that access from bare JavaScript may not be possible. PhoneGap somehow does that, but it’s quite possibly that they implement Java wrapper that exposes native accelerometer data to your JavaScript. But that’s just guessing.

A Sign of Maturity

No IDE is mature until it has a TSmiley component.
                                             --Anonymous

This week I got a sudden urge to write TSmiley component for Smart Mobile Studio IDE. After all, what is a development environment without a smiley?

My TSmiley is not an enterprise-y solution like latest Nick’s revisit of the old theme ;), oh no, it is a lean and mean component without any special bells and whistles. You can select the smiley’s emotion and it will change the look. And that’s it.

I thought that a story about TSmiley for Smart would be instructive for you, dear reader, as this is almost the simplest component one can write. Read on to see how writing a component for Smart is very similar to writing a component for Delphi and how it is also utterly different.

Handling Touch Events

I mainly started playing with the Smart Mobile Studio because I wanted to write some stuff for my iPad. OK, there’s a small issue of possibly producing client applications for my job and maybe for some freeware/shareware stuff I’m thinking about, but this is not on the horizon yet. Therefore, iPad. (And I don’t have iPhone and I don’t care about writing stuff for my wife’s Android, so – iPad.) And writing for iPad means supporting touch gestures.

[Yes, I know I could use Objective-C but – bleuch, really? – and I could use FireMonkey but I don’t have a Mac and don’t want to buy one just for playing around and I can’t make Platform Assistant run in a Hackintosh, Therefore, Smart.]

Touch is natively supported in Smart. Gestures are not (but that may change before the release). What’s the difference, you ask? Touch subsystem will give you information about separate fingers like – finger has touched – another finger has touched – first finger was moved – both fingers were moved – while gesture subsystem will give you a simple – zoom gesture in progress. But hey, let’s start with touch. Lots and lots of stuff can be written with just the information about the fingers touching the screen.

Improved Painting

When I wrote about my first Smart Mobile Studio program I mentioned that it failed on iPad (and would probably fail on iPhone too but I couldn’t test that) because the Paint code took too long and the iOS simply aborted it. As far as I know there are two ways to fix this in JavaScript – you can either move the calculation to a background thread using a Web worker mechanism or split the Paint into multiple parts where each part only calculates and paints small part of the screen and then returns control to the browser. For the time being I went with the latter solution but that will not prevent me from testing the Web worker approach at some time.

Handling Mouse Events in Smart Mobile Studio

After I finished my very first Smart program, I wanted to enhance it with some interactivity. I wanted the user to be able to navigate through the Mandelbrot set by using mouse and touch. For now, I have only implemented the mouse part, touch events will be handled later (soon, I hope).

I wanted to achieve few different ways of navigation:

• Click & drag with the left mouse button shows a rectangle on the screen. When the mouse button is released, program zooms in to display the selected rectangle.
• Double-clicking zooms in around the point of click.
• Right-clicking zooms out around the center of the image.
• Right-click & drag shows a line on the screen. When the mouse button is released, program moves the current view (point of first click is moved to the point of release).
• If a drag operation is in progress, user can click and release the other mouse button (left if right-drag is in progress, right if left-drag is in progress) to cancel the drag operation.

You can see the navigation in action in this (very low quality, sorry) YouTube video.

My First Smart Program

Last week I wrote about my first impressions about the OP4JS/Smart Mobile Studio project. This week I’ll show you my first program.

First Steps with Smart Mobile Studio

“JavaScript is Assembly Language for the Web” 
[original author unknown]

I learned about that idea from the omnipresent Hanselmann and I fully agree with it. JavaScript has its good moments, but they are completely outweighed by the total mess and confusion that is the JavaScript language and by some awful decisions made by the original designer.

If you don’t believe me, try answering the following question. “What does JavaScript expression ++[[]][+[]]+[+[]] evaluate to?” I’m not kidding you – this mix of plus signs and square brackets is a legit JavaScript expression and its result is ‘10’. [For proof, see Stackoverflow question Can you explain why ++[[]][+[]]+[+[]] = 10.]

As you may have guessed, I don’t like programming in JavaScript. I can read it on a good day but I never managed to write more than few lines of JavaScript code. On the other hand, I would like to write a browser application from time to time, as that would allow me to run such an app on different platforms (and by that I mean a PC, Mac, iOS, and Android).

When I learned about the OP4JS project, which promised a cross-compiler from Delphi-like language to a JavaScript and an integrated development editor, I was almost ecstatic with joy. Truly, such a tool would be a great addition to my toolset – if the authors managed to pull it through. It looked like a tough project for just two people. But … as the Lennart (one of the authors) likes to say – one good Delphi developer is worth hundred mouse-pushers (or something to that effect). They struggled and they succeeded. Just before the end of 2011, select few people received the alpha version of the IDE so that we could play with it over the holiday season.

I’ve got the permission from the authors to write about it so in the next weeks you can expect posts that will follow my road to Delphi-generated HTML+JavaScript applications.