[ALOY-1256] Widget/Require as top-level element uses controller as view

GitHub Issue	n/a
Type	Bug
Priority	None
Status	Closed
Resolution	Fixed
Resolution Date	2020-08-12T13:10:59.000+0000
Affected Version/s	Alloy 1.5.1, Alloy 1.7.0
Fix Version/s	CLI Release 8.1.0
Components	XML
Labels	griffin-app, merge-to-next, require, view, widgets, xml
Reporter	Fokke Zandbergen
Assignee	Brenton House
Created	2015-03-04T12:50:59.000+0000
Updated	2021-06-16T14:13:54.000+0000

Description

When a controller-view has a widget or require as a root element, the compiled code will use the required controller as the view, as seen in the following example: *index.xml*

<Alloy>
  <Widget src="foo" />
</Alloy>

*widget.xml*

<Alloy>
  <Window>
    <Label>I'm the default widget</Label>
  </Window>
</Alloy>

*index.js (compiled)*

//..
    $.__views.index = Alloy.createWidget("foo", "widget", {
        id: "index"
    });
    $.__views.index && $.addTopLevelView($.__views.index);
//..

*console*

[ERROR] TypeError: undefined is not a function (evaluating '$.index.open()')
[ERROR] File: app.js
[ERROR] Line: 33
[ERROR] SourceId: <null>
[ERROR] Backtrace:
[ERROR]  undefined

*index.js (expected)*

//..
    $.__views.index = Alloy.createWidget("foo", "widget", {
        id: "index"
    });
    $.__views.index && $.addTopLevelView($.__views.index.getView());
    // OR: $.__views.index && $.addTopLevelView($.__views.index.getViewEx({recurse:true}));
//..

Found via this GitHub ticket, which includes a link to a full example: https://github.com/FokkeZB/nl.fokkezb.pullToRefresh/issues/39

Comments

Fokke Zandbergen 2015-03-04

It might seem like it doesn't make sense to have a widget/require as top-level element, but as https://github.com/miko91/test-widget/blob/master/app/views/news.xml shows with the recent support for children tags it can be very useful.

Nuno Costa 2015-05-08

There is a temporary fix for this situation? I have the same issue.

   <View class="container">
   <Widget id="ptr" src="nl.fokkezb.pullToRefresh" onRelease="myRefresher">
   <ListView id="listView" backgroundColor="white" defaultItemTemplate="template" module="CollectionView" method="createCollectionView">
   .....
   </Widget>
   </View>
   
   still fails with the view.`

P.S Just on Android

Nuno Costa 2015-05-10

You can ignore my report above, please see what happened. [https://github.com/FokkeZB/nl.fokkezb.pullToRefresh/issues/39]
Brenton House 2019-12-18

Transferring work from ALOY-1713 as it was a duplicate
Brenton House 2019-12-18

Created PR: https://github.com/appcelerator/alloy/pull/949
Ewan Harris 2020-02-10

Test project https://github.com/brentonhouse/alloy-widget-test
Ewan Harris 2020-07-20

Test steps: Check out the test project at https://github.com/brentonhouse/alloy-widget-test
Samir Mohammed 2020-08-12

Closing ticket, fix verified in CLI version 8.1.0-master.10, tested using the test case above.
Muhammad Qasim 2021-05-18

What if someone need to refer the widget controller itself to call certain controller methods? Previously with this code <Widget id="drawer" src="my.widget" /> $.drawer would refer to the Widget controller object but now it only refer to the top level view from the widget. No way to access controller object from xml except creating the widget in js code.

JSON Source