This how-to will teach you how to do the following:
- Create a new widget
- Explore the widget directory
Before starting this how-to, make sure you have completed the following prerequisite:
- Download Adobe Brackets here
3 Getting Started with Adobe Brackets and the Widget Development Plugin
To get started with Adobe Brackets and the Widget Development Plugin, follow these steps:
Install Adobe Brackets on your computer and then open the editor. Your screen should look similar to this:
Select File > Extension manager…:
On the Available tab, search for widget:
For the Widget Development Plugin for Adobe Brackets extension, click Install:
The Widget Development Plugin will now be available in Adobe Brackets.
4 Creating a New Widget
The plugin adds menu options to Brackets, one of which is to start a new custom widget. You can start creating a new custom widget based on the
AppStoreWidgetBoilerplate that is available in the Mendix GitHub repository.
To create a new widget, follow these steps:
Select File > New Widget from the menu:
The name of the widget is very important, as this name is the name used in Mendix. Using the CamelCase naming convention is strongly recommended. Each new widget should 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.
These are some details on 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 . 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 name Apache 2 / MIT Copyright My Company B.V. 2015 Version 1.0 PackageName MyFirstPackage Name MyFirstWidget Location Select a folder on your local drive.
Click OK. The plugin will get the latest version of the
AppStoreWidgetBoilerplatefrom GitHub, unpack all the contents in the location directory, rename all the files and folders, and alter the content inside the files according to these settings.
The location directory is now automatically opened inside Adobe Brackets:
5 Exploring the Widget Directory
Open the widget source directory, which is the directory you entered when creating the widget.
The new widget source contains the following directories:
5.1 The Dist Directory
dist directory must eventually contain the .mpk file you create with the SDK:
5.2 The Src Directory
src directory contains the source files for your widget:
5.3 The Test Directory
test directory contains a fully prepared Mendix test project for testing your widget:
6 Building the Widget
To package the widget source into an .mpk file, follow these steps:
Create an .mpk file by pressing F4 or clicking the the play button on the right side of the editor:
You are then informed that the widget has been created:
The newly created .mpk package is placed in the test > widgets directory:
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 in the
AppStoreWidgetBoilerplate will provide you a quick overview of what you need to interact with both the user interface and Mendix.
8 Related Content
8.1 Internal Resources
- How to Create a Chainable Custom Widget
- How to Create a Basic Hello World Custom Widget
- How to Use the Mobile Slider Custom Widget
8.2 External Resources
These are some interesting books and articles you can read to dive into the source code of the
- Custom Mendix widgets are based on DOJO widgets – for more information, see this blog post: Writing Your Own Widget