1 files changed, 102 insertions, 25 deletions
diff --git a/js/panels/binding/edit-binding-view.reel/edit-binding-view.html b/js/panels/binding/edit-binding-view.reel/edit-binding-view.html
index 1d502a3e..604d4871 100644
--- a/js/panels/binding/edit-binding-view.reel/edit-binding-view.html
+++ b/js/panels/binding/edit-binding-view.reel/edit-binding-view.html
@@ -13,34 +13,53 @@
            "owner": {
                "prototype": "js/panels/binding/edit-binding-view.reel",
                "properties": {
-                    "element": {"#": "edit-binding"}
+                    "element": {"#": "edit-binding"},
+                    "sourceObjectField" : {"@": "sourceObjectField" },
+                    "boundObjectField"  : {"@": "boundObjectField" },
+                    "sourceObjectPropertyPathField" : {"@": "sourceObjectPropertyPathField" },
+                    "boundObjectPropertyPathField"  : {"@": "boundObjectPropertyPathField" },
+                    "directionCheckbox"  : {"@": "directionCheckbox" },
+                    "saveButton":{ "@": "saveButton" },
+                    "cancelButton":{ "@": "cancelButton" },
+                    "deleteButton":{ "@": "deleteButton" }
                }
            },
-            "objectsList" : {
+            "sourceObjectField": {
-                "prototype": "montage/ui/controller/array-controller",
+                "prototype": "js/components/hintable.reel",
-                "bindings" : {
-                    "content": {"<-": "@owner.objectsList"}
-                }
-            },
-            "sourceObjectSelect": {
-                "prototype": "montage/ui/select-input.reel",
                "properties": {
-                    "element": {"#": "sourceObjectSelect"},
+                    "startOnEvent": "click",
-                    "contentController": {"@": "objectsList"}
+                    "element": {"#": "sourceObjectField"}
+                },
-                }
+                "bindings": {
+                    "value": {"<-": "@owner.sourceObjectIdentifier"}
+                },
+                "listeners" : [
+                    {
+                        "type": "change",
+                        "listener": {"@": "owner"}
+                    }
+                ]
            },
-            "boundObjectSelect": {
+            "boundObjectField": {
-                "prototype": "montage/ui/select-input.reel",
+                "prototype": "js/components/hintable.reel",
                "properties": {
-                    "element": {"#": "boundObjectSelect"},
+                    "startOnEvent": "click",
-                    "contentController": {"@": "objectsList"}
+                    "element": {"#": "boundObjectField"}
+                },
-                }
+                "bindings": {
+                    "value": {"<-": "@owner.boundObjectIdentifier"}
+                },
+                "listeners" : [
+                    {
+                        "type": "change",
+                        "listener": {"@": "owner"}
+                    }
+                ]
            },
            "sourceObjectPropertyPathField": {
                "prototype": "js/components/hintable.reel",
                "properties": {
+                    "startOnEvent": "click",
                    "element": {"#": "so-pp"},
                    "identifier": "sourceProperty"
                },
@@ -57,6 +76,7 @@
            "boundObjectPropertyPathField": {
                "prototype": "js/components/hintable.reel",
                "properties": {
+                    "startOnEvent": "click",
                    "element": {"#": "bo-pp"},
                    "identifier": "boundProperty"
                },
@@ -69,6 +89,57 @@
                        "listener": {"@": "owner"}
                    }
                ]
+            },
+            "directionCheckbox": {
+                "prototype": "montage/ui/checkbox.reel",
+                "properties": {
+                    "element": {"#": "direction-checkbox"}
+                },
+                "bindings": {
+                    "checked": {"<-": "@owner.oneway"}
+                }
+            },
+            "cancelButton" : {
+                "prototype": "montage/ui/button.reel",
+                "properties": {
+                    "element": {"#": "cancel-button" },
+                    "identifier": "cancelButton"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner" }
+                    }
+                ]
+            },
+            "deleteButton" : {
+                "prototype": "montage/ui/button.reel",
+                "properties": {
+                    "element": {"#": "delete-button" },
+                    "identifier": "deleteButton"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner" }
+                    }
+                ]
+            },
+            "saveButton" : {
+                "prototype": "montage/ui/button.reel",
+                "properties": {
+                    "element": {"#": "save-button" },
+                    "identifier": "saveButton"
+                },
+                "bindings" : {
+                    "enabled": {"<<->": "@owner.dirty"}
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner" }
+                    }
+                ]
            }
        }
@@ -78,26 +149,32 @@
 <div data-montage-id="edit-binding" class="edit-binding-view">
    <ul>
+        <h3>Source Object</h3>
        <li class="edit-source-object">
-            <label>Source Object:</label><select data-montage-id="sourceObjectSelect"  class="nj-skinned"></select>
+            <label>Identifier:</label><span data-montage-id="sourceObjectField" class="hintable-field">Test</span>
            <br>
-            <label>Source Object Property Path:</label><span data-montage-id="so-pp" class="so-pp">Test</span>
+            <label>Property Path:</label><span data-montage-id="so-pp" class="hintable-field so-pp">Test</span>
        </li>
+        <h3>Bound Object</h3>
        <li class="edit-bound-object">
-            <label>Bound Object:</label><select data-montage-id="boundObjectSelect"  class="nj-skinned"></select>
+            <label>Identifier:</label><span data-montage-id="boundObjectField" class="hintable-field">Test</span>
            <br>
-            <label>Bound Object Property Path:</label><span data-montage-id="bo-pp" class="bo-pp">Test</span>
+            <label>Property Path:</label><span data-montage-id="bo-pp" class="hintable-field bo-pp">Test</span>
        </li>
+        <h3>Configuration</h3>
        <li class="edit-general-properties">
-            <input data-montage-id="oneway-checkbox" type="checkbox" class="nj-skinned"><label>Oneway</label>
+            <input data-montage-id="direction-checkbox" type="checkbox" class="nj-skinned"><label>Oneway</label>
        </li>
        <li>
            <label>Converter</label><span>Test</span>
        </li>
    </ul>
+    <button data-montage-id="delete-button" class="nj-skinned .btn-delete">Delete</button>
+    <button data-montage-id="cancel-button" class="nj-skinned">Cancel</button>
+    <button data-montage-id="save-button" class="nj-skinned">Save</button>
 </div>
 </body>
 </html>
 \ No newline at end of file

diff --git a/js/panels/binding/edit-binding-view.reel/edit-binding-view.html b/js/panels/binding/edit-binding-view.reel/edit-binding-view.html index 1d502a3e..604d4871 100644 --- a/js/panels/binding/edit-binding-view.reel/edit-binding-view.html +++ b/js/panels/binding/edit-binding-view.reel/edit-binding-view.html
@@ -13,34 +13,53 @@
13	"owner": {	13	"owner": {
14	"prototype": "js/panels/binding/edit-binding-view.reel",	14	"prototype": "js/panels/binding/edit-binding-view.reel",
15	"properties": {	15	"properties": {
16	"element": {"#": "edit-binding"}	16	"element": {"#": "edit-binding"},
		17	"sourceObjectField" : {"@": "sourceObjectField" },
		18	"boundObjectField" : {"@": "boundObjectField" },
		19	"sourceObjectPropertyPathField" : {"@": "sourceObjectPropertyPathField" },
		20	"boundObjectPropertyPathField" : {"@": "boundObjectPropertyPathField" },
		21	"directionCheckbox" : {"@": "directionCheckbox" },
		22	"saveButton":{ "@": "saveButton" },
		23	"cancelButton":{ "@": "cancelButton" },
		24	"deleteButton":{ "@": "deleteButton" }
17	}	25	}
18	},	26	},
19	"objectsList" : {	27	"sourceObjectField": {
20	"prototype": "montage/ui/controller/array-controller",	28	"prototype": "js/components/hintable.reel",
21	"bindings" : {
22	"content": {"<-": "@owner.objectsList"}
23	}
24	},
25	"sourceObjectSelect": {
26	"prototype": "montage/ui/select-input.reel",
27	"properties": {	29	"properties": {
28	"element": {"#": "sourceObjectSelect"},	30	"startOnEvent": "click",
29	"contentController": {"@": "objectsList"}	31	"element": {"#": "sourceObjectField"}
30		32	},
31	}	33	"bindings": {
		34	"value": {"<-": "@owner.sourceObjectIdentifier"}
		35	},
		36	"listeners" : [
		37	{
		38	"type": "change",
		39	"listener": {"@": "owner"}
		40	}
		41	]
32	},	42	},
33	"boundObjectSelect": {	43	"boundObjectField": {
34	"prototype": "montage/ui/select-input.reel",	44	"prototype": "js/components/hintable.reel",
35	"properties": {	45	"properties": {
36	"element": {"#": "boundObjectSelect"},	46	"startOnEvent": "click",
37	"contentController": {"@": "objectsList"}	47	"element": {"#": "boundObjectField"}
38		48	},
39	}	49	"bindings": {
		50	"value": {"<-": "@owner.boundObjectIdentifier"}
		51	},
		52	"listeners" : [
		53	{
		54	"type": "change",
		55	"listener": {"@": "owner"}
		56	}
		57	]
40	},	58	},
41	"sourceObjectPropertyPathField": {	59	"sourceObjectPropertyPathField": {
42	"prototype": "js/components/hintable.reel",	60	"prototype": "js/components/hintable.reel",
43	"properties": {	61	"properties": {
		62	"startOnEvent": "click",
44	"element": {"#": "so-pp"},	63	"element": {"#": "so-pp"},
45	"identifier": "sourceProperty"	64	"identifier": "sourceProperty"
46	},	65	},
@@ -57,6 +76,7 @@
57	"boundObjectPropertyPathField": {	76	"boundObjectPropertyPathField": {
58	"prototype": "js/components/hintable.reel",	77	"prototype": "js/components/hintable.reel",
59	"properties": {	78	"properties": {
		79	"startOnEvent": "click",
60	"element": {"#": "bo-pp"},	80	"element": {"#": "bo-pp"},
61	"identifier": "boundProperty"	81	"identifier": "boundProperty"
62	},	82	},
@@ -69,6 +89,57 @@
69	"listener": {"@": "owner"}	89	"listener": {"@": "owner"}
70	}	90	}
71	]	91	]
		92	},
		93	"directionCheckbox": {
		94	"prototype": "montage/ui/checkbox.reel",
		95	"properties": {
		96	"element": {"#": "direction-checkbox"}
		97	},
		98	"bindings": {
		99	"checked": {"<-": "@owner.oneway"}
		100	}
		101	},
		102	"cancelButton" : {
		103	"prototype": "montage/ui/button.reel",
		104	"properties": {
		105	"element": {"#": "cancel-button" },
		106	"identifier": "cancelButton"
		107	},
		108	"listeners": [
		109	{
		110	"type": "action",
		111	"listener": {"@": "owner" }
		112	}
		113	]
		114	},
		115	"deleteButton" : {
		116	"prototype": "montage/ui/button.reel",
		117	"properties": {
		118	"element": {"#": "delete-button" },
		119	"identifier": "deleteButton"
		120	},
		121	"listeners": [
		122	{
		123	"type": "action",
		124	"listener": {"@": "owner" }
		125	}
		126	]
		127	},
		128	"saveButton" : {
		129	"prototype": "montage/ui/button.reel",
		130	"properties": {
		131	"element": {"#": "save-button" },
		132	"identifier": "saveButton"
		133	},
		134	"bindings" : {
		135	"enabled": {"<<->": "@owner.dirty"}
		136	},
		137	"listeners": [
		138	{
		139	"type": "action",
		140	"listener": {"@": "owner" }
		141	}
		142	]
72	}	143	}
73		144
74	}	145	}
@@ -78,26 +149,32 @@
78	<div data-montage-id="edit-binding" class="edit-binding-view">	149	<div data-montage-id="edit-binding" class="edit-binding-view">
79		150
80	<ul>	151	<ul>
		152	<h3>Source Object</h3>
81	<li class="edit-source-object">	153	<li class="edit-source-object">
82	<label>Source Object:</label><select data-montage-id="sourceObjectSelect" class="nj-skinned"></select>	154	<label>Identifier:</label><span data-montage-id="sourceObjectField" class="hintable-field">Test</span>
83	<br>	155	<br>
84	<label>Source Object Property Path:</label><span data-montage-id="so-pp" class="so-pp">Test</span>	156	<label>Property Path:</label><span data-montage-id="so-pp" class="hintable-field so-pp">Test</span>
85	</li>	157	</li>
86		158	<h3>Bound Object</h3>
87	<li class="edit-bound-object">	159	<li class="edit-bound-object">
88	<label>Bound Object:</label><select data-montage-id="boundObjectSelect" class="nj-skinned"></select>	160	<label>Identifier:</label><span data-montage-id="boundObjectField" class="hintable-field">Test</span>
89	<br>	161	<br>
90	<label>Bound Object Property Path:</label><span data-montage-id="bo-pp" class="bo-pp">Test</span>	162	<label>Property Path:</label><span data-montage-id="bo-pp" class="hintable-field bo-pp">Test</span>
91	</li>	163	</li>
92		164
		165	<h3>Configuration</h3>
93	<li class="edit-general-properties">	166	<li class="edit-general-properties">
94	<input data-montage-id="oneway-checkbox" type="checkbox" class="nj-skinned"><label>Oneway</label>	167	<input data-montage-id="direction-checkbox" type="checkbox" class="nj-skinned"><label>Oneway</label>
95	</li>	168	</li>
96	<li>	169	<li>
97	<label>Converter</label><span>Test</span>	170	<label>Converter</label><span>Test</span>
98	</li>	171	</li>
99	</ul>	172	</ul>
100		173
		174	<button data-montage-id="delete-button" class="nj-skinned .btn-delete">Delete</button>
		175	<button data-montage-id="cancel-button" class="nj-skinned">Cancel</button>
		176	<button data-montage-id="save-button" class="nj-skinned">Save</button>
		177
101	</div>	178	</div>
102	</body>	179	</body>
103	</html> \ No newline at end of file	180	</html> \ No newline at end of file