Izrada Web Preglednika 1 i 2
-
Upload
ivan-navratil -
Category
Documents
-
view
231 -
download
0
Transcript of Izrada Web Preglednika 1 i 2
![Page 1: Izrada Web Preglednika 1 i 2](https://reader030.fdocuments.us/reader030/viewer/2022020715/563db7bb550346aa9a8d71ed/html5/thumbnails/1.jpg)
7/21/2019 Izrada Web Preglednika 1 i 2
http://slidepdf.com/reader/full/izrada-web-preglednika-1-i-2 1/28
IZRADA WEB
PREGLEDNIKAKORAK PO KORAK – PRVI DIO
![Page 2: Izrada Web Preglednika 1 i 2](https://reader030.fdocuments.us/reader030/viewer/2022020715/563db7bb550346aa9a8d71ed/html5/thumbnails/2.jpg)
7/21/2019 Izrada Web Preglednika 1 i 2
http://slidepdf.com/reader/full/izrada-web-preglednika-1-i-2 2/28
KOMPONENTE WEB PREGLEDNIKA
1. Menu bar2. Tool bar3. Address Bar and Search Bar4. Multi-tab Interface5. Glavni prozor
6. Status bar
![Page 3: Izrada Web Preglednika 1 i 2](https://reader030.fdocuments.us/reader030/viewer/2022020715/563db7bb550346aa9a8d71ed/html5/thumbnails/3.jpg)
7/21/2019 Izrada Web Preglednika 1 i 2
http://slidepdf.com/reader/full/izrada-web-preglednika-1-i-2 3/28
KOMPONENTE WEB PREGLEDNIKA
1. Menu bar2. Tool bar3. Address Bar and Search Bar4. Multi-tab Interface5. Glavni prozor6. Status bar
![Page 4: Izrada Web Preglednika 1 i 2](https://reader030.fdocuments.us/reader030/viewer/2022020715/563db7bb550346aa9a8d71ed/html5/thumbnails/4.jpg)
7/21/2019 Izrada Web Preglednika 1 i 2
http://slidepdf.com/reader/full/izrada-web-preglednika-1-i-2 4/28
Z PO NIMO!
• Otvorite Visual studio 2012 Ultimate i odaberiteNew Project...
•
Programirati ćemo Windows Form Application(Windows Formu)
• Programirati ćemo u C# programskom jeziku, alimožemo koristiti bilo koji drugi jezik, ako želimo.
![Page 5: Izrada Web Preglednika 1 i 2](https://reader030.fdocuments.us/reader030/viewer/2022020715/563db7bb550346aa9a8d71ed/html5/thumbnails/5.jpg)
7/21/2019 Izrada Web Preglednika 1 i 2
http://slidepdf.com/reader/full/izrada-web-preglednika-1-i-2 5/28
DODAVANJE KOMPONENTI
• Dodati ćemo MenuStrip
• na lijevoj strani prozora otvoriti Toolbox (Ctrl+W,X)
• dva puta kliknuti na MenuStrip
• pojaviti će se traka u našoj Formi
• kliknuti na strelicu u gornjem desnom uglu trake
• odabrati Insert Standard Items
• pojaviti će se standardni Windows Menu
![Page 6: Izrada Web Preglednika 1 i 2](https://reader030.fdocuments.us/reader030/viewer/2022020715/563db7bb550346aa9a8d71ed/html5/thumbnails/6.jpg)
7/21/2019 Izrada Web Preglednika 1 i 2
http://slidepdf.com/reader/full/izrada-web-preglednika-1-i-2 6/28
DODAVANJE KOMPONENTI
• Dodati ćemo ToolStrip
• dva puta kliknuti na ToolStrip u Toolbox-u
• pojaviti će se traka u našoj Formi
• kliknuti na strelicu u gornjem desnom uglu trake
• odabrati Insert Standard Items
• pojaviti će se standardni Windows ToolBar
![Page 7: Izrada Web Preglednika 1 i 2](https://reader030.fdocuments.us/reader030/viewer/2022020715/563db7bb550346aa9a8d71ed/html5/thumbnails/7.jpg)
7/21/2019 Izrada Web Preglednika 1 i 2
http://slidepdf.com/reader/full/izrada-web-preglednika-1-i-2 7/28
DODAVANJE KOMPONENTI
• Dodati ćemo ToolStrip
• dva puta kliknuti na ToolStrip u Toolbox-u
• pojaviti će se traka u našoj Formi
• kliknuti na strelicu u gornjem desnom uglu trake
• odabrati Insert Standard Items
• pojaviti će se standardni Windows ToolBar
![Page 8: Izrada Web Preglednika 1 i 2](https://reader030.fdocuments.us/reader030/viewer/2022020715/563db7bb550346aa9a8d71ed/html5/thumbnails/8.jpg)
7/21/2019 Izrada Web Preglednika 1 i 2
http://slidepdf.com/reader/full/izrada-web-preglednika-1-i-2 8/28
DODAVANJE KOMPONENTI
• u Solution Explorer-u (sa lijeve strane) desnim
klikom na naziv aplikacije prikazati će se drop-down
menu
• odabrati Add -> New folder
• preimenovati New Folder u Forms
• u taj folder ćemo staviti sve naše Forme
![Page 9: Izrada Web Preglednika 1 i 2](https://reader030.fdocuments.us/reader030/viewer/2022020715/563db7bb550346aa9a8d71ed/html5/thumbnails/9.jpg)
7/21/2019 Izrada Web Preglednika 1 i 2
http://slidepdf.com/reader/full/izrada-web-preglednika-1-i-2 9/28
DODAVANJE KOMPONENTI
• desni klik na folder Forms
• odabrati Add -> Windows Form
• preimenovati je u FrmBrowser
• upravo ta forma će biti prikazana kada budemo
koristili naš preglednik
![Page 10: Izrada Web Preglednika 1 i 2](https://reader030.fdocuments.us/reader030/viewer/2022020715/563db7bb550346aa9a8d71ed/html5/thumbnails/10.jpg)
7/21/2019 Izrada Web Preglednika 1 i 2
http://slidepdf.com/reader/full/izrada-web-preglednika-1-i-2 10/28
Forma FrmBrowser
• dodati ToolStrip
• dodati StatusStrip
• ToolStrip preimenovati u AddressBar
• u Properties (desno dole) pronaći Design i u polje Name
upisati AddressBar
• za sada se nećemo previše brinuti oko StatusStrip-a
![Page 11: Izrada Web Preglednika 1 i 2](https://reader030.fdocuments.us/reader030/viewer/2022020715/563db7bb550346aa9a8d71ed/html5/thumbnails/11.jpg)
7/21/2019 Izrada Web Preglednika 1 i 2
http://slidepdf.com/reader/full/izrada-web-preglednika-1-i-2 11/28
DODAVANJE NuGet OPCIJA
• desni klik na Solution Explorer
• klik na Manage NuGet Packages for Solution
• odaberite Online sources i Include Prerelease
• potražite i instalirajte DockPanel Suite (verzija 3.x)
![Page 12: Izrada Web Preglednika 1 i 2](https://reader030.fdocuments.us/reader030/viewer/2022020715/563db7bb550346aa9a8d71ed/html5/thumbnails/12.jpg)
7/21/2019 Izrada Web Preglednika 1 i 2
http://slidepdf.com/reader/full/izrada-web-preglednika-1-i-2 12/28
AWESOMIUM
• idite na http://www.awesomium.com/download/
• instalirajte Awesomium
• prije instaliranja treba zatvoriti Visual Studio
// SPREMITE SVOJ PROJEKT!
• Nakon instalacije ponovno pokrenite Visual Studio
• sada možete pronaći Awesomium.Net komponente u
Toolbox-u
![Page 13: Izrada Web Preglednika 1 i 2](https://reader030.fdocuments.us/reader030/viewer/2022020715/563db7bb550346aa9a8d71ed/html5/thumbnails/13.jpg)
7/21/2019 Izrada Web Preglednika 1 i 2
http://slidepdf.com/reader/full/izrada-web-preglednika-1-i-2 13/28
DODAVANJE KOMPONENTI –
DRUGI DIO
• dodajte u AdressBar
(klik na strelicu u gornjem desnom uglu, odaberi Edit Items)
• AddressBox
• 3x Button (postaviti ih lijevo od AddresBox)
• 2x Dropdown button
• Textbox
• 2x Button
•
Dropdown button
![Page 14: Izrada Web Preglednika 1 i 2](https://reader030.fdocuments.us/reader030/viewer/2022020715/563db7bb550346aa9a8d71ed/html5/thumbnails/14.jpg)
7/21/2019 Izrada Web Preglednika 1 i 2
http://slidepdf.com/reader/full/izrada-web-preglednika-1-i-2 14/28
DODAVANJE KOMPONENTI –
DRUGI DIO
• dodajte u Awesomium WebControl u Formu
• dodajte WebSession Provider kojega ćemo nazvati
webSession
• WebControl preimenovati u Browser
• Stavite svoju najdražu stranicu u WebControl
(Browser) -> Source
![Page 15: Izrada Web Preglednika 1 i 2](https://reader030.fdocuments.us/reader030/viewer/2022020715/563db7bb550346aa9a8d71ed/html5/thumbnails/15.jpg)
7/21/2019 Izrada Web Preglednika 1 i 2
http://slidepdf.com/reader/full/izrada-web-preglednika-1-i-2 15/28
DODAVANJE KOMPONENTI –
DRUGI DIO
• Dodijeliti imena elementima u AddressBar-u
• btnBack
•
btnForward• btnReload
• tbAddressBox
• btnFavourites
• btnSearchProvider
• tbSearchBox
• btnSearch
• btnHome
• btnMenu
![Page 16: Izrada Web Preglednika 1 i 2](https://reader030.fdocuments.us/reader030/viewer/2022020715/563db7bb550346aa9a8d71ed/html5/thumbnails/16.jpg)
7/21/2019 Izrada Web Preglednika 1 i 2
http://slidepdf.com/reader/full/izrada-web-preglednika-1-i-2 16/28
IZRADA WEB
PREGLEDNIKAKORAK PO KORAK – DRUGI DIO
![Page 17: Izrada Web Preglednika 1 i 2](https://reader030.fdocuments.us/reader030/viewer/2022020715/563db7bb550346aa9a8d71ed/html5/thumbnails/17.jpg)
7/21/2019 Izrada Web Preglednika 1 i 2
http://slidepdf.com/reader/full/izrada-web-preglednika-1-i-2 17/28
DIZAJN PREGLEDNIKA
• IZGLED PREGLEDNIKA
• IZRADA STILOVA
• DOZVOLA KORISNICIMA ZA MIJENJANJE IZGLEDA
![Page 18: Izrada Web Preglednika 1 i 2](https://reader030.fdocuments.us/reader030/viewer/2022020715/563db7bb550346aa9a8d71ed/html5/thumbnails/18.jpg)
7/21/2019 Izrada Web Preglednika 1 i 2
http://slidepdf.com/reader/full/izrada-web-preglednika-1-i-2 18/28
DIZAJN PREGLEDNIKA
• otvorite frmBrowser.cs formu
• odaberite AddressBar
• promijenite slijedeće postavke u Properties
![Page 19: Izrada Web Preglednika 1 i 2](https://reader030.fdocuments.us/reader030/viewer/2022020715/563db7bb550346aa9a8d71ed/html5/thumbnails/19.jpg)
7/21/2019 Izrada Web Preglednika 1 i 2
http://slidepdf.com/reader/full/izrada-web-preglednika-1-i-2 19/28
DIZAJN PREGLEDNIKA
1. Name: AddressBar
2. Accessible Description: AddressBar
3. AccessibleName: AddressBar
4. Anchor: Top, Left, Right
5. AutoSize: False
6. BackColor: Transparent.
7. GripStyle: Hidden8. MinimumSize: (kopirajte vrijednosti iz Size)
9. Stretch: True
![Page 20: Izrada Web Preglednika 1 i 2](https://reader030.fdocuments.us/reader030/viewer/2022020715/563db7bb550346aa9a8d71ed/html5/thumbnails/20.jpg)
7/21/2019 Izrada Web Preglednika 1 i 2
http://slidepdf.com/reader/full/izrada-web-preglednika-1-i-2 20/28
DIZAJN PREGLEDNIKA
• „skinite” 9 slika poput ovih:
• obavezno iz copyright free source
• sa prozirnom pozadinom
• nije bitno koliko su velike
![Page 21: Izrada Web Preglednika 1 i 2](https://reader030.fdocuments.us/reader030/viewer/2022020715/563db7bb550346aa9a8d71ed/html5/thumbnails/21.jpg)
7/21/2019 Izrada Web Preglednika 1 i 2
http://slidepdf.com/reader/full/izrada-web-preglednika-1-i-2 21/28
DIZAJN PREGLEDNIKA
• za svaki objekt u AddressBar (osim tb):
• u Properties odaberite sliku objekta,
• odaberite Project resource file,
• Import...
•
„importirajte” svoje slike u Resources.resx
• odaberite sliku koja će predstavljati objekt
![Page 22: Izrada Web Preglednika 1 i 2](https://reader030.fdocuments.us/reader030/viewer/2022020715/563db7bb550346aa9a8d71ed/html5/thumbnails/22.jpg)
7/21/2019 Izrada Web Preglednika 1 i 2
http://slidepdf.com/reader/full/izrada-web-preglednika-1-i-2 22/28
DIZAJN PREGLEDNIKA
![Page 23: Izrada Web Preglednika 1 i 2](https://reader030.fdocuments.us/reader030/viewer/2022020715/563db7bb550346aa9a8d71ed/html5/thumbnails/23.jpg)
7/21/2019 Izrada Web Preglednika 1 i 2
http://slidepdf.com/reader/full/izrada-web-preglednika-1-i-2 23/28
DIZAJN PREGLEDNIKA
• za svaki objekt u AddressBar (osim tb):
• u Properties odaberite sliku objekta,
• AccessibleDescription, AccessibleDescription
preimenovati u vrijednost Name
• AccessibleRole – PushButtons
• Autosize – False
• Text i TooltipText - nešto prikladno, po volji
![Page 24: Izrada Web Preglednika 1 i 2](https://reader030.fdocuments.us/reader030/viewer/2022020715/563db7bb550346aa9a8d71ed/html5/thumbnails/24.jpg)
7/21/2019 Izrada Web Preglednika 1 i 2
http://slidepdf.com/reader/full/izrada-web-preglednika-1-i-2 24/28
KOD [getYourHandsDirty]
• funkcija promjene veličine za slike objekata
•
upisujemo u FrmBrowser.cs code
![Page 25: Izrada Web Preglednika 1 i 2](https://reader030.fdocuments.us/reader030/viewer/2022020715/563db7bb550346aa9a8d71ed/html5/thumbnails/25.jpg)
7/21/2019 Izrada Web Preglednika 1 i 2
http://slidepdf.com/reader/full/izrada-web-preglednika-1-i-2 25/28
KOD [getYourHandsDirty]
/// <summary>
/// Allows the application to scale images so that they are suitable for the AddressBar
/// </summary>
/// <param name="image">
/// Image: The Image to scale
/// </param>
/// <param name="maxWidth">
/// Int: The Width to scale this image to.
/// </param>
/// <param name="maxHeight">
/// Int: The Width to Scale this image to
/// </param>
/// <returns></returns>
![Page 26: Izrada Web Preglednika 1 i 2](https://reader030.fdocuments.us/reader030/viewer/2022020715/563db7bb550346aa9a8d71ed/html5/thumbnails/26.jpg)
7/21/2019 Izrada Web Preglednika 1 i 2
http://slidepdf.com/reader/full/izrada-web-preglednika-1-i-2 26/28
KOD [getYourHandsDirty]
private static Image ScaleImage (Image image, intmaxWidth, int maxHeight)
{
var ratioX = (double)maxWidth / image.Width;
var ratioY = (double)maxHeight / image.Height;
var ratio = Math.Min(ratioX, ratioY);
![Page 27: Izrada Web Preglednika 1 i 2](https://reader030.fdocuments.us/reader030/viewer/2022020715/563db7bb550346aa9a8d71ed/html5/thumbnails/27.jpg)
7/21/2019 Izrada Web Preglednika 1 i 2
http://slidepdf.com/reader/full/izrada-web-preglednika-1-i-2 27/28
KOD [getYourHandsDirty]
var newWidth = (int)(image.Width * ratio);
var newHeight = (int)(image.Height * ratio);
var newImage = new Bitmap(newWidth, newHeight);
![Page 28: Izrada Web Preglednika 1 i 2](https://reader030.fdocuments.us/reader030/viewer/2022020715/563db7bb550346aa9a8d71ed/html5/thumbnails/28.jpg)
7/21/2019 Izrada Web Preglednika 1 i 2
http://slidepdf.com/reader/full/izrada-web-preglednika-1-i-2 28/28
KOD [getYourHandsDirty]
Graphics.FromImage(newImage).
DrawImage(image, 0, 0, newWidth, newHeight);
return newImage;
}