Skip to content
This repository

Closes #80 - bindable width and height for Containers #215

Closed
wants to merge 1 commit into from

2 participants

Simone Vratogna jakub-g
Simone Vratogna

Updated the Beans in order to take in account that "ResizableWidgetCfg" now declares bindings.
Updated dialog in order to react to resize correctly when bound.
Fixed div in order to have a proper call to container resizing method.

Simone Vratogna

TestApplication in: L:\Common-Temporary\AriaTemplates\testApp.7z

Simone Vratogna Closes #80 - bindable width and height for Containers
Updated the Beans in order to take in account that "ResizableWidgetCfg" now declares bindings.
Updated dialog in order to react to resize correctly when bound.
Fixed div in order to have a proper call to container resizing method.
3152607
Simone Vratogna

Awaiting a code review.
And maybe some automatic testing.

jakub-g
Collaborator

Original issue: #80

jakub-g
Collaborator

This code in Container.js is problematic:

    this._sizeConstraints = (cfg.width == -1 && (!!cfg.minWidth || !!cfg.maxWidth))
            || (cfg.height == -1 && (!!cfg.minHeight || !!cfg.maxHeight));

It means that min/max width/height constraints are applied <==> width / height are equal to -1, which won't ever happen when we bind width / height to the data model. So this logic needs to be changed.

jakub-g
Collaborator

The issue is under development, but this pull request won't go into master as it needs to be worked on. I'll open a new pull request when I'm done.

jakub-g
Collaborator

The functionality landed in 1.3.5 through #347

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 1 unique commit by 1 author.

Nov 07, 2012
Simone Vratogna Closes #80 - bindable width and height for Containers
Updated the Beans in order to take in account that "ResizableWidgetCfg" now declares bindings.
Updated dialog in order to react to resize correctly when bound.
Fixed div in order to have a proper call to container resizing method.
3152607
This page is out of date. Refresh to see the latest.
25 src/aria/widgets/CfgBeans.js
@@ -104,6 +104,17 @@ Aria.beanDefinitions({
104 104 $type : "WidgetCfg",
105 105 $description : "Base config for any widget that can be resized in width and height (by default widgets only support width)",
106 106 $properties : {
  107 + "bind" : {
  108 + $type : "WidgetCfg.bind",
  109 + $properties : {
  110 + "width" : {
  111 + $type : "common:BindingRef"
  112 + },
  113 + "height" : {
  114 + $type : "common:BindingRef"
  115 + }
  116 + }
  117 + },
107 118 "height" : {
108 119 $type : "json:Integer",
109 120 $description : "Widget height in pixel - note: some widgets may ignore this property. If negative, the height will be considered as unset and the widget will use the most appropriate height when possible",
@@ -1124,7 +1135,7 @@ Aria.beanDefinitions({
1124 1135 $description : "Configuration for the ErrorList widget",
1125 1136 $properties : {
1126 1137 "bind" : {
1127   - $type : "WidgetCfg.bind",
  1138 + $type : "ResizableWidgetCfg.bind",
1128 1139 $properties : {
1129 1140 "messages" : {
1130 1141 $type : "common:BindingRef"
@@ -1173,7 +1184,7 @@ Aria.beanDefinitions({
1173 1184 $description : "Configuration for the Calendar widget",
1174 1185 $properties : {
1175 1186 "bind" : {
1176   - $type : "WidgetCfg.bind",
  1187 + $type : "ResizableWidgetCfg.bind",
1177 1188 $properties : {
1178 1189 "value" : {
1179 1190 $type : "common:BindingRef"
@@ -1378,7 +1389,7 @@ Aria.beanDefinitions({
1378 1389 $description : "Function to be called when the user moves the mouse over an item in the list."
1379 1390 },
1380 1391 "bind" : {
1381   - $type : "WidgetCfg.bind",
  1392 + $type : "ResizableWidgetCfg.bind",
1382 1393 $properties : {
1383 1394 "selectedValues" : {
1384 1395 $type : "common:BindingRef"
@@ -1424,7 +1435,7 @@ Aria.beanDefinitions({
1424 1435 $description : "The base configuration for the Dialog widget",
1425 1436 $properties : {
1426 1437 "bind" : {
1427   - $type : "WidgetCfg.bind",
  1438 + $type : "DivCfg.bind",
1428 1439 $properties : {
1429 1440 "visible" : {
1430 1441 $type : "common:BindingRef"
@@ -1552,7 +1563,7 @@ Aria.beanDefinitions({
1552 1563 $description : "The base configuration for the Tab widget",
1553 1564 $properties : {
1554 1565 "bind" : {
1555   - $type : "WidgetCfg.bind",
  1566 + $type : "ResizableWidgetCfg.bind",
1556 1567 $properties : {
1557 1568 "selectedTab" : {
1558 1569 $type : "common:BindingRef"
@@ -1580,7 +1591,7 @@ Aria.beanDefinitions({
1580 1591 $description : "The base configuration for the Tab widget",
1581 1592 $properties : {
1582 1593 "bind" : {
1583   - $type : "WidgetCfg.bind",
  1594 + $type : "ResizableWidgetCfg.bind",
1584 1595 $properties : {
1585 1596 "selectedTab" : {
1586 1597 $type : "common:BindingRef"
@@ -1706,7 +1717,7 @@ Aria.beanDefinitions({
1706 1717 $default : true
1707 1718 },
1708 1719 "bind" : {
1709   - $type : "WidgetCfg.bind",
  1720 + $type : "ResizableWidgetCfg.bind",
1710 1721 $properties : {
1711 1722 "size1" : {
1712 1723 $type : "common:BindingRef"
49 src/aria/widgets/container/Container.js
@@ -32,6 +32,9 @@ Aria.classDefinition({
32 32
33 33 this._cssClassNames = aria.core.TplClassLoader.addPrintOptions(this._cssClassNames, cfg.printOptions);
34 34
  35 + //Init this if your class needs a border.
  36 + this._frame = null;
  37 +
35 38 /**
36 39 * Specifies if size constraints are specified in the config (and so if it is useful to call
37 40 * aria.utils.Size.setContrains for this container).
@@ -78,8 +81,10 @@ Aria.classDefinition({
78 81 // PROFILING // this.$logTimestamp("updateContainerSize");
79 82 var cfg = this._cfg, domElt = this.getDom(), widthConf, heightConf, changed;
80 83
81   - if (domElt && this._sizeConstraints) {
  84 + if (!domElt)
  85 + return;
82 86
  87 + if (this._sizeConstraints) {//If we are bound to min and max size
83 88 if (cfg.width == -1) {
84 89 widthConf = {
85 90 min : cfg.minWidth,
@@ -94,14 +99,6 @@ Aria.classDefinition({
94 99 };
95 100 }
96 101
97   - if (this._changedContainerSize) {
98   - domElt.style.width = cfg.width > -1 ? cfg.width + "px" : "";
99   - domElt.style.height = cfg.height > -1 ? cfg.height + "px" : "";
100   - if (this._frame) {
101   - this._frame.resize(cfg.width, cfg.height);
102   - }
103   - }
104   -
105 102 changed = aria.utils.Size.setContrains(domElt, widthConf, heightConf);
106 103 if (changed && this._frame) {
107 104 this._frame.resize(changed.width, changed.height);
@@ -112,7 +109,14 @@ Aria.classDefinition({
112 109 }
113 110 this._changedContainerSize = changed;
114 111
  112 + } else if (this._changedContainerSize) { //If we are not bound,resize freely
  113 + domElt.style.width = cfg.width > -1 ? cfg.width + "px" : "";
  114 + domElt.style.height = cfg.height > -1 ? cfg.height + "px" : "";
  115 + if (this._frame) {
  116 + this._frame.resize(cfg.width, cfg.height);
  117 + }
115 118 }
  119 +
116 120 },
117 121
118 122 /**
@@ -129,7 +133,32 @@ Aria.classDefinition({
129 133 * @param {aria.templates.MarkupWriter} out the writer Object to use to output markup
130 134 * @protected
131 135 */
132   - _widgetMarkupEnd : function (out) {}
  136 + _widgetMarkupEnd : function (out) {},
  137 +
  138 + /**
  139 + * Updates the size of the dom object accordingly to the new values of this._cfg.
  140 + */
  141 + _updateSize : function () {
  142 + this._changedContainerSize = true;
  143 + this._updateContainerSize();
  144 + },
133 145
  146 + /**
  147 + * Internal method called when one of the model property that the widget is bound to has changed Must be
  148 + * overridden by sub-classes defining bindable properties
  149 + * @param {String} propertyName the property name
  150 + * @param {Object} newValue the new value
  151 + * @param {Object} oldValue the old property value
  152 + * @protected
  153 + * @override
  154 + */
  155 + _onBoundPropertyChange : function (propertyName, newValue, oldValue) {
  156 + if (propertyName === "height" || propertyName === "width") {
  157 + this._updateSize();
  158 + } else {
  159 + // delegate to parent class
  160 + this.$Widget._onBoundPropertyChange.apply(this, arguments);
  161 + }
  162 + }
134 163 }
135 164 });
8 src/aria/widgets/container/Dialog.js
@@ -332,6 +332,14 @@ Aria.classDefinition({
332 332 } else if (propertyName === "center") {
333 333 this._cfg.center = newValue;
334 334 this.updatePosition();
  335 + } else if (propertyName === "height") {
  336 + // Resize ourself and then the contained div
  337 + this.$Container._onBoundPropertyChange.apply(this, arguments);
  338 + this._div.updateSize(this._cfg);
  339 + } else if (propertyName === "width") {
  340 + // Resize ourself and then the contained div
  341 + this.$Container._onBoundPropertyChange.apply(this, arguments);
  342 + this._div.updateSize(this._cfg);
335 343 } else {
336 344 // delegate to parent class
337 345 this.$Container._onBoundPropertyChange.apply(this, arguments);
10 src/aria/widgets/container/Div.js
@@ -118,14 +118,8 @@ Aria.classDefinition({
118 118 hasChanged = true;
119 119 }
120 120 if (hasChanged) {
121   - /*
122   - * // Change width and height if it's too large compared to the viewport var viewport =
123   - * aria.utils.Dom._getViewportSize(); if (viewport.width < this._cfg.width) { this._cfg.width =
124   - * viewport.width; } if (viewport.height < this._cfg.height) { this._cfg.height = viewport.height; }
125   - */
126   - this.$Container._updateContainerSize.call(this);
  121 + this.$Container._updateSize.call(this);
127 122 }
128   -
129 123 }
130 124 }
131   -});
  125 +});

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.