Deflected Light Technologies

Do you have kids wondering around on the summer? DLTech releases a fun Windows Phone App – July 4 Trivia. I has exciting facts about July 4th The Independence day of The United States of America.

Don’t miss the hidden ‘silly’ trivia questions?

The Teah DL Tech presented its newly developed App ‘Raffle Swag’ during Hackathon @ TechEd, Atlanta, GA. It received ‘Samsung Focus Developer Phone’ as recognition.

DL Tech releases new Free Windows Phone Application

While at the bar, we keep the Tab open and rely on the bar attender.
At dinner table, the whole family orders food, we are guessing the final bill.

The app,
-Tracks the food/drink as we have it
-Calculates Tax & Tip
-Allows Split to multi check
-Lets you post about the dinner/drinks at your ‘facebook’ directly

Improving Presentation of ASP.GridView Using CSS – StyleSheet
Business Problem: Provide a way to improve the look & feel of ASP.Net GridView in a way that aligns with the overall appearance of the website.
Solution: We have various technological options available for us. We will use CSS-Stylesheet to address the challenge.
Analysis of the problem: ASP.Net GridView is a powerful widget for data, when we combine that with the power of CSS-Stylesheet we can achieve the ‘stunning’ effect from the users.
The GridView is nothing but a data in tabular format. In the ‘Microsoft Word’, we have ‘auto-format’ where we can pick different format for our table. The designers of ‘GridView’ could have provided us with an option similar to ‘auto-format’. However, that option would have been static, limited and may not blend well with the rest of the website. Instead they have provided us with a mechanism to use style sheet for dynamic formatting.
Style Sheet (CSS): CSS (Cascading, Style, Sheet) provides us a way to design a set of Styles, store them in a common Sheet and apply them into our web page using certain Cascading rules.
Style Example:
h1 {color: red; background: yellow ;} h1 is the selector, which identifies the html part to apply the style. ‘color’ defines the font-color and background defines the ‘background’.
The selector types are Element Selectors (body, h1, p ), Class Selectors (class associated with element), Pseudo Selectors (:hover, :link, :visited). Note the ‘Class Selectors’, which helps us to group elements together which could be applied with the same style. In our solution with GridView, we will be using the ‘Class Selector’.
Solution Approach: Following are the steps on our solution.
1. Define the needed styles with ‘Class Selectors’
2. Create StyleSheet with all the styles
3. Reference the StyleSheet in the web page
4. Associate various styles into GridView classes

1. Define the needed styles with ‘Class Selectors’. Here is the code for defining styles for each section of the table.
.Table
{
width:100%;
border: 1px solid #dbdbdb;
background-color:White;
border-collapse:collapse;
}

.TableHeader th
{
padding:0px 0px 0px 0px;
color:Black;
height:28px;
line-height:28px;
border-bottom:solid 1px #dbdbdb;
font-weight:normal;
text-align:left;
padding-left:20px;
background:url(../images/tables/table-bg.gif) repeat-x;
}

.TableHeaderHover
{
background-color:Black;
background:url(../images/tables/table-bg-hover.gif) repeat-x !important;
color:White !important;
}

.TableHeaderFocus
{
background-image:none !important;
background-color:#CDE3ED !important;
}

.TableRow
{
background-color:White;
}

.TableAlternateRow
{
background-color:#f3f3f3;
}

.TableRowHover
{
background-color:#e0e0e0;
}

.TableRow td, .TableAlternateRow td
{
height:19px;
line-height:19px;
padding-left:10px;
}

.TableFooter
{

}
2. Create StyleSheet with all the styles
Just place the above section of code into a file and call it ‘Tables.css’ and place it in the dir ‘css’

3. Reference the StyleSheet in the web page
This instructs the browser to use our style sheet to format the page.




4. Associate various styles into GridView classes
Create a new webform and place a GridView from the designer. If you want to use the property sheet, you assign the style class for each one of the respective properties. In another, better, way is to edit in the designer view and place them, as shown below.
Width="80%" CssClass="Table" HeaderStyle-CssClass="TableHeader"
RowStyle-CssClass="TableRow"
AlternatingRowStyle-CssClass="TableAlternateRow" >




To Test:
The following code populates some sample records, so the table can be viewed correctly.

protected void Page_Load(object sender, EventArgs e)
{
List CustomerList = new List();
CustomerList.Add(new Customer("jsmith@blue.com", "jsmith", "John", "Smith"));
CustomerList.Add(new Customer("jdoe@green.com", "jdoe", "Jane", "Doe"));

GridView1.DataSource = CustomerList;
GridView1.DataBind();
}

public struct Customer
{
private string emailId, customerId, firstName, lastName;

public Customer(string emailId, string customerId, string firstName, string lastName)
{
this.emailId = emailId;
this.firstName = firstName;
this.lastName = lastName;
this.customerId = customerId;
}

public string EmailId
{
get
{
return emailId;
}
}

public string FirstName
{
get
{
return firstName;
}
}

public string LastName
{
get
{
return lastName;
}
}
public string CustomerId
{
get
{
return customerId;
}
}
}

Conclusion: This example uses the simple methods of Stylesheet to deliver a presentable GridView option.
–x–

jQuery to Save & Retrieve Form Data
Business Problem: Provide a way for a customer to save the data entered in a Web form, and repopulate the form data on revisit.  Here each element of the data is not mapped to database element, instead the whole form data is mapped into a column.
Solution:
We have various technological options available for us.  We will use jQuery to address the challenge.
Analysis o f the problem:  Just to clarify, if each form element is mapped to a database element (column), then storing and retrieving is straight forward, we do that every day.   However, in many occasions the web form is used for gathering and feeding to another application.   For example, we worked on a project for a charity in GiveCamp where the registration webform captured the data, generated csv file and csv file was imported into their legacy application.  We had to do that because, the legacy application did not provide us any direct APIs.   Now, think that the volunteer has keyed in most of the information, but does not have her mom’s work phone number, without which she cannot submit the form, and she leaves the screen she needs to key in all the information.    We really need to give her a way to save a draft copy of it and have her comeback and finish it up.

Solution Options: How do we do that? We are only the pass through web application.

Option-1: One option is to have each form element mapped to each database element (column) and store and retrieve.  But, that becomes a maintenance headache, each time a form element is added or removed, the database and associated code needs to be changed.

Option-2: The next option, the best option, which we recommend here uses the robustness of jQuery to achieve that.  Here we will use generic jQuery script to walk through the form elements, capture them, and save them into database.  Later, we will fetch them from the database and repopulate them.

The Generic jQuery Script:
jQuery provides us various powerful tools for us to use, such as ways to (1) iterate the elements (each), (2) select the wanted elements and (3) capture their value.

The function to capture the Form Data:
function fnFormDataXML() {
var myFormDataXML = '';

$('input').each(function (index) {
if ($(this).attr("type") == "text")
myFormDataXML += $(this).attr("id") + '=' + $(this).attr("type") + '=' + $(this).val() + '|';

if ($(this).attr("type") == "radio") {
var radioAlert = $(this).attr("id") + '=' + $(this).attr("type") + '=' + $(this).attr("checked") + '|';
myFormDataXML += radioAlert;
}
});
$('#HiddenField1').val(myFormDataXML);
}

 

Walk through of this code:
1. $(‘input’).each(function (index) –  Looks for all ‘input’ elements
2. if ($(this).attr(“type”) == “text”) –  checks for ‘Text’ type
3. myFormDataXML += $(this).attr(“id”) + ‘=’ + $(this).attr(“type”) + ‘=’ + $(this).val() + ‘|’ – stores both the element name and element value into a keyvalue pair string.
4. $(‘#HiddenField1′).val(myFormDataXML); – saves the key value string into a hidden value
5. You can take the hidden-field value and save into your database, as you normally do

The function to repopulate the Form Data:

function fnPrePopulate() {

var FormDataKeyValuePair = $("#HiddenField1").val();
var ArrayFormData = FormDataKeyValuePair.split("|");
for (key in ArrayFormData) {
var IdAndName = (ArrayFormData[key].toString()).split("=");
var id_text = IdAndName[0];
var id_type = IdAndName[1];
var id_val = IdAndName[2];
try {
if (id_type == "text")
$('#form1').find('#' + id_text).val(id_val);
else  {
$('#form1').find('#' + id_text).attr("checked", id_val);
}
}
catch (err)
{ }
}
$("#HiddenField1").val('');
}

 

Walk through of this code:

1. var FormDataKeyValuePair = $(“#HiddenField1″).val() –  We are taking the value from the hiddenfield.  We are assuming, you have already populated the hiddenfield from database as you would normally do.
2.   var ArrayFormData = FormDataKeyValuePair.split(“|”) – Takes the big string and splits them into array elements, with the delimiter ‘|’
3. for (key in ArrayFormData) {
var IdAndName = (ArrayFormData[key].toString()).split(“=”);
var id_text = IdAndName[0];
var id_type = IdAndName[1];
var id_val = IdAndName[2];
– browse through each element and split between value and name.
4. if (id_type == “text”)
$(‘#form1′).find(‘#’ + id_text).val(id_val);
- We are finding the element with the ‘id’ and assign the value.

Where to call the functions from:
1. The Function to Capture the data – call from button submit

2. The function to repopulate the data – call from ready function of jQuery.
$(document).ready(function () {
fnPrePopulate();
})

Conclusion: This little jQuery function could save a lot of time for the young girl to save her draft form and retrieve it.   Understanding of this problem and the solutions may surely come in handy for us when handling major business solutions.
–x–