Home > Delphi, JavaScript, Object Pascal, OP4JS, Smart Mobile Studio > A better, Smarter Mobile Studio

A better, Smarter Mobile Studio

It’s been a hectic couple of weeks. You know how it is before a project enters alpha mode. You want all your ducks in one row, you want no surprises and as much done so you can safely enter the beta phase. Well things are no different in our camp and tension can get high from time to time.

Today I am presenting the first screenshots of our “un skinned” Smart Mobile Studio IDE. This is the 2.5 candidate. While much may look more or less the same, hiding behind the UI are thousands of fixes, tweaks and improvements.

Quite a lot has changed, it's hardly the same project any more

Quite a lot has changed, it’s hardly the same project any more

The biggest change, at least from a conceptual view, is that our UI is now fully dock-oriented. Meaning that you can drag almost everything around and position it where you like to. So if you prefer to keep the project manager on the right rather than the left, just drag it over and save the layout (you can also pick a default layout).

But there is more. Much, much more.

As you can see from the picture above, webkit-developer tools is made use of. This can be incredibly helpful when debugging. It also helps you familiarize yourself with exactly how our RTL operates, which creates HTML “on the fly” from JavaScript. A lot of people have problems understanding how this is possible, but once you get to play with it – everyone go “oh wow!”.

Dock galore! Setup the IDE just like you want it

Dock galore! Setup the IDE just like you want it

The RTL is also getting some quality time; More than 50K lines of code has been added by me alone (not counting all the fixes and extras the others have added) so whatever you have missed from the RTL, chances are you will be happy about at least a couple of additions. I know I am ecstatic about the memory stuff, and stream! Oh god I have missed those!

Better construction rules

We have also added a few minor changes to how applications work internally. Now don’t get upset, it’s not a “code breaker” type of change. And if it should manage to break your code, it’s a 3 minute fix. But it’s worth it, because the benefits and speed are phenomenal.

Consider this: JavaScript is written from the ground up to be ASYNC. This means that when you create an element, like say a button or an image, there is no guarantee that the object is ready straight away.

In a 100% async framework there is no such thing as “right now”. So JavaScripts most sacred design-rule is that all types of work should be done in lazy mode. Perhaps the inventor was spanish or mexican – i dont know, but that’s what JS does. This is best seen in the constructor, because whatever you create there wont be visible and fully “ready” until after the constructor has exited.

Up until now we have ignored this, because the majority of our applications have been fast and small enough to not be bothered by this. But making large-scale applications means playing by the rules, so we decided to fix this sooner rather than later.

So all visual elements now has a new procedure: ObjectReady() which you should override and use to adjust and set object values. This method fires when the element itself and it’s children are 100% fully injected into the DOM.

So quick rule of thumb is:

  • InitializeObject() is where child elements should be created
  • ObjectReady() is where child elements are initialized with values
  • Resize() is where we adjust and adapt to size changes
  • Paint() is where we update graphics (only applies to TW3GraphicControl)
  • PerformLayout() forces a manual resize and update of the UI

If you have created controls under Delphi this should be familiar steps. And to complete the picture we adopted the property “ComponentState” as used by Delphi and FreePascal; So now you can check and adapt to component states like you have always done:

if not (csReady in ComponentState) then
FLeft:=Value else
Begin
  BeginUpdate;
  FLeft:=Value;
  AddToComponentState([csMoved]);
  EndUpdate;
end;

Here are the ComponentState values:

  • csCreating
  • csLoading
  • csReady
  • csSized
  • csMoved
  • csDestroying

csCreating is only set while a control is being created. csLoading is only set while designer-code is executed. csReady is set and stays permanent once the construction sequence is complete. csSized and csMoved reflect movement and resize calls. These states are managed by the BeginUpdate and EndUpdate mechanism. And finally, csDestroying is set during destruction of the instance.

Packages and component installation

Although we added this in a previous update, we have spent some time polishing it, so in this version you can finally use packages exactly like you would under Delphi. In fact creating component packages is easier than under Delphi because you don’t have to fiddle with run-time and design-time paradigms. Simply include the units you have written (including resource files like images, sound or data), full-out the version info and required information fields – and that’s it. SMS will happily compile a package for you that you can sell, send to your colleagues or make available online.

Building packages is easier than under Delphi

Building packages is easier than under Delphi

Other tidbits

Loads. So many in fact that it should be divided into 3 updates rather than 1. Marshaled pointer support is probably the biggest game changer, combined with support for Move, FillChar and all the other “memory” methods. Built on top of this are buffers, steams and data conversion classes. This may sound simple and small, but believe you me – in the world of JavaScript this is unheard of.

We also updated the networking controls to reflect stream and buffer support, so now you can safely download data and get the binary result in a stream. Just like under Delphi or FPC.

More tools and time-saving features

More tools and time-saving features

And finally we have dataset support. w3system.dataset will finally bring you a uniform way of dealing with data. It’s an in-memory dataset written in Smart Pascal (read: no dependencies). This can be used to retrieve data from a nodeJS server or REST service; you can use it to transfer changes from a client to a server (offline editing). Only creativity sets the borders.

Well — I think you will be very happy with this update. A stable, rock solid RTL. A feature rich, tried and tested IDE. A compiler which is faster and produces better code than ever before — and fantastic support for all mobile platforms out there.

Advertisements
  1. March 27, 2015 at 10:42 am

    that sounds all very very very very promising. However I hope the new features are coming alongside with some good documentation?

    • Jon Lennart Aasenden
      March 27, 2015 at 2:07 pm

      We have a full wiki and new website which will be launched in a couple of months, that is going to lift the project significantly in the documentation department.
      As always it’s the most advanced users who will benefit first (sadly). But yes, documentation is something we are dealing with, but it has taken second fiddle to pure technology right now.
      But that will change.

  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: