博客园_洋心

Coding with JMP3

2012-05-29T08:15:00Z

JMP3 is the best candidate to play mp3 audio files on the page. Here we go the files for JMP3.

JMP3 plugin (jquery.jmp3.js)
JQuery (jquery-1.7.2.min.js)
Flash player (singlemp3player.swf)

Configuration

Copy jquery.jmp3.js, juqery.*.js, singlemp3player.swf to scripts folder or some other folder you like.
Set the initial values for JMP3 in jquery.jmp3.js

Let’s take scripts folder as example. After the aforementioned files are copied to scripts folder, you would like to open the jquery.mp3.js to set the initial values.

jQuery.fn.jmp3 = function(passedOptions){
// hard-wired options
var playerpath = "/Scripts/"; // SET THIS FIRST: path to singlemp3player.swf

// passable options
var options = {
"filepath": "/Media/", // path to MP3 file (default: current directory)
"backcolor": "", // background color
"forecolor": "ffffff", // foreground color (buttons)
"width": "25", // width of player
"repeat": "no", // repeat mp3?
"volume": "50", // mp3 volume (0-100)
"autoplay": "false", // play immediately on page load?
"showdownload": "true", // show download button in player
"showfilename": "true" // show .mp3 filename after player
};

The comments shipped with jquery.mp3.js states very clearly for the variable and fields. Since the singlemp3play.swf is located in the scripts folder, the palyerpath is set with “/Scripts/”.

Another value worthy of pointing out is filepath in options object. The filepath in the options object combining with filename in jmp3 in the front page becomes the complete url path for the mp3 file. So you can leave filepath in the options object empty only if you specify the complete url path for the mp3 file in the front page. In the aforementioned code, I set filepath with “/Media/” since I place the mp3 files in the Media folder.

Use JMP3 in the Front Page

In the front page, please add the following code in the *.ascx or *.aspx.

In the aforementioned code, the mp3 url (filename) is put in a <span>. The mp3 audio player will display in the spans that have “mp3player” class.

Is It A Bug?

I found a strange issue in the repeater that contains multiple mp3 playing url. If the first occurrence of the mp3 url is not valid, the successive mp3 urls will not be represented with jmp3 player even if they have correct mp3 urls. I will appreciate if some jquery experts give the answer here.

supported by Nova Umbraco

本文链接

Practices on Umbraco DataType Development

2012-04-22T10:30:00Z

Umbraco is the most powerful and flexible CMS I have ever seen so far. I just write this essay to demonstrate how to develop an Umbraco DataType for the folks who have basic Asp.net development knowledge.

Here we go, outlines for the steps.

Create an Asp.net application project
Add reference to umbraco.editorControls.dll
Add the usercontrol
Copy the dll and ascx to Umbraco site
Run in Umbraco site

1. Create an Asp.net Application project

The purpose of the Asp.net application project is to debug the usercontrol directly. It is not convenient if you try to debug your usercontrol in Umbraco site environment. It is recommended to name of the project as that you expect in the deployment. Let’s say, the expected assembly name is “NovaDev3.UmbracoComponents”. We name the Asp.net application project “NovaDev3.UmbracoComponents”.

Then create a folder named “usercontrols” in the project. You will find that umbraco site probe the *.ascx file in “usercontrols” folder as well. You created usercontrol will be put in this folder.

2. Add reference to umbraco.editorControls.dll

You can add the reference of umbraco.editorContorls.dll from your umbraco site/bin folder directly. We will implement umbraco.editorControls.userControlGrapper.IUsercontrolDataEditor when we create the usercontrol for the umbraco site. IUsercontrolDataEditor has only one property defined and you could ignore it at all if you don’t plan to save the value in the umbraco db.

namespace umbraco.editorControls.userControlGrapper
{
public interface IUsercontrolDataEditor
{
object value { get; set; }
}
}

3. Add the usercontrol

Let’s add the usercontrol named “InventoryItemCategories”. It is recommended to follow umbraco naming convention that use camel style to name the control. The difference between normal asp.net usercontrol and the umbraco-featured user control is the implementation of IUsercontrolDataEditor.

Let’s just add some simple code to categoriesControl and add it to Default.aspx to test.

categoriesControl.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="categoriesControl.ascx.cs" Inherits="NovaDev3.UmbracoComponents.usercontrols.categoriesControl" %>
<asp:DropDownList ID="categoriesDropdown" runat="server" />

categoriesControl.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using umbraco.editorControls.userControlGrapper;

namespace NovaDev3.UmbracoComponents.usercontrols
{
public partial class categoriesControl : System.Web.UI.UserControl, IUsercontrolDataEditor
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
categoriesDropdown.DataSource = new string[] {
"Rental",
"Spa",
"Class",
"Dining",
"Retail"
};

categoriesDropdown.DataBind();
}
}

public object value
{
get
{
return string.Empty;
}
set
{
//do nothing
}
}
}
}
Default.aspx<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="NovaDev3.UmbracoComponents._Default" %>
<%@ Register TagPrefix="novaCtrl" TagName="categoriesControl" Src="~/usercontrols/categoriesControl.ascx" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div>
<novaCtrl:categoriesControl ID="categories" runat="server" />
</div>
</asp:Content>

When you run your Asp.net project, the dropdownlist display successfully as below.

You can develop usercontrol with complex business logic in this way for incremental coding and debugging in the asp.net application site.

4. Copy the dll and ascx to Umbraco site

When you development completes, you can copy the dll and ascx to the umbraco site folder.

Copying NovaDev3.UmbracoComponents.dll and its dependency dlls to umbraco site/bin folder
Copying *.ascx files to umbraco site/usercontrols folder.

It is recommended to write a copying bat to do it at the beginning of the development.

5. Run in Umbraco site

Go to the Data Types node in the Developer section in umbraco backoffice after you copy the *.dll and *.adcx files to umbraco site folders. Create a datatype named “Categories” and select its render control as “umbraco usercontrol wrapper”.

After you click "Save” button, the “Usercontrol” dropdown list appear under the Database datatype, and then select “categoriesControl.ascx”

Now, you have added the usercontrol as an Umbraco datatype into Umbraco site successfully.

Let’s add a CategoriesPage document type(don’t select “Creating matching template” option) to hold the “Categories” datatype.

Then add a content of “CategoriesPage” to get the category dropdownlist you have just completed in the Asp.net application project.

Other considerations such as the database access layer and settings in the configuration file are ignored here. So you may have additional step to add the database connection string or dependency web service configuration to the web.config in the umbraco site if your usercontrol consumes data from database or other web services.

I will appreciate if you have any suggestions on the practices.

Please refer the source code at my Code Plex

Supported by Nova Umbraco

本文链接

Umbraco-Xsl-Development-Template

2012-04-04T15:43:00Z

Recommended tools

Visual Studio Express
Foxe

Visual Studio

It provides intelligence prompt for the xsl key words to facilitate the work on the xsl.

Foxe

It provides a tree-nodes like view on the xml document to facilitate the navigation on the umbraco.config cache file.

Template Codes

With the help of the two utility, copy the following code to start your umbraco xslt development.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [
<!ENTITY nbsp " ">
]>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform%22
    xmlns:msxml="urn:schemas-microsoft-com:xslt"
    xmlns:umbraco.library="urn:umbraco.library"
xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon"
xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes"
xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath"
xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions"
xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings"
xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets"
    exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ">

<xsl:output method="xml" omit-xml-declaration="yes"/>

<xsl:param name="currentPage"/>

<xsl:template match="/">

</xsl:template>
</xsl:stylesheet>

The xslt file is stored in the ~/xslt/ folder. The target xml file is at ~/App_Data/umbraco.config.

The following key words are commonly used when you write the xsl.

value-of
select
attribute
for-each
sort
if

The following key words are commonly used when you write the xsl.

parent::*
child::*
[@attributeName expression]

Have a fun in coding with xsl for umbraco.config.

Supported by Nova Umbraco

本文链接

Umbraco-DataType-First-Glance

2012-04-01T15:32:00Z

DataType plays important role in Umbraco if you dedicate to extend the power of Umbraco.

For simplicity, the dependencies for DataType goes as following.

From the skeleton like diagram above, we can easily think about how can DataType work essentially. The ISqlHelper tells us the way that Umbraco saves the values into database. Control tells us the way Umbraco represents the data. XmlDocument/XmlNode tells us the relationship to xsl.

After we have a skeleton like imagination on how DataType works, let turn to the real design of DataType in Umbraco.

You have got the differences between your imagination and the real design on the DataType or you are still confused on the design? It doesn’t matter. Here you get the point to go deeper in Umbraco.

Supported by Nova Umbraco

本文链接

Umbraco-Color Picker–Demo

2012-03-29T15:27:00Z

Demo

Allow the end user has ability to change the background color with pre-defined color.

Steps

1. Create a datatype named BackGroundColor.

2. Select Color Picker as its render control and select Nvarchar as its Database datatype.

3. Add the pre-defined colors

You can add any number of colors as you wish.

4. Add the color to Generic Properties in the TextPage document type.

It is reasonable to place Content BackGround Color in the Generic properties tab as it controls the content’s background color.

5. Set the color in the content properties tab

After 1 – 4 steps are carried out, the Content BackGround Color comes up to you when you select the properties tab in content page which take TextPage as its template. Select one of color as your background color here.

6. Apply the color in the template

The code finally looks like the following.

<div class="entry" style="background-color:#<umbraco:Item field="contentBackGroundColor" runat="server" />">
<umbraco:item runat="server" field="bodyText"></umbraco:item>
</div>

7. See the effect.

More knowledge

Umbraco datatypes are created based on the control either shipped with umbraco or self-developed implementing IDataType interface. You can create you specific datatype with specific pre-defined values in different context in your umbraco site. For example, you can create background color 1 and background color 2 based on color picker to control colors in different areas in the template. Have fun here.

The source code is available at NovaUmbracoDemo in CodePlex.

Supported by Nova Umbraco

本文链接

关于Hg的文件过滤

2012-03-21T14:56:00Z

Hg是一个不错的源代码管理器。但是在进行源代码管理时，它会将所有的文件全部都列出来，很是烦恼。

最近发现其有一个ignore功能，可以将不需要纳入源代码管理的文件或者是（更灵活的方式）正则表达式统统过滤掉。

截图如下：

对任意还没有纳入hg源代码管理的文件点击右键，选择Ignore。你会看见如下窗体。

可以选择文件名方式过滤，也可以选择正则表达式方式过滤。

我目前使用的正则表达式为：

过滤掉某一个目录下的所有文件：

uComponentsDemo/App_Data/preview/[\w\d.\-_]+

过滤掉指定扩展名的文件：

[\w\d./_\-]+\.(pdb|dll|exe|cache|txt|suo|resources|rar|tlog|csv|bat)

本文链接

TeamView 有更新

2012-03-11T03:56:00Z

TeamView有更新，下载地址

http://teamview.codeplex.com/

问：TeamView是什么？

答：一个处于概念阶段的项目进度管理系统。

问：什么叫概念阶段？

答：即设计上满足了抽象概念的实现，但离产品级还有很长的路要走。例如，要让当前的发布在你的系统上运行起来，你的自己去配置数据库；当多个用户一同使用时，没有用户权限的限制。

问：它的核心价值是什么

答：从时间消耗上来体现项目进度。例如，整个项目的总时间是多少，当前使用了多少时间，当前超时多少时间。

问：它怎么是英文的？

答：作者是100%的中国人。只是就职于外包公司，为了更加广泛的进行宣传，所以暂时用英文。其实也没有多少英文。

问：既然是开源的，可以加入自己的代码吗？

答：我是绝对欢迎你的贡献。

ObjectCache 的使用

2012-01-10T07:07:00Z

Cache的获取及定义

Cache的获取代码:

var cache = CacheManager.Instance.GetCache<KeyType, ValueType>();

因此对Cache的定义，实际上就是对KeyType和ValueType的定义，例如：

class Key :IEquatable<Key>

{

public string Id{get;set;}

public bool Equals(Key other)

{

if(other == null)

return false;

return Id == other.Id;

}

class BusinessObj

{

/* property definitions*/

}

有了以上两个类型，我们就可以用来创建/获取cache了。

var cache = CacheManager.Instance.GetCache<Key, BusinessObj>();

Cache的作用范围

由于Cache的定义实际上是通过强类型来定义的，如上面的代码GetCache<Key, BusinessObj>()。因此Cache的作用范围等同于上面定义的类型Key和BusinessObj的作用范围。

Cache生命周期的管理

Cache生命周期的管理问题实际上就是控制cache的内容在何时失效。

有以下两种方式来控制cache内容何时失效，cache的内容一旦失效，它就会被从内存中移除

1. 可以通过继承BaseToken来管理

2. 直接调用ICache上的Reset()方法来清空Cache中的所有内容

3. 直接调用ICache上的Remove()方法来指定移除某一个CacheItem

Cache的分组

对Cache分组的目的是，我们可以对同一组别的Cache进行清空处理。Cache的分组信息通过特性定义在Cache的Key上面。请参见以下代码：

[CacheKeyCategory(2)]
class CackeKey2 : IEquatable<CackeKey2>
{
public long Id { get; set; }
#region IEquatable<CacheKey> Members

public bool Equals(CackeKey2 other)
{
return Id == other.Id;
}

#endregion
}

我们可以通过如下单元测试来看清楚其作用

[TestMethod]
public void CacheCategory_Category_Test()
{
var cache = CacheManager.Instance.GetCache<CackeKey2, string>();
cache.GetWithCreate(new CackeKey2 { Id = 1 }, () => "Hello", new BaseToken());

Assert.AreEqual(1, cache.Count());

CacheManager.Instance.ResetCaches(4);

Assert.AreEqual(1, cache.Count());

CacheManager.Instance.ResetCaches(2);

Assert.AreEqual(0, cache.Count());
}当CacheManager.Instance.ResetCaches(4)被调用时,Cache<CacheKey2,string>中的内容并没有被清空。当

CacheManager.Instance.ResetCaches(2)被调用时，Cache<CacheKey2,string>中的内容才被清空。

如果Cache的key没有添加分组信息，那么只有当CacheManager.Instance.ResetCaches（0）;被调用时，Cache中的内容才会被清空，且实际上，这是所有的缓存都会被清空。

本文链接

TDD 模式开发初探

2012-01-06T14:51:00Z

以下是TDD开发中类型的一般分布

这里面关键的类型为

RequestUnitControl, RequestUnitModel, IConfigDataProvider和RequestUnitModelTest

RequestUnitControl:界面控件

RequestUnitModel:封装了RequestUnit的业务逻辑

IConfigDataProvider：获取Model中所需要的数据

RequestUnitModelTest：用于保证RequestUnitModel中封装的业务逻辑正确性的单元测试集合

在TDD开发中，应该先在RequestUnitModelTest中添加业务逻辑的相关测试。然后开发从RequestUnitModelTest移到RequestUnitModel中。

Thinking in Model in Windows Form development

2012-01-02T13:20:00Z

The Model is the M in MVC which is the current popular design pattern in Asp.net.

To think in Model, I have two points.

Model depends on the interfaces.
Divide the business logic on the model into independent units.

What’s the Problem to Be Addressed

Although we have web services to hold the core business logic, there are quite a lot of bueinss logic in the client end to be coded mixed with the UI elements. This leads to testing, which launches the whole system to input or click, and finally distracts the programmer from testing the business logic itself.

This problem is outstanding in the recent development for the availability of child type. But the bugs are reported both in holding UI area and the drilldown UI area.

In addition, it is known that the UI is more changable than the business logic in the UI. Thus, we are commonly demanded by the end user to put the current existing UI element together or lead another UI style to implement the existing business logic. For example, the implementation in the Wizard and Lookbook mode which are error-prone and poorly maintained.

As the scale of the system grows, the complexity of the system may exponentially increase that may be awful to the maintenance.

So we have to make changes to cope with the complexity.

The Concepts in MVC

The MVC design pattern is popular in Microsoft ASP.Net. It grows from Asp.net MVC to Asp.net MVC 4, which demonstrates the design pattern’s concepts are not only effective but also powful. The core concept in the MVC is to isolate the business logic from the influence in UI elements. So the programmer can concentrate on coding on the business logic and take unit test to guarantee its correctness directly instead of lauching the whole system to do the tedious inputting and clicking to test.

However, the MVC design pattern is implemented as a framework in ASP.net. So it is impossibile to introduce it into our windows form development environment.

The variation of MVC is MVP that has been implemented by Smart Client Software Factory(SCSF) in Microsfot platform. Considering the impact of introduction of SCSF to the current development, it would not be achieved in a short term.

So what we could do in short term is to introduce the concept into the development.

The Two Points as the Solution

The tow points are involved in the Model. The Model should encapsulate the business logic of domain and it dosn’t have anything to do with the UI elements. So the Model can be depended by the UI area safely to respond the business logic from the UI elements consistently. I will explain the two points in the Model below.

Model depends on the interfaces

The interface return the data requested in the Model to implement the business logic
The returned data from the interface can be mocked which is the important pre-condition for the unit test
The parameters in the methods of the interface should be as simple as possible to facilitate the mock process
The interface can be determined by the analysis on the domain of business logic. If the business logic is not involved the domain of business logic in the Model, you can hide it behind the interface. Another way to judge if the some business logic can be hidden by the interface is to see if the business logic can be unit tested in the Model.

Divide the business logic on the Model into independent units

Actually, the indpendent units are synonyms of public methods in the Model. This approach takes the following advantanges.

The aspects of the business logic on the Model can be expressed clearly
Each public method can be guarded by the series of unit tests to guarantee the correctness.

To make the method can be guarded by unit test, they should take return-type to check the correctness in the unit test.

The goal of the two points is to help the programmers concentrate on the coding business logic and testing the correctness. And then, the container of the business logic can be invoked everywhere without differences. Eventually, the valuable point-the consistence of the business logic in multiple UI area is achieved. (The goal sounds very attractive)

I will appreciate if you could send any of your feedback on the article.

Or please go to our company novasoftware for more information.

本文链接