|
|
|
|
|
       |
 |
|
|
Creating Editable Web Pages by Shannon O'Donnell You know that the AS/400 can be used as a Web server, capable of storing and serving HTML Web pages. This capability means that you can create a truly versatile suite of Web-based applications hosted on your AS/400. One type of Web-based application that you may not have considered yet is creating an online, HTML-based document-editing tool. You may be surprised at just how easy such an application can be to create. Read on.
Internet Explorer's Easter Eggs By now, most everyone knows about DVD easter eggs, those hidden "treasures" stored on DVDs that can only be accessed by pressing a certain key pattern on your computer keyboard or TV remote control, during a specific scene, or by using some other equally obscure method. DVD easter eggs add a lot of fun to the whole DVD experience. And, like DVDs, Microsoft's Internet Explorer ActiveX object contains many easter eggs. One of those hidden treasures is the ability to provide custom editing capabilities to browser documents. Starting with Internet Explorer Version 4.0, Microsoft has included some sophisticated HTML editing capabilities. Since most things HTML and Web related are foreign to AS/400 programmers, the editing features of IE may have gone unnoticed by most of us. But with each subsequent release of IE, the editing capabilities have only grown stronger. Editing Features Here are just a few of the editing features available to you via a Web page hosted in Internet Explorer:
And there's much more. Making a Web Page Editable So how do you make a Web page editable? There are a couple of methods you can use. The first is to use the HTML document's designMode property. Setting the designMode property to True or On puts the document in design mode. For example, the following HTML code will allow a user to toggle design mode on and off in a Web page:
<HTML>
<script for="btnDesign" event="onclick">
targetDoc = document.frames(0).document;
if (targetDoc.designMode == "On")
targetDoc.designMode = "Off";
else
targetDoc.designMode = "On";
</script>
<button id=btnDesign>Toggle Design Mode Off and On</button>
<iframe src="c:\editdoc.htm"
style="border: black thin; width:100%; height:200px"> </iframe>
</HTML>
In this example, the Web page named editdoc.htm is displayed in a frame where it can be edited. You can load pretty much any Web page into the frame by changing the value in the src parameter of the iFrame property. However, just to make things easy, here's the source for the editdoc.htm file. <HTML> Here is some text you can edit. </HTML> Create a new HTML file, add the above code to it, and save it on your hard drive as C:\EditDoc.htm. The other method of putting a Web page into edit mode is to use the contentEditable attribute. contentEditable The contentEditable attribute, like designMode, is an attribute of the HTML document, and it can be set at both design time and run time. To set the contentEditable attribute property, you first need to define an HTML division (DIV) in your Web page. You can then set the HTML code between the opening and closing division statement tags to be editable. The following is an example of setting the contentEditable property during design time: <HTML> <HEAD> </HEAD> <BODY> <DIV ID=MPO contentEditable="True"> Here is some text you can edit. </DIV> </BODY> </HTML> Adding Editing Commands Once you've put a document into editable mode, you'll probably want to do such things as allowing the user to set the text to bold or italic, or even to underline specific text. To accomplish all of these and many other editing features, you must take advantage of the EXECCOMMAND attribute. ExecCommand, like contentEditable, is an attribute, or property, of the HTML document. Using execCommand, you can achieve any of the editing properties mentioned in the first part of this article. The ExecCommand takes the following form:
Document.execCommand("xxx")
Where xxx is the command you want to execute. For example, to set selected text to be bold, you would replace xxx with Bold. To set selected text to italic, replace xxx with Italic. The following code sample demonstrates how to create an editable section of an HTML document that users can type text into. When users select text, by highlighting it, they can then click a button and change the text to bold, italic, or underline (or any combination of the three):
<HTML><HEAD> </HEAD>
<BODY>
<div align=center>
<div unselectable="on" align=center
style="height:300; width;400 bacground-color:powderblue;
border:outset powderblue">
<BR>
<div id=foo contenteditable align=left
style="height:250; width:350; background-color:white
font-face:Arial; padding:3;
border:inset powderblue; scrollbar-base-color:powderblue;
overflow=auto;" >
</div>
<br>
<button unselectable="On"
onclick='document.execCommand("Bold");foo.focus();'
style="width:80; background-color:powderblue;
border-color:powderblue">
<B>Bold</B></button>
<button unselectable="On"
onclick='document.execCommand("Italic");foo.focus();'
style="width:80; background-color:powserblue;
border-color:powsderblue">
<B><I>Italic</I></B></button>
<button unselectable="On"
onclick='document.execCommand("Underline");
foo.focus();'
style="width:80; background-color:powderblue;
border-color:powderblue;">
<B><U>Underline</U></B></button>
</div>
</div>
</body>
</html>
Read More About It Most of the information presented in this article can be found on the Microsoft Web site. You can also find a pretty complete list of the execCommand command parameters on this Web site as well. Play around with the techniques shown in this article and see what you can come up with. You can create a pretty nifty AS/400 Web-based application by giving your users the ability to edit their own Web pages.
|
Editors
Contact the Editors |
|
Last Updated: 10/24/02 Copyright © 1996-2008 Guild Companies, Inc. All Rights Reserved. |
MAGIC SOFTWARE