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
Related
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.
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 am working on a experiment of making JQuery mobile custom components with JQuery tmpl(Templating plugin). The component are building using existing JQuerymobile items and also they are programmatic components. I am using plain JavaScript functions and prototypes to create these components. The purpose behind this and I wanted to made a component that can be easily generate pragmatically, i.evar myAccordian = new Accordian() like that.
So is there a more structured way of doing these components(can say widgets) and also the event binding for each.
jQuery Mobile component is created using the $.widget () method defined internally in jQuery Mobile. This method allows to create and initialize the component and add any specific methods.
There are multiple tutorials available which explains the process such as
https://www.hiddentao.com/archives/2011/11/07/how-to-write-a-custom-widget-for-jquery-mobile/
http://the-jquerymobile-tutorial.org/jquery-mobile-tutorial-CH09.php
I am getting ready to code a number of HTML helpers for UI elements in an ASP.NET MVC 3 project. I expect many of the helpers to depend on code that is located in external javascript libraries. These could be custom javascript libraries that I write, or they could reference 3rd party libraries like jQuery and jQueryUI. For example, I might write HTML.RichM.DataPicker(...) that would require the page to have jQuery and jQueryUI referenced and some code executed in the document ready function. Getting code into the document ready function is pretty straightforward I guess -- I could simply inject a new script block into the output with the contents of the function, even though that would mean I might have a page peppered with document ready functions all over.
The other part of this is making sure that the jQuery and jQuery UI libraries (in my example) are referenced and included. Is there an "MVC way" to add the code references to the view page or the layout/master if they are not already there, or must I instruct users of my HTML helpers that they need to add references manually for any required javascript files? Of course, I could just instruct them to include all possible external library references in the master or layout page, but that seems like overkill. In ASP.NET Web Forms, for example, I might have used RegisterClientStartupScript or RegisterStartupScript to do this from my custom control.
Thanks for any suggestions!
I think the easiest way is to include the dependant scripts in the header, that's maybe not what you want to do, but I think it's the easiest way.
I suggest you using a tool like SquishIt to bundle your JS files together, that way, you will not have to load like 20 js files, it will be more efficient and cleaner.
Started working on Firefox add ons, which is done with JavaScript and XUL, and I find myself sorely wanting to use Dojo or someother kind of JavaScript like library, but I can't find one that exists. So I was thinking of starting a library by porting Dojo over to a Firefox add on specific fork. Get rid off the cross browser stuff, use array comprehension and other nice stuff available in Firefox's JavaScript engine. I worry about whether or not there's enough of a userbase who'd take advantage of this, but more than that I guess I'm wondering if there's already something like this? Google finds nothing.
Mozilla Corp developed a JavaScript library for this purpose: FUEL.
it is developed by John Resig the creator of jQuery.
To know how to use jQuery inside FF extension look at this similar question
jQuery, at least, functions perfectly well when embedded in a Firefox addon. I can't quote you names, but I've heard that several popular addons are already using jQuery.
Here's an article discussing using jQuery within XUL and some of the hoops you may need to jump through.
It is fairly common to embed jQuery in firefox extensions.