Tag Archives: HTML5

SPNG: Be informed when values change

Posted on by Posted in Developers log, News, News and articles 2 Comments

There are many new and powerful features in the upcoming release of Smart Mobile Studio (also refered to as Smart Pascal, Next Generation: SPNG in short): One of the most powerful is the ability to be notified when a value or object changes with a single line of code.

So far TVariant has just been a helper class for dealing with typical tasks. Well, perhaps not just typical because under Smart Pascal, variants can map directly to a javascript object (of any type) and allows you direct access to its prototype. The Handle property that all visual controls have is an example of this. The type TControlHandle is actually a reference to the visual element inside the DOM (document object mode). So by accessing that directly in your code, you can change styles, attributes and properties of that element. You are not bounds to only use our pre-fabricated solutions.

In the next update TVariant have a lot of new members. Two that stands out as important: watch() and unwatch().

As their name imply they will warch something for you. In this case you wil be notified whenever a single property, a whole object or indeed – a property deep within an object is altered. It may sound trivial but it’s actually one of those features that lays the foundation for responsive, data-aware controls.

But you can use it for many other things as well. For example you can now attach an event directly to a string. And whenever that string changes (either by your code, the user, or some other script) you can act on it directly. That is pretty cool and very helpful!

  // create an empty javascript object
  var MyValue: Variant := TVariant.CreateObject();

  // Set a default value
  MyValue.NewProperty := 12; // add a property and set a value

  // We want to know when the object changes
  TVariant.Watch(MyValue, "NewProperty", procedure ()
    begin
      showmessage("You changed the value!");
    end);

In this snippet we setup a javascript object and place a named-property inside that object. We then listen for changes to that property (by name even). So if you change that value further down in the code, or by calling some procedure elsewhere – the event will fire and show the message dialog.

This is of-cource just a tiny fragment of the new code that has been added, not to mention the changes and fixes. Some of these features are presently in alpha stage and is being tested. We will post more and more news in the days and weeks ahead – and we are sure you will be pleased with some the fantastic new things you can now code!

Here is an example of the new desktop and windowing applications you can write (picture below): The smart desktop!

The Smart desktop

We decided to update the uartex Media Desktop, an example initially made for touch based embedded environments – and turned it into a fully functional desktop environment!

Both the desktop itself, the filesystem, the IO drivers and windowing toolkit is written in Smart Pascal. You can create kiosk software designed to run on embedded devices, advanced applications designed to run on your intranet – or full cloud systems. So it can run a Smart application inside each Window if you like. But you have full control over windows, file access, directly listings, menu items and can sculpt both the desktop and applications to suit your needs.

The desktop can be coupled with a node.js backend that handles multi-user login and file access. It gives your users access to designated home-folders (again under your control). So each user can have their own work files just like a thin client, and each user can run different applications from a fully working desktop environment.

Below you are seeing Quake II compiled from C/C++ to LLVM bitcode. This is in turn compiled to JavaScript via asm.js. This means the browser will compile the javascript into machine code after loading. So Quake II runs at native speed, all JavaScript, inside our desktop window.

Create windowed applications with Smart Desktop

Create windowed applications with Smart Desktop

You will also be happy to head that x86 Linux and ARM kiosk distros have been created. So once happy with your desktop you can in fact boot straight into it in fullscreen. No Linux desktop or shell — just your desktop running. Both Firefox and Chrome can be used as presenter.

Have a great easter!

NodeJS server programming

Posted on by Posted in Developers log 3 Comments

Work is progressing at a steady pace, and one of the aspects of the new Smart Mobile Studio is how the RTL is cleverly organized into namespaces.

Now it’s to early to spill the beans on all the new stuff, but in short we reached the point where we had to make some radical changes in order for the product to grow and reach its full potential. So far our RTL has aimed at the much loved VCL/LCL component architecture. This is not going to change at all, but how things are organized just had to be dealt with at some point. The longer we wait, the harder it’s going to be to introduce new features.

Namespaces

In the new model we have a clear distinction between visual and non-visual units. Visual units (or code in general) depends on the document object model (DOM) being present. As you probably know, non-visual environments like Node.js and IO.js doesnt have a document object model. These are primarily designed to run server code. They are also used to write actual system services (specially on Linux where turning a script into a background service is easy) or command line scripts.

Add to that technologies like Cordova Phonegap and Espruino (micro controller); then hybrid systems like nodewebkit, and you probably understand how important a clear separation of concepts and code is. But im not going into the nitty gritty of this now.

NodeJS and server side programming

Smart Mobile Studio have shipped with a node.js project type for some time. It throws you in at the deep-end of JavaScript programming, with nothing but the low-level header files to work with. This is fine if you are a JavaScript guru and know node intimately. But working on the level of headers and external declarations is not really user friendly. When you need to finish a server by next week, one that scales and can be clustered (which is just so powerful that I find it hard to describe just how cool this is) – you dont want to fiddle around with header files.

Well, soon you wont have to! In fact, as of writing I’m testing the first server type (http) and it’s performing brilliantly. Its a pleasure to write this part of the RTL !

Nodejs rocks! And with Smart Pascal, it rocks even more!

Nodejs rocks! And with Smart Pascal, it rocks even more!

A simple Node.js server

So, what does the most basic node.js web service look like? It’s almost to easy:

  var server := TNJHTTPServer.Create;
  Server.Port:=80;
  Server.OnAfterServerStarted:= procedure (sender: TObject)
    begin
      console.log("Server has started, listening on port:" + TNJHTTPServer(Sender).Port.toString);
    end;

  Server.OnRequest := procedure (Sender: TObject;
      const Request: TNJHttpRequest;
      const Response: TNJHttpResponse)
    begin
      console.log("-------------");
      console.log("Handling request:");
      console.log(request.Method);
      console.log(request.Url);
      console.log(request.Socket.remoteAddress);
      console.log("Listing headers:");
      for var x:=1 to request.headers.count do
      begin
        console.log(request.headers.Items[x-1]);
      end;
      console.log("-- OK");
      var LText:= "Your headers are:" + #13
        + Request.Headers.ToJSON() + #13
        + "All done.";
      response.end(Ltext);
    end;

  server.Start;

And that’s just one type of server. The really exciting stuff is when you dig into websocket and use socket.io to design your protocols (and clustering!). You can even setup events on both sides that trigger on spesific message types. Forget about heavy duty threading models — all of that is done for you. All you have to do is write the actual service.

Benefits of Node.js

Hosting node services costs next to nothing. Hosting providers are a dime a dozen and you can forget about those nifty prices you normally pay for pure executables (like under Delphi or Lazarus). So there is a huge financial aspect to take into consideration here as well, not just technical jargon. Node services can be moved, they are platform independent and couldnt care less if you use Linux or Windows, Amazon or Azure: as long as node is installed your good to go!

And last but not least: inter-communicating with existing services that are modern, and delivering solutions to your customers that talk JavaScript, Delphi, C++, C# or whatever their preference may be.

So good times ahead!

That installer thing

Posted on by Posted in Developers log

Smart Mobile Studio can be downloaded as a traditional installer-file for Microsoft Windows. This works quite well, especially when doing a clean install, and it would be very odd not to provide an installer in 2016.

However, we do get feedback from people that experience problems with this. Not the installer itself, but rather when they update their system by just installing on-top of an older installation, things become problematic. In short: depending on just how old that installation is, it can be plain sailing or a frustrating experience.

In newer versions of SMS you dont need to download a new installer

In newer versions of SMS you dont need to download a new installer

A while back we introduced the concept of “live updates”. In short Smart Mobile Studio ships with an automatic update application that makes sure you have the latest executables, the latest RTL and that your libraries are always fresh off the mint. Each version of Smart has its own channel inside the update program. The value of such a system is naturally that you dont have to keep on downloading installers, punch in the serial number – or that we accidentally overwrite or delete your own library files. The updater will only deal with the files known to it’s RTL, and leave your work in peace.

File IO is not just write and forget

Windows abound

Windows abound

Windows is not what it used to be. I personally think Windows has embraced the concept of users, access rights and credentials quite well (although Windows Vista made me leave the platform for Ubuntu Linux for a while). But all in all, Windows 7, 8 and 10 are a joy to use.

However, writing an installer that should be compatible with the majority of Windows systems (as many as possible) is not actually straight forward.  There are still things like credentials, roaming and non-roaming profiles, read/write rights, elevated users and functionality requiring admin notification (not to mention access bits on the filesystem itself); So a Windows box in Indonesia is not nessacarily identical to a Windows box in north America.

Microsoft have clear cut rules established for what paths to use when installing software. Smart Mobile Studio follows those rules always, but just because you follow the rules, doesnt mean that the user’s credentials (which propagate into everything he/she does) allows you to write all the files. This is where elevation comes in; Something that is finally easier to deal with in Delphi, the compiler we use to make Smart Mobile Studio.

We have seen people try to install Smart Mobile on thin clients and chrome-books, on roaming profiles in a corporate environment to their old Windows 98 machine. To make a long story short: modern Windows can be configured to be just about anything, and when installing a development platform you really need a normal PC without those restrictions. A developer machine.

Older installations

One of the biggest problems we have had and something that is topping our “how to” question chart, is when they have an ancient version of Smart Mobile Studio on their harddisk (anything from the first beta through version 2.0). This was before we added the automatic update program, and more importantly — the preferences files and dll files have since been utterly re-designed.

So they install the new version thinking it will replace some 3-4 year old install. But fact is, the installer will not overwrite the preferences file, and in many cases its not allowed to delete/replace the dll files. The old software prior to the update program must be manually un-installed through Windows before you install a more modern version (!)

What typically happens is that the old preferences file is left lingering on the system, the new executable tries to read it but finds none of the values it expects. This causes conflicts inside SMS, the server in particular is sensitive to this (which will be made more robust). This is not critical stuff, but annoying.

Using an old preferences file on a new exe will cause problems

Using an old preferences file on a new exe will cause problems, this is a typical stacktrace

The secondly, more critical, is when the older DLL files for the webkit rendering engine is left to linger. That means the header-files we use to talk with the DLL files wont match, causing a serious and show-stopping exception.

Again, manually uninstall the older version first. Then go into your “program files” folder and make sure to delete it completely. Same goes for “program data” (or appdata local or roaming). And last but not least, “user data” where library units, the RTL and various other tidbits are stored.

Using the update program

If you have a newer version you really dont need to download and use the installer. Simply start the update program and it will download the latest files. But its vital to remember that if you have made manual changes to the RTL files (which technically you shouldnt, but we dont mind as long as you stick to the license agreement for copying) – the update program will overwrite those files.

The point of the update program is to make sure the RTL, libraries, shims and IDE executable is the latest. It wont touch files that doesnt belong to SMS.

Events as objects

Posted on by Posted in Developers log 5 Comments

Events are fun right? Well, only in part to be honest. For example, what do you do if you want to catch the same event but at different places?

This is where JavaScript’s addEventListener() comes into play. In short it allows you to add as many event-handlers to the same event as your heart desires. But raw unadulterated JavaScript is a bit of a mess, so I decided to wrap this up in clear cut objects. Oh, and I added a “fixed” event for when you want to have objects for standard events as well.

So now whenever you want to hook an event without ruining your published event-handlers (for instance in TW3CustomControl) you can just use one of these 🙂

Enjoy!

unit eventobjs;

interface

uses 
  w3c.dom,
  SmartCL.Components,
  SmartCL.System;

type


  TEventObjTriggeredEvent = procedure (sender:TObject;EventObj:JEvent);

  TEventObj = class(TObject)
  private
    FOwner:     TW3TagObj;
    FAttached:  Boolean;
    FEventName: String;
  protected
    procedure   HandleEvent(eobj:variant);virtual;
  public
    Property    Attached:Boolean read FAttached;
    procedure   Attach(EventName:String);
    procedure   Detach;
    constructor Create(AOwner:TW3TagObj);virtual;
    destructor  Destroy;Override;
  public
    Property    EventName:String read FEventName;
    Property    Owner:TW3TagObj read FOwner;
    Property    OnEvent: TEventObjTriggeredEvent;
  end;

  TFixedEventObj = class(TObject)
  protected
    FAttached:  Boolean;
    FOwner:     TW3TagObj;
    procedure   HandleEvent(eobj:variant);virtual;
  protected
    function    DoGetEventName:String;virtual;abstract;
  public
    Property    Attached:Boolean read FAttached;
    procedure   Attach;
    procedure   Detach;
    constructor Create(AOwner:TW3TagObj);virtual;
    destructor  Destroy;override;
  public
    Property    Owner:TW3TagObj read FOwner;
    Property    OnEvent: TEventObjTriggeredEvent;
  end;

  TElementRemovedEvent = class(TFixedEventObj)
  protected
    function  DoGetEventName:String;override;
  end;

  TElementAddedEvent = class(TFixedEventObj)
  protected
    function  DoGetEventName:String;override;
  end;

implementation


//#############################################################################
// TElementAddedEvent
//#############################################################################

function TElementAddedEvent.DoGetEventName:String;
begin
  result := "DOMNodeInserted";
end;

//#############################################################################
// TElementRemovedEvent
//#############################################################################

function TElementRemovedEvent.DoGetEventName:String;
begin
  result := "DOMNodeRemoved";
end;

//#############################################################################
// TFixedEventObj
//#############################################################################

constructor TFixedEventObj.Create(AOwner:TW3TagObj);
begin
  inherited Create;
  FOwner:=AOwner;
  Attach;
end;

destructor TFixedEventObj.Destroy;
begin
  Detach;
  inherited;
end;

procedure TFixedEventObj.Attach;
begin
  if FAttached then
  Detach;
  FOwner.Handle.addEventListener(DoGetEventName,@HandleEvent,true);
  FAttached := true;
end;

procedure TFixedEventObj.Detach;
begin
  if FAttached then
  begin
    FOwner.Handle.removeEventListener(DoGetEventName,@HandleEvent,true);
    FAttached := false;
  end;
end;

procedure TFixedEventObj.HandleEvent(eObj:variant);
begin
  if assigned(OnEvent) then
  OnEvent(self, JEvent(eObj));
end;

//#############################################################################
// TEventObj
//#############################################################################

constructor TEventObj.Create(AOwner:TW3TagObj);
begin
  inherited Create;
  FOwner := AOwner;
end;

destructor TEventObj.Destroy;
begin
  if FAttached then
  Detach;
  inherited;
end;

procedure TEventObj.HandleEvent(eobj:variant);
begin
  if assigned(OnEvent) then
  OnEvent(self,JEvent(eObj));
end;

procedure TEventObj.Attach(EventName:String);
begin
  if FAttached then
  Detach;

  FEventName := EventName;
  try
    FOwner.handle.addEventListener(FEventName,@HandleEvent,true);
  except
    FEventname:= '';
    FAttached:=false;
    exit;
  end;
  FAttached:=true;
end;

procedure TEventObj.Detach;
begin
  if FAttached then
  begin
    try
      FOwner.handle.removeEventListener(FEventName,@HandleEvent,true);
    finally
      FEventName := '';
      FAttached := false;
    end;
  end;
end;

end.

Telling a 32bit float from a 64bit float

Posted on by Posted in Developers log 2 Comments

The RTL is getting a bit of attention these days, with plenty of visual effects, tweens and more being added to it. It’s easy to forget that sometimes even the smallest things can be of utmost importance. Like how to tell a single from a double via code!

As you may have noticed, Smart Mobile suddenly got support for streams, memory allocation and the ability to manipulate data on byte and bit level. This may sound trivial but it actually changes how we write and deal with data completely. Under vanilla JavaScript working with bits and bytes can be a huge problem. Most JS developers shun native, raw data like the plauge – because they cant do much with it. Well, thats not going to be a problem for us! Buffers, streams, memory allocation, move, copy — easy as apple pie 🙂

Effect Virtual Machine

Amos Basic 2d and 3d

Amos Basic 2d and 3d

Today I was fiddling with a “mini language” module I have been working on. Actually it’s an effect module that allows you to script and compile effect logic in smart pascal itself, so almost like a second language. If you ever played around with Amos Basic on the Amiga home computer back in the 90’s, you may remember that Amos had a secondary animation language? Well, on that old computer sprites and animation was interrupt based (just think threads if you dont have any idea what hardware interrupts are). This allowed the creator of Amos Basic, Francois Lionet, to add a really cool animation language which was executed in the background — allowing your main program to run in parallell to your animation code.

I dont know how many months and years I spent coding Amos and BlitzBasic in my teens, but let’s just say it was A LOT! Francois Lionet and Mark Sibly, the author of BlitzBasic and the Blitz compiler chain were my absolute childhood heroes.

Well, that animation language (but better naturally) is in effect what I am hoping to achieve with my little virtual machine. I really want it to be super-easy to create awesome effects, and I want it to be fast, flicker free and smooth as a baby’s bottom. So a mini bytecode system seems like just the ticket to get that working – and naturally it’s written in smart itself, so you can play around with it when it’s done.

But back to the problem: I had to extend the TReader and TWriter class with the abillity to handle variant datatypes. This also meant adding “word” as a new RTL datatype to handle those 16 bit values. And last but not least — detecting the difference between 32 and 64 bit floating points.

I mean, if you get that wrong it’s going to cause havoc!

CodeSeg and DataSeg

In a bytecode virtual machine like, say, Java or CLR (common language runtime, .NET style) your compiler have to deal with two different things: code and data. One thing is variables (both global and local), but what about constants? Whenever you pass a fixed value to a procedure, that value is actually a constant. It doesnt change and it will be compiled with your program. Well this is where the compiler get’s smart and picks that up, and the value is stored in a special list. So when the program runs, it will fetch that constant from storage and use it. Or, in case of the CLR, it will be compiled directly into the bytecode if it’s an intrinsic value (long story).

Bytecode galore

Bytecode galore

As you probably guess, that’s called a dataseg (data segment), which is different from a codeseg, where the opcode and “asm” is stored.

So thats when i suddenly realized: we have no function in the RTL to tell the difference between a 32bit float and a 64bit float !

Well here is one way of telling the difference. It’s already incorporated into the Read/Write variant, which are functions I added to TReader and TWriter. So you dont have to worry about it. But for those that have (for some odd reason) been looking for this — here it is:

 function IsFloat32(const x:variant):Boolean;
 begin
  asm
  @result = isFinite(@x) && @x == Math.fround(@x);
  end;
 end;

Not much is it? But yet so important.

Using external JS libraries with Smart Mobile Studio

Posted on by Posted in Developers log, News and articles
Neuron groups, ZEISS-Microscopy, CC

Neuron groups, ZEISS-Microscopy, CC

In the forums there was a discussion about how to wrap existing libraries transparently and with a minimum of overhead. In that discussion an example was given about how to wrap the neural network library brain. To avoid posting the same text here as well, this blog post is about translating another neural network library called ‘Synaptic‘.

Continue reading→

Smart Mobile Studio 1.1 RC (build 1.1.0.400)

Posted on by Posted in News

We are very proud to present the release candidate for Smart Mobile Studio version 1.1  (build number v1.1.0.400). If you would like to give this groundbreaking product a test drive before we officially release it, then you can download the installer directly from SmartMobileStudio.com/download/setup_v1_1_0_400_rc.exe


(The context menu is replaced with Ctrl+Shift+R (start/stop recording) and Ctrl+Shift+P (replay the recorded macro).

We have done a lot of improvements in the IDE, the editor, the RTL and the Smart Pascal language. Below is a list of some of the improvements that have been done since version 1.0 (see full manifest of changes for beta 1 here).

IDE changes

  • Added: Support for external form files
  • Added: Navigate to ancestor from class-browser
  • Added: Components are now organized in more tabs
  • Added: RTL source proxy, speeds up compilation and dependency chain
  • Added: Syntax hints and improved code insight
  • Added: The IDE now uses threading to handle background compilation
  • Added: Dependencies for controls are automatically added to the uses clause
  • Fixed: Resizer bugs for nested controls
  • Fixed: Scrolling issue fixed ([CTRL] + [Up]/[Down])
  • Fixed: Disabled unit structure flickering
  • Fixed: LineCount issue
  • Fixed: Case fix for strict hints
  • Fixed: A label “mistake” in the baseframe (it was renamed further up the chain).
  • Fixed: modified [CTRL]+/ to work the same as in Delphi:
    • if a single line is changed, caret is moved to the next line (current column is preserved)
    • if multiple lines are selected, comment is toggled for the whole block and caret is move to the line following the block (current column is set to 1)
    • modification is placed into the undo buffer so that it can be undone
  • Altered: [CTRL]+[/] is replaced by [CTRL]+[#] for systems where [/] is only accessible via [SHIFT]
  • Altered: Minor changes on compiler output (bulk output of errors, warnings and hints).
  • Altered: Search and replace dialog remembers the last states
  • Altered: improved code proposal (insert item highlight)
  • Altered: dialogs are centered
  • Altered: Recent file on welcome tab now supports to show unlimited entries if desired (by default limited to 10 items)
  • Added: Pascal “Gabelou” StyleCop (see prefrences->misc. to enable it).
  • Added: Rename refactoring (including closed files)
  • Added ‘Format Keywords’ action (see popup menu), which translates all keywords to lowercase.
  • Added: Simplified BrowserAPI
  • Added: possibility to filter log messages from the console output (filtered ‘event.layerX and event.layerY are broken and deprecated …’ by default). Select a certain text to filter and right click -> Ignore Message to filter out all messages containing this particular string. The filter will be resetted on restart.

RTL

  • Updated: Remobjects headers
  • Updated: WebGL headers
  • Updated: Sprite3d
  • Added: DrawTo, DrawPart and misc CODEF functions added to TW3Canvas
  • Added: TW3Progressbar control
  • Added: TW3ListBox control
  • Added: Unit for complex numbers (w3complex.pas)
  • Minor formating and added overload function for CreateImageData
  • Added fast sequential read text file loaders
  • Applied the new ‘Format Keywords’ to the remaining RTL files
  • Removed duplicate & tweaked hash function
  • Improved hashing function
  • dialogs need custom initialization
    • modal dialog support integrated into TW3CustomApplication (ShowModal, HideModal)
    • modal dialog is re-centered if application is resized (for example when orientation of a mobile device changes)
    • added  TW3CustomApplication.CreateOpaqueMask
    • TW3CustomControl.getMaxZIndex is now public
    • modal dialogs triggered from modal dialogs are now supported
  • Fixed: zIndex issues with modal dialogs
  • Fixed: opaque layer has high z-index to cover all controls on the form
  • Fixed: SendToBack
  • Altered: dialogs are centered on the form
  • Altered: event handlers are only called when assigned
  • Altered: W3ModalDialog made external for easier reuse
  • Altered: updated Remobjects interface
  • Altered: Changed default Mouse event X,Y coordinates
  • Added: W3ModalDialog uses opaque div to block owner form (tnx to Eric)
  • Added: PixelRatio info
  • Added TVariant.Properties + OwnProperties
  • Added HorzLine/VertLine
  • Added: New FillRectF/StrokeRectF overloads
  • Added: TW3CustomApplication.FormByName, TW3Component.ChildByName, TW3Component.EnumChildrenAltered: SetSize now virtual
  • Added: PhoneGapAPI is now complete

COMPILER

  • Added: Support for RTTI (!)
  • Added: Support for property expressions
  • Added: Support for interface expressions
  • Fixed: Case fixes for strict mode
  • Fixed: an issue where compiler would accept method implementations in a different unit the class was declared
  • Fixed: Lambdas don’t have a “var”/”const”/etc. section
  • Fixed: issue with invalid symbol table in suggestions in case of fatal error in a lambda
  • Fixed: SymbolDictionary bug for forwarded overloaded methods
  • Fixed: calling overloaded inherited constructors
  • Fixed: codegen for assignments of a function’s result to a var param
  • Fixed: timestamp is now up to date
  • Updated: now uses latest compiler core
  • Updated: tokenizer updated to latest revision
  • Altered: Compile speed optimizations
  • Added: Missing semi-colon no longer a stopping error
  • Added: JSON to reserved names
  • Added: JSON static class
  • Added: Preparation for source maps

DEMOS

  • Fixed: style bug in smartflow
  • Fixed: bug in spartacus
  • Fixed: bug in box2d wrapper
  • Altered: Tested all demos (with exception of gyro). All demos now compile.
  • Altered: formatting of Archimedes Spiral
  • Added: frames demo
  • Added: modal dialog example

Sincerely,
Jon Lennart Aasenden
—
The Smart Mobile Studio Team

Only days left

Posted on by Posted in News 17 Comments
Only days to go

Only days to go

It is now only a matter of days before Smart Mobile Studio 1.0 goes on sale. It marks the end of a one year journey for us to create something completely new for the object pascal community, written in nothing but Delphi itself. But while the journey from idea to realization is over, the next stage of Smart technology is about to begin – and it’s going to be big. Really big.

In this our first release, focus has been on providing you with a solid foundation. A visual javascript component library (VJL) with identical parent/child relationship to what you are already familiar with. An integrated development environment with essential functionality including a component palette. And last but not least, a mock form designer with live rendering of the actual HTML5.

As we move ahead each aspect of the formula will be expanded, strengthened and refined. And while we cant blow the whistle just yet, we have something very exciting in our labs that is going to change everything. Forever.

This is quite possibly the most significant Pascal
development to be watching right now, and brings
the wonderful Pascal language to the world of
Internet development! -Simon Stuart, Delphi developer via Google+

What is new in community beta 2?

Posted on by Posted in News 4 Comments

Below are some of the new features that has been added to Smart Mobile Studio community beta II. We hope you find our efforts in creating this product,a product that is both unique, innovative and extremely powerful, useful and interesting. Our customers can look forward to gestures, databases, even better browser support, Phone-Gap support and (last but not least) WebGL. We also aim for tight integration with classical Delphi server technology, like the Remobjects remoting framework and the C# websocket hub.
Continue reading→

Understanding smart

Posted on by Posted in News and articles
Compiler technology

Compiler technology

First, we are extremely grateful for all the positive feedback and questions regarding Smart Mobile Studio! We cannot underline enough how the enthusiasm really makes us work that much harder to deliver a knockout product that will serve the community for a long time. It is indeed clear that we have hit “bulls eye” and a serious gap in the modern programming model can now be filled. We are equally excited to that the emails stem from every corner of the software developing world, from the Delphi community, the C# community and believe it or not -the javascript community itself.

This is quite possibly the most significant Pascal
development to be watching right now, and brings
the wonderful Pascal language to the world of
Internet development! -Simon Stuart, Delphi developer via Google+

Since so many people have asked more or less the same questions, it would be a good idea to outline just what Smart is and what it does, so that people can appreciate even further the depth and broad application of what we are building and what we hope to achieve.

The compiler

Like all code generating systems, the Smart compiler knows only a handful of things. It knows how to handle units (source files), procedures, classes, enumerations, assignments and other important language features. But on it’s own the compiler have no “built in knowledge” of neither what a browser is or what a control looks like. A compiler and code generator is a very complex piece of software that is able to take your source-code, break it down and transform it into something else. Which is javascript in our case. But it could equally have been machine code or C#.

Beginners will discover a language that has withstood
the test of time with unparalleled elegance.

This is where Smart differs radically from a lot of the other products on offer, namely that its built from the ground up to be “real”. Where other HTML5 products out there have a fixed set of classes, and knowledge of what you are allowed to do is pre-determined by the vendor – Smart has more in common with a classical C++ or Object Pascal environments where you are in charge.

The VJL

Just like in Delphi

Just like in Delphi

As you should expect, all the components and classes that ship with Smart was actually coded in Smart itself. We also ship the source units for our RTL (called the visual javascript library, or VJL in short) so that people can examine, learn and also make changes if they want to.

The underlying [RTL] work must have been tremendous -Michael Thuma, Delphi developer via Google +

You could in fact replace the entire RTL with your own version if you so desired. And that is something that no other mobile development studio on sale today can match. They all come with a predefined set of classes, and in the majority of cases these are closed API’s. Meaning that you dont have access to the source.

Smart blows this to pieces just like Borland Delphi once did. While the list of classes you get for free out of the box is to large for this document, the most noteworthy are:

  • TW3Component and TW3CustomControl
  • Full implementation of HTML5’s canvas
  • CSS animation classes
  • Font and bitmap handling, both on-screen and off-screen
  • Buffer classes and buffer-view classes, painstakingly implemented from the WC3 standard
  • Form classes, TApplication and smooth scrolling when navigating between forms
  • Timers, style mapping and much much more

And of-course, with a real compiler you can create as many classes and components as you wish. And you don’t have to be a javascript guru to do so. All you need is some basic understanding of object pascal and you are set to go.

Boundless possibilities

Just like you can create anything under the sun with Delphi, C++ builder or C# due to the fact that these environments have a real compiler – you can create anything you like with Smart Mobile Studio. Smart both compiles to and can interface directly with javascript – which means that whatever javascript can do, Smart can do.

Cool! I created my first OP4JS control: a DHTMLX grid
-André Mussche, Delphi developer via Google +

Smart Mobile Studio, early Alpha

Smart Mobile Studio, early Alpha

It is by definition impossible to say what people will use Smart for. So far people have created games with it, connected to remote web-services, displayed database grids, added control bindings, created fantastic fractal explorers and much, much more. Just like Embarcadero ignited a firestorm of creativity on the Windows platform – our aim is carry that fire into the next frontier which just happens to be the browser.

So the question is not really if Smart Mobile Studio can support feature X. If you can sculpt it in either JavaScript or Object Pascal, then Smart can support it. We will provide you with the Visual Component Library and all the tools you need to create and interact with HTML5 and the latest web developments. We will also work hard to provide you with a standard set of components – but also give you the option to extend our technology with your own packages and components.

Nothing is impossible

Smart Mobile Studio is a vision and an idea. An idea brought to the table by Jon Lennart Aasenden, and embraced by the management at Optimale Systemer AS and a some key developers in the Delphi community. It was by many said to be impossible, if not heretical. When we presented the concept for the general public back in December 2010, it was met by applaud from the few and ridicule by the many. To make it a reality we have worked extremely hard, considering the technical difficulties involved.

Right before Christmas we shipped the first Alpha version, and some smart programmers of the Delphi community immediately created some stunning demos and thus proved the concept right.

And now, in February of 2012, the product has matures further, and we can proudly say that the vision has become a reality.

This tool should really get a place be in every Delphi developers toolbox.

 

Sincerely

The Smart Mobile Team

What can smart offer me?

Posted on by Posted in News and articles

Smart Mobile Studio has a lot to offer modern developers. If you are looking for a way to maximize the potential of the HTML5 platform then Smart has a recipe unlike any other on the market. No matter what industry or field of expertise you focus on – Smart provides benefits that saves time. It makes technological and financial sense.

Beginners will discover a language that has withstood
the test of time with unparalleled elegance.

Advertising

You need an edge in what you do

You need an edge in what you do

The world of advertising and content production operates with high demands. The market is constantly changing and the tools of the trade you have relied on for years – might not even be there tomorrow. Some vendors have consciously banned technologies like Adobe Flash in favour of HTML5 – which means you better start looking for a new method. A method which enables you to deliver quality content, on time, according to your clients expectations. Customers are simply not interested in flash banners any more.

Smart Mobile Studio allows you to take your HTML5 code to the next level. We provide a rich set of visual components ready for use out of the box. No fiddling with styles to get that native look, no experimental hacks to get it working and no shortcuts. This means you can spend your time focusing on delivering rich content and lasting impressions straight away.

As a bonus all your web skills remains relevant as ever before. Smart can interact with other frameworks and you can easily add your own, native javascript code.

With Smart Mobile Studio you finally have a tool that can deliver HTML5 friendly advertising with no dependencies. No plugins, no custom browser extensions needed. What you get is cutting edge javascript which runs incredibly fast.

Entertainment and multimedia

With touch based devices like the iPad (or the rapidly expanding Android based market) almost everywhere these days, the future of tablet based gaming and multimedia is golden. But moving code from a classical programming environment to the web requires time, patience and money. Javascript is a fantastic language that commands great power and potential, but compared to C# or Object Pascal you will find yourself cutting corners.

Browser games are getting more and more advanced

Browser games are getting more and more advanced

Smart Mobile Studio means you don’t have to cut corners. You get all the missing pieces of a real programming language, like actual object inheritance, variants, var parameters and interfaces. This means that converting already existing code from Visual Studio, Flash or C# to HTML5 is radically faster.

Finally you can focus on getting your game or multimedia app out there. Need an off-screen bitmap? No problem. Need a high speed drawing surface? No problem.

With Smart, creating online games becomes far easier because all the boring stuff is already done. You have classes for drawing graphics, both on-screen and off-screen. You get classes for communicating with your web service and you get a native looking GUI skin out of the box. Altering the look of your GUI is just a matter of editing a CSS style-sheet.

Business software

No matter if you are focusing solely on the mobile market or want to create dynamic browser applications, Smart will help you get started straight away. As a modern developer with a background in C#, C++, object pascal or java – first contact with the alien landscape of javascript is often a culture shock. It has been said that going from Delphi or Visual Studio to javascript is almost like trading in your PC or Mac for a Commodore 64.

Javascript can now deliver serious applications

Javascript can now deliver serious applications

As a language javascript has no support for OOP in the true sense of the word, no virtual methods, no abstract methods, no interfaces and absolutely no var parameters. These restrictions alone makes it very difficult to create and maintain large scale applications in native javascript. When we add the fact that you must create, or buy, a GUI framework on top of this, the financial aspects involved in “going native” can hardly be justified.

Smart Mobile Studio removes 2/3 of the challenge straight away. You get a language which is very popular, has a massive code-base the world over, is easy to learn (especially if you have OOP background) and which supports modern concepts like interfaces, classes, inheritance and other “must have” features. So instead of spending months learning in-depth javascript, circumventing it’s pitfalls through trial and error, buying a ton of books and basically re-inventing the wheel — You can pick up Smart and deliver a killer app in no time.

Smart will take your object pascal code (the same flavour as made popular by Delphi and Free-pascal) and compile it into cutting edge javascript. The compiler even sculpts the missing language features, like interfaces and inheritance, in javascript itself. So the generated code have no dependencies. You don’t need a plugin or browser extension at all. It will run “as is” in any webkit based browser (Chrome, Safari, Safari Mobile and more).

Further reading

Taking advantage of classical programming

Posted on by Posted in News and articles
10.000 lines of javascript can be hard to maintain

Javascript can be hard to maintain

Let’s face it, Javascript is both a powerful and flexible language, but developing and maintaining large scale projects in a dialect not really designed for it is frustrating. The reason javascript libraries like jQuery, jQTouch and Sencha have remained more or less unrivaled for years now – is first and foremost because of the monumental effort involved.

The key factor itself have to do with the actual language. Javascript is a fantastic language, but sadly it lacks many of the traditional programming concepts native to languages like C++ and object pascal. Concepts like classes, true object inheritance, interfaces and type casting – techniques and technology created exactly for the purpose of making large frameworks manageable and robust.

Changing the game

With Smart Mobile Studio however you can take full advantage of these classical concepts. This is because our product allows you to write ordinary, classical object pascal (made famous by Delphi, Free-pascal or other incarnations of the language) and it’s instantly converted into super charged javascript.

The compiler at the heart of Smart generates javascript in a way that implements all the aforementioned technologies. So even if javascript itself doesn’t support concepts like interfaces, it is crafted by the compiler in javascript itself. And if you are worrying about speed – you will find that even with all these powerful and classical technologies – Smart Mobile Studio can run with the best of them. To make it plain: Smart does for the browser what Delphi did for the Windows platform.

You also get an IDE (integrated development environment) specifically designed for Smart programming

Write pascal, compile to javascript

Write pascal, compile to javascript

Easy to use, easy to learn and very rewarding

If you haven’t used pascal before then don’t worry. It was designed to be taught in school to students of object oriented software development. Chances are you have already used it yourself or have heard about Delphi or Free-pascal from a co-worker. Object pascal is responsible for hundreds of thousands of applications in the Windows world – and it’s still knocking out killer apps today.

Easy to use doesn’t make it a lightweight in terms of features however. Object pascal is fast, dynamic, robust and can do pretty much everything C++ can do.

With Smart you can now take your knowledge of classical programming one step further – into the domain of super fast HTML5 web applications. You can also use third party products like Phonegap and compile your generated web app into a real, binary executable program – ready for app-store. In fact, only hours after Smart was released to it’s testers, demo projects made it’s way onto the Android marketplace (!)

So what would you rather maintain? 10.000 lines of javascript code or 1000 lines of pascal code to achieve the same thing? Object pascal is a proven, tested by time and established language designed to handle large scale projects. Javascript is not. The benefits of using a compiler that generates javascript are just to great to ignore.

Control complexity and mobile resource management

Posted on by Posted in News and articles 2 Comments
This is not just a picture, but actually the background set for a picture

This is not just a picture, but actually a multi layered view. The buddha is a background for an image placeholder. Quite dynamic and neat

Products like Embarcadero Delphi comes with a rich set of controls ready for use in your applications. If we compare the resource demands of these controls today (Delphi XE or XE2) to those that once shipped with Delphi 1 – or Delphi 7 even, the amount of resources a well designed form consumes has grown exponentially over the years.

As the operative system was grown more complex both in terms for functionality, responsiveness, mobility and the developers need for modern features, the amount of methods and auxiliary classes connected to a single control has become very large. As a result, the amount of memory and CPU requirements have grown with it.

The mobile scene

One of my primary concerns when we sat down to talk about OP4JS control library was simply that it would be over-kill to even attempt to emulate the VCL under javascript. In my notes the primary points were:

  • The amount of JavaScript generated would exceed the restrictions of these devices
  • The HTML5 architecture is incompatible with classical VCL programming
  • The controls would be to slow for practical use

Thankfully my worries were unfounded on all accounts, because we have more or less built a VCL clone. It is and has been quite a challenge. As you may know HTML5 introduces a high-level interface onto ordinary html. It is different not so much in terms of syntax, but rather in philosophy, inspired no doubt by the MVC (model view controller) paradigm imposed on the world by Apple computers. In short, the CSS styling represents the “view” part, the actual html tags the “model” and Javascript the controlling factor. Javascript is what provides behavior to otherwise empty, stateless constructs.

Getting these things to even resemble the VCL has been, well, let’s just say I havent played with my kids in a few weeks.

Doing the math

CSS transitions and events

CSS transitions and events

Luckily, the complexity versus efficiency argument is turning in our favour. Delphi developers like myself have a tendency to over-think the actual needs of our customers, and inside our own heads we are always trying to outsmart other programmers that may – or in most cases – may not be going over our code with a fine tooth comb. This can either drive us to excel at what we do or into obsessive nerds that polishes a piece of code so long – that the platform is dead if he ever finishes.

So, once in a while it’s wise to do a sanity check on your code-base (and your own expectations). Fact is that mobile apps are for the most part quite lightweight. If we for sake of argument say that a mobile app has 10 forms (or views if you prefer) and each of these views is populated by 20 controls. Some controls are composite, meaning that they have child controls (like a toolbar which uses a buttons) while other are vanilla, run of the mill stuff like labels and lists. You may also have a database running under the hood as well.

Adaptable and suitable

So an app consisting of 200 javascript objects is really not that huge. It would result in quite a bit of generated code of-course, but the browser chews through this like it was nothing at all. And you wouldn’t even be close to the limitations set down by Apple or Google regarding size. Strange as it may seem – my test app written in Op4JS both loads and executes faster than it’s native counterpart written in C# (which compiles to a single binary on iOS). The only exception being complex graphics (which you would normally use a DIB library for) and heavy-duty number crunching. But those are things you don’t want to have on your phone anyways. It’s possible of-course, but not practical.

To me at least, mobile development is about information and communication and presentation. It’s about getting or storing data and presenting it on a portable device in a practical manner. It’s also about using the format in a way that makes sense to the consumer.

External resources

Inline graphics, orientation and animations

Posted on by Posted in News and articles 5 Comments
CSS based chevrons

CSS based chevrons

This week we are seeing some very cool ideas finally maturing onto the visual canvas. First and foremost: inline graphics. Under the traditional HTML paradigm resources such as images or soundfiles were always losely bound external entities. So before an image could be used it naturally had to download its content from a webserver or read it from a local file. But under HTML5 all of that goes out the window, because now you can embed your graphics as Base64 encoded characters. In short: transform your graphics into text and they can be applied anywhere.

So today our TW3MenuListItem class got automatic support for inline glyphs. The default glyph is of-course the ordinary iPhone chevron picture, but when TImageList is done you will be able to apply just about anything. Since this is HTML5 you can also make use of your styles to add further “bling” to your elements – but we will leave that part up to you. Our job is to deliver a system with the basic iOS widgets ready – but object pascal style, which means easy to use, easy to work with and as little fluff as possible.

Orientation

Angles should be used prudently

Angles should be used prudently

Another cool feature that is now going through the test phase is the Angle property. All components that derive from TCustomControl have this property, and as the name suggests you can use it to rotate the control as you see fit. While it’s not the biggest feature in the world it does open up for a more colorful expression in the user interface. Want a yellow price banner over a product? Put a label on it, set the color and put -30 in the degree property.

Animations

This feature is my favorite, but it’s also the most complex to capture under object pascal. Webkit allows you to define animation sequences, which can then be applied to a html element or a style. You then use a trigger rule to activate the animation. The cool part is of-course that most of these effects have hardware support – so they run smoothly and without any flicker what so ever.

Since Javascript is not the fastest horse in the stable, at least not on devices like iPhone 3GS – it’s very important to use hardware accelerated animations as much as possible. You don’t want to rotate a picture by manipulating the degree property under a timer. It works of-course, but the results cant be compared to the effects produced by hardware accelerated CSS3 animations.

But of-course, under OP4JS you don’t have to worry about that

 External references