Debug and interact with Web apps via Opera Dragonfly

By Tony Patton

Takeaway: Tony Patton provides an overview of Opera Dragonfly's features and explains why it replaced Firebug as his Web development tool of choice.

I have been a big fan of Firebug for quite some time, but I have quickly fallen in love with the Opera alternative Dragonfly. The comprehensive set of Web development tools are finally out of beta and ready for prime time. This article provides an introduction and overview of the tool with a focus on specific features in future articles.

Let's go to the Opera

I liked Opera, but I stopped using the browser when they started charging for it. That strategy was quickly dropped, and the free Opera browser currently sits at version 11.51 and is available for Windows, Mac, and Linux, as well as mobile and tablet platforms.

While it only commands a small percentage of the browser market, Opera offers a lightweight browser with a slick user interface. In addition to the developer toolset, it provides hardware acceleration, stacked tabs, and mouse gestures; it also works great on mobile platforms and claims the fastest JavaScript engine called Carakan. The latest version is now my preferred browser on both my Windows and Mac laptops.

What more do you need?

Opera Dragonfly is installed with the browser; it is available from the Tools | Advanced dropdown menu, a keyboard shortcut (on Windows, it's [Ctrl][Shift][I]), or by right-clicking an element within a Web page and selecting Inspect Element from the popup menu.

Figure A

The Opera Dragonfly toolset is accessible via the Opera Tools dropdown menu. (Click the image to enlarge.)

A quick survey of Opera Dragonfly's features makes you wonder what else a Web developer could possibly need to thoroughly develop, test, and debug Web applications. The following list provides a sampling of these features, which are accessible via the main toolbar in the Opera Dragonfly interface (Figure B).

Figure B

The Opera Dragonfly main toolbar provides access to the main features. (Click the image to enlarge.)

You see all of the features discussed below in Figure C.

• DOM Inspector: The feature is available via the Documents panel in the toolbar. DOM Inspector displays the DOM tree for the current document as interpreted by the Opera browser. The Opera site has a great description of this feature, which they call "View Source on steroids." The option's Style Inspector feature, which is displayed in the lower right window, shows the corresponding style for an element selected in the left window (DOM Inspector).
• JavaScript Debugger: The full-featured debugger is available via the Scripts panel. It provides access to JavaScript for the current Web page and allows you to control flow via breakpoints and so forth. The source code is displayed in the left portion of the window; the right side provides features such as breakpoints, state (watches, call stack, etc.) and allows you to easily search the code.
• Network Inspector: The Network panel opens this feature, which is described as an HTTP dashboard. Network Inspector allows you to view and inspect all HTTP requests associated with the page, as well as a visualization of download times/duration for all resources used by the page; you can view all of this via the Network Log tab. A neat feature is the ability to send your own HTTP requests via the Make Request tab.
• Resources Inspector: The Resources panel selection provides access to this feature. Resources Inspector displays all resource requests initiated by the Web page. It displays the host for the resource and full URI along with type and size. This can be used along with the Network Inspector to see the large resources and their associated download times, allowing you to pinpoint issues.
• Storage Inspector: This feature provides an overview of the client-side storage utilized by the page. This includes cookies and HTML 5 Web storage.
• Error Log: The Errors panel provides access to the Error Log, which is one of the more important features for working with your own Web applications. The panel header includes a number of the total number of errors returned. It displays the error and its source. You can configure the Error Log via Settings to not display certain CSS errors, and the Filter box can be used to refine the error list.
• Console: The console allows you to evaluate JavaScript statements on the fly and inspect objects and properties.
• Remote Debugging: This cool feature allows you to debug separate instances of Opera on the same or other computer, mobile devices, or a television. When used, Remote Debugging listens for connections to a specified IP address and port and connects and passes debugging information across the connection. It debugs remotely just like a local instance.

Figure C

The DOM Inspector opened for the TechRepublic home page. (Click the image to enlarge.)

This list just scratches the surface at what is included in the Opera Dragonfly toolset. Each feature has its own set of functionality. Opera Dragonfly is completely open source, and there is a lot of good documentation for the tools available online.

Feature overload

Opera Dragonfly seems to offer all of the tools necessary to properly debug and interact with Web applications. It follows the path blazed by Firebug and offers even more features, which is why Opera Dragonfly has become my preferred tool. In future posts, I'll cover specific features of Opera Dragonfly in more detail. In the meantime, if you haven't already, I encourage you to install Opera and try Dragonfly.

Top IT skills wanted for 2012

By Toni Bowers

Takeaway: A new Computerworld survey indicates the nine IT skills that will be in demand in 2012.

Nearly 29 percent of the 353 IT executives who were polled in Computerworld's annual Forecast survey said they plan to increase IT staffing through next summer. (That's up from 23% in the 2010 survey and 20% in the 2009 survey.)

Here are the skills that the IT executives say they will be hiring for:

1. Programming and Application Development–61% plan to hire for this skill in the next 12 months, up from 44% in the 2010 survey. This covers the gamut from website development to upgrading internal systems and meeting the needs of mobile users.
2. Project Management (but with a twist)– The twist is that they're not going to just be looking for people who can oversee and monitor projects. They also want people who can identify users' needs and translate them for the IT staffers-the increasingly popular business analysts.
3. Help Desk/Technical Support–Mobile operating systems have added a new dimension to help desk and tech support.
4. Networking-This demand is being fueled partially by virtualization and cloud computing projects. The survey also revealed that execs will be looking for people with VMware and Citrix experience.
5. Business Intelligence-Computerworld interprets this uptick to a focus shift in many companies,  from cost savings to investing in technology. That will be nice if it pans out that way.
6. Data Center-Virtualization and the Cloud could also be behind the increased need for IT professionals with backgrounds in data center operations and systems integration.
7. Web 2.0-Tech skills centered around social media will be in demand, with .Net, AJAX and PHP as key back-end skills, with HTML, XML, CSS, Flash and Javascript, among others, on the front end.
8. Security-Although down from 32 percent in the 2010 survey, security stays a top concern of IT executives.
9. Telecommunications-The survey indicates a demand for people with IP telephony skills, and for those familiar with Cisco IPCC call center systems.

Add Subheader into Gridview (Groupwise Gridview)

Now its simple to add subheader into grid or make a groupwise gridview using only two functions.

Step 1: Create Sample Table to Test 

/****** Object: Table [dbo].[tblType] Script Date: 09/01/2011 23:09:11 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
IF NOT EXISTS (SELECT * FROM sys.objects WHERE object_id = OBJECT_ID(N'[dbo].[tblType]') AND type in (N'U'))
BEGIN
CREATE TABLE [dbo].[tblType](
[ID] [int] IDENTITY(1,1) NOT NULL,
[TypeName] [varchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NULL,
[GrpCode] [varchar](10) COLLATE SQL_Latin1_General_CP1_CI_AS NULL,
[GroupName] [varchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NULL,
[PID] [int] NULL
)
END
GO
SET IDENTITY_INSERT [dbo].[tblType] ON
INSERT [dbo].[tblType] ([ID], [TypeName], [GrpCode], [GroupName], [PID]) VALUES (1, N'All Residential', N'-1', N'All Residential', -1)
INSERT [dbo].[tblType] ([ID], [TypeName], [GrpCode], [GroupName], [PID]) VALUES (2, N'Residential Plot', N'AR', N'All Residential', 1)
INSERT [dbo].[tblType] ([ID], [TypeName], [GrpCode], [GroupName], [PID]) VALUES (3, N'Raw House', N'AR', N'All Residential', NULL)
INSERT [dbo].[tblType] ([ID], [TypeName], [GrpCode], [GroupName], [PID]) VALUES (4, N'All Commercial', N'-2', N'All Commercial', NULL)
INSERT [dbo].[tblType] ([ID], [TypeName], [GrpCode], [GroupName], [PID]) VALUES (5, N'Office', N'AC', N'All Commercial', NULL)
INSERT [dbo].[tblType] ([ID], [TypeName], [GrpCode], [GroupName], [PID]) VALUES (6, N'Space', N'AC', N'All Commercial', NULL)
INSERT [dbo].[tblType] ([ID], [TypeName], [GrpCode], [GroupName], [PID]) VALUES (7, N'All Agricultural', NULL, N'All Agricultural', NULL)
INSERT [dbo].[tblType] ([ID], [TypeName], [GrpCode], [GroupName], [PID]) VALUES (8, N'Farm', N'AA', N'All Agricultural', NULL)
SET IDENTITY_INSERT [dbo].[tblType] OFF


Step 2: Copy and paste below code (Create function) DataTable AddRow(DataTable dt,string group)
{
if (dt != null && dt.Rows.Count > 0)
{
string cGroup="", pGroup="";
cGroup = dt.Rows[0][group].ToString().Trim();
for (int i = 0; i < dt.Rows.Count; i++)
{
if (i != 0)
{
cGroup = dt.Rows[i][group].ToString().Trim();
}
if (i > 0)
{
pGroup = dt.Rows[i - 1][group].ToString().Trim();
}
if (cGroup != pGroup)
{
DataRow dr = dt.NewRow();
//dr = dt.Rows[i].;
dr[1] = "$#$"+cGroup+"$#$";
dt.Rows.InsertAt(dr, i);
i += 1;
}
}

}
return dt;

}
Step 3: Code to fill a grid

void fillgrid()
{
string qry = "select * from tbltype";
DataTable dt= dal.fillDataTable(qry); //Do a code to get data using SqlCommand and DataAdapter

GridView1.DataSource = AddRow(dt, "GroupName"); //Call a created function,1st arg:DataTable,2nd : fieldname on which you want to group
GridView1.DataBind();
}

Step 4: Create below function to better look of grid

///

/// Use to Merge grid Cells
/// Gridview RowDataBound Event
/// Provide string to compare with cell text
/// Special text to identify for Sub header
/// Cell index which contains sub header text
/// number of columns want to span
/// Cell index of start to remove
/// Last cell index of remove cell
/// True to merge all cells
///

public static void MergeCells(GridViewRowEventArgs e, string CompareText, string symbol, int textcellindex, int colspan, int startcellindex, int lastcellindex, bool mergeallcells,string HeaderCssClass)
{
if (CompareText.Contains(symbol) == true)
{
if (mergeallcells == true)
{
e.Row.Cells[0].Attributes.Add("colspan", (e.Row.Cells.Count).ToString());
e.Row.Cells[0].Text = CompareText.Replace(symbol, ""); ;
for (int i = e.Row.Cells.Count - 1; i > 0; i--)
{
e.Row.Cells.RemoveAt(i);
}
}
else
{
e.Row.Cells[textcellindex].Text = e.Row.Cells[textcellindex].Text.Replace(symbol, "");
e.Row.Cells[textcellindex].Attributes.Add("colspan", colspan.ToString());
for (int i = lastcellindex; i >= startcellindex; i--)
{
e.Row.Cells.RemoveAt(i);
}
}
e.Row.Attributes.Add("class", HeaderCssClass);
}
}

Step 5: Create RowDataBound Event of grid

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
Label lbl = e.Row.FindControl("lblTypeName") as Label;
//MergeCells(e, "$#$", 3, e.Row.Cells.Count, 3, 4, false,"tdHeader");
GridviewGroupwise.MergeCells(e,lbl.Text, "$#$", 3, e.Row.Cells.Count-1, 2, 4, true,"tdHeader");
}
}

HAPPY CODING