21 Replies Latest reply on Sep 4, 2015 8:31 AM by LeoTaro

    Create a custom dialog box

    omar.92

      I want to make a customized dialog box which triggers when a specific menuitem is clicked ?

      Where can I design my dialog box and populate specific data into it ? Is there any guide available for creating customized dialog boxes ? I looked into the guides provided along with illustrator sdk CS6 but found nothing relevant

        • 1. Re: Create a custom dialog box
          A. Patterson Level 4

          As of CS6, Illustrator provides no SDK for dialogs and a limited SDK for panels. In both cases, you are expected to use either a third party solution (we use Qt) or platform specific code (WIN32 or Cocoa).

          • 2. Re: Create a custom dialog box
            omar.92 Level 1

            Ok so once I create my dialog box with 3rd party app how do I integrate it into my code ?

             

            Like having an event handler for a menu item which invokes my new dialog box

            • 3. Re: Create a custom dialog box
              LeoTaro Level 4

              As Mr Patterson says, the SDK does not contain any way of creating dialogs since CS5. In CS6, the recommended way to create dialogs was using flex. Flex is still supported, but the recommended method now is using Html5. You can find examples of creating these dialogs in the *UI projects in the samplecode. You can also use Qt or native code if you don't want to keep up with the ever changing "recommended" method.

              • 4. Re: Create a custom dialog box
                A. Patterson Level 4

                When you click on the menuitem it should cause a caller/selector combination to get sent that represents a menu click. I forget the names, but the sample code will show you. If you're using the sample project skeleton, you should have methods you can just fill in. Otherwise you can catch the caller/selector combo and cast the message to the AIMenuMessage struct (or whatever it's called) and test which menuitem handle is being clicked. If the handle is the one for which you want to show the dialog, you just show it there.

                • 5. Re: Create a custom dialog box
                  omar.92 Level 1

                  A.Patterson I have created my GUI (dialog box) as C++ MFC Project and now I am stuck at how to link/invoke it with my customized menu item.

                   

                  Sample projects are not helping much :/ ?

                   

                  Can you guide me step by step as to how you guys integrate your Qt GUI in your illustrator API project ?

                  • 6. Re: Create a custom dialog box
                    Toto RoToTO Level 3

                    You could develop an hybrid extension. (Flex for your custom dialog bow  and C++ in charge of menu items).

                    Quite easy to do.

                     

                    Samples available in SDK.

                     

                    Thomas.

                    • 7. Re: Create a custom dialog box
                      A. Patterson Level 4

                      Adding Qt is not a set of simple steps. It's doable, but I simply don't have the time to go throught it.

                       

                      That said, I don't understand what the problem with the MFC dialog is. If you're catching when you should show the dialog, why can't you just show the dialog? I'm not familiar with MFC, but I expect the dialog will have a 'Show me' kind of function, just call that when the menuitem is clicked.

                      • 8. Re: Create a custom dialog box
                        LeoTaro Level 4

                        I guess the problem is that he has just created a standalone MFC dialog project, which has it's own entry point and message loop and he is trying to work out how to put that into an Illustrator plugin. Like with Qt it is probably not a simple process.

                         

                        I think the other problem with using native/Qt dialogs is that it is fairly easy to create a modal dialog, but not sure if it is possible to create the equivalent of an Illustrator panel, i.e. a dialog that is not modal but which stays on top of the main Illustrator window. This is one of the reasons I use flex, but would be interested to know if this is possible with Qt/MFC.

                        • 9. Re: Create a custom dialog box
                          A. Patterson Level 4

                          Oh, it absolutely is. I know you can put native widgets into a panel using the API in CS6+, I did that as part of the test bed in early CS6 beta. We still prefer Qt and we've been using it the panels since CS6 as well. Frankly, adding Qt to the panels was quite simple, but that's because we had solved most of the integration issues with putting Qt into an AI plugin ages earlier. Well, on PC it's easy, on Mac it was a fair bit more work. We're in the process of moving from Qt 4.7.x to 5.1 and, again, it's pretty easy on PC and a royal pain on Mac.

                          • 10. Re: Create a custom dialog box
                            LeoTaro Level 4

                            So do you create a panel using the AIPanelSuite and then populate it with Qt widgets? I can see how that would work. I thought you created the whole dialog using Qt.

                             

                            If you do use AIPanelSuite, then omar.92's approach of trying to use MFC is probably not the way to go. If he wants to use native windows controls I would suggest adding them to the AIPanel using the basic Win32 API.

                            • 11. Re: Create a custom dialog box
                              A. Patterson Level 4

                              Yeah, we use the AIPanelSuite and then graft a Qt widget onto it using QWinWidget (a class they provide for kind of 'engulfing' an existing window handle so you can use it as an ancestor to other QWidgets). It works really well, the only reason it's a pain on Mac is because their Window API seems to change every four years (though there is also a notable absence of a nice analog to QWinWidget for Mac).

                               

                              As for omar.92, I didn't realize he was trying to create a panel; he said dialog, so I assumed meant a normal modal dialog. If he's looking for a panel then he should be looking at the HTML5 route or AIPanelSuite + OS API. If it's a really simple panel (only a handful of controls) the latter is pretty easy.

                              • 12. Re: Create a custom dialog box
                                LeoTaro Level 4

                                Yes, you're right he did say he wanted a dialog, so could possibly do it with an MFC dialog.

                                • 13. Re: Create a custom dialog box
                                  Toto RoToTO Level 3

                                  I do not agree.

                                  Adobe provides tools to do such things.

                                  You can develop extension (flex or HTML5 depending on CS revision) to do that.

                                  No need to you third party tools. (Qt or whatever)

                                  It is up to you.

                                  • 14. Re: Create a custom dialog box
                                    LeoTaro Level 4

                                    I agree that flex was the best option for CS6 and original CC versions, but Adobe are now threatening to drop support for flex. The good thing about flex was it matched the look and feel of the standard panels.

                                     

                                    Have you used HTML5 much? I had a look at a couple of the example UI projects and the GUI looked terrible.

                                    • 15. Re: Create a custom dialog box
                                      Toto RoToTO Level 3

                                      Flex -> CS5, CS6,

                                      HTML5/CSS3 -> CC 2015 (flex is no more supported).

                                      This is quite powerful. You can do whatever you want.

                                       

                                      Take a look at:

                                       

                                      https://github.com/Adobe-CEP/CEP-Resources/wiki/CEP-6-HTML-Extension-Cookbook-for-CC-2015# development_debugging

                                       

                                      https://github.com/Adobe-CEP/Samples

                                       

                                      Very helpful.

                                       

                                      Thomas.

                                      • 16. Re: Create a custom dialog box
                                        omar.92 Level 1

                                        A. Patterson Yes I was talking about a dialog box not a panel

                                         

                                        Ok the current scenario is that I have a seperate plugin C++ Project and created a seperate MFC C++ Project containing my dialog box.

                                         

                                        What I want is that when I click on my customized menu item my MFC C++ dialog box should be displayed. I've been stuck on this problem for a few days and I tried to see the sample problem but been having problem with the Flash Builder environment

                                         

                                        Can you kindly tell me the process of how I can achieve this functionality. I created 2 separate projects is that alright or wrong ? Should both the plugin code and Custom UI code be in 1 single project and also kindly tell me on click event name for this customized menu item I created.

                                         

                                        I'd really appreciate the help

                                        • 17. Re: Create a custom dialog box
                                          A. Patterson Level 4

                                          Well, it's probably possible to write the dialog project in such a way (dynamic library I think) that you can call it from the plugin, but you could also just do it from inside the plugin project. Though I'll admit, I don't know how easy it is to add MFC to a plugin. I don't expect it should get in the way, but I understand why you created a separate one -- MS provides a wizard for creating an MFC dialog project but not for adding MFC to an existing project.

                                           

                                          I still think you'd be better off just adding whatever you need to your plugin. I'm 100% sure you could do that easily with straight up WIN32 calls, but I don't know how complicated your dialog is -- it'll be much less modular than MFC would be. But as I said, I have zero experience in adding MFC to a plugin project. It might be as simple as looking at the project settings in the MFC project and adding some of them to the plugin project (e.g. input libraries, include paths, etc.). But I don't know.

                                          • 18. Re: Create a custom dialog box
                                            omar.92 Level 1

                                            A. Patterson,

                                             

                                            Thanks for your valuable help. Yeah it isn't as easy at I thought initially. I've been banging my head around this for almost 3-4 days now

                                             

                                            Ok well can you tell me what environment I need to setup to run sample UI projects for Adobe Illustrator CS6. I currently have Flash Builder 4.6 installed.

                                             

                                            According to the Programmer's guide provided with SDK it says that

                                             

                                            choose File > Export > Adobe Creative Suite Extension Builder > Creative Suite Extension

                                             

                                            but in my case after Export option I don't see option of Adobe Creative Suite Extension Builder

                                             

                                            The only option I have left now is to see how the sample project creates a custom UI and from there on do some reverse engineering

                                            • 19. Re: Create a custom dialog box
                                              A. Patterson Level 4

                                              I've never used the Flash or HTML extension approach to UI, so I'm afraid I don't have any help to offer. Someone else in here might though, it sounded like a couple of people had tried their hand.


                                              That said, I do think that grabbing one of the samples and pulling it apart is a good idea. That's how I started way back when

                                              • 20. Re: Create a custom dialog box
                                                LeoTaro Level 4

                                                I used Flash builder a long time ago, but when the demo period was running out I worked out what it was doing in the background and created command line scripts to do the same thing. I did try and use it again about 6 months ago to look at the HTML5 stuff, but couldn't get it to work. I can't remember the exact errors but I think it was similar to what you are seeing.

                                                 

                                                If you want to use native code, I would suggest using the basic Win32 SDK rather than MFC as MFC is very bloated. Here's something to get you started.

                                                 

                                                1. Create a file called resource.h containing:

                                                 

                                                //{{NO_DEPENDENCIES}}

                                                // Microsoft Visual C++ generated include file.

                                                // Used by test.rc

                                                //

                                                #define IDD_POPUP                       101

                                                #define IDC_SUBMIT                      1001

                                                #define IDC_NAME                        1002

                                                 

                                                 

                                                // Next default values for new objects

                                                //

                                                #ifdef APSTUDIO_INVOKED

                                                #ifndef APSTUDIO_READONLY_SYMBOLS

                                                #define _APS_NEXT_RESOURCE_VALUE        102

                                                #define _APS_NEXT_COMMAND_VALUE         40001

                                                #define _APS_NEXT_CONTROL_VALUE         1003

                                                #define _APS_NEXT_SYMED_VALUE           101

                                                #endif

                                                #endif

                                                 

                                                2. Create a file called popup.rc containing:

                                                 

                                                // Microsoft Visual C++ generated resource script.

                                                //

                                                #include "resource.h"

                                                 

                                                 

                                                #define APSTUDIO_READONLY_SYMBOLS

                                                /////////////////////////////////////////////////////////////////////////////

                                                //

                                                // Generated from the TEXTINCLUDE 2 resource.

                                                //

                                                #include "afxres.h"

                                                 

                                                 

                                                /////////////////////////////////////////////////////////////////////////////

                                                #undef APSTUDIO_READONLY_SYMBOLS

                                                 

                                                 

                                                /////////////////////////////////////////////////////////////////////////////

                                                // English (United Kingdom) resources

                                                 

                                                 

                                                #if !defined(AFX_RESOURCE_DLL) || defined(AFX_TARG_ENG)

                                                LANGUAGE LANG_ENGLISH, SUBLANG_ENGLISH_UK

                                                 

                                                 

                                                #ifdef APSTUDIO_INVOKED

                                                /////////////////////////////////////////////////////////////////////////////

                                                //

                                                // TEXTINCLUDE

                                                //

                                                 

                                                 

                                                1 TEXTINCLUDE

                                                BEGIN

                                                    "resource.h\0"

                                                END

                                                 

                                                 

                                                2 TEXTINCLUDE

                                                BEGIN

                                                    "#include ""afxres.h""\r\n"

                                                    "\0"

                                                END

                                                 

                                                 

                                                3 TEXTINCLUDE

                                                BEGIN

                                                    "\r\n"

                                                    "\0"

                                                END

                                                 

                                                 

                                                #endif    // APSTUDIO_INVOKED

                                                 

                                                 

                                                 

                                                 

                                                /////////////////////////////////////////////////////////////////////////////

                                                //

                                                // Dialog

                                                //

                                                 

                                                 

                                                IDD_POPUP DIALOGEX 0, 0, 316, 183

                                                STYLE DS_SETFONT | DS_MODALFRAME | DS_FIXEDSYS | WS_POPUP | WS_CAPTION | WS_SYSMENU

                                                CAPTION "Dialog"

                                                FONT 8, "MS Shell Dlg", 400, 0, 0x1

                                                BEGIN

                                                    DEFPUSHBUTTON   "OK",IDOK,75,162,50,14

                                                    PUSHBUTTON      "Cancel",IDCANCEL,171,162,50,14

                                                    LTEXT           "Please enter your name:",IDC_STATIC,48,31,84,14

                                                    PUSHBUTTON      "Submit",IDC_SUBMIT,95,52,50,14

                                                    EDITTEXT        IDC_NAME,135,27,83,14,ES_AUTOHSCROLL

                                                END

                                                 

                                                 

                                                 

                                                 

                                                /////////////////////////////////////////////////////////////////////////////

                                                //

                                                // DESIGNINFO

                                                //

                                                 

                                                 

                                                #ifdef APSTUDIO_INVOKED

                                                GUIDELINES DESIGNINFO

                                                BEGIN

                                                    IDD_POPUP, DIALOG

                                                    BEGIN

                                                        LEFTMARGIN, 7

                                                        RIGHTMARGIN, 309

                                                        TOPMARGIN, 7

                                                        BOTTOMMARGIN, 176

                                                    END

                                                END

                                                #endif    // APSTUDIO_INVOKED

                                                 

                                                 

                                                #endif    // English (United Kingdom) resources

                                                /////////////////////////////////////////////////////////////////////////////

                                                 

                                                 

                                                 

                                                 

                                                 

                                                 

                                                #ifndef APSTUDIO_INVOKED

                                                /////////////////////////////////////////////////////////////////////////////

                                                //

                                                // Generated from the TEXTINCLUDE 3 resource.

                                                //

                                                 

                                                 

                                                 

                                                 

                                                /////////////////////////////////////////////////////////////////////////////

                                                #endif    // not APSTUDIO_INVOKED

                                                 

                                                3. Add the above two files to your plugin project. Add the following to the top of your plugin code

                                                 

                                                #include "resource.h"

                                                 

                                                 

                                                EXTERN_C IMAGE_DOS_HEADER __ImageBase;

                                                #define HINST_THISCOMPONENT ((HINSTANCE)&__ImageBase)

                                                 

                                                 

                                                int CALLBACK DialogMsgHandler(HWND hDlg, UINT message, WPARAM wParam, LPARAM lParam)

                                                {

                                                  switch (message)

                                                  {

                                                  case WM_INITDIALOG:

                                                  return 1;

                                                 

                                                 

                                                  case WM_COMMAND:

                                                  switch (LOWORD(wParam))

                                                  {

                                                  case IDOK:

                                                  case IDCANCEL:

                                                  EndDialog(hDlg, LOWORD(wParam));

                                                  return 1;

                                                  case IDC_SUBMIT:

                                                  {

                                                  char buffer[512];

                                                  GetDlgItemText(hDlg,IDC_NAME,buffer,512);

                                                  std::stringstream msgSS;

                                                  msgSS << "Your name is " << buffer;

                                                  MessageBox(hDlg,msgSS.str().c_str(),"Information",MB_OK);

                                                  }

                                                  break;

                                                  }

                                                  break;

                                                  }

                                                  return 0;

                                                }

                                                 

                                                 

                                                4. When your menu item is selected your plugin GoMenuItem function will be called. Add the following code to the handler:

                                                 

                                                HWND parent = NULL;
                                                AIAppContextSuite *appSuite;
                                                msgData->basic->AcquireSuite(kAIAppContextSuite,kAIAppContextSuiteVersion,(const void **)&appSuite);
                                                appSuite->GetPlatformAppWindow(&parent);
                                                msgData->basic->ReleaseSuite(kAIAppContextSuite,kAIAppContextSuiteVersion);
                                                DialogBox(HINST_THISCOMPONENT, MAKEINTRESOURCE(IDD_POPUP), parent, DialogMsgHandler);
                                                • 21. Re: Create a custom dialog box
                                                  LeoTaro Level 4

                                                  You can change the controls in the dialog by opening the popup.rc file in Visual Studio.