How can i install jquery and jqueryUI files in XPages? - javascript

I have downloaded jquery and jquery ui files and i want to import them in my server as a "global library".
I want to add my files on the server so as to be globally visible and import them in any XPage.
( I dont want to reference them from the cdn with http, or add the files from my computer as a resource each time or add them only in a specific theme. )
For example: i could place the files in \domino\js\jQuery and \domino\js\jQueryUI or any other folder in the file system and then add them from any XPage from resources tab.
Can i do it somehow?
Can it be even better, for example:
not even add them as a resource and directly use the jquery code
add them as an osgi plugin

If OSGI plugin is an option then try to use the Bootstrap4XPages plugin. It contains jquery libs as well. Is that a Domino 9 server?

Copy the files to WebContent in package explorer.
Reference them in the headTag of the page... something like:
<xp:headTag tagName="script">
<xp:this.attributes>
<xp:parameter name="type" value="text/javascript" />
<xp:parameter name="src" value="jquery-1.11.1.min.js" />
</xp:this.attributes>
</xp:headTag>
Make sure resource aggregation is turned ON.

Related

Deploy web application

I am new in web deploying. Now I have to manage windows server and every month I need to deploy new version of applications.
I have trouble with javascript. In almost every version of web applications is changed some javascript file (all javascript files are bundled in one minify javascript file).
Most of users use google chrome. Trouble is browser cacheds styles a javascript files. After deploy new version is loaded in browser old version of javascript file.
Does exists any solution how to resolve this problem programmatically in application or some solution after deploy? In best case withou user colaboration (for example refresh cache by CTRL+R)? What is the best practice?
Our application is developed as .NET CORE 2 Razor Pages web application.
Thanks for advice
Use the tag helpers for script and style files, which take an additional attribute append-version, which appends a new query string value each time there are changes in the files.
<link href="/styles/site.css" append-version="true" />
<script src="/scripts/site.js" append-version="true"></script>
If you are using normal html, css, js project then you can add versioning in your js and css libraries and update your index.html with updated version.
Or if you are using node js, react js, angular js then you can use index.ejs instead of index.html and you can add hash code with your js and css libraries like
script1.1ebecec8538d52c8f844.js
script2.2e765bd6680f0c925e8a.js
style1.1ebecec8538d52c8f844.css
style2.2e765bd6680f0c925e8a.css
Or you can also use CI/CD for npm project.
you can make sure that any updates you’ve made to your bundle files will take place immediately for all users with using versioned names like:
<link rel="stylesheet" href="style.css?v=1.1">
The browser will view a file name of style.css as different from a file name of style.css?v=1.1. It also works for script files as well:
<script src="main.bundle.js?version=1.0.1"></script>
But then If you have one giant file, and change one line of code, the user must download that entire file again. Think of a solution, to creating more smaller files, like with splitting out npm packages used in your solution from your own code, to have better release-flow.
If this is about .css and .js changes, one way is to to "cache busting" is by appending something like "_versionNo" to the file name for each release. For example:
script_1.0.css // This is the URL for release 1.0
script_1.1.css // This is the URL for release 1.1
script_1.2.css // etc.
Or alternatively do it after the file name:
script.css?v=1.0 // This is the URL for release 1.0
script.css?v=1.1 // This is the URL for release 1.1
script.css?v=1.2 // etc.
Please check link
Link

How to reduce JavaScript Files in Magento?

I am new to Magento but work in webdev for several years now.
My goal is to optimise an existing Magento installation in terms of speed.
Looking at all the JS and CSS files used within this installation the first thing I aim for is to combine those file or better reduce the number of modules used. I am aware of the "combine files" function within the config menu, but that does lead to conflicts between jQuery and prototype which is why I am trying to first get an understanding of what types of frameworks/modules etc are used.
This is a list of all JS-files required by the homepage of this installation:
jquery-1.12.3.min.js
prototype.js
ccard.js
validation.js
builder.js
effects.js
dragdrop.js
controls.js
slider.js
js.js
form.js
script.js
menu.js
translate.js
cookies.js
func.js
jquery.easing.1.3.min.js
efects.js
jquery-1.11.0.min.js
jquery-migrate-1.2.1.min.js
jquery.noconflict.js
swiper.min.js
jquery.easing.js
jquery.scrollTo.min.js
jquery.global.js
remodal.min.js
jquery.themepunch.tools.min.js
jquery.themepunch.revolution.min.js
easyzoom.js
ios-orientationchange-fix.js
jquery.swipebox.min.js
jquery.themepunch.plugins.min.js
jquery.themepunch.revolution.js
jquery.slider.js
jquery.selectbox.js
jquery.bxslider.min.js
jquery.tweet.js
cookieconsent.min.js
gtm.js?id=GTM-5W7V6F
analytics.js
ec.js
What would be the best approach to clean up this list in order to keep functionality while reducing request and load?
For starters i see that you load 2 versions of jQuery
jquery-1.12.3.min.js and jquery.easing.1.3.min.js
What i did was combine the javascript files with the config settings like you said and use the jQuery.noConflict() https://api.jquery.com/jquery.noconflict/. Don't use the $ (dollar) sign to use jQuery but write it fully because prototype also uses it and it creates problems sometimes. There will be some problems which you should try to fix. Sometimes it's just adding a ; to the end of the file or function.
I then tried to figure out what code was needed and what wasn't so i could remove some of it.
Magento Inbuilt provide this things
Login admin panel
goto System->configuration->Advanced->Developer->JavaScript Settings and set Merge JavaScript Files to yes
You can do same for css and you will see very few request in your web page

How can I locate TinyMCE plugins in a separate directory?

For the most part, I use the default TinyMCE plugins.
Every now and then, I make my own for my own specific needs.
To do so, I go to the tinymce directory, then the plugin directory, and then one of the individual plugin directories, and modify the script as necessary.
All is good except my memory (not my computer's but my head's). 4 months goes by, and I decide to upgrade to a newer version or something. Which ones did I change? I have no idea!
I would like to create my own directory called myTinyMCE_Plugins, and not even include it in the tinymce directory. That way I just need to remember to move my specific plugins over.
But when configuring TinyMCE, I can add the plugin name, but don't seem to be able to specify the plugin's path. Yes, I can use symbolic links, but this too is not ideal.
How can I locate TinyMCE plugins in a separate directory?
tinymce.init({
plugins: ["someDefaultPlugin someCustomPlugin"],
toolbar: "someDefaultPlugin | someCustomPlugin"
});
After asking the question, I found http://www.tinymce.com/wiki.php/Tutorials:Creating_a_plugin.
You can also have the plugin in any location you want by loading the plugin.js/plugin.min.js files directrly after the tinymce.js/tinymce.min.js.
Example of loading the plugin from another url
<script src="/tinymce/js/tinymce.min.js"></script>
<script src="/scripts/my.tinymce.plugin.js"></script>
<script>
tinymce.init({..});
</script>

Edit javascript associated file of primefaces schedule component

I'm using schedule component of Primefaces 2.2.1. If you decompress primefaces-2.2.1.jar included in your project in /lib, you see a .js file and a .css file for each component of primefaces. In my case, I have schedule.js and schedule.css (placed at primefaces-2.2.1\META-INF\resources\primefaces\schedule). The point is that I have to modify schedule.js to add some functionality. So, I decompress primefaces-2.2.1.jar, modify schedule.js, compress everything again to primefaces-2.2.1.jar an place it again in /lib. Then I run the application and this message is showed to me:
javax.servlet.ServletException: Error loading theme, cannot find "themes/sam/theme.css" resource of "primefaces" library
I can see that the file theme.css is present in primefaces-2.2.1\META-INF\resources\primefaces\themes\sam
And I know that it's possible to change schedule.js and make it work becouse some other user did. You can see it here http://forum.primefaces.org/viewtopic.php?f=3&t=15163&p=80971#p80971
Anybody knows how?
All you have to do is :
1) Install 7-zip
2) Browse the primefaces-2.2.1.jar , copy the relevant js file outside the jar
3) Modify it as you wish
4) Delete the relevant js file from the jar
5) Drag and Drop the modified js file back to the jar
Also , take a look at a similar question :
Customizing event appearance primefaces schedule

Editing jQuery UI Source

I am using the jQuery UI framework, but I'd like to modify the slider control to suit my needs. I only want to make changes in that one file. What is the best way to include those changes in my project? Currently I have it all wrapped up in jquery-ui-1.8.8.custom.min.js.
Options include:
Edit the minified source directly. Seems like a huge pain.
Download all the source files, put them in my /js directory, and add <script> tags for each one. Ugh.
Try to make the changes from outside the framework, using my own script. I'm not sure this would work.
Somehow use the one file I modify + the rest of the framework in the single minified file?
Download the entire framework, modify the file I want, then compress it into a single file. (But is then debugging/testing will require <script> tags for all the source files, right?) (How do I minify the code?)
If I were to be including <script> tags for every source file, could I only use the ones I'm interested in, and their explicitly stated dependencies? Or is this asking for trouble? (Update: Looks like this works.)
Other ideas? Is (4) possible? What is the best approach here?
Update: I see that the minified file is of the form:
/***
* UI Slider
*/
minifiedCode();
/***
* UI Autocomplete
*/
minifiedCode();
/***
* UI Spinner
*/
minifiedCode();
What if I comment out the Slider code, then include my own non-minified, altered Slider file? Can minified and non-minified code work together?
Depending on the changes - if you are overriding a method, you can put it in a separate js file and load that file after you load jQuery - it will override the method functionality.

Categories