Customizing the grid processing and appearance

If the following screen captures do not fit in the frame due to the resolution of your monitor, then click here to switch to frameless mode, instead of scrolling left and right. Afterwards hit the Back button of the browser to come back here.

Field attributes

Color selection

Font selection

Example: address book

Example: diary

Final notes

Basics

Microsoft introduced with Excel a data format, called comma separated values or CSV. Although the format did not become officially standardized, as more products, for example Outlook supported it, it became a quasy-standard. Now many other software vendors create/accept/exchange data in this format.

Some of the main characteristics of this format are:

• The data is organized in records and fields; these are presented usually in table format as rows and columns
• records are separated by new-line
• each field value is separated from the previous field of the same record by a comma
• there are very few rules, it is a simple format; a file in this format can be created and modified in most text editors, like Microsoft's Notebook
• it carries very few overhead data; it's overhead is a fraction of that required for example by XML
• some programs create a header-record (the very first record of the data), which names the data fields of the following records. For example when exporting data from Miscrosoft's Address Book, such a record will be created. This header-record makes the data self-descriptive to some degree.

Certain applications support this format using semicolon instead of comma; this is called semicolon separated values or SKV format. Semicolons do not receive any special treatment in the CSV format, and commas will be treated like any other character in the SKV format.

CryptoBola JPEG can record, store and retrieve data in CSV or SKV format and process the data in table-format presented in a grid. Processing means in this context, that such data can be entered, viewed and updated in the CryptoBola JPEG dialog without having to create an intermediate file and passing control to any application outside CryptoBola JPEG.

The way of processing and appearance of the data in the grid can be customized to a high degree in CryptoBola JPEG.

The generally accepted format is described on many Internet sites. Everything required to customize the grids is described in the following.

The data accepted and created by the CryptoBola JPEG grid application during processing adheres to the most generally accepted CSV or SKV format. The Password Management application does not require a header record (in fact it would process it as a data record, not as a description), because the data fields (their names and characteristics) are fixed in the application. However, the generic grid processing does not fix the number, name or characteristics of the fields. It requires, that the first record be the data descriptor. This record too is a valid CSV/SKV record, but its content will not be displayed in the grid; it will be used to control the appearance and processing of the "real" data.

The header record (the data descriptor) is the target of the following discussion; the customization takes place through modifying it's content. The fields of the header record constitute the description of the corresponding data fields. The number of fields in this record limits the number of data fields in the data records.

Following generic rules apply to the field descriptor values:

• the term "quotation mark" in the following refers to the so-called double quotation mark, which is ", not the apostroph
• the field value starts with the field name. The names will appear in the headers of the corresponding columns of the grid. If there is no name specified, the header of the corresponding column in the grid will not contain any name
• spaces at the front of the first and following the last character of the name will be ignored, if not enclosed in quotation maks
• spaces between words of a name count as part of the name
• if the name includes leading or trailing spaces, commas/semicolons or quotation marks, the entire name and these spaces have to be put between quotation marks
• to include a quotation mark into the field name, two consecutive quotation marks have to be entered
• should some field description be included beside the field name, it must start in a new line. The syntax of CSV/SKV requires, that a field value be put between quotation marks if it contains new-line. Accordingly, the field name with the following (through new-line separated) description have to be enclosed within quotation marks
• the field name itself can not be broken up into several lines (a new-line character ends the field name and starts the field description). In other words, there must not be any line break between the field definitions
• the aligment of the names in the header is the same as the alignment of the field values
• the names of the fields can be changed any time in the plain text editor
• the maximum number of fields is 99
• the slash is followed by a letter and optionally by further specifications. Either upper or lower case letters are accepted, except where noted differently.
• there must not be any other character between the slash respectively percent sign and the following specification, nor between the characters of a specification (if the specification consists of several characters)
• spaces, horizontal tabs, commas/semicolons, line breaks are allowed between specifications (i.e. before the next spash or percent sign)

Field attributes

If a field has no attribute specifications, following attributes will be assigned to it:

• character string type
• left aligned
• single line
• null string is allowed
• font name: Times New Roman
• font style: normal
• font height: 9 point
• text color: black
• background color: white

Note, that all restrictions and limitations regarding the format of data content (numeric, maximum length, not empty) are effective only when changing (editing, pasting, erasing) the field. It is possible to load, display and save for example a character string in a numeric field, but when changing it, the new value has to fulfill the requirements.

Color selection

The letters P, F and B may appear in lower- or upper case.

Every character in xxxxx specifies the color for the field in a particular context. One to five characters may be given; if less than five are specified, the color of the text in the remaining contexts will be black (code 0) and the background will be white (code 1).

If there is no color selection for a field, the text will be black on white background in all contexts.

The contexts of a field are, in the sequence as their codes appear in the color specification:

• the "normal" state of a field in the grid, i.e. not in the selected row
• any field in the selected row, except the one, which is focused on
• the field in the selected row, which is focused on
• the field in the edit-box, when being edited in-place
• the extended text display of the field

Code 0 indicates black. The other codes (from 1 to 9 and A to Z) are shown in the following table under the corresponding color.

Note, that only digits and upper case letters are accepted as color code, in contrast to other specifications, where lower case letters are accepted as well.

1 2 3 4 5

6 7 8 9 A

B C D E F

G H I J K

L M N O P

Q R S T U

V W X Y Z

If the text color is the same as the background color, the text is "invisible". This effect can be used for example to show the content of certain fields only in selected state.

Font selection

The letters F, N, S and H may appear in lower- or upper case.

Every character in xxxxx specifies the font name/style/height for the text of the field in a particular context. One to five characters may be given; if less than five are specified, the text in the unspecified contexts will have the default attributes.

If there is no font selection for a field, following attributes will be assumed for all contexts:

• font name: Times New Roman
• font style: normal
• font height: 8 point

The contexts of a field are, in the sequence as their codes appear in the font specification:

• the "normal" state of a field in the grid, i.e. not in the selected row
• any field in the selected row, except the one, which is focused on
• the focused on field in the selected row
• the field in the edit-box, when being edited in-place
• the fifth "context" will be used only for the calculation of the row height (the font of the tooltip text can not be selected)

Font name (font family) selection

• 0 denoting Times New Roman
• 1 denoting Arial
• 2 denoting Courier New
• 3 denoting Verdana

See the chart at the end of this chapter for examples.

Note, that text in different fonts but identical nominal height appear in different heights and widths. For example Times New Roman is not as tall as Arial is, though the characters of Arial are narrower.

Font style selection

• 0 stays for "normal" style, i.e. none of the specific styles apply.
• 1 denotes bold style; example:

  This text appears in bold, which means thicker lines, wider characters.

• 2 denotes italic style; example:

  This text appears in italic. This means, that the characters are slented.

• 3 stays for underlined text; example:

  This text is underlined.

• 4 effects, that the text get struck through; example:

  This text is struck through. It is seldom useful in a grid.

• 5 is a combination of bold and underlining; example:

  This text is bold and underlined.

• 6 is a combination of bold and struck through; example:

  This text is bold. But then why is it struck through?

• 7 is a combination of italic and underlining; example:

  This text is italic and underlined.

• 8 is a combination of bold and struck through; example:

  This text is italic and struck through.

• 9 is a combination of bold and italic; example:

  This text is bold and italic.

Font height selection

• 0 represents 7 point
• 1 represents 8 point
• 2 represents 9 point
• 3 represents 10 point
• 4 represents 11 point
• 5 represents 12 point
• 6 represents 14 point
• 7 represents 16 point
• 8 represents 18 point
• 9 represents 20 point

Note, that if the font height is not specified, 9 point (code 2) will be assumed.

Sometimes the term "font size" will be used instead of "font height", but that is somewhat misleading. The characters have several size specifications, most notably height and width. With increasing height, the with is increasing too, but this does not necessarily mean, that the characters of a certain font with a certain height are wider, than the characters of another font with less height.

The following chart demonstrates the appearance of selectable fonts with different heights (all texts in "normal" style).
The sizes of characters in this chart depend on the display settings but not on the Internet browser setting, i.e. they appear exactly in the size as they would appear in the grid displayed by CryptoBola JPEG.

Times New Roman 7 point	Arial 7point
Times New Roman 8 point	Arial 8 point
Times New Roman 9 point	Arial 9 point
Times New Roman 10 point	Arial 10 point
Times New Roman 11 point	Arial 11 point
Times New Roman 12 point	Arial 12 point
Times New Roman 14 point	Arial 14 point
Times New Roman 16 point	Arial 16 point
Times New Roman 18 point	Arial 18 point
Times New Roman 20 point	Arial 20 point
Courier New 7 point	Verdana 7 point
Courier New 8 point	Verdana 8 point
Courier New 9 point	Verdana 9 point
Courier New 10 point	Verdana 10 point
Courier New 11 point	Verdana 11 point
Courier New 12 point	Verdana 12 point
Courier New 14 point	Verdana 14 point
Courier New 16 point	Verdana 16 point
Courier New 18 point	Verdana 18 point
Courier New 20 point	Verdana 20 point

Example: address book

In this example an address book will be prepared for grid processing. The fields (columns in the grid) are based on Microsoft's Address Book management. Note, that the profile resulting from the following procedure can be downloaded from the CryptoBola site. This detailed, step-by-step procedure is meant for those, who want to create a different appearance and/or content.

Those, who are using MS Address Book, can prepare this easily with the data of their own contacts. Otherwise, one has to type in (or copy and paste) the result displayed below. When not exporting the data, one can decide if comma or semicolon will be the separator.

It is possible to create two or more files from the address book. For example, one would countain only the name and the email address, and another all data, except the email address. However, these would have to be maintained separately in the future.

So, let's start with exporting the address book. Click on File, Export, Other Address Book.
Select Text file (Comma Separated Values), then click on Export.
Specify or browse for a location and file name (the standard file name extention for this kind of data is csv respectively skv).
Then click on Next. The following box offers a selection of fields. Select First Name, Last Name, Nickname (be careful not to select Name, because that would double the first and last name), E-mail Address, Home Street, Home City, Home Postal Code, Home State, Home Country/Region, Home Phone, Mobile Phone, Business Phone, Company, Job Title and Notes. Remove any other checkmark.

Note, that this is only an example. When exporting the address book, one decides, which fields have to be included. Export even those fields, which have never been filled but you might want to use in the future; exporting them positions other fields accordingly. There is an easy way to exclude unwanted fields from being displayed, but introducing new fields later requires more manual intervention.

Now, click on Finish. A file with the specified name will be created, containing the selected data of your contacts.

It's time to start CryptoBola JPEG. Click on Embed. You can select the JPEG basis for your future address book, or for the sake of this excercise, you can escape the subdialog of the basis file selection. Keep in eyes, that you can change the following customization at any time in the future very easily, except adding or deleting fields (those require some more work).

Click on Source of Data to embed and type in (or select by the Browse subdialog) the location and name of the exported address book you just created.
Click on Validate in order to have the file opened and read into memory.

Click on the down-arrow beside Data Type to see the drop-down selection list. Select Grid from CSV (although this is somewhat premature at this point of proceeding). Then click on View / Edit. If error messages appear at this point, then most probably the data has been generated with semicolon separators; select Grid from SKV.

The result will look like this, of course with the data of your contacts:

This is not very attractive, to say the least, not even when maximizing the window. It's time to start customizing the appearance of the data, but first let's see the data in plain text mode.

Click on Cancel to exit the subdialog, and select Plain text from the drop-down menu, then click on View / Edit again. The text editor displays all the data generated by the Export function of the Address Book.

The plain-text data of this example is

The very first line is a special one: it contains the names of the fields in the following records. The content of this line does not depend on the contact data, only on the selection when having exported the data from the address book. Take a look at this line:

First Name,Last Name,Nickname,E-mail Address,Home Street,Home City,Home Postal Code,Home State,Home Country/Region,Home Phone,Mobile Phone,Business Phone,Company,Job Title,Notes

Every field of the exported address book is named here, in the sequence as they appear in the following lines. The grid processing program uses this line to construct the grid.

The sequence of the fields must not be changed, because this record has to reflect the data in the following records; however, in the grid processing it will be easy to change the sequence of columns and adjust the field data according to the changed sequence.

Fields can not be added or removed simply by inserting or erasing the name of a field; the data would have to me modified in each record to achieve that.

The rest of the file contains the data of the contacts exported from the address book. Note, that the data of a single entry (one contact) may appear in several lines. That is, because some fields accept line breaks (for example the street address and notes). However, line breaks appear always between quotation marks.

The values of the fields are separated by commas (it does have a reason to call this format "comma separated values", does not it?). Even if a field does not have any data in a record, the comma must be there, indicating the position of the following field.

The first data record in the example is

John,Doe,Jonny,johndoe@yahoo.com,"2135 Railway Street
(just around the corner)",New Westminster,1A2B3,CA,USA,123.456.7890,321.654.0987,,,,"This is the imaginary guy,
who will be mentioned in courts,
when the real person must not be named"

Note, that the fields "Home Street" and "Notes" are within quotation marks, because both contain line breaks, and the fields "Business Phone", "Company" and "Job Title" have no values.

Let's start with making this grid a bit more attractive. It is important to understand, that the following customization is only an example, and everyone can change the grid according to his/her own taste and need.

While we are in the text editor, we can make the first changes: we rename some fields (some of these changes are simply to avoid that the text in the header be longer than the data). Let's change

• E-mail Address to E-mail
• Home Street to Street address
• Home City to City
• Home Postal Code to Postal Code
• Home State to State
• Home Country/Region to Country
• Home Phone to Phone
• Mobile Phone to Mobile

Click on Save after these changes. Then select Grid Format again and click on View / Edit. Almost no changes are visible due to the narrow columns (only the first letters of the column names appear).

Start with the easiest changes in the grid: with the sequence and size of the columns.

First we resize the columns, so that at least their names become visible. When the mouse cursor is close to a divider in the column header, it takes a different shape: a short vertical line with a short horizontal arrow on both sides: Go with the cursor over the right side divider of the column and drag it (i.e. hold down the left button over it and move the mouse) to the right to increase the column size or to the left to decrease it.

If someone is shrinking the column so much that it totally vanishes, it can be "revived". It's divider in the header becomes "integrated" into the left-side divider. When the mouse cursor is approaching such a divider from the right side, it changes into and by dragging this marker to the right, the column appears again.

So, increase the column size of the important columns (whichever they are) so far, that the content can be seen completely, and the rest so far, that the columns are recognizable from their respective headers. As soon as a column becomes wider, a horizontal scrolling bar appears, because the some of the column widths exceeds the available space in the grid. Consequently, one has to scroll to the right in order to reach the rightmost columns.

The following two images show the left and right side of an example for this adjustment. The "State" column became even narrover than it was, because there is no reason to build a wide column around only two characters (although the header text is not visible at all, it is easily recognizable from the content, that state codes are in this column).

Note, that several important fields, like the email address are not completely visible, i.e. their columns are narrower than the content in most of the cases. With CryptoBola JPEG there will be no need to see and copy these fields somewhere else, for example when creating an email. Read the tutorial on working with grids.

Furthermore, such field content, which is not completely visible in the column, appears in its entirety in the extended text display, i.e. when the cursor stays over that field, like the street address of John Doe in the first image of the example (try it out now).

Next, rearrange the columns. We decide, that the sequence of columns will be:
nickname, email address, last name, first name, phone, mobile, business phone, notes, company, job title, street address, city, postal code, state, country
This sequence reflects the frequency we need to see the respective data.

The sequence of columns can be changed any time by dragging and dropping the header of a column. There is a checkbox in the dialog window: Save column format. If this is checked, changes in the column sequence and width will be saved when clicking on Save or Finish.

Drag and drop the column header of "Nickname" to the place following the action column (that's the very first one), which is always the first column, it can not be moved, not can another column be moved at the front of it. "Drag and drop" means left-clicking somewhere in the header but not on the divider, holding down the mouse button and moving it over the desired place, then letting up the mouse button. A "shadow image" of the header goes with the mouse cursor and a narrow red line shows the divider between the columns, where this column will be placed when dropping it in that moment.

Then drag the email address, last name, and the rest of the columns to the designated place. The result will look like this:

Now it looks much better than at the beginning. However, some visual distinction between the columns would make it even better. Click on any field: the entire row will be selected, but it is almost imperceptible, like the marking of the field, which has been clicked on.

Further adjustments have to be made in plain text form. Click now on Finish. Save column format is still checked, so the changes in the column widths and sequence will be recorded.

Select Plain text from the Data type drop-down menu, then click on View / Edit again. In plain text the changes we made in the columns are visible in the first entry (scrolling down in the text, it becomes visible that not only the header, but the actual data fields too have been rearranged). Changing the font of the text in this window to fixed width characters (by checking the box Fixed-width font) improves the readibility of text of such nature.

Note, that now the header information of each field is broken into two lines, because the header text and the rest are separated by a line break. The numbers following the percent signs show the size of width occupied by the column, in the percentage of the initial grid size. The sum of these values is 187; that means, that the columns all together are wider than the grid; we new this already, because we had to scroll horizontally in order to see all columns.

One should keep in eyes, that the relative widths of the columns are calculated from the actual widths and then truncated to a whole number. When there are so many fields in the grid as here, the error caused by the truncation to whole numbers can be relatively large. Consequently, when the same data will be reloaded with these specifications, applying the whole numbers as percentages, the widths in that display can be a bit different from the widths shown before.

We decide for following format adjustments to enhance the grid's and the fields' appearance:

• the email address text is blue (color code I) in normal case and dark blue (color code J) otherwise. The text is underlined in the grid, but not in the extended display, nor in the edit box
• the nick name, last name, first name name text are dark green (color code F)
• the phone numbers are dark red (color code 9)
• all other texts are dark magenta (color code U)
• the background in normal case remains white; in the selected row it is light yellow (color code V), in the edit box light cyan (color code L) and in the extended text display light magenta (color code Q)
• the text and background colors are swapped in case of the selected field
• the font size remains 9 points (code 2, the default) in the normal case and in the selected row, but not of the selected field
• the font size of the selected field and in the edit box is 10 point (code 3)
• the email address is designated as an email address (surprize, isn't it?); it means, that an email can be initiated directly from CryptoBola JPEG by right-clicking on the field and selecting the Email to option
• the notes and the street address are specified as multiline-fields; when editing, line breaks are accepted (by Control-Return, not simply by Return). The extended field display too shows multiple lines; see the following examples

Here is the modified field description (the fixed-pitch font is selected for a better overview of the field descriptions):

and this is, how the grid looks like with a selected row and a selected field:

The following example shows the extended field display (it appears, when the cursor stays over a field, the content of which is not completely displayed). Note, that the source field of this display does not need to be selected; as the example shows, just another row was selected, when this display appeared:

The following image demonstrates editing within the grid (initiated for example by double-clicking on the field):

Example: diary

The sample diary is very simple from the point of customization. It consists of only four fields: date, time, a note and the record of events. Because we don't have a source for generating a starter content in comma separated values form, we start from scretch: by defining the field names and their sequence.

We declare following fields and formats:

• Date a single-line character field. Color: dark green on white background in normal case, on light yellow background in the selected row, with bold font if it is the selected field. This field must have a value (when entered in the grid processing)
• Time a single-line character field. Color: dark green on white background in normal case, on light yellow background in the selected row, with bold font if it is the selected field.
• Note a single-line character field. Color: medium red on white background in normal case, on light yellow background in the selected row, with bold font if it is the selected field
• Events is a field for editing by the rich text editor in its own subdialog. It is a secret field as well, i.e. the content will not appear in the grid (this can be changed even while viewing the grid). The text is black on white background, except when in the selected row, where it is black on yellow; if the field itself is selected, it will be red on yellow.

We have to enter these definitions manually. Let's go in Embed, open the editor in plain text mode, and enter the following:

then click on OK, select Grid Format from the Data type drop-down menu, then click on View / Edit again.

You will see a grid with the headers of the field you just defined, but there is no data row there.

Right-click on the very first header item (it is unnamed) and select Insert empty row on the top of this page. A row will be inserted with no data in it, but the "edit" column shows, that this IS a row. Now double-click on the Date field of this row. A small edit box appears, and you can enter the date for the first diary entry. The format of these fields will not be verified, but you should enter a correct date and time in every row in order to be able to sort them later. Type in for example "2005-01-29" and then Return. Then double-click on the still empty Time field and enter some reasonable time, 09:00 in the example. The Note field is meant to give an idea about this diary record. The example contains This is the very first diary entry.

Now, the most important field: the diary content. If you double-click on it, nothing happens, for it is declared as a secret field. Check the box Edit secret data and the Event field becomes editable in its own dialog. The small edit box is not suitable for entering and modifying larger text, but the edit dialog can handle up to one megabyte long text and it supports some text formatting as well.

After having entered two entries and created a "slot" for one more, the grid would look like this:

The only remaining step is to embed this data in a large enough JPEG basis.

Final notes

• the height of the rows will be determined according to the height of the largest font in the grid. While the font of the edit box is not involved in this calculation, for it does not have to fit in the row, the font of the tooltip text does get involved; it's role is to increase the row height without increasing the displayed fonts. It is enough to specify a larger font for only one field, that will enforce increasing the row height
• if the height of a particular font is not specified, it will be 9 points high. However, there are smaller fonts as well: 7 and 8 points. In order to decrease the row height (thereby increasing the number of displayed rows without scrolling), the first three fonts of ALL fields must have a font height specification 0 or 1 (7 or 8 point), and the fifth font size should not be specified, or that too has to be 1 or 2.
• When increasing the font size, some column widths may have to be adjusted. However, the fifth specification of the font size does not relate to any text; it can be used to increase the row height without displaying large letters
• when saving the column arrangement or the data, the unnecessary specifications (default values at the end of the context related font and color specifications) will not be saved; the sequence of the specifications may be different from that entered manually
• note, that the field "Notes" of the address book could be a candidate for extended editing, i.e. editing in the rich text editor box, instead of directly in the grid
• much larger text can be edited in the editor subdialog, than within the grid
• data in rich text format is much longer than plain text; under circumstances the formatting information occupies much more storage than the text itself
• an example for making field values invisible: for example the effect of /PF17C without background color specification is, that the content becomes visible only in the selected row of the grid: green text on white background if the field is focused on, otherwise red text on white background. This method can be used to make a grid with many fields better readable: such fields, which are not relevant for themselves, can be made invisible in all but one rows, making the data in the grid less dense
• the adjustments do not have to happen in a single session; they can be done any time, the changed data can be saved as a file or embedded in the same or in another image

Home Modified: 2005-03-28