Editor-Browser direct Testing

Watch­ing and walk­ing codes - The View Ed­i­tor

For the user who wants to watch into the codes, for quick­ly change or up­date them, this Ed­i­tor win­dow was built. Here you can op­ti­mize cer­tain ar­e­as of an ex­ist­ing page es­pe­cial­ly as re­gards the fonts and text lay­out, brows­ing the whole code or tak­ing any text se­lec­tion to fit a prop­er­ly re­sized frame, and try or ap­ply oth­er spe­cial op­tions with ease, like run the test from ed­it­ing an ex­ter­nal Script or Style Sheet, or through frameset doc­uments. You can even test code chang­es in real time by the hy­phenator-Pro in­ter­nal brows­er, get­ting au­to­mat­ic win­dows set­up and text po­si­tion­ing. Al­though not as­sum­ing to be a com­plete ed­i­tor, this tool holds very so­phis­ti­cat­ed fea­tures, con­ceived to sup­port the web­mas­ter as well as the writ­er's task with the most han­dy and in­ter­ac­tive fea­tures; by the way, it was used to build this site. In fact the best way for en­hanc­ing the ef­fi­cien­cy of a pro­gram is to drill it.

The Hy­phen­a­tion sym­bol dis­play

 Syntax Color mode

The nor­mal Font­/Col­or mode

 Syntax Color mode

The Track-Bar Font re­siz­ing

As you can see on the im­age, when the win­dow is re­duced in size, a cas­cade menu re­places all the but­tons.

 Track-Bar

Syn­tax fad­ing mode and the
Light hy­phen­a­tion sym­bol


 Syntax Color mode
See the Ed­i­tor Fa­cilities page for more aided set­ting of ex­tend­ed char­ac­ters and spe­cial sym­bols.

The text book­marks and their but­tons

 bookmarks buttons

The text se­lec­tion by "jump­ers".
Tha an­chor prop­er­ty of these point­ers let them to be used like jump­ers, where the Shift_Ctrl·J will con­nect two con­tig­u­ous point­ers, high­light­ing the text area be­tween the cur­rent one - or the car­et it­self, if moved - and the last or the next one, de­pend­ing on the Left or Right Ctrl key stroked. Wid­er se­lec­tions can be tak­en Shift_click­ing any but­ton, for will it be se­lected the text area in­clud­ed by the two match­ing in­dex­es: the high­light­ed but­ton (or the de­fault book­mark) as well as any start po­si­tion and the Shift_clicked one, wheth­er they are con­tig­u­ous or free­stand­ing; hence the point­er will be set to the be­gin­ning of the se­lec­tion, which can still be ad­just­ed to match oth­ers.
Not only these Book­marks can be add­ed and re­moved in any or­der; the but­tons in view can even be suit­a­bly re­placed with the cur­rent car­et in­dex by a Ctrl+ click, and they can be sort­ed to ob­tain a reg­u­lar, eas­i­er pro­gress, re­mov­ing du­pli­cates if any, and those clos­er than ±10 bytes (or oth­er cus­tom-de­fined val­ue).
This pro­cess e­ven­ly ap­pli­es to that spe­cial Find&Replace op­tion, for the au­to­mat­ic mark­up of the oc­cur­rences of a string into one or more doc­uments at a time (see de­tails). Such but­tons are col­or­ed in al­ter­nate warm­er nu­ance.
In this case a 2nd area is pro­vid­ed to sto­re the cur­rent se­quence be­fore sort­ing, that can be re­called by the |Re­vert| com­mand. Once this area for sto­re is in use it will not be o­ver­written un­less its con­tent is re­covered, keep­ing safe any man­u­al se­quence set be­fore, and leav­ing the ba­sic area to be re­placed an­y­way by oth­er search­es or chang­es.
The hy­phen­a­tion Sym­bols.
First of all be­ing ded­i­cat­ed to the hy­phen­a­tion pro­cess, the choice is giv­en by the be­tween the true hy­phen­a­tion sym­bols |True Hy­phen|, as the |­| is for HTML .(1), or the or the |­\-| is for RTF and the fast hy­phen­a­tion sym­bols |Light Hy­phen| , as the |·| .(2) used by de­fault to as­sure the best read­a­bil­i­ty to any hy­phen­at­ed text.
The hy­phen it­self |-| can be used in some cas­es, es­pe­cial­ly for not com­plete­ly en­cod­ed strings or un­i­den­ti­fied ex­cerpt of any kind, as they could be cop­ied from out­side and past­ed in a new page just to hy­phen­ate them.
While the first case tog­gles be­tween the two simbols in use, the se­cond will show the |·| it the light mode, whilst in the "true" mode noth­ing but the ef­fec­tive hy­phen­a­tion of the text into the Ed­i­tor's frame.
The Font and Col­ors of the code.
The font han­dling was pri­or­itized, for view­ing as well as brows­ing the code. There are three modes to dis­play a doc­u­ment:
  • nor­mal mode: one sin­gle text font­/col­or can be se­lected for the whole page. It be re­sized in real time by one point step (5pt to 54pt) with the Track Bar .(3) and the page browsed hy­phen­at­ed into a win­dow with the same shape of the ed­i­tor's frame, to al­low a quick e­val­u­a­tion of the ef­fect; you can browse the en­cod­ed page as is - |Browse code| but­ton - or the clean text or a se­lected por­tion of it stripped by the most Tags but,with the font sie and type set here­with - |Browse text| but­ton - in or­der to e­val­u­ate the ar­range­ment of that text for­mat into one de­fined area.(5), all with­out chang­ing the state of the source into the frame.
  • syn­tax fad­ing mode: that help to the vis­u­al se­lec­tion of the dif­fer­ent ar­e­as of an HTML or oth­er Web doc­u­ment. Once more this does not match the u­su­al ed­i­tors' syn­tax col­or­ing, in that it does not sep­a­rate eve­ry syn­tax Tag or Re­served word from the Tag's pa­ram­e­ters, con­tent and so on, but ra­ther it high­lights the four main true ar­e­as like any whole HTML Tags, dis­tin­guished from the Script and Meta in­struc­tion (cus­tom de­fin­a­ble), all sep­a­rat­ed from the out­put Text and, last, the in­clud­ed Mime en­cod­ed and em­bed­ded ob­jects from the HTML Body of the mail mes­sages.
  • se­lec­tive cus­tom mode: what might ap­pear a lim­i­ta­tion, in our case holds sev­er­al ad­van­tages: the de­fault Font + Col­or set­ting of any de­fined area may be changed when the car­et is on that area through the main com­mand but­tons [up­per right tool­bar of the Main win­dow] and any Font Size by the low­er Track-Bar with an im­me­di­ate view; fur­ther­more both text and any kind of code can be tem­po­rar­i­ly cus­tom­ized ac­cord­ing to our vis­u­al needs (see also the The Quick Editor Popup menu de­scrip­tion) while the Ctrl+V) com­mand will paste any string fit­ting the lo­cal Font for­mat then, us­ing the |Paste| com­mand from the po­pup menu or the Shift_INS in­stead, any string that is be­ing past­ed in what­ev­er po­si­tion will main­tain its o­rig­i­nal font­/col­or (e.g. com­ing from a Rich­Ed­it source), al­low­ing to check at first if dif­fer­ent code ar­e­as are be­ing mixed, while keep­ing some­how a vis­i­ble trace of that por­tion of code and its re­cent chang­es un­til they are ap­proved, switch­ing the syn­tax col­or but­ton to re­fresh the whole page;
 Fonts handle JavaScript
    web­mas­ters who like man­u­al fram­ing of pag­es should know how of­ten this might help. How­ev­er any [new] text se­lec­tion can be nor­mal­ized in any mo­ment, i.e. con­vert­ed to the font that starts the se­lec­tion, just o­pen­ing the Font and Col­or di­a­logs and clos­ing them to con­firm the dis­played pa­ram­e­ters for the whole string. When it deals with lo­cat­ing whole ar­e­as to be cop­ied from one file to an­oth­er, like it of­ten oc­curs cre­at­ing HTML pag­es - just one more ex­am­ple of our field - this dy­nam­ic tech­nique serves much bet­ter than a syn­tac­tic dis­tinc­tion be­tween sin­gle words and pa­ram­e­ters. Af­ter many years over the key­boards, it is re­veal­ing to be a great help in cre­at­ing this site.
More­o­ver, the text Font­/Col­or can be re­sized with the Track Bar, leav­ing the oth­er set­tings un­changed: in this case too what­ev­er text se­lec­tion may be browsed into the cur­rent­ly vis­i­ble for­mat and style.
The syn­tax fade choice may be set by the tog­gle but­ton .(4), with its opened­/closed book icon.
As a dis­tinc­tive op­tion, any par­a­graphs or se­lec­tion of code can be right-aligned (Ctrl-R) as well as cen­ter (Ctrl-E) and left-aligned (Ctrl-L), one more mode to keep un­der sight cer­tain blocks of code and text out­side any in­den­ta­tion: this will have no ef­fect over the HTML page, but can help to tem­po­rar­i­ly lo­cal­ize e.g. par­a­graphs in word-wrap mode or oth­er de­tails.
Both the de­scribed modes a­bove can show ei­ther the True or the Light hy­phen­a­tion sym­bol: when it deals with RTF files (Rich Text For­mat), where the hy­phen­a­tion is in­te­grat­ed, the True mode does not show any char­ac­ter but the nor­mal syl­lab­i­fied text.
Be­sides, spe­cif­ic Font pa­ram­e­ters and Col­ors can be in­de­pend­ent­ly as­signed to any por­tion of a doc­u­ment, thus al­low­ing to vis­u­al­ly sep­a­rate di­verse ar­e­as (e.g. one com­plex TA­BLE in­side oth­er TA­BLEs, or blocks of code to be moved), par­a­graphs, rou­tines etc., ei­ther for a quick rec­og­ni­tion of some points like with the a­lign­ment, or the ad­van­tage to save eve­ry per­son­al lay­out as is, like a snap­shot of a de­fined de­vel­op­ment de­gree or the scheme of a strat­e­gy, with­out af­fect­ing the code's ef­fi­cien­cy when re­loaded by the hy­phenator-Pro. These lo­cal set­ting will be ap­plied to all the chang­es done or the new text en­tered in­side the de­fined area, while dif­fer­ent for­mats can be in­tro­duced and e­ven­ly man­tained as long as one of the two modes de­scribed a­bove is in­voked to re­set eve­ry­thing. See also the V/Editor's advanced Options.
The in­te­grat­ed text book­marks and But­tons.
For each of these 4 view modes a fixed num­ber of 10 [up­dat­ing] book­marks to car­et po­si­tions can be set, to be cir­cu­lar­ly walk­ed back­ward or for­ward by Left_Ctrl·J and Right_Ctrl·J.
Two main op­tions strong­ly en­hance the u­su­al func­tion­al­i­ty of these in­dex­es:
  • 10 push but­tons cor­re­spond­ing to the ac­tive in­dex­es can be shown­/hid­den (the last used is high­light­ed)in the Sta­tus Bar to the place of the font de­scrip­tion: they can be clicked hence to jump to any re­cord­ed point, even in a dis­con­tin­u­ous way; and will be saved and re­loaded as part of the cur­rent pro­ject. While the Right_Ctrl·K com­mand keys in a point­er and the Left_Ctrl·K de­letes the cur­rent one, the Shift_Ctrl·K is a tog­gle to show­/hide the but­tons at the Sta­tus Bar, to the win­dow's foot­er.
  • At any point of the doc­u­ment the last or next book­mark can be asked, to know a­bout the cur­rent area or where to move: if at least one an­chor is set, as long as the Left_Ctrl or the Right_Ctrl key are pressed they will turn the car­et to a trans­par­ent (red-green) icon show­ing the near­est last or the next book­mark's num­ber. The same be­comes vis­i­ble when the Ed­i­tor is fo­cused from out­side click­ing the Sta­tus Bar, but in full red col­or, help­ing to the im­me­di­ate view of the tight car­et po­si­tion.
The vis­i­ble book­mark but­tons can be pro­vid­ed with each own spe­cial hints, ac­cord­ing to the user's pref­er­ences, that can be re­lat­ed to and show:
  1. the point­ers, i.e. the byte num­ber of the car­et po­si­tion,
  2. the text, cap­tured near­by the in­dex and ex­tend­ed for a num­ber of bytes be­fore and a num­ber of bytes af­ter that the user can set, and it can be large e­nough to al­low the un­e­quiv­o­cal rec­og­ni­tion of the text in­volved.
This may be mean­ing­ful when it deals of up­dat­ing old doc­uments, of which the men­tal trace is far at pre­sent.

 the Tutorial Menu

 the Main Menu



[resize 800x600] Jan. 25, 2007