[ALOY-548] Widget views containing valid child elements are not accepted like with require

GitHub Issue	n/a
Type	Bug
Priority	Medium
Status	Closed
Resolution	Fixed
Resolution Date	2013-03-20T19:44:48.000+0000
Affected Version/s	n/a
Fix Version/s	Alloy 1.1.0, 2013 Sprint 06
Components	Runtime, XML
Labels	alloy, compiler, require, widgets
Reporter	Fokke Zandbergen
Assignee	Tony Lukasavage
Created	2013-02-23T23:29:06.000+0000
Updated	2013-05-14T17:58:14.000+0000

Description

Having a view like:

<Alloy>
  <TableView>
    <Widget src="my.alloy.widget" />
  </TableView>
</Alloy>

and the widget's view being like:

<Alloy>
  <HeaderPullView>
    <View>
      <ImageView id="arrow" />
      <ActivityIndicator />
      <Label id="status">Pull down to refresh</Label>
    </View>
  </HeaderPullView>
</Alloy>

You get the following compile error:

[ERROR] :  [ERROR] Error with <Widget> at line 3
[ERROR] :  [ERROR] Child element must be on of the following: [Ti.UI.TableView.HeaderView,Ti.UI.TableView.HeaderPullView,Ti.UI.TableView.FooterView,Ti.UI.TableView.Search,Ti.UI.TableViewRow,Ti.UI.TableViewSection,Ti.UI.SearchBar]
[ERROR] :  Alloy compiler failed

Trying the same thing using a regular require fails even harder:

[ERROR] :  /usr/local/lib/node_modules/alloy/Alloy/commands/compile/compilerUtils.js:80
[ERROR] :  	var name = node.nodeName,
[ERROR] :  	               ^
[ERROR] :  TypeError: Cannot read property 'nodeName' of undefined
[ERROR] :      at Object.exports.getNodeFullname (/usr/local/lib/node_modules/alloy/Alloy/commands/compile/compilerUtils.js:80:17)
[ERROR] :      at Object.exports.validateNodeName (/usr/local/lib/node_modules/alloy/Alloy/commands/compile/compilerUtils.js:1083:25)
[ERROR] :      at parse (/usr/local/lib/node_modules/alloy/Alloy/commands/compile/parsers/Alloy.Abstract._ProxyProperty.js:23:11)
[ERROR] :      at Object.exports.parse (/usr/local/lib/node_modules/alloy/Alloy/commands/compile/parsers/base.js:11:17)
[ERROR] :      at Object.exports.parse (/usr/local/lib/node_modules/alloy/Alloy/commands/compile/parsers/Alloy.Abstract._ProxyProperty.js:13:27)
[ERROR] :      at Object.exports.parse (/usr/local/lib/node_modules/alloy/Alloy/commands/compile/parsers/Ti.UI.TableView._ProxyProperty.js:11:52)
[ERROR] :      at Object.exports.parse (/usr/local/lib/node_modules/alloy/Alloy/commands/compile/parsers/Ti.UI.TableView.HeaderPullView.js:2:53)
[ERROR] :      at Object.exports.generateNode (/usr/local/lib/node_modules/alloy/Alloy/commands/compile/compilerUtils.js:231:48)
[ERROR] :      at /usr/local/lib/node_modules/alloy/Alloy/commands/compile/index.js:406:28
[ERROR] :      at Array.forEach (native)
[ERROR] :      at Function.T.each.T.forEach (/usr/local/lib/node_modules/alloy/Alloy/lib/alloy/underscore.js:5:625)
[ERROR] :      at parseAlloyComponent (/usr/local/lib/node_modules/alloy/Alloy/commands/compile/index.js:398:5)
[ERROR] :      at /usr/local/lib/node_modules/alloy/Alloy/commands/compile/index.js:197:5
[ERROR] :      at Array.forEach (native)
[ERROR] :      at Function.T.each.T.forEach (/usr/local/lib/node_modules/alloy/Alloy/lib/alloy/underscore.js:5:625)
[ERROR] :      at /usr/local/lib/node_modules/alloy/Alloy/commands/compile/index.js:189:5
[ERROR] :      at Array.forEach (native)
[ERROR] :      at Function.T.each.T.forEach (/usr/local/lib/node_modules/alloy/Alloy/lib/alloy/underscore.js:5:625)
[ERROR] :      at module.exports (/usr/local/lib/node_modules/alloy/Alloy/commands/compile/index.js:187:4)
[ERROR] :      at Object.<anonymous> (/usr/local/lib/node_modules/alloy/Alloy/alloy.js:87:46)
[ERROR] :      at Module._compile (module.js:449:26)
[ERROR] :      at Object.Module._extensions..js (module.js:467:10)
[ERROR] :      at Module.load (module.js:356:32)
[ERROR] :      at Function.Module._load (module.js:312:12)
[ERROR] :      at Module.require (module.js:362:17)
[ERROR] :      at require (module.js:378:17)
[ERROR] :      at Object.<anonymous> (/usr/local/lib/node_modules/alloy/bin/alloy:3:1)
[ERROR] :      at Module._compile (module.js:449:26)
[ERROR] :      at Object.Module._extensions..js (module.js:467:10)
[ERROR] :      at Module.load (module.js:356:32)
[ERROR] :      at Function.Module._load (module.js:312:12)
[ERROR] :      at Module.runMain (module.js:492:10)
[ERROR] :      at process.startup.processNextTick.process._tickCallback (node.js:244:9)
[ERROR] :  Alloy compiler failed

Replace the headerPullView by TableViewRow and the regular require works again, but the widget still produces the same error. I guess both have to do with validateNodeName() and inspectRequireNode() in Alloy's compilerUtil.js. I tried to do some debugging myself but couldn't fix it. I hope you guys can, since I have some interesting use cases for it :)

Comments

Tony Lukasavage 2013-03-19

It may need to remain the same for the time being with respect to the proxy property markup elements, like headerView, footerView, etc... since they need a reference to the parent element and there's not a clean way to do that right now through and . The latter issue, though, with the TableViewRow should now be resolved as a result of ALOY-461. I will investigate both aspects of this issue more closely tomorrow.
Tony Lukasavage 2013-03-19

The TableViewRow sample you cite will work with both and now, but I still need to figure out how to pass the parent to proxy properties in requires/widgets for things like headerPullView, footerView, etc...
Fokke Zandbergen 2013-03-20

It's not as easy as this? $.myTable.setHeaderPullView($.myHPVwidget.getView()); This would of course restrict widgets to provide proxy views as their main view only.
Tony Lukasavage 2013-03-20

That's only one part of the implementation that needs to change. The issue is that when the headerPullView is placed in its own , it has no idea who its parent is, what you're referencing as $.myTable. That $.myTable reference could be a local variable in a controller, having no meaning inside the that contains the headerPullView. The parent reference now needs to be passed into all 's and needs to be present in the generated controllers. When a has no XML parent (other than Alloy) to reference as a parent, it will use the passed in parent reference instead.
Tony Lukasavage 2013-03-20

Also, if I'm going to take the time to dig in and solve this one, I'm gonna solve it for all abstract and proxy properties, not just the ones listed in this ticket. In theory, the changes I make for this should allow you to do the same with for Windows, for example.
Fokke Zandbergen 2013-03-20

So, maybe change this issue to 'Add support to Alloy widgets for providing proxy elements to their parent' or start a new one? I don't really get your comment at 20/mrt/13 1:12PM. I don't see how adding a widget's top level view as a child view is that much different from adding it a a property view. The only difference is that the main XML element in the widget does not translate to a Ti.UI statement. So the generated UI JavaScript would look like there was no proxy element wrapping it. But of course the compiler would know and as a result of that map the top level view to a property instead of adding it as a child view?
Tony Lukasavage 2013-03-20

This will likely be more fully explained by the final commits and you can see where I need to account for a lot more scenarios than the one presented in the initial ticket. Weren't you the one who said you coudln't fix yourself in the first place. :P
Tony Lukasavage 2013-03-20

Adding abstract and proxy properties to elements via and is now possible. It has been tested using the original examples listed in the description and I added a test app that executes a few more cases at: https://github.com/appcelerator/alloy/tree/master/test/apps/advanced/proxy_property_requires It shows widgets and requires used for table rows, sections, headerView, footerView, and headerPullView. One tab also shows how you can move navbuttons for windows out to requires as well.
Federico Casali 2013-05-14

Verified as working as expected with: Alloy 1.1.2 GA and 1.1.3-alpha TiSDK 3.1.0 GA and 3.1.1.v20130513131554 Note: I think the test sample https://github.com/appcelerator/alloy/tree/master/test/apps/advanced/proxy_property_requires has to be updated, adding 'controllers' folder, otherwise getting the 'Error: ENOENT, no such file or directory '/Users/fcasali/Documents/Appcelerator_Studio_Workspace/alloy4Samples/app/widgets/com.foo.widget/controllers' when compiling. Closing.

JSON Source