«
»

Creating dialog in CodeCharge Studio

November 21st, 2009

first-ccs-dialogThis article provides CodeCharge Studio developers with a truly easy way to create a custom IDE dialog for different purposes. Here You will learn how to extend CodeCharge Studio with Your own dialog. I am going to explain how to create a custom dialog through an example. We will create together a dialog for embedding a Flash movie into the page. See online example to understand what You will be able to do with help of the dialog. Also, here You can download a source code of the dialog and extend Your CodeCharge Studio with it. In addition to downloading a source code You can download a test project that has a page where a Flash Movie embeded by this dialog. So, let’s start!

1. ToolBox

First of all, we should add a button that runs a dialog. Usually, the dialogs of this type are run from ToolBox. Therefore, we should add a button to ToolBox. By default, ToolBox consists of three tabs: Builders, Forms and HTML. Let’s add our button to the HTML tab. For that we have to create a simple XML file in Components/ToolBox/HTML. Name it FlashMovie.xml.

The contents of this file:

 version="1.0" encoding="ISO-8859-1"?>
 name="TB_FormsFlashMovieName" 
    number="777" 
    hint="TB_FormsFlashMovieHint" 
    script="..\..\..\Components\Dialogs\HTML\FlashMovie\FlashMovie.js" 
    img="..\..\Icons\Image.ico" />
Attribute Description
name A name of the ToolBox item. Contains a translation key. Translation keys will be discussed a bit later. This attribute is mostly used for internal needs and we are able to use it for our needs.
number An ordered number of the button. It specifies the position of the button in ToolBox tab. I set its value to 777 to have it last.
hint Tooltip text. Appears as a hint when you move a mouse over the button. Contains a translation key.
script Path to script that runs a dialog. We’ll discuss it later.
img An icon for the button. I’ve chosen an icon that is used for tag but You can create an icon yourself and put it to Components/Icons.

2. Translations

All the translations are located in Components/Translations/IDE. To make the translation keys translated You should add them to the text file of your language. For example, to English.txt. CodeCharge Studio should be restarted then translations will be applicable.

TB_FormsFlashMovieName=Flash Movie
TB_FormsFlashMovieHint=Add Flash Movie

Anyway, You may use just string constants instead of translation keys and everything will be working. Minuses of this approach are that our code isn’t translatable and it’s a bad form. Therefore, we are using translation keys in our example.

3. Dialog HTML skeleton

Most of Dialogs in CodeCharge Studio are made out of HTML, CSS and JavaScript. HTML and CSS makes a visual presentation of dialogs. A program logic of dialogs is realized with help of JavaScript. Also, JavaScript deals with IE and CodeCharge Studio object models.

It’s a good form to put script that runs a dialog and dialog’s HTML to the same directory. Let’s create a directory Components/Dialogs/HTML/FlashMovie and an empty text file with the name FlashMovie.html.

Please, put the contents below into the FlashMovie.html. It’s HTML skeleton of the dialog.


"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <link rel="stylesheet" href="../../dialogs.css" type="text/css">
  <script type="text/javascript" src="../../Common/Common.js"></script>
  <script type="text/javascript">
    var ccObject, ccApplication, ccProject, ccPage;
 
    function body_onload() {
      // gets Project object
      // it comes from FlashMovie.js
      // FlashMovie.js starts the dialog
      ccObject = ccProject = window.external.dialogArguments;
      // gets current Page object
      ccPage   = ccObject.currentPage;
      // gets Application object
      ccApplication = ccProject.Application;
 
      // translates all the translation keys in the dialog
      TranslateDlg();
      // sets event handlers
      SetUpKeysHandler();
      // sets dialog sizes and shows dialog
      dialogResize(400,175);
 
      // sets dialog title
      window.external.caption(getTranslationString("FlashMovieDialog_Title"));
    }
  </script>
  </head>
  <body onload="body_onload()">
  </body>
</html>
FlashMovieDialog_Title A translation key. You should put it and its value into English.txt, for example.
../../dialogs.css A standard styles file for CodeCharge Studio dialogs.
../../Common/Common.js A common JavaScript functions for CodeCharge Studio dialogs. It isn’t only one file with common functions. There are some others.
body_onload() This function is called when dialog runs. Here we will get some parameters, set dialog sizes, etc.

Dialog HTML skeleton’s been done!

4. Script that runs dialog

As you remember, in the ToolBox button XML we specified what script runs dialog. It’s FlashMovie.js. It should be located in the Components/Dialogs/HTML/FlashMovie as well as FlashMovie.html.

Well, let’s analize the contents of this script:

// includes common functions
#include ..\..\Common\Common.js
 
// ccPage - an object that comes from CCS OM
// with help of ccPage we get reference to Project object
var ccObject    = ccPage.Project;
// if we have Project we can get current Page
var currentPage = ccObject.currentPage;
 
if (currentPage) {
  // getTranslationString() - Components/Common.js
  // starts a transaction for UnDo/ReDo
  var trans = ccObject.Application.undobuffer.starttransaction(
    getTranslationString("Toolbox_Undo_AddNewComponent", 
    getTranslationString("TB_FormsFlashMovieName")), "", currentPage);
 
  if (trans) {
    try {
      // RunDialog2() - Common.js
      // Runs dialog FlashMovie.html and passes Project object into it
      var result = RunDialog2("HTML\\FlashMovie\\FlashMovie.html", ccObject);
 
      if (result) trans.commit();
      else trans.rollback();
    } catch(e) {
      // if something worng show an error
      ccObject.Application.ShowErrorInfoDlg(0, currentPage);
      trans.rollback();
    }
  } else {
    // MessageBox - Components/Common.js
    MessageBox(getTranslationString("Toolbox_Undo_TransactionAlreadyOpened"));
  }
}
#include A proprietary directive that includes scripts into scripts.
getTranslationString() Declared in Dialogs/Common/Common.js. It returns a translated string by translation key. Translation keys may include %s placeholders. For example, look at the key “Toolbox_Undo_AddNewComponent=%s was added”. This key is used in the settransaction(). It gets two parameters: first one for translation key and the second one for the placeholder value.

I think everything else in this script You can understand through comments in the script. If I am wrong You may ask me for some explanations.

Now, having the ToolBox button, translations, HTML and JavaScript code of the dialog, You may try to start the dialog. But at the moment You are having an empty window. That’s good! Let’s go ahead! :)

5. Preparing HTML template

As our purpose is to understand how the CodeCharge Studio dialogs are created I’ve simplified the logic of the dialog. In the dialog we will ask user for the Flash Movie file, width and height of the movie. Nothing more. The HTML code that will be pasted to a page is based on the following template:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" 
  width="{width}" height="{height}">
    <param name="movie" value="{movie}">
    <param name="quality" value="high">
    src="{movie}" quality="high" 
      pluginspage="http://www.macromedia.com/go/getflashplayer" 
      type="application/x-shockwave-flash" 
      width="{width}" height="{height}"></embed>
</object>

Placeholders:

{movie} Path to the Flash Movie (*.swf). It should be located in the project folder.
{width} Width of the movie.
{height} Height of the move.

We will process this template when the OK button is clicked. The placeholders will be replaced with the real values. After processing the template the resultant HTML code will be pasted into a page.

6. Dialog presentation

As I’ve written above the HTML presentation of the dialog is made up with help of HTML and CSS. Sometimes, JavaScripts is used to add some dynamics. OK, here is HTML that should be placed to

of FlashMovie.html: 

<table id="content" style="margin:5px;" class="table">
<tr>
  <td>
    
    <label for="swf">FlashMovieDialog_Swf</label>
  </td>
  <td colspan="2">
    
    <input type="text" id="swf" size="40" maxlength="255">
    
    <button class="button" onclick="browseForSwf();" style="width:30px;">
      ...
    </button>
  </td>
</tr><tr>
  <td>
    <label for="swfWidth">FlashMovieDialog_SwfWidth</label>
  </td>
  <td style="width:100px;">
    
    <input type="text" id="swfWidth" size="4" maxlength="4" value="200">
  </td>
</tr><tr>
  <td>
    <label for="swfHeight">FlashMovieDialog_SwfHeight</label>
  </td>
  <td style="width:100px;">
    
    <input type="text" id="swfHeight"size="4" maxlength="4" value="200">
  </td>
</tr>
</table>
<hr>

<button class="button" onclick="OnCancel();" 
  style="float:right;margin-right:10px;">
  Button_Cancel
</button>

<button class="button" onclick="OnOK();" 
  style="float:right;margin-right:3px;">
  Button_OK
</button>

7. Dialog logic

The last step is creating some JavaScript functions. These functions helps us to make the logic of our dialog. Here we define handlers for OK and Cancel buttons as well as for button that opnes an Open File dialog to select an swf (Flash Movie), also we can put here some checkers, etc. So, add this code after the body_onload() function.

// closes the dialog without changes
function OnCancel() {
  // closes the dialog and returns false to dialogs caller
  window.external.cancel();
}
 
// applies changes and closes the dialog
function OnOK() {
  // checks if the entered data is valid
  if (!CheckData()) return false;
  // applies changes
  OnApply();
  // closes the dialog and returns true to the dialogs caller
  window.external.ok();
}
 
function OnApply() {
  // defines HTML template for the Flash Movie
  var htmlTemplate = "\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\"";
  htmlTemplate += " codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0\"";
  htmlTemplate += " width=\"{width}\" height=\"{height}\">";
  htmlTemplate += "\"movie\" value=\"{movie}\">";
  htmlTemplate += "\"quality\" value=\"high\">";
  htmlTemplate += "\"{movie}\" quality=\"high\""
  htmlTemplate += " pluginspage=\"http://www.macromedia.com/go/getflashplayer\""
  htmlTemplate += " type=\"application/x-shockwave-flash\""
  htmlTemplate += " width=\"{width}\" height=\"{height}\">";
  // gets the Flash Movie source
  var movie = document.getElementById("swf").value;
  // gets the width
  var width = document.getElementById("swfWidth").value;
  // gets the height
  var height = document.getElementById("swfHeight").value;
  // parses the template
  var result = htmlTemplate.replace(/\{movie\}/gi, movie);
  result = result.replace(/\{width\}/gi, width);
  result = result.replace(/\{height\}/gi, height);
  // inserts HTML to the page
  // declared in Components/Common.js 
  pasteHTML(result);
}
 
// checks the entered data for validity
function CheckData() {
  // put here some checks if You need
  return true;
}
 
// opens an Open File dialog to select swf (Flash Movie)
// returns a project relative path to selected swf
function browseForSwf() {
  var projectPath = ccProject.Path;
  // browseFile() - Components/Common.js
  browseFile(
    document.getElementById("swf"), /* puts the path to this control */
    true, /* relative path */
    getTranslationString("Dialogs_FileFilter_Swf"), /* file filter */
    projectPath, /* source directory */
    false, /* return with backslashes */
    true /* only project files */
  );
}

Conclusion

And now Your dialog should work! Congratulations :)

You can test it by placing a Flash Movie into a project folder and pasting it into a page with help of Your dialog. Then go to Project->Settings->Publishing and configure extesions of the publishing files, in general, add swf extension. Then publish a project and enjoy Your work! :)

You can download here the source code of the dialog and copy it to Your Components folder. But be careful with translations, You should copy text from the example file Components/Translations/IDE/English_example.txt and paste it to the end of the file Components/Translations/IDE/English.txt of Your Components.

I’ve tested this example in CodeCharge Studio 3 and 4.

If You have questions or wishes I am waiting for Your comments. I am also going to publish some other articles about extending CodeCharge Studio as well as about CCS features.

Download

Dialog Source Code (FirstDialogSrc.zip)

Test Project (FirstDialog.zip)

Links

CodeCharge Studio’s web site

Flash example

Try Artisteer to generate themes for CodeCharge Studio

Posted in codecharge

12 Responses to “Creating dialog in CodeCharge Studio”

  • ????????:
    November 28, 2009 at 3:06 pm

    ???????, ????? ?????????. ???? ?????? ??? Yes ?????????? ????? ??????? ???? ??? ?????????? ?????? ???????????…

  • Vacheslav:
    November 28, 2009 at 3:27 pm

    ??? ??????????? ????????? :) ????, ???? ????????????, ?? ??? ?? ??? ??????.

  • ????????:
    November 29, 2009 at 1:25 pm

    ?? ??. ?? ??? ???? ????????? :) )

  • Oliver:
    December 1, 2009 at 11:29 pm

    Thank you, this is a very good start!
    Do you think that it would be possible to develop some kind of wizard for creating extensions?
    The other thing that I’d like to ask is how to add more Shading styles to CCS’s Style Builder?
    I don’t like the existing styles so I created my own by modifying red template images of one of the four existing Shading styles.
    It would be very helpful the user could add his own templates to the different sections of the style builder and have the ability to export/import these templates.

  • Vacheslav:
    December 2, 2009 at 10:29 am

    Hi, Oliver!
    You see, it’s only a starting point and without this you cannot go ahead. I think user need to understand all of the parts of this article to build more complex dialogs and wizards. To develop wizards like Grid Builder and others you should use the approaches above + other approaches to work with OM etc.
    As for styles, I prefer to use Artisteer to build styles for CCS or to build styles manually. As to CCS’s Style Builder, You can create some new styles only based on existing styles in the Style Builder. Also, You can manually modify images of an existing style and I suppose that You can modify CSS styles but You should not regenerate Your style with Style Builder because Your modifications will be rewritten.
    As I know there will be some new functionality with templates in CCS5 but it’s not a part of Style Builder.

  • Oliver:
    December 4, 2009 at 12:40 am

    Thanks for replying, Vacheslav!
    Do you have any good examples of Artisteer’s styles for the grids and forms?
    Regarding the CCS’s Style Builder. I modified template images in C:\Program Files\CodeChargeStudio3\Components\StylesLibrary\FormTitle\1_4
    so I generate my own styles straight from CCS.

  • Vacheslav:
    December 4, 2009 at 12:58 pm

    Yes, I have some examples You asked. I’ll publish them here when I have a bit of free time :)

  • :
    December 18, 2009 at 3:04 am

    Hi and thank you :-)

    This is a great thing, a missing in doc.

    Can you make a dialog box that would create from any/current project a template project.

    As some ready to use projects that comes with CCS.
    This is what I’m missing in CSS (last 7 years have been waiting for this.)

    I could make by placing and editing files manually but still did not work ok and every new CSS update required editing …

    keep up the good work :-)

    feha

  • Robert:
    January 26, 2010 at 4:21 pm

    Thanks for this great tutorial!!! Is it possible to create a dialog, that inserts certain code snippet into the section of the HTML, and other code snippet into the section? If yes, would you so kind to provide a small example please?

  • Vacheslav:
    January 27, 2010 at 12:08 pm

    Robert, I think it’s possible. But could You provide more detailed description of what you want?

  • Manolis:
    February 7, 2010 at 8:03 pm

    Thanks for this great tutorial!!! Very good if you want to expand an existed component, for example to change the service json format builder.

    Manolis

  • Condenser Microphone:
    January 29, 2011 at 3:36 am

    -’. I am really thankful to this topic because it really gives up to date information -’.

Links:
  • alt-checkbox jQuery plugin
Search
Categories
Archives

Copyright © 2009 Vacheslav Starikov. All Rights Reserved.