Archive
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!