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 17:37:08 +0100
Samuel,
thanks a lot for your offer re. TeamViewer.
I was finally able to make things work with all the replies and the help of a
collegue as sparring partner for discussion. AjaxFramework is really great just
lacking in conceptual documentation. I intend to write up something eventually,
maybe update the examples with conceptual info.
Again thanks to all who responded. Be assured there will be more questions to
come 😇.
And it shows that as small as our community has become, it still is a great
community!
---markus---
> On 13 Dec 2017, at 15:05, Samuel Pelletier <email@hidden> wrote:
>
> Hi Markus,
>
> If you are willing, we may try a short TeamViewer or screen sharing session
> on your projet.
>
> You can iMessage me at [removed Samuel's iMessage address]
>
> I am in Eastern Canada timezone so 6 hour behind you based on your email
> header.
>
> Regards,
>
> Samuel
>
>> Le 13 déc. 2017 à 03:43, Markus Ruggiero <email@hidden
>> <mailto:email@hidden>> a écrit :
>>
>> Ok, textfield vs. string, no issue here. If I know how to "get back the
>> selected values" I can certainly do something with it. Of course I would
>> prefer to update things right on the server. So when the user picks an
>> address an action on the server should fire. This action needs to know the
>> context (e.g. the currentObject) and at the end remove the dialog and
>> refresh the display. That's my problem right now. I can show the dialog, but
>> I cannot trigger the pickAction and clean up afterwards. Knowing the
>> currentObject is possible when the dialog stuff is part of the main page.
>> How could I pass this information to a separate component that renders the
>> contents of the dialog?
>>
>> AjaxUpdateContainer and AjaxObserveField are know to me and I use them often
>> for "cascading" hierarchical popups.
>>
>> I am lacking the grand picture and the concepts of the Ajax Framework.
>>
>> Thanks for enlightening me.
>>
>> ---markus---
>>
>>> On 12 Dec 2017, at 21:27, Samuel Pelletier <email@hidden
>>> <mailto:email@hidden>> wrote:
>>>
>>> Markus,
>>>
>>> I think you just stick too much on the textfield part... Suppose you just
>>> want to display the selected address in a string instead (and then replace
>>> the string by a textfield).
>>>
>>> The tricky part is to refresh the form with the selected address
>>> information added to it. You could do some javascript or update the server
>>> state and refresh the form. I prefer to update the server and refresh. Are
>>> you familiar with AjaxUpdateContainer and AjaxObserveField ? In my recent
>>> apps, I tend to autosave almost everything on each field update so users
>>> never loose change because a save button was forgot.
>>>
>>> Samuel
>>>
>>>
>>>> Le 12 déc. 2017 à 12:22, Markus Ruggiero <email@hidden
>>>> <mailto:email@hidden>> a écrit :
>>>>
>>>> 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)
Help/Unsubscribe/Update your Subscription:
This email sent to email@hidden