Develop a Visual WebGui 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.
Categories: Introduction
|
Tags: Developers, 1. Beginner, 2. Intermediate, Pre v6.3, v6.3, v6.4 and Later, 3. Advanced
Revision:
1
Posted:
02/Jan/2009
Updated:
02/Jan/2009
Status:
Publish
Types: Walkthrough
|
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
 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 -- Eyal Albert @ Eyal.Albert (at) Gizmox.com
About the author
Related Articles
|
Introduction
|
|
|
Silverlight controls
Tags:
Developers, 1. Beginner, 2. Intermediate, 3. Advanced, Silverlight, Pre v6.3, v6.3
|
|
|
In this “How To” we are going to learn how to use Visual WebGui open source project to create a code patch fixing a bug you have found or a feature you have created and would like to add.
Tags:
Developers, 3. Advanced, Customization, Pre v6.3, v6.3, v6.4 and Later
|
|
|
Tags:
Developers, Data Binding, Navigation, 1. Beginner, 2. Intermediate, Data Binding, Navigation, ASP.NET, Pre v6.3, v6.3, v6.4 and Later, 3. Advanced
|
|
|
Abstract:
The Web, Cloud and SaaS models are changing the computing world forever, and us, the developers will have to adjust and serve this trend. One of the biggest challenges is moving software assets that were developed for desktop architecture to the new deployment models. Just imagine that you...
Tags:
Architects, CIOs, Developers, C#, 1. Beginner, 2. Intermediate, 3. Advanced, Windows Forms, Pre v6.3, v6.3, v6.4 and Later
|
|
|
Tune in to this Free webcast and learn how Visual WebGui solves all the pains of Rich Internet application development. Learn how Visual WebGui bridges between the richness of .NET and the richness of HTML5. Learn how to be empowered by Visual WebGui to build rich enterprise-level Ajax based Web and...
Tags:
Architects, Developers, Data Binding, Drag & Drop, Visual WebGui Pipeline, C#, CSS, HTML5, JavaScript, Visual Studio, XML, 1. Beginner, 2. Intermediate, 3. Advanced, Customization, Data Binding, Layouting, HTML5, jQuery, v6.4 and Later
|
|
|
Tune in to this Free webinar and learn how you can build enterprise-grade Ajax based Web and Mobile (roadmap) applications from the same code base using Visual WebGui exclusive visual, intuitive and rich development experience (VB6-like) that eliminates the hassles of classic Ajax development.
Tags:
Developers, Drag & Drop, Theme, Windows & Dialogs, C#, 1. Beginner, 2. Intermediate, 3. Advanced, Customization, Data Binding, ASP.NET, Cloud, Mobile Devices, v6.4 and Later
|
|
|
|