Accessing components(widgets) in a central block

[atamer]

I understand that , accession widgets from outside is not used and event pub-sub model is advised however I need to access all started widgets in a central block ,

Here is my scenario , I have a component for button as below and when this button is clicked I need to check all active components with name componentid and then call anyprop method or property of that component,

    <td class="line-data">
      <pre class="line-pre"><div class="line" id="file-gistfile1-html-LC1"><span class="nt">&lt;div</span> <span class="na">data-aura-widget=</span><span class="s">"../js/widgets/input"</span>  <span class="na">onsubmit=</span><span class="s">"{name:'componentid.anyprop'}"</span> <span class="nt">&gt;&lt;/div&gt;</span></div></pre>
    </td>
  </tr>
</tbody></table>

[atamer]

Here is my solution ,
Created an extension with name QueryExt and implement find method in here , later I can access this method from components sandbox ,
In QueryExt , I am able to access all sandboxes from Top Sandbox (app.core.appSandbox._children)
and then able to access components themself (app.core.appSandbox._children[0]._component)

define({
  initialize: function (app) {
      app.sandbox.findById = function(id){
          var childrens = app.core.appSandbox._children;           
         for(var child in childrens){
             var value = childrens[child].getValue(id);
                if(value !== null){
                  return value;
              }
            }
            return null;          
        };
   },
   
    afterAppStart: function(app) {
       
   }
    
});

and in my component added function

 initialize: function() {
        var thisView = this;
        this.sandbox.getValue = function(id){
          thisView.$el.find('#'+id);
        };
}

[atamer]

I am aware that this is not complete implementation but need to know if I am on the right way ..?

[sbellity]

Hey @atamer I don't understand why it cannot be implemented via events ?

[atamer]

Hi @sbellity , firstly what I want to implement is a declarative component set ,( accordion , data table , autocomplete etc..) and make users write no or minimal JavaScript while using components , I want to make components interactions via their custom attributes ,

In this sample I can also use events however asyn calls can turn my implementation more complex , for example when I need an input value , firstly I need do fire an event to all components and then listen if any event with value returns..
I thought direct access to component tree is more elegant , what is your opinion , thank you ..

[sbellity]

Got it !
Here is how we address that with hull.js (with data-attributes too)
http://hull.io/docs/hull_js#user-interaction

Don't know if it covers exactly what you need... but it should be a start.
Would you be able to share more code examples ?

I'd love to talk more about it, as it's a great use case for aura... and it would be great to have a 'standard' way to do it provided as an 'offical' extension

[atamer]

user-interaction part is very cool , but I think it is not covering what I need,
I will share code ASAP, I can specified my component usage as below

<div data-aura-widget="../js/widgets/input" onreturnupdate="{component1, componen2, component3}" submiturl="/restfulmethod"  onsubmit="{name:'componentid.anyprop'}" >

here i want to also set onreturnupdate submiturl and onsubmit
attributes and this means when this input is submitted , sent request to /restfulmethod with params {name:'componentid.anyprop'} and update the {component1, componen2, component3} with the return values, returned json response is binded to these 3 components .

here is component1

<div id="component1" data-aura-widget="../js/widgets/form" >
  <div data-aura-widget="../js/widget/input" id="input1" prop="prop1"/>
</div>

when response returns as JSON object I set the prop1 value of JSON object to input1 component via its prop1 attribute,

[atamer]

@sbellity After all ,I am working in a big company(~500 developers) and we need a cross-platform(desktop, tablet ) rapid development framework , Most of the component usages are standart so once these component sets are created, Users dont have to write extra javascript or dive into components inner html.
After reading hull api , I do have some doubts about my approach to components ?
What do you think about ..
Thank you