Wednesday, May 30, 2012

Open source framework for responsive UI

Its not worth to develop your UI for your PC browser and then again for your Mobile devices and then again for Tabs. What we need is grab a Responsive UI Framework to get going - you develop for your PC and rest are taken care of.
Here I am listing all the responsive UI frameworks that I thought I might check.
  • Twitter Bootstrap: I kinda liked and it seems many are rushing to use it as the original developers are from Twitter. But the thing is I felt couple of things are still missing (at least until I am writing this post); Like I was expecting a file input control. However, I got managed the file input control from another source. You can check it here
  • Kickstrap: Its a fork of Twitter Bootstrap plus themes, enhancements, and other goodies.Worth checking.
  • Zurb Foundation: Yet to check. But seems its quite promising.
  • Gumby Framework: Seems quite up to date for getting started instantly.Including psd seems makes it more options in design. 
  • Kendo UI Its a complete UI framework including almost all the elements/ controls needed to get start.
  • Skeleton: I think its the first of the kind - to me it is not that appealing - din dig deep though ;)

Wednesday, May 9, 2012

Multilevel Dropdown menu for Twitter Bootstarp


Twitter Bootstarp is an excellent responsive UI framework to start your web application. But it seems they are yet to implement a multilevel Dropdown menu. I was googling for it and got couple of solutions and finally came up with my fork :
Update : this was done for twitter bootstrap 2

Pivot Tables

For some reporting started working on some pivot tables. To me these tables are one of those initial rich data visualization formats.
What is it ? :
"In SQL, a pivot table is a set of data that is transformed from a collection of separate rows to a collection of columns. In relational databases, such as Microsoft SQL Server, Oracle and MySQL, pivot tables can be used to simplify extensive data in order to make it easier to read and understand. To create a pivot table, an aggregate is used against a set of data to distribute multiple rows of a single column into a single row with multiple columns. This essentially pivots the result set sideways."
How to :
-Pivot by Aggregated Case Statement
By using an aggregate function (SUM, AVG, MIN, MAX) around a case statement in a SQL query, we are able to achieve the same result as the PIVOT function with less work.
- Sample data: To better understand a pivot table, an example of some sales data is listed here. Copy the following into Microsoft SQL Server Management Studio to try out the examples.
Create table PivotTestTable
(CustName varchar(8),
Item_Type varchar(8),
Item_Amount numeric(6,2))
insert into #PivotTestTable
select 'Jason', 'Computer', 435.34
union
select 'Jason', 'Software', 243.54
union
select 'Jason', 'Monitor', 158.23
union
select 'Alison', 'Computer', 345.89
union
select 'Alison', 'Software', 78.78
union
select 'Alison', 'Monitor', 123.45
- UnPivoted data : When the temp table, #PivotTestTable, is queried, the result is the following.
CustName Item_Type Item_Amount
-------- --------- -----------
Alison Computer 345.89Alison Monitor 123.45
Alison Software 78.78Jason Computer 435.34
Jason Monitor 158.23Jason Software 243.54
As you can see, the result set shows two customers, Alison and Jason, who have purchased three different types of items. There are six rows of data for two customers. If we wanted to see the data in a single row per customer, we would use a pivot table to achieve the desired result.
- Pivoted data : Try the following query and see how the output looks now:
SELECT
CustName as Total_Sales_By_Cust,
sum(case Item_Type when 'Computer' then Item_Amount end) as Computer,
sum(case Item_Type when 'Monitor' then Item_Amount end) as Monitor,
sum(case Item_Type when 'Software' then Item_Amount end) as Software
FROM PivotTestTable
GROUP BY CustName
Or the same can be done as :

SELECT
CustName as Total_Sales_By_Cust,
sum(Item_Type = 'Computer') as Computer,
sum(Item_Type = 'Monitor' ) as Monitor,
sum(Item_Type ='Software' ) as Software
FROM PivotTestTable
GROUP BY CustName

Or you can even COUNT instead of SUM

Currently I am only playing with the SQL to generate the pivot tables; But yeah, there are couple of JS library that you can utilize to play with the Pivot tables on the fly on the client :) :
  1. Pivot.js
  2. jQuery.pivot