Permlink Replies: 9 - Pages: 1 - Last Post: 11-Jan-2016 16:33 Last Post By: davidekholm
davidekholm

Posts: 21,298
Registered: 10/18/02
New JSONMaker API to simplify skin development
Posted: 28-Oct-2015 16:30
  Click to reply to this thread Reply
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().
drmikey

Posts: 865
Registered: 12/22/06
Re: New JSONMaker API to simplify skin development
Posted: 28-Oct-2015 17:48   in response to: davidekholm in response to: davidekholm
  Click to reply to this thread Reply
Could you provide a simple example of
setIncludes() 
davidekholm

Posts: 21,298
Registered: 10/18/02
Re: New JSONMaker API to simplify skin development
Posted: 28-Oct-2015 22:12   in response to: drmikey in response to: drmikey
  Click to reply to this thread Reply
drmikey wrote:
Could you provide a simple example of
setIncludes() 

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" });
drmikey

Posts: 865
Registered: 12/22/06
Re: New JSONMaker API to simplify skin development
Posted: 30-Oct-2015 16:58   in response to: davidekholm in response to: davidekholm
  Click to reply to this thread Reply
I tried this with a variable I have in a skin called "videoLink", but nothing showed in the data.json file. Sorry to be so clueless, but am I missing something in integrating a variable?

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

Posts: 865
Registered: 12/22/06
Re: New JSONMaker API to simplify skin development
Posted: 30-Oct-2015 18:04   in response to: drmikey in response to: drmikey
  Click to reply to this thread Reply
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
drmikey

Posts: 865
Registered: 12/22/06
Re: New JSONMaker API to simplify skin development
Posted: 30-Oct-2015 18:51   in response to: davidekholm in response to: davidekholm
  Click to reply to this thread Reply
I often use
<%= imageNum - 1 %>
to set data-attributes or id's like this
<div id="modal<%= imageNum - 1 %>"></div>

Can this be something that can be integrated in the JSONMaker API?
davidekholm

Posts: 21,298
Registered: 10/18/02
Re: New JSONMaker API to simplify skin development
Posted: 31-Oct-2015 11:17   in response to: drmikey in response to: drmikey
  Click to reply to this thread Reply
drmikey wrote:
I often use
<%= imageNum - 1 %>
to set data-attributes or id's like this
<div id="modal<%= imageNum - 1 %>"></div>

Can this be something that can be integrated in the JSONMaker API?

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?
davidekholm

Posts: 21,298
Registered: 10/18/02
Re: New JSONMaker API to simplify skin development
Posted: 31-Oct-2015 11:39   in response to: davidekholm in response to: davidekholm
  Click to reply to this thread Reply
If you want indexes to be added to the data tree, here's a code sample that adds "index" variables to each node of the data tree. (in init.bsh):
import org.json.simple.*;
 
void addIndexes(JSONObject tree) {
  List children = tree.get("objects");
  int i=0;
  for (JSONObject o : tree.get("objects")) {
    o.put("index", i++);
    if (o.containsKey("objects")) {
      addIndexes(o);
    }
  }
}
 
jm = new JSONMaker(engine);
tree = jm.getTree(rootFolder);
addIndexes(tree);
dataTree = tree.toJSONString();
Tweak it as you like, for instance use 0 or 1 as starting index or add an if clause to prevent increasing the index for folders for instance (folders are objects containing an "objects" entry)
drmikey

Posts: 865
Registered: 12/22/06
Re: New JSONMaker API to simplify skin development
Posted: 07-Jan-2016 08:18   in response to: davidekholm in response to: davidekholm
  Click to reply to this thread Reply
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?
davidekholm

Posts: 21,298
Registered: 10/18/02
Re: New JSONMaker API to simplify skin development
Posted: 11-Jan-2016 16:33   in response to: drmikey in response to: drmikey
  Click to reply to this thread Reply
drmikey wrote:
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?

It doesn't write to any of those .json files. It writes the JSON data tree directly to the variable dataTree. To pass that variable to JavaScript, check out the source code of Responsive skin. In init.bsh:
jsonmaker = new JSONMaker(engine);
dataTree = jsonmaker.getTreeAsString(rootFolder);

In index.htt:
<!-- evaluate init.js -->
<% File template = new File(skinDirectory, "res/js/init.js"); %>
<% engine.processTemplateFile(template, new File(rootOutputDirectory,"init.js")); %>
 
<!-- index html -->
<!DOCTYPE HTML>
<html id="non-embedded">
    <head></head>
    <body>
        <script src="init.js" id="jAlbum"></script>
    </body>
</html>

In init.js:
dataTree = ${dataTree};
Now you can look up the JSON based data from "dataTree" using classic JavaScript dot notation.
Legend
Forum admins
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums