In some cases it is practical in an application to have a single global settings file where all configuration is stored. Most often this configuration file varies between a deployment and another, depending on customer requirements, licensed features, backend technology, etc.
When developing an application with Sproutcore 1.x (1.6 is assumed) it is not immediately clear how to do it, not because it is not possible but just because documentation on Abbot, SC's build tool is, to use an euphemism, well, scarce.
So what do we want to do exactly? We want to have a single config.js file that is included before any other application file and, most importantly, must not be minified and packed so that on-the-fly editing or inspection is still conveniently possible. The file should be kept small anyway so that packing and minifying it is not going to be necessary.
To do this we need to create a new .js file and place it wherever we like in the application tree. A sensible choice would be to have a config directory, but it's really up to you. I'm a lazy bloke so I will create this file in the application root where the theme.js, main.js and core.js reside. Let's call this file appconfig.js.
We can put any content we wish inside, but the really important thing to do is to insert this directive near the top:
This directive which is mentioned in passing here (third item in the section Other Notable Changes) instructs Abbot to put the content of this file in a separate resource called, you guessed it, appconfig, instead of the global javascript.js resource.
In the next step we will tell Abbot to add this file straight before our application code so that it is picked up correcly. To do that we use an another directive, which has to be added to the Buildfile.
Open up your app's Buildfile in The Editor (vi, that is) and add a bootstrap directive like the following at the end of config:
Now delete the tmp directory (not really required, but it helps) and restart sc-server. Refresh the page in your browser and inspect the html source: you should find a javascript include of your app's config file almost at the top of the include chain. Rebuild your app in production mode and notice how the config file is kept separate from all others, just as we wish.
Boostrap's brothers Boostrap-inline was mentioned by Tom Dale in this conversation and it is where I got the inspiration to look for bootstrap from. You may want to use bootstrap-inline to have the javascript code embedded directly in the html. If you choose to use bootstrap-inline remember to also add SC's own inlines or it will stop working.
When developing an application with Sproutcore 1.x (1.6 is assumed) it is not immediately clear how to do it, not because it is not possible but just because documentation on Abbot, SC's build tool is, to use an euphemism, well, scarce.
So what do we want to do exactly? We want to have a single config.js file that is included before any other application file and, most importantly, must not be minified and packed so that on-the-fly editing or inspection is still conveniently possible. The file should be kept small anyway so that packing and minifying it is not going to be necessary.
To do this we need to create a new .js file and place it wherever we like in the application tree. A sensible choice would be to have a config directory, but it's really up to you. I'm a lazy bloke so I will create this file in the application root where the theme.js, main.js and core.js reside. Let's call this file appconfig.js.
We can put any content we wish inside, but the really important thing to do is to insert this directive near the top:
sc_resource('appconfig.js')
This directive which is mentioned in passing here (third item in the section Other Notable Changes) instructs Abbot to put the content of this file in a separate resource called, you guessed it, appconfig, instead of the global javascript.js resource.
In the next step we will tell Abbot to add this file straight before our application code so that it is picked up correcly. To do that we use an another directive, which has to be added to the Buildfile.
Open up your app's Buildfile in The Editor (vi, that is) and add a bootstrap directive like the following at the end of config:
config :all, :required => [:sproutcore, 'animation', 'sctable', :'sproutcore/experimental/split_view'], :minify => true, :bootstrap => 'appconfig'
Now delete the tmp directory (not really required, but it helps) and restart sc-server. Refresh the page in your browser and inspect the html source: you should find a javascript include of your app's config file almost at the top of the include chain. Rebuild your app in production mode and notice how the config file is kept separate from all others, just as we wish.
Boostrap's brothers Boostrap-inline was mentioned by Tom Dale in this conversation and it is where I got the inspiration to look for bootstrap from. You may want to use bootstrap-inline to have the javascript code embedded directly in the html. If you choose to use bootstrap-inline remember to also add SC's own inlines or it will stop working.
Comments