XWCProgressAndDialogs < WebXEO

WebXEO Web>XeoPrimerXeoXwc>XWCProgressAndDialogs (2013-03-27, JoaoAires) (raw view)

-- Main.JoaoCarreira - 22 Dec 2009
---++++ Message Box

The MessageBox component allows the creation of dialog boxes to ask the user how to proceed on a given situation, presenting the choices as buttons.

This component allows the creation of the following types of message boxes:<br /> <strong>Error:</strong><br /> <img width="230" alt="messageBoxError.PNG" src="%ATTACHURLPATH%/messageBoxError.PNG" height="110" /> <br /><strong>Question:</strong><br /> <img width="277" alt="messageBoxQuestion.PNG" src="%ATTACHURLPATH%/messageBoxQuestion.PNG" height="110" /><br /><strong>Info:</strong><br /> <img width="230" alt="messageBoxInfo.PNG" src="%ATTACHURLPATH%/messageBoxInfo.PNG" height="110" /> <br /><strong> Warning:</strong><br /> <img width="332" alt="messageBoxWarning.PNG" src="%ATTACHURLPATH%/messageBoxWarning.PNG" height="108" />

You can declare several combinations of buttons (OK, YES/NO, YES/NO/CANCEL) or use custom buttons.

---+++++ Message Box Component
---++++++ Declaration
<verbatim><xvw:messageBox></xvw:messageBox></verbatim>
---++++++ Properties
| *Property* | *Type* | *Description* |
| id | string | Component Id |
| messageBoxType | <p>Enumeration</p> <p>MessageBox.MessageBoxType</p> | <p> </p> <p>Type of icon to be shown in the Dialog Box. The options are:</p> <p>WARNING - Warning box</p> <p>QUESTION - Interogation Box</p> <p>INFO - Info Box</p> <p>ERROR - Error Box</p> |
| title | string / EL | The title of the message box |
| defaultConfirmButton | string | <p>Confirm button Id.</p> <p>Sellected by default, if the user presses ENTER the button action is executed</p> |
| defaultCancelButton | string | <p>Cancel button Id.</p> <p>Sellected by default, if the user presses ESC, the button action is executed</p> |
| message | string / EL | The content of the message box |
| buttons | <p> </p> <p>Enumeration</p> <p>MessageBox.MessageBoxButtons</p> | <p> </p> <p>Predefined button Template. Valid values are:</p> <p>YES - Box with only one button with label YES</p> <p>OK - Box with only one button with label OK</p> <p>OKCANCEL - Box with two buttons, one with label OK and another one with label CANCEL</p> <p>YESNO - Box with two buttons, one with label YES and another one with label NO</p> <p>YESNOCANCEL - Box with 3 buttons, one with label YES, another with NO and one with CANCEL</p> |
| actions | JSON Array with EL Methods | <p>JSON Array with same number of possitions as buttons defined in "buttons". Example,</p> <p>if in buttons is defined OKCANCEL a array with two possitions should be build,</p> <p>one for the action OK and one for CANCEL.</p> <p>eg: ['#{viewBean.myOkAction}','#{viewBean.myCancelAction}'].</p> |
| minWidth | int | The minimum width of the dialog box<br />Default value: 100 |
| maxWidth | int | The maximum width of the dialog box<br /> Default value: 600 |
| top | int | |
| left | int | |

---++++++ Childs

This component can have _xvw:menu_ components as child elements (representing custom buttons).

---+++++ Examples
---++++++ MessageBox Declaration in a viewer using predefined buttons.
<verbatim><xvw:viewer (...)>
 <xeo:form id='formUser'>
  (...)
        <xvw:messageBox 
   id='myMessageBox' 
   messageBoxType='QUESTION'
   title='Message Box Title' 
   message='My Message Box text'
   buttons='OKCANCEL' 
   actions="['#{viewBean.ok}','#{viewBean.cancel}']"
  />
  (...) </verbatim>

Show the DialogBox from an action of a viewer Bean:
<verbatim> // Action which is necessary to be confirmed b the user
 public void arquiveQuestion() {
  Dialogs.showDialog( getViewRoot(), "formUser:myMessageBox" );
 }
 public void ok() {
  // The user pressed ok
  // Do Work
 }
 public void cancel() {
  // The user pressed cancel
  // Do Work
 }</verbatim>

If there is no action associated to a button, it closes the dialog box, without executing any action.
---++++++ Declaring a MessageBox in a viewer using customized buttons.

The behavior is the same, but the attributes =buttons= and =actions= do not have to be defined in the MessageBox component,instead you use child _xvw:menu_ components

<pre><verbatim><xvw:messageBox 
  id='myMessageBox' 
  messageBoxType='WARNING'
  title='Message Box Title' 
  defaultConfirmButton='btn2'
  defaultCancelButton='btn3'
  message='My Message Box text' 
>
 <xvw:menu text='Button 1' id='btn1' serverAction='#{viewBean.btn1Action}' />
 <xvw:menu text='Button 2' id='btn2' serverAction='#{viewBean.btn2Action}' />
 <xvw:menu text='Button 3' id='btn3' serverAction='#{viewBean.btn3Action}' />
</xvw:messageBox></verbatim>
</pre>

Attachments

Topic attachments
I	Attachment	Action	Size	Date	Who
PNG	messageBoxError.PNG	manage	3.9 K	2011-02-09 - 15:02	NicolauGrosskopf
PNG	messageBoxInfo.PNG	manage	3.8 K	2011-02-09 - 15:03	NicolauGrosskopf
PNG	messageBoxQuestion.PNG	manage	4.4 K	2011-02-09 - 15:03	NicolauGrosskopf
PNG	messageBoxWarning.PNG	manage	4.2 K	2011-02-09 - 15:03	NicolauGrosskopf

Topic revision: r10 - 2013-03-27 - JoaoAires

No permission to view TWiki.WebTopBar

No permission to view TWiki.WebBottomBar