We use GWT 2.3.0 for our web applications.
We have started to use gwtquery for some of our features.
I would like to know if it is possible to call a jquery function within a js file from gwtquery.
gwtquery aka gQuery is a completely re-written implementation of the jquery for java.
One of the goal of gQuery is to have most of the features of jquery (css selectors, dom manipulation, effects, promises, ajax, etc) but without having to import the external jquery.js library, benefiting of all goodness of gwt (optimization, performance, dead code removal etc.).
In consequence, gQuery and jQuery cannot share plugins, so if you are using jquery.js in your app because you are using a jquery-plugin you still have to import jquery in your project.
In summary, if you wanted to use the syntax of the jquery but in gwt, you dont need to import jquery not call external js methods from java.
import static com.google.gwt.query.client.GQuery.*;
public void onModuleLoad() {
//add a click handler on the button
$("button").click(new Function(){
public void f() {
//display the text with effects and animate its background color
$("#text").as(Effects)
.clipDown()
.animate("backgroundColor: 'yellow'", 500)
.delay(1000)
.animate("backgroundColor: '#fff'", 1500);
}
});
}
Otherwise, if you don't use gquery and want to import jquery in your page, in order to call some methods from gwt, you must write jsni methods:
native void enhanceMyButton() /*-{
$("button").click(function() {
//display the text with effects and animate its background color
$("#text").as(Effects)
.clipDown()
.animate("backgroundColor: 'yellow'", 500)
.delay(1000)
.animate("backgroundColor: '#fff'", 1500);
});
}-*/;
Finally, in gwtquery, we are working on exposing gquery methods to integrate pure jquery code. This work is being done on a module we have called jsQuery, and the main goals are: that designers could add jquery code in html or ui.xml without importing the external jquery.js, and it can be a fast way to port a jquery plugin to gquery.
FYI: I posted here some of the benefits of using gquery as a complement of gwt
Related
I'm making an app with react native, actually I have the screens with classes :
class registerScreen extends Component {
But now I'll like to use "useEffect" hook but see I cannot with classes so I have to migrate them to functions...something like...
const registerScreen = () => {
which is the correct or best practice method? What about the constructor and componentDidMount(), etc...
In the other hand it's possible to use the "useEffect" hook on a screen made with a class? How?
Thanks
React Native Official documents says if you're going to develop a new react native app use functional component and hooks instead using class component.If you already developed your app using class components it's okay,
useEffect() is same as like compnentDidMount(). So In there you call axios or fetch request, load asnyc storage data etc.
You can't use useEffect() in your class components you can use componentWillMount(), componentDidUpdate(), etc.
please refer following official document for more info,
https://reactnative.dev/docs/getting-started
I am creating an application using Ionic2 with angular2 and Typescript2. the main idea of the application is to detect the user location.
and due to the need to make sure that this data is correct we need to make sure that users don't fake their locations.
after a lot of search I found the following answer Detect or avoid mock GPS location but this answer can't help me a lot because this plugin uses javascript not typescript and i am facing a problem in using it
So, Is it possible to check or preventing a user from faking their GPS location?
Typescript IS JavaScript.
You have three options to operate the plugin and let typescript compile
Declare it as a known javascript var
declare var plugins;
plugins.fakeLocation.check(function(IsEnabledMockLocations){
console.log(IsEnabledMockLocations);
});
Writing a custom typing for it
declare namespace plugins {
export namespace fakeLocation {
export function check(callback: Function): void;
}
}
Use any casting
(<any>window).plugins.fakeLocation.check(function(IsEnabledMockLocations){
console.log(IsEnabledMockLocations);
});
I've been looking around, and short of writing a basic one myself, I couldn't find a library that already exists for Ember that displays a small loading line at the top of the page that completes when all the http requests have completed for a page transition (whether that be images loading, JSON being fetched etc).
There's this for Angular: http://chieffancypants.github.io/angular-loading-bar/, but wondering if Ember has any options already.
Cheers.
EDIT: I've found this article as well about a jQuery plugin, which I imagine could be adapted: http://tutorialzine.com/2013/09/quick-tip-progress-bar/. Still keen on hearing if anyone knows of anything already integrated into the Ember request lifecycle though.
You can use fantastic javascript component NProgress (http://ricostacruz.com/nprogress)
and then you can initialize it in Application.ready event using jQuery like this
window.App.ready = function () {
$(document).ajaxStart(function () {
NProgress.start();
});
$(document).ajaxStop(function () {
NProgress.done();
});
};
I am building an Ember.js app and I need to do some additional setup after everything is rendered/loaded.
Is there a way to get such a callback? Thanks!
There are also several functions defined on Views that can be overloaded and which will be called automatically. These include willInsertElement(), didInsertElement(), afterRender(), etc.
In particular I find didInsertElement() a useful time to run code that in a regular object-oriented system would be run in the constructor.
You can use the ready property of Ember.Application.
example from http://awardwinningfjords.com/2011/12/27/emberjs-collections.html:
// Setup a global namespace for our code.
Twitter = Em.Application.create({
// When everything is loaded.
ready: function() {
// Start polling Twitter
setInterval(function() {
Twitter.searchResults.refresh();
}, 2000);
// The default search is empty, let's find some cats.
Twitter.searchResults.set("query", "cats");
// Call the superclass's `ready` method.
this._super();
}
});
LazyBoy's answer is what you want to do, but it will work differently than you think. The phrasing of your question highlights an interesting point about Ember.
In your question you specified that you wanted a callback after the views were rendered. However, for good 'Ember' style, you should use the 'ready' callback which fires after the application is initialized, but before the views are rendered.
The important conceptual point is that after the callback updates the data-model you should then let Ember update the views.
Letting ember update the view is mostly straightforward. There are some edge cases where it's necessary to use 'didFoo' callbacks to avoid state-transition flickers in the view. (E.g., avoid showing "no items found" for 0.2 seconds.)
If that doesn't work for you, you might also investigate the 'onLoad' callback.
You can use jQuery ajax callbacks for this:
$(document).ajaxStart(function(){ console.log("ajax started")})
$(document).ajaxStop(function(){ console.log("ajax stopped")})
This will work for all ajax requests.
I simply put this into the Application Route
actions: {
loading: function(transition, route) {
this.controllerFor('application').set('isLoading', true);
this.router.on('didTransition', this, function(){
this.controllerFor('application').set('isLoading', false);
});
}
}
And then anywhere in my template I can enable and disable loading stuff using {{#if isLoading}} or I can add special jQuery events inside the actual loading action.
Very simple but effective.
Sitecore.NET 6.4.1 (rev. 111003) , web Forms For Marketers 2.2.0 rev.111104.
My site pages rely heavily on JQuery for, amongst other things, foldout navigation, launching and controlling animations, slideshows etc. and canvas effects of headings. We're using JQuery 1.6.1.
But when I insert a form into an item all the JQuery calls break.
Does Web Forms For Marketers have a JQuery dependency, and if so, can it be changed to use the version we're currently using?
EDIT:
I've found where the problem occurs, though still have no solution.
This is our navigation function (its opening at any rate)
navigation: function () {
$('#myNavElement')...stuff that gets done }
Where this:
$('#myNavElement') should return an element from jQuery.
Instead it's jumping into this function:
function $(element) {
if (arguments.length > 1) {
for (var i = 0, elements = [], length = arguments.length; i < length; i++)
elements.push($(arguments[i]));
return elements;
}
if (Object.isString(element))
element = document.getElementById(element);
return Element.extend(element);
}
From the file /sitecore/shell/controls/lib/prototype/prototype.js which is injected into the body tag by WFFM.
Simply wrap your jQuery in the full jQuery function name. e.g.
jQuery('#myNavElement')
Another approach would be to wrap your entire custom jQuery script in a closure and pass in a local variable for the jQuery shorthand, e.g.
(function($){
// your existing code that used $ in here
})(jQuery);
Web Forms for Marketers only relies on jQuery for the back-end module and not for the front-end.