I am looking for pattern in Backbone js to switch between readonly and edit view. If the trigger for the view is external to the view then no problem I can create the appropriate view ( readonly or edit ) and render it, but in my case the trigger for the edit view will be inside the readonly view.
For example lets say I am displaying a Prescription and by default it is in readonly mode and on hovering a edit icon gets displayed. Onclick of this edit icon the readonly view should now be replaced with edit view. What would be a best approach to achieve this. Below are few options I am considering
Have a single PrescriptionView with the edit icon and all the form fields required for the edit mode in it. It will also have the logic to change the view from readonly mode to edit mode based on edit trigger.
Have two views PrescriptionReadView and PrescriptionEditView. The ReadView will have the edit icon and onclick replace the readview with editview.
I am inclined towards #2 but not sure how to implement it in a elegant way. Any thoughts on this will be helpful.
Thanks
Zafer
Your life will be considerably less painful, if you separate your pretty view from your edit view, since they are, for all intents and purposes, two distinct views of the same data, with different event-handling needs and different behavior. So, your instincts that lead you towards #2 are right on the money.
The cleanest implementation I can think of is to make a container view (say, PrescriptionView) that can handle the mode-swapping events. The container will own a reference to the currently active prescription view, and will handle the creation of that view, and the cleanup (remove and unbind) of the inactive view. That keeps all of that logic nice and self-contained.
Related
I have created an instance of ButtonGroup and associated that to two RadioButtons. The RadioButtons are added to a Container and the Container added to a Form screen. When the "Back" button is pressed, I want to clear the ButtonGroup selection and reset certain variable instances.
I want to place the code in the ActionListener I have made for the "Back" function. My question is how to retrieve the reference of the ButtonGroup in order to clearSelection()?
Generally we recommend recreating the Form instead of caching it if you intend to "reset it" so I'd avoid this.
If you still want to go in this direction check out getButtonGroup() in RadioButton. You can also set a new group with the setter method.
You can use setUnselectAllowed(true) then invoke setSelected(false) on both buttons. Then restore default selection behavior using setUnselectAllowed(false).
While looking at animateLayout() method of ComponentSelector for another issue that I had, I realized that I may use this Class to obtain Component object references jQuery style elegantly. Very powerful and useful concept for codename one.
should adding or removing components trigger a repaint?
I have a Snippet model that I'm using ModelAdmin to create, edit, and list in Wagtail. I'd like to create a copy function, and I can see that wagtail supports this out of the box for Page objects:
Before I write custom code to do this, I thought I'd ask if there is any way to easily do this within Wagtail. I didn't find any hooks that would even easily allow adding more buttons, and while I did find modeladmin-list-display-add-buttons, it seems to only allow me to change the placement of the default edit and delete buttons.
It is possible to achieve this. However, it will require custom code, and various overrides and additions in different places. Here are some steps that should help you on your way, with some links to some example code in the wagtailmenus extension, which does this exact thing:
Adding the custom view:
Create a custom CopyView view (subclassing wagtail.contrib.modeladmin.views.EditView will probably be your best starting point). For inspiration, you might want to take a look at one I created for wagtailmenus: https://github.com/rkhleics/wagtailmenus/blob/master/wagtailmenus/views.py#L141
Integrate the view with your ModelAdmin class, by adding a copy_view() method that instantiates your custom view. For example:
https://github.com/rkhleics/wagtailmenus/blob/master/wagtailmenus/modeladmin.py#L78
Override your ModelAdmin class's get_admin_urls_for_registration() method, to make the view accessible via a URL. For example: https://github.com/rkhleics/wagtailmenus/blob/master/wagtailmenus/modeladmin.py#L82
Getting the button to show in the listing:
Create a custom ButtonHelper class by subclassing wagtail.contrib.modeladmin.helpers.ButtonHelper.
Add a copy_button() method to it, that can provide all of the necessary details to create the button. For example: https://github.com/rkhleics/wagtailmenus/blob/master/wagtailmenus/modeladmin.py#L38/
Override the get_buttons_for_obj() method to output the copy button in the listing along with the others, depending on the user's permissions (e.g. https://github.com/rkhleics/wagtailmenus/blob/master/wagtailmenus/modeladmin.py#L49)
Finally, get your ModelAdmin class to use your custom ButtonHelper instead of the default one, by changing the button_helper_class attribute to reference your custom class.
If you'd like to understand more about all of the various classes within wagtail.contrib.modeladmin, I'd suggest reading the modeladmin customisation primer page from the official Wagtail documentation.
In my site I have a case where I show a simple order which I can add/remove items to and pay to close the order.In other case , I just want to show the order without the option to modify it.
What is the best way to do this regarding to reuse the view ?
Should I create a directive which I can configure to not show update actions
or should I create 2 templates (one for each scenario) which bound to the
same controller but each template use only the methods it needs from the controller?
Thx!
You may conditionally close GUI items when your order view is in readonly mode, for example:
<button ng-if="!readonly">Add new item</button>
Of course your controller should have
$scope.readonly=true;
when you are going to display the view without ability to modify it.
How can I implement an editable view? For example, I have a PersonView. The default view will be showing the person info. Then when I double click, I want to enter "edit mode" where I can edit fields. I suppose you can imagine what I mean? Its common "pattern". How can I implement it? The "simple" way might be on dblClick I replace existing HTML with something else. But it doesnt seem right ... How can this be done?
you can achieve this in many ways:
swapping views,
inline editing,
swapping templates
here is a nice tutorial explaining what you need:
http://net.tutsplus.com/tutorials/javascript-ajax/build-a-contacts-manager-using-backbone-js-part-4/
You can add to your text fields some class, for example .disabled. Also you have to disable this fields by adding disabled attribute. Then add css rules to the .disabled class to make it like plain text (remove paddings, margins, borders etc.). Then on dblClick event just remove class and attribute.
Couldn't you just create another view for edit? since you're going to need different events separate inside of the edit view. Here is something I put together in jsfiddle
You can essentially create a new view passing the model that gets updated to the new view and show it in a region
newValue = ev.target.value;
this.model.set('contentPlacement', newValue)
mainView = new MainView({ model: this.model });
App.mainRegion.show(mainView)
http://jsfiddle.net/cLPfw/
I have a module which has a multiple tabs. Tab1-Employee details, Tab2 - Employee Assignments, Tab3 - Employee Vacation.
The module should allow the user to enter details in multiple tabs and click on SaveAll button. The problem is the employeeid is generated by saving the data on first tab. This is required for saving other tabs. How can i achieve this scenerio? Should i use Composite command/Region context or something else?
Appreciate your response.
Thanks.
I'm not sure whats the problem here.
To save all the information you need to save the information from the first tab and then the others, thats no problem. If you're using MVVM (wich you should) then the ViewModel should have access to the data, and be able to save the data.
Then it is just a matter of how the view is designed, doesn't matter if it is a TabControl or not. Just put a Command (just the usual DelegateCommand) inside the ViewModel and save first the information of the first tab. After that save the other information using the employeeid just generated.
With this scenario you could also add some validation to the ViewModel (see INotifyDataErrorInfo) and desactivate or activate the command whenever you want.