Author Archives: Jon Lennart

In the previous update of Smart Mobile Studio (not the summer hotfix) we added support for CTRL + CLICK navigation inside the editor. So if you hold down the CTRL key and click a symbol (a method name for example) it would navigate to the declaration or implementation section for that symbol.

Getting this function to work as expected (i.e “like Delphi does it”) is actually quite tricky. Depending on the type of method for instance, being marked as either virtual or abstract, the navigation could result the IDE showing the ancestor implementation rather than the current overridden implementation. In other words, if you have written a class that inherits from a standard class – and then do a CTRL + CLICK on a method declaration – it can actually confuse the IDE and you end up looking at the implementation for the original base class.

Navigation should be linear and recursive. So if you inherit from a class, click a method you have overridden, you should end up at your own implementation. If you further click on your implemented method – you should go directly to the original implementation.

This has now been fixed, and I’ve also started on the reverse navigation (SHIFT + CTRL + CLICK should bring you from implementation to declaration). Once the reverse is in place we can add keyboard shortcuts like SHIFT + Up/Down as well, since that is more or less the same function in a non recursive form. Of-course, the reverse navigation will stop at the interface section of the baseclass since we don’t want to remember the top-level starting point (that could cause some confusion between units). Keep it simple and clean.

Battle for the sun

While we are busy chewing through the fogbugz list of reported issues (and adding new RTL features) we came across a very interesting side effect with relation to graphics. As you probably know modern browsers have a very tight security system built into it. One of the rules is that you cannot call or use resources from other domain (cross domain communication). The exception is JSONP or when the server provides a special header which tells the browser that you can, indeed, use any resources you want.

What I did not know was that the same security system (worthy of Alcatraz) also applies to graphics (!). In fact, your browser regards itself as one domain (127.0.0.1 or machine name to be precise) and the server where you download index.html and other files – as a distinctly separate domain. This is of-course all true in network terms. Your local PC, iPhone or iPad is not the same as your server (hence the concept of “sessions” – which is server controlled due to the fact that HTTP is stateless).

What does this mean? It means that if your app has images stored in your resource folder (added to the project via the IDE, or manually copied into the res folder), there will be limits to how you extract and move the pixeldata. For instance this example:

procedure TForm1.ButtonClick(Sender:TObject);
begin
  FImage.OnLoad := procedure(Sender:TObject)
    var
      mData: TW3ImageData;
      x, y: Integer;
    begin
      try
        //Get the pixel buffer directly
        mData := FImage.ToImageData;
        if mData <> NIL then
        begin
          //Dump info to stdout
          WriteLn('Data is valid object');
          WriteLn('Width='  + IntToStr(mData.Width));
          WriteLn('Height=' + IntToStr(mData.Height));

          //Set all pixels to red
          for y := 0 to mData.height-1 do
            for x := 0 to mData.Width-1 do
              mData.Colors[x,y] := clRed;

          //Apply as background to form
          Self.Background.FromURL(mData.ToDataUrl);

          //Release pixel buffer
          mData.Free;
        end 
        else begin
          Raise Exception.Create('Image was NIL!');
        end;
      except
        on e: exception do
          ShowMessage(e.Message);
      end;
    end;

  FImage.LoadFromURL('res/parallax.png');
end;

.. will work fine for desktop browsers (safari, chrome and firefox), but fail due to security reasons on the iPhone and iPad (which enforce CORS to the extreme). I’m not sure how beneficial such extreme security measures are to be frank, but that’s another story.

Solutions

In those rare cases where “security exception 18” will cause havoc, the obvious solution is to use the image converter (Tools -> Image converter) to turn your image into a constant and include it as source instead of as an external file. But for normal use (display, move around, rotate etc. ) you wont run into that problem. So it’s only for hard core programmers that like to fiddle with bits and bytes (like myself) that this will be a potential case.

The second solution, which is also what Smart was made to target, is to use phonegap. When you compile your app with phonegap all the security restraints go away, and you can pretty much do everything an ordinary .exe file can  – including file access, camera access and the like.

Clearly, one does not simply waka waka into mordor 🙂

In this mini article we are going to create a normal slider control. It is actually very simple and hardly deserves a full article, but since HTML and the DOM (document object model) have a long and bumpy trail of evolution behind it – some explanation is in order.

Setting it up

Under the DOM, a slider is actually a text-box in disguise. So to create a slider, you simply alter some properties of a normal TW3Editbox and it magically turns into a range-based slider instead. I’m not sure what the programmers behind the DOM thought when they made this rule, but I’m sure they had their reasons.

So, start by creating a new visual application. This also creates a default form for us. Now click the editbox icon from the component palette – and then click on the form. Resize and position the box as you see fit.

Editbox sized and ready

Now that we have our editbox lined up, make sure you click CTRL + S (save shortcut) so that the form design data is stored in your project file. Once you have done so, switch over to the code tab. Alter the initializeObject() method by adding the following text:

procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
  W3EditBox1.InputType:=itRange;
  W3EditBox1.setMin(0);
  W3EditBox1.setMax(100);
  w3EditBox1.OnChanged:=Procedure (sender:TObject)
  var
    mValue: Integer;
  begin
    mValue:=TVariant.asInteger(w3EditBox1.handle.value);
    writeln(mValue);
  end;
end;

Why the esoteric handle stuff?

The reason we have to access the value property of the DOM element directly (handle always points to the actual HTML element), is because of an old difference in browser API. FireFox supports the older “range” property of the element, but the modern API supported by nearly all browsers today is to obtain the value via the.. well, value property. The Smart RTL sadly used the older variation when it was written, but the next update will have the correct range property.

Voila, sliders galore

Smart Mobile currently ships with a rather spartan number of custom controls. Originally we were aiming at a rather minimal RTL and only the basic iOS widgets, this is how C# does it when it comes to iOS development. While we have the rounded iphone menu in the IDE, what is missing is a more versatile menu. Both Android and iOS devices have scrollable list menus that are flat and designed to cover the iphone’s entire horizontal width. You can then move around it with one finger, and when you touch a single item without scrolling – that is considered a “click”.

In this little article I’m going to create this list control to demonstrate how easy it is.

Roll your own

First, let’s start with the baseclasses. We are going to keep it very simple, reducing the list to only two classes: one representing a list item – and another representing the actual list.

Since iPhone lists have the capacity to include sub-controls, we are not going to cheat and wrap UL / LI tags, but use fully functional TW3CustomControls as list items. This will give us the freedom to not only style our list items – but to add buttons and whatever we want to each element.

So let’s start by defining a couple of classes:

  type

  (* Generic ancestor *)
  TLSTCustomMenuItem = Class(TW3CustomControl);

  (* Array type *)
  TLSTMenuItems = Array of TLSTCustomMenuItem;

  (* Menu item *)
  TLSTMenuItem = Class(TLSTCustomMenuItem)
  private
    FCaption: String;
    procedure setCaption(Const Value:String);
  protected
    procedure InitializeObject; override;
  public
    property  Caption:String read FCaption write setCaption;
  end;

  (* selection event *)
  TMenuItemSelectedEvent = procedure (Sender:TObject;Const aItem:TLSTCustomMenuItem);

  (* Our menu *)
  TLSTMenu = Class(TW3ScrollControl)
  private
    FItems:       TLSTMenuItems;
    FLastY:       Integer;
    FSelected:    TLSTMenuItem;
    FOnSelected:  TMenuItemSelectedEvent;
    procedure     HandleTouchBegins(Sender:TObject;Info:TW3TouchData);
    procedure     HandleTouchEnds(Sender:TObject;Info:TW3TouchData);
  protected
    procedure     HandleItemTapped(Const aItem:TLSTMenuItem);
    procedure     InitializeObject; override;
    procedure     FinalizeObject; override;
    procedure     ReSize;override;
  public
    property      OnItemSelected:TMenuItemSelectedEvent read FOnSelected write FOnSelected;
    property      Items:TLSTMenuItems read FItems;
    function      Add(Const aItem:TLSTCustomMenuItem):TLSTCustomMenuItem;overload;
    function      Add:TLSTMenuItem;overload;
  end;

The FItems array is basically a list of the child items. This is actually a bit overkill, since TW3Component already support parent/child management – but it’s Friday so I just used an array to keep track of things.

Ok, let’s move on a bit and look at the implementation for our item:

  //###########################################################################
  // TLSTMenuItem
  //###########################################################################

  procedure TLSTMenuItem.InitializeObject;
  begin
    inherited;
    Self.Color:=clWhite;
    Self.Height:=32;
  end;

  procedure TLSTMenuItem.setCaption(Const Value:String);
  begin
    FCaption:=Value;
    innerHTML:=Value;
  end;

This is a fairly simple setup. We give our item a default color of white, and set the height of the listitem to 22 pixels. The setcaption() is actually one you should look out for. As you can see i use the innerHTML property to set the caption. This is fine for this example – but it will kill all child controls (!). For a proper title, create a child TW3Label and position it by overriding the resize() method.

Ok, let’s look at the main scrolling control. The actual scrolling behavior is inherited from TW3ScrollControl which is a minimalistic, touch based scrollbox. Unlike the Delphi scrollbox – the smart version contains a sub-control called “content” which is what is actually moved.

This means that when we populate our listbox, we have to create our list-items with “content” as parent. Ok, let’s have a look:

  //###########################################################################
  // TLSTMenu
  //###########################################################################

  procedure TLSTMenu.InitializeObject;
  begin
    inherited;
    FItems.SetLength(0);
  end;

  procedure TLSTMenu.FinalizeObject;
  begin
    FItems.Clear;
    inherited;
  end;

  procedure TLSTMenu.HandleTouchBegins(Sender:TObject;Info:TW3TouchData);
  begin
    (* remember current scroll position *)
    if (sender<>NIL)
    and (sender is TLSTMenuItem) then
    begin
      FLastY:=Content.Top;
      FSelected:=TLSTMenuItem(sender);
    end else
    begin
      FLastY:=-1;
      FSelected:=NIL;
    end;
  end;

  procedure TLSTMenu.HandleTouchEnds(Sender:TObject;Info:TW3TouchData);
  begin
    (* No scrolling but touched? Its a tap *)
    if Content.Top=FLastY then
    begin
      if (FSelected<>NIL) then
      begin
        if (FSelected=sender) then
        begin
          HandleItemTapped(FSelected);
          FLastY:=-1;
          FSelected:=NIL;
        end;
      end;
    end;
  end;

  procedure TLSTMenu.HandleItemTapped(Const aItem:TLSTMenuItem);
  begin
    if assigned(FOnSelected) then
    FOnSelected(self,aItem);
  end;

  function TLSTMenu.Add:TLSTMenuItem;
  begin
    result:=TLSTMenuItem(Add(TLSTMenuItem.Create(Content)));
    result.OnTouchBegin:=HandleTouchBegins;
    result.OnTouchEnd:=HandleTouchEnds;
  end;

  function TLSTMenu.Add(Const aItem:TLSTCustomMenuItem):TLSTCustomMenuItem;
  begin
    if aItem<>NIL then
    begin
      if FItems.IndexOf(aItem)<0 then
      begin
        BeginUpdate;
        FItems.Add(aItem);
        EndUpdate;
        content.LayoutChildren;
      end;
    end;
    result:=aItem;
  end;

  procedure TLSTMenu.ReSize;
  var
    mItem:  TLSTCustomMenuItem;
    mSize:  Integer;
    x:  Integer;
    dy: Integer;
  begin
    inherited;
    for x:=0 to FItems.Length-1 do
    begin
      mItem:=FItems[x];
      if mItem.visible then
      inc(mSize,mItem.height);
    end;
    Content.Height:=mSize;

    dy:=0;
    for x:=0 to FItems.Length-1 do
    begin
      mItem:=FItems[x];
      if mItem.visible then
      begin
        mItem.SetBounds(0,dy,width,mItem.Height);
        inc(dy,mItem.Height);
      end;
    end;
  end;

Everything here should be fairly straight forward. We hook the onTouchBegins and onTouchEnd events on all our list items. Why? Because we have to solve a little problem. Since our list is scrollable, that means we have to somehow distinguish between a scroll swipe (up or down) and an actual tap. To achieve this we set down a simple law: If the Y position of the list is in both events, then we consider that a tap (or selection). If you have moved your finger on the other hand, then the tap is ignored.

The final procedure, namely resize, does two things: first, it calculates the total height of all the list items and size the content control accordingly. Then it loops through and positions the child elements.

Styling

Ok, with the behavior out of the way – we just need to add one final piece: namely styling. So double-click on the project CSS file and add the following:

.TLSTMenuItem {
  -webkit-user-select: auto;
  background: #FFFFFF;
  border-bottom: solid 1px #9A9A9A;

    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 17px;
    color: #888888;

}

Let’s give the control a test-drive, so we add the unit to our mainform’s uses clause, create an instance, and add some items:

unit Form1;

interface

uses
  w3system, w3graphics, w3ctrls, w3components, w3forms, w3fonts,
  w3borders, w3application, unit1;

type
  TForm1=class(TW3form)
  private
    { Private methods }
    {$I 'Form1:intf'}
    FMenu:  TLSTMenu;
    procedure HandleItemSelected(Sender:TObject;Const aItem:TLSTCustomMenuItem);
  protected
    { Protected methods }
    procedure InitializeObject; override;
    procedure FinalizeObject; override;
    procedure StyleTagObject; reintroduce; virtual;
    procedure Resize; override;
  end;

implementation

//############################################################################
// TForm1
//############################################################################

procedure TForm1.InitializeObject;
var
  x:  Integer;
begin
  inherited;
  {$I 'Form1:impl'}
  W3HeaderControl1.Title.Caption:='Form header';
  w3HeaderControl1.BackButton.Visible:=False;

  FMenu:=TLSTMenu.Create(self);
  FMenu.Color:=clWhite;
  FMenu.StyleClass:='TPDFMenu';
  FMenu.Content.height:=120;
  FMenu.Content.color:=clGreen;
  FMenu.OnItemSelected:=HandleItemSelected;

  FMenu.BeginUpdate;
  try
    for x:=1 to 20 do
    FMenu.Add.Caption:='List item #' + IntToStr(x);
  finally
    FMenu.EndUpdate;
  end;
end;

procedure TForm1.FinalizeObject;
begin
  FMenu.free;
  inherited;
end;

procedure TForm1.HandleItemSelected(Sender:TObject;Const aItem:TLSTCustomMenuItem);
begin
  self.W3HeaderControl1.Title.Caption:=aItem.innerText;
end;

procedure TForm1.Resize;
var
  dy: Integer;
begin
  dy:=W3HeaderControl1.top + W3HeaderControl1.height + 2;
  FMenu.SetBounds(0,dy,width,height-dy);
  inherited;
end;

procedure TForm1.StyleTagObject;
begin
  //Custom styling
end;

end.

As you can see from the code, we catch the touch events and change the title of a header control we added to the form. This makes it quite easy to see what you are doing.

Scroll list galore

You can download the project file here (zip archive) and play with it!

It’s been a while since I have written anything in the developers log, so I thought it would be nice to share two new avenues of the web marked that can benefit from smart mobile studio. In fact, I’m scheduled for a meeting with a Norwegian publisher regarding our upcoming command-line compiler. There is a huge demand for template based projects in the multimedia scene (where only the content is changed but the code remains the same).

Adobe PDF embedding of javascript

Fairly simple coding, but good revenue

If you own an IPad and have children you will no doubt have noticed how much attention children give to iPad games, books and media. I have a 5 year old daughter that have no interest what so ever in computers, PlayStation or the sorts – but the moment she sat down with the iPad all that changed. I don’t know how many interactive books we have bought for her since we got the iPad but it’s quite a few. So where computers and digital gadgets used to be the domain of a predominantly male group in society – the ability to touch and interact with the devices is changing all that.

One of the latest advances in rich media (or should we say: interactive books that includes media) is not simply that they use javascript -but that the latest additions by Adobe to their PDF format is pretty much tailor made for iBooks and Amazon’s reader. But someone has to program the effects and movements of images using javascript (Adobe actually started adding javascript support 10 years ago, but hardly anyone have noticed that is not in the publishing business).

This is perfect for smart mobile studio which is capable of producing advanced yet compact apps that makes full use of hardware acceleration and all the latest web technologies. So if you’re into graphics and know smart – then this is absolutely knowledge publishers will be interested in. You wont believe some of the prices these publishers pay just for some javascript animations (I was gobsmacked by it). And with smart you can compete not only in terms of code complexity, but also in time to deliver.

Games and multimedia

Dune II, Amiga classic

Javascript games is becoming more and more popular. I really had to see it for myself to believe it, but kids today don’t grow up with or care about Amiga’s or commodore 64’s – they grow up with the browser. My 9 year old son loves to play online games but to my surprise, he is more interested in either retro games (super mario, sonic etc. in an emulator) or javascript games. He occasionally plays a game of FIFA on the PlayStation 3, but his generation prefers to play javascript games.

A good javascript game that can run in any webkit browser (we also support FireFox) can go a long way. Since smart compiles to javascript it can be played on all operative systems (linux, mac, windows, whatever has a modern browser, even my TV runs smart apps) and reach all mobile phones and pads at the same time. With a dedicated server and a REST API you could do a lot of cool stuff.

And one of our advantages that the others dont have, is quite frankly classes. Take something simple like hardware accelerated graphics. Sounds easy yeah? Well actually it’s not, at least not when you are hacking away in a javascript notepad editor, having not only to code the game – but also create the OOP layer as well (or use a framework that mimic these things). Most javascript developers end up with canvas games, because mixing pixel graphics with other elements is — well, let’s just say it quickly turns into a mess after 10.000 lines of javascript.

I invented the term ‘Object-Oriented’, and I can tell you I did not have C++ in mind.
-Source: Alan Kay. Creator of Smalltalk.

Since smart comes with a full implementation of sprite3d, reverse engineered in object pascal — creating responsive and blistering fast javascript games is really not that hard. And we have the benefit of classes, so our monsters can inherit things like behavior, animations and so on. For us coming from delphi we take that for granted, but it’s actually not something we should take for granted – because in a lot of languages you are expected to type quite a bit of code before you even see a pixel on screen.

Had I not been busy with the first smart update, I would probably be coding a Dune II clone right now.