How to include jQuery from Global Libraries into my page in Intellij IDEA? - intellij-idea

I cannot understand what is the advantages of having jQuery in "Global Libraries" list?
Can I somehow include any javascript Global Library into my html page or should I just copy/paste content of this library to new file in my project and include it manually to html page?

Global libraries are needed for code completion in the web applications when there are no explicit includes in all the pages or when you are editing JS files that have access to other libraries, but there is no way to specify it directly in the script.
Of course you need to have a copy of the library in your project or reference its URL in HTML pages.

Related

What's the difference between static and templates folder under resources in a springboot & thymeleaf project?

I'm new to thymeleaf and springboot.
I create a springboot project with thymeleaf in IntelliJ IDEA with "New Project"->"Spring Initalizr".
Then I get a project whose structure looks like below.
demo
|+-src/main
| +-java
| +-resources
| static
| templates
| application.properties
|-pom.xml
The question is what should I put in static and templates under resources? What's the difference between them?
I guess the .html files that have thymeleaf attributes should be put in templates. How about static html, css and js?
Thanks.
templates folder is a place where you put all the thymeleaf templates. It is a default directory (by default spring will look inside for any templates).
static folder is used for serving web static content, all the css, js, html etc. (also default folder search by spring)
http://docs.spring.io/spring-boot/docs/current/reference/html/boot-features-developing-web-applications.html#boot-features-spring-mvc-static-content
These folders are a way of organizing your files. These static and templates folders have special meaning in a case that it know has become common understanding for organizing your frontend files such as css, js, html etc among developers. In my understanding we should place files like css, js, images that supports your web pages which are not going to change through out your application at runtime. For eg: your design is not going to change which is done in your css file. In templates we should place html files. If you add both html and other files together, it becomes hard to organize your files.

Sitefinity CSS combining in MVC Layouts

In Sitefinity WebForms you have a ResourceLinks control allowing you to combine multiple, but what do you use in MVC layouts?
I'm not sure if the razor helper #Html.StyleSheet will do the job?
Adding all the CSS files to the Global folder in App_Data\Sitefinity\WebsiteTemplates[template_folder]\App_Themes[theme] will automatically add them to the site, but won't combine them.
We're working with Sitefinity 8.x and looking for a definitive way to compress and combine JS and CSS, but the pickings seem slim.
With the move from webforms to mvc, Sitefinity didn't include specifically introduce a new bundler or something so you're left with essentially 2 default options, but they've seemed to have opted for approach #3.
1) Use .less and .sass to pre-process as part of your build process.
So in your theme folder you would have a global.less (or scss or sass) that essentially combines them using the #import directive.
Install a VisualStudio extension like Mad's Kristensen Bundler and Minification VS Extension (previously part of WebEssentials) and then define in the VS settings that it should compile and minify on build.
Then every time you build or publish, your one bundled-and-compressed .min.css will be available for Sitefinity.
2) Second option would be to use default ASP.NET Web Optimization.
Where you define static bundles in VisualStudio and then use these bundles by means of #Styles.Render or #Scripts.Render to output them.
3) Lastly a new way has been added with the new Feather approach, which uses the current fashionable approach of Grunt to bundle and optimize your styles and scripts.
In the /ResourcePackages folder you'll already see a gruntfile.js file which has a task you can run which can then compile (and can be extended to prefix, bundle, minify, etc) your .sass into a .min.css which you can then add to your solution.
A sample can be seen here (https://github.com/Sitefinity/feather-packages/blob/master/Bootstrap/gruntfile.js)
I'd use a combination of the above approach to receive the maximum result with Sitefinity where you use option 1 to have VS build out your core/base CSS and JS and then include them using Web.Optimization.
Any additional page or widget related styles or JS can then be included afterwards manually through the css widget which gets compiled through option number 3.
Once you get more familiar with this new approach you can create and load optimized .css and .js on demand - even using a RequireJS approach to load them depended on the widget dragged and dropped on the page. RequireJS might seem out-dated given the latest gadgets and gizmo's but with v9.0 its still being used by Sitefinity itself to add inline-editing functionality.
Let me know if you need more info on option 3, I'm happy to extend my answer with some code snippets, or sample scripts on how I've tailored them.

Combine all my custom JS into one single file with dojo build

I'm having a hard time trying to set up dojo build in my project.
Basically, I have my js folder with all my custom widgets and components. I simply want to combine all javascript files form js folder into one single file.
dojo sources are located outside this folder. The structure looks similar to this:
/public
/prod
/dojo-1.9
/dijit
/dojo
/dojox
/js
myScript1.js
myScript2.js
Do you have any idea on how should I configure the package.json and profile.js? The documentation doesn't seem to help since all I am getting is an output folder with the same contents as the js folder (no javascript is merged).
You can start by reading this article:
https://dojotoolkit.org/reference-guide/1.10/build/simpleExample.html
It provides a simplified overview of dojo build system.
Additional there is dojo boilerplate with a sample of folder structure and profile.js configuration for quick start here:
https://github.com/csnover/dojo-boilerplate
I definitely suggest you to use the boilerplate as start for your project as it simplify a lot initial configurations.

How to use Free CSS Templates with ASP.NET MVC 4?

I need to use a css template for webpage I am building but I don't know how to use in asp.net mvc4. so How to use CSS Templates with ASP.NET MVC 4 in visual studio 2012 for web application?
It's simple:
Move your css and images into ~/Contents folder.
Move your js files into ~/Scripts folder
Copy and paste your html snippets to cshtml files
On 3rd step you need to port the layout portion of your template to ~/Veiws/Shared/_Layout.cshtml. Here you need to point references to your css and js correctly. For example:
And also you need to be aware that _Layout.cshtml should contain #RenderBody(). That's where all child views will be inserted.
Just found a video with basic demonstration of process: link
It is the same as you use for simpe HTML files. In the solution you can add an existing item and your browse your CSS file which will be added in the Content folder then you have to reference it in the page where it will be used.
If you want to apply all the rules to every page you can reference it in the _Layout.cshtml page which is called before everypage. It is like the container.
You have many options to call it. I will suggest you also reading Bundling and minification in this link which is also interesting to know.
There are Few Steps:
Make Directory inside Content folder in my case mytemplate.
Copy all your template content inside mytemplate folder.
Add new Layout page in View>Shared Folder in my case _mytemplate.cshtml.
open your template Index.html file inside any editor(i.e: Dreamviewer,Notepad etc).
Copy all header stuff from your html file to inside of Header in _mytemplate.cshtml file.
Copy all body stuff Inside of your Index.cshtml to Layout page.
Save your Project by Cntrl+S and Run it in browser. Thats it.

Howto modify Sandcastle presentation style without changing the default installation files

My project uses Sandcastle and Sandcastle Help File Builder to generate documentation.
We're using a customized version of script_manifold.js that persists the user's language preference across pages (the default version resets the language preference with each page).
Currently, the script is located in the Sandcastle\presentation\VS2005\scripts folder.
Is there a way to override this script with a custom version, without having to mess with the Sandcastle installation? That is, can I have a file that is checked into source control along with my source code, and somehow have that file used by SHFB instead of the default Sandcastle one?
Never mind, I found the answer!
In the SHFB project explorer window, you can just create a folder with the same name as the presentation style content you wish to override. This works with any stock content, such as HTML, CSS or JS files. So in my situation, I needed to override the script_manifold.js file which lives in the Scripts folder of the VS2005 presentation style.
So I needed to create a folder called Scripts in my SHFB project, then put my script_manifold.js in that folder.
It all works perfectly. Excellent!