Develop a Visual WebGui web application without the use of a designer
In this How to we are going to learn how to develop a Visual WebGui application without the use of a form designer.
Open Visual Studio and create a new Visual WebGui (VWG) application.
in the solution explorer click on the show all files button and expose all the project files. Open the Form.Designer.vb file.
The first thing that we want to do is to add a tool bar to the application.
Add after the InitializeComponent function a declaration to a tool bar.
Private WithEvents ToolBar1 As Gizmox.WebGUI.Forms.ToolBar
In the InitializeComponent function will initialize the control and add it to the controls collection of the form.
Private Sub InitializeComponent()
Me.ToolBar1 = New Gizmox.WebGUI.Forms.ToolBar
Me.Controls.Add(Me.ToolBar1)
components = New System.ComponentModel.Container()
Me.Text = "Form1"
End Sub
Next will add a few images to our application and set them as the images on the tool bar buttons. To add images to the application add a folder by right clicking on the project and selecting add Add->New folder and name that folder “Resources”. Add another folder named Images and drag the images to it.
Let’s add two tool bar buttons to our form.
Private WithEvents ToolBar1 As Gizmox.WebGUI.Forms.ToolBar
Private ToolBarButton1 As Gizmox.WebGUI.Forms.ToolBarButton
Private ToolBarButton2 As Gizmox.WebGUI.Forms.ToolBarButton
Next we will initialize this buttons in the InitializeComponent function, set each one of them with an image by creating an image resource handle and add them to the tool bar.
Me.ToolBarButton1 = New Gizmox.WebGUI.Forms.ToolBarButton
Me.ToolBarButton2 = New Gizmox.WebGUI.Forms.ToolBarButton
Dim ImageResourceHandle1 As Gizmox.WebGUI.Common.Resources.ImageResourceHandle = New Gizmox.WebGUI.Common.Resources.ImageResourceHandle
Dim ImageResourceHandle2 As Gizmox.WebGUI.Common.Resources.ImageResourceHandle = New Gizmox.WebGUI.Common.Resources.ImageResourceHandle
ImageResourceHandle1.File = "ContactsView.gif"
ImageResourceHandle2.File = "EmailView.gif"
Me.ToolBarButton1.Image = ImageResourceHandle1
Me.ToolBarButton2.Image = ImageResourceHandle2
Me.ToolBar1.Buttons.AddRange(New Gizmox.WebGUI.Forms.ToolBarButton() {Me.ToolBarButton1})
Me.ToolBar1.Buttons.AddRange(New Gizmox.WebGUI.Forms.ToolBarButton() {Me.ToolBarButton2})
Now let’s add an event to the button click of this buttons. Open the Form1.vb class and add the button click event function and will display the image name when a button is clicked.
Lets run the application and see the result.
Next let’s add a tree view control to our form and add the initialization of it in the InitializeComponent function. Add the control to the form control list and dock it to the left.
Private WithEvents TreeView1 As Gizmox.WebGUI.Forms.TreeView
Me.TreeView1 = New Gizmox.WebGUI.Forms.TreeView
Me.TreeView1.Dock = DockStyle.Left
Me.Controls.Add(Me.TreeView1)
Next will add a LinQ to SQL Class. Right click on the project and select Add->New Item. Open the Data section and select a new LinQ to SQL Class.
We will use the Northwind DataBase and drag the category table to the LinQ to SQL Class.
Next will register the on load event of the form and fill the DataClass.
Private objDataClasses1DataContext As DataClasses1DataContext
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
objDataClasses1DataContext = New DataClasses1DataContext
End Sub
Now add a new function that will load the categories to tree as nodes and call it on the form load.
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
objDataClasses1DataContext = New DataClasses1DataContext
LoadTreeView()
End Sub
Private Sub LoadTreeView()
Dim objMainTreeNote As New Gizmox.WebGUI.Forms.TreeNode("Categories")
objMainTreeNote.Tag = -1
TreeView1.Nodes.Add(objMainTreeNote)
For Each objCategory As Category In objDataClasses1DataContext.Categories
Dim objCategoryTreeNote As New Gizmox.WebGUI.Forms.TreeNode(objCategory.CategoryName)
objCategoryTreeNote.Tag = objCategory.CategoryID
objMainTreeNote.Nodes.Add(objCategoryTreeNote)
Next
End Sub
The last thing that we are going to do is to add a grid and to bind it to data on select node event of the tree.
First we will add a grid to the form just like we did with the toolbar and the tree view and dock it to fill.
Private WithEvents Grid1 As Gizmox.WebGUI.Forms.DataGridView
Me.Grid1 = New Gizmox.WebGUI.Forms.DataGridView
CType(Me.Grid1, System.ComponentModel.ISupportInitialize).BeginInit()
Me.Grid1.Dock = DockStyle.Fill
Me.Controls.Add(Me.Grid1)
CType(Me.Grid1, System.ComponentModel.ISupportInitialize).EndInit()
Next add another table to the DataClass I’ve added the product table.
Now we will add a BindingSource that will attach the data to the grid and initialize the control in the InitializeComponent function.
Private BindingSource1 As Gizmox.WebGUI.Forms.BindingSource
Me.BindingSource1 = New Gizmox.WebGUI.Forms.BindingSource(Me.components)
CType(Me.BindingSource1, System.ComponentModel.ISupportInitialize).BeginInit()
CType(Me.BindingSource1, System.ComponentModel.ISupportInitialize).EndInit()
Next let’s add a select event on a tree node that will fill that data grid.
Private Sub TreeView1_AfterSelect(ByVal sender As System.Object, ByVal e As Gizmox.WebGUI.Forms.TreeViewEventArgs) Handles TreeView1.AfterSelect
'If this is the first node dont show ros in the grid.
If e.Node.Tag <> -1 Then
Dim objProduct As New Product
BindingSource1.DataSource = objDataClasses1DataContext.ExecuteQuery(objProduct.GetType(), "Select * from Products where CategoryId = {0}", e.Node.Tag)
End If
End Sub
Now let’s run our application and see the result.
So what have we seen in this How to
1. How to add controls to a form without the use of a designer.
2. How to register controls events.
3. How to bind data to controls
You can read the original how to here
-- Eyal Albert @ Eyal.Albert (at) Gizmox.com