intel / rib

Rapid Interface Builder (RIB) is a browser-based design tool for quickly prototyping and creating the user interface for web applications. Layout your UI by dropping widgets onto a canvas. Run the UI in an interactive "Preview mode". Export the generated HTML and Javascript. It's that simple!
https://01.org/rib
Apache License 2.0
148 stars 74 forks source link

Event handler (Regenerate the JS file in ADM) #222

Closed xuqingkuang closed 12 years ago

xuqingkuang commented 12 years ago

Event handler use for make user able to edit the events handling codes.

xuqingkuang commented 12 years ago

The diff with original event handler patch.

diff --git a/src/js/adm.js b/src/js/adm.js
index ea0177f..fd5f136 100644
--- a/src/js/adm.js
+++ b/src/js/adm.js
@@ -2260,6 +2260,11 @@ ADMNode.prototype.setProperty = function (property, value, data, raw) {
         } else {
             this._properties[property] = value;
         }
+
+        // Event handler saving after ID/event property changed.
+        if (property == 'id' || type == 'event')
+            $.rib.saveEventHandlers();
+
         this.fireModelEvent("modelUpdated",
                             { type: "propertyChanged", node: this,
                               property: property, oldValue: orig,
diff --git a/src/js/views/property.js b/src/js/views/property.js
index 47066c5..fb10bc1 100644
--- a/src/js/views/property.js
+++ b/src/js/views/property.js
@@ -106,12 +106,10 @@
             // Use visible attribute to lock the process for make sure it only
             // run 1 time, because _modelUpdatedHandler function will be called
             // 2 times for sync up the widgets in layoutView and codeView.
-            if ((event['property'] == 'id' || event['node'].getType() == 'event')
-                && widget.element.is(':visible')
-            ) {
+            if (event['property'] == 'id' && widget.element.is(':visible')) {
                 // Popup a alert dialog to inform user ID property can't be
                 // blank if it have event handlers.
-                if (event['property'] == 'id' && value.trim() == '') {
+                if (value.trim() == '') {
                     matchedProps = node.getMatchingProperties(
                         {'type': 'event'}
                     );
@@ -142,8 +140,6 @@
                         );
                     };
                 }
-                // Regenerate event handlers file after changed ID/event property.
-                $.rib.saveEventHandlers();
             }

             // Refresh widget, it's necessary to called 2 times for sync up

The patch moved $.rib.saveEventHandlers() from propertyView to ADM, the benefit is make a unitary solution for regenerate the JS file for all ID/event properties operations.

But the defect is because JSONToProj() use setProperty() to initial the project, it's meaning when load a project, it will call many times when load ID/event properties from each widget, maybe parallel write data is concerns for browser LocalStorage implementation, may will caused to some unknown issue.

zhizhangchen commented 12 years ago

Why did you put diff in comments? Why not just edit the code directly?

xuqingkuang commented 12 years ago

The code updated, moved the confirmation code when user clean ID property from _modelUpdateHandler() of propertyView to ADM.

xuqingkuang commented 12 years ago

The code updated, split jsCode to jsHeader, jsContent and jsFooter.

And added ''value': new RegExp('.+')' to the condition of design.findNodesByProperty() in saveEventHandlers() function.

xuqingkuang commented 12 years ago

Restored to previous idea, now the main.js file will be regenerated with any condition.

xuqingkuang commented 12 years ago

Added code for when jsContent is blank then remove the main.js from header and sandbox.

Please review.

xuqingkuang commented 12 years ago

The code updated, please review.

Thank you @zhizhangchen

xuqingkuang commented 12 years ago

@zhizhangchen The argument has been removed from removeSandboxHeader() and the file will be removed manually, please review.

zhizhangchen commented 12 years ago

Setting id of a button to empty doesn't bring up a confirm dialog and event handler stop working after changing button id

xuqingkuang commented 12 years ago

@zhizhangchen The issue is fixed, lacked '!' in haveEventHandlers(), I forgot when it have no event handlers will return true... My mistake.

Thank you for your testing!

grgustaf commented 12 years ago

I have some questions about this PR, and in the first place, I'm really wanting to stabilize and just take bug fixes for the next week. So I think we should probably hold off on integrating this.

xuqingkuang commented 12 years ago

@grgustaf and @zhizhangchen, The code has been updated with your comments, please review.

zhizhangchen commented 12 years ago

There's confliction between master and this PR. Please rebase it.

xuqingkuang commented 12 years ago

@zhizhangchen Rebase completed, please review.

grgustaf commented 12 years ago

Finally decided to merge it. It works, there are a few things that need to change, but it's better to get it in people's hands to try out.

Thanks for your patience!