Home > CSS, Delphi, JavaScript, Object Pascal, OP4JS, Smart Mobile Studio > Creating a modal dialog in Smart Mobile Studio

Creating a modal dialog in Smart Mobile Studio

Just a quick tip for all you SMS hackers out there. Have you ever wanted to create a modal dialog for your SMS applications? Well, the bad news is that JavaScript doesnt know a modal form if it’s life depended on it — but the good news is, that you can force the user to take notice, creating the same desired affect.

The way to make the user take notice is, naturally, to make it impossible for him/her to continue doing anything until your dialog is released. Now there are many ways to do this, from the extremely anoying to the almost pointless. In our case we will be simple and to the point (which I think most users favour) and simply create a block-box.

The block-box approach

What is a block-box? Well, it’s actually just something that is semi-transparent and covers the whole display — blocking all user input from ever reaching underlying components. Clever right?

You will find the class TW3BlockBox defined in W3Application.pas and all it does is to fill the display completely with a black, semi-transparent panel. If you have ever user TApplication.ShowDialog then you know what it looks like.
Creating a block box is as simple as:

  FBlocker := TW3BlockBox.Create(Application.Display);
  FBlocker.SetBounds(0,0,Application.Display.Width,Application.Display.Height);
  FBlocker.BringToFront;

And voila, you have effectively blocked the entire display from getting any user-input events (so make sure your panel or dialog release the FBlocker instance, or you will never get out again.

When you create your dialog, remember to use FBlocker as parent (!)

Also, if you are worrying about “oh what if i forget to release it? What about memory”, well that’s not a problem. With the block-box in place the user cannot do anything until you release it (unless you have a timer that kicks in and does something fantastically illegal) – and secondly, releasing your instance is very simple too.

I suggest you do like me, and isolate your dialog in a class. Create the block-box inside your constructor. Then have a “ok” button (or whatever you want the user to do) and in that button you just go:

Procedure TMyDialog.W3Button2Click(Sender:TObject)
Begin
  if assigned(FOnDialogDone) then
  FOnDialogDone(self,fmOk);

  w3_callback( procedure ()
  begin
  self.free;
  end, 100);
end;

This will call back to the main app with your results, and gracefully release the dialog 100ms later. W3_Callback is important because it gives the browser time to update stuff, and since we now write async code – that is a very important factor. How you sculpt the dialog and/or events is up to you. Also, javascript is managed, so there is no such thing as memory loss (in theory) unless you create 1 million nested divs and just keep on going 🙂

Built in modal functions

The RTL contains functionality for dealing with modal dialogs in a more uniform way. If you head over to Primoz’s website you will find a full tutorial on using that functionality: http://www.smartprogrammer.org/2013/04/new-in-smart-11-modal-dialogs.html 

Enjoy!

Advertisements
  1. August 29, 2014 at 3:24 am

    Nice example. I suppose you also need to react to resize to make sure that the blocker covers the screen even when the device is flipped.

    • Jon Lennart Aasenden
      August 29, 2014 at 6:42 am

      Yes, but i think it does that automatically.
      The layout rules of TView -> TDisplay is different from forms, it’s stack based (top-down sorted by position), except block-boxes, which the display doesnt modify.
      But I believe it’s resized automatically by the layout routine.

  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: