Schongar P.VBScript unleashed.1997
.pdf\par }
">
</OBJECT>
The TextRTF property contains some initial settings for the control's RTF text. The last parameter must be deleted or you will not be able to read the RTF code of the document on the control. (The TextRTF property will always return its initial value.) As you will see later in the chapter, we are going to add a command that displays the RTF description of the document on the control.
There's another property you must add manually to this definition, and this is the RightMargin property. This property determines the right margin of the text on the control and should be slightly less than the _ExtentX property. The right margin isn't specified as the distance of the text from the right edge of the control. Instead, it's the distance of the text's right margin from the left edge of the control. You should make it smaller than the _ExtentX property to accommodate the vertical scrollbar that will be attached to the control when the text's length exceeds the length of the Rich Textbox control.
You can also specify a right margin larger than the control's width. In this case, the users will be able to type lines longer than the control's width. Just make sure that a horizontal scrollbar will be attached to the control so that the user will be able to scroll the text right and left. The exact values of these two properties for the RTFEditor example are
<PARAM NAME="_ExtentX" VALUE="14000">
<PARAM NAME="RightMargin" VALUE="12500">
Next place the command buttons below the Rich Textbox control. Because you are not working on an HTML layout control, where you can visually place the various controls and align them, you must edit the HTML file manually and create a table structure for aligning the command buttons. Because HTML lacks the tags for precise placement of the elements on a Web page, using a table to align them is a very common practice. The table in which the Rich Textbox and command button controls will be placed has two rows and five columns. The Rich Textbox control takes up the entire first row (all five columns), and the command buttons take up the second row of the table. Each one is placed in its own cell. The command buttons are aligned perfectly with the Rich Textbox control, even when the user resizes the browser's window. Here's the modified HTML document with all the controls:
<HTML>
<HEAD>
<TITLE>New Page</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD COLSPAN=5>
<OBJECT ID="RichTextBox1" WIDTH=500 HEIGHT=280
CLASSID="CLSID:3B7C8860-D78F-101B-B9B5-04021C009402">
<PARAM NAME="_Version" VALUE="65536">
<PARAM NAME="_ExtentX" VALUE="14000">
<PARAM NAME="_ExtentY" VALUE="7408">
<PARAM NAME="_StockProps" VALUE="69">
<PARAM NAME="BackColor" VALUE="-2147483643">
<PARAM NAME="ScrollBars" VALUE="3">
<PARAM NAME="RightMargin" VALUE="12500">
</OBJECT>
</TR>
<TR>
<TD>
<OBJECT ID="FontMenu" WIDTH=96 HEIGHT=32
CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57">
<PARAM NAME="Caption" VALUE="Font">
<PARAM NAME="Size" VALUE="2540;846">
<PARAM NAME="FontName" VALUE="Verdana">
<PARAM NAME="FontHeight" VALUE="180">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
<PARAM NAME="ParagraphAlign" VALUE="3">
<PARAM NAME="FontWeight" VALUE="0">
</OBJECT>
<TD>
<OBJECT ID="CharacterMenu" WIDTH=96 HEIGHT=32
CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57">
<PARAM NAME="Caption" VALUE="Character">
<PARAM NAME="Size" VALUE="2540;846">
<PARAM NAME="FontName" VALUE="Verdana">
<PARAM NAME="FontHeight" VALUE="180">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
<PARAM NAME="ParagraphAlign" VALUE="3">
<PARAM NAME="FontWeight" VALUE="0">
</OBJECT>
<TD>
<OBJECT ID="ParagraphMenu" WIDTH=96 HEIGHT=32
CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57">
<PARAM NAME="Caption" VALUE="Paragraph">
<PARAM NAME="Size" VALUE="2540;846">
<PARAM NAME="FontName" VALUE="Verdana">
<PARAM NAME="FontHeight" VALUE="180">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
<PARAM NAME="ParagraphAlign" VALUE="3">
<PARAM NAME="FontWeight" VALUE="0">
</OBJECT>
<TD>
<OBJECT ID="TextMenu" WIDTH=96 HEIGHT=32
CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57">
<PARAM NAME="Caption" VALUE="Text Color">
<PARAM NAME="Size" VALUE="2540;846">
<PARAM NAME="FontName" VALUE="Verdana">
<PARAM NAME="FontHeight" VALUE="180">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
<PARAM NAME="ParagraphAlign" VALUE="3">
<PARAM NAME="FontWeight" VALUE="0">
</OBJECT>
<TD>
<OBJECT ID="PageMenu" WIDTH=96 HEIGHT=32
CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57">
<PARAM NAME="Caption" VALUE="Page Color">
<PARAM NAME="Size" VALUE="2540;846">
<PARAM NAME="FontName" VALUE="Verdana">
<PARAM NAME="FontHeight" VALUE="180">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
<PARAM NAME="ParagraphAlign" VALUE="3">
<PARAM NAME="FontWeight" VALUE="0">
</OBJECT>
</TABLE>
</OBJECT>
<OBJECT ID="IEPOP1" WIDTH=0 HEIGHT=0
CLASSID="CLSID:7823A620-9DD9-11CF-A662-00AA00C066D2">
<PARAM NAME="_ExtentX" VALUE="0">
<PARAM NAME="_ExtentY" VALUE="0">
</OBJECT>
<OBJECT ID="IEPOP2" WIDTH=0 HEIGHT=0
CLASSID="CLSID:7823A620-9DD9-11CF-A662-00AA00C066D2">
<PARAM NAME="_ExtentX" VALUE="0">
<PARAM NAME="_ExtentY" VALUE="0">
</OBJECT>
</BODY>
</HTML>
This is the RTFEdit.htm file in this chapter's folder on the CD. Notice that it contains two Popup Menu controls too, the IEPOP1 and IEPOP2 controls. Each command button causes a menu to pop up on the screen, and this is the IEPOP1 control. One of the options in the Font menu is Size, which leads to a second popup menu, the IEPOP2.
The Code Behind the Scenes
Now we are ready to look at the code. Each one of the command buttons at the bottom of the page triggers a Popup Menu control, which contains the corresponding options. Because we are using a single Popup Menu control, we must adjust its contents dynamically and keep track of which menu is displayed with a global variable. Here is the Click event of the Paragraph menu:
Sub ParagraphMenu_Click()
WhichMenu="PARAGRAPH"
IEPOP1.Clear
IEPOP1.AddItem "Left"
IEPOP1.AddItem "Right"
IEPOP1.AddItem "Center"
IEPOP1.Popup
End Sub
First this code sets the WhichMenu global variable, so that we'll know later which menu was opened and which option on this menu was selected. The Click events of the Character, Paragraph, Text Color, and Page Color menus are quite similar. They just use a different value for the WhichMenu variable and assign different content to the menu. After the menu's options are added, the menu is displayed with the Popup method.
Once a user has made a selection, the Click event of the IEPOP1 control is triggered, and this is where all the action takes place. The IEPOP1 Menu control is also used to implement a shortcut menu on the Rich Textbox control. Every time the user right-clicks the editor's window, the shortcut menu of Figure 26.8 is displayed.
Figure 26.8 : This shortcut menu contains the most commonly used commands for text manipulation.
The shortcut menu is displayed every time the user right-clicks the editor's window, an action that is signaled to the program by the control's MouseDown event. Here's the handler for this event:
Sub RichTextBox1_MouseDown(Button, Shift, x, y)
If Button<>2 then Exit Sub
IEPOP1.Clear
WhichMenu="EDITOR"
IEPOP1.AddItem "Copy"
IEPOP1.AddItem "Cut"
IEPOP1.AddItem "Paste"
IEPOP1.AddItem "Delete"
IEPOP1.AddItem "Select All"
IEPOP1.AddItem "Show RTF Code"
IEPOP1.Popup
End Sub
Any selection the user makes on the IEPOP1 control is reported to the application by means of the control's Click event. The IPEOP1 control's Click event is the lengthier subroutine, where all the action takes place:
Sub IEPOP1_Click(item)
Select Case WhichMenu
Case "FONT":
If item=1 then RichTextBox1.SelFontName="Verdana"
If item=2 then RichTextBox1.SelFontName="Impact"
If item=3 then RichTextBox1.SelFontName="Comic Sans MS"
If item=5 then
IEPOP2.Clear
IEPOP2.AddItem "10 points"
IEPOP2.AddItem "12 points"
IEPOP2.AddItem "14 points"
IEPOP2.AddItem "16 points"
IEPOP2.AddItem "18 points"
IEPOP2.Popup
End If
Case "CHAR":
If item=1 Then
RichTextBox1.SelBold=0
RichTextBox1.SelItalic=0
RichTextBox1.SelUnderline=0
End If
If item=2 then RichTextBox1.SelBold=NOT RichTextBox1.SelBold
If item=3 then RichTextBox1.SelItalic=NOT RichTextBox1. SelItalic
If item=4 then RichtextBox1.SelUnderline=NOT RichtextBox1. SelUnderline
Case "PARAGRAPH":
RichTextBox1.SelAlignment=item-1
Case "TEXT":
If item=1 then RichTextBox1.SelColor=&H000000
If item=2 then RichTextBox1.SelColor=&HFFFFFF
If item=3 then RichTextBox1.SelColor=&HFf1010
If item=4 then RichTextBox1.SelColor=&H1010FF
If item=5 then RichTextBox1.SelColor=&H10Ff10
Case "PAGE":
If item=1 then RichTextBox1.BackColor=&HFFFFFF
If item=2 then RichTextBox1.BackColor=&H000000
If item=3 then RichTextBox1.BackColor=&HA0A0A0
If item=4 then RichTextBox1.BackColor=&HFFFF01
If item=5 then RichTextBox1.BackColor=&H40F0F0
Case "EDITOR":
If item=1 then TempText=RichTextBox1.SelText
If item=2 then
TempText=RichTextBox1.SelText
RichTextBox1.SelText=""
End If
If item=3 then RichTextBox1.SelText=TempText
If item=4 then RichTextBox1.SelText=""
If item=5 then
RichTextBox1.SelStart=0
RichTextBox1.SelLength=Len(RichTextBox1.Text)
End If
If Item=6 Then
MsgBox RichTextBox1.TextRTF
End If
End Select
End Sub
This subroutine is a big Select Case statement, which examines the value of the WhichMenu variable and carries out the action depending on the selected option. If the user selected an option from the Character menu (WhichMenu="PARAGRAPH"), the code sets the SelBold, SelItalic, and SelUnderline properties accordingly. If the user selected an option to change the color of the text or the page on which the text is displayed, the code sets the TextColor and BackColor properties.
Most of the code is straightforward, with the exception of the Size selection of the Font menu. This option leads to another submenu, with various font sizes. The program adds a number of options (font sizes) to the IEPOP2 control and then displays it. When the user makes a selection from this menu, the following subroutine is executed:
Sub IEPOP2_Click(item)
RichTextBox1.SelFontSize=10+(item-1)*2
End Sub
Here, we use the index of the selected item in the IEPOP2 control to set the font size of the selected text.
The last segment of the IEPOP1_Click() subroutine we'd like to discuss is the implementation of the editor's shortcut menu. The Copy, Cut, and Paste commands don't use the Clipboard to temporarily store some text. Instead, the copied text is stored in a global variable, TempText, which is then pasted onto the control with the Paste command. This approach isolates the RTFEditor application from the rest of the system and all the editing is done locally. It is possible to exchange data with other applications, however, with the Ctrl-X (cut), Ctrl-C (copy), and Ctrl-V (paste) keystrokes. This functionality is built into the controls and Windows itself, and you don't have to do anything about it.
The last option in the shortcut menu displays the RTF code of the document in a message box, as shown in Figure 26.9. This option is included for your experimentation with RTF code, and you should use it with very small documents. If the editor's window contains many lines of code, the message box will overflow and not display anything.
Figure 26.9 : The last command in the shortcut menu displays the document's RTF code in a message box.
Saving and Recalling RTF Documents
RTFEditor is a practical tool, but what good is an editor if it can't store the documents into disk files and recall them later? Indeed, this application lacks two very important functions, which we are going to add momentarily. Even without
the benefit of storing files on disk, you have learned how to present nicely formatted information to the user. You can use a word processor to produce the RTF code and then place it on a RichTextbox control. With some programming effort, you can allow the users to annotate the document, right on their screens. You can also place a RichTextbox control on a Web page and collect information from your viewers. To do so, you can copy the TextRTF property to a hidden textbox and submit it to the server. Or you can use it in conjunction with Exchange, to let users create formatted e-mail messages. The Rich Textbox control comes in very handy for developing intranet applications. Once the commands for saving and opening files are implemented, RTFEditor will become a handy utility for your Web pages.
The Rich Textbox control provides two methods for saving and loading documents to and from files. These methods are called SaveFile and LoadFile, and they can save documents in RTF or text format. The syntax of the SaveFile method is
RichTextBox1.SaveFile filename, filetype
where filename is the full name of the file in which the document will be stored and filetype indicates whether the document will be stored in RTF format (filetype=0) or plain text (filetype=1). The syntax of the LoadFile method is similar:
RichTextBox1.LoadFile filename, filetype
The Open and Save As commands can be implemented with a single statement. But hardcoding the name of the file won't take you far. A well-behaved Windows application must prompt the user for the name of the file to be opened or saved on disk. This is done with another OCX control, the Common Dialogs control, which we'll explore in the next section.
The Common Dialogs Control
The Common Dialogs control is a peculiar one because it's not displayed on the layout at runtime. It's a control that provides its services to the applications, but it need not be displayed, just like the Timer control. The services provided by the Common Dialogs control are the common Windows 95 dialog boxes, like the Open and Save As dialog boxes, which let the user select a filename; the Color dialog box, which lets the user select a color; the Font dialog box, which lets the user select a font; and so on. After you learn how to display the Save As and Open dialog boxes, you can try substituting the Font popup menu of the RTFEditor application with the standard Font dialog box and the two color menus with the Choose Color dialog box. Figures 26.10 and 26.11 show the two Common Dialog boxes we use in our example: the Save As and Open dialog boxes.
Figure 26.10 : The Save As dialog box.
Figure 26.11 : The Open dialog box.
To call on the services of the Common Dialogs control, you must first place an instance of the control on the layout. Use the Insert ActiveX control command of the Edit menu, and in the Insert ActiveX control box that will appear (refer to Figure 26.6) locate the Common Dialogs control. Then click the OK button to place it on the layout. Notice that you can't adjust its size, because the Common Dialogs control remains hidden at runtime. However, you can set several properties to adjust its function on the layout, like the font to be used, a default filename to appear when the Open or Save As dialog boxes are displayed, and so on.
Control Pad will insert the following object definition in the HTML file for the Common Dialogs control:
<OBJECT ID="CommonDialog1" WIDTH=32 HEIGHT=32
CLASSID="CLSID:f9043C85-f6f2-101A-A3C9-08002B2f49FB">
<PARAM NAME="_Version" VALUE="65536">
<PARAM NAME="_ExtentX" VALUE="847">
<PARAM NAME="_ExtentY" VALUE="847">
<PARAM NAME="_StockProps" VALUE="0">
</OBJECT>
Once the Common Dialogs control has been placed on the layout, you can use its Action property to display any of the Windows dialog boxes. The Action property may have one of the following values:
1Displays the Open dialog box
2Displays the Save As dialog box
3Displays the Color dialog box
4Displays the Font dialog box
5Displays the Printer dialog box
Once you assign a value to the Action property, the corresponding dialog box will appear on the screen and the execution of the program will be suspended until the dialog box is closed. The user can traverse the entire structure of his or her hard disk and locate the desired filename. Once the Open or Save button has been clicked, the control is returned to your application, which can read the name of the file selected by the user (property FileName) and use it to open the file or store the current document.
The Open and Save As Commands
Let's see how the File Open and File Save options were added to the application. The new project is called RTFEditor1. (We didn't want to add to the RTFEditor application and make it more complicated than necessary.) Open the RTFEditor.htm file with the ActiveX Control Pad and save it as RTFEditor1. First, you must edit the HTML file to add a sixth command button, as shown in Figure 26.12. This entails some adjustments to the table because there will be six rows now. You can open RTFEditor1.htm and look at the source code. It's quite similar to the RTFEditor application, and we need not repeat the HTML code here.
Figure 26.12 : The improved RTFEditor application can save and load documents to and from the local disk with the
File menu's options.
The new command button functions just like the others. Each time the command button is clicked, a Popup Menu control with the following options is displayed: New File, Load File, and Save File. Here's how the three options are added to the menu from within the IEPOP1_Click() subroutine:
Sub FileMenu_Click()
WhichMenu="FILE"
IEPOP1.Clear