Fixed Widget's onLoad not able to access inputs.

Author: vusters

integration_test/local/defaultApp/Widget Bindings.yaml renamed to integration_test/local/defaultApp/Custom Widget.yaml

@@ -22,6 +22,9 @@ View:
 
 Custom:
   inputs: [txt]
+  onLoad:
+    showToast:
+      message: Hello ${txt}
   body:
     Column:
       children:
@@ -35,6 +38,13 @@ Custom:
 
 Custom2:
   inputs: [text]
+  onLoad: |-
+    setByJS.text = "Hi " + text;
+
   body:
-    Text:
-      text: "Custom Custom Widget: ${text}"
+    Column:
+      children:
+        - Text:
+            text: "Custom Custom Widget: ${text}"
+        - Text:
+            id: setByJS

integration_test/local/defaultApp_test.dart

@@ -24,15 +24,22 @@ void main() {
     /// test that binding to a TextInput works properly in the same scope
     /// and also in a custom widget's scope
     testWidgets("Bindings to widget's value", (tester) async {
-      await TestHelper.loadScreen(tester, 'Widget Bindings', config);
-      // await tester.pumpAndSettle();
+      await TestHelper.loadScreen(tester, 'Custom Widget', config);
 
       // TextInput has initial value of 'first'
       // so first make sure our EnsembleText is correctly bind to that
       Finder text = find.descendant(
           of: find.byType(EnsembleText), matching: find.text('first'));
       expect(text, findsOneWidget);
 
+      // Custom Widget's onLoad can access inputs
+      // search for toast message
+      await tester.pumpAndSettle();
+      expect(find.text('Hello first'), findsOneWidget);
+
+      // ensure Nested widget's onLoad can access inputs via JS too
+      expect(find.text('Hi first'), findsOneWidget);
+
       // Custom Widget's text should also bind to the same value
       Finder customText = find.descendant(
           of: find.byType(EnsembleText),
@@ -68,6 +75,9 @@ void main() {
           of: find.byType(EnsembleText),
           matching: find.text('Custom Custom Widget: second'));
       expect(customCustomText, findsOneWidget);
+
+      // ensure onLoad never run again and still retain original value
+      expect(find.text('Hi first'), findsOneWidget);
     });
 
     /// test bindings to API is working properly

lib/framework/widget/view_util.dart

@@ -6,6 +6,7 @@ import 'package:ensemble/framework/error_handling.dart';
 import 'package:ensemble/framework/event.dart';
 import 'package:ensemble/framework/scope.dart';
 import 'package:ensemble/framework/theme_manager.dart';
+import 'package:ensemble/framework/view/data_scope_widget.dart';
 import 'package:ensemble/widget/custom_widget/custom_widget.dart';
 import 'package:ensemble/framework/widget/widget.dart';
 import 'package:ensemble/page_model.dart';
@@ -274,7 +275,12 @@ class ViewUtil {
       scopeNode.scope.dataContext
           .addInvokableContext(id, customWidget.controller);
     }
-    return customWidget;
+
+    // wrap it inside a DataScopeWidget
+    return DataScopeWidget(
+        debugLabel: "CustomWidget",
+        scopeManager: customScope,
+        child: customWidget);
   }
 
   static Widget buildBareWidget(ScopeNode scopeNode, WidgetModel model,

lib/layout/box/flex_box_layout.dart

@@ -3,6 +3,7 @@ import 'package:ensemble/framework/ensemble_widget.dart';
 import 'package:ensemble/framework/error_handling.dart';
 import 'package:ensemble/framework/model.dart';
 import 'package:ensemble/framework/studio/studio_debugger.dart';
+import 'package:ensemble/framework/view/data_scope_widget.dart';
 import 'package:ensemble/framework/widget/has_children.dart';
 import 'package:ensemble/framework/widget/widget.dart';
 import 'package:ensemble/layout/box/base_box_layout.dart';
@@ -133,6 +134,10 @@ class FlexBoxLayoutState extends WidgetState<FlexBoxLayout>
   /// check if a widget have flex or flexMode set. This essentially means the
   /// widget already handles this themselves already
   bool hasFlex(Widget widget) {
+    if (widget is DataScopeWidget) {
+      widget = widget.child;
+    }
+
     // legacy widgets
     if (widget is HasController && widget.controller is WidgetController) {
       return (widget.controller as WidgetController).flex != null ||

lib/widget/custom_widget/custom_widget.dart

@@ -15,6 +15,7 @@ class CustomWidget extends EnsembleWidget<CustomWidgetController> {
       {super.key, required this.model, required this.scopeManager}) {
     log("Custom Widget $hashCode created");
   }
+
   final CustomWidgetModel model;
   final ScopeManager scopeManager;
 
@@ -83,14 +84,6 @@ class _CustomWidgetState extends EnsembleWidgetState<CustomWidget> {
   }
 
   @override
-  Widget buildWidget(BuildContext context) {
-    // Note that we wrap the custom widget inside DataScopeWidget here instead
-    // of outside because custom widget can now have flex, and the parent FlexBox
-    // need a way to look up the flex value. CustomWidget has to the the root
-    // for this to work (and DataScopeWidget will be inside)
-    return DataScopeWidget(
-        debugLabel: 'customWidget',
-        scopeManager: widget.scopeManager,
-        child: widget.scopeManager.buildWidget(widget.model.getModel()));
-  }
+  Widget buildWidget(BuildContext context) =>
+      widget.scopeManager.buildWidget(widget.model.getModel());
 }