By now we’ve taken all the steps needed to have the beginnings of a module created and installed locally on our machines. Now it’s time to start work on the view control. If you remember from a previous blog our envisioned View control looks something like this:
In order to get started open Visual Studio, open your “MyFirstModule” project, and double-click on the View.ascx file. Coming from a front-end background one of the first things I always wanted to do was/is to get the module looking like I want it to look before trying to add in functionality. Yes, this is backwards from the way many would do it, but then again being from South Carolina I’m used to being backwards so to each his own :-) So with that in mind let’s lay out the HTML & CSS needed to make our module look the way we want.
One thing to make note of here is that with this view control we will not be using any .NET server controls, but rather all standard HTML elements for our form inputs. I will discuss this more in depth about 2 blogs from now, but am mentioning it here simply as a mental note.
In order to get the elements in the view we will just drop standard HTML and CSS into our module. Remember that each module has a “module.css” file which holds module specific styles so we will place our CSS in the module.css file.
Into the view .ascx file copy and paste the following:
<div class="AddTaskDiv">
<h2>Add Task</h2>
<hr />
<div class="lblTaskName">Task Name</div>
<input id="TaskName" type="text" />
<div class="lblTaskDescription">Task Description</div>
<input id="TaskDescription" type="text" />
<div class="isCompleteGroup">
<input id="cbxIsComplete" type="checkbox" />
<div class="lblTaskIsComplete">Is Complete</div>
</div>
<input class="dnnClear dnnRight dnnPrimaryAction" id="btnAddTask" type="button" value="Add Task" />
</div>
<div class="TaskListDiv">
<div class="Headings">
<h2>Complete</h2>
<h2>Task Name</h2>
<h2>Task Description</h2>
<hr/>
</div>
<div class="ListItems">
<input class="cbxListIsComplete" id="cbxListIsComplete" type="checkbox" />
<div class="ListTaskName">Task Name PlaceHolder</div>
<div class="ListTaskDescription">Task Description PlaceHolder</div>
</div>
</div>
Again this is just standard HTML with a few HTML Input elements included.
In the module.css file place the following code:
.AddTaskDiv { float: left; width: 25%; margin-right: 1%; margin-bottom: 50px; background: #ccc; padding: 10px; }
.lblTaskIsComplete { float: left; }
#cbxIsComplete { float: left; margin-top: 3px; margin-right: 10px; }
.TaskListDiv { float: right; width: 70%; min-height: 263px; margin-bottom: 50px; background: #ccc; padding: 10px; }
.Headings h2 { margin-right: 50px; float: left; }
.cbxListIsComplete { float: left; width: 15%;}
.ListTaskName { float: left; width: 20%; }
.ListTaskDescription { float: left; width: 65%; }
After adding that code in then save both files and toggle back to the browser and click refresh. Since this is just HTML code and not any server-side code, nothing needs to be compiled or built so we can instantly see these changes on the page. After inserting the HTML and applying the styles you should see something on the page like this:
The Blue Add-Task Button
After you saved and refreshed your screen did you wonder how the Add Task button showed up already styled and blue? This is actually by design. If you notice in the HTML of the input button we added a class in called "dnnPrimaryAction" to the element. This dnnPrimaryAction class is a style provided by DNN that we can update if we want. Using it helps us create a consistent user interface and experience across our entire site. We can easily update the color or styles associated with the dnnPrimaryAction buttons in one locations (a CSS stylesheet) and it will update all buttons using this class across the entire site. You can specify a .dnnSecondaryAction as well.
This video walks through the concepts in this blog entry
We are indeed making progress. Though, as you can note on the right
hand side of the module we have a list of tasks that currently only has
the “Task Name Placeholder” and “Task Description Placeholder” in it.
The module doesn’t have any functionality yet, but we have a visual
start and will begin adding in the functionality in the following blog
entries to get data returned and listed in this list.
If you want more helpful resources on HTML & CSS check out the following links:
Go to the Next Blog Entry: Creating the Tasks Table