How to execute additional SQL in After Execute family

events in CCS
October 23rd, 2010
Hi! This article is about how to execute some addtitional SQL after the primary SQL in the
CodeCharge Studios Record has been executed.
Very often I have to perform some additional manipulations with the database after the Record
submission. In this article I want to share the approach I use to reach the desired result. If you
use a different approach to reach the same result Im waiting your comments!

So, herere some steps:
1. You should have already a Record that performs Insert, Update or Delete.
2. Choose the event you will work with. It may be After Execute Insert, After Execute Update
or After Execute Delete. Ive chosen After Execute Insert to test with it in this example.
3. Add the Custom Code to the After Execute Insert event of the Record.
4. Try this code:
/* $master is a Record we work with.
* In the next line condition we check that no errors have been occured.
*/
if($master->ds->Errors->Count() == 0 && $master->ds->CmdExecution) {
// In the code below, we get the ID that has been inserted last time.
$db = new clsDBTest();
$db->SQL = 'SELECT LAST_INSERT_ID() AS master_id';
$db->query($db->SQL);
$result = $db->next_record();

if ($result) {
$master_id = $db->f("master_id");
} else {
$master_id = -1;
}

$db->close();

/* In this code snippet, we insert a new record to
* another "details" table with the "master id" value.
*/
if ($master_id != -1) {
$db = new clsDBTest();
$db->SQL = "INSERT INTO details (`master`, `test_field`) ";
$db->SQL += "VALUES ($master_id, 'test')";
$db->query($db->SQL);
$db->close();
}
}
By the way, in this example I use PHP and MySQL. If you have an another configuration I think
you can simply adapt this example to your configuration.
Hiding Link by condition in CCS
October 23rd, 2010
Once my friend asked me about how to hide the Link in CodeCharge Studio by the condition.
For example, suppose that we want to hide the Link if the one particular parameter exists in the
GET request. I tryed to show it quickly to him but I wasnt able. I added Hide-Show
Component action to the Before Show event of the page. Link still was there. I was confused.
We decided to seek help in source material (Help topics F1) and we found! The problem was in
Visible property of the Link. Lets see the Visible Property description in CCS help.
When set to Dynamic, the component is wrapped within a special HTML template that
allows it to be hidden programmatically at runtime.
In such a way, to fix this problem set Visible property of the Link to Dynamic and add Hide-
Show Component action to the Before Show event of the Link.
This approach is valid also for:
TextBox
TextArea
CheckBox
Image
Image Link
Radio Button
ListBox
May be some other controls



UTF-8 problem in CCS monolingual project
October 16th, 2010
Hi everybody! Ive just run into an obstacle related with UTF-8 encoding in CodeCharge Studio.
I have a one language project. The project is in russian. I want to use UTF-8 for my project but
the project isnt internationalized. So, I removed the english language and added a russian. Also,
I turned off the using of internationalized features (Project Settings -> Locales and Encodings ->
Use internationalized features) because the project isnt multilingual. As a result, I have a
corrupted text (question marks everywhere).
I started to experiment. The problem was in checkbox Use internationalized features. After I
checked it the encoding fixed! Huh!






Changing HTML standards of an existing CodeCharge
Studio project
October 1st, 2010
Ive just tryed to change the template type of an exiting project in CodeCharge Studio. To my
surprise, there isnt an option in CCS to change the project template or Section508 compatibility.
When you create a new project in CodeCharge Studio, it allows to create a project that is
compatible with HTML or XHTML standards. Also, theres an option that turns on Section508
compatibility.
But what should you do when you need to change these options of an existing project?
As Ive just found out that theres only one way to change them. You should modify the project
file. CCS project file is saved in XML format and it has a *.ccs extension.
<Site ... htmlTemplateType="xHTML" isSection508="True" ... />
To change the template type you should change htmlTemplateType attribute. Allowed values
are: HTML or xHTML.
To change Section508 compatibility you should change isSection508 attribute. Allowed values
are: True or False.
Before you changing these attributes you should close the project. And after changing these
attributes you have to:
Regenerate all the project by Project Explorer -> Right Click -> Generate Code.
Regenerate all the pages HTML templates by switching between Design mode, adding a
space, for example, and switching to HTML.
And you should switch to Code tab and back to HTML tab to regenerate JavaScript.
After chese changes, there will be some complexities like xmlns attributes or XML comments
in JavaScripts. You should change this code by hands. When you create new pages everything
will be OK.



Simple ajax editing in CodeCharge Studio
August 28th, 2010

How to implement an Ajax editing in CodeCharge Studio like in the picture above? Is it easy or
not? Yes, its easy! It takes a half an hour at the maximum. In this article, I will provide step by
step instructions. Also, you can download an example here.
The main idea of this example is the ajax editing without the page refresh. When you click a link
in the Grid the Show Modal dialog is opened. The Show Modal dialog contains a Record that
allows to edit the data. All the actions are performed inside the Update Panels. Well, stay reading
and you will see how to do it
Steps
1. I use test db and a table named countries in my localhost MySQL server.
DROP TABLE IF EXISTS `test`.`countries`;
CREATE TABLE `test`.`countries` (
`id` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
`name` VARCHAR(45) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=latin1;
2. Add an UpdatePanel to the page and name it Panel1.
3. Add a Grid to the Panel1. Grid should be created for the table countries. For the fields for
Grid select only name field.
4. After the Grids been created change the Label name to Link. Configure Href Source
parameters for the Link. Add the id parameter with the SourceType of DataField and Parameter
Source of id field. Leave the Links address empty. Also, add a Link for adding a new record. A
new record Link should have no parameters and should remove the id parameter (Link->PW-
>Remove parameters->id).
5. Add another UpdatePanel to the page and name it Panel2.
6. Add ShowModal feature to Panel2 (Panel2->PW->Features->Add ShowModal). For the Show
event select Panel1->countries->name->onclick and Panel1->countries->New->onclick. It makes
ShowModal to be shown when Grid Row Link or Grid New Link is clicked.
7. Add a new Record to a Panel2. A Record should be created on countries table and select
only the name field.
8. Add a Link to the end of the Panel2. This Link will hide the opened ShowModal. Also, go to
Panel2->PW->Features->ShowModal and select for the Hide event this Link.
9. Add this JavaScript to the end of the <head>:
<script type="text/javascript">
/* This function should be called by links that open the ShowModal dialog.
* It sets a new href for the UpdatePanel according of clicked link
* and loads the data to the corresponding Record.
*/
function RelocatePanel2() {
/* Panel2 is an UpdatePanel that contains a Record.
* Also, Panel2 has a ShowModal feture.
* Here, the location of the Panel2 is changed to have a new href
* with the id for Record.
*/
$("Panel2").location = this.href;

/* To load a new data to the Record according with the href that
* is set above, Panel2 should be reloaded.
*/
AjaxPanel.reload($("Panel2"));
}
</script>
10. Again, add to the end of the <head> this style:
<style type="text/css">
/* This style makes Show Modal dialog wider. */
body .ModalShowDiv {
width: 350px;
}
</style>
11. To the end of the Panel1 add this JavaScript:
<script type="text/javascript">
/* RelocatePanel2() is added to the click event chain so it will be
called
* by all the record links in Grid.
* RelocatePanel2() sets a new href for the Record Update Panel and
* reloads the Record Update Panel.
*/
addEventHandler("Panel1countriesname", "click", RelocatePanel2);
/* Call RelocatePanel2() when a new link is clicked, too. */
addEventHandler("Panel1countriesNew", "click", RelocatePanel2);

/* RelocatePanel2() and Panel2ShowModal1_show() are in the
* click event chain so they are called one after another.
*/
</script>
When the Panel1 is loaded the corresponding click events are set for the Links. The events
should be binded on every refresh of an UpdatePanel and this is exactly what we do here.
12. Add to the end of the Panel2 this JavaScript:
<script type="text/javascript">
/* Reload the Grid Update Panel when some actions with Record are made.
*/
AjaxPanel.reload($("Panel1"));
</script>
This JavaScript refreshes the Panel1 with the Grid to reflect the changes that made with the
Record.
Conclusion
So, with help of CodeCharge Studio and a bit of coding of JavaScript and CSS the professional
ajax applications can be created. For this example, I use a Grid and Record components and
UpdatePanel and ShowModal fetures. Also, I use a bit of JavaScript and CSS coding. Now, its
time to you to try something like this to create






Centering horizontal CSS menu
December 4th, 2009
Its a real headache to center a fluid block element horizontally with help of CSS. Some time ago
I figured out how to center CodeCharge Studios CSS Menu because it doesnt provide this
functionality. In general, any block element without the fixed width can be centered with help of
this method.
By the way, if You have a fixed width block then You have to set its left and right margins to
auto and You get the block centered.
In this article Im going to explain the method I use to center a fluid block element. Here is the
Demo.
With help of this method You can center:
CodeCharge Studios Menu (CCS Menu)
Horizontal CSS Menu
Any block elements (DIV, SPAN, IMG, UL, etc.)
HTML
<!-- BEGIN Menu Menu1 -->
<div class="MenuStyle" id="Menu1Container">
<ul class="adxm {Menu1:MenuType} level1">
...
</ul>
</div>
<!-- END Menu Menu1 -->
CSS
#Menu1Container {
position: relative;
float: right;
right: 50%;
}
#Menu1Container ul {
position: relative;
float: left;
left: 50%;
}



Creating dialog in CodeCharge Studio
November 21st, 2009
This 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, lets 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. Lets 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:
<?xml version="1.0" encoding="ISO-8859-1"?>
<item name="TB_FormsFlashMovieName"
number="777"
hint="TB_FormsFlashMovieHint"
script="..\..\..\Components\Dialogs\HTML\FlashMovie\FlashMovie.js"
img="..\..\Icons\Image.ico" />

Attri
bute
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.
numb
er
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. Well discuss it later.
img
An icon for the button. Ive chosen an icon that is used for <img> 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 isnt translatable and its 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.
Its a good form to put script that runs a dialog and dialogs HTML to the same directory. Lets
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. Its HTML skeleton of the dialog.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"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>

FlashMovieD
ialog_Title
A translation key. You should put it and its value into English.txt, for example.
../../dialogs.cs
s
A standard styles file for CodeCharge Studio dialogs.
../../Common/
Common.js
A common JavaScript functions for CodeCharge Studio dialogs. It isnt 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 skeletons been done!
4. Script that runs dialog
As you remember, in the ToolBox button XML we specified what script runs dialog. Its
FlashMovie.js. It should be located in the Components/Dialogs/HTML/FlashMovie as well as
FlashMovie.html.
Well, lets 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.
getTransla
tionString(
)
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. Thats good!
Lets go ahead!
5. Preparing HTML template
As our purpose is to understand how the CodeCharge Studio dialogs are created Ive 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">
<embed 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 Ive 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 <body> of FlashMovie.html:
<!-- layout table -->
<table id="content" style="margin:5px;" class="table">
<tr>
<td>
<!-- label tags can contain translation keys -->
<label for="swf">FlashMovieDialog_Swf</label>
</td>
<td colspan="2">
<!-- Flash Movie source -->
<input type="text" id="swf" size="40" maxlength="255">
<!-- shows an Open File dialog to select a Flash Movie -->
<button class="button" onclick="browseForSwf();" style="width:30px;">
...
</button>
</td>
</tr><tr>
<td>
<label for="swfWidth">FlashMovieDialog_SwfWidth</label>
</td>
<td style="width:100px;">
<!-- the width of a Flash Movie -->
<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;">
<!-- the height of a Flash Movie -->
<input type="text" id="swfHeight"size="4" maxlength="4" value="200">
</td>
</tr>
</table>
<hr>
<!-- calls OnCancel() to close the dialog without chages -->
<button class="button" onclick="OnCancel();"
style="float:right;margin-right:10px;">
Button_Cancel
</button>
<!-- calls OnOK() to insert a Flash Movie to the page -->
<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 = "<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000\"";
htmlTemplate += "
codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.ca
b#version=6,0,29,0\"";
htmlTemplate += " width=\"{width}\" height=\"{height}\">";
htmlTemplate += "<param name=\"movie\" value=\"{movie}\">";
htmlTemplate += "<param name=\"quality\" value=\"high\">";
htmlTemplate += "<embed src=\"{movie}\" quality=\"high\""
htmlTemplate += "
pluginspage=\"http://www.macromedia.com/go/getflashplayer\""
htmlTemplate += " type=\"application/x-shockwave-flash\""
htmlTemplate += " width=\"{width}\" height=\"{height}\"></embed></object>";
// 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.
Ive 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.