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
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?
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 :)
