Re: Fighting with Ajax Modal Dialogs et.al.
Re: Fighting with Ajax Modal Dialogs et.al.
- Subject: Re: Fighting with Ajax Modal Dialogs et.al.
- From: Markus Ruggiero <email@hidden>
- Date: Wed, 13 Dec 2017 09:31:12 +0100
Yes, I have. The problem with the examples is that they show some ways to use
the components without telling what the problem is they solve and what the
underlying concepts are. This makes it very difficult to translate the examples
into my own problem domain.
---markus---
> On 12 Dec 2017, at 18:34, Theodore Petrosky <email@hidden> wrote:
>
> Before doing that, have you looked at AjaxExample and AjaxExample2 in the
> examples folder of Wonder. I thought the different versions of modal dialogs
> were shown there.
>
>
> Ted
>
>
>
>> On Dec 12, 2017, at 12:22 PM, Markus Ruggiero <email@hidden
>> <mailto:email@hidden>> wrote:
>>
>> Samuel,
>>
>> can you imagine? I am even more confused right now because I think I
>> understand what you're telling me --- but then I am not able to make sense
>> of it and adapt it to my problem.
>>
>> Can you/someone else create a minimalistic complete demo that shows exactly
>> how to do the following:
>>
>> in html:
>>
>> <... wo form ... >
>> .....
>> <webobject name = "shippingAddressTextfield" /> [button or link here to open
>> a modal dialog]
>> ....
>> <... end wo form ... >
>>
>>
>> in wod:
>> shippingAddressTextfield : WOTextField { value = currentObject.address; }
>>
>>
>> The modal dialog shows a tablular list of ShippingAddresses, each
>> ShippingAddress has additional fields to help the user pick the right one.
>> There is a button or link besides each row to pick that particular one.
>> The contents of the dialog should preferably be generated by a separate
>> component, but I can also do it right inside the main component if that was
>> simpler to do.
>>
>> When the user picks one of the address rows the dialog should close and the
>> address string should be put into the text field (possibly just putting it
>> there as if the user had typed it himself)
>> There should be a way to dismiss the dialog without picking anything.
>> When the user selects a ShippingAddress the textfiels should not be editable
>> anymore
>> Particularly great would be to not only show the selected address but do a
>> currentObject.addObjectToBothSidesOfRelationshipWithKey(selectedShippingAddress,
>> CustomerRequest.SHIPPING_ADDRESS_KEY); This would require the dialog
>> component to have the currentObject passed to it somehow. How to do this?
>>
>> I know how to do some of these things with plain javascript but then I have
>> no idea how to integrate with WO. So I started to look into Ajax.framework
>> and studied the AjaxExamples. This didn't help but confuses me even more as
>> the examples just show how some components are being used but there is no
>> explanation of the underlying concepts and how to solve a problem with these
>> things.
>>
>> Thanks a lot
>> ---markus---
>>
>>
>>> On 12 Dec 2017, at 13:32, Samuel Pelletier <email@hidden
>>> <mailto:email@hidden>> wrote:
>>>
>>> Markus,
>>>
>>> I have a very similar implementation is an app where a new user is added by
>>> selecting a contact.
>>>
>>> In my UsagerList component where I have the new user function I have this
>>> in my html file:
>>>
>>> <wo:AjaxModalDialog label = "$localizer.UsagerList.button.ajouterUsager"
>>> width = "800" title = "$localizer.UsagerList.button.ajouterUsager" class =
>>> "tiny button" style = "margin-bottom:0;">
>>> <wo:ContactSelector selectedContact = "$selectedContact" selectAction =
>>> "$addUsager"/>
>>> </wo:AjaxModalDialog>
>>> ....
>>> <wo:AjaxModalDialogOpener class="tiny button" title = "Édition d'un usager"
>>> action = "$editItem" dialogId = "usagerEditor"
>>> >Éditer</wo:AjaxModalDialogOpener>
>>>
>>> The add button open the modal that display my ContactSelector component
>>> with 2 bindings. The selectedContact will contain the selected contact (an
>>> object of my Contact entity) and the selectAction will be performed upon
>>> selection.
>>>
>>> In my UsagerList java class, I have a public WOActionResults
>>> addUsager() method that create or edit a user for this contact in a modal
>>> dialog. In your case, just put the value in the desired attribute of your
>>> edited object and close the displayed modal dialog by calling
>>> AjaxModalDialog.close(context()); For your situation, I would add the to
>>> the closeUpdateContainerID = "editor" AjaxModalDialog bindings to refresh
>>> the form and show the selection to the user.
>>>
>>>
>>> public WOActionResults addUsager() {
>>> EOEditingContext ec = ERXEC.newEditingContext();
>>> Usager usager = Usager.fetchUsager(ec,
>>> Usager.CONTACT.eq(selectedContact().localInstanceIn(ec)));
>>> if (usager != null) {
>>> setEditedItem(usager);
>>> AjaxModalDialog.open(context(), "usagerEditor",
>>> localizer().localizedStringForKeyWithDefault("UsagerList.text.editerUsager"));
>>> }
>>> else {
>>> Usager newUsager = Usager.createUsager(ec);
>>>
>>> newUsager.setContact(newUsager.localInstanceOf(selectedContact()));
>>> newUsager.setUserName(selectedContact().email());
>>> setEditedItem(newUsager);
>>> AjaxModalDialog.open(context(), "usagerEditor");
>>> }
>>> return null;
>>> }
>>>
>>> The ContactSelector component needs to be non synchronizing, either by
>>> extending ERXNonSynchronizingComponent or by overriding the
>>> synchronizesVariablesWithBindings method.
>>>
>>> Here is the selectContact method in ContactSelector:
>>> public WOActionResults selectContact() {
>>> EOEditingContext ec = (EOEditingContext)
>>> valueForBinding(EditingContextBindingName);
>>> if (ec == null) {
>>> setValueForBinding(item(), SelectedContactBindingName);
>>> }
>>> else {
>>> setValueForBinding(item().localInstanceIn(ec),
>>> SelectedContactBindingName);
>>> }
>>> return (WOActionResults) valueForBinding(SelectActionBindingName);
>>> }
>>>
>>> Samuel
>>>
>>>
>>>
>>>> Le 12 déc. 2017 à 05:59, Markus Ruggiero <email@hidden
>>>> <mailto:email@hidden>> a écrit :
>>>>
>>>> Hi Samuel,
>>>>
>>>> thanks for your help, but there are some things still not clear.
>>>>
>>>> I have that WOTextField I want to populate. Next to the text field I need
>>>> a clickable element (link, button, whatever) that the user user can use to
>>>> call up an overlay modal dialog. This dialog gets a list of addresss from
>>>> the database. The user can then click one of the addresses (a link or a
>>>> button) to pick the one he needs. This selection action should close the
>>>> dialog and put the selected address string into the text field.
>>>>
>>>> I already have a component that retrieves the possible addresses and lists
>>>> them in tabular form. It also shows a [pick this] link.
>>>>
>>>> That's as far as I got. Currently the dialog opener displays the "Select
>>>> Address" link (should eventually replace the Address Index button. What do
>>>> I do in that yellow component when the user clicks one of the select
>>>> buttons? And how can I pass values to the ShippingAddressSelection
>>>> component? It ought to know the object being edited on the main form, but
>>>> it is called up by the componentName binding on the dialog, no way to bind
>>>> anything.
>>>>
>>>> I must miss something very simple. The Ajax Examples are not of help here
>>>> (or I just don't get it), as they show some things but actually do not
>>>> give an answer to a "how do I do this..." type of question.
>>>>
>>>> Thanks for bearing with me.
>>>> ---markus---
>>>>
>>>> addressSelectionDialogOpener : AjaxModalDialogOpener {
>>>> dialogId = "selectAddressDialog";
>>>> linkTitle = "Select Address";
>>>> label = "Select Address";
>>>> }
>>>>
>>>> selectAddressDialog : AjaxModalDialog {
>>>> pageName = "ShippingAddressSelection";
>>>> id = "selectAddressDialog";
>>>> title = "Select Shipping Address";
>>>> centerVertically = true;
>>>> locked = true;
>>>> width = 630;
>>>> height = 320;
>>>> overlayOpacity = "0.5";
>>>> overlayDuration = "0.1";
>>>> slideDownDuration = "0.1";
>>>> slideUpDuration = "0.1";
>>>> closeUpdateContainerID = "shippingAddressUpdateContainer";
>>>> }
>>>>
>>>>
>>>> <addresspanel.jpeg>
>>>>> On 11 Dec 2017, at 21:59, Samuel Pelletier <email@hidden
>>>>> <mailto:email@hidden>> wrote:
>>>>>
>>>>> Hi Markus,
>>>>>
>>>>> If I understand your requirement correctly, you want a modal that allows
>>>>> selecting some value(s) for a form field and want the selection be
>>>>> visible in the displayed form after the modal close.
>>>>>
>>>>> The trick is to define an AjaxUpdateContainer around the zone to be
>>>>> updated after the modal close. If you use AjaxObserveFields on your form,
>>>>> you can have a large section refreshed safely.
>>>>>
>>>>> You also need to define the AjaxModalDialog with it's id and add the
>>>>> closeUpdateContainerID binding to specify the AjaxUpdateContainer to
>>>>> update when the dialog close.
>>>>>
>>>>> <wo:AjaxModalDialog closeUpdateContainerID = "formContainerId" id =
>>>>> "selectValueDialogId" ...
>>>>>
>>>>> And lastly, put the link to open the dialog on your form...
>>>>> <wo:AjaxModalDialogOpener dialogId = "selectValueDialogId" class = "tiny
>>>>> button" label = "$localizer.button.selectionner"/>
>>>>>
>>>>>
>>>>> Samuel
>>>>>
>>>>>
>>>>>
>>>>>> Le 11 déc. 2017 à 11:41, Markus Ruggiero <email@hidden
>>>>>> <mailto:email@hidden>> a écrit :
>>>>>>
>>>>>> it always the same ... not using these things often results in utter
>>>>>> confusion when finally I need to do this.
>>>>>>
>>>>>> I have a standard page with a large form.
>>>>>> On that page there is a text field that the user can ...
>>>>>> - enter an value directly
>>>>>> - depending on previously made selections further up in the form the
>>>>>> value is already set and cannot be changed
>>>>>> - depending on previously made selections further up in the form there
>>>>>> is a button/link next to the text field that should open a modal dialog
>>>>>> with a list of strings to pick from (the field is not editable direcly).
>>>>>> My problem is that 3rd option.
>>>>>>
>>>>>> I already have a small component that loads the available strings from
>>>>>> the database and shows them in a table. The user can then click a [pick
>>>>>> this] - hyperlink next to an entry (or close the selection box without
>>>>>> picking anything. The picked
>>>>>> value should be put into the text field.
>>>>>>
>>>>>> I succeeded partially with the help of the Ajax Examples. Tried
>>>>>> AjaxModalDialog as well as AjaxModalUpdate. I can show a dialog with
>>>>>> both elements and the correct data, but from there? ..... I am lost.
>>>>>>
>>>>>> Which one to use, AjaxModalDialog or AjaxModalUpdate?
>>>>>> How do I get the selected String back / put it into the underlying
>>>>>> object-to-be-edited, update the display and close the dialog.
>>>>>>
>>>>>> Can anyone provide me with a simple example?
>>>>>>
>>>>>> Thanks a lot
>>>>>> ---markus---
>>>>>>
>>>>>>
>>>>>> _______________________________________________
>>>>>> Do not post admin requests to the list. They will be ignored.
>>>>>> Webobjects-dev mailing list (email@hidden
>>>>>> <mailto:email@hidden>)
>>>>>> Help/Unsubscribe/Update your Subscription:
>>>>>>
>>>>>>
>>>>>> This email sent to email@hidden <mailto:email@hidden>
>>>
>>
>> _______________________________________________
>> Do not post admin requests to the list. They will be ignored.
>> Webobjects-dev mailing list (email@hidden
>> <mailto:email@hidden>)
>> Help/Unsubscribe/Update your Subscription:
>>
>> This email sent to email@hidden <mailto:email@hidden>
_______________________________________________
Do not post admin requests to the list. They will be ignored.
Webobjects-dev mailing list (email@hidden)
Help/Unsubscribe/Update your Subscription:
This email sent to email@hidden