The Plugin Generator is a powerful tool in VisualNEO Web that allows developers to create, manage, and integrate custom plugins into their applications. These plugins extend the functionality of VisualNEO Web by adding new commands and features, often leveraging external JavaScript libraries or frameworks.

This tool is designed to streamline the process of creating plugins by providing a structured interface for defining metadata, commands, custom code, and dependencies. Developers can design plugins that enhance the usability of their apps or add specialized features tailored to their project requirements.

Key Features of the Plugin Generator:

  1. General Metadata Configuration: Define essential plugin information, such as the title, author, version, and a brief description.
  2. Command Actions Management: Create custom commands that integrate seamlessly into VisualNEO Web's scripting environment.
  3. Custom JavaScript Code Integration: Add, edit, and manage the JavaScript code that powers your plugin.
  4. Dependency Management: Include external JavaScript libraries or files required by your plugin, ensuring smooth functionality.
  5. Compilation and Packaging: Generate the final plugin file for distribution and integration.



General Tab


Overview of the General Tab

The General Tab is the starting point for creating a plugin. Here, developers define the fundamental details that describe their plugin. This information is crucial for both the developer and end-users to understand the plugin’s purpose and functionality.

Fields and Descriptions:

  • Plugin Title: The name of the plugin, which will be displayed in VisualNEO Web’s plugin interface. Please prefix your plugins with your own initials to avoid name conflicts with other developers plugins. "neo" prefix is reserved for official plugins. Just choose your own prefix of at least 3 letters.
  • Author: The developer or organization responsible for creating the plugin.
  • Copyright: The year and legal copyright information for the plugin.
  • Description: A detailed summary of the plugin's functionality. This should include version information and references to any external libraries used.
  • Website: A link to the developer's website or plugin documentation for additional support.
  • Email: The developer's contact information for questions or issues.
  • Icons:
    • 32x32 Icon: A 32 pixels resolution icon representing the plugin in the VisualNEO Web interface.
    • 20x20 Icon: A smaller version of the plugin icon for compact views.
  • Notes (Not Visible to Users): A space for developers to add internal comments or reminders about the plugin. This field is for organizational purposes and is not shown to end-users.

How to Use the General Tab

  1. Enter Plugin Details:
    • Fill out each field with relevant information about your plugin.
    • Ensure the description is clear and includes version information.
  2. Set Icons:
    • Upload custom icons that represent the plugin visually.
    • Ensure the icons are consistent with the plugin’s theme and functionality.
  3. Save and Continue:
    • Save your progress and proceed to the Actions tab to define commands and their behavior.


Actions Tab



Overview of the Actions Tab

The Actions Tab is where developers define the commands (actions) that their plugin will offer. These commands will appear in VisualNEO Web’s scripting interface and can be used like any built-in command. Each action consists of a name, parameters, and a JavaScript template that defines its behavior.

This tab is the heart of the plugin, as it determines how the plugin interacts with VisualNEO Web and its applications.

Features and Fields

  1. Action List:
    • Displays all the actions defined for the plugin.
    • Actions are listed by name, and developers can select, add, edit, or delete actions.
  2. Action Template:
    • A short block of JavaScript code that specifies how the action works.
    • The template should be as concise as possible, delegating complex logic to the Code Tab when necessary.
  3. Parameters:
    • Define the inputs required by the action.
    • Each parameter includes:
      • Alias: The variable name used in the template.
      • Type: The expected data type (e.g., STRING, ENUM, etc.).
      • Description: A brief explanation of the parameter’s purpose, shown to users in VisualNEO Web.
  4. Hints:
    • Optional guidance or additional context for developers when using the action.
  5. Edit Tools:
    • Add: Add a new action.
    • Edit: Modify the selected action.
    • Remove: Delete the selected action.

How to Use the Actions Tab

  1. Define New Actions:
    • Click Add to create a new action.
    • Specify the action name, write the JavaScript template, and add any required parameters.
  2. Edit Existing Actions:
    • Select an action from the list and click Edit.
    • Adjust the JavaScript template or parameters as needed. Usually you will want to call a javascript function defined in the Code Tab (see below)
  3. Manage Parameters:
    • Use the Add, Edit, and Remove buttons to configure the parameters for each action.
    • Ensure each parameter has a meaningful alias, accurate type, and clear description.
  4. Test the Action Template:
    • Keep the action template short and efficient. For complex logic, write supporting code in the Code Tab.

Example Workflow

For a plugin that generates PDFs (as shown in the capture):

  • Action Name: neoPdfInit
    • Template: neoPdfInit(pdfName, orientation, paperSize);
    • Parameters:
      • pdfName: STRING – Name of the PDF file.
      • orientation: ENUM – Page orientation (e.g., portrait or landscape).
      • paperSize: ENUM – Paper size (e.g., A4, Letter).

The developer would:

  1. Add these parameters to the action.
  2. Write the corresponding JavaScript logic in the action template.
  3. Save the action and test it within a VisualNEO Web application.


Parameter Types in the Actions Tab

When defining parameters for plugin actions in the Actions Tab, you can specify a type for each parameter. This ensures that the input provided to the action aligns with the expected data format, improving reliability and reducing errors. The available parameter types cover a wide range of use cases, from simple strings to more advanced data structures and references.

List of Parameter Types

  1. STRING: A sequence of characters, such as text or simple data (e.g., "filename", "username").
  2. HTML: Accepts HTML code, useful for embedding custom HTML content.
  3. INTEGER: Whole numbers (e.g., 1, 25, -100).
  4. FLOAT: Decimal numbers (e.g., 3.14, -0.5).
  5. MIXED: Allows for mixed data types, useful for flexible inputs.
  6. BOOLEAN: A true or false value, typically used for toggles or switches.
  7. OPERATOR: Used for logical or mathematical operators (e.g., +, -, ==).
  8. VARREF: A reference to a variable defined in the application.
  9. DIALOGID: Specifies the ID of a dialog object within the application.
  10. PAGENUM: Refers to a specific page number.
  11. ARRAYDATA: Accepts array structures for handling multiple values.
  12. FUNCTION: Points to a callable function or routine within the app.
  13. FILEPATH: Represents the path to a file.
  14. FILENAME: Refers to the name of a file, without its path.
  15. EXPRESSION: An evaluative expression, useful for dynamic calculations.
  16. ENUMLIST: A predefined list of options or choices for users to select from.
  17. VARNAME: Refers to a variable name used in the app.
  18. OBJID: Points to the ID of an object in the application.
  19. PAGEID: References a specific page by its ID.


How to Define Parameters

  1. Click the Add button in the Parameters section of the Actions Tab.
  2. Enter an Alias for the parameter, which will be used in the action template (e.g., pdfName).
  3. Select the Type from the dropdown menu that best matches the parameter's purpose.
  4. Add a Description to provide context about the parameter's use. This will help users understand its role when using the action.
  5. Click OK to save the parameter.

Tips for Selecting Types

  • Use STRING for most general-purpose inputs like names or titles.
  • Opt for ENUMLIST when the input is limited to specific options, such as orientations (e.g., "portrait" or "landscape").
  • Choose FILEPATH or FILENAME for file operations to ensure compatibility with VisualNEO Web’s file handling.
  • Use BOOLEAN for simple toggles, such as enabling or disabling a feature.


Code Tab



Overview of the Code Tab

The Code Tab in the Plugin Generator is where you define and manage the JavaScript logic that powers your plugin’s actions. This tab is the core of your plugin’s functionality, allowing you to write reusable functions and handle complex operations that the action templates in the Actions Tab can call upon.

While the Actions Tab provides the interface for using the plugin’s commands, the Code Tab implements the underlying behavior, ensuring flexibility and maintainability.

Features and Fields

  1. Code Editor:
    • A built-in JavaScript editor where you can write the custom code required for your plugin.
    • Supports syntax highlighting to improve readability and make coding easier.
  2. Reusable Functions:
    • Define JavaScript functions that can be used across multiple actions in your plugin.
    • Functions defined here are global to the plugin and can be invoked by action templates.
  3. Integration with Templates:
    • The code written in this tab complements the concise action templates defined in the Actions Tab.
    • Use this tab to delegate complex logic to functions, keeping action templates clean and minimal.

How to Use the Code Tab

  1. Write JavaScript Functions:
    • Use the editor to write functions that perform specific tasks or calculations.
    • For example:


neoPdfRender(pdfName, objId) {
  $App.NAB.tempRenderPdfName = pdfName;
  $App.NAB.tempRenderObjId = objId;
  setTimeout(neoPdfRender2, 300);
}

This function initializes rendering a PDF into a container object with a slight delay.

  1. Test and Debug:
    • Test the code within your application to ensure it works as intended.
    • Keep code modular to simplify debugging and enhance readability.

Best Practices

  • Keep Code Organized:
    • Group related functions together and use meaningful names for easy identification.
  • Leverage Parameters:
    • Use parameters defined in the Actions Tab to make your functions dynamic and reusable.
  • Minimize Action Template Complexity:
    • Delegate complex logic to the Code Tab to maintain simplicity in action templates.
  • Comment Your Code:
    • Include comments to explain the purpose of functions and any non-obvious logic, making it easier to maintain the plugin later.

Example Workflow

For the neoPDF plugin (as shown in the capture):

  1. Action Template: neoPdfInit(pdfName, orientation, paperSize);
  2. Code Implementation (in the Code Tab):

neoPdfInit(pdfName, orientation, paperSize) {
  $App[pdfName] = new jsPDF(orientation, "mm", paperSize);
}

    • This function initializes a new PDF object using the jsPDF library.


Files Tab



Overview of the Files Tab

The Files Tab in the Plugin Generator allows you to manage and include any external JavaScript files or libraries that your plugin depends on. These files are bundled with your plugin when it is compiled, ensuring that all required resources are available for your plugin to function properly in VisualNEO Web.

This tab is essential for plugins that rely on third-party libraries, custom JavaScript, or additional assets.

Features and Fields

  1. File List:
    • Displays all the external files currently included in the plugin project.
    • Files are listed with their full paths for easy reference.
  2. Add and Remove Files:
    • Add: Add new JavaScript files to the project. You can browse your system to select files to include.
    • Remove: Remove a selected file from the project if it is no longer needed.
  3. Automatic Inclusion:
    • Files listed here are automatically packaged with the plugin during compilation, so there is no need to manage them separately.
    • Only necessary plugins are compiled in the final web app.

How to Use the Files Tab

  1. Add Required Files:
    • Click the Add button and select external JavaScript files or libraries your plugin needs.
    • For example:
      • jspdf.min.js – A library for creating PDF files.
      • html2canvas.min.js – A library for rendering HTML elements into canvas.
  2. Organize Dependencies:
    • Include files in the order they are required by your plugin logic. For instance, if one file depends on another, ensure they are added in the correct sequence.
  3. Remove Unused Files:
    • If a file is no longer needed, select it from the list and click Remove to keep the project clean.
  4. Verify Compatibility:
    • Ensure that the included files are compatible with VisualNEO Web’s environment and that they do not conflict with existing libraries.

Best Practices

  • Include Only What’s Necessary:
    • Avoid adding unnecessary files to reduce the plugin's size and improve performance.
  • Validate Dependencies:
    • Check that all added files are functional and compatible with the version of VisualNEO Web being used.
  • Document Library Use:
    • In the General Tab, provide documentation or links to the libraries you include so users know what dependencies are being utilized.


By carefully managing external dependencies in the Files Tab, you ensure that your plugin is both functional and lightweight.



Compiling your plugin

Overview

The final step in creating a plugin with the Plugin Generator is compiling it. This process converts the plugin project into a .nabp file, which is the format required by VisualNEO Web. Once compiled, the plugin can be installed into VisualNEO Web, making its commands available for use in your projects.

How to Compile a Plugin

  1. Click the Compile Button:
    • In the Plugin Generator interface, locate and click the Compile button.
    • This will open the Compile Plug-In window.


  1. Specify the Output File:
    • Output File: Enter the desired file path and name for the compiled plugin file. The file must have a .nabp extension.
    • By default, the path will be set to VisualNEO Web’s plugins directory.
  2. Install Plugin to VisualNEO Web:
    • Ensure the checkbox labeled Install this Plug-In to VisualNEO Web is selected if you want the plugin to be automatically added to VisualNEO Web after compilation.
  3. Start Compilation:
    • Click the Compile button to start the process.
    • The Plugin Generator will validate the project, bundle all necessary files (actions, code, and external dependencies), and create the .nabp file.
  4. Verify Installation:
    • If the plugin is installed successfully, its commands will appear in the VisualNEO Web action commands list under the appropriate category.

Troubleshooting Compilation

  • Errors During Compilation:
    • Ensure that all required fields (e.g., Plugin Title, Description, etc.) in the General Tab are filled out.
    • Check that all required files are correctly included in the Files Tab.
    • Validate the JavaScript logic in the Code Tab for any syntax errors.
    • Be sure there is not another plugin with the same name.
  • Plugin Does Not Appear:
    • Ensure the "Install this Plug-In to VisualNEO Web" checkbox was checked during compilation.

Created with the Personal Edition of HelpNDoc: Easy CHM and documentation editor