I'm building a Chrome Packaged App. I want to put the script configuration if a config file in a resource directory and on startup want to read that by Javascript.
For example
- Project
- WebContent
- index.html
- manifest.json
- main.js
- resource
Here I want main.js to load config.properties file in the beginning and get key-value pairs.
Have anyone done something like this?
There is a super simple way to do this, along the lines of sowbug's answer, but which doesn't need any XHR or file reading.
Step 1.
Create resource/config.js like so:
gOptions = {
// This can have nested stuff, arrays, etc.
color: 'red',
size: 'big',
enabled: true,
count: 5
}
Step 2.
Include this file in your index.html:
<!doctype html>
<head>
<script src="resource/config.js"></script>
...
Step 3.
Access your options directly from your main.js (or anywhere):
...
if (gOptions.enabled) {
for (var i = 0; i < gOptions.count; i++) {
console.log(gOptions.color);
}
}
...
You can use messageResource.js, a simple javascript library created by me for loading properties file.
1) Include messageResource.js in your index.html.
<script src="messageResource.min.js"></script>
2) You can get key-value pairs of config.properties from main.js using the following code.
// initialize messageResource.js
messageResource.init({
// path to directory containing config.properties
filePath : 'resource'
});
// load config.properties file
messageResource.load('config', function(){
// load file callback
// get value corresponding to a key from config.properties
var value = messageResource.get('key', 'config');
});
Structure the file as JSON. Read it into a string using the File API or XHR. Then JSON.parse(string).
- Loading local content through XHR in a Chrome packaged app
- http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api
It is pretty simple with JSF, but you will have to modify the HTML file every time you need a new parameter to be read from JavaScript.
My property file (config.properties) in project directory has the following parameter as a key value pair.
parameter.key=parameter.value
The property file name is configured in faces-config.xml
<application>
<resource-bundle>
<base-name>com.example.project.properties.config</base-name>
<var>configuration</var>
</resource-bundle>
</application>
Therefore, you can use a property value in a hidden input inside the HTML file.
<h:inputHidden id="parameter_key" value="#{configuration['parameter.key']}" />
And from JavaScript function, use the following line to read the parameter value.
var parameter_value = document.getElementById("parameter_key").value;
Enjoy your day..!!!