JetBrains is so awesome that every programmer can find their own development tool on the JetBrains website. These development tools bring us great convenience in our work. A variety of basic plug-ins, third party plug-ins, really who knows who uses, quick code hints, syntax detection, and more importantly provides a lot of UI plug-ins. Once UPON a time, I also thought that I could develop an IDEA plug-in by myself. Finally, after more than a week’s exploration, I could also develop a plug-in in a so-so way. I’m sure you’ll be able to develop a plugin of your own after reading this article!

What am I going to do?

To start, our deployment environment flow looks like this

  • test
  • Beta
  • gray
  • A formal

So our normal release code flow is to merge the development nodes into some environment branch and deploy them using the deployment system! Basically, there are two processes,

1. Merge branches

2. Release code

So for these two actions, we will develop such a plug-in, directly in IDEA to do all the above things.

Installation environment

There are many tutorials on the Internet, most of which are identical and copied from each other! The official also has the tutorial, but the official that document, anyway I can’t read! Just use our current IDEA,

Next, fill in the basic information, package name, etc. Then wait until you build Gradle projects.

Once built, be sure to reconfigure the SDK

Build a plugin SDK, just follow the steps, because we need to use the plugin SDK to develop the plugin, the native SDK can not meet us!

For those of you who are a little slow, you can configure two parameters, which I also saw on the Internet,

  • In the ~ /. Gradle/gradle. The properties in this file to recover org. Gradle. The daemon = true, no file, create a can.

  • Modify the build. Gradle

    Repositories {mavenLocal () / / add this address maven {url "https://maven.aliyun.com/nexus/content/groups/public/"}}Copy the code

build.gradle

A brief introduction to this file, POM file of type Maven, manages the configuration of the project. Focus on a few important areas and the rest does not affect the development process. You can compare your original project.

Dependencies {implementation 'cn. Hutool :hutool-all:5.7.14' implementation "Com. Squareup. Okhttp3: okhttp: 3.3.1" compileOnly group: 'org. Projectlombok' name: 'lombok, version: '1.18.20' annotationProcessor Group: 'org. projectLombok ', name: 'Lombok ', version: '1.18.20' testImplementation 'org. Junit. Jupiter: junit - Jupiter - API: 5.7.0' testRuntimeOnly 'org.junit. Jupiter :junit-jupiter-engine:5.7.0'} // The update log will be displayed in the plugin introduction. patchPluginXml { changeNotes = """<ul>
        1.0.0
        <li>Support for publishing code</li>
        <li>Performing tasks</li>
     </ul>
    """
}
Copy the code

plugin.xml

This is where you configure the plug-in functionality, sort of like the Xml file for Spring management beans! Open it yourself. It will be introduced in detail in actual combat. A normal initial plug-in project would look something like this!

In actual combat

This time I want to make such a plug-in!

Because our publishing system requires login, I added an operation of authorization Token, that is, to get the Token and put it into the cache.

Some say it’s unnecessary? Log in to the system and release it! But in my opinion, the result is not important, the important is the process!

Three actions

First, we need to authenticate, get the Token and save it in the cache, then select the node to publish the task to the corresponding environment, and finally review the task just submitted. Then split the next steps as follows!

1. Grant tokens

2. Release code

3. Review code

I believe programmers are more or less familiar with the three swordsmen of the web page, the basic construction of the web page, or the basic composition of the App page, then IDEA plug-in is similar to the design IDEA, but the language is changed, the implementation process is not the same!

Java write GUI program, we want to understand Java’s basic tool class Swing, it is a GUI toolkit designed for Java. It provides a lot of basic components: text boxes, buttons, split panes, tables, etc.

Interface code

The DialogWrapper class in the SDK provides us with a standard page component framework. We implement this class, and in most cases we just implement some methods of this class. Almost all of our components above are based on this class, the difference is that we just need to implement different components!

Write the interface

/ * * *@author Savey
 * @date2021/10/19 21:50 * /
public class LoginFormDialog extends DialogWrapper {

    private final Project project;

    /** * text box */
    private final JTextField userText = new JTextField(20);

    /** * Password box */
    private final JPasswordField passwordText = new JPasswordField(20);

    
    public LoginFormDialog(@Nullable Project project) {
        super(project);
        this.project = project;
        setTitle("Authorized Login");
        setSize(350.200);
        init();
    }

	
     /** * Core methods, create the middle part of the UI panel, Jpanel can be considered DIV box model */
    @Override
    protected @NotNull JComponent createCenterPanel(a) {
       final JPanel panel = new JPanel();
      	// Cache records
        PropertiesComponent cache = project.getService(PropertiesComponent.class);
        /* We don't do much about the layout */
        panel.setLayout(null);

        / / create a JLabel
        JLabel userLabel = new JLabel("Account :");
        /* This method defines the location of the component. * /
        userLabel.setBounds(40.30.80.25);
        panel.add(userLabel);

        /* * Creates a text field for user input */
        userText.setBounds(140.30.165.25);
        userText.setText(cache.getValue("userName"));
        panel.add(userText);

        // Enter the text field for the password
        JLabel passwordLabel = new JLabel("Password:");
        passwordLabel.setBounds(40.60.80.25);
        panel.add(passwordLabel);

        /* * This is similar to the text field */ used for input
        passwordText.setBounds(140.60.165.25);
        passwordText.setText(cache.getValue("password"));
        panel.add(passwordText);

        return panel;
    }


    @Override
    protected void doOKAction(a) {
     			// Here click OK button action, here we are going to call API get TOKEN, put in cache!
      		
      		// Form validation...
      
      		// Create a Service and call a method just like normal Java code.
     
      	  / / the UI
    }
Copy the code

Actually write this interface I also write for a long time, referred to a lot of information, the main reference W3C teaching, roughly such a writing method! A bit wordy!

One of the most difficult to write is Table! Debugging for a long time ~~~

Create action

Next, create an action that causes the authorization pop-up to pop up in the current IDEA!

New -> Plugin DevKit ->Action->OK

After clicking OK, IDEA automatically generates the following code in plugin.xml.

<actions>
  	<action popup="true" class="cn.qmai.idea.action.LoginDialogAction" text=Authorized the Token" description="In Opms" id="loginDialogAction" />
<actions/>
Copy the code

An

tag represents an action action.

/ * * *@author Savey
 * @date2021/10/19 18:10 * /
public class LoginDialogAction extends AnAction {

    @Override
    public void actionPerformed(@NotNull AnActionEvent e) {
      	IDEA is an application. One application can open multiple projects. The Project object corresponds to the currently opened Project.
        Project project = e.getProject();
        assertproject ! =null;
      	/ / LoginFormDialog instance
        DialogWrapper formDialogIns  =	new LoginDialogAction(project);
      	// Display the interfaceformDialogIns.show(); }}Copy the code

Put the action on the corresponding menu

<actions>
       <action popup="true" class="cn.qmai.idea.action.LoginDialogAction" text=Authorized the Token" description="In Opms" id="loginDialogAction" />
				
        // I created a Group and put all the actions in my Group, and then put the Group in ToolsMenu
        <group popup="true" id="qmOmpsActionGroup" text="Opms assistant" icon="QmOpmsIcons.QmOpmsMenuActions">
            <reference ref="loginDialogAction" />
            <add-to-group group-id="ToolsMenu" anchor="last" />
        </group>
</actions>
Copy the code

The

tag means a Group of buttons, a Group of actions! Obviously I’m just going to put the

tag inside. Similar to Spring’s bean.xml!

The

tag adds the current tag to the specified group. In this case, I used ToolsMenu (Toosl for IDEA). Of course, you can also specify a custom

or

ID.


Alternatively, you might add shortcuts for each Action,

<actions>
  <action popup="true" id="publishProject" class="cn.qmai.idea.action.PublishProjectAction" text="Release code" description="Release code">
            <keyboard-shortcut keymap="$default"
                               first-keystroke="shift ctrl I"/>
        </action>
</actions>
Copy the code

< keyshortcut > add hotkeys, may conflict with the system, you can modify it in KeyMap!

Start the

This is the same as IDEA, click RUN, will open a built-in IDEA for debugging! DEBUG code is the same as normal IDEA.

The code directory

There are a lot of knowledge points are not put out, but these things are enough to write a simple plug-in, interested students can communicate together! Because the code integrated a lot of private things, the source code will not be put out!