Hello from the panel!
"); + ``` + +3. **Create toolbar icon** + Create a toolbar icon to toggle the panel. + > Creating a toolbar icon is mandatory, else the panel won't show up. + +4. **Create the plugin panel** + Use `WorkspaceManager.createPluginPanel()` to create your panel: + ```jsx + const pluginPanel = WorkspaceManager.createPluginPanel( + "myextension.panel", // Unique ID using package-style naming + $panel, // jQuery object for panel content + 200, // minSize in pixels + $toolbarIcon, // toolbar icon + 400 // initialSize in pixels (optional) + ); + ``` + +> For a detailed description, refer to [this link](https://docs.phcode.dev/api/API-Reference/view/WorkspaceManager#createPluginPanel). + + +Full Code Example: + +```jsx +define(function (require, exports, module) { + "use strict"; + + // Brackets modules + const AppInit = brackets.getModule("utils/AppInit"), + CommandManager = brackets.getModule("command/CommandManager"), + Menus = brackets.getModule("command/Menus"), + WorkspaceManager = brackets.getModule("view/WorkspaceManager"); + + let pluginPanel; // Store panel reference + + // Function to run when the menu item is clicked + function handleTestExtension() { + if (!pluginPanel) { + // Create panel content + const $panel = $("Hello from the panel!
"); + + // Create toolbar icon + const $toolbarIcon = $("#panel"); + + // Create the plugin panel + pluginPanel = WorkspaceManager.createPluginPanel( + "myextension.panel", + $panel, + 200, + $toolbarIcon, + 400 + ); + pluginPanel.show(); + } + } + + // Register command + const MY_COMMAND_ID = "test_menuitem"; + CommandManager.register("Toggle Panel", MY_COMMAND_ID, handleTestExtension); + + // Add Menu item + const menu = Menus.getMenu(Menus.AppMenuBar.FILE_MENU); + menu.addMenuItem(MY_COMMAND_ID); + + // Initialize extension + AppInit.appReady(function () { + console.log("Panel extension initialized"); + }); +}); +``` + +Visual Reference + + + +## Managing Plugin Panel State + +You can control the visibility and state of your plugin panel: + +1. **Show/Hide Panel** + ```jsx + // Show panel + pluginPanel.show(); + + // Hide panel + pluginPanel.hide(); + ``` + + +2. **Check Panel Visibility** + ```jsx + const isVisible = pluginPanel.isVisible(); + ``` + +3. **Toggle Panel Visibility** + ```jsx + function togglePanel() { + if (pluginPanel.isVisible()) { + pluginPanel.hide(); + } else { + pluginPanel.show(); + } + } + ``` + + +## Creating a Bottom Panel + +Bottom panels are created similarly to plugin panels but use different methods: +> For `Bottom Panels` creating a toolbar icon is not required. + +1. **Import required modules** + ```jsx + const WorkspaceManager = brackets.getModule("view/WorkspaceManager"); + ``` + +2. **Create the bottom panel** + ```jsx + const bottomPanel = WorkspaceManager.createBottomPanel( + "myextension.panel", + $panel, + 200, + ); + ``` +> For a detailed description, refer to [this link](https://docs.phcode.dev/api/API-Reference/view/WorkspaceManager#createBottomPanel). + +Full Code Example for Bottom Panel: + +```jsx + define(function (require, exports, module) { + "use strict"; + + // Brackets modules + const AppInit = brackets.getModule("utils/AppInit"), + CommandManager = brackets.getModule("command/CommandManager"), + Menus = brackets.getModule("command/Menus"), + WorkspaceManager = brackets.getModule("view/WorkspaceManager"); + + let bottomPanel; // Store panel reference + + // Function to run when the menu item is clicked + function handleTestExtension() { + if (!bottomPanel) { + // Create panel content + const $panel = $("Hello from the panel!
"); + + // Create the plugin panel + bottomPanel = WorkspaceManager.createBottomPanel( + "myextension.panel", + $panel, + 200, + ); + bottomPanel.show(); + } + } + + // Register command + const MY_COMMAND_ID = "test_menuitem"; + CommandManager.register("Toggle Panel", MY_COMMAND_ID, handleTestExtension); + + // Add Menu item + const menu = Menus.getMenu(Menus.AppMenuBar.FILE_MENU); + menu.addMenuItem(MY_COMMAND_ID); + + // Initialize extension + AppInit.appReady(function () { + console.log("Panel extension initialized"); + }); + }); +``` + +Visual Reference + + +## Managing Bottom Panel State + +Bottom panels support similar state management to plugin panels: + +1. **Show/Hide Panel** + ```jsx + // Show panel + bottomPanel.show(); + + // Hide panel + bottomPanel.hide(); + ``` + +2. **Check Panel Visibility** + ```jsx + const isVisible = bottomPanel.isVisible(); + ``` + +3. **Toggle Panel Visibility** + ```jsx + function togglePanel() { + if (bottomPanel.isVisible()) { + bottomPanel.hide(); + } else { + bottomPanel.show(); + } + } + ``` + +## Best Practices + +1. Always use unique, package-style IDs (e.g., "yourextension.panel-name") to avoid conflicts with other extensions. + +2. Save panel state (e.g., visibility, size) in preferences if needed, to restore state when the extension is reloaded. + +Example CSS for Bottom Panel: + +```css +.bottom-panel { + background-color: #f8f9fa; + border-top: 1px solid #ddd; +} + +.bottom-panel .toolbar { + padding: 4px 8px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: #e9ecef; + border-bottom: 1px solid #ddd; +} + +.bottom-panel .panel-content { + padding: 8px; + overflow-y: auto; +} +``` + +> For more information about the WorkSpace Manager API, refer to the [Phoenix Code API documentation](https://docs.phcode.dev/api/API-Reference/view/WorkspaceManager). \ No newline at end of file diff --git a/api/07-How-To/StatusBar.md b/api/07-How-To/StatusBar.md new file mode 100644 index 00000000..ca05eb0e --- /dev/null +++ b/api/07-How-To/StatusBar.md @@ -0,0 +1,56 @@ +--- +title: Add an indicator icon on the status bar +--- + +This document outlines the basic features of working with Status Bar, including: + +* [How to add a button on Status Bar](#adding-a-button-on-status-bar) + +--- + +## Adding a button on Status Bar + +1. Import the `StatusBar` module. + + ```jsx + const StatusBar = brackets.getModule("widgets/StatusBar"); + ``` + + +2. Register the command. + + Register the command that will trigger the clicking. + + ```jsx + var MY_COMMAND_ID = "helloworld_sayhello"; + CommandManager.register("Hello World", MY_COMMAND_ID, handleHelloWorld); + ``` + + +3. Add the button to the StatusBar. + + To add the button to StatusBar, use `addIndicator()` :- + + +```jsx +StatusBar.addIndicator( + MY_COMMAND_ID, // unique ID for this indicator + $("