Izrada Web Preglednika 1 i 2

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



KOMPONENTE WEB PREGLEDNIKA

1. Menu bar2. Tool bar3. Address Bar and Search Bar4. Multi-tab Interface5. Glavni prozor

6. Status bar



KOMPONENTE WEB PREGLEDNIKA

1. Menu bar2. Tool bar3. Address Bar and Search Bar4. Multi-tab Interface5. Glavni prozor6. Status bar



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.



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




• Dodati ćemo ToolStrip

• dva puta kliknuti na ToolStrip u Toolbox-u




• pojaviti će se standardni Windows ToolBar




• Dodati ćemo ToolStrip

• dva puta kliknuti na ToolStrip u Toolbox-u




• pojaviti će se standardni Windows ToolBar




• 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




• desni klik na folder Forms

• odabrati Add -> Windows Form

• preimenovati je u FrmBrowser

• upravo ta forma će biti prikazana kada budemo

koristili naš preglednik



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



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)



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

http://www.awesomium.com/download/

http://www.awesomium.com/download/



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




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




DRUGI DIO

• Dodijeliti imena elementima u AddressBar-u

• btnBack

•

btnForward• btnReload

• tbAddressBox

• btnFavourites

• btnSearchProvider

• tbSearchBox

• btnSearch

• btnHome

• btnMenu



IZRADA WEB

PREGLEDNIKAKORAK PO KORAK – DRUGI DIO



DIZAJN PREGLEDNIKA

• IZGLED PREGLEDNIKA

• IZRADA STILOVA

• DOZVOLA KORISNICIMA ZA MIJENJANJE IZGLEDA



DIZAJN PREGLEDNIKA

• otvorite frmBrowser.cs formu

• odaberite AddressBar

• promijenite slijedeće postavke u Properties



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



DIZAJN PREGLEDNIKA

• „skinite” 9 slika poput ovih:

• obavezno iz copyright free source

• sa prozirnom pozadinom

• nije bitno koliko su velike



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



DIZAJN PREGLEDNIKA



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



KOD [getYourHandsDirty]

• funkcija promjene veličine za slike objekata

•

upisujemo u FrmBrowser.cs code




/// <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>




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);




var newWidth = (int)(image.Width * ratio);

var newHeight = (int)(image.Height * ratio);

var newImage = new Bitmap(newWidth, newHeight);




Graphics.FromImage(newImage).

DrawImage(image, 0, 0, newWidth, newHeight);

return newImage;

}

Documents

Izrada Web Preglednika 1 i 2