“This is my third day of the first Gwen Challenge 2022.First challenge in 2022”.

A, an overview of

Today I share with you a custom browser home page. I wrote about it a long time ago, but the home page had many problems and lacked functionality. So today to share an improved version of the browser home page. Let’s take a look at the effect:

If we click on each li, we will enter the corresponding website. You can set it as your own common website. We can also search in the input box, the default input box is Baidu search.

Overall, it’s pretty simple, but if you don’t like DIY, you can use Infinity directly.

Ii. Overall layout

The layout above is very simple, starting with three longitudinal sections, simplified as follows:

The title is nothing to say. It’s just text.

The search box contains three things, simplified as follows:

Then the most complicated part is the body part, which we subdivide into four parts:

Then we just need to focus on the layout of one column:

This is the general layout, and more details will be covered later.

Three, using iVx to achieve the page

3.1 preparation

IVx is a visual programming tool, if you have programming foundation, I believe you can quickly start this tool. Details can be found at www.ivx.cn/.

Let’s go to the workbench and create a project:

Let’s go to relative location, change the app name and create it.

Because we are a computer side of the page, so here in the upper right corner to select the corresponding resolution of the computer. Then click the minus sign to allow the computer to display the entire layout. Now we can start writing the layout.

3.2, layout,

Let’s take a quick look at the workbench interface:

On the far left are controls we can add, just by clicking. Next to the control are the properties of the control, and to the right are the controls that have been added to the page.

Since this application has no background, we only need to focus on the foreground.

Let’s start by adding the overall layout of the page, which is vertical. So we add a column and add three rows to the column:

The column and row controls are on the left, and the added hierarchy is on the right. At this point they have a default background color, we click on it and set the column’s background to black:

We can set the properties of the control in the property Settings panel, click clear to cancel the background color.

To make it easier to see, we’ll give the right side a name. Notice here that the actual layout and the right side are inverted. The title of our layout is at the top, the content is at the bottom, and the right side is reversed.

Now let’s adjust the width and height, set the height of the content to 70%, and set the other two to 15%.

[imG-3ONGSJZS -1621681846295: :// C:\Users\ Administration \ app data \ roam \Tencent\ us ers\2930777518\TIM\WinTemp\RichOle\B62~YAT[B%N}@(Y0%]7S)]F5.png)

Say % instead of px.

3.3, title,

The layout of the title is as simple as adding a text box:

We need to make sure that the alignment of the line layout is set to center and then change the font color.

3.4. Search box

Search box needs to add 3 things, input box, icon and button, respectively as follows:

We modify the length of the input field and the size of the buttons and labels. Then we found that the above search box is not beautiful, this fits us can choose to modify the rounded corner of the button:

Let’s get rid of the left rounded corner first, and then modify the rounded corner size. We have the above effect, but since there is a tag in the middle, we need to set it:

We modify a few properties on the left to get the above effect. You can adjust the color scheme yourself. So we’re done with our search box.

3.5. Column 1 layout

So let’s make one column and then we can just copy and paste the rest. We add controls as follows:

And then one by one.

To display different colors, we need multiple text boxes:

Here we use three pieces of text and set the left inner margin for the line layout. I’m not going to go into details about the rest of the options, just do the above. The best effect after adjustment is as follows:

Now we can start adding events.

3.6. Click the jump

Now we add a jump to each column:

Select the control we want to add events to. Here I select option 1, then click the exclamation mark on the right, and select the event to listen to on the left. Here we select Click.

After selecting the event, we click Select from the Object Tree and then select Foreground to select the following options:

We choose to open the outer chain, and then enter the link, you can choose according to their own preferences whether to open in the current page.

Now that we’ve implemented the jump function, the other ones have been added as well, so I won’t go into details here. The next step is to realize the function of the search box.

3.7. Search function

Here we need to add three variables, which we add directly in the foreground:

The meanings of the three variables are the requested address of baidu search, the word to be searched and the page that is finally opened.

The content of Baidu is set to www.baidu.com/s?wd=

The other two we can leave off.

Then we find the icon and add an event to clear the contents of the input field:

Next set the event for the button:

There are a lot of events, and it shows what each event does. Here are the images without annotations:

This completes our personal browser home page.

Export and set as home page

We can preview it by clicking on the top button and select the private Deployment Export page when we are satisfied. When the complexity of the program reaches a certain level, export is charged.

And then if you want to change it to the home page of your browser let’s take Chrome as an example. Click on the three points in the upper left corner of the browser, as shown:

Then: Settings -> Startup -> Open a specific page or group of pages -> Add a new page. For the website address, you can open that page in your browser, then copy the url of the search bar and fill it in. The diagram below:

And then you’re done.

In this example, I just made a simple pure front end page. In addition to web pages, iVx can also do small programs and small games. But I haven’t tried it yet. In addition in iVx is to support the preparation of background, have to say in the same type of visual programming tools iVx function is very rich.

Interested readers can visit the official website, with an official tutorial attached.