Difference between revisions of "Safely using CSS/JS libraries"
Bablakeluke (talk | contribs) (Created page with "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...") |
Bablakeluke (talk | contribs) |
||
| (6 intermediate revisions by the same user not shown) | |||
| Line 8: | Line 8: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | '''Don't do this in PowerUI.''' | + | '''Don't do this in PowerUI.''' It'll work, but you're creating an internet requirement where it's often entirely unnecessary. For example - somebody wants to use your app on a plane, but they find out they can't (and it's unclear why) because the UI doesn't show up. |
== 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 | ||
| + | |||
Assets/UI's/Resources/jQuery-min.js.bytes | Assets/UI's/Resources/jQuery-min.js.bytes | ||
| − | ''You can have as many Resources folders as you want | + | ''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 == | == 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: | + | By default, PowerUI's custom [[Resources_Protocol|resources:// protocol]] is used. So, the path you use is relative to the parent Resources folder, minus .bytes: |
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
| Line 31: | Line 32: | ||
<script src="jQuery-min.js"></script> | <script src="jQuery-min.js"></script> | ||
| + | |||
| + | </syntaxhighlight> | ||
| + | |||
| + | |||
| + | If your document.location isn't relative to resources already, then you can specify the full path if needed: | ||
| + | |||
| + | <syntaxhighlight lang="html"> | ||
| + | |||
| + | <!-- Local referencing in PowerUI - explicitly using resources://. --> | ||
| + | <link href='resources://CSS/myStyle.css'></link> | ||
| + | |||
| + | <script src="resources://jQuery-min.js"></script> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Latest revision as of 11:24, 2 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. It'll work, but you're creating an internet requirement where it's often entirely unnecessary. For example - somebody wants to use your app on a plane, but they find out they can't (and it's unclear why) because the UI doesn't show up.
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>