Elemi alkalmazások fejlesztése

HTML
DOWNLOAD

Méret: px

Mutatás kezdődik a ... oldaltól:

Download "Elemi alkalmazások fejlesztése"

Réka Deákné
8 évvel ezelőtt
Látták:

1 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) oldal

2 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

3 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. ( 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

4 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

5 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

6 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

7 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

8 + " & 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

Hasonló dokumentumok

Szabóné Nacsa Rozália. Feladat. Készítsünk el egy üres FormView alapú alkalmazást és építsünk köré egy súgó környezetet.

Szabóné Nacsa Rozália. Feladat. Készítsünk el egy üres FormView alapú alkalmazást és építsünk köré egy súgó környezetet. Szabóné Nacsa Rozália Feladat Készítsünk el egy üres FormView alapú alkalmazást és építsünk köré egy súgó környezetet. 1 Tartalom Tárgymutató 2 Keresés Menüpontok 3 HTML oldalak HTML oldalak felsorolása