I am taking up a task to re-write the following flash app in HTML5:
http://www.docircuits.com/circuit-editor
Given the complexity of the app and my R&D so far, I have identified AngularJS as the preferred MVC framework for the implementation. The app has various parts such as panels, menus, properties, charts, etc., all of which I believe can be easily implemented in AngularJS.
The key problem, however, is that the component design and interaction (things like, drag/drop, move, wire handling, etc.) need to be Canvas-based, as I have been able to export all the vector graphics from Flash using the CreateJS toolkit (http://www.adobe.com/in/products/flash/flash-to-html5.html) into a Canvas library and not to an SVG.
The problem is that there is no clear way to communicate between the "individual objects inside a canvas" and AngularJS. I have looked at the following examples, but almost all of them work on the canvas object, and not about handling individual components inside Canvas:
AngularJS Binding to WebGL / Canvas
Is there already a canvas drawing directive for AngularJS out there?
I am kind of stuck here, and not sure what to do. Would really appreciate a some comments on:
Whether AngularJS is the right choice?
Should I try implementing the Canvas part in another library (such as Fabric.js, kinect.js, Easel.js) and integrate it with Angular (which again seems too big a task for now)?
If none of the above, what other framework should I switch to that can easily handle canvas as well as other functionality like panels, menus, charts etc. with ease?
We finally managed to work with AngularJS and HTML5 Canvas together. Here below, I will share, briefly, our requirements and the approach we followed to achieve it.
The requirement was a bit tricky as we wanted to:
Handle event handles on individual elements inside the canvas, and be able to add these elements dynamically based on the data in AngularJS
Keep data for each individual element in AngularJS while using Canvas for only display of the data.
Use controller inheritance for special handling of data in certain cases (for e.g. all the instances should be movable and draggable, but some instance may need to blink or show some color bands etc.)
To handle the operations on Canvas, we divided it into two parts:
Canvas service
It does the job of
initializing the canvas
adding or removing any element from the canvas
refreshing the canvas
Instance directive and controller
the angular controller keeps the handle for the corresponding "canvas element", and also all the data that is associated with it.
the event listeners on each element trigger specific functions in the angular controller which manipulate the instance data
the directive watches the instance data in controller, and correspondingly updates the canvas with the help of the canvas service
For controller inheritance, we found the following approach quite useful:
https://github.com/exratione/angularjs-controller-inheritance
This helped us create controllers dynamically, and with the help of instance directive, we could also handle individual updates on the canvas along with the generic event handling.
I understand that this approach may not be completely AngularJS-oriented, but it worked well for us, and we were able to handle a reasonable amount of interaction between AngularJS and HTML5 Canvas.
Sure you could do that with Angular just fine. However, depending on the complexity of your app and the type of data synchronization you need I would recommend using JS prototypes to handle that. The "angular way" would be to use directives instead.
Create a global drawing context and then split up the various components into JS objects. Handle the setup, logic, update, etc within each object (sort of like a class) and then draw to the global context. You should have a main draw loop which is essentially a setTimeOut function that updates the game object states and redraws everything.
An alternative approach is to combine Angular and JS prototypes. This is a great example: https://github.com/IgorMinar/Memory-Game
EDIT: another example of building games with angular http://alicialiu.net/leveling-up-angular-talk/examples/directive.html
Related
I am writing a fairly complex Openlayers map application. I am considering implementing React with the application but I am wondering what added benefit it would bring, especially since openlayers has so many built in objects, methods, “stores” etc. Writing React code to access and control those objects etc would be a lot more code. Is it worth it in terms of performance or granularity? (Openlayers is already pretty granular).
OpenLayers handles map view as #estacks said , that is true. There is no reason to use react to handle map view.
But it may not be just map things on your page.
For example; I am working on a map page, it has:
three different data filter modal
one feture detail modal
one modal for property editing
one collapseble div to show data
I use jQuery and bootstrap to handle this features. I am struggling to do that, it is very hard for me.
React or another javascript library for building interfaces helps to achieve this complexity.
I have been on a few AngularJS projects now where directives are used extensively for handling views which end up with large amounts of JavaScript behind them. It doesn't feel quite right and they're also not the easiest thing to test unless you move the code out into controllers and bind that to the directive.
An example would be a large form created as a directive and a large link function placed on this. Not very testable, and its only used once in the whole application.
They do separate the code nicely in that you end up with code like this
<h1>example Header</h1>
<custom-form form-data="somemodel"></cutom-form>
<p>Lots of other stuff here</p>
Would be interested in how other people approach directives and views as I first thought directives should be really small components that are reused.
Basically, only few occasions I will implement directive and these are also the rules I trying to stick with
common reusable components I can use anywhere in the project (e.g. a time input directive with an add-on dropdown menu allow to choose time units like second/minute/hour/day)
Extend or patch 3rd-party directive
Most of the time, should utilise AngularJS MVC structure to fully take its advantage.
Recently, in working with AngularJS, I really like many of the features, like creating custom abstract data factories, etc.
KendoUI also has similar features like MVVM, SPA routes, etc. that AngularJS offers, so I'm curious about what the benefits are of mixing the two (other than the rich UI features of KendoUI)?
-- Update --
I'm asking this question for clarification, and for those who may be slightly confused about the benefits of each, and why one would use both in a project, rather than one over the other.
For example - Javascript unit testing capabilities (simply done with Angular controllers, but have not seen anyone doing this with KendoUI).
It seems like Kendo is trying to do it all, but does UI best.
Thanks.
-- Update --
Since writing this question I have gone through and integrated the KendoUI grid with Angular using OData and have written a tutorial here at www.whatsinyourlunch.com on how to accomplish this, in hopes that this will be useful for others.
The stack is AngularJS, KendoUI, OData, WebAPI2, .Net MVC5, C#, Entity Framework accessed through a generic repository.
I know this is old but here is my two cents. The more you use Angular the more you will realize you don't need Kendo. The Kendo/Angular integration is a bit of a hack but it seems to get the job done. The only reason I find to use Kendo is the grid. I've tried the Angular grids out there and they are riddled with bugs and formatting issues.
I think it's important not to be a purist and to just use whatever combination of tools that accomplish what you need. I tend to try to move away from being dependent on paid commercial libraries but the grid is just solid. Any paid product will probably have more support and upkeep, as well as personal access to the development team (vs. well maintained free products from large companies or single developer projects that waste away). I have seen so many great free products get abandoned. However, if you want a great free grid and can't stomach paying Telerik $1000.00 for just a grid, DataTables.net is a great alternative and what I currently use.
You have to love Telerik's support which is the best reason to use their stuff in my opinion. They are lacking some things in Kendo like a good date range calendar, tag cloud, etc. The charts are also lacking compared to say Highcharts. I use the date range calendar from Keith Wood, although he doesn't seem to respond to emails. I found some great angular controls for other things like drop downs, etc. as well. I used to not understand why people use a hodge podge of stuff, but it is the best tool for the job that is important.
I personally would not go any further than using the rich UI features of KendoUI in Angular directives. The rest should be Angular. Or use KendoUI exclusively.
Mixing them works fine. You don't have to use all of the framework code (MVVM, etc.) included with Kendo and can just focus on the rich UI features. We use several of their controls, including a highly customized version of the grid. Angular is perfect for this because we built directives to wrap the Kendo controls and encapsulate the 80% configuration that happens every time so the developer could focus on the 20% that is different in their page/module/whatever. Our project successfully engages over 20 developers in a distributed team on a project with tens of thousands of lines of code and we've had great success using the UI features of Kendo with Angular.
On our current project we're using both Angular and Kendo (mainly for the grid). We didn't mix the two and this would also be my suggestion. Angular should be the one responsible for your application logic and Kendo should only be concerned with managing the widgets.
Kendo provides there own kendo-angular library, which contains directives for most of their widgets.
Here are a couple of points of my experience which doesn't favor the mixing of KendoUI with AngularJs:
Though there are kendo directives for AngularJs, a lot of UI related stuff will end up in the controller (configuration, events, complex templates) and it's difficult to keep jQuery out of it.
The initialization and display of kendo components does add a serious time penalty to each page (grid, tabstrip, ...)
Events and method arguments are not coherent across the kendo framework (i.e. select method of grid vs listview vs combobox)
The use of templates with the grid (or listview) or responding to grid events does not feel like AngularJs.
Components behave differently than the native controls they try to replace (i.e. event order and databinding of combobox vs native select)
As soon as the look and feel of the kendo components has to be customized, one has to become familiar with the CSS classes used by kendo.
The KendoUI grid is great, but if the project doesn't need it, there's nothing to be gained by mixing the two.
I think mixing of them is not a good approach. you should ask yourself a question "witch one is more required and useful in my project"
I had decided to use kendo beside angular because of its rich grid components. But I canceled it.
The main controls of kendoUI is grid. But you need to watch every element of it to have a complete binding and it make it slow. Also dataItem of a row in grid does not return the original data.
you need to watch paging, filtering , sorting ....
But for other controls of kendo we have fewer problems.
My requirement is a build a web form designer in a browser - just like how Zoho Creator (or something similar to other browser based designer tools like proto.io, protoshare, gomockingbird, lucidcharts etc).
Have a tool box/palate on one side, a canvas and a properties box that always shows the properties of the selected control.
I definitely don't think that using JQuery and working with DOM elements will give a scalable solution like these (proto.io, lucidchart etc.). After numerous trials, I feel that AngularJS is the way to go, but it does not have native support for drag-drop and hence I want inputs from community members like you may have more experience with AngularJS on whether what I am setting out to do, is Angularjs the right framework to use for this kind of a solution?
See screens shots of tools like Proto.io - something very similar to what I am setting out to build. Just that my palate will contain form controls like textbox, label etc which I will drag and drop on the canvas instead of the shapes that proto.io has.
Angular is fine. But the main idea of these kind of frameworks like Angular, Dojo, backbone is to structure your application with a specific designed pattern.Hence getting benefit from that pattern. And Angular will help you construct your app into MV* pattern. i may think what you need now is a graph library that support things with canvas , drag-drop , palettes, templates, overview, etc. Some may be useful are JointJS, MxGraph,Draw2D, Data-driven Documents, gojs, mindfusion.
Draw2D supports Angular as well. The lib has a boilerplate app whichs shows
how to use the draw2d stuff in combination with angluar.
The examples shows how to structure your app with Controller, Factories and two way
data binding.
I think you can use the draw2d boilderplate with any other DragDrop lib. It's just
a pattern how to integrate a third party lib into angular.
Angular has many hooks and pattern which supports any kind of lib
Greetings
Andreas
I would like to use Ninject in my WinForms application. I cannot figure out how to use it for my user controls. Sometimes they rely on the services I want to configure through the DI framework. These controls need to be manageable through the designer (thus need default constructors).
So, is there a way to inject dependencies into properties of this user control? Since the designer needs to be able to construct it, kernel.Get<TestClass> won't work here. Is there a method or some code that will let me "fill-in" the dependencies in the Form_OnLoad() method?
I can also think of other examples where I would want to Inject into the properties of an already existing object, but th WinForms user control is the easiest to explain.
I think you need to invert your thinking. In Model View Controller, the View has only one responsibility: to display data.
How that data gets there is the Controller's responsibility, and how the data is represented in memory is determined by the Model.
Although there are no specific MVC frameworks for Windows Forms, it's possible to make crude ones manually, or you could go have a look at the (now retired) Composite Application Block to get an idea about how this can be done (although the CAB is perhaps too complicated for most people's tastes). There are more elegant options available today, but they involve WPF.
In any case, instead of injecting your dependencies into your Views, inject them into Controllers, and have the Controllers instantiate and correctly populate the Views (your Controls).
In this way, you can keep your Controls free of DI concerns, as they should be.
I think the question is what DI tool can you use to get dependency injection to work with windows forms. Everyone does the MVC example because it's easy to implement(the same example if floating around the we as if it were new and original). If you have an answer for doing it using winforms or even WPF - that would be helpful.
This answer here basically says - in any case, I don't know so inject them into controllers and populate the views - really? Back to the MVC? Again - winforms.