Difference between revisions of "Safely using CSS/JS libraries"

From PowerUI
Jump to: navigation, search
(Add local copies to your project)
(Add local copies to your project)
Line 12: Line 12:
 
== Add local copies to your project ==
 
== Add local copies to your project ==
  
Drop in the .css and .js files into any folder (or sub-folder) of any Resources folder in your project - here's some examples:
+
Drop in the .css and .js files into any folder (or sub-folder) of any Resources folder in your project and '''rename them''' (we recommend adding .bytes to the end) - here's some examples:
  
 
Assets/Resources/CSS/myStyle.css.bytes
 
Assets/Resources/CSS/myStyle.css.bytes
Line 20: Line 20:
 
''You can have as many Resources folders as you want to organise your project as you wish.''
 
''You can have as many Resources folders as you want to organise your project as you wish.''
  
Then '''rename them''' so Unity doesn't think .js is UnityScript (Unity completely ignores .css too). We recommend adding .bytes onto the end as that way future changes to Unity won't break your naming schemes.
+
They're renamed so Unity doesn't think .js is UnityScript (Unity completely ignores .css too).
  
 
== Referencing them ==
 
== Referencing them ==

Revision as of 15:57, 1 March 2017

PowerUI is now at the point where it can make use of a range of existing libraries. These libraries are typically available for the web, so the classic method to include them is via a link to a remote site:

<!-- How it's normally done on the web -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Don't do this in PowerUI. You're creating an internet requirement where it's often entirely unnecessary. Just imagine if somebody found they couldn't run your app on a plane, for example, despite it appearing to be offline.

Add local copies to your project

Drop in the .css and .js files into any folder (or sub-folder) of any Resources folder in your project and rename them (we recommend adding .bytes to the end) - here's some examples:

Assets/Resources/CSS/myStyle.css.bytes

Assets/UI's/Resources/jQuery-min.js.bytes

You can have as many Resources folders as you want to organise your project as you wish.

They're renamed so Unity doesn't think .js is UnityScript (Unity completely ignores .css too).

Referencing them

By default, PowerUI's custom resources:// protocol is used. So, the path you use is relative to the parent Resources folder, minus .bytes:

<!-- Local referencing in PowerUI - internally uses resources:// -->
<link href='CSS/myStyle.css'></link>

<script src="jQuery-min.js"></script>


If your document.location isn't relative to resources already, then you can specify the full path if needed:

<!-- Local referencing in PowerUI - explicitly using resources://. -->
<link href='resources://CSS/myStyle.css'></link>

<script src="resources://jQuery-min.js"></script>