I'm looking for dock layout engine for angularjs written in typescript. I found Dockspawn but it is written in DART and it's not compatible with the rest of my project. Does somebody know any dock layout engine (even paid ones) for angularjs in typescript?
I think your real problem is that dockspawn was abandoned. This is something I built at my company (which, sorry, we don't sell software)and it turns out that Angular is the worst thing you could use to build a layout engine like this.
Managing scope chains among components that are constantly changing positions, opening/closing, resizing, and floating is entirely too complicated for this type of project. You will end up with 15 step bug reports everywhere, and unless you have a perfect algorithm set in place before ever developing anything you will end up spending weeks re-writing code.
Solution (and not the one you want to hear): drop it. Web design is meant for developing pages within the browser, not for developing windows with tabs within your browser window which is full of tabs. The control and flexibility is very nice, but there is always a way to provide the user with just as much control by setting up panels on the page in the positions in which they will be consistently used the most.
Sooner or later someone will develop what you are looking for and release it, but it probably won't be in Angular and it's definitely going to cost money.
You should be able to use Dockspawn because at runtime DART is JavaScript, so as TypeScript. You just need to find a way to make TypeScript aware of Dockspawn and you can do that using a Type definition file.
The types definition file for Dockspawn is available online.
You can install this kind of files using a tool known as tsd. You can find a basic example here.
Related
I have few queries on selecting Ionic framework for our Hybrid app project. Since I have not used Ionic before, few queries may seem idiotic. But i would request all to share their thoughts.
Q1. How easy it is to customize any ionic components as per project requirement in both JavaScript and CSS level?
Q2. How much overhead ionic components create in terms of DOM, Memory usage?
Q3. In case of collection-repeat, say i want to display 10 items out of 1000 items at a time. So at any point in time only say, will there be only 10 divs and will only new data be injected in the previous created divs?
Q4. Say, I have selected Ionic for our project but don't need all the UI or other components in it. So does Ionic gives the flexibility to exclude those components from the framework itself and use the rest?
Q5. How easy it is to include an external library into Ionic if required?
Q6. How easy to debug and Ionic app and the tools available?
Q1. Since Ionic is based on SCSS, it's really easy to customize the visual aspects. I did a video about working with scss and Ionic. As for the javascript side of things, if you know how to work with directives, you should be good.
Q2. Ionic aims to the keep the DOM nice and lean, and not change the DOM like you would with jQuery. As far as memory usage, that really depends on the code you write. You still need to write good code to make sure there aren't memory leaks any where.
Q3. Collection-Repeat doesn't really work that way. Plus when you start dealing with different screen heights, it's not going to be easy to deal with. The best why that we've come up with to deal with that is to just render how ever many it will take to fill the view.
Q4. At the moment no, if you start a project with the CLI, you get the whole bundle. Down the road we're thinking about breaking things into external components, but it's not set up yet.
Q5. It's Angular, so if you have another angular directive that you want to include, the process is really simple. Just include the script tag and inject the module as a dependency. If it's not an angular module, then it's a bit more work to wrap it in a directive, but there are plenty of tutorials out there to help.
Q6. The best thing to remember is that we're dealing with a webview, so you can do a lot of debugging right from chrome on desktop. If you need more debugging once you're on a device, iOS lets you debug right from safari on desktop, and android 4.4+ let's you debug app on a device with chrome.
I'm really enjoying learning to use AngularJS. Now I'm looking for components I can use with it. I've been looking at Angular-UI components but I'd like to know if it's possible to use the nice, supercharged components in ExtJS. Does anyone have experience with this? Any hints or tips or Angular directive libraries?
The company I work for is making a similar move. We currently rely heavily on an older version (3.x) of ExtJS, and the effort to upgrade to the current (5.0) version is at least equal to the effort required to move to angular.
To answer the question (to the best of my limited knowledge):
They can exist together in the same JS application.
Can you use UI elements of ExtJs with Angular?
You can put angular in control of markup via HTML templates in Ext.
Is this a wise idea?
Probably not.
Why would I consider doing this?
I need absolute control over the markup and don't care about possible page load issues
I need to serialize or de-serialize in some special way that Ext doesn't innately provide
I need to do something special like pub/sub (still totally possible with Ext)
In our case, it is a proof of concept for a few modals. If I am biased, I am biased in the direction of ExtJs (which is a huge statement given my background). The more exposure I have to ExtJS, the more I personally like it. I've used several frameworks in the past like Ember, Backbone, KnockoutJs and AngularJs and they are excellent tools that are reaching a level of maturity that makes them excellent choices. That said, they don't follow the same development model/pattern that ExtJs does, and I don't think a direct compare is fair to either side.
It would be almost like comparing Ext to Node (silly, I know).
If your project requires some special functionality that you don't believe is possible in Ext, you are probably like me and have limited experience with it. If you have a lot of experience with Ext, and want to try what we are trying, I say go for it. The single downfall of Ext is the size of the built package that is delivered. Another small framework isn't going to help that, but it also isn't going to cause more pain.
In the end, for me, I just love JS and expanding my knowledge of how things work now and in the future.
For the post above asking about the lack of traction for Ext: the answer is simple... it's not free, and thus not an option for many of us who aren't writing commercial software that fits well with the license.
In our AngularJS app at work, we have integrated a 3rd party ExtJS app with it, not for its UI components though. We open certain popups of that app based on user input and when the user commits data in the popup, we respond to ExtJs events to refresh our app. AngularJS is flexible enough to integrate with any other Javascript code/libraries as long as the library has public events to respond to. I would recommend going through the Directive and scope documentation on how to effectively create directives and respond to scope events.
Personally I do not feel ExtJS and AngularJS would be needed together, unless you are forced to use it like me. There is http://angular-ui.github.io/ that brings in a lot to the table. Again any given JQuery plugin can be integrated using directives, filters etc in AngularJS. So you may want to investigate into that before trying to bother with ExtJS.
Why do you need AngularJS anyway if you have ExtJS? I agree learning Ext can be somewhat difficult though once you've bitten through it there is nothing better at the moment. The only disadvantage is the heavier footprint but who cares? It's not like it's causing any problems... We use nothing but ExtJS at work and the progress in our apps is amazing. It integrates seamlessly with Spring MVC. We don't need to hack in HTML directly which I consider more of an advantage than a disadvantage: no more writing tags, no more open/close tag issues, you can still use css and Ext handles any browser incompatibilities so what else do you need more?? Angular is just the new kid on the block but in total it can not (yet) compete with ExtJS. It doesn't even com close. Just my 2$.
Sencha is planning to add support in the framework. Please find the link at the bottom for reference:
At SenchaCon in Las Vegas on November 7-9 2016, Sencha will be introducing the ability to use Ext JS components, layouts, and themes within an Angular 2 application, which we are currently calling the Ext JS Bridge to Angular 2 (also known as ‘The Bridge’).
https://www.sencha.com/blog/first-look-ext-js-bridge-to-angular-2/
We are working on a Mind map based webapp as our final year college project. It will be a website where users will be able to create mind maps collaboratively. The user interface will be very similar to what https://bubbl.us/beta/ and hxxp://www.mindmeister.com/ have.
In a nutshell, the users will have access to whiteboard and drawing tools to create mind maps on a whiteboard. The changes made by one user will be visible to other session users. e.g. A session has three users A, B and C. If A changes mind map, it will be visible on whiteboards of B and C.
We were considering Flex, Openlaszlo few days ago but having limited time (about 3 months) for project completion, we binned those. For Flex we will have to learn Actionscript3 and for Openlaszlo there is no IDE support. So both of them won't be good choices.
We have shortlisted Silverlight and Vaadin frameworks as viable choices but we are confused as we don't have any experience with either of them. We need to take these points into consideration while selecting a framework:
Time frame for project - about 3 months, give or take 2-3 weeks
Learning curve for framework - should be easy (Very relative term indeed..In the context, we are familiar with VB6, PHP, Javascript and Core Java)
Necessary graphics related features supported - such as whiteboard, drag-drop widgets, animations(need not be fancy stuff) etc.
Availability of tutorials and good documentation
There are 2 open source mind mapping applications that can be useful for this webapp.
Silverlight - hxxp://silverdraw.codeplex.com/ (a webapp) - More like a POC design.
Java - hxxp://www.xmind.net/ (a desktop app) - Most of the mindmapping features we need are present. If we use Vaadin, we can re-use some code which is a huge plus point.
We are open to other suitable frameworks. Which framework would you choose?
P.S.: Excuse for obscure URLs'. New users are limited to only one hyperlink.
Disclaimer: I'm a member of the Vaadin Team, and do not know Silverlight very well.
I believe both Silverlight and Vaadin would be good candidates for your application, and for both the biggest challenge will be the client-side implementation of the visual mind-map component.
I took a quick look at XMind and it seems to be Swing based, so I'm afraid that the only way to re-use that would be to wrap the mapping component into an applet. You can easily do this with Vaadin, but it will require the Java plugin in the browser.
If you consider implementing the mindmap component without plugins, you have the following options:
Use the Vaadin core components (eg. the Tree, live example here) to visualize the mind map. Vaadin supports drag & drop, so this would be very fast to implement, and you would need to work with only server side Java stuff.
Create a HTML5 component with Vaadin integration for the mind-map. You can do this with the HTML5 canvas, and wrapping it in a Vaadin component is easy, but it'll require that you code the component with GWT. There are several examples on how to manipulate the canvas with Vaadin and GWT.
Create a SVG component with Vaadin integration for the mind-map. As far as I know SVG supports interactive stuff a little better than Canvas, and there are examples on how to interact with SVG using GWT and Vaadin. Note that the support for SVG is lacking especially with the older IE versions.
All of these options are feasible to implement within your timeframe (depending on what extra functionality you want). The first option is by far the easiest to do, but it might not be fancy enough for your requirements.
We have strived to make Vaadin as easy to learn and use as possible, and I daresay that our documentation is very good. In addition we have a very lively community filled with helpful experts. If you need more information on Vaadin just come over to our forums and we'll help you out.
You are kind off answering your own question. Use vaadin it will be a little extra work but then your saving huge amount of time on the mindmap coding.
Ext JS is a nice framework for web UI, but I found that building and putting stuff together takes a long time and painfully slow.
This might be a general problem when working with JavaScript, but does anybody have any way to speed things up?
What can I use? Better IDE with good JavaScript suppport? GUI designers? Code generators?
I need some way to speed up common things like building grids and forms but yet let me do complex things like creating custom components easily.
I'm using ASP.NET MVC. Coolite seems nice at first, but I feel that I'll be having trouble when creating any custom components later on.
There's always Ext GWT, which lets you use Eclipse tooling (and all of the advantages that gives you, such as refactoring, swift code navigation, etc.) to create your Ext/JavaScript app.
When you download the ExtJs library, you find lot of sample applications for common requirements like Grid panel, forms, form elements etc.
Regarding IDEs, you dont find mature productive tools, but check the below link and wish it could be of help to you
http://www.extjs.com/blog/2008/02/01/ides-plugins-and-tools-for-ext-js-20/
But if you really wish to develop custom components, you need to get through knowledge,start approaching with ExtJs-provided sample apps.
If you want to get faster at anything, practice it until you fully understand how it works and how to make it do what you want. If you are just starting out, why would expect to be able to work as quickly as you do when you are working on something that you are very familiar with?
Things I use to make ExtJS less painful
Chrome, for it's developer tools, or Firefox with Firebug.
snipMate: snippets for Vim, so I can quickly produce boiler plate code for classes.
JSLint as a command line tool. Especially good for detecting rogue commas.
Sencha forums.
ExtJS IRC chat (Server: irc.freenode.net Room: #extjs).
API documentation.
Sencha and Saki's ExtJS examples.
Beer.
ExtJS is building a designer right know so you can look forward it, the only problem I think is not gonna be free.
you can see a video demo there, in term of release date I think this is due to the first quarter of this year.
I say learn the framework. But to develop apps, I use IntelliJ IDEA, which has partial code completion, etc. It costs money though.
Once you have some practice and understanding of how ExtJS works, you'll get faster at it. By using the examples for reference, and building up my application in small pieces, I've gotten much better (and faster) at developing stuff with ExtJS. A great way to get started is to find an example (or two) that kind of do what you need, and modify (or combine) them to see how they work together.
Couple of year ago I when to work for company as web developer. It has my first Sirius web development job, (ASPx/C#) so it has very exciting and I learned a lot about that world, from the developer point of view.
In that group we had a concept for the pages where loaded in the page UC’s (User controls), I don’t know if it’s the same in every web development team with every language, I’ll assume it is so.
The contract ended and I came back to develop win32 “winForm” application.
But since them I have tried to apply the same principle for my win32 development I learn there, meaning having bunch of UC’s (Visual User controls) that I load in the form.
They are regular visual components, not loaded in the toolbox, code is available in the project, but the component is not developed in the form, they are loaded there.
I would like to know opinions about this approach, what other are doing similar or better to this And improvements that can help us to speed up development and increase code reuse, because that is what this is all about.
If you're using the layout components in Winforms, this might be an acceptable approach although I think the thing that distinguishes the web and Windows Forms (note: NOT WPF!) is that in the former you do a lot of "compositing" which is why the UserControl concept is so useful whereas in the latter you operate on very sophisticated controls (e.g. 3rd party - in my last gig we used an incredible grid control via a small company called Infralution)
The main problem I would see is with layouts since the rendering model is a little different than the web. I know nothing about your application but if it "works" that is what is most important. I assume in this case you use things like the FlowLayoutPanel and the TableLayoutPanel properly.
If you want to go a more canonical route, take a look beyond simply creating components at how you can use the inheritance model to composite your application in a more robust way - having a base Form class that has containers for where your "UserControl" type components go and then using some kind of interface based dependency injection to swap them out while the application is running.
Finally, take a look at some of the open source Windows Forms applications out there to see if you're being too hard on yourself since common UI and reusable components are a goal in every application. Even though I've always thought Microsoft's Patterns & Practices stuff teetered towards being bloated, there are some good ideas and you should study some of the approaches of the Composite UI Application Block they put out.
Okay, not finally, there's one more thing I'd like to add: take a long hard look at WPF which will bring back a lot of the concepts from your web development days and give you that kind of power in a desktop application.