Please follow these preparations before continuing with this how to.
- Download Adobe Brackets here
2. Getting started with Adobe Brackets
- Install Adobe Brackets on your computer
- Open Adobe Brackets after the installation completes. Your screen should look similar to this this:
2.1 Adding the Widget Development Plugin for Brackets
- Open the Extension manager by going to File > Extension manager…:
- Search for Widget the Available tab:
- Click Install for the Widget Development Plugin for Adobe Brackets extension: The Widget Development Plugin is now available in Adobe Brackets.
3. Creating a new widget
The plugin adds menu options to Brackets. One of them is to start a new Custom Widget. You can start creating a new Custom Widget based on the AppStoreWidgetBoilerplate that is available on the Mendix GitHub repository.
- Select File > New Widget from the menu to start.
The name of the widget is very important, this name is the name used in Mendix. It is strongly recommended to use UpperCamelCase naming convention. Each new widget should at have an author, version number, copyright, license, package name, widget name and path defined before you can click OK. The location directory must also exist.
Information about the settings:
- The author should only contain a-z and A-Z characters
- The license should only contain a-z and A-Z characters
- The copyright should only contain a-z , A-Z and 0-9 characters
- The version should only contain 0-9 and / or a . characters
- The package name should only contain a-z and A-Z characters
- The name should only contain a-z and A-Z characters
- The location should only contain a valid directory path
Provide the following values:
Field Value Author Enter your name License Apache 2 / MIT Copyright My Company B.V. 2015 Version 1.0 Package name MyFirstPackage Name MyFirstWidget Location Select a folder on your local drive
Click OK. The plugin will get the latest version of the AppStoreWidgetBoilerplate from GitHub, unpack all the contents in the location directory, rename all files and folders, and finally alter the content inside the files according to these settings. The location directory is now automatically opened inside Adobe Brackets.
4. Exploring the widget directory
- Open the widget source directory. This is the directory you entered when creating the widget.
Because the boilerplate is used you will have a widget that is compliant with the standards we have defined for a GitHub Custom Widget repository.
The new widget source contains the following directories:
The dist Directory
The dist directory eventually must contain the .MPK file you create with the SDK.
The src Directory
The src directory contains the source files for your widget.
The test Directory
The test directory contains a fully prepared Mendix test project to test your widget.
5. Building the widget
In this chapter you will package the widget source into an MPK file.
Create an MPK file by pressing F4 or clicking the the PLAY button on the right side:
You are then informed that the widget is created:
The newly created MPK package is placed in the test> widgets directory.
6. What have we learned today?
This How-to has enabled you to start working and building a Custom Widget for the Mendix Platform. Using Adobe Brackets as your main integrated development environment. The code examples inside the AppStoreWidgetBoilerplate will provide you a quick overview of what you need to interact with both the user interface and Mendix.
7. Related content
- Creating a chainable Custom Widget
- Getting started with the Widget Development Plugin for Adobe Brackets
- Creating a Basic Hello World Custom Widget
- The Mobile Slider Custom Widget
Some interesting books and articles you might want to read next to dive into the source code of the AppStoreWidgetBoilerplate:
7.1 Writing your own DOJO Widget
Mendix Custom Widgets are based upon DOJO widgets. You will find the following BLOG post very useful.
7.2 The Mendix Client API 6.0