Reference Files in Your Hybrid App

To use files in your app, you need to reference them correctly in the markup of your index.html file.

When you create a new app from the built-in templates, your code already contains references to scripts, style sheets and frameworks that are part of the template. When you add new files or rename existing resources, you might need to add new or modify the existing references in your index.html file. AppBuilder does not add or modify references automatically.

Reference Scripts and Frameworks

To reference scripts and frameworks, use the <script> tag in the <head> section of your index.html file.

For example:

<head>
    <script src="cordova.js"></script> <!-- Reference to the Apache Cordova framework -->
    <script src="kendo/js/jquery.min.js"></script> <!-- Reference to the jQuery framework -->
    <script src="kendo/js/kendo.mobile.min.js"></script> <!-- Reference to the Kendo UI Core framework -->
    <script src="scripts/main.js"></script> <!-- Reference to the script file
                             containing the functionality of the app -->
</head>

Reference Style Sheets and Other Resources

To reference style sheets and other resources, use the <link> tag in the <head> section of your index.html file.

When you develop your style sheets using LESS, you need to compile the LESS files to CSS and reference the resulting CSS files in your code.

For example:

<head>
    <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" /> 
    <link href="kendo/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="kendo/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="styles/main.css" rel="stylesheet" />
</head>

Reference Platform- and Build-Specific Files

When you work with platform-specific files (*.android.*, *.ios.*, and *.wp8.*), in your code, reference these files without the platform modifier (android, ios, or wp8).
For example, the correct reference to index.android.html is index.html.

When you work with configuration-specific files (*.debug.* and *.release.*), in your code, reference these files without the configuration modifier (debug or release).
For example, the correct reference to index.debug.html is index.html.

When you work with files which are both configuration- and platform-specific (*.debug.platform.* and *.release.platform.*), in your code, reference these files without the configuration and the platform modifiers.
For example, the correct reference to index.debug.ios.html is index.html.

See Also

Start a free trial Request a demo
Contact us: +1-888-365-2779
sales@telerik.com
Copyright © 2016-2017, Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.