Home > CaseBook, Delphi, JavaScript, nodeJS, Object Pascal, OP4JS > Smart Mobile Studio, behind the scenes part 2

Smart Mobile Studio, behind the scenes part 2

I’m going to give away a few more tidbits of behind the scenes as you wait for the next update. Let me assure you all that it’s on track (actually ahead of schedule) and I think everyone will feel we are putting in place “the missing pieces” of the RTL.

And being honest, It’s not easy knowing exactly what the missing pieces are, I mean, I spend just as much time in C# and C++ that I do in Delphi, and the C culture is almost fully source-code orientated. Meaning that programmers expect to write much more code than the average Delphi or FreePascal programmer. The tools and frameworks are likewise source-code only (with some exceptions), and every programmer is expected to tailor, extend and even write from-scratch controls. In the world of C you don’t have the luxury of drag & drop components. Although C# is more in the spirit of Delphi, but most component packages are source-only, only rarely do you find packages which installs into the component palette (bought commercial components tend to come that way, but very rarely open-source packages).

C# may look easy but it's a lot harder than Object Pascal

C# may look easy but it’s a lot harder than Object Pascal. And a lot less visual

So in some way I am surprised that so few people have picked up how fundamental it is to write your own custom controls with Smart. Under Delphi and FPC it can be quite a challenge to write advanced controls, but the Smart RTL is completely different and simplifies everything — once you understand how it generates HTML elements for you and how styles work.

So when we launched SMS we kinda of took it for granted that our customers would check out the competition and realize that Smart Mobile Studio was right up there with the best. Had you taken the time to look at MonoTouch from Xamarin for instance, besides being a C# framework, you would realize that it’s a much more demanding toolkit. You would have to override and extend the application object straight away for instance, so no lurking about with drag & drop designers (although they do market it much like Delphi was 10-15 years back).

In short: writing good code takes time, and there is no quick-fix to quality products, no matter how friendly your IDE is.

The good, the bad and the ugly

Right. We have noticed that quite a large chunk of our customer-base don’t really care too much about mobile applications. Which sounds odd considering it’s a mobile studio. Either way these customers can be categorized in two groups:

  • Those that want to create a full website using Smart Mobile Studio
  • Those who use Smart as a Flash replacement, writing banners, slideshows and interactive media

The demand for controls which fit into the whole “desktop” browser genre is growing. And yes, we have noticed your needs and we will not ignore you.

In fact, one of the controls that is getting a makeover is the scrollbars. These doesn’t really belong under iOS or Android platforms, but works very well in a desktop browser. Sadly the default CSS style I once made was butt ugly, and it was suffering from a “off by 1” bug. So time to pimp it up and get rid of the bug!

As always you can write some CSS for this yourself (and you are expected to do so, not just rely on our default schemas), but at least we now ship with something that resembles a normal scrollbar. But yes, just edit the stylesheet yourself and make it look different. CSS is easy and you will learn it in less than 1 hour.

Ta-Da: The new scrollbar look is simple, but at least you see what they are!

Ta-Da: The new scrollbar look is simple, but at least you see what they are!

I have also taken the liberty to put some glyphs on the min/max buttons. These are hardcoded into the class, but you can remove or replace them easily (just override the InitializeObject method and change the innerHTML property).

Notice that they are transparent in the picture above? Well, this is actually by design. Just assign a color or background picture through the background property, and adjust them to your liking. A simple:

w3verticalscrollbar1.background.fromColor(clWhite);

Should do the trick. But I have left them transparent by default because you are intended to adapt these to your form and CSS style. Except for the scrollbox control, there I have styled them with a plain white background.

New widgets?

A couple of new controls have been added. First there is a new label component which is simpler than the one shipping with Smart Mobile Studio from version 1.x. The default label is actually a composite label, consisting of a child control to handle horizontal alignment. This is great for most situations, but I found myself missing a simpler label when I coded the CaseBook demo.

A plain, un-decorated iOS button has been added. This is a pure duplicate of the default iOS button. A white, rounded button with a blue verdana caption and blue frame. Simple but important.

We now have full support for iScroll

We now have full support for iScroll

The next control is more exciting perhaps, namely a design surface control. This inherits from TW3Scrollbox, but introduces more functionality for building editors. So if you want to make a simple paint program (or a full photoshop clone), or perhaps a tile map editor for games, or a designer control which is better than ours– then this is the control you want to inherit from.

Connected to the above control are 2 controls which are interesting, namely horizontal and vertical rulers. This may not sound that hard to make (nor was it ) but they are tricky to get right. What I did was render the whole ruler in one go onto a TBitmap; assign it to the control as it’s background picture, and then I update the background picture position (phew) according to the position. A very neat and clever way of solving the redraw problem. And as a bonus it will trigger the GPU on mobile devices to make it snappy!

And last but not least, we now support the iScroll library. If you have no idea what this is then I suggest you google it. It’s a great library for doing iPhone type scrolling lists (which bounces when you reach the limit, has accelerated speed support and much more). I have implemented a new TW3Scrollbox based on this library, which is perfect for displaying text, menu options and news. I used this in the CaseBook demo.

More controls, and the cloud thing too!

Yes, more is on the way! I am presently going over MonoTouch and the default widgets from Apple to see what we can add. Smart Mobile Studio is first and foremost a programming environment for mobile platforms, so that comes first. But I guess it’s time to start expanding into HTML5 full frame applications (read: browser applications for desktop), so you can expect more in the future updates.

A treeview and listview control is on my list, as well as a proper database grid and string-grid.

Cloud storage, coming to a smart RTL near you in the future

Cloud storage, coming to a smart RTL near you in the future

But before we venture into map controls, grids and whatnot — I have an urge to solve a more immediate problem. Namely storage. TMS software has just released their Cloud package, and I really want to provide something similar for Smart Mobile Studio. Being able to store data directly in the cloud, per application user, is something which would set us apart from other HTML5 frameworks. At least with the simplicity and elegance I have in mind.

But it goes a bit deeper than just “being able to”. I want to amalgam cloud services with local storage to provide a unified storage mechanism; which includes full filesystem emulation.

Meaning that you would write code to store files and data once, and it would work the same no matter what the target is. Cloud, localstorage or sessionstorage – makes no difference.

Anything else?

Much more than I can fit here! I have talked over and over about the memory stuff, which is turning heads even for pure JS developers (which have not really seen real streams and encoding buffers like this before), so that is probably the biggest “wow” factor in the next update.

But let us not forget all the fixes and additions to the IDE! But for that you have to wait a bit more.. but rest assured, they are awesome!

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: