Results 1 to 6 of 6

Thread: Using multiple ViewControllers for single advanced view?

  1. #1

    Default Answered: Using multiple ViewControllers for single advanced view?

    Hi,

    When I started with my app, there were only Application Controllers and so I got really used to this way of working.
    For some large components (like advanced viewer/editor) I have 30 app controllers (one main and multiple "sub controllers").
    It's not the case where each of these controllers is responsible for a sub view.
    They are responsible for specific events (e.g. mouse move, right click) or actions triggered from the menu.

    So how do we split the handlers and logic when using only View Controllers?
    Today the logic for this viewer component is split into 30 separate files / controllers (that is not even enough, some of them exceed 1000 lines)

    Another simple example would be with an advanced grid view with 30 functions on the menu.
    I do not want to have handling of 30 actions in one View Controller. How could that be split into e.g. 10 View Controllers grouping specific functionality?

    Looking forward to see how others deal with that!

    Thanks,
    Mike

  2. There are many different ways to get around this. Here are some "spitball" ideas:

    Singletons
    ViewControllers could also just be the entry point of some singleton utility class that can do generic things and the VC just prepares some arguments for the generic methods. Every since working on Ext JS itself, I've learned to think abstractly so I create APIs that can handle things that may be slightly different but at a high (or medium) level is the same thing so I pass an argument or some keys on an object I pass to a method to enable/disable certain parts of the method's execution. Certain things in Sencha Fiddle have utility classes such as when you run the code, it just fires a method on a singleton and it takes care of everything else. I like this because now multiple things can trigger running (like shift+enter in any editor tab) as it abstracted the code away from any one thing.

    VC + Global
    Also, there is nothing wrong with sticking with global controllers. The benefit of a VC over a global controller is that you don't need to mess with the ComponentQuery selector, you normally add a listener or handler to a component, give it a string that matches a method name on the VC. I've even had a VC fire an event on itself so that a global controller can listen to it via the event domain. This way, the VC hooks into the component event and the controller just listens to custom events. But this makes a global controller more a utility singleton just instead of executing a method on the singleton, you fire an event and any number (including zero) other things can react to it. This is nifty as if you pass an object when firing an event, other things listening to that event can tweak that object but that can get messy as order of those listeners added can be difficult (order in controllers array on the app helps tho).

    If anything, this one could be used just for transitioning to the final goal that you decide on.

    Mixins
    You can also use mixins so one mixin is responsible for one thing like your sub-global controllers are. Your VCs then add the responsibilities to itself that it wants so that you can share code. Your VCs will still need listeners/etc added to components and it's methods would then call the methods that were added from the mixins.

    And of course you could use a mix of all the above plus others as you work through it. You'll just have to decide if your current architecture works fine or if you want to refactor your architecture.

  3. #2
    Sencha User yeghikyan's Avatar
    Join Date
    Mar 2009
    Location
    München
    Posts
    574
    Answers
    99

    Default

    It is hard to say without seeing the code. What you are speaking about is called Fat Stupid Ugly Controllers.
    It happens when view components are not separated by small class, for example the toolbar with menus, buttons, combos are initilised inline in the grid.
    It happens also when the logic which can be and must be implemented in stores and models is implemented in the controller of the grid.
    Can you show a sample code of the view and huge controller? In the fiddle or CODE tags....
    "The competent programmer is fully aware of the strictly limited size of his own skull; therefore he approaches the programming task in full humility, and among other things he avoids clever tricks like the plague." – Edsger W. Dijkstra

  4. #3

    Default

    Quote Originally Posted by yeghikyan View Post
    It is hard to say without seeing the code. What you are speaking about is called Fat Stupid Ugly Controllers.
    It happens when view components are not separated by small class, for example the toolbar with menus, buttons, combos are initialized inline in the grid.
    It happens also when the logic which can be and must be implemented in stores and models is implemented in the controller of the grid.
    Can you show a sample code of the view and huge controller? In the fiddle or CODE tags....
    Yes, in some scenarios that might be the case. Its not the size of the Controller that matters here.
    Lets take an example of one Controller that we call a "HighlightController". It's 36 lines long and takes care only for processing highlight of vector elements. Is that a "Fat Stupid Ugly Controller"?
    No I don't think so. What it controls? A Viewer component that is one Ext Panel with Toolbar, but one "viewer area". (Toolbar, context menus, and toolbar sections are separate views)

    This viewer area is controlled by 20 controllers like this one (yes, some of them getting to big, but that is not the point here).
    They can be split into "Nice little controllers" where all of them listen to Viewer events and are references in controllers:[] section of the main viewer controller.

    Now if they were to be converted to View Controllers, how would they be linked to Viewer panel when it can only have ONE view controller?

    Another example: If I have a context menu and a toolbar menu that both allow to create a link between two selected entities, I could create a view controller - one for context menu, and one for Toolbar. But I still do not want to duplicate the code that actually creates the link on the server side, so I would like to have a separate controller for that - and that could actually be an App Controller because I will not be able to link multiple View Controllers to viewer.

    So... I'm just looking at different options of structuring the application, by using best of both controller types. And its not always that obvious when you app does a bit more than opening a window on button click. That's a no brainier and can be nicely done with View Controllers alone. And in some cases I feel I would be better of I could have View controller split into several files.

  5. #4
    Sencha User yeghikyan's Avatar
    Join Date
    Mar 2009
    Location
    München
    Posts
    574
    Answers
    99

    Default

    Another example: If I have a context menu and a toolbar menu that both allow to create a link between two selected entities, I could create a view controller - one for context menu, and one for Toolbar. But I still do not want to duplicate the code that actually creates the link on the server side, so I would like to have a separate controller for that - and that could actually be an App Controller because I will not be able to link multiple View Controllers to viewer.
    You will not duplicate the code if you will not put the ajax request for creating the link between two selected entities.
    "Fat Stupid Ugly Controller" means you put the business logic in the controller, but it must be in the model as much as possible.
    For example you have a grid, the rows of grid can be deleted in three different ways:
    1. user selects the rows and clicks the "remove" button in the toolbar of the grid
    2. user clicks on the action column element to remove single row (fast remove)
    3. user removes the selected rows with context menu

    Here I see two solutions, first of them is to implement three ajax requests from controllers of the toolbar, grid (action column) and controller of the context menu, it is a wrong way because you will have to duplicate the code.
    Another solution is to write removeRow method in the store of the grid for batch remove and in the records of the store of the grid for single remove operation.
    I have written a short post about it here http://www.coding-ideas.de/2018/03/0...lers-in-extjs/
    "The competent programmer is fully aware of the strictly limited size of his own skull; therefore he approaches the programming task in full humility, and among other things he avoids clever tricks like the plague." – Edsger W. Dijkstra

  6. #5
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,450
    Answers
    3997

    Default

    There are many different ways to get around this. Here are some "spitball" ideas:

    Singletons
    ViewControllers could also just be the entry point of some singleton utility class that can do generic things and the VC just prepares some arguments for the generic methods. Every since working on Ext JS itself, I've learned to think abstractly so I create APIs that can handle things that may be slightly different but at a high (or medium) level is the same thing so I pass an argument or some keys on an object I pass to a method to enable/disable certain parts of the method's execution. Certain things in Sencha Fiddle have utility classes such as when you run the code, it just fires a method on a singleton and it takes care of everything else. I like this because now multiple things can trigger running (like shift+enter in any editor tab) as it abstracted the code away from any one thing.

    VC + Global
    Also, there is nothing wrong with sticking with global controllers. The benefit of a VC over a global controller is that you don't need to mess with the ComponentQuery selector, you normally add a listener or handler to a component, give it a string that matches a method name on the VC. I've even had a VC fire an event on itself so that a global controller can listen to it via the event domain. This way, the VC hooks into the component event and the controller just listens to custom events. But this makes a global controller more a utility singleton just instead of executing a method on the singleton, you fire an event and any number (including zero) other things can react to it. This is nifty as if you pass an object when firing an event, other things listening to that event can tweak that object but that can get messy as order of those listeners added can be difficult (order in controllers array on the app helps tho).

    If anything, this one could be used just for transitioning to the final goal that you decide on.

    Mixins
    You can also use mixins so one mixin is responsible for one thing like your sub-global controllers are. Your VCs then add the responsibilities to itself that it wants so that you can share code. Your VCs will still need listeners/etc added to components and it's methods would then call the methods that were added from the mixins.

    And of course you could use a mix of all the above plus others as you work through it. You'll just have to decide if your current architecture works fine or if you want to refactor your architecture.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  7. #6
    Sencha User yeghikyan's Avatar
    Join Date
    Mar 2009
    Location
    München
    Posts
    574
    Answers
    99

    Default

    Yes, there are different ways to shoot yourself in the foot
    Anyway most of such problems arrives when ppl try to put the business logic in the controllers.
    "The competent programmer is fully aware of the strictly limited size of his own skull; therefore he approaches the programming task in full humility, and among other things he avoids clever tricks like the plague." – Edsger W. Dijkstra

Similar Threads

  1. Replies: 5
    Last Post: 13 Jan 2016, 10:42 AM
  2. Replies: 3
    Last Post: 15 Mar 2015, 8:50 PM
  3. filling a multiple fieldset xtype with a store ? (inside a single view)
    By DreadyCoder in forum Sencha Touch 2.x: Discussion
    Replies: 1
    Last Post: 23 Feb 2012, 11:12 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •