Home > Others

How to customise the twebbrowser User Interface (Part 5 of 6)

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞
Exercising the code-A Sample Application

One of the problems that motivated this operation ation was my need to useTwebbrowserTo display some HTML in a dialog box. the HTML needed to look and behave as if it was part of the dialog box, which wocould be Using XP themes. the dialog box wocould also need to display a custom pop-up menu.

This sample application will emulate such a dialog box. It will use our customTwbcontainerTo take control over the appearance ofTwebbrowserControl. this will not be production code-for example we load the HTML from a file and we wouldn't do that in released code-but it shoshould suffice to demonstrate that the customization class works.

The application will be developed in two stages. Stage One will be the bare application with noTwebbrowserCustomization code. we will run the program to check what it looks like in its natural state before we intervene. in stage two we'll apply the classes we 've ve developed here and see the difference.

Stage 1

Open a New Delphi project and select the main form, then:

  • Give the FormBorderstyleOfBsdialog.
  • PlaceTbuttonCentred at the bottom of the form, set itsCaptionTo 'close' and createOnclickEvent handler for it containing just the code shown inListing 18: 

    ProcedureTform1.button1click (Sender: tobject );BeginClose;// Close the applicationEnd;
    Listing 18

  • AddTpopupmenuAnd give it a single menu itemCaptionSet to 'show the CSS '.
  • DropTwebbrowserControl, set itsAlignPropertyAltopAnd size it to take up most of the Form. Leave room for the 'close' button below it. Set itsPopupmenuPropertyPopupmenu1.
  • AddXpmanUnit (Delphi 7 and later) to the form'sUsesClause to ensure the application displays XP themes if available.

Now, double-click the form to open a newOncreateEvent handler and enter the code shown inListing 19. This loads the HTML file into the browser:

 
ProcedureTform1.formcreate (Sender: tobject );Begin;// Load contentWebbrowser1.navigate (extractfilepath (paramstr (0) +'Dlgcontent.html');End;
Listing 19

Finally create the HTML file,Dlgcontent.html, That is loaded inFormcreateAbove. This file will provide the content of our dialog box.Listing 20Shows the HTML.

 <HTML>  <Head>  <Title> Demo dialog content </Title>  <Script   Type = "text/JavaScript"  > Function viewarticle () {wdw = zookeeper open(mediaworkflow wdw.doc ument. Location = "http://www.delphidabbler.com/articles? Article = 18 ";} </SCRIPT>  </Head>  <Body>  <H1> About this demo </H1>  <P> This demo relates to the delphidabbler.com article & quot; how tocustomise the twebbrowser User Interface & quot ;. <Input  Type = "button" name = "button" id = "button" value = "view article..." onclick = "viewarticle ();"  />  </P>  <P> & Copy; Copyright P d Johnson ( <   Href = "http://www.delphidabbler.com/" target = "_ blank"  > Delphidabbler.com </A> ), 2004-2006. </P> <P   Class = "ruled"  > Right click above the line to see the custom pop-up menu. </P>  </Body>  </Html>
Listing 20

This Code defines a document which has:

    • Some plain text including a paragraph styled using a CSS class named. RuledThat is not defined in the document.
    • A button that, when clicked, runs some JavaScript that opens a new window and displays this article in it.
    • Some clickable text that opens a new browser window and navigates toDelphidabbler.comHome Page.

If you compile and run this application then right click in the browser control you shoshould see something like this:

Doesn't look much like a dialog box does it? There are numerous problems:

    1. The browser control is displaying its default border and scroll bar.
    2. The HTML is being displayed in the default style.
    3. The form's 'close' button is XP-themed while the 'view article' button displayed by the browser control is not.
    4. Despite settingPopupmenuProperty, the standard browser's context menu is still displayed.
    5. Although it can't be seen here, you can select the text in the HTML document.

Let us now adapt the program to correct all these problems.

Stage 2

We will now utilize the classes we have developed in this article. To begin with add the units containingIdochostuihandler,TnulwbcontainerAndTwbcontainerTo the project and refer to them in the main form's uses clause. Also addActiveXAndSysutilsUnits to the uses clause.

It's now time to set up and use the container object. Switch to the form unit we developed in Stage 1 and add a field namedFwbcontainerOf TypeTwbcontainerTo the form's class declaration. Now rewrite the form'sOncreateEvent handler as shown inListing 21.

 Procedure Tform1.formcreate (Sender: tobject ); Const // Template for default CSS style Ccsstplt = 'Body {'  #13  #10 + 'Background-color: % 0: S ;'  #13  #10 + 'Color: % 1: S ;'  #13  #10 + 'Font-family: "% 2: s ";'  #13  #10 + 'Font-size: % 3: DPT ;'  #13  #10 +'Margin: 4px ;'  #13  #10 + '}'  #13  #10 + 'H1 {'  #13  #10 + 'Font-size: % 3: DPT ;'  #13  #10 + 'Font-weight: bold ;'  #13  #10 + 'Text-align: center ;'  #13  #10 + '}'  #13  #10 + 'Input # button {'  #13  #10 + 'Color: % 1: S ;'  #13  #10 + 'Font-family: "% 2: s ";'  #13  #10 + 'Font-size: % 3: DPT ;'  #13  #10 + '}'  #13 #10 + '. Ruled {'  #13  #10 + 'Border-bottom: % 4: s solid 2px ;'  #13  #10 + 'Padding-bottom: 6px ;'  #13  #10 + '}' ; VaR Fmtcss: String ; // Stores default CSS  Begin  // Create the CSS from system colours Fmtcss: = format (ccsstplt, [colortohtml (self. Color), colortohtml (self. Font. Color), self. font. Name , Self. Font. Size, colortohtml (clinactivecaption)]); // Create Web browser container and set required properties Fwbcontainer: = twbcontainer. Create (webbrowser1); fwbcontainer. usecustomctxmenu: = true; // Use our popup menu Fwbcontainer. show3dborder: = false; // No border Fwbcontainer. showscrollbars: = false; // No scroll bars Fwbcontainer. allowtextselection: = false; // No Text Selection Fwbcontainer. CSS: = fmtcss; // Css to be used // Load content Fwbcontainer. hostedbrowser. navigate (extractfilepath (paramstr ( 0 ) + 'Dlgcontent.html' ); End ;
Listing 21

Key points to note in this method are:

  • First we provide a template for a Cascading Style Sheet we will use to make the HTML take on the appearance of the dialog box. this template has des some format strings as placeholders for color and font information that will be filled in at run time.
  • next we fill in the required values in the CSS template and store the resulting code in fmtcss . we get the colours and font from various properties of the form and from suitable system colours. note that we use the colortohtml helper function (taken from the codesnip database) to format color information correctly: 

      function 
      colortohtml ( const  color: tcolor):  string ;  var  colorrgb: integer;  begin  colorrgb: = colortorgb (color); Result: = format ( '# % 0.2x % 0.2x % 0.2x' , [getrvalue (colorrgb), getgvalue (colorrgb ), getbvalue (colorrgb)]);  end ;
    listing 22

  • Next we create the container object, passing the hostedTwebbrowserAs a parameter, then set the properties as required.
  • Finally we revert to the original code and load the document, doesn't that we use the container object'sHostedbrowserProperty to access the browser control rather than accessing it directly.

A couple more things remain to be done. The first is to handle the form'sOndestroyEvent to free the container object, as shown inListing 23.

 
ProcedureTform1.formdestroy (Sender: tobject );BeginFwbcontainer. Free;// Free the container pbjectEnd;
Listing 23

Finally we need to handleOnclickEvent of our single context menu item. All we do here is display the default CSS in a message box,Listing 24Illustrates.

 
ProcedureTform1.showthecss1click (Sender: tobject );BeginShowmessage (fwbcontainer. CSS );// Display the CSS codeEnd;
Listing 24

The moment of truth arrives. Let's run the revised application and see if it all works. Here's what we see:

Notice that:

    • The borders and scroll bar have gone.
    • The HTML is displayed in the correct dialog box font and colours.
    • The 'view article' button is correctly themed.
    • The paragraph with. RuledCSS class now has a bottom border in the same color as an inactive caption.
    • Right clicking displays the single menu item ofTpopupmenuWe assigned to the browser control'sPopupmenuProperty.
    • Take it on trust that you can't select text either!

Just to show that the browser control correctly adopts the current dialog box style, here is the same application running unchanged in XP classic style usingSpruceColor Scheme:

All the Code has now been completed. In the final section we will wrap up the article and provide a download containing all the source code for the sample application.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More