Widget encapsulation in JavaScript frameworks - javascript

I am looking for a JavaScript framework that provides encapsulation of UI widgets, and allows the developer to define composite widgets. In particular, I need to be able to take a widget, clone it, and place it somewhere in the document, and the widget should take care of managing any subwidgets and of keeping matching DOM objects and JavaScript object in sync. I want to be able to take a multi-item form, where each item contains multiple widgets, and tell it to add or remove an item, without having to write specific code for each form, handle the subwidgets explicitly, reinstalling event handlers, etc..
Is there any JavaScript framework that offers such a feature. If not, which one comes closest? So far I know that jQuery doesn't (its focus is on providing an interface for DOM manipulation, not to encapsulate complex entities).

jQuery's UI Widget Factory provides you methods to create widget classes.
jQuery UI Widgets enforces follow it's coding style. It' provides all that you seek. You can also make your widgets theme-able by making use of ThemeRoller
Refer jQuery UI Developer Guide, Tips for Developing jQuery UI 1.8 Widgets
, Understanding jQuery UI widgets: A tutorial

Related

Where should I place DOM manipulation in AngularJS Components?

I am using angular 1.5.x to develop a control panel which includes, among other things, a grid editor (such as bootstrap).
I am using jQuery UI for differents interactions that the user can make to edit the grid (as dragabble, sortable, etc ...)
I understand that I must create components for different parts of the editor as the Workspace and the different toolbars.
I do not understand is where I should place DOM manipulation.
The components do not replace directives according to documentation. Should I include directives within templates components?
The only place you should be manipulating the DOM is in $compile.
Take a look at AngularUI as a replacement for JQueryUI

Use ExtJs and JQuery together in one application?

we have a big ExtJS (still ExtJs 2) application, which provides windows explorer like functionality on a Java EE server.
We now evaluate implementing a new functionality; we could base this functionality on a jQuery plug in.
Is it recommended to use jQuery and ExtJs in one application?
Or will I have to deal with side effects occurring?
You will not have to deal with any side effect. The only problems I ever ran into when I did this is if I tried to operate on elements that Extjs relied on being left alone. Just make sure that when you start operating using jQuery that you're working inside a div that extjs doesn't plan to mess with. The best way to do this is to inherit from Ext.Component and then operate inside the div it provides. Ext doesn't do anything inside this div so you should be ok. You can also tap into the resize functionality if you need to, though this is not really necessary.
My company does so with no problems on a fairly large Apache/Catalyst site. We do use jQuery() rather than $() due to some old Prototype stuff on our site.
More: Blueprint CSS Extjs and JQuery in the same page, best way to make them coexist without conflict
keep jQuery within the jQuery namespace http://api.jquery.com/jQuery.noConflict/
Use it like so: $.noConflict();
jQuery only adds a single object (jQuery) to the window's context so you won't have any conflicts.
PROBLEM: Some third party libraries for jquery may rely on static webpage organization. As ExtJS components can be added to webpage dynamically - they will have no functions from third party libraries.
SOLUTION: You will have to run this library's script after component is added (use afterrender event, for example). Then you can call these functions on this ext component.

Jquery Widget vs Jquery Plugin, Differences, When to use which?

What are the main differences between a Jquery Widget and a Jquery Plugin.
Mainly:
What purposes do they serve
Is one better than another or do they both have their place in the jquery world
What is an example where I would want to use one over another
What is an example if any where either would be a fine solution
What is an example of a widely used widget and a widely used plugin
I've never heard of a jQuery widget. I imagine some people might use the term to describe a... widget... that has been made with jQuery. Certainly there are widgets in jQuery UI, for example. It's an odd question.
A widget is a widget (always includes a visual element, sometimes includes reusable functionality), and can be a subset of a plugin or a plugin in and of itself.
A plugin extends jQuery directly and may or may not have a visual component.
Difference between jQuery Widget and plugin is state.
please see details on it here

jQuery: Plain HTML/CSS with core jQuery or jQuery UI for a blog?

I'm about to implement a blog, and I'm pretty sure I want to go with jQuery, because I really like it.
However, when I last did jQuery, I just did plain HTML/CSS and then improved the user experience with what jQuery has to offer. Meanwhile, jQuery UI has been released, and it looks like a full-fledged user interface framework like Ext JS.
Can I benefit from jQuery UI with a rather simple website like this, or is it more geared towards web applications like GMail?
jQuery UI is quite large and seems to have lots and lots of CSS in their skins. I'm a bit worried that I would have to write/adjust tons of CSS to make the blog look like I want it to. If I did plain HTML/CSS, I would have fine-grained control over the appereance.
Edit: I'll stress again that I'm specifically wondering whether jQuery UI is intended for and useful for a simple website like a blog. It is no doubt useful for more sophisticated web applications.
Edit 2: Thanks for all your answers, too bad I couldn't accept more than one. By now I realised that jQuery UI is not like I expected a full-fledged web application framework, but rather a bunch of useful utilities on top of jQuery. I think I'll use it, if only for Draggable, Droppable and Selectable.
You don't necessarily need to write loads of CSS if you don't like the supplied styles.
The jQuery UI ThemeRoller is a very good web-based GUI for customising the look of the widgets. It then allows you to download your own customised (and minified) .css and .js files containing just the widgets you need.
I suggest that you should have a play with that first and see if you can make the demo widgets look how you'd like them before making any decision.
You can have both... I have! Where I am using widgets (datepicker) etc, I use jquery ui, besides visit : http://jqueryui.com/themeroller/ and you can customize the colours quite easily. The UI themes are recommended strongly if you use the widgets as the widgets rely on the css defined therein to move things around, for display and selection, handling rezise of widgets.
You can always build your site using html + css then add the ui theme later, as you said it will increase the user experience greatly... besides we always end up using 1 or 2 features then extend or find other suitable plugins.
As always, the answer is 'it depends'.
More specifically though, it depends on what kind of a UI you're planning on. If you find yourself coding functionality that's already there in jq UI go ahead and use it. They've got a handy theme roller plugin which will allow you to customize the skin to perfectly match the look of your site, so that is a non issue.
You might also want to include it all through a CDN (offered by google or MS) so that your site doesn't get slow downloading the (relatively) heavy initial payload.

ExtJS and jQuery in ASP.NET

I've seen some posts where jQuery has been favored vs ExtJS. I haven't looked at jQuery in detail, but from what I read so far, jQuery doesn't provide the kind of UI which comes with ExtJS. Am I correct? Why would some of you prefer jQuery in ASP.NET?
Thanks
Why not use both? ExtJS does allow you to use jQuery as well. In fact, you can easily configure ExtJS to use jQuery for its core functionality. I've done this before and it works quite well.
This way you can happily use the best of both worlds.
http://extjs.com/forum/showthread.php?t=29702&highlight=jquery
There are two schools of javascript frameworks, ones that focus on widgets (Yui, ext, etc) , and ones that focus on behavior (jquery, prototype, moo, etc)
JQuery just makes life easier to build dynamic, sexy sites. If you are just doing system.draggy.droppy asp development, you can ignore both, since you probably aren't really touching javascript at all. But if you do use javascript, it is worth your time to learn one of the frameworks that are out there, and jquery is currently the most popular.
In fact Ext provides a one-stop-shop.
It has a solid foundation which provides behaviour. Event pub/sub, effects, DOM manipulation etc. And it can provide these through its own standalone foundation, OR by wrapping a foundation library of your choice (like jQuery)
And then on TOP of that cross-library foundation layer, it provides a unified set of Components all stemming from one Component base class. It provides managed screen layout which responds to browser geometry changes, and managed lifecycle management of the Components.
There's nothing out there like it.
jQuery does have a widgets library - it's fairly new, but pretty cool. It can only get better!
jQuery UI
iam experienced on extjs and fresher for jquery.jquery is very light weight than extjs.
About JQUERY:
easy to use, fast, great DOM manipulation, good effects. Great window.onLoad handler.
About EXTJS:
Ivery very extensive, great DOM manipulation, solid effects. The fastest to get things done when puzzling out on the commandline.

Categories