Modal dialog with faded background ...

Print

Up to Discussions in Ask-the-Expert

This Question is Assumed Answered

1 "correct" answer available (5 pts) 15 "helpful" answers available (3 pts)

2 Replies Last post: Jun 13, 2008 9:35 AM by rhh

Modal dialog with faded background

Jun 12, 2008 11:00 PM

BlackBelt

URPradhan 167 posts since
Mar 6, 2008

I have seen few Ajax based RIA applications where, whenever there is a dialog box (either may be information, question, etc ...) on the middle of the screen, the whole browser space becomes fade (like a thin white layer over the browser) and the dialog box (may be custom UI element) acts as a modal dialog ONLY wrt the BROWSER TAB. It do not give access to other parts of the application when that dialog is active. But we are free to visit other TABs of the browser.

For e; if you ve used Google Calendar while deleting a meeting the confirmation dialog remains on top, and the rest of the screen fades away. Untill we close that dialog we can not access other parts of the application, but we can goto other browser tabs.

How to implement those kind of feature using Curl.
BTW, how the google calendar's Day/week/month view KINDs of UI can be created in Curl ?
Can we use simply the canvas -or- table -or- recordgrid (need suggestion).

Another thing, how to draw a balloon tooltip with a arrow towards the control (like in google earths tooltips over places or like Ajax tooltips found at http://www.dhtmlgoodies.com/scripts/ajax-tooltip/ajax-tooltip.html)

Thank you.

Tags: modal, dialog

Curl

rhh 29 posts since
Oct 12, 2007

1. Re: Modal dialog with faded background Jun 13, 2008 6:39 AM

For creating the kind of dialog that you want, you'll want to use Curl's OverlayBox container. Basically, you want to wrap the entire basic user interface of your application in an OverlayBox, and then when you want to display the dialog, you add a second object to the OverlayBox that includes your "modal" dialog displayed on top of a background that fades your basic UI. To do the fading, you will need to use a translucent color like "#ffffff80" and you'll need to make sure that your application uses "high-quality" rendering mode so that the translucent color will actually have an effect. One other thing to watch out for is that the layout behavior of OverlayBox is less flexible than for most of the other Curl containers, so in order to get predictable results, I recommend a practice of explicitly setting the options

horigin = "left", vorigin = "top"

(or any other consistent set of horigin and vorigin values) directly on each of the objects that you put into the OverlayBox. Putting this all together, the overall structure of your application would be something like this:


{curl 6.0 applet}

{document-style PlainDocument}

{do {set-rendering-mode "high-quality"}}

{let master-overlay-box:OverlayBox =
    {OverlayBox
        {Frame horigin = "left", vorigin = "top",
            <your basic application user interface>
        }
    }

{value
    master-overlay-box
}

and then when you want to post your dialog you execute some code like this:


    def overlay =
        {Frame horigin = "left", vorigin = "top", background = "#ffffff80",
            {hcenter {vcenter <your dialog box>}}
        }
    {master-overlay-box.add overlay}

and then when you want to unpost your dialog box you just execute:


    {overlay.detach}

-Bert

Curl

rhh 29 posts since
Oct 12, 2007

2. Re: Modal dialog with faded background Jun 13, 2008 9:35 AM

For a day/week/month view like Google Calendar, I would be inclined to use Table as the main container for laying things out, combined with VBox and HBox for parts of the calendar where the layout requirements are simpler. For example, you might use a VBox inside a Table cell to show the various appointments in one day. Or you may want to put a ScrollBox in your Table cell and put the VBox inside that. Generally, Table is a good choice where you have to lay graphical objects out in a grid-type layout where both horizontal and vertical alignments must be preserved, as in a calendar. VBox and HBox are simpler choices when only horizontal or only vertical alignment is necessary.

For your tooltips, you will probably want to investigate the drawing functions of Curl's Shapes API. You can read about this in the Curl Developer's Guide chapter called Shapes. Generally, Shapes exist inside of Canvas containers, so you'd probably want to use an OverlayBox with your basic user interface as the first child of the OverlayBox, and the second child would be a Canvas with a transparent background (you can accomplish this simply by not specifying a background for the Canvas) and then this Canvas contains the Shape objects for your tooltips.

-Bert