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.
Related
We have an application to make carrusel images and we are using an iframe to insert in web pages.
We want to remove the iframe, and we have all ready to work just with one div, something like this is that our users will insert in their pages:
<script src="https://www.example.com/mycustom-carrusel.min.js"></script>
<div id="custom-unique-id" style="width:100%;height:300px;"></div>
The mycustom-carrusel.min.js has all our code minified with gulp.
Our javascript will call our API and paint all the necessary inside the div, the problem is that we are using some libraries, like jQuery and others.
We want to prevent the conflict with for example jQuery or whatever other library that could conflict with the web page of the user.
What is the best technology to implement this and prevent any possible conflict with our code?
Thanks!
Isolation of styles and scripts from the page the widget is embedded to is exactly why iframe is typically used. Just keep using iframe.
In some future (once implemented in all popular browsers), instead of iframe, you could use the all CSS property with a value of unset, initial, or revert, to reset all inherited styles for your widget element and its nested elements and then safely apply your own styles.
For JS libraries in general, there is probably no universal way to prevent conflicts, but specifically for jQuery, you could use jQuery.noConflict(true) to free both $ and jQuery variables to make it possible for other libraries (including different versions of jQuery itself) to reuse these variables, but only as long as you are able to include your jQuery version and call jQuery.noConflict(true) before the page’s own jQuery version (which is unlikely). Alternatively, just get rid of using libraries at all (libraries like jQuery are currently actually unneeded in most cases), and instead just use your own vanilla-JS script or, if you really can’t drop using a library, try to wrap the code of the library (together with your own code that uses the library) in a self-executing anonymous function to prevent variables it defines from leaking to the global namespace.
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
I'm interested in using only some of the components of jQuery mobile (specifically, the tap event handlers and datepicker). What's the best way to make use of the library without it "taking over" the layout and behavior my mobile web app?
modifying DOM is JQM's main feature. You have to cripple it hard.
Get the repo from git, remove all plugins from manifest, get to the code and find the .page method/widget and remove all the code (or leave some bits if you need to get something working - I haven't tried that).
Then run make and it will create a stripped jquery.mobile.min.js for you
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
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.