javascript and css libraries

16
JavaScript Libraries JavaScript Makes Things Sexy

Upload: prodigyview

Post on 13-May-2015

614 views

Category:

Technology


1 download

DESCRIPTION

Learn how added an retrieve JavaScript libraries and CSS from PVLibraries in Prodigyview..

TRANSCRIPT

Page 1: Javascript And CSS Libraries

JavaScript Libraries

JavaScript Makes Things Sexy

Page 2: Javascript And CSS Libraries

Overview

Objective

Learn the basics of adding JavaScript and CSS in ProdigyView.

Requirements

Understanding of the DEFINES

Estimated Time

10 Minutes

Page 3: Javascript And CSS Libraries

Follow Along With Code Example

1. Download a copy of the example code at www.prodigyview.com/source.

2. Install the system in an environment you feel comfortable testing in.

3.Proceed to examples/system/Libraries_Javascript.php

Page 4: Javascript And CSS Libraries

Separation of LibrariesProdigyView natively support 5 different file types that can be added to PVLibraries. 1 of them is CSS, and the others are variations of JavaScript and JavaScript Frameworks.

PVLibrariesJavascrip

t

JQuery

Prototype

CSS

Mootools

Page 5: Javascript And CSS Libraries

Queuing Libraries

Add JavaScript files

Add JQuery Files

Add Prototype Files

Add Mootools Files

Add CSS Files

Page 6: Javascript And CSS Libraries

Queued ScriptsQueuing a script does not actually add the script into the code, but creates a reference to that script.

It is up to the developer to tell where that script exist. An easy way of placing the scripts is using the defines discussed in an earlier tutorial.

Page 7: Javascript And CSS Libraries

Adding Open ScriptUnlike the other files that pertain to a certain type, open script is any type of content(JavaScript, meta tags, properties, etc). How you add your content to open script is exactly how it will be outputted later.

1. Explicitly write the full script

2. Add the script to the open script queue

Page 8: Javascript And CSS Libraries

Javascript LibrariesThe first library we are going to pull is the regular JavaScript files added. Technically any kind of JavaScript file can be queued and pulled, but any files queued to the JavaScript queue should be stored in the same location as the PV_JAVASCRIPT define.

1. Pull the queue and return an array

2. Use the PV_JAVASCRIPT to set the location of your script

Page 9: Javascript And CSS Libraries

JQuery Libraries

Similar to how we retrieved the JavaScript libraries, we can also get the queued JQuery files. The JQuery define, PV_JQUERY, should be used in this instance as the location where the file exist.

Page 10: Javascript And CSS Libraries

Prototype Libraries

Our next files to retrieve are the libraries specific to prototype. Prototype libraries used the PV_PROTOTYPE define for the location where the script exist.

Page 11: Javascript And CSS Libraries

Mootools LibrariesOur last natively supported JavaScript library files is mootools. The mootools files should correspond with the PV_MOOTOOLS define.

Page 12: Javascript And CSS Libraries

CSS Files

The css files that were originally added to PVLibraries can be retrieved at anytime as well. The PV_CSS defines sets their location.

Page 13: Javascript And CSS Libraries

Retrieving Open ScriptOpen scripting, being that it is any information that you want to pass the header, does not have a set location nor needs to be iterated through. It simply comes back as a string of text that needs to be printed out.

Page 14: Javascript And CSS Libraries

OutputIf you ran the example as a script, your output should look like below.

Page 15: Javascript And CSS Libraries

Heads Up!The real importance of learning how to queue libraries is because these libraries are tightly integrated with the template manager in ProdigyView.

In the tutorials on the templating system, you will learn how to pull these libraries directly into your html and have them be formatted.

Page 16: Javascript And CSS Libraries

API ReferenceFor a better understanding of the libraries, visit the api by clicking on the link below.

PVLibraries

www.prodigyview.com

More Tutorials

For more tutorials, please visit:

http://www.prodigyview.com/tutorials