|
|
|||||||||
 |
||||||||||
With "The Developer's Notes" not only are you exposed step by step through legions of source code (in some cases so revolutionary it was previously proprietary), you will learn tips and tricks that can help you accomplish your goals and impress your audience. If you want to get your hands on the FREE electronic version to evaluate, download here. The electronic version (Microsoft DOC, 5MB) does not include all source code, work graphics and so forth but it will provide a great sample for the Full CD version (see details below). Don't forget to see the FREE BONUS below.
REAL-TIME INTERACTIVE CONTENT MANAGEMENT Many businesses that have embraced the web as a tool for performing tasks and daily activities are pushing the envelope of bringing web-based UI’s up to functioning like desktop applications that almost everyone can intuitively use without incurring a large learning curve. The one thing I have noticed, however, is that while this “benchmark”, as it were, can be reached based on approach, nothing has yet to really get web-based UI development further in that direction. With the sections that follow based on several javascript controls that I’ve developed, I’ll take you from a simple web-based RTE, to what I’ve coined as the content block framework (allows you to spawn multiple controls, maintain content, preview content in real-time, etc) integrated with the RTE, to the JIM Control (a virtual embedded windowing system which has many other features aside from windowing). After seeing all of these things in action, and learning how they work, I believe you will see that UI development can be taken today. Knowledge of each of these areas can help you create a web-driven content management UI that is both robust and intuitive. The RTE: Rich Text Editor A rich text editor is a great asset to have when you have one or more people responsible for maintaining content on web pages. The rich text editor allows the user to maintain content without needing to have any programming knowledge or additional software. Through the rich text editor (commonly known as RTE) the user can manipulate the content, apply elements (such as bold), add images and more (possibly much more depending on how it is built). See the images below to get an idea of what an RTE is:  Figure 1: Default RTE State  Figure 2: Starting To Apply Color  Figure 3: Selecting Color To Apply  Figure 4: After Color Application With the RTE editor that I have developed here, which operates within a web browser (Internet Explorer and Firefox), was built to demonstrate a way with which an entire RTE can be created without needing to resort to setting up listeners (to monitor keypresses or mouse activities) and without needing to be confined to using a textarea and then pushing that into an IFRAME; this can be invaluable if you have other javascript functions operating on the page that are performing monitoring for their own purposes. One of the biggest reasons for needing listeners using traditional methods is that fundamental support for knowing where the caret (blinking cursor) is at in the text as well as in the actual source code of the content is not consistently supported in virtually any web browser. The RTE editor uses an IFRAME for all UI activities and the textarea is only present if a user wishes to edit the content at the source code level. One other nifty feature for the RTE editor is you can control what functions you want to allow a user to have. For example, you may not want to give a user the option to view and edit source code, you can disable that button for the user and the button will not be exposed. To allow customization of the buttons, a separate javascript file was built which includes just the RTE UI buttons (rte_editor_btns.js). A separate javascript file was also created for text color specifications (rte_editor_palette.js). With this file, it is important to note the RGB array. This array was created because the Firefox web browser will automatically convert hex color specifications into the RGB equivalent. Both arrays, however, are the same (in that the hex value specified in the top array corresponds to the same element position of the second array for the rgb value). You will also find there are two stylesheets controlled by the RTE. The first stylesheet, rte_editor_css.css, is responsible for the RTE editor itself and the second stylesheet, rte_content_css.css is responsible for applying styles to the content that is rendered within the IFRAME of the RTE editor. Finally, an on-demand function listener was integrated into the RTE. This listener allows you to see what the RTE is doing as it completes actions (such as the user clicking on the ‘bold’ button). In order to activate the listener, click on the button labeled ‘Start Listening’. After you do something in the RTE a report will be generated that gives you various bits of information such as the order with which RTE functions were called, caret positional data and more. To turn off the listener, click on the button a second time. How It Works The fundamental function of the RTE editor is being able to function without using listeners (with the exception of Internet Explorer when the ENTER key is pressed). In order to do this, all that is needed is to be able to... About The Author The author has written numerous academic articles ranging from Object Usability Metrics to Web-based Artificial Intelligence and Statistics and has also published two books. With over ten years of experience, Joe is also a certified secure IP transactions developer and develops enterprise-level web applications and predictive systems.  Get this amazing title via Windows™ based CD-ROM while its available! You can get a FREE electronic version here if you prefer to get a more in-depth peek into what you'll get when you order the full version. The electronic version is Microsoft DOC file, 5MB. |
||||||||||
 |
||||||||||
 Main Page
  ©CommerceWeaver Pro™ & Web Site ©2004 All Rights Reserved. Optimized for IE 6x. Terms of Service.
 |
||||||||||
