We Keep Coding

Shopware 5, open BatchProcess window from Own Plugin

I hope its not to harsh to ask not to mince matters.
Here we go:
I have a problem developing a custom Plugin for Shopware 5.
I already have a working plugin which lists orders for certain criteria.
Now I want a Button (which i already have) in the toolbar of this grid-window.
The Button should open the Batch Process Window which is already available in the native "Order" Window of shopware.
Q: How Can I open this app with the selected Ids of my grid?
Heres what I have:
[...]
createToolbarButton: function () {
var me = this;
return Ext.create('Ext.button.Button', {
text: 'Batch Processing Orders',
name: 'customBatchProcessButton',
cls: 'secondary',
handler: function () {
me.onClickCustomBatchProcessButton(me);
}
});
},
onClickCustomBatchProcessButton: function(me){
var thisGrid = me.getTransferGrid();
var records = thisGrid.getSelectionModel().getSelection();
console.log("Grid");
console.log(thisGrid);
console.log("records");
console.log(records);
Shopware.app.Application.addSubApplication({
name: 'Shopware.apps.Order',
action: 'batch',
params: {
mode: 'multi',
records: records
}
});
}
[...]
It always opens the normal view of the order window. (no error in console)
Anybody has a suggestions?
That would be great!
Thanks for your time :)
Greetings
EDIT:
Hey, thank you for your reply so far.
I managed to open the Batch-process-window like this:
me.getView('Shopware.apps.Order.view.batch.Window').create({
orderStatusStore: Ext.create('Shopware.apps.Base.store.OrderStatus').load(),
records: orderRecords,
mode: 'multi'
}).show({});
But now the Problem ist, the Event for the Batch-Process isn't applied on the button on the form...
I am still on try and error.

Many Shopware ExtJS SubApplications can be executed from another app with certain parameters exactly the way you're trying to. Unfortunately I don't see any code in the Order plugin that might lead to the desired result. You can see what actions/params a Shopware SubApplication supports by reading the init function of the main controller -> Shopware.apps.Order.controller.Main
Shopware.apps.Customer.controller.Main from the Customer plugin for example accepts an action like you are using it – it is checking for this:
if (me.subApplication.action && me.subApplication.action.toLowerCase() === 'detail') {
if (me.subApplication.params && me.subApplication.params.customerId) {
//open the customer detail page with the passed customer id
...
In the Order plugin there is similar code, but it just takes an order ID and opens the detail page for the corresponding order. It apparently doesn't feature the batch.Window
You might be able to reuse this class somehow, but that might be a ton of code you need to adapt from the actual Order plugin. If you really need this feature, you can carefully read how the Order plugin is initializing the window and its dependencies and have a try.
I'd rather go for developing a lightweight module in this scenario (It's a frame within a backend window that just uses controllers and template views with PHP/Smarty/HTML)

Events on Backbone JS

I am new to Backbone and am wondering something.
I've seen some tutorial where the user uses this code to explain an event.
var ImageModel = Backbone.Model.extend({ initialize: function(){
this.on('change',this.someChange,this); //when some property in this object has changed, run this.someChange() function },
defaults : { title : 'untitled',
description : 'no description available',
owner : 'anonymous',
date : 'no date supplied' },
someChange: function(model,options){ alert(‘something has changed’);
}
});
var photo = new ImageModel({title:’awesome image’}); //create new instance
photo.set(‘title’,’really awesome indeed’); //change the title attribute, this will trigger ‘change’ event
photo.set({title:’well i agree’},{agree: ‘yep’}); //alternative way to change model attribute with optional option passed, this will also trigger change event. </p>
And In some other examples I've seen people usings triggers to activate the event.
Eg
`var object = {};
_.extend(object, Backbone.Events); object.on("alert", function(msg) {
alert("Triggered " + msg); });
object.trigger("alert", "an event");
My questions is how do the first example use the event 'change' when it doesn't get trigged in anyway. It doesn't use 'change' anywhere in the code. I know that it uses the function someChange but how does it now to "activate" when the event isn't trigged or "used" in the code.
If you're not understanding the question I am sorry. Not sure how to explain the problem.

I think you need to spend a little time reading the Backbone documentation (shouldn't take you more than 1 hour). There is a list of predefined events you will be using a lot when writing Backbone applications: "change", "reset", and so on.
http://backbonejs.org/#Events-catalog
Regarding your particular example, Backbone.Events is the component used inside Backbone to provide any object/class with event emitting functionality. Backbone.Model of course includes Backbone.Events.
Your first snippet shows how to listen to a Backbone.Model change event to do something, while the second mixes the Backbone.Events into a JS object to be able to trigger from it.
That's the beauty of Backbone, the same methods (on, off, listenTo) are used in Models, Views, Collections, because they all inherit Backbone.Events. Once you grasp it, it's all rock and roll. :)

Changing YUI (or AlloyUI) method behaviour

I was trying to change _onFormReset method in YUI (or Alloy UI) - I think it is common JavaScript (OOP) thing, but I am a noob in JS OOP and YUI (been using some JQuery till now) - how can I change functionality of method (keeping other methods as they are)?
for example;
Currently method looks like:
_onFormReset: function(event) {
var instance = this;
instance.resetAllFields();
},
(src: http://alloyui.com/api/files/alloy-ui_src_aui-form-validator_js_aui-form-validator.js.html#l1192)
But I want it to be like:
_onFormReset: function(event) {
var instance = this;
instance.resetAllFields();
/* PSEUDO:
**a.) action is logged (ajax call to DB)
b.) all fields in form are reset (default behaviour) + form get's a new anti CSFR UID via ajax
c.) notification is shown (like that message in my example but let's say: Form reseted!)
d.) (Submit button reappears)**
...
*/
},
I tried something like:
/* trying to hijack thingZ */
var FormReset = Y.Component.create({
// component name
NAME : 'form-validator-reset',
EXTENDS : Y.Base,
// Base component's method which extends
prototype : {
_onFormReset: function(event) {
var instance = this;
instance.resetAllFields();
Y.one("#submitit").setHTML("<h4>Thanks, form submitted ok</h4>");
}
}
});
But with no success.
I looked at documentation and wasn't able to find a way, also it seems like I am missing OOP Javascript basics :(
Can somebody help me "catch the fish" :)
Trying to learn good (OOP) JavaScript for a long time, reading a lot online, but best way for me is learning by coding and now I am really stuck...
So my wish is to have something that I can use in all my forms for when reset button is clicked (in same way I would also change Submit) - OOP method - attached to default reset function, upgrading it in "my" way.

It looks like you're trying to tackle this the wrong way. Unless you're just doing this as an exercise in overriding a method you really shouldn't do that if all you're trying to do is print out a thank you.
Also if you're looking to thank the user for submitting you should be trying to do that when the user submits the form, not when the form is reset. To do this you'd subscribe a function to the 'submit' event of the form.
A.one("#my_form").on("submit", function() {
Y.one("#submitit").setHTML("<h4>Thanks, form submitted ok</h4>");
});

Ok, after rethinking it, I suppose preventDefault is ok for me (I will try to learn OOP JS with other cases :)).
This is (a n00by) solution:
add #resetit to reset button
add code:
var ressetterr = Y.one("#resetit");
Y.one(ressetterr).on("click", function(e){
console.log("resetit");
e.preventDefault();
});

Knockout: editing data with easy rollback to previous value

There are many blog posts and discussions about editing data in Knockout.
The main problem I have is that you need an easy way to revert your data to the previous value when the user cancel an editing operation (or when an Ajax call goes wrong).
I was not satisfied with the examples I found: I needed something VERY simply even when editing very complex models.

This is the solution I found, I'm sharing it in order to understand possible drawbacks from someone more expert than me, and of course to help.
When an "edit" button is clicked, I create a copy of the data being edited.
Edit button (ie: on each row of a table with a foreach binding)
<button data-bind="click: editItem">Edit</button>
From my ViewModel:
this.selectedItem = ko.observable();
this.selectedItemCache = ko.observable();
this.editItem = function (item) {
self.selectedItem (item);
self.selectedItemCache (ko.mapping.toJS(item)); // ko.mapping.toJS "detach" my item from the view model
}
When the user click on the "cancel" button or when the AJAX call used to update the server fails, I copy the data from the "cache" observable with:
this.cancelEditItem = function () {
for (var prop in self.selectedItem) {
if (typeof self.selectedItem[prop] === 'function') {
self.selectedItem[prop](self.selectedItemCache()[prop]);
}
}
}

I agree with Nicola's answer in that approach is the most popular approach.
I've used this http://www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.html which is a fairly polished way to do this. It has worked well in my apps.

Ryan Niemeyer's "Getting the Most Out of Knockout.js" screencast includes a nice way to do this (along with a load of other useful tips) - I recommend checking it out.
http://vimeo.com/51103092
He talks about reverting at about 16:30.

Implementing undo

I'm creating a map editing webapp where we can create and edit polylines, polygons etc. I've some trouble finding informations on undo implementation on the web, I find whining about "we need undo" and "here is my Command pattern using closures" but I think between that and a full undo/redo interface there is quite some road.
So, here are my questions (good candidate for wiki I think):
Should I manage the stack, or is there a way to send my commands to the browser's stack ? (and how do I handle native commands, like text edits in textifields in this case)
how do I handle "command compression" (command grouping) when some commands are browser native
How do I detect the undo (ctrl+z) keystroke?
If I register a keyup event, how do I decide if I prevent default or not?
If not, can I register some undoevent handler somewhere ?
Users are not used to undo on the web, how can I "train" them to explore/undo on my application ?

You need to have functions for object creation and deletion. Then pass those functions to the undo manager. See the demo file of my javascript undo manager: https://github.com/ArthurClemens/Javascript-Undo-Manager
The demo code shows canvas, but the code is agnostic.
It doesn't contain key bindings, but may help you with the first steps.
Myself I have used this in a web application with buttons for undo and redo, next to save.

Here is a sample of N-Level undo using Knockout JS:
(function() {
//current state would probably come from the server, hard coded here for example
var currentState = JSON.stringify({
firstName: 'Paul',
lastName: 'Tyng',
text: 'Text'
})
, undoStack = [] //this represents all the previous states of the data in JSON format
, performingUndo = false //flag indicating in the middle of an undo, to skip pushing to undoStack when resetting properties
, viewModel = ko.mapping.fromJSON(currentState); //enriching of state with observables
//this creates a dependent observable subscribed to all observables
//in the view (toJS is just a shorthand to traverse all the properties)
//the dependent observable is then subscribed to for pushing state history
ko.dependentObservable(function() {
ko.toJS(viewModel); //subscribe to all properties
}, viewModel).subscribe(function() {
if(!performingUndo) {
undoStack.push(currentState);
currentState = ko.mapping.toJSON(viewModel);
}
});
//pops state history from undoStack, if its the first entry, just retrieve it
window.undo = function() {
performingUndo = true;
if(undoStack.length > 1)
{
currentState = undoStack.pop();
ko.mapping.fromJSON(currentState, {}, viewModel);
}
else {
currentState = undoStack[0];
ko.mapping.fromJSON(undoStack[0], {}, viewModel);
}
performingUndo = false;
};
ko.applyBindings(viewModel);
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/1.2.1/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<div>
<button data-bind="click: function() { undo(); }">Undo</button>
<input data-bind="value: firstName" />
<input data-bind="value: lastName" />
<textarea data-bind="value: text"></textarea>
</div>
It uses an MVVM model so your page state is represented in a javascript object that it maintains a history for.

The way Cappuccino's automatic undo support works is by telling the undo manager what properties should be undoable. For example, pretend you are managing records of students, you might do something like:
[theUndoManager observeChangesForKeyPath:#"firstName" ofObject:theStudent];
[theUndoManager observeChangesForKeyPath:#"lastName" ofObject:theStudent];
Now regardless of how the students name is changed in the UI, hitting undo will automatically revert it back. Cappuccino also automatically handles coalescing changes in the same run loop, marking the document as "dirty" (needing save) when there are items on the undo stack, etc etc (in other words, the above should be ALL you need to do to support undo).
As another example, if you wanted to make additions and deletions of students undoable, you'd do the following:
[theUndoManager observeChangesForKeyPath:#"students" ofObject:theClass];
Since "students" is an array of students in theClass, then additions and deletions from this array will be tracked.