Master Detail Example and Top Level Alloy Container?

[aaronksaunders]

Not really clear what is going on there? Still trying to find and example of multiple controllers... or some way to map what you are implementing here to how one would expect MVC to work.

if i have an index/application controller and then multiple views with associated controllers, how does the index controller access the methods in the other controllers? How does one controller communicate with the other? Is it this magical "Alloy" top level container that I have to include all of my views in? Is there some "require" that I need to do somewhere?

This is what I believe is a pretty basic concept that I am either just over complicating or I cannot find documentation on how to implement it. As I said before, I understand this is very early on, but I am trying to provide some feedback here.

[mtnlife999]

There are a couple ways to hookup the view to the controller. The master detail shows one way. Another way is to have multiple views (xml) files and controllers and require in the the component when needed. The component is the view and it's controller wrapped in a commonJS module. This allows more dynamic control over the loading and manipulation of components. We are currently working on a fairly complex sample that shows this, but I can post a basic sample that shows this.

[aaronksaunders]

what is the timeframe for posting the complex one? If it will be soon, I can wait otherwise it would be helpful for me to see a simple one... if possible. thx

[mtnlife999]

The more complex sample is almost done, but I'll try to get a simple sample up today as I believe it could help clarify the view controller hookup and will be easy to create.

[mtnlife999]

Added a basic multiple views and controls sample. See test/apps/multiple_views.

[aaronksaunders]

can's seem to find the commit for test/apps/multiple_views.

[tonylukasavage]

Let's see if I can cover what's going on in bite-sized chunks:

Define component object: The generated commonjs module that is the combination of a view, controller, and style. All IDed UI components from its view markup are exposed in its controller as $.ID. So if you had a button IDed as myButton, you could access it in the corresponding controller with $.myButton.

is simple a container element when you have more than one top-level container (i.e., window, tabgroup, etc...). If you don't put it explicitly in your markup, it is added behind the scenes. Right now, it is literally there just to maintain valid XML, making sure you have a single root element in your doc. It is not actually part of the code generation.

Methods are exposed on component objects simply by adding them to the $ variable in its controller. For example, let's assume I'm in the main index.js code and I want to change a property on a different component object, we'll call it different.

index.js

var different = require('alloy/components/different').create();
different.changeProperty('new value');

different.js

var myValue
$.changeProperty = function(value) {
    myValue = value;
}

As you can see above, the $ variable is where you attach things that you want publicly available on an instance of your component object.

A markup-driven way to achieve the same goal could make use of the aforementioned tag. Again, is nothing but a container to keep the XML valid. Instead of manually doing the require() in code, we could declare the different component object within the markup of index.xml.

index.xml

<Alloy>
    <!-- all of the elements that make up my index component object -->
    <View require="different" id="different"/>
</Alloy>

index.js

$.different.changeProperty('new value');

different.js (same as above)

var myValue
$.changeProperty = function(value) {
    myValue = value;
}

Hopefully this connects some of the various, poorly documented dots we've laid out. :)

[mtnlife999]

The multiple_views sample should be posted now.

[aaronksaunders]

i got it, the missing link was using requires to access the methods in the other controllers, thanks