Hacking the plugin
Within the following documentation you will learn how the plugin is setup from a technical perspective. We will dive into the way we have organized our code and how we expect participants to also extend the plugin if they wish to help in the development.
Lets u start with the directory structure and where we believe something should be placed in:
-
assets -
css
-
extension
-
fonts
-
img
-
lib (Read more...)
-
node (Read more...)
-
snippets
-
main.js -
package.json
-
README.md
The assets folder is for images that are used inside our documentation you can add anything you need as long as it compliments the common goal to make it easier to find out how the plugin is working.
Our plugin is build up by HTML / JavaScript and CSS. All CSS that is used for the plugin is placed in this directory. You can find the font-awesome.css and main.css file in this directory. The font-awesome file is used for loading font-awesome.
An external CSS library that gives some nice glyph icons that can be used in buttons and interface components. We use it inside the plugin for a number of buttons.
The file main.css contains CSS that create the panels and buttons of our plugin.
There is a separation of two types of JavaScript that is used inside the plugin. There is JavaScript that is executed inside the browser that is provided by the brackets-shell (the core of brackets) and there is JavaScript that is executed in NodeJS which is part of the brackets-shell.
The extension folder is a folder from where we load other brackets plugins into brackets and external JavaScript libraries like toastr that are used inside brackets to make up the interface.
Yes we load other brackets plugins here because we do not know if they are already installed through the extension manager of brackets and we need them to provide a proper IDE for building widgets.
The fonts directory is where the font for font-awesome is located. We need this folder to also hold other glyph font icons, or in the future perhaps another webfont that is used through out the entire interface that the plugin provides.
Assets is a folder where we place images used inside the documentation. The img folder is used for images that are rendered in the plugin inside brackets. We want to keep these separate.
The lib folder is the most important folder of the plugin. And holds the JavaScript that make up the plugin to work inside brackets. These JavaScript files are executed inside the browser of the brackets-shell.
The node folder holds the node_modules we have been downloaded with the npm package manager that are used inside NodeJS in the plugin to accomplish certain tasks. The plugin is able to connect to GitHub and get the latest release of the AppStoreWidgetBoilerplate for instance.
But also has the ability to execute and start the Mendix Business Modeler. And also package a folder to a custom widget and do OS operations (copying files, renaming etc).
The plugin also provides a course you can follow to successfully create an advanced custom widget for the Mendix platform this is provided as is and should not be altered. It is very helpful to provide you with a base how to build custom widgets for the Mendix platform.
This is not a folder but the first file loaded by brackets to actually create the plugin inside the interface. A very important file.
This is the package.json file used by Brackets Repository to be able to know that this is a brackets plugin. It tells about the author, version number etc.. you can find documentation about this in the brackets wiki.
The README.md file is used within GitHub.com to provide the repository with a description of what is inside it.