[RESOLVED] Question about UserControls and Doing click events with them.

[jdc20181]

I am trying to master a feature I think a lot of other browser projects have adapted in some way or another. The unique part on my project is the fact the user can pick the sites.

Its like the startpage on most familarily - Google Chrome. But it isn't exact. As I mentioned, its set by the user rather than the past/most visited sites.


It isn't working - for some reason which is why I am asking about UserControls, never had any issues with User controls - but maybe this isn't something "right" or possible.

Anyways - Here is what happens.

User clicks button > Tab is added with User Control with (5) buttons. > User can click each button as miuch as they want, it opens the favorite site saved via settings.

Everything is loaded from settings. I am familar with this, as I also use it for Homepage User enters a desired homepage and it is navigated to on launch or when the home button is pressed.


I have a total of (10) Settings.

(5) Site URL - Self Explainatory.

(5) Site Name - Saved name, appears on the button.


The Public Sub - is called from the main form of the project, and is suppose to add a new tab with the saved site.

But...

It isn't added the Names on the buttons OR navigating when clicked.


Initial Code to add the control

This was just a copy/paste of existing code changing it from a browser control to the user control

  Private Sub ToolStripButton4_Click(sender As Object, e As EventArgs) Handles ToolStripButton4.Click
        Try

            Dim tab As New TabPage
            Dim brws As New StartPagev2
            brws.Dock = DockStyle.Fill
            tab.Text = "StartPage"
            tab.Controls.Add(brws)
            Me.Tabcontrol1.TabPages.Add(tab)
            Me.Tabcontrol1.SelectedTab = tab
            My.Settings.StartPageName1 = brws.Button1.Text

            My.Settings.StartPageName2 = brws.Button2.Text

            My.Settings.StartPageName3 = brws.Button3.Text

            My.Settings.StartPageName4 = brws.Button4.Text

            My.Settings.StartPageName5 = brws.Button5.Text
        Catch ex As Exception

        End Try
    End Sub

And (its the same thing for each one, just different number/setting called)

 Public Sub StartPageSite1()
        Try

            Dim tab As New TabPage
            Dim brws As New WebBrowser
            brws.Dock = DockStyle.Fill
            tab.Text = " New Tab"
            tab.Controls.Add(brws)
            Me.Tabcontrol1.TabPages.Add(tab)
            Me.Tabcontrol1.SelectedTab = tab
            brws.Navigate(My.Settings.StartPage1)
            brws.ScriptErrorsSuppressed = True
            AddHandler brws.ProgressChanged, AddressOf Loading
            AddHandler brws.DocumentCompleted, AddressOf Done
            int = int + 1
        Catch ex As Exception

        End Try
    End Sub

And the code above is called on the button on the control like this:

BBMain.StartUpPageSite1()

Screenshot:

Design isn't even final yet. I just gotta get over this hurdle first. - Making sure it works is priority 1

[dday9]

There is no need to create a user control for this. What most browsers do is store the sites and URL's locally, create a local URL (like :startup), and then load an HTML document with the desired markup and styling to display the web page.

[jdc20181]

But how would you do the things with User settings.

I currently do that sort of. Its hosted on github and you can load it by saving it as homepage in settings. i want this to be more Native to the application itself, rather than External. Even with HTML, inside of vb it still isn't all native. Rather keep it as one language. Than breaking off.

But, if that would work better.. then maybe. But then again, I am using settings to control it. I found soemthign that may help but i haven't tried it yet. I only work on this 2-3 hours a day.

[dday9]

Take a look at this, I'm free-typing the example, but it should give you a good idea:

Private Sub WebBrowser1_DocumentCompleted(ByVal sender As Object, ByVal e As WebBrowserDocumentCompletedEventArgs) Handles WebBrowser1.DocumentCompleted
    'If the URL is the local desired URL
    If WebBrowser1.URL = New Uri("://local") Then
        'Set the DocumentText to equal the layout of the HTML page. For an example of what it should look like, visit: https://codepen.io/anon/pen/bWOrbP
        WebBrowser1.DocumentText = "<!DOCTYPE html><html><head><style>body {display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: flex-start;-ms-flex-pack: start;justify-content: flex-start;-webkit-align-content: stretch;-ms-flex-line-pack: stretch;align-content: stretch;-webkit-align-items: flex-start;-ms-flex-align: start;align-items: flex-start;}div {background-color: #6495ED;border: 1px solid;margin: 0.25em 1em;padding: 0 1em;}div.full {-webkit-order: 0;-ms-flex-order: 0;order: 0;-webkit-flex: 1 1 100%;-ms-flex: 1 1 100%;flex: 1 1 100%;-webkit-align-self: auto;-ms-flex-item-align: auto;align-self: auto;}div.partial {-webkit-order: 0;-ms-flex-order: 0;order: 0;-webkit-flex: 1 1 auto;-ms-flex: 1 1 auto;flex: 1 1 auto;-webkit-align-self: auto;-ms-flex-item-align: auto;align-self: auto;}</style></head><body><div class="full"><h3 class="site"></h3><a class="url" href=""></a></div><div class="full"><h3 class="site"></h3><a class="url" href=""></a></div><div class="partial"><h3 class="site"></h3><a class="url" href=""></a></div><div class="partial"><h3 class="site"></h3><a class="url" href=""></a></div><div class="partial"><h3 class="site"></h3><a class="url" href=""></a></div></body></html>"

        'Declare an index placeholder for the name and url (default starts at 0)
        Dim nameIndex, urlIndex As Integer

        'Declare a collection to hold all of the names and their respective URLS
        Dim names() As String = {My.Settings.StartPageName1, My.Settings.StartPageName1, My.Settings.StartPageName1, My.Settings.StartPageName1, My.Settings.StartPageName1}
        Dim urls() As String = {My.Settings.StartPageURL1, My.Settings.StartPageURL1, My.Settings.StartPageURL1, My.Settings.StartPageURL1, My.Settings.StartPageURL1}

        'Loop through every HTML element in the document
        For Each ele As HtmlElement In WebBrowser1.Document.All
            'If the class equals "name" or "url" then set the element's InnerText (and HREF if url) equal to the current item in the respective collection
            If ele.GetAttribute("className") = "name" AndAlso nameIndex < names.Length - 1 Then
                ele.InnerHtml = names(nameIndex)
                nameIndex += 1
            ElseIf ele.GetAttribute("className") = "url" AndAlso urlIndex < urls.Length - 1 Then
                ele.InnerHtml = urls(urlIndex)
                ele.SetAttribute("HREF", urls(urlIndex))
                urlIndex += 1
            End If
        Next
    End If
End Sub

[jdc20181]

interesting (thanks for the example) I have never really thought too much about mixing languages. I mean I have seen code where vb.net injects into a certain ID or Class but nothing like this. Coming up on 3 years of coding, VB.net HTML5 (and some older stuff i am not proud of due to it being depreciated) and CSS3.

I guess it is what it is.

Anyways thanks for the example.

I will look into doing it this way.

[jdc20181]

Code was a little off for the document.text thing, because instead of using ("") you should use ('') apparently, other than that its fine.

I decided to use a webpage instead of locallly, simply because its easier to update. It works except the names are returning the URL instead of the name from the setting.

And It only is givving 4 instead of 5 with names/links.




(in case this isnt loading right http://screenshot.sh/n9mwNNKfznIuZ is the screenshot link)



HTML Code:

<html> <head>       <meta http-equiv="X-UA-Compatible" content="IE=Edge" >
      <meta http-equiv="X-UA-Compatible" content="IE=11" >
      <meta http-equiv="X-UA-Compatible" content="IE=10" >
      <meta http-equiv="X-UA-Compatible" content="IE=9" >
      <meta http-equiv="X-UA-Compatible" content="IE=8" >
      <meta http-equiv="X-UA-Compatible" content="IE=7" ><style>h1{color:#28aadc;}h1:hover{color: #166888;}/* nav styles */ html{background-color:#333;}nav.cmn-tile-nav{display: none;}nav.cmn-tile-nav.open{display: block;}nav.cmn-tile-nav ul{list-style: none;}nav.cmn-tile-nav li{display: block; overflow: hidden; transition: background 0.3s;}nav.cmn-tile-nav a{display: block; padding: 20px; color: #fff; transition: background 0.3s, transform 0.3s;}nav.cmn-tile-nav a:hover{transform: translateX(20px);}/* repeat this section for the 8 different colours *//* --- BEGIN --- */nav.cmn-tile-nav li.colour-1,nav.cmn-tile-nav li.colour-1 a{background-color: #28aadc;}nav.cmn-tile-nav li.colour-1:hover,nav.cmn-tile-nav li.colour-1:hover a{background-color: #166888;}/* --- END --- *//* smoother transitions */nav.cmn-tile-nav li,nav.cmn-tile-nav a{transform: translate3d(0, 0, 0);}@media all and (min-width: 480px){nav.cmn-tile-nav{display: block;}nav.cmn-tile-nav li{width: 50%; float: left;}}@media all and (min-width: 768px){nav.cmn-tile-nav li{width: 25%;}nav.cmn-tile-nav a{text-align: center; padding: 60px 20px 20px 20px;}nav.cmn-tile-nav a:hover{transform: translateX(0); transform: translateY(-20px);}}@media all and (min-width: 1024px){nav.cmn-tile-nav li{overflow: visible; width: 12.5%;}nav.cmn-tile-nav a{padding: 80px 20px 20px 20px;}nav.cmn-tile-nav a:hover{transform: translateY(20px);}}a.nav-toggle{display: block; margin-bottom: 20px; padding: 20px; background-color: #dce6f0; color: #646464; text-align: center;}a.nav-toggle:hover{background-color: #c8d2dc;}/* the breakpoint same as above */@media all and (min-width: 480px){a.nav-toggle{display: none;}}</style> </head> <body> <p><h1>StartPage</h1></p><a href='#' class='nav-toggle'>Toggle Navigation</a><nav class='cmn-tile-nav'> <ul class='clearfix'> <li class='colour-1'><h3 class='site'></h3><a class='url' href=''></a></li><li class='colour-1'><h3 class='site'></h3><a class='url' href=''></a></li><li class='colour-1'><h3 class='site'></h3><a class='url' href=''></a></li><li class='colour-1'><h3 class='site'></h3><a class='url' href=''></a></li><li class='colour-1'><h3 class='site'></h3><a class='url' href=''></a></li></ul></nav> </body><script>(function(window){var nav=document.querySelector("nav.cmn-tile-nav"), nav_toggle=document.querySelector("a.nav-toggle"); nav_toggle.addEventListener("click", function(e){e.preventDefault(); classie.toggle(nav, "open");});})(window);</script></html>

VB.NET CODE

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        WebBrowser1.Navigate("https://jdc20181.github.io/StartPage/Startpage2.html")
    End Sub
    Private Sub WebBrowser1_DocumentCompleted(ByVal sender As Object, ByVal e As WebBrowserDocumentCompletedEventArgs) Handles WebBrowser1.DocumentCompleted
        'If the URL is the local desired URL

        If WebBrowser1.Url = New Uri("https://jdc20181.github.io/StartPage/Startpage2.html") Then
            'Declare an index placeholder for the name and url (default starts at 0)
            Dim nameIndex, urlIndex As Integer

            'Declare a collection to hold all of the names and their respective URLS
            Dim names() As String = {My.Settings.StartPageName1, My.Settings.StartPageName1, My.Settings.StartPageName1, My.Settings.StartPageName1, My.Settings.StartPageName1}
            Dim urls() As String = {My.Settings.StartPageURL1, My.Settings.StartPageURL1, My.Settings.StartPageURL1, My.Settings.StartPageURL1, My.Settings.StartPageURL1}

            'Loop through every HTML element in the document
            For Each ele As HtmlElement In WebBrowser1.Document.All
                'If the class equals "name" or "url" then set the element's InnerText (and HREF if url) equal to the current item in the respective collection
                If ele.GetAttribute("className") = "name" AndAlso nameIndex < names.Length - 1 Then
                    ele.InnerHtml = names(nameIndex)
                    nameIndex += 1
                ElseIf ele.GetAttribute("className") = "url" AndAlso urlIndex < urls.Length - 1 Then
                    ele.InnerHtml = urls(urlIndex)
                    ele.SetAttribute("HREF", urls(urlIndex))
                    urlIndex += 1
                End If
            Next
        End If
    End Sub

[dday9]

Neither of the screenshots is working, the link nor the embedded image.

[jdc20181]

OH WOW. I think that screenshot program is done I think they discontinued it

Here is the screenshot.

[dday9]

Your HTML is slightly different from what I have. You can fix the VB.NET conditional statement that checks for the <h3> tag to:

If ele.GetAttribute("className") = "site"

However, I'm not sure why it is skipping over the last HTML Element. Neither your HTML markup nor your VB.NET code indicates anything that would make it skip the last box.

Edit - I want to clarify why changing that particular portion of the conditional statement would fix the problem of the site name not displaying. The example that I gave you was checking for the wrong class name in the conditional statement, it was checking if the class name attribute equaled "name" instead of "site". This is a result of over-caffeinating and free-typing code

[jdc20181]

ah! Thanks for pointing that one out! I didn't realize I had the wrong class name.

Fixed that issue!



I guess I will just Reduce it to top 4 sites. I like the idea of a even number anyways

[jdc20181]

Well, Bad news

I reduced it to 4 and it did the same thing lol

[dday9]

Then let's step through the code because something is happening to cause it to skip the last <div> element.

Step 1. You check if the WebBrowser's URL is equal to the desired website that will represent the startup page.
Step 2. You declare two (2) Integer variables to keep track of how many site and url elements that you've set.
Step 3. You declare two (2) String arrays to store all of the values in My.Settings for the site and url elements.
Step 4. You then iterate through every HTML element in the document
Step 5. In the iteration you check if the currently iterated HTML element's class name is either site or url and if the respective Integer index variable is less than the respective collection's length minus one (1).
Step 6. If the condtion is met then you're setting the currently iterated HTML element's value (and HREF attribute for the URL) equal to the respective My.Setting value.

After walking through the steps, my guess is that in Step 5, you should omit the minus one (- 1) from whenever you check for the Length property like this:

AndAlso nameIndex < names.Length Then
AndAlso urlIndex < urls.Length Then

Even though Visual Basic.NET has a 0-based index collection, the minus one could be what is making it skip the last <div> element. You can confirm this by setting up a breakpoint and watching what the value of names(nameIndex) is and if it is not Nothing then that is what is causing the issue.

[jdc20181]

All the settings have a valid URL and name, I will try that and see what happens, thanks.

[jdc20181]

Yep! Fixed that issue!

[jdc20181]

Just so you know and if anyone else wants to do soemthing similar with a Tab control it takes a small tweak in the code to make it work.
You have to change anything with Webbrowser- or webbrowser1 to this:

 CType(Tabcontrol1.SelectedTab.Controls.Item(0), WebBrowser).Something (two places URI line and the document text line.)

   If CType(Tabcontrol1.SelectedTab.Controls.Item(0), WebBrowser).Url = New Uri("somethingurl") Then
            'Declare an index placeholder for the name and url (default starts at 0)
            Dim nameIndex, urlIndex As Integer

            'Declare a collection to hold all of the names and their respective URLS
            Dim names() As String = {My.Settings.StartPageName1, My.Settings.StartPageName2, My.Settings.StartPageName3, My.Settings.StartPageName4, My.Settings.StartPageName5}
            Dim urls() As String = {My.Settings.StartPage1, My.Settings.StartPage2, My.Settings.StartPage3, My.Settings.StartPage4, My.Settings.StartPage5}

            'Loop through every HTML element in the document
            For Each ele As HtmlElement In CType(Tabcontrol1.SelectedTab.Controls.Item(0), WebBrowser).Document.All
                'If the class equals "name" or "url" then set the element's InnerText (and HREF if url) equal to the current item in the respective collection
                If ele.GetAttribute("className") = "site" AndAlso nameIndex < names.Length Then
                    ele.InnerHtml = names(nameIndex)
                    nameIndex += 1
                ElseIf ele.GetAttribute("className") = "url" AndAlso urlIndex < urls.Length Then
                    ele.InnerHtml = urls(urlIndex)
                    ele.SetAttribute("HREF", urls(urlIndex))
                    urlIndex += 1
                End If
            Next
        End If