TCB Web Suite

Introduction

As with many people, I prefer to edit my HTML documents "by hand." This is because the HTML code generated by most HTML editors is extremely wordy and often difficult to decipher. Because these editors have to anticipate every situation, they create tons of unneeded span and div tags and lots of nested tables.

Editing HTML docs with notepad, saving changes and refreshing the browser you are viewing document in works pretty well. I wanted ready access to things like standard HTML fonts and colors. I wanted something simple but with a little juice.

Most web editors are WYSIWYG or "What you see is what you get" editors which is ok. I like to see the code I'm working with. So, I wrote a little program, Web Editoror, I'm still in the habit of "laying code" when I want a solution, that provided a semi-WYSIWYG interface. It consists of a composition window where you entered HTML text and a separate browser window that reflected the changes as you typed.

Two months later, I'm working with the Web Editor and, as with several other projects, I'm thinking, "I think I can create a TCB program do this." Four hours later I had a web editor that works better than the hard-coded version I had written and I plan on extending it.

The TCB Web Suite is a set of TCB programs, including the web editor described above, tied together with its own pop-up task bar, shared database and this documentation. Several of the TCB programs in this replace hard-coded programs written to provide the same solution.

A screenclip showing five TCB programs on screen is below. A taskbar is at the top of the screen. A large window, Web Jukebox, occupies most of the center of the screen. Over-laying a portion of that program is a Email Console window and a Download Console window. Beneath the Jukebox is a portion of a web editor window. All are described below.

click to enlarge

Web Suite Programs

The Web Suite currently has 14 TCB programs in its program set. As with any TCB program file, the end user can easily modify any of the programs with Notepad or any text editor. (Note: to see tools tips on buttons and objects in TCB program windows, the program has to have focus. You get that by touching the corner,edge or interior of the window.)

Task Bar Programs

There are five task bar programs in the Suite.

  1. webAppbar.prc - stay-on-top task bar provides access to Suite programs and other Windows programs and utilities. Right-click the first icon to change bar transparency.
  2. webapps.prc - pop-up task bar providing access to Suite programs. Shows as an icon on the left edge of the screen about 1/3 from the top. Pass the mouse cursor over the icon to expand or iconize the bar.
  3. tmmultW.prc - drop-down task bar from the top bar. Provides access to common Windows programs such as Paint and Movie Maker.
  4. tmwinutils.prc - drop-down task bar from the top bar. Provides access to common Windows utilities such as DOS prompt and Schedule Tasks. Accesses key user folders.
  5. tmgames.prc - drop-down task bar from the top bar. Provides access to common Windows games such as Free Cell and Spider.

Open Face Programs

Open-Face refers to program where the visual interface is a screen containing objects used in the running program. All the controls are contained in a single visible window. Most of these programs share a common motif, which includes open-face, and function similarly. The look and feel is completely un-planned and simply represents what I have come up with as I have continued development of TCB.

Web Juke Box

TCB Web Juke Box provides an example of using multiple web objects in a single process.This allows an entire set of documents to be displayed in a single window.

The body of the screen is mostly occupied by a set of TCB Web Objects aligned in rows and columns. The Jukebox window makes use of an important TCB feature of scrollable main windows. The end user can easily set the number of browsers they wish to open at once. Jukebox uses the distribution motif for look-and-feel. More information about motif is found here.

Email Console

The Email Console opens with a data grid from which the user must select a record by right-clicking it. The grid disappears and reveals the console. The Email Console utilizes this distribution's common motif. The window control buttons are arranged horizontally rather than vertically. Most of the window contains boxes for data entry. It has a data control section and a Where box that doubles as a work space.

Near the bottom left of the window are two buttons and a "Wireless Providers" drop-down selection box. The Select button opens the data grid for record selection. The Sendit button extracts the required data from the current record, composes and sends that information to the email.exe program.

The system can also send text messages. In that case a wireless provider ID is required. Simply select a provider and the correct provider ID is placed in the Gateway box. The subject box should contain a full ten digit cell phone number. The text is truncated to 160 characters.

Download Console

The Download Console opens with a data grid from which the user must select a record by right-clicking it. The grid disappears and reveals the console as in the Email Console described above. The Download Console utilizes this distribution's common motif.

Near the bottom left of the window are two buttons. The Select button opens the data grid for record selection. The Download button extracts the required data (URL and File) from the current record, composes and sends that information to the download.exe program.

The syntax for download.exe:
Syntax: [t|text], FileIn, FileOut
Where [t|text] is any text beginning with "t" for text type files.
Where: FileIn is the URL of the file to download.
Where: FileOut is the path and name of the file to be saved.

Actual Command Line:
    download.exe text,http://www.thevbprogrammer.com/Ch10/10-06-RichTextBox.htm,mydum.htm

Web Suite Documentation

The Web Suite Documentation program utilizes this distribution's common motif. Most of the window is occupies by a data tree object. This object has been programmed to display Web Suite documents.

Functioning is exceedingly simple. Click an arrow in the object to open or close an information area. Right-click on a document you want to view and it will be displayed with an appropriate application. That's it

Note: this tree displays information in text documents found in the .\diagrams folder.

Web Editor

Web Editor utilizes this distribution's common motif. Below the window control buttons is a column of three large button. The first button begins allowing writes to a web object when clicked. Right-clicking the button stops writing. The next button loads a HTML document to be viewed and edited.

The last button opens a dialog to save the document. Click the first button. Nothing happens but it is OK. Now click the load button. Find and select a HTML file to edit.

Note how the Web Editor window expands. Across the top portion of the window are two sets of controls. The first set is a group of drop-down selection boxes with labels above them. These boxes function by the user selecting a value which is then inserted at the position of the cursor in the text object described below.

These boxes are the following:

  1. HTML Scrap - contains various HTML tags - value is avoiding open tags
  2. Fonts - contains Windows fonts - value is avoiding mis-spelling
  3. Color List 140 - contains TCB colors which are also extended HTML colors
  4. HTML Font 15 - contains the 15 standard HTML fonts
  5. HTML Color 16 - contains the 16 standard HTML colors

The second set of controls consists of two subsets. The first contains four control and display the name of a color in the ColorName label and the color in the set of labels to the right, when the slider bar on the left of the group is moved. The second subset is a slider bar and label. when the bar is moved a font name is displayed in the label. When either the ColorName of Font label is right-clicked the respective color name of font name is inserted into the editor text box. Best to use the middle bar of a slider the click an end arrow to select a value.

Below the top control section are two objects arrayed side by side. The first or left-most object is a text box for editing HTML text. The other box is a web object for displaying HTML or PDF documents.

Changes made to the document are immediately reflected in the web object window. This makes it a WYSIWYG (what you see is what you get) editor. Very slick. The advantage of this method are obvious. The composer can see the code and the rendered results simultaneously and immediately.

Other Programs

Main

This TCB program run if either of the main TCB run-time is invoked without a TCB program name on the command-line. The program webmain.prc is a copy of main and is used to run Web Suite in a TCB environment that is aleady established.

zBrowser

zBrowser is a TCB program that is designed to accept a HTML or PDF document file name and displays that document using a web object. It is not designed to surf but is a simple file document reader. It has the usual Back, Forward, Refresh, and Goto buttons found in some form on most browsers.

With this implementation, zBrowser replaces xBrowser.exe which is TCB's hard-coded document browser. Another clear indication of the broad power of TCB to effect computer solutions to common problems.

webstartmsg

Webstartmsg.prc is a simple program that does nothing but display a message. This is the message seen when Web Suite fires up. Messages can have multiple segments, time and placement set by user. Huge advantage is being able to continue work while the message is displayed.























Email

The Email panel
uses email.exe to actually send the mail. It requires cdosys.dll which should be pre-installed on all Windows. Email is a small standalone, command line program that sends emails directly from command line specifications. It was designed to allow any program to create and send an email or text message on demand. This is especially useful for business communications.

For example a business owner may want to be notified when an account goes out of balance. For us, we dont have to include more code in our main programs. This puppy does the trick!

Email has 3 methods:
    Method 1 utilizes a delimited string where the entire
    email is defined in the string. It has the format:

     delim[to]delim[subject]delim[fromname]delim[fromemail]delim[msg]delim[serverid]delim[port]delim[tousername]
       delim[password]delim[attach]delim[CC]delim[BCC]delim[html]delim[SSL]delim[gateway]
    where "delim" is a single character separator of one of these: ,;|/\!$&
    where the first character designates the separator character and the comma is the default.
    example:
       email.exe ,makpiya@aol.com,I need your help with great incentives for you. ,Fred,ptmstcb@aol.com,email.txt,smtp.aol.com,25,ptmstcb,password,,,,yes,no,
    Method 2 utilizes a file containing single keyword specifications it has the format:
       To=makpiya@aol.com
       Subject=I need help
       FromName=Fred
       FromEmail=zqtcb@aol.com
       Msg=email.txt
       Server=smtp.aol.com
       Port=25
       Username=zqtcb
       Password=password
       Attach=
       CC=
       BCC=
       HTML=
       SSL=
       Gateway=
    example:
       email.exe email.ini
Methods 1 and 2 process the specifications, send the email and ends.
Method 3 doesnt send at all but allows the user to select a particular service provider ID from a drop-down list.
    it is invoked by the command line: email.exe provider
    Note the use of the keyword "provider" above.

The Msg, Attach, CC, and BCC items may represent the contents of a file specification on disk. Email automatically recognizes file specifications.

The file email.txt is a sample message body file.
The file emailLine.cmd is a sample command script for method 1 change the parameters for your situation.
The file email.ini is a specification file for method 2
































go to top

Distribution motif

This distributions open-face windows have a fmailiar pattern. At the very top left of the window is a small gray square. We call it the prototyping button or "panic" button. More information about prototyping is available in the full TCB documentation. To the right of that object is a label with the name of the program. At the top middle of the window is a label with the program title.

Below the prototyping button is a column of four buttons, window control buttons. The first button displays help. The second button minimizes the window to the system tray. The next button toggles the window to stay on top of other windows or not

All of the TCB programs are installed with expectation that the end user will change things. That is the reason for the prototyping button. Another development aid is the convention of the IDE (integrated development environmnet) button. If this button exists it is usualy located at thr far right top of the window. Clicking this program will cause the program to exit and re-run itself. Right-clicking the button displays the program file in Notepad for editing.

Many programs employ a data grid for displaying and retrieving records from a database. The data grid displays the records in the contacts database. To edit a record shown in the data grid, usualy select the record by clicking in the grid and then right-click to place the record in any editing boxes.

Programs that use a database may have a Data control section. It usually consists of a set of buttons to scroll through the database and buttons to update, delete and create new records.

Many programs will use a Where box that lets the user search for records based on the record contents. The Where box can also be a Work Space.

Work Spaces

Work Spaces are text objects. They are usually accompanied by buttons somewhere above its top edge. In many programs perform these function:

  • clear the box
  • open a dialogue to choose a file for loading its contents into the object
  • open a dialogue to save the contents of the object to a file
  • execute a SQL query in the box window and may put the results into itself or another window.
  • cause the contents of the box window to be executed sequentially as though it were a batch file running from the command line.
A program may employ more than one work space.

Many programs will have a legend at the bottom of the window explaining the use of function keys. Usually there is a copyright notice below that.

Of course, since TCB programs in this distribution are implemented as plain text files, they are easily edited with nothing more than Windows Notepad. We are hoping to encourage playing around and being creative.
































































Copyright © 1982-2015, Phoenix Information Systems/TM all rights reserved
Contact: Fred Pierce, makpiya@aol.com, makpiya@gmail.com, 831-663-0543