Wednesday, March 25, 2015

Understanding folder structure of a custom extension in WSO2 Enterprise Store

Many find it difficult to identify the caramel framework of ES (Enterprise Store) . Therefore you could go through this simple guide to understand the basic structure of folders you need to know, to add your own custom extension to ES. 

Under ES install dir/repository/deployment/server/jaggeryapps , you can find two folders named publisher and store. This is the starting point for your custom extension, where you need to decide whether you need to add the extension under publisher/store or both.  Say you need to add a new extension named 'et1' under publisher, you need to go to publisher/ extensions/assets and create a new folder named et1.

Next inside your et1 folder you need to have a folder structure as follows.

Any .jag apis you create need to go into 'apis' folder, and you can list those apis in asset.js. The section where most find it confusing is themes, so we will look into it. This is a possible structure of themes folder. 
as self explained, you need to place your resources such as css files and images, under respective folders listed. js folder will hold any javascript/jquery implementations (.js files) you require. Folder named 'partials' is where you need to include your view (html) content based pages. Those files will contain '.hbs' extension. In a .hbs file you can include another .hbs file as follows. For example if you have two .hbs files named createNode.hbs and createList.hbs, and you need to add the content of createNode.hbs inside createList.hbs, you need to add following in createList.hbs.

 {{> createNode .}}

By placing above, it will render the content of createNode file into the required position of createList. 

Next important thing is to know how to link specific resources( images,css,js) to a certain view(.hbs) This is done by using files inside folder 'helpers'. A helper file would list out sets of resource files required like below. But how does it map which helper file content needs to be rendered in which .hbs view? Easy, you just need to have the same name of .hbs file for the relevant helper class. For example, say you need to link the resources needed for createNode.hbs. 

1.Create a file named createNode.js under folder 'helpers' . 
2. Inside createNode.js add your resources as below. 

var resources = function (page, meta) {
    return {
           js:['test.js','jquery.js'],
           css:['bootstrap-select.min.css','createNode.css']
    };
};


This is just the very basic idea of an extension structure. But if you get the idea on how you can add resources to pages, and include various content inside pages, you are good to go !


No comments:

Post a Comment