Archive

Archive for the ‘Article’ Category

Start to use Git & Dropbox

November 29, 2012 Leave a comment

It’s really great to use Git to manage my source code. So that , I can develop my own application anywhere , manage my source code offline , and push it when I need to.  Here is a memo for the most simple way to implement it.

1. Install Git & Dropbox

Git : http://code.google.com/p/msysgit/downloads/list

Dropbox: https://www.dropbox.com

2. Create a folder for placing the repository in Dropbox folder

C:\Users\shenhengbin\Dropbox\Repos

3.  I have a project below want to add to Git

C:\shenhb\dev\proj\DataAnalysisWeb

4. In the DataAnalysisWeb  folder , input the command below with Git Bash

git init

5. Clone one copy into the Repos under the Dropbox folder

git clone –bare . C:\Users\shenhengbin\Dropbox\Repos\DataAnalysisWeb.git

6. Create a remote repository named “origin” point at the above folder .Then , I can use push&pull from it.

git remote add origin C:\Users\shenhengbin\Dropbox\Repos\DataAnalysisWeb.git

7. OK , Then I can use push like

git push origin master

8. Finally , If  other one also want to checkout it , I can share the folder to him , and use
git clone C:\XXXXXXX\Dropbox\Repos\DataAnalysisWeb.git

to get the latest source code from Dropbox.

Categories: Article

Create css of resizing iframe content

November 22, 2012 Leave a comment

 var s = [];
 s.push("zoom: 0.2");
 s.push("-moz-transform: scale(0.2, 0.2)");
 s.push("-webkit-transform: scale(0.2, 0.2)");
 s.push("-o-transform: scale(0.2, 0.2)");
 s.push("-ms-transform: scale(0.2, 0.2)");
 s.push("transform: scale(0.2, 0.2)");
 s.push("-moz-transform-origin: top left");
 s.push("-webkit-transform-origin: top left");
 s.push("-o-transform-origin: top left");
 s.push("-ms-transform-origin: top left");
 s.push("transform-origin: top left");

 var css = s.join(";");

Categories: Article

JQuery get size of iframe content

November 22, 2012 Leave a comment

It does not works for the cross-domain, but works fine in same domain .


$('iframe').load(function () {
var doc = this.contentWindow.document;
var height = Math.max(
doc.body.scrollHeight || 0,
        doc.documentElement.scrollHeight || 0,
        doc.body.offsetHeight || 0,
        doc.documentElement.offsetHeight || 0,
        doc.body.clientHeight || 0,
        doc.documentElement.clientHeight || 0
    );
    var width = Math.max(
        doc.body.scrollWidth || 0,
        doc.documentElement.scrollWidth || 0,
        doc.body.offsetWidth || 0,
        doc.documentElement.offsetWidth || 0,
        doc.body.clientWidth || 0,
        doc.documentElement.clientWidth || 0
    );
};
Categories: Article

Using windows-batch to compare two tables

August 31, 2012 Leave a comment

Micorsoft has already provided EXCEPT keyword to compare the result of two queries.

So we can easily find the unmatched records .

This batch file just implemented to compare records one or multiple tables in two servers by EXCEPT query automatically.

■ Directory Structure

│ CompareMul.bat
│ CompareOne.bat
│ ExSetEnv.bat
│ ExSqlCmdFile.bat
│ Tables.txt list of table names

├─result Result Folder
└─sql Sql Folder
receipt_tbl.sql Sql File

  • ExSetEnv.bat

Set the global variables.

rem @echo off
set DB_SERVER=SERVER
set DB_NAME_L=DataBase1
set DB_NAME_R=DataBase2
set DB_USER=user
set DB_PWD=pwd

set OUTPUT_FOLDER=result
set SQL_FOLDER=sql
  • ExSqlCmdFile.bat

Just excute the sql query with SqlCmd.

Sqlcmd -U%DB_USER% -P%DB_PWD% -S%DB_SERVER% -d%DB_NAME_L% -h-1 -s"	" -W -i"%1" -o"%2"
  • CompareOne.bat

Call ExSqlCmdFile.bat with input sql file path and out result file path as parameters

rem @echo off
cd /d %~dp0
set TABLE_NAME=%1
call ExSetEnv.bat
call ExSqlCmdFile.bat %SQL_FOLDER%\%TABLE_NAME%.sql %OUTPUT_FOLDER%\%1.txt
goto :EOF
  • CompareMul.bat

Loop through table names defined in Tables.txt and Call CompareOne.bat with table name as parameter Call CompareOne.bat with table name as parameter

rem @echo off
cd /d %~dp0
call ExSetEnv.bat
for /f %%p in (Tables.txt) do call :sub %%p
goto :EOF
:sub
call CompareOne.bat %1
goto :EOF
  • receipt_tbl.sql
SET NOCOUNT ON

SELECT  [columns for comparing]
FROM $(DB_NAME_L).DBO.$(TABLE_NAME)
EXCEPT
SELECT  [columns for comparing]
FROM $(DB_NAME_R).DBO.$(TABLE_NAME)
ORDER BY [columns for comparing]

SELECT  [columns for comparing]
FROM $(DB_NAME_R).DBO.$(TABLE_NAME)
EXCEPT
SELECT  [columns for comparing]
FROM $(DB_NAME_L).DBO.$(TABLE_NAME)
ORDER BY [columns for comparing]

How to Run

Then you just directly put

D:/>CompareMul.bat

or

D:/>CompareOne.bat tablename

in command line.

Other commands for memo

Output all user tables into files named as server name.

bcp "SELECT  [name] As name FROM [%DB_NAME%].[sys].[tables] where type = 'U' queryout %DB_SERVER%.txt -c -t\t -S%DB_SERVER% -U%DB_USER% -P%DB_PWD%

Directly excute a query by SqlCmd

Sqlcmd -U%DB_USER% -P%DB_PWD% -S%DB_SERVER% -d%DB_NAME_L% -Q%1
Categories: Article

WPF : Applying Data Templates Dynamically in ContentControl

July 6, 2012 3 comments

Yesterday , I have post an article about Applying Data Templates Dynamically in ItemsControl . In that article , I have loaded all the data at first , and render the view at once time.

But sometimes I would also like to load data dynamically . As a sample like bellow.

When Q1 be selected in left list , Single Choice View will be loaded in right ContentControl.

When Q2 be selected in left list , Multiple Choice View will be loaded in right ContentControl.

When Q3 be selected in left list , FreeText View will be loaded in right ContentControl.

Implementation

The Data Structure is almost like yesterday.

First , I have designed a data structure for each type of question view model.

  • interface
public interface IQuestion
{
string Title { get; set; }
void GetContent();
}

Each type of question(View Model)

  • Single Choice ViewModel
public class SingleViewModel : IQuestion
{
public string Title { get; set; }

public ObservableCollection<Category> Categories { get; set; }

public SingleViewModel()
{
Categories = new ObservableCollection<Category>();
}

void IQuestion.GetContent()
{
Categories.Clear();
Categories.Add(new Category() { Title = "Test1" });
Categories.Add(new Category() { Title = "Test2" });
Categories.Add(new Category() { Title = "Test3" });
Categories.Add(new Category() { Title = "Test4" });
Categories.Add(new Category() { Title = "Test5" });
}
}
  • Multiple Choice ViewModel
public class MultipleViewModel : IQuestion
{
public string Title { get; set; }
public ObservableCollection<Category> Categories { get; set; }

public MultipleViewModel()
{
Categories = new ObservableCollection<Category>();
}

void IQuestion.GetContent()
{
Categories.Clear();
Categories.Add(new Category() { Title = "Test1" });
Categories.Add(new Category() { Title = "Test2" });
Categories.Add(new Category() { Title = "Test3" });
Categories.Add(new Category() { Title = "Test4" });
Categories.Add(new Category() { Title = "Test5" });
}
}
  • Free Text ViewModel
public class FreeTextViewModel : IQuestion
{
public string Title { get; set; }
public string Content { get; set; }

public FreeTextViewModel()
{
}

void IQuestion.GetContent()
{
Content = "dummy data for free text";
}
}

  • Defined a viewmodel for main page
Here is different with yesterday . 
I have defined a ICommand to invoke the LoadContent method dynamically when selectionchanged event be raised.
public class Sample6ViewModel : ViewModelBase
{
public ObservableCollection<IQuestion> Questions { get; set; }
public IQuestion SelectedQuestion { get; set; }
public ICommand LoadContent { get; set; }

public Sample6ViewModel()
{
Questions = new ObservableCollection<IQuestion>();
Questions.Add(new SingleViewModel() { Title="Q1 : Single Choice Sample"});
Questions.Add(new MultipleViewModel() { Title = "Q2 : Multiple Choice Sample" });
Questions.Add(new FreeTextViewModel() { Title = "Q3 : FreeText Sample" });

SelectedQuestion = Questions[0];
SelectedQuestion.GetContent();

LoadContent = new RelayCommand(
() =>
{
SelectedQuestion.GetContent();
}, () => {
return SelectedQuestion != null;
});
}
}

View

  • Define each type of questions's  DataTemplate
I have created three UserControls to placing these three types for making main view source more clearly.

SingleChoiceView.xaml

<UserControl x:Class="MVVMSample1.View.SingleChoiceView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel Orientation="Vertical" Width="auto">
<TextBlock Text="{Binding Title}" HorizontalAlignment="Left" FontWeight="12" Margin="2,0,0,2"/>

<ItemsControl ItemsSource="{Binding Categories}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<RadioButton GroupName="RadioName" Content="{Binding Title}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</UserControl>

MultipleChoiceView.xaml

<UserControl x:Class="MVVMSample1.View.MultipleChoiceView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel Orientation="Vertical" Width="auto">
<TextBlock Text="{Binding Title}" HorizontalAlignment="Left" FontWeight="12" Margin="2,0,0,2"/>

<ItemsControl ItemsSource="{Binding Categories}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding Title}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</UserControl>

FreeTextView.xaml

<UserControl x:Class="MVVMSample1.View.FreeTextView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel Orientation="Vertical" Width="auto">
<TextBlock Text="{Binding Title}" HorizontalAlignment="Left" FontWeight="12" Margin="2,0,0,2"/>
<TextBlock Text="{Binding Content}" Margin="5,5,0,15" HorizontalAlignment="Left" TextWrapping="Wrap" />
</StackPanel>
</UserControl>
  • Define MainView
<Window.DataContext>
<vm:Sample6ViewModel />
</Window.DataContext>

<Window.Resources>
<System:String x:Key="PageTitle">WPF Simplified - Part6</System:String>

<DataTemplate x:Key="QuestionListTemplate">
<StackPanel Orientation="Horizontal" Width="auto">
<TextBlock Text="{Binding Title}" HorizontalAlignment="Left" Margin="2,0,0,2"/>
</StackPanel>
</DataTemplate>

<DataTemplate DataType="{x:Type vm:SingleViewModel}">
<vw:SingleChoiceView />
</DataTemplate>
<DataTemplate DataType="{x:Type vm:MultipleViewModel}">
<vw:MultipleChoiceView />
</DataTemplate>
<DataTemplate DataType="{x:Type vm:FreeTextViewModel}">
<vw:FreeTextView />
</DataTemplate>
</Window.Resources>

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

<ListBox x:Name="lstFriend" Grid.Column="0"
ItemsSource="{Binding Questions}"
SelectedItem="{Binding SelectedQuestion}"
ItemTemplate="{StaticResource QuestionListTemplate}"
cmd:CommandBehavior.RoutedEventName="SelectionChanged"
cmd:CommandBehavior.TheCommandToRun="{Binding Path=LoadContent}"/>

<GridSplitter  Grid.Column="1" ResizeBehavior="PreviousAndNext" Background ="BlueViolet"  Width="1" />

<ContentControl Grid.Column="2"
Content="{Binding SelectedItem , ElementName=lstFriend}">

</ContentControl>
</Grid>

■ Download
WPF : Applying Data Templates Dynamically in ContentControl

Categories: Article, WPF

WPF : Applying Data Templates Dynamically in ItemsControl

July 5, 2012 1 comment

I want to create a survey form by WPF like bellow.

As we known there are many types in a questionnaire sheet.
Single Choice , Mutiple Choice ,Free Text and so on .
So , I would like to find a way to create the entire sheet with full of types and least code.

Fortunately there are also many cool features in WPF to help me implement it very easy.

First , I have designed a data structure for each type of question view model.

  • interface
public interface IQuestion
{
string Title { get; set; }
void GetContent();
}

Each type of question(View Model)

  • Single Choice ViewModel
public class SingleViewModel : IQuestion
{
public string Title { get; set; }

public ObservableCollection<Category> Categories { get; set; }

public SingleViewModel()
{
Categories = new ObservableCollection<Category>();
}

void IQuestion.GetContent()
{
Categories.Add(new Category() { Title = "Test1" });
Categories.Add(new Category() { Title = "Test2" });
Categories.Add(new Category() { Title = "Test3" });
Categories.Add(new Category() { Title = "Test4" });
Categories.Add(new Category() { Title = "Test5" });
}
}
  • Multiple Choice ViewModel
public class MultipleViewModel : IQuestion
{
public string Title { get; set; }
public ObservableCollection<Category> Categories { get; set; }

public MultipleViewModel()
{
Categories = new ObservableCollection<Category>();
}

void IQuestion.GetContent()
{
Categories.Add(new Category() { Title = "Test1" });
Categories.Add(new Category() { Title = "Test2" });
Categories.Add(new Category() { Title = "Test3" });
Categories.Add(new Category() { Title = "Test4" });
Categories.Add(new Category() { Title = "Test5" });
}
}
  • Free Text ViewModel
public class FreeTextViewModel : IQuestion
{
public string Title { get; set; }
public string Content { get; set; }

public FreeTextViewModel()
{
}

void IQuestion.GetContent()
{
Content = "dummy data for free text";
}
}

  • Defined a viewmodel for main page
public class Sample5ViewModel : ViewModelBase
{
public ObservableCollection<IQuestion> Questions { get; set; }

public Sample5ViewModel()
{
Questions = new ObservableCollection<IQuestion>();
Questions.Add(new SingleViewModel() { Title="Q1 : Single Choice Sample"});
Questions.Add(new MultipleViewModel() { Title = "Q2 : Multiple Choice Sample" });
Questions.Add(new FreeTextViewModel() { Title = "Q3 : FreeText Sample" });

foreach (var q in Questions)
q.GetContent();
}
}

View

  • Define the DataContext to Bind ItemsControl

<Window.DataContext>
<vm:Sample5ViewModel />
</Window.DataContext>
<Window.Resources>

  • Define each type of questions’s  DataTemplate
<DataTemplate DataType="{x:Type vm:SingleViewModel}">
<StackPanel Orientation="Vertical" Width="auto">
<TextBlock Text="{Binding Title}" HorizontalAlignment="Left" FontWeight="12" Margin="2,0,0,2"/>
<ItemsControl ItemsSource="{Binding Categories}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<RadioButton GroupName="RadioName" Content="{Binding Title}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>

<DataTemplate DataType="{x:Type vm:MultipleViewModel}">
<StackPanel Orientation="Vertical" Width="auto">
<TextBlock Text="{Binding Title}" HorizontalAlignment="Left" FontWeight="12" Margin="2,0,0,2"/>
<ItemsControl ItemsSource="{Binding Categories}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding Title}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>

<DataTemplate DataType="{x:Type vm:FreeTextViewModel}">
<StackPanel Orientation="Vertical" Width="auto">
<TextBlock Text="{Binding Title}" HorizontalAlignment="Left" FontWeight="12" Margin="2,0,0,2"/>
<TextBlock Text="{Binding Content}" Margin="5,5,0,15" HorizontalAlignment="Left" TextWrapping="Wrap" />
</StackPanel>
</DataTemplate>
  • Define ItemsControl
<ItemsControl x:Name="lstQuestion"  ItemsSource="{Binding Questions}" />
Categories: Article, WPF

Overview of WPF Layouts

  • Canvas

A Canvas panel is used to position child elements by using explicit coordinates.
The coordinates can be specified relative to any side of the panel by using Canvas.Left, Canvas.Top, Canvas.Bottom and Canvas.Right  properties.

A Canvas has default Height and Width properties of zero


<Canvas>
<Canvas Background="Bisque" Height="200" Width="200">
<TextBlock Foreground="Blue" Text="Default Height &amp; Width are zero"></TextBlock>
</Canvas>
</Canvas>

Set Canvas.Left and Canvas.Top to move Canvas


<Canvas>
<Canvas Canvas.Top="50" Canvas.Left="50" Background="Bisque" Height="200" Width="200">
<TextBlock Foreground="Blue" Text="Default Height &amp; Width are zero"></TextBlock>
</Canvas>
</Canvas>

Resize the Canvas and will not clip the content when ClipToBounds is false(Default value)


<Canvas>
<Canvas Background="Bisque" Height="150" Width="150">
<TextBlock Foreground="Blue" Text="Default Height &amp; Width are zero"></TextBlock>
</Canvas>
</Canvas>

Resize the Canvas and will clip the content when ClipToBounds is true


<Canvas>
<Canvas Background="Bisque" Height="150" Width="150"  ClipToBounds="True">
<TextBlock Foreground="Blue" Text="Default Height &amp; Width are zero"></TextBlock>
</Canvas>
</Canvas>

  • StackPanel

A StackPanel allows you to stack elements in a specified direction. By using properties that are defined on StackPanel, content can flow both vertically, which is the default setting, or horizontally.

Orientation=”Vertical”(Default value)

<StackPanel>
<Button Content="Button1"/>
<Button Content="Button2" Height="30" Width="100" />
<Button Content="Button3"/>
</StackPanel>

Orientation=”Horizontal”

<StackPanel Orientation="Horizontal">
<Button Content="Button1"/>
<Button Content="Button2" Height="30" Width="100" />
<Button Content="Button3"/>
</StackPanel>

Add a ScrollBar to a Stackpanel


<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel />
</ScrollViewer>

Padding on StackPanel


<Border Padding="10">
<StackPanel />
</Border>
  • WrapPanel

The WrapPanel is similar to the StackPanel but it does not just stack all child elements to one row, it wraps them to new lines if no space is left. The Orientation can be set to Horizontal or Vertical.

Orientation=”Horizontal”


<WrapPanel Orientation="Horizontal" Width="160" >
<Button Content="Button1" />
<Button Content="Button2" />
<Button Content="Button3" />
<Button Content="Button4" />
<Button Content="Button5" />
</WrapPanel>

Orientation=”Vertical”


<WrapPanel Orientation="Vertical" Height="80" Background="Aquamarine">
<Button Content="Button1" />
<Button Content="Button2" />
<Button Content="Button3" />
<Button Content="Button4" />
<Button Content="Button5" />
</WrapPanel>

  • DockPanel

The dock panel is a layout panel, that provides an easy docking of elements to the left, right, top, bottom or center of the panel. The dock side of an element is defined by the attached property DockPanel.Dock. To dock an element to the center of the panel, it must be the last child of the panel and the LastChildFill property must be set to true.

Set the LastChildFill property to true(default value) 


<DockPanel>
<Button Content="Dock=Top" DockPanel.Dock="Top"/>
<Button Content="Dock=Bottom" DockPanel.Dock="Bottom"/>
<Button Content="Dock=Left"/>
<Button Content="Dock=Right" DockPanel.Dock="Right"/>
<Button Content="LastChildFill=True"/>
</DockPanel>

Set the LastChildFill property to false


<DockPanel LastChildFill="False">
<Button Content="Dock=Top" DockPanel.Dock="Top"/>
<Button Content="Dock=Bottom" DockPanel.Dock="Bottom"/>
<Button Content="Dock=Left"/>
<Button Content="Dock=Right" DockPanel.Dock="Right"/>
<Button Content="LastChildFill=False" DockPanel.Dock="Top"/>
</DockPanel>

  • Grid

The grid is a layout panel that arranges its child controls in a tabular structure of rows and columns. Its functionality is similar to the HTML table but more flexible. A cell can contain multiple controls, they can span over multiple cells and even overlap themselves.

Create a simple Grid with controls.


<Grid>
 <Grid.RowDefinitions>
 <RowDefinition Height="Auto" />
 <RowDefinition Height="*" />
 <RowDefinition Height="80" />
 </Grid.RowDefinitions>
 <Grid.ColumnDefinitions>
 <ColumnDefinition Width="Auto" />
 <ColumnDefinition Width="*" />
 <ColumnDefinition Width="80" />
 </Grid.ColumnDefinitions>

<Button Grid.Column="0" Grid.Row="0" Content="Cells(0,0)"  />
 <Button Grid.Column="0" Grid.Row="1" Content="Cells(1,0)"  />
 <Button Grid.Column="0" Grid.Row="2" Content="Cells(2,0)"  />
 <Button Grid.Column="1" Grid.Row="0" Content="Cells(0,1)"  />
 <Button Grid.Column="1" Grid.Row="1" Content="Cells(1,1)"  />
 <Button Grid.Column="1" Grid.Row="2" Content="Cells(2,0)"  />
 <Button Grid.Column="2" Grid.Row="0" Content="Cells(0,2)"  />
 <Button Grid.Column="2" Grid.Row="1" Content="Cells(1,2)"  />
 <Button Grid.Column="2" Grid.Row="2" Content="Cells(2,2)"  />
</Grid>

Set up a WPF Gridsplitter to resize two columns


<Grid>
 <Grid.ColumnDefinitions>
 <ColumnDefinition Width="*"/>
 <ColumnDefinition Width="Auto"/>
 <ColumnDefinition Width="*"/>
 </Grid.ColumnDefinitions>

<Canvas Background="AliceBlue" Grid.Column="0"></Canvas>
 <GridSplitter  Grid.Column="1" ResizeBehavior="PreviousAndNext" Background ="BlueViolet"  Width="1" />
 <Canvas Background="Aquamarine" Grid.Column="2"></Canvas>
 </Grid>

Categories: Article, WPF