CODEWITHSUNDEEP
dartdart-polymerdart-js-interop
SafetyPin
SafetyPin

Reputation: 125

jQueryUI and jQueryUI-touch-punch don't work with Polymer.dart

I'm developing a small Dart app using jQueryUI and jQueryUI-touch-punch with Polymer.dart. When I don't use Polymer.dart, everything works well. But with Polymer.dart, several problems occurred. Here is my codes.

index.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Dart and jquery ui with Polymer</title>

  <!--- stylesheet --->
  <link rel="stylesheet" href="css/smoothness/jquery-ui-1.10.4.custom.min.css">
  <link rel="stylesheet" href="dart_and_jquery_ui_with_polymer.css">
  <!--- ---------- --->

  <!--- JSLib --->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-2.1.0.min.js"><\/script>')</script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <script>window.jQuery.ui || document.write('<script src="js/libs/jquery-ui-1.10.4.custom.min.js"><\/script>')</script>
  <script src="js/libs/jquery.ui.touch-punch-0.2.3.min.js"></script>
  <!--- ----- --->

  <link rel="import" href="main_component.html">
  <script type="application/dart">
  export 'package:polymer/init.dart';
  </script>
 </head>
 <body>
  <h1>Dart and jquery ui with Polymer</h1>

  <p>Hello world from Dart!</p>

  <!-- CUSTOM ELEMENT -->
  <main-component></main-component>

  <script src="packages/browser/dart.js"></script>
  <script src="packages/browser/interop.js"></script>
 </body>
</html>

main_component.html

<!DOCTYPE html>
<meta charset="utf-8">

<polymer-element name="main-component">
 <template>
  <div id="sample_container_id">
   <button id="btn1">OPEN JSVer</button>
   <button id="btn2">OPEN DartVer</button>

   <div id="msg1">
    Hello, world1!
    <div>
     <button>btn1</button>
     <button>btn2</button>
     <button>btn3</button>
     <button>btn4</button>
     <button>btn5</button>
    </div>
   </div>

   <div id="msg2">
    Hello, world2!
    <div>
     <button>btn1</button>
     <button>btn2</button>
     <button>btn3</button>
     <button>btn4</button>
     <button>btn5</button>
    </div>
   </div>
  </div>
 </template>

 <!-- JSScript -->
 <script src="js/js_main.js"></script>
 <!-- -------- -->

 <!-- DartScript -->
 <script type="application/dart" src="main_component.dart"></script>
 <!-- ---------- -->
</polymer-element>

js/js_main.js

$( function(){

 // The code in this JS file totally doesn't work...
 // But there is no error message in JS console...

 // btn1 config
 $('#btn1').click( function() {
  $('#msg1').dialog('open');
 } );

 // msg1 config
 $('#msg1').dialog({
  autoOpen: false,
  buttons: {
   "OK": function() {
    $(this).dialog('close');
   }
  },
  title: "Dialog1",
  resizable: false,
  modal: false,
  show: 'fold',
  hide: 'puff'
 });

 // btn2 and msg2 configs are implemented in Dart side.
} );

main_component.dart

import 'package:polymer/polymer.dart';
import 'dart:js' as js;

@CustomTag('main-component')
class MainComponent extends PolymerElement {

 MainComponent.created() : super.created(){
  // Constructor...
 }

 @override
 void attached(){
  super.attached();

  // btn2 config
  js.context.callMethod(r'$', [ $['btn2'] ])
   ..callMethod('click', [ 
    ([arg]){
     js.context.callMethod(r'$', [ $['msg2'] ])
      ..callMethod('dialog', ['open']);
    } 
  ]);

  // msg2 config
  js.JsObject options = new js.JsObject(js.context['Object']);
  options['autoOpen'] = false;
  options['buttons'] = new js.JsObject(js.context['Object']);
  options['buttons']['OK'] = ([arg]){ 
   js.context.callMethod(r'$', [ $['msg2'] ])
    ..callMethod('dialog', ['close']);
  };
  options['title'] = "Dialog2";
  options['modal'] = false;
  options['show'] = 'fold';
  options['hide'] = 'puff';
  js.context.callMethod(r'$', [ $['msg2'] ])
   ..callMethod('dialog', [options]);
 }
}

The problems are

  1. msg1 doesn't form dialog and btn1 doesn't execute mouse click event I registered. This means JS scripts in "js_main.js" don't work (with NO error message). I found custom elements of Polymer.dart implement Shadow DOM which prohibit any access from outside. Is this the cause of the problem?

  2. When I convert this Dart app into JavaScript using "pub build", the generated product can run in a browser of my iPad mini(iOS6). This is OK. However, it seems jQueryUI-touch-punch doesn't work well. So I cannot access any dragging or resizing action from my iPad mini.

Dart SDK version is 1.2.

Can anyone help?

Thanks for reading to the end :)

Upvotes: 1

Views: 408

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658087

Your jQuery element selection code $('#msg'), $('#btnx') wont find any element inside the shadowDOM. There might be other problems but this one is obvious.

Upvotes: 1

Related Questions