Vacheslav Starikov's

Simple ajax editing in CodeCharge Studio

Vacheslav — Sat, 28 Aug 2010 07:54:09 +0000

How to implement an Ajax editing in CodeCharge Studio like in the picture above? Is it easy or not? Yes, it’s 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 Grid’s 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 Link’s 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 :

<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 this style:

In this article, I am going to test CSS 3 rounded corners. I do want to know can if I can use them in practice in different browsers. Here are some examples of CSS3 rounded corners and if you can see some rounded corners – congratulations your browser supports them!

	border-radius: 20px
	border-top-right-radius: 20px
	border-bottom-right-radius: 20px
	border-bottom-left-radius: 20px
	border-top-left-radius: 20px
	border-radius: 30px 0 30px 0
	border-radius: 10px 30px 10px 30px
	border-radius: 20px 20px 5px 5px / 40px 40px 5px 5px

Browsers

Before CSS3 appeared, web developers had to use some combinations of DIV’s or other container elements with curved corner images to achieve the desired result. Today, when CSS3 is supported by almost all the popular browsers the approach to make rounded corners is very easier, shorter and faster.

The only one little problem has place, is the compatibility with IE.

Here’s the table of browsers I tested on:

Browser	Supports rounded corners
FireFox 3.6	Yes
Safari 5	Yes
Opera 10	Yes
Chrome	Yes
IE 6+	Limited and only with hacks
IE 9	Microsoft pomised

IE workaround

To make curved corners in IE the behavior htc file should be used. You can download the file from here http://code.google.com/p/curved-corner/.

border-radius: 10px; /* CSS3 declaration */
...
behavior: url(border-radius.htc);

There’re some limitations, for example, this behaviour htc file can round only all the corners of the container, but it cannot round only one, two or three specific corners. So, the CSS3 allows to round only right corner, for example, but the behavior htc file doesn’t. Other issues you can find at the page of this htc file.

CSS rules for all browsers

/* CSS3 declaration */
border-radius: 10px; 
 
/* declaration for WebKit browsers like: Safari, Chrome */
-webkit-border-radius: 10px; 
 
/* declaration for Mozilla browsers like FireFox */
-moz-border-radius: 10px; 
 
 /* Linux browsers */
-khtml-border-radius: 10px;
 
 /* maybe ALL IE */
behavior: url(border-radius.htc);

Understanding syntax

The curved corner is a quarter of the ellipse that defines the shape of the corner. To understand that see the image from the W3C:

So, to define the rounded corner the horizontal and vertical radii should be set, but the vertical radius parameter is optional. If you define only one parameter it will be applied to the horizontal and vertical radii.

Now, let’s see the syntax:

border-radius: [ | ]{1,4} [ / [ | ]{1,4} ]?

The first parameter defines the horizontal radius and if the second parameter is missed the vertical radius.

The second parameter defines the vertical radius of the ellipse that defines the shape of the corner.

The ‘border-radius’ sets values for all the four corners.

Examples:

/* all the corners have an equal curved corner */
border-radius: 10px; 
 
 /* works as in the picture above */
border-radius: 55pt / 25pt;

border-top-right-radius,
border-bottom-right-radius,
border-bottom-left-radius,
border-top-left-radius: [ | ] [ | ]?

The first parameter defines the horizontal radius and if the second parameter is missed the vertical radius.

The second parameter defines the vertical radius of the ellipse that defines the shape of the corner.

All of these properties set the only one specific corner.

Examples:

/* sets the top left corner */
border-top-left-radius: 10px;
 
 /* sets the top right corner as in the picture above */
border-top-right-radius: 55pt 25pt;

More info on syntax you can find at W3C site: http://www.w3.org/TR/2010/WD-css3-background-20100612/#the-border-radius.

Practice

Let’s create a div the corners of which we will curve.

<div id="curved-corners"></div>

To curve all the corners we should write these styles:

#curved-corners {
	width: 100px;
	height: 50px;
	border: 2px solid red;
 
        /* CSS3 declaration */
	border-radius: 20px; 
 
        /* declaration for WebKit browsers like: Safari, Chrome */
	-webkit-border-radius: 20px; 
 
        /* declaration for Mozilla browsers like FireFox */
	-moz-border-radius: 20px; 
 
        /* Linux browsers */
	-khtml-border-radius: 20px;
 
        /* maybe ALL IE  */
	behavior: url(border-radius.htc);
}

By the way, you should download border-radius.htc from Google Code and copy it to the location you need, and then specify the correct path to border-radius.htc. So, let’s look at the example above in work:

Now, let’s curve only top left and bottom right borders. We are still using the same DIV but define another styles.

#curved-corners {
	width: 100px;
	height: 50px;
	border: 2px solid blue;
 
        /* CSS3 declaration */
	border-top-left-radius: 20px; 
	border-bottom-right-radius: 20px; 
 
        /* declaration for WebKit browsers like: Safari, Chrome */
	-webkit-border-top-left-radius: 20px; 
	-webkit-border-bottom-right-radius: 20px; 
 
        /* declaration for Mozilla browsers like FireFox */
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-bottomright: 20px;
 
        /* Linux browsers */
	-khtml-border-top-left-radius: 20px;
	-khtml-border-bottom-right-radius: 20px;
}

We aren’t using htc file for IE because it cannot curve specific corners. It can curve all the four corners only. So, let’s see the example above at work:

Conclusion

After testing how CSS3 can round borders, I can say that it’s cool. Even if you want to curve borders in IE6+ there’s a workaround but it’s a bit limited. I hope that some issues for this IE htc file will be fixed soon. Microsoft promised that IE9 will support CCS3 technique to curve corners. By the way, there’re a lot of popular web sites that have already begun to use CSS3 technique to round corners.

Links

W3C CSS3 Border Radius

W3C CSS3 Border Radius newer doc

Rounded corner HTML elements using CSS3 in IE (Download at Google Code)

Converting String to Single in C#

Vacheslav — Tue, 16 Mar 2010 17:09:45 +0000

Some time ago, I needed to get Flash Movie sizes inside of my C# code. I googled and I found some great examples of how I can do it. It was Mike Swanson’s example project called FlashTools. I downloaded it and stated to use. While I was using this code I found a little bug that was occured depending of regional settings in the system. An error occured when FlashTools library tryed to convert String to Single. When I used English locale everything was going OK but when I changed the locale I got “Input string was not in a correct format”. A fix was very simple, I just passed the InvariantCulture as the second parameter of Convert.ToSingle method.

A code snippet that causes an error:

// private Single frameRate = 0.0F;
string sFrameRate = String.Format("{0}.{1}", frameRateMajor, frameRateMinor);
this.frameRate = Convert.ToSingle(sFrameRate);

A workaround:

// private Single frameRate = 0.0F;
string sFrameRate = String.Format("{0}.{1}", frameRateMajor, frameRateMinor);
this.frameRate = Convert.ToSingle(sFrameRate, 
  System.Globalization.CultureInfo.InvariantCulture);

Using the System.Globalization.CultureInfo.InvariantCulture the Convert.ToSingle method converts String to Single using the specified culture-specific formatting information.

Links

Example C# Code for Reading Flash (SWF) Files

Convert.ToSingle Method

Compatibility Mode doesn’t work in Internet Explorer 8.. Why?

Vacheslav — Fri, 12 Mar 2010 14:26:53 +0000

Today I had a problem with IE8. Compatibility Mode for IE7 didn’t work. The tag order does matter but I have never thought it would.

Note: The meta tag should be placed in the head section before any script or CSS. Read more at blogs.msdn.com.

So, in my HTML the meta tag was going after the script tag and therefore Compatibility Mode didn’t work! I had just moved the meta tag with Compatibility Mode to the beginning of the head and it was a workaround!

In this code Compatibility Mode doesn’t work:

<head>
<script type="text/javascript"> 
// some code 
</script>
<title>Title</title>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
</head>

In this code Compatibility Mode works:

<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<script type="text/javascript"> 
// some code 
</script>
<title>Title</title>
</head>

Compatibility Mode Button

If this buttons is visible the Compatibility Mode turned off and You can switch it. Otherwise, the Compatibility Mode turned on and You cannot switch between Standard Mode and Compatibility Mode. So, visibility of this button is a fast way to detect if the Compatibility Mode turned on or turned off.

Links

http://blogs.msdn.com/askie/archive/2009/03/23/understanding-compatibility-modes-in-internet-explorer-8.aspx

How to test for an empty javascript object

Vacheslav — Wed, 10 Mar 2010 08:43:16 +0000

Hi everybody! I’ve just had a discussion of how to test for an emtpy javascript object. As a result, I have several code snippets and I want to share them with You.

Problem

alert({}==null); // false
alert({}=={}); // false
alert({}=={}); // false
alert({}==0); // false
alert({}==""); // false
alert({}==[]); // false
// etc :)

So, none of the expressions above can check for an empty javascript object.

Pure javascript solution

function empty(o) {
    for(var i in o) 
        if(o.hasOwnProperty(i))
            return false;
 
    return true;
}

object.hasOwnProperty(property)	Returns a boolean indicating whether the object has the specified property. This method does not check down the object’s prototype chain. Learn details of hasOwnProperty here at developer.mozilla.org.

object.hasOwnProperty(property)

Returns a boolean indicating whether the object has the specified property. This method does not check down the object’s prototype chain.

Learn details of hasOwnProperty here at developer.mozilla.org.

JQuery + JQuery.JSON solution

var o = {};
alert($.toJSON(o)=='{}'); // true
 
var o = {a:1};
alert($.toJSON(o)=='{}'); // false

The code above simply converts an object to JSON string.

Your way

Well, if You have Your way of checking for an empty javascript object I am waiting Your comments! Thanks in advance!

Links

hasOwnProperty documentation

JQuery JavaScript Library

jquery-json plugin for JQuery

Centering horizontal CSS menu

Vacheslav — Fri, 04 Dec 2009 17:00:16 +0000

It’s a real headache to center a fluid block element horizontally with help of CSS. Some time ago I figured out how to center CodeCharge Studio’s CSS Menu because it doesn’t 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 I’m 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 Studio’s Menu (CCS Menu)
Horizontal CSS Menu
Any block elements (DIV, SPAN, IMG, UL, etc.)

HTML


<div class="MenuStyle" id="Menu1Container">
  <ul class="adxm {Menu1:MenuType} level1">
  ...
  </ul>
</div>

CSS

#Menu1Container {
        position: relative;
        float: right;
        right: 50%;
}
#Menu1Container ul {
        position: relative;
        float: left;
        left: 50%;
}

Setting HTML for WebBrowser in C#

Vacheslav — Wed, 25 Nov 2009 16:39:53 +0000

Today I tryed to insert HTML for WebBorwser in C#. I thought it’s a simple task. But when I tryed to use DocumentText property I got “”. Then I tryed Document.Write("...") and I got that Document is null. After these tries I started to find out the easiest way to fill the WebBrowser with HTML without writing to disk and navigating the written file. Here is my code:

WebBrowser browser = new WebBrowser();
 
browser.Navigate("about:blank");
browser.Document.Write("...");

When the WebBrowser has been made, the Document object is null. So, we should call Navigate() method to get Document available.

If You have Your way to fill the WebBrowser with HTML I’m expecting for Your comments

Creating dialog in CodeCharge Studio

Vacheslav — Sat, 21 Nov 2009 14:33:54 +0000

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, 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

Inline YUI AutoComplete layout

Vacheslav — Wed, 04 Nov 2009 11:28:27 +0000

Recently, i had a problem with YUI AutoComplete layout. I wanted it being inline, fixed width and working with different browsers like IE6/7/8, Opera, FF etc. There were some problems that i solved primarily in CSS. More precisely, i needed an inline YUI AutoComplete layout in such a way that i can place autocomplete next to the without a line break. I just set my styles in CSS and override some existing styles and it works ok!

So, problems i had to solve for my needs:

an outer container is a DIV so INPUT always goes on the next line
inline-block for DIV doesn’t work in IE6/7
an outer container has width of 100%
INPUT is absolutely positioned so an outer DIV is collapsed
width of 100% makes INPUT 6px larger then outer DIV in IE6
using inline-block, INPUT aligns vertically on the bottom in IE6

YUI files to include

Let’s begin with files to include:


<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.8.0r4/build/autocomplete/assets/skins/sam/autocomplete.css">
 

<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/datasource/datasource-min.js"></script>
 

<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/autocomplete/autocomplete-min.js"></script>

Well, i’m explaining below how i’ve achieved an inline YUI AutoComplete layout. The code is well-commented to understand what is happening

HTML


<label for="input">YUI AutoComplete</label>
<span id="autocomplete">
    <input id="input" type="text">
    <div id="results"></div>
</span>
 
<script type="text/javascript">
/* creating a data source out of js array */
var ds = new YAHOO.util.LocalDataSource(["apples", "apricots", "bananas"]);
 
/* creating a yui autocomplete */
var ac = new YAHOO.widget.AutoComplete("input", "results", ds);
</script>

CSS

/* outer container */
#autocomplete {
    /* behaving like an inline element */
    display: -moz-inline-box; /* for FF less then 3.0 */
    display: inline-block !important;
 
    position: relative;
    /* standard width of a textbox */
    width: 145px;
 
    /* align vertically on the center */
    vertical-align: middle; 
}
 
/* input */
#autocomplete input {
    /* preventing an outer container DIV collapsing */ 
    position: relative;
    /* tweaking to traditional box model
     * width = border + padding + content
     */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box; /* ie8 */
 
    /* CSS Expression to calculate width for the input.
     * 2px border + 1px padding + 1px padding + 2px border = 6px.
     * Only for IE6/7 because traditional box model cannot
     * be tweaked by any css property.
     * currentStyle object - IE css styles as specified by 
     * global style sheets, inline styles, and HTML attributes.
     */
    *width: expression(parseInt(this.parentNode.currentStyle.width)-6+'px');
}

I’ve tested this soluting in FireFox 3.5, Opera 10, IE 6/7/8. YUI version i’m using is 2.8.

Welcome to my web development blog!

Vacheslav — Wed, 14 Oct 2009 08:52:15 +0000

So, my blog has arrived! Here I’m going to publish some articles about web development, to share my experience and thoughts with others. I hope that it will be the place where You always are able to find something new, useful and helpful. Also, I’m glad to contact with everybody by email if You have some questions or wishes.

Several words about how I create this blog After I decided to create an own blog I started to find how I can do it. As I’m familiar with WordPress and it’s very popular and flexible, I chose it. The second question, what theme to use. I wanted something special and unique so I decided to create theme with help of Artisteer. By the way, Artisteer can create themes not only for WordPress but for Blogger, Joomla, Drupal, DotNetNuke and just HTML templates. So, it’s cool!

A good idea + Artisteer = great result!

A couple of hours and theme’s done. And without any coding of XHTML, CSS and PHP. Of course, after generating a theme with help of Artisteer there’s a probability to modify a CSS to satisfy with requirements that couldn’t be done with Artisteer, but as usual it’s few lines of code. Well, i’m not going to stop with this design, but to improve it time to time.

Vacheslav Starikov's

Simple ajax editing in CodeCharge Studio

Steps

Browsers

IE workaround

CSS rules for all browsers

Understanding syntax

Practice

Conclusion

Links

Converting String to Single in C#

Links

Compatibility Mode doesn’t work in Internet Explorer 8.. Why?

Compatibility Mode Button

Links

How to test for an empty javascript object

Problem

Pure javascript solution

JQuery + JQuery.JSON solution

Your way

Links

Centering horizontal CSS menu

HTML

CSS

Setting HTML for WebBrowser in C#

Creating dialog in CodeCharge Studio

1. ToolBox

2. Translations

3. Dialog HTML skeleton

4. Script that runs dialog

5. Preparing HTML template

6. Dialog presentation

7. Dialog logic

Conclusion

Download

Links

Inline YUI AutoComplete layout

YUI files to include

HTML

CSS

Further reading:

Welcome to my web development blog!