MediaCentral | UX UI Plugin development
/plugin path and are automatically discovered at load time.
To simplify plugin development the MCUX UI Plugin toolkit contains a proxy that can be run in front of a running MCUX installation and which will inject the plugin into the normal load process. This way developers can run and test their code on top of a regular MCUX server installation without having to maintain their own special development server.
Once code should be available on the server it has to be wrapped up and installed on the correct directories on the server(s). This is usually achieved using RPM installation packages. This is described at the end of this guide.
This development process is supported starting with MediaCentral 2.6. Earlier versions have a different API and deployment model.
This download package contains everything you will need for development. Note that since the bootstrap uses node modules that are not available publicly you should not delete the
Using the proxy tool
The proxy tool is a simple local proxy that exposes the code in the
static-plugin-example directory as if it were installed on the server. To test your code you need to run
gulp webpack in the root of
static-plugin-example folder, then run the server and connect it to the http port of your MCUX server.
Note: Use the HTTP endpoint of the MediaCentral URL. This is usually
Linux or Mac:
node_modules/.bin/avid-mcux dev --backend-url <URL to the running MC instance>
node_modules\\.bin\\avid-mcux.cmd dev --backend-url <URL to the running MC instance>
Or simply use:
This will launch the proxy which will serve your plugin to the MediaCentral|UX. Navigate to http://localhost:8090 and ensure that the plugin was loaded. The
Static Plugin Example menu item should be present in the Panes Menu.
If you do not get the
Static Plugin Example in the panes menu check the following to make sure the proxy is working correctly:
- Make sure the proxy is injecting the code.
- Check the console output for
[avid-mcux] Plugins import failed
- Reset the cache of your browser
- Reset the layout
For more details on how to add features to your MCUX UI Plugin see the development introduction
Bundling your plugin
To pack your plugin into a bundle, run:
You will be required to update the entry point in your package.json file:
"main": "index.js", --> "main": "dist/index.js",
Using the platform-ui-theme
Example settings view uses styling provided by the platform-ui-theme package.
This package requires styles to be written as Sass.
If you change the styles.scss file,
be sure to compile it into the regular
npm run build-scss
When using webpack, you can require .scss files directly and the above command is not needed.
Please see platform-ui-theme's README for details.
Using the html loader
To be able to load HTML with
require syntax this plugin contains
loader-html as a dependency.
All loaders you want to use must be named according to the template which looks like
All loaders are to be located at the git repo: https://git.devops-int.avid.com/incubator/static-loaders.
To run tests, run:
This runs the next sequence:
gulp webpackto bundle sources.
- Start an HTTP server to point Selenium driver to.
- Run mocha test framework, pointed to the
- Stop the HTTP server.
Please feel free to explore the test directory and
gulp test task.
- This project uses gitlab-ci.
- Currently, linting and unit tests are implemented.
- .gitlab-ci.yml describes all existing jobs.
Note. Make sure the rpm-build software is installed.
Creating an RPM for the module
To pack your plugin into an rpm package:
Step 1. Configure required data in the rpm/config.js file
- specify name, version, license, description of the plugin
- specify a directory to pack
Note. By default, dist is a directory for packaging (the directory where webpack task disposes its results). If you choose another directory, be sure that it contains package.json file and main field is correctly specified in this file.
Step 2. Run in the console:
This way is possible if your sources are packed into a bundle before. Also, you can use combined gulp task that pack into a bundle and after that build an rpm package:
Step 3. Find the created rpm package in the folder your_plugin_folder/brass_build/RPMS/noarch/
Step 4. To check the created rpm package, install it within the console:
rpm -ivh your_plugin.rpm
After installation, you should see the folder with all resources configured on the step 1 in the folder:
Step 5. To uninstall the rpm package, run:
rpm -e your_plugin-version
Check that the following folder is removed from your file system:
Your package is ready for distribution!