Working with the Demobrowser

The Wisej.NET demobrowser contains an example of every control within Wisej.NET. You can check it out here.

Let's look at the demobrowser code for listbox. Listbox presents a collection of items, either as plain text or bound data, enabling users to choose a single entry or multiple selections. We'll create a new project and copy in the demobrowser code for the listbox example.

First open the demobrowser and search for "listbox" using the search bar on the left hand side.

Then, click on the code link to pull up the source code for the listbox example.

It should look like this:

We can see that the code is in the "Demos\Editors\Wisej.DemoBrowser.ListBox" folder

Clone the demobrowser repository off of github. If you are unfamiliar with cloning a repository, check out this tutorial. Another way to clone a repository is through GitHub desktop, which you can download here. This is a tutorial for cloning a repository with GitHub desktop.

Once you have cloned the repository, open the "Demos" folder, then the "Editors" folder, and finally the "Wisej.DemoBrowser.ListBox" folder. Your screen should look like this:

Copy Features.cs, Features.Designer.cs, and Features.resx. Then create a new Wisej project (use the WisejWebPageApplication template). Right-click in the Solution Explorer and choose "paste". Your Solution Explorer should look like this:

You'll notice some compiler errors-let's fix these.

Open Features.cs. Here we can see the two errors lined in red. To fix them, delete the line using Wisej.DemoBrowser.Common; Then change DemoView to Page.

If you run the project now, it will show a blank page. That's because it's showing Page1.cs, not Features.cs. To change this, open Program.cs.

Change this line: Application.MainPage = new Page1(); to this: Application.MainPage = new Features(); You'll notice you get a compiler error. That happens because the namespace in Features.cs is still Wisej.DemoBrowser.ListBox. Open Features.cs and change the namespace to match your project namespace (in my case, WisejWebPageApplication2). You'll also need to change it in the designer file.

One more compiler error will pop up:

Change "Web" to "Wisej.Web" and that will fix the error. Then run the project and it will look like this: