1. FELADAT: SÚGÓ KÖRNYEZET KIÉPÍTÉSE...2 A MEGOLDÁS STRATÉGIÁJA...3 INDULÓ PROJECT ELKÉSZÍTÉSE...3 HTML HELP WORKSHOP...3 HTML Help Workshop letöltése...3 A HTML Help Workshop installálása...3 A HTML Help komponensei...4 HTML OLDALAK ELKÉSZÍTÉSE...4 A SÚGÓ PROJECT ELKÉSZÍTÉSE...5 Tartalomjegyzék elkészítése...5 Témakörök és kapcsolataik meghatározása...5 Az eredmény ellen rzése...6 AZ ALKALMAZÁS ÉS A SÚGÓ ÖSSZEILLESZTÉSE...7 Az alkalmazás felkészítése a help környezet használatára...7 A Súgó menüpontok felélesztése (callback)...7 Tartalom menüpont...7 void ::OnHelpContents()... 7 Tárgymutató menüpont...7 void ::OnHelpIndex()... 7 Keres menüpont...8 void ::OnHelpSearch()... 8 F1 billenty kezelése...8 BOOL ::OnHelpInfo(HELPINFO* phelpinfo)... 8 1. oldal
1. Feladat: Súgó környezet kiépítése Készítsük el egy üres FormView alapú alkalmazást és építsünk köré egy súgó környezetet. Ebben a feladatban nem a program tevékenysége a fontos, ezért egy fiktív, de a menükezelést jól szemléltet programot fogunk elkészíteni. Az alábbi táblázat alkalmazásunk menüpontjait tartalmazza. Caption ID Hely Üzenet Üzenetkezel File Exit ID_FILE_EXIT Színek Piros ID_PIROS Kék ID_KEK Sárga ID_SARGA Gyümölcsök Alma ID_ALMA Körte ID_KORTE Szilva ID_SZILVA Állatok Kutya ID_KUTYA Macska ID_MACSKA Egér ID_EGER Súgó Tartalom ID_HELP_CONTENT Command OnHelpContents() Tárgymutató ID_HELP_INDEX Command OnHelpIndex() Keresés ID_HELP_SEARH Command OnHelpSearch() 2. oldal
A megoldás stratégiája A feladatot a HTML Help Workshop fejleszt eszközzel oldjuk meg. A menüpontok struktúráját követve elkészítjük tartalomjegyzéket, majd mindegyik menüponthoz készítünk egy HTML alapú súgó oldalt. A súgó oldalakon bizonyos szavakat kulcsszóként fogunk kezelni és a kulcsszavak között megadunk bizonyos kereszthivatkozásokat: (A kutya szereti a macskát. A szilva kék., stb. ). A súgó indítható a TARTALOM menüponttal, a TÁRGYMUTATÓ menüponttal és a KERES menüponttal. Az F1 billenty vel a súgó tartalomjegyzéke tölt dik be. A súgó oldalak tartalma ne az alkalmazás ablakába, hanem külön ablakba kerüljön. Induló project elkészítése El ször elkészítünk egy FormView alapú MFC projektet. A projekt készítése során NEM KELL BEJELÖLNI A CONTEXT SENSITIVE HELP KAPCSOLÓT, mert az nem HTML alapú környezethez készült. Step 1: MFC AppWizard.exe Project name: HHDemo Step 2: Mint korábban Step 3: Mint korábban Step 4: Context sensitive help NINCS BEKAPCSOLVA!!! Step 5: Mint korábban Step 6: BaseClass: CFormView HTML Help Workshop Töltsük le a htmlhelp.exe - 3,426 Kb és a HelpDocs.ZIP - 1,349 Kb fájlokat. (http://www.microsoft.com/downloads/release.asp?releaseid=33071 site) Futtassuk le a htmlhelp.exe programot. A fejleszt eszköz alapértelmezésben a Program Files/HTML Help Workshop alkönyvtárba kerül. Érdemes kicsomagolni a HelpDocs.Zip fájlt is. Itt hasznos tudnivalók találhatunk a rendszer alkalmazásával kapcsolatban. A HTML Help Workshop projek fájljának kiterjesztése.hpp. A HTML Help Workshop-pal (HHW) egy HTML alapú súgó keretrendszert készíthetünk az alkalmazásunk köré. HWW Súgó ablaka: Tárgymutató 3. oldal
HTML Help az alábbi komponenseket tartalmazza.: 1. HTML Help Workshop: grafikus felület help készit a project file (.hpp), a tartalonjegyzék (.hhc), az index ek (.hhk) és minden más kapcslódó információ egységes kezelésére. 2. HTML Help ActiveX control: a navigálás és az ablakkezelés feladatinak meghatározása. 3. The HTML Help Viewer: a help keretrendszer megtekintése 4. Microsoft HTML Help Image Editor: kép fájlok konvertálása, szerkesztése, megtekintése 5. The HTML Help Java Applet: a HTML fájlok navigációjának Java alapú eszköze 6. The HTML Help executable program: ezzel a programmal tesztelhetjük a súgó programunkat. 7. The HTML Help compiler: az a program a tartalomjegyzékb l, az indexb l és más megadott fájlokból összeállít egy súgó fájlt. (.hhc) 8. The HTML Help Authoring Guide: Útmutató a súgó elkészítéséhez. HTML oldalak elkészítése Készítsünk HTML oldalakat az egyes témakörökhöz. Az oldal <title> címmel tudunk majd ezekre az oldalakra hivatkozni. </title> tagjai között szerepl kutya.htm <html> <head>... <title> Kutya </head> </title> Témakör <body text="#000000" bgcolor="#cccccc"> <h1><span lang="hu"><font color="#000099"> A kutya </font></span></h1> <p> blabla </p> <Object type="application/x-oleobject" classid="clsid:1e2a7bd0-dab9-11d0-b93a- 00c04fc99f9e"> <param name="alink Name" value="kutya link"> </OBJECT> Bels link </body> 4. oldal
A súgó project elkészítése 1. Készítse el a szükséges HTML oldalakat és helyezze el azokat az alkalmazás HTML alkönyvtárában ( HHDemo\HTML ) 2. Indítsa el a hhw.exe programot 3. Válassza ki a File/New/Project pontokat. 4. Készítse el a tartalomjegyzéket (Contents), a kulcsszavakat (Index), majd rendelje a projekthez a szükséges HTML fájlokat. 5. MENTSE EL a projektet annak az alkalmazásnak az alkönyvtárába, amelynek készül a súgó. 6. FORDÍTSA LE a projektet. (Eredmény:.hpp,..chm,.clw,.hkk,.hhc) Project Contents Index Készítsük el egy a menüponthoz illeszked tartalomjegyzéket és a tartalomjegyzék egyes pontjaihoz rendeljük hozzá a nekik megfelel.htm fájlokat (vagy azok egy részét). Gomb Látvány Entry title Files/URL Megjegyzés Színek A sárga szín Html\sarga.htm A könyvecskét létrehozás után az Advanced fülön lehet kiválasztani. A gombra kattintva tudja módosítani a kiválasztott elem beállításait. Témakörök megadása Kapcsolódó témakörök Hivakozás bef zése 5. oldal
Az alábbi táblázatban megadtuk a HHDemo.hpp fájlt. Ellen rizze le soronként, hogy minden adat benne legyen a projektben. Ha valami kimaradt, vagy módosítani szeretne, akkor indítsa el újra a Hhw programot és további módosításokkal próbálja meg elérni az alábbi eredményt. [OPTIONS] Compatibility=1.1 or later Compiled file=hhdemo.chm Contents file=toc.hhc Default Window=Tripane Default topic=html\intro.htm Display compile progress=no Full-text search=yes Index file=index.hhk Language=0x40e magyar Title=HHDemo Help [WINDOWS] Tripane="HHDemo HTML Help","toc.hhc", "C:\Projects\HHDemo\index.hhk",,,,,,,0x2520,,0x3006,,,,,,,,0 [FILES] html\szilva.htm html\_topic_not_found.htm html\alma.htm html\eger.htm html\intro.htm html\kek.htm html\korte.htm html\kutya.htm html\macska.htm html\piros.htm html\sarga.htm [INFOTYPES] Ne fusson az alkalmazást, miközben a HHW-vel dolgozik, mert ha az megfoghatja a fájlokat! Saját jegyzeteim 6. oldal
Az alkalmazás és a súgó összeillesztése! " 1. Másoljuk át alkalmazásunk (HHDemo) alkönyvtárába a htmlhelp.h header fájlt. (Ez valószín leg a Program Files\Html Help Workshop alkönyvtárban van. 2. Vegye fel program könyvtárai közé a htmlhelp.lib könyvtárat. 3. Illessze be a htmlhelp.h header fájlt az alkalmazás MainFrame osztályában. (MainFrame.cpp) #$% &!"'() '() Készítse el az alkalmazás menüpontjait a megadott feladat szerint. " & Project: Class name: Object IDs: Messages: MainFrame.cpp HHDemo ID_HELP_CONTENTS COMMAND void ::OnHelpContents() { // TODO: Add your command handler code here HtmlHelp ( 0, "hhdemo.chm", HH_DISPLAY_TOC, NULL) ; } *%" & Project: Class name: Object IDs: Messages: MainFrame.cpp HHDemo ID_HELP_INDEX COMMAND void ::OnHelpIndex() { // TODO: Add your command handler code here HtmlHelp ( 0, "hhdemo.chm", HH_DISPLAY_INDEX, NULL) ; } 7. oldal
+ " & Project: Class name: Object IDs: Messages: MainFrame.cpp HHDemo ID_HELP_SEARH COMMAND void ::OnHelpSearch() { // TODO: Add your command handler code here HH_FTS_QUERY q ; memset(&q, 0, sizeof(hh_fts_query)); q.cbstruct = sizeof(hh_fts_query); q.funicodestrings = FALSE; q.pszsearchquery = ""; q.iproximity = HH_FTS_DEFAULT_PROXIMITY; q.fstemmedsearch = FALSE; q.ftitleonly = FALSE; q.fexecute = TRUE; q.pszwindow = NULL; } HtmlHelp ( 0, "hhdemo.chm", HH_DISPLAY_SEARCH, (DWORD)&q) ;,-(. Project: Class name: Object IDs: Messages: HHDemo ON_HELP_INFO MainFrame.cpp BOOL ::OnHelpInfo(HELPINFO* phelpinfo) { // TODO: Add your message handler code here and/or call default HtmlHelp ( 0, "hhdemo.chm", HH_DISPLAY_TOC, NULL) ; return true; } 8. oldal