Search code examples
dartrikulo

How to find View with ID


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 ?


Solution

  • 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.