I'm working with polymer elements in dart. I'm doing a single page web app. I'm wondering if there's a way to dynamically link the element I need for this page instead of linking (loading the source) all in the front. I know there is a deferred class that you can declare but I'm not sure it works with HTML template too. Any wayto dynamically link the element once you need it?
Thanks,
Yi
DeferredLibrary should work for this (might still have some bugs or limitations)
Using code in Dart that wasn't imported at compile time is currently not supported.
Related
I'm trying to create a sample CRUD application using Dart and Polymers.
One think I noticed is almost all dart polymer examples have only one page. I'm trying to look for samples with multiple pages.
i.e.
Screen contains table of Person objects
Then when an Add button is clicked, it goes to the add view of the Person object
On the add page, there is a link to add some other child object.
This is very doable using only one screen, but am looking for a best practice in implementing multiple screens. In GWT it uses the Activities and Places. What is the dart counter part?
I saw on some other post using routes, but seems does not work on my Dart Editor. And I am not sure if this is still current as that posted almost a year now.
Route Example
ShadowRoot.resetStyleInheritance and ShadowRoot.applyAuthorStyles now deprecated in dart:html.
Please remove them from your code.
Uncaught Error: Illegal argument(s): No handler found for /routes_example.html#one
Stack Trace:
I just published a package for routing with Polymer (see https://github.com/bwu-dart/bwu_polymer_routing)
There are two links to simple demos available online.
I have a SDK dependency on 1.6.0 (dev-channel release) because I haven't tested it with Dart 1.5.x. I might remove this restriction with the next release.
Some highlights:
Hierarchical views are automatically created and inserted depending on the current route.
Route parameter values are automatically passed to the view attributes on route or parameter value change.
Parameter values are updated in the view without creating the view again.
The same code runs no matter if usePushState is enabled or disabled.
Mixin with event handlers for simple go-to-route links or buttons.
Mixin for adding DI support to your Polymer elements.
see also https://stackoverflow.com/a/25228357/217408
Consider integration of a Dart DOM library like Dart HTML5 Drag and Drop with Angular.dart. Should it be a component? or decorator(directive)? or should one rewrite the controller to use the 3rd party DOM library as a package?
One idea is to use 2 decorators: dragGroup and dropGroup. The value could be a string 'type' in which would link the groups together. So you could have a service/injectable that has a map of 'String type'->(dragGroup,dropGroup). Each decorator would inject that service and install itself's dom element into the respective dragGroup/dropGroup via the Dart HTML5 drag lib.
Whichever way it's done I think it's a cool idea.
It looks like angular ui team has some open requests for it: https://github.com/akserg/angular.dart.ui/issues/54
Hmm, looking further it looks like the idea I described is how it was implemented: https://github.com/akserg/angular.dart.ui/tree/master/lib/dragdrop
i'm totally a beginner of jquery mobile, i'm wondering how does everybody build the UI?
by html markup or writing pure code?
if it's by html markup, then if i have a complex applicaiton , then i'm gonna have a very long html file with a lot of pages, how do you deal with that?
if with pure code, i don't find it easy to create widgets, the only i found it just to put the pure html code into a jquery object wrapper. it's not very object-oreinted, i want some simple ways like: var $aButton = new button( );
i had ios native app development experience, normally i write the ui with pure coding. i'm just wondering if there's way to build ui with pure code?
There's no official way to build the UI in pure code but no one stops you from writing your own "code generator".
Be warned:
Writing HTML is the easier way to do, because JQM will do all of the UI-manip.
I'm working on a UI generator for JQM which
will be released opensource. Still a lot to do but it already works more or less - see http://officejs.com
Check the erp5loader.js file which generates the whole app - there is only an empty index.html.
The factory section contains all methods necessary to generate JQM UI. The JSON files loaded show how to generate static and dynamic widgets as well as how to hook into navigation and global action bindings
Roll your own or wait until we are releasing ours :-)
I tried mixing polymer web component w/dart and Foundation CSS framework and so far things simple things are working like button, grid, menu. I guess if i run into an issue, I just need to port the javascript I need to dart. Anyone try this or thinking of trying this?
This was trick to get CSS to leak into component.
class ClickCounter ... {
...
bool get applyAuthorStyles => true;
...
http://i.stack.imgur.com/oNoGR.png
Yes I try this too.
The first thing I tried was create one style file for each component and use the sass #extends to make each component style, my goal was to abstract the zurb, so if I want change the theme, or css framework I just need change the sass file.
But zurb-foundation depends on a base file that have to be include, I can't create one file just for buttons, because de buttons in foundation depend on variables seted in the main file, this generate a huge file with redundant css for each component.
The second thing I tried was warp the basic components, like button, lets say a
<x-button></x-button>
Then in my sass file I include the zurb button file, and make x-button #extends .button or #include .button that make buttons and x-button with the same look. This work for basic elements.
The other way is to applyAuthorStyles and let the css leak
I'm not sure what is the best way, because each approach has its pitfalls.
Why I wrap basic components? To have common behavior and API. For example: enable and disable components, in a form. All my basic components in polymer (x-button, x-input, etc) extends from my framework class, in this framework class I have the common behavior enable and disable, so I can progamattic enable and disable components with the same API.
This is a slow work in proggress, more for fun, and I stop working on this because I need to spend more time creating applications and not creating frameworks. Unfortunately there is no good component framework for Dart as in Javascript like ExtJs and Dojo.
But the Idea was make a component set (with common behavior) and use sass frameworks to the visual effect, maybe abstract the css framework in a way it can be plug and change the look and feel of the application, and that is not easy because some components have specific html markup
I have created a windows 8 project using the phonegap 2.9.0 and then tried to use JQuery mobile library within it. But I get the following security exception. Any idea how to resolve this ?.
Exception was thrown at line 4, column 7009 in ms-appx://c6a291ce-903f-47ab-b167- cb8378ffb051/www/libs/jquery.core/jquery-1.9.1.min.js
0x800c001c - JavaScript runtime error: Unable to add dynamic content. A script attempted to inject dynamic content, or elements previously modified dynamically, that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content, or explicitly create elements and attributes with a method such as createElement. For more information, see http://go.microsoft.com/fwlink/?LinkID=247104.
If there is a handler for this exception, the program may be safely continued.
I have just run into the same problem. It appears that the grist of the matter is that the WinJS security model won't allow the JQuery dom manipulation when you create elements from strings e.g. using the .html() method.
See the below for more information:
http://blogs.msdn.com/b/windowsappdev/archive/2013/04/01/windows-store-app-support-in-jquery-version-2-0.aspx
http://net.tutsplus.com/tutorials/javascript-ajax/building-windows-store-applications-with-jquery-2-0/
In summary the clever people have produced a fix to this in JQuery 2.0.
So I'll be looking at using JQuery 2.0 but will it work with JQuery Mobile? I haven't determined that yet so I'll probably look at fully building and attaching the dom elements rather than using the .html() method.
But please note that I have not tried any of these approaches yet so cannot vouch for their validity.