Finalized 'Resizable' example.

data.opa

@@ -338,10 +338,11 @@ units_plus : example = { name="unit_conv_plus"      port=5018 article=some(unit_
 hello_i18n : example = { name="i18n"                port=5019 article=some(i18n)              srcs=@static_include_directory("examples/hello_i18n")          details={descr=i18n_descr deps=[]}}
 // challenge apps: 5020, 5021, 5022, 5023, 5024, 5025, 5026, 5027
 opa_chat : example =   { name="opa_chat"            port=5028 article=none                    srcs=@static_include_directory("examples/opa_chat")            details={invisible}}
-fb1 : example      =   { name="facebook-01"         port=5029 article=none                    srcs=@static_include_directory("examples/facebook-01")            details={invisible}}
+fb1 : example      =   { name="facebook-01"         port=5029 article=none                    srcs=@static_include_directory("examples/facebook-01")         details={invisible}}
+resizable : example=   { name="resizable"           port=5030 article=none                    srcs=@static_include_directory("examples/resizable")           details={invisible}}
 //hello_forms :example = { name="hello_forms"         port=xxxx article=none                    srcs=@static_include_directory("examples/hello_forms")         details={descr=hello_forms_descr deps=[]}}
 
-blog_examples = [ hello, watch, watch_slow, counter, iMage, iMage_01, iMage_02, iMage_03, calculator, iMage_04, iMage_05, watch_fr, units, units_plus, hello_i18n, opa_chat, fb1 /*, hello_forms*/ ]
+blog_examples = [ hello, watch, watch_slow, counter, iMage, iMage_01, iMage_02, iMage_03, calculator, iMage_04, iMage_05, watch_fr, units, units_plus, hello_i18n, opa_chat, fb1, resizable /*, hello_forms*/ ]
 
 // ===============================================================
 // all examples

examples/resizable/compile

@@ -1,3 +1,3 @@
-opa-plugin-builder jQuery-UI/plugin/jquery-ui-1.8.16.custom.js jQuery-UI/plugin/resizable.js -o resizable.opp
+opa-plugin-builder --js-validator-off jQuery-UI/plugin/jquery-ui-1.8.16.custom.js jQuery-UI/plugin/resizable.js -o resizable.opp
 opa --parser js-like jQuery-UI/resizable.opa resizable.opp
 opa --parser js-like demo_resizable.opa -o resizable.exe

examples/resizable/demo_resizable.opa

@@ -14,10 +14,7 @@ function page() {
 
 Server.start(Server.http,
   [ { resources: @static_resource_directory("resources") }
-  , { register: [ "resources/jquery.ui.all.css"
-                , "resources/jquery.ui.base.css"
-                , "resources/jquery.ui.core.css"
-                , "resources/jquery.ui.resizable.css"
+  , { register: [ "resources/jquery-ui-1.8.16.custom.css"
                 , "resources/style.css"
                 ]
     }

examples/resizable/resources/jquery.ui.theme.css → examples/resizable/resources/jquery-ui-1.8.16.custom.css

@@ -1,3 +1,44 @@
+/*
+ * jQuery UI CSS Framework 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Theming/API
+ */
+
+/* Layout helpers
+----------------------------------*/
+.ui-helper-hidden { display: none; }
+.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
+.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
+.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
+.ui-helper-clearfix { display: inline-block; }
+/* required comment for clearfix to work in Opera \*/
+* html .ui-helper-clearfix { height:1%; }
+.ui-helper-clearfix { display:block; }
+/* end clearfix */
+.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
+
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled { cursor: default !important; }
+
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Overlays */
+.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
 
 
 /*
@@ -246,4 +287,23 @@
 
 /* Overlays */
 .ui-widget-overlay { background: #666666 url(images/ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat; opacity: .50;filter:Alpha(Opacity=50); }
-.ui-widget-shadow { margin: -5px 0 0 -5px; padding: 5px; background: #000000 url(images/ui-bg_flat_10_000000_40x100.png) 50% 50% repeat-x; opacity: .20;filter:Alpha(Opacity=20); -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
+.ui-widget-shadow { margin: -5px 0 0 -5px; padding: 5px; background: #000000 url(images/ui-bg_flat_10_000000_40x100.png) 50% 50% repeat-x; opacity: .20;filter:Alpha(Opacity=20); -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }/*
+ * jQuery UI Resizable 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Resizable#theming
+ */
+.ui-resizable { position: relative;}
+.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block; }
+.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
+.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
+.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
+.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
+.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
+.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
+.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
+.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
+.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}