Dynamic Button

It may seem silly, but I like the image buttons used in the Personal WebSite with the commands written on top, such as “Add”, “Delete”, “Download Photo” etc. However, as the commands are in English, in a multi-language site, one would have to create those buttons for every supported language. Given that most sites also may use different themes (or imposed by the administrator or user-selectable), one must also create those buttons for each supported theme (Note: it seems like the button face consists of ordinairy text, but they need to be made with the use of a graphics program). Moreover, those of us that have been looking at sites, such as that of Jeremy Wadsworth (and have downloaded some stuff), have found additional buttons which, beside text, may also contain some icons. Thus, even a modest site can have a large number of image buttons in its inventory. On the otherhand, the AspNet Button and LinkButton provide the opportunity to use ordinairy text to be displayed on the button face, text that can be localized using resource files (see part 3). Wanting the presentation aspects of an ImageButton and the ease-of-use of a normal button, I decided to write one myself: the DynamicButton (included in my ArnoldusLib, which may be downloaded by registered users from the download section).

Environment

The current version of the DynamicButton has been designed with the PersonalWebSite in mind: It relies on the structure of the PWS (although it will work in any site that applies the same structure). Alternatively it should also function in a website that does not use themes and has one directory where images are kept: “~/Images/”. It also relies on a DataTable (Themes) that includes the themes used, and contains fields for the color values in which the text will appear: alpha, red green, blue. The theme-handling code is included in the download. Note: the DynamicButton expects that a “Connection String” has been defined (in the “Web.config” file) with the name: “name="Personal"”. Currently, only two themes are supported: White and Black, but it is very easy to use the DynamicButton also with other themes with a minimum amount of work (only a simple graphics program that handles .png files is required) to create the bases for the Buttons and the (optional) Icons (see below).

Site Structure

The site structure, using themes takes the following shape:

The folders of interest are the “Characters” folder under the “Images” folder, and the “Buttons” and “Icons” folders under the “Images” folder in the “White” and “Black” folders under the “App_Themes” folder. The “Characters“ folder contains a graphic representation of the most commonly used characters (in .png format) which are used to create the desired text. The “Icons” folders contain icons that can be included on the button face. The “Buttons” folders contain the button-left, button-center and button-right images (also in .png format) and are used to create the buttons. There is also an empty button (button-empty) and a test button (button-test). The empty button is not required (but can be used to derive another button for another theme); the test button, which must have black-colored text, is used by the theme management page for selection of the buttontext color (preview funktion). When no themes are used, all folders (i.e. “Characters”, “Icons” and “Buttons”) should be under the “Images” folder. Note: as explained in section 3 when dealing with resource files, the site's adminitration folder: “Private” contains an “App_LocalResources” subfolder, as does the main “PersonalWebSite” folder (which also contains an “App_GlobalResources” folder with the sitemap localizations).

Current Restrictions

DynamicButtons are created at run time, not at design time therefore, the design time appearance of the DynamicButton is uncertain: If the DynamicButton already exists it will show in the Design view like: if not, it appears like: . In any case, right-clicking the image will give you access to the properties menu. In code view you can use the intellisense feature of VS2008.

The buttons are placed in the Images folders with a name generated by the control. in Windows, file names are case-insensitive, thus if you create a button “Add” and then a button “add” (or vice versa) the second button will not be created. (For Windows “Add.png” and “add.png” are identical). The button will only be created if it does not exist.

Also, there are some characters, that are illegal in filenames. If such characters are used on the buttonface, they are substituted with a dot "." in the filename. Thus, theoretically it would be possible that two buttons with a different buttonface would resolve in the same filename, with the consequences outlined in the previous paragraph.

The current version relies on a Database table “Themes” from which it retrieves the color-substitution values to apply to the button text. If it cannot find these colors, a fatal error occurs. The access mechanism expects that a “Connection String” has been defined (in the “Web.config” file) with the name: “name="Personal"”.

The file format of the input files needs to be one that support transparency, (the character files in the “Characters“ directory and some icon files require a degree of transparency). However, .gif files cannot be used by the graphic routines of .Net. Because .png files are perfect for the job, the control uses these as input files. Although the resulting files could be saved as .gif files, I choose to leave them as .png files to prevent an additional overhead caused by conversion.

Continue to: Multi Language Site: Image Buttons (Part 4.2): “Dynamic Button”.