Dialog Sample

[Karoline]

Followingis an example implementation of the Dialog (Modal) Pattern. The below Add Delivery Address button opens a modal dialog that contains two buttons that open other dialogs. The accessibility features section explains the rationale for initial focus placement and use of aria-describedby in each dialog.

In this dialog, the first paragraph has tabindex=-1. The first paragraph is also contained inside the element that provides the dialog description, i.e., the element that is referenced by aria-describedby. With some screen readers, this may have one negative but relatively insignificant side effect when the dialog opens -- the first paragraph may be announced twice. Nonetheless, making the first paragraph focusable and setting the initial focus on it is the most broadly accessible option.

RegisterView just links the view type with the ViewModel type. You can set up these links in the module initialization. This is simpler than trying to get modules to register datatemplates in the top layer of your application.

ShowDialog Shows the ViewModel you want to display. It returns true, false and null for close just like the Window.ShowDialog method. The implementation just creates a new view of type TView from your container, hooks it up to the provided ViewModel, and shows it.

I have a standard dialog window, with a content control in it. When ShowDialog is called it creates a new standard dialog, adds the view to the content control, hooks up the ViewModel and displays it. The standard dialog already has [OK] and [Cancel] buttons with the appropriate logic to call the right methods from IDialogViewModel.

The way I do this is using the mediator pattern also. When the ViewModel wants to show a dialog, it sends a message which is picked up by the application's main window. The message contains an instance of the ViewModel used by the dialog.

I'm agreed, that using service to display dialog according to MVVM pattern is the most simple solution. But, I also asked myself, if there are 3 assemblies in my project Model, ViewModel, View and according to MVVM pattern assembly ViewModel has a reference to Model, and View to both Model and ViewModel where should I place DialogService class? If I will place one in the ViewModel assembly - I have no chances to create DialogView instance; on the other hand, if I will place DialogService in the View assembly, how I should inject it in my ViewModel class?

Use standard dialog window to implement the view. This would require to have a loosely coupled way of communication between View and ViewModel so that ViewModel can notify the View that it's ok to close without having a reference to a view.

There are multiple frameworks exist that would allow to do it - Prism's event aggregators would be one of them. In this scenario View would subscribe to an event (say, MyDialogResultValidated), and on receiving the event it would set the DialogResult accrodingly. ViewModel (in its SaveCommand) would fire the event if validation was successful.

In this scenario the Visibility of the View and of the overlay will be bound ViewModel's IsVisible property that would be set accordingly by SaveCommand implementation, or whenever ViewModel needs to show the View.

The first approach would require having a bit of code in code-behind, requires adding global event(s), and (arguably) is less MVVM-ish. The second approach would require implementing (or using someone else's implementation) of the overlay, but won't require having any code in code-behind, won't require having global event(s), and is (arguable) more MVVM-ish.

Searching all over for the keywords "simple jquery dialog example" - with all the answers out there, I have not seen any simple and meaningful example in a succinct standalone .html document . Even downloading several full books on jQuery, I didn't see any such an example.

The examples I did find are for a dialog that shows an alert message "Hello World" .. not very useful for interaction. I think the real world example would be something that captures input and sends it back to the page without requiring to post back to the server. The server post can be a subsequent step.

Based on the answer from @rob-schmuecker , I tried the following code below. I see it work on jsFiddle, but my implementation is not working. In my browser the console doesn't show any errors. But there are two problems I'm seeing:

I appreciate everyones' answers - and I saw them all work online in JsFiddle and jqueryui.com. For what I was going after, so far as I can tell, here's the most concise solution I was able to get going, using all remote includes and based on the solution at java2s.com:

The when released part in both answers is accurate. That is the behavior that it doesn't take effect until you let go. If you've ever noticed, you can press, hold, drag the mouse off the button then let go, it is like the click never happened.

The difference between latch and switch is that latch causes the button to automatically pop back to its original state once it is read in the program. Switch does not change back. All windows dialogs I've seen appear to pop back once you are done pressing them.

Typically, when you press a button on a dialog box, the button stays pressed until the appropriate action completes. For example, if you hit an Apply button, the dialog box completes all actions associated with the Apply button, then resets the button to the off state.

Depending on how you write your program, you can have the same behavior accomplished with a latch button as well. You just have to read the control until after you have finished your actions. In some cases, it may be quite simple, but in others, it may be more difficult if you go through several states before the action is complete. But, it is possible to get the same behavior out of both.

I think a lot of us have been programmed that locals are bad, so manually resetting the switch is bad. It doesn't help that NI also has the buttons on the control pallette setup to latch when released either. You would think that if switched when released is the correct answer, that NI would have their OK and Cancle buttons behave in that manner.

I would have to agreen with you and the behavior of most Window buttons. I got this question "right" on my CLAD exam, but only because I new the answer from the practice exam, not that I agree with it. Perhaps some of the NI App Engineers can chime in with a better explanation as to why this is so.

Another option is to just set the Form.Owner property to Rhino.UI.RhinoEtoApp.MainWindow or to Grasshopper.Instances.EtoDocumentEditor, which makes the form always on top of either of those windows only.

There are very helpful examples here on how to create a custom dialog but I could not find anything on creating custom floating forms (or just forms that behaves similar to dialogs but allowing interaction with other windows)

One of my Startup forms takes a bit to load, therefor I would like to display a Please wait dialog

until such time that the form opens up.

So the db on document open executes the dialog start and calls the form. The on open macro of the form will close the dialog.

Only problem is the dialog is modal.

Have found a couple of Calc related posts on the topic using visible instead of execute with some loop, but not

clear on how to adapt this to my requirements.

Grateful for any pointers, thks

This post (at the very end is Sample ------- GridSelection.ods) uses Calc and a dialog with two grid controls. There are listeners in the grid controls that when clicked (or double clicked) the item is pasted into the active Calc cell. More to try.

To create a sample point, Ctrl-click on one of the two measure rules of the image window and drag the mouse pointer. Two perpendicular guides appear. The sample point is where both guides intersect. You can see its coordinates in the lower left corner and the information bar of the image window. Release the mouse button.

The HTML element is used to create both modal and non-modal dialog boxes. Modal dialog boxes interrupt interaction with the rest of the page being inert, while non-modal dialog boxes allow interaction with the rest of the page.

JavaScript should be used to display the element. Use the .showModal() method to display a modal dialog and the .show() method to display a non-modal dialog. The dialog box can be closed using the .close() method or using the dialog method when submitting a that is nested within the element. Modal dialogs can also be closed by pressing the Esc key.

Indicates that the dialog box is active and is available for interaction. If the open attribute is not set, the dialog box will not be visible to the user. It is recommended to use the .show() or .showModal() method to render dialogs, rather than the open attribute. If a is opened using the open attribute, it is non-modal.

When implementing a dialog, it is important to consider the most appropriate place to set user focus. When using HTMLDialogElement.showModal() to open a , focus is set on the first nested focusable element. Explicitly indicating the initial focus placement by using the autofocus attribute will help ensure initial focus is set on the element deemed the best initial focus placement for any particular dialog. When in doubt, as it may not always be known where initial focus could be set within a dialog, particularly for instances where a dialog's content is dynamically rendered when invoked, the element itself may provide the best initial focus placement.

Ensure a mechanism is provided to allow users to close the dialog. The most robust way to ensure that all users can close the dialog is to include an explicit button to do so, such as a confirmation, cancellation, or close button.

3a8082e126