Post on 12-Apr-2018
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
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
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
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.
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
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
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
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
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
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
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)
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
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
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
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
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
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
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
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
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
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
7/21/2019 Izrada Web Preglednika 1 i 2
http://slidepdf.com/reader/full/izrada-web-preglednika-1-i-2 22/28
DIZAJN PREGLEDNIKA
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
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
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>
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);
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);
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;
}