jAlbum 13 is making JavaScript based skin development easier than ever before.
We now have a new API to generate a JSON metadata tree to a JavaScript variable. You can then use jQuery to parse it. i.e. no more need to parse jAlbum's AlbumObject data model using Java/BeanShell or using jAlbum's scripting tags. You can stick to html5+css+javascript.

Here's what you need to do in your skin:

• Delete data-config.json (not needed anymore)
• In init.bsh, add the following code

  jm = new JSONMaker(engine);
  dataTree = jm.getTreeAsString(rootFolder);
  

This will generate a full JSON formatted data tree to the variable "dataTree". Now, this variable is only known during album-build time. You therefore need to pass it to a client-side javascript variable. To do so, in your index.htt, add the following:

<script>dataTree = ${dataTree};</script>

Now, just continue referring to javascript code snippets, like this:

<script src="res/js/main.js" type="text/javascript"></script>

. These snippets can now simply refer to the dataTree variable via jQuery for instance.

I hope this new "JSONMaker" API will make it far easier to produce skins.
If you like to have other custom variables added to the generated tree, just call setIncludes() on the JSONMaker and pass a string array of variable names. If you wish to switch off the recursive behavior of the generated tree, i.e. so it only lists objects in the current folder, call setMakeTree(false); prior to calling getTreeAsString().

You can also call getTree() which delivers an object tree that can be manipulated on the Java side (in init.bsh). When you're happy with the manipulation, call toJSONString() on the object returned by getTree().

Sure. We will even soon provide a full skin, but for now, here's an example of adding the custom (album object specific) variables "foo" and "bar" to the generated JSON tree:

jm = new JSONMaker(engine);
jm.setIncludes(new String[] { "foo", "bar" });

Never mind, it seems to work now. Had it backwords! Imagine that!

jm = new JSONMaker(engine);
jm.setIncludes(new String[] { "videoLink" });
dataTree = jm.getTreeAsString(rootFolder);

Edited by: drmikey on 30-Oct-2015 10:05

It's naturally not hard to include an image index into the data tree, but it makes it larger. Isn't it easy to keep track of the index yourself as you iterate through the objects of the tree?

This code only writes to data.json it seems, not to tree.json? How does one access tree.json with datatree variable or include tree.json in datatree?