How to find View with ID

206 Views Asked by At

Trying to build some simple app with framework and have a question:

  • Is it possible to find View inside hierarchical layout ? and how ? (in Dart)

    There's some documentation on Rikulo site about IdSpace but I didn't quite understand how to use it. Should I extend View with IdSpace ? Or View will auto-generate the Id ?

Update (add code example)

/*
* Function will actualy build View
*/
void _buildUi(Element tagElement)
{
   View mainView = new View();
   mainView.profile.width = '100%';
   mainView.profile.height = '100%';
   mainView.layout.type = 'linear';
   mainView.layout.orient = 'vertical';
   mainView.style.cssText = "background: yellow;";

   View vWorkSpace = new View();
   vWorkSpace.profile.width = 'flex';
   vWorkSpace.profile.height = 'flex';
   vWorkSpace.layout.type = 'linear';
   vWorkSpace.layout.orient = 'horizontal';
   vWorkSpace.style.cssText = "background: red;";

   //
   // Left menu
   View vLeftBar = new View();
   vLeftBar.profile.width = "10%";
   vLeftBar.profile.height = "10%";
   vLeftBar.layout.type = 'linear';
   vLeftBar.layout.orient = 'vertical';
   vLeftBar.layout.spacing = '10';

   View vLogo = new View();
   vLogo.addChild(new Image('images/google_chrome.png'));
   vLeftBar.addChild(vLogo);

   Button vButton = new Button();
   vButton.text = 'Sign in with Google';
   vLeftBar.addChild(vButton);
   vButton.on.click.add((e){      // Somehow I get an error here: Method 'add' not defined for class 'Stream'
      broadcaster.send(new ViewEvent('foo'));
   });

   vWorkSpace.addChild(vLeftBar);

   mainView.addChild(vWorkSpace);
   mainView.addToDocument(ref: tagElement, layout: true);
}

In another place in dart.app when handling the vButton click event. How I could find (in code) the vLogo View ?

2

There are 2 best solutions below

0
On BEST ANSWER

The easiest way to retrieve a View in the code is to give it an id:

View vLogo = new View();
vLogo.id = "vLogo";

Then, in your event listener, use query to access it:

button.query("#vLogo"); // returns vLogo

However, in your case, you will be able to directly access the vLogo instance within the event listener closure.

1
On

Sure, like Element, View provides CSS selector based retrieval called query and queryAll. You can use them to retrieve the view as you retrieve the DOM elements.

In general, you don't have to worry about IDSpace, unless you want to use the same ID in different views. A hierarchy tree itself is an ID space. If a view implements IDSpace, it forms another ID space.