[转载]在线个人信息管理系统的设计

mikel阅读(1077)

[转载]在线个人信息管理系统的设计 – 技术 理论 及其它 – 博客园.

在平时的工作中,常常会有一些零散的文档,一时想不起归档到哪里,就往桌面上一放,过段 时间就找不到了;或者看到一个不错的网址,想过会儿看看,但又不值得收藏,还有一些想法,想做的事情等等,如果不记下来就忘记了。记下来了之后,发现换了 一台电脑,又看不见了,很烦恼。其实纸质的笔记本是很好的工具,但是笔记本要带来带去,而且要记录网址,代码片段什么的很不方便。因此我打算自己做一个在 线系统,用来管理这些零散的信息,便于查找。不知道大家是不是也有这方面的需求,欢迎补充.

下面的图片用Pencil 工具作出,挺方便的。

系统分为两大部分:待办事务管理和备忘。

1.待办事务

待办事务一览页面: 显示各个待办事件的内容和状态,并且可以进行筛选。点击update,可以修改事务的状态。

todolist

更新事务状态页面:打开页面显示该事务的内容和其他信息,还有历次更新此事务状态的记录,以及备注(包括附件)。对于一个事务的操作可以有,更改其状态,添加备注,上传附件。

todoupdate

新增事务页面:似乎还要加上一个上传附件的功能.

todocreate

2. 备忘管理

备忘列表主要显示备忘的内容,类型,例如:备忘,网摘,暂存等。Tag是用一个或若干词汇来标记此备忘的内容,可以比分类更加详细一些,便于搜索。新建备忘的时候关键是要快速,点击Fast Create会弹出一个小框子,可以迅速输入内容并保存。

memolist

新建备忘:

memocreate

Tag管理:

tagmanagement

页面就这么多,系统本身也不复杂.不过要实现的好用,易用,快速,还是要费点功夫的. 等我慢慢来实现吧.^_^

[转载]Flex元数据标签总结

mikel阅读(1118)

[转载]Flex元数据标签总结 – enjoyInGIS-智慧点亮生活 – 博客园.

一、概述

Flex中的元数据标签用来向编译器提供有关如何编译应用程序的信息。元数据标签只在编译时发生作用。其语法形式为[Somelabel]。使用元数据标 签可以让代码变得更加简洁易读,有时我们还需要借助元数据标签来实现特定的功能,同时,让我们的代码变得更有档次。但由于Flex中的元数据标签的种类和 功能非常多,笔者特将这个元数据标签的功能和用法总结出来,便于大家和笔者自己复习和查找。

二、常用的元数据标签

序号 标签名 功能
1 ArrayElementType 指定Array元素的类型
2 Bindable 指定绑定数据源
3 DefaultProperty 指定类默认属性
4 Deprecated 元素过期标识
5 Effect 定义一个效果属性名称
6 Embed 用来向程序中嵌入JPEG、GIF、PNG、SVG等格式的图片文件及字体文件
7 Event 声明一个事件
8 Exclude 使FB的标签检查器忽略类中的某个元素。如果父类中的元素使用了这个标签,那么子类将不会继承这个元素
9 ExcludeClass 使FB标签检查器忽略类
10 IconFile 用来标自定义类指定一个图标,使组件在FB的插入面板中以该图显示。支持个是有PNG、GIF和JPEG
11 Inspectable 指定一个IDeferredinstance类型属性的可取值的类型,这个值必须包含完整的包名。
12 NonCommittingChangeEvent 用来标记一个变量,当某个特定事件发生时暂时不会派发change事件,避免这个变量发生更改
13 RemoteClass 用来设定一个AS类,使该类与一个服务器端的类实现映射,以便于数据转换,服务器端的类可以是PHP、ASP.NET、Java类或ColdFusion CFC等
14 Style 用来为组件定义样式属性
15 Transient 当一个AS对象与服务器端对象简历映射关系后,被[Transient]元数据标签标识的属性会从发送到服务器的数据中忽略掉。

三、特殊的元数据标签

这些特殊元数据标签和前面介绍的常见元数据标签相比,其差别是,特殊元数据标签在Flex帮助文档中没有出现,而仅供Flex内部使用,而这些标签中的一部分对开发者来所还是有一定的实际意义,故在本节中做个小结。

序号 标签名 功能
1 AccessibilityClass 用来再组件中实现辅助功能
2 ChangeEvent 用来定义某个属性发生变化时派发的事件
3 CollapseWhiteSpace 用来清除多余的空白字符,可以在TextInput、TextArea、Label等组件的类定义中看到这个标签
4 Frame 1、允许在时间轴上包含多个帧;

2、取得类的定义,类似于import或getDefinitionByName

5 Mixin 希望让某些代码先于其它代码执行,可以使用[Mixin]元数据标签,并创建init()方法
6 PercentProxy 使一个属性能够以百分比的形式接受数据
7 ResourceBundle 用来定义资源包,通常可以使用该标签为Flex应用程序添加多语言资源包,包含文本、图片及SWF文件等多种资源。
8 SWF 用来在AS项目中定义SWF文件的参数。它必须放在项目主类的类定义之前。

属性 类型 说明
width Number 设置SWF文件的宽度
height Number 设置SWF文件的高度
widthPercent Number 以百分比的形式设置SWF文件的宽度
heightPercent Number 以百分比的形式设置SWF文件的高度
scriptRecursionLimit Number 设置Flash Player或AIR中循环的最大深度。默认为1000
ScriptTimeLimit Number 设置超时时间,超时后Flash Player或AIR会停止处理并退出。以秒为单位,默认值为60
frameRate Number 设置帧频,默认值为24
backgroundColor Number 设置背景色
pageTitle String 设置浏览器中显示的标题

[转载]android UI进阶之可延伸的图像

mikel阅读(911)

[转载]android UI进阶之可延伸的图像 – noTice520 – 博客园.

今天就是除夕啦,抽空来写写博客。写完就去吃年夜饭啦。在这祝大家事业有成,身体健康!

今天来讲下Android UI设计中常要用到的可延伸图像。除了最基本的png,jpg与gif三种格式外,Android还有一种叫做Nine-Patch的可延伸图 像.9.png。和png格式不同的是,他会随着属性物的大小变化而改变自己的大小,从而来适应属性物的大小。这个特点,在我们平常的UI设计中是非常实 用的。最常见的一个图片做按钮背景,来适配字体大小,这时候,你会发现,这种可延伸图像非常的好用。

下面就来讲讲如何使用吧。Android SDK提供了一个工具来制造这种图像。在android sdk的tools目录下,有个draw9patch.bat的文件,就是他啦。运行它,将我们的图片拖进去,就会得到如下的样子。

左边窗口的是原始图形,你可以通过画面下的Zoom来调整大小,Pathc scale调整png图像最大可以延伸的倍率,延伸后的结果就显示在右边的窗口。在一个像素里点击,在图形边缘绘制线条来定义可延伸的部分。在这边需要注 意的是,你必须至少在图形的上边缘和左边缘画线,否则将图片导入后工程会报错。调整好以后,点击File -save,注意需要保存为*.9.png格式。在程序中的使用和普通图片完全一样,这就不讲了。

来看下例子

给出xml中的代码,其中popup为9.png格式,popup1为普通png格式

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#C5CCD4FF" > <Button android:id="@+id/small" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Small" android:textSize="10sp" android:textColor="#ffffffff" android:background="@drawable/popup1" /> <Button android:id="@+id/large" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="LargeNotFit" android:textSize="40sp" android:textColor="#ffffffff" android:background="@drawable/popup1" /> <Button android:id="@+id/largefit" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="LargeFit" android:textSize="40sp" android:textColor="#ffffffff" android:background="@drawable/popup" /> </LinearLayout>

看下运行的效果

合理的使用Nine—Patch图像,在UI设计中是非常重要的。相信大家都能体会到。今天就到这啦,吃年夜饭去啦。

[转载]Silverlight 游戏开发小技巧:轨迹跟随效果

mikel阅读(1097)

[转载]Silverlight 游戏开发小技巧:轨迹跟随效果 – Silvery Night – 博客园.

我们通常在游戏中有各种各样的粒子效果,其中有一种就是跟随鼠标发生的轨迹动画,在鼠标经过的地方会产生一些特效,这种方式我们在粒子当中经常使用,本篇使用一个简单的例子再次将粒子系统改善,更加精简更加高效。

如果有兴趣的同学可以读一下以前的

Silverlight C# 游戏开发:绚丽的粒子特效-粒子效果(二)

但是这今次实现方法更加简单更加偏向于美术设计师,因为这次的编程将基本上在Blend中实现。

在继续往下看之前,你需要了解MouseMove事件,以及基本的控件、故事板的知识,只有这样在下面的操作中比较容易理解,而我们目的效果是,当鼠标经过一个地方,会出现闪烁的小星星。

首先先建立工程,然后建立一个用户控件UserControl,我们起名为FlashPoint,顾名思义这是一个闪烁的点点。

image

可能建立方式各有不同,但是我们只是需要一个没有填充色的LayoutRoot,然后在最左上为中心画一个我们想要的图形,当然了,你也可以使用图片。

1

现在创建一个故事板动画,同样动画的是怎么编排可以看各自的需求设计。

2

在下面的例子中实现一个闪烁出现的小方块然后渐隐消失掉。

3

选择需要动画的目标,添加一个关键帧,然后找到这个目标控件的变换属性(Transform),设置为0,0,这样在动画播放的最开始是完全不可见。

4

然后拖动故事板的时间线,在1秒的位置上增加另外一个关键帧,将关键帧上的XY放缩变换设置为1,1,设置位置就是第一个关键帧的地方。

5

现在选择关键帧,我们可以使用Silverlight自带的缓冲(Easing)方法,制作闪烁出现的效果,我们选择Elastic Out的方法,你可以播放一下看看感觉:)

6

好了,最后在1.5秒的位置设置新的关键帧,将不透明度设置成0%,再次播放一下,你会看到一个突然蹦出的小方块,然后消失掉的故事板动画。

9

好了,截止现在基本的粒子控件制作完毕,现在打开MainPage控件将背景设置成为灰色或者渐变色,因为上面的小方块是白色的,为了更好看,并且把LayoutRoot从Grid改成Canvas,这样可以方便我们对位置的操作,

10

下面就是Coding时间了,在这里我将弄几个小的技巧增加程序的便利性。

在FlashPoint.cs的类构造中,添加一行代码,就是故事板的开始动画,比如说:Storyboard1.Begin();

现在打开VS或者在Blend里修改.cs文件,在MainPage.cs中加入鼠标的移动事件或者重写本身的OnMouseMove方法,我用的是重写:)

Code Snippet
  1. public partial class MainPage : UserControl
  2. {
  3. public MainPage()
  4. {
  5. InitializeComponent();
  6. }
  7. protected override void OnMouseMove(MouseEventArgs e)
  8. {
  9. var pos = e.GetPosition(this);
  10. var point = new FlashPoint();
  11. LayoutRoot.Children.Add(point);
  12. Canvas.SetLeft(point,pos.X);
  13. Canvas.SetTop(point, pos.Y);
  14. base.OnMouseMove(e);
  15. }
  16. }

好了,现在运行一下看看,

11

但是现在仍有很多的问题,比如这么new出来的对象一定是非常多的,那么怎么才能正确的将控件对象移除掉呢?在我的另外一片有关于粒子文章中,使用 的方式是计时器的循环运算,然后反着来遍历,将符合条件的移除掉,这是因为粒子具有很不确定的因素,所以需要遍历处理,更何况还涉及到轨迹的计算逻辑,虽 然说我们比较明确动画的时间长度,可以使用计时器从集合中RemoveAt,而这次我们将使用一个更加简便的方法解决这个小瑕疵。请看下面的代码

Code Snippet
  1. {
  2. public FlashPoint()
  3. {
  4. InitializeComponent();
  5. Storyboard1.Completed += new EventHandler(Storyboard1_Completed);
  6. Storyboard1.Begin();
  7. }
  8. void Storyboard1_Completed(object sender, EventArgs e)
  9. {
  10. Storyboard1.Completed -= Storyboard1_Completed;
  11. var parent = this.Parent as Panel;
  12. if (parent != null)
  13. parent.Children.Remove(this);
  14. }
  15. }

这是我们自定义的控件FlashPoint的构造和事件代码,在构造函数中注册动画完成事件,然后在完成的部分实现我们的具体逻辑,我们目的是让父一级移除我们,所以先要判定是否是一个标准的Panel的容器,Panel类请参看官方Silverlight文档。

本工程的源代码下载如下:点击直接下载

实际展示效果:

获取 Microsoft Silverlight

[转载]android UI进阶之style和theme的使用

mikel阅读(1139)

[转载]android UI进阶之style和theme的使用 – noTice520 – 博客园.

今天来和大家分享一下Android中UI设计里面常会用到的style和theme。

首先,style和theme都是资源,Android提供了很多这样的默认资源。你可以来使用它们。同时你也可以自己定义style和 theme。这非常的简单,只需要在res/values/这个路径里面新建一个.xml文件,而且他的根节点必须 是<resources>.对 每一个style和theme,给<style>element增加一个全局唯一的名字,也可以选择增加一个父类属性,我们写的style和 theme就会继承这个父类的属性。style和theme的定义格式相同。不过style是针对view来说的,比如 TextView,EditText这些,而theme必须针对整个activity或者整个程序,你必须在AndroidManifest.xml中 的<application>或者<activity>中定义。

先来看看style,比如如下一段代码:

<?xml version="1.0" encoding="utf-8"?> <resources> <style name="CodeFont" parent="@android:style/TextAppearance.Medium"> <item name="android:layout_width">fill_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:textColor">#00FF00</item> <item name="android:typeface">monospace</item> </style> </resources>

可以看到这个style的名字为CodeFont。 parent后面就是父类的style, CodeFont继承这个父类的属性。可以看到这个父类的style是android中默认的,你也可以继承你自定义的style,这时候不需要再写 parent属性,而是使用ContFont.red这样的方式,而且你可以继续继承,写成ContFont.red.small。 接下来每一个item定义一个属性。定义属性的最好方法就是在api文档里找到这个view的xml属性,比如在EditText中有InputType 这个属性,那么在你的style里面你就可以来定义它。

这样一个style就写好了。

使用也非常简单,我们只要在写我们的view时,加入style标签就可以了,就像这样

<TextView style="@style/CodeFont" android:text="@string/hello" />

下面讲讲主题,前面已经说了。主题需要在AndroidManifest.xml中注册。如果你想整个程序都使用这个主题,你可以这样写

<application android:theme="@style/CustomTheme">

如果你只需要在某个Activity中使用主题,那么只要在Activity标签中写入android:theme=就可以了,android有很多好的默认主题,比如

<activity android:theme="@android:style/Theme.Dialog">

这就会使你的整个Activity变成一个对话框形式,或者,如果你希望背景是透明的,可以这样写

<activity android:theme="@android:style/Theme.Translucent">

同样的我们也可以继承父类theme,写法和style一样,就不赘述了。当然,和style一样,你也可以自己定义一个theme,写个例子

代码

<?xml version="1.0" encoding="utf-8"?> <resources> <style name="CustomTheme"> <item name="android:windowNoTitle">true</item> <item name="windowFrame">@drawable/screen_frame</item> <item name="windowBackground">@drawable/screen_background_white</item> <item name="panelForegroundColor">#FF000000</item> <item name="panelBackgroundColor">#FFFFFFFF</item> <item name="panelTextColor">?panelForegroundColor</item> <item name="panelTextSize">14</item> <item name="menuItemTextColor">?panelTextColor</item> <item name="menuItemTextSize">?panelTextSize</item> </style> </resources>

如果你要在java代码中加载主题的话,只要用setTheme(R.style.CustomTheme)就可以了,不过记得一定要在初始化任何view之前,比如一定要放在我们常用的setContentView()之前。通常,我们不建议这么做。

在写程序布局的时候,熟练的使用style和theme是非常必要和有益的。今天就到这里啦。有什么问题可以留言交流。大家春节快乐!

[转载]性能分析之工具篇-Fiddler简单使用

mikel阅读(1000)

[转载]性能分析之工具篇-Fiddler简单使用 – 淘宝API-.net开发-数据库优化-seo优化-技术是手艺,语言是工具,驰骋在代码的海洋中 – 博客园.

微博,2010年兴起的浪潮,打开t.qq.comt.sohu.comt.sina.com等首页,看到留言不停的滚动,哇噻,信息实时显示。我们在感慨之余,想到了他们是如何实现的,是否是用异步来实时获取信息,那样的话,服务器的压力很大,如何解决呢。

带着以上的疑问,对上述三家微博进行了简单的跟踪测试,用的不是什么新鲜工具,做开发的,特别是web开发的,一定知道Fiddler,对于Fiddler的介绍留到其他的文章中说吧,或者google下,网络中有大量关于它的介绍与使用。

好了,现在开始进行测试。

1. 腾讯微博t.qq.com

a.打开Fiddler工具

b.打开浏览器(IEfirefoxcrome都可以)

为了更好的展示,我用的是firefox

这时切换到Fiddler,如图

根据观察,t.qq.com是一次请求最多10条在页面显示,当显示到这次获取数据的最后一条时,会再次通过 /login/loginNews.php请求数据,让我们看看返回来的数据

看到右侧显示 的数据了吗,返回的是json格式的数据,在fiddler下不是很好观察,请看下firefox下的记录

2.搜狐微博 t.sohu.com

查看Fiddler,除第一次载入页面时的记录,没有任何请求消息数据的记录,同样,firefox也没有记录,那我们就用肉眼看了,在页面上看“正在发生”的滚动数据,过了数次滚动,数据开始重复。

3.新浪微博t.sina.com

和搜狐微博一样,载入后不能请求数据。

4.总结

[转载]SQL2005的XML学习笔记

mikel阅读(1288)

[转载]SQL2005的XML学习笔记 – flyfaraway – 博客园.

1、记录到XML变量
declare @cxml xml
set @cxml=(select * from zd_storeP for XML RAW(‘store’),ROOT(‘stores’))
select @cxml
2、XML到记录集
方法一:用OPENXML  90000条记录速度测试,22s,16s,16s
declare @cxml xml,@nxml int
set @cxml=(select * from zd_storeP for XML RAW(‘store’),ROOT(‘stores’)) –大概1s
select @cxml
exec sp_xml_preparedocument @nxml OUTPUT, @cxml  –大概3-4s
select ls.* from openxml(@nxml,’/stores/store’) with (nID INT,cName VARCHAR(20)) as ls
方法二:用XML的nodes属性  90000条记录速度测试,8s,8s,8s
declare @cxml xml
set @cxml=(select * from zd_storeP for XML RAW,ROOT) –默认ROOT为root,RAW为row
select ls.row.value(‘@nID[1]’,’INT’) as nID,ls.row.value(‘@cName[1]’,’varchar(50)’) as cName
from @cxml.nodes(‘/root/row’) as ls(row)
3、SQL2005存储过程中,传入XML参数
方法一:对应上面的一
CREATE PROCEDURE [dbo].[testxml1]
@cxml xml
AS
BEGIN
SET NOCOUNT ON;
declare @nxml int
exec sp_xml_preparedocument @nxml OUTPUT, @cxml
select ls.* from openxml(@nxml,’/VFPData/row’) with (nid INT,cname VARCHAR(50)) as ls
END
方法二:对应上面的二
create PROCEDURE [dbo].[testxml2]
@cxml xml
AS
BEGIN
SET NOCOUNT ON;
select ls.row.value(‘@nid[1]’,’INT’) as nID,ls.row.value(‘@cname[1]’,’varchar(50)’) as cName
from @cxml.nodes(‘/VFPData/row’) as ls(row)
END
注意:如果XML是VFP的CursorToXML生成的,需要注意:
(1)with (nid INT,cname VARCHAR(50)) 括号中列名必须用小写,因为CursorToXML生成的XML格式字段强制了小写;
(2)VFP中,CursorToXML(“cursor1″,”lcCxml”,3,16) 最后的参数必须用16,表示采用游标的代码页,否则乱码了。
下面的例子,阐述了另一种语法,它能够在XML变量中直接立即更新表。
1 CREATE PROCEDURE [dbo].[UpdateInventory2]
2 (
3    @x XML
4 )
5 AS
6
7 SET NOCOUNT ON
8
9 /*
10    This version of the stored procedure has a slightly enhanced version of the
11    TSQL code. This version updates the table directly from the XML variable,
12    rather than converting the XML data to a view.
13 */
14
15 UPDATE Inventory SET
16    stock = stock + x.item.value(‘@Qty[1]’,’INT’)
17 FROM Inventory inv
18 INNER JOIN @x.nodes(‘//items/item’) x(item) ON
19    (x.item.value(‘@ItemNumber[1]’,’varchar(20)’) = inv.ItemNumber)
20
21 RETURN
4、SQL2005存储过程返回XML,在VFP中XMLToCursor()
— =============================================
— Author: <Author,,Name>
— Create date: <Create Date,,>
— Description: <测试返回XML变量,然后在VFP中还原游标>
— =============================================
alter PROCEDURE testxml3
@cxml varchar(max) output
AS
BEGIN
SET NOCOUNT ON;
declare @cxml2 xml
set @cxml2=(select * from zd_storeP for XML RAW(‘row’),ROOT(‘VFPData’))
set @cxml=cast(@cxml2 as varchar(max))
return
END
注意:output参数不能为xml类型,而要为varchar类型,否则VFP的XMLToCursor会报错的。

[转载]Ajax为主的应用不需要ASP.NET MVC

mikel阅读(1185)

[转载]Ajax为主的应用不需要ASP.NET MVC – dudu – 博客园.

博客园在开发中至今还未使用ASP.NET MVC,似乎有点跟不上时代了,但是否采用一项技术,关键的是这个技术是否能真正解决实际问题。

这篇文章将以我们正在开发的博客园新版站内短消息功能为例,说明一下不需要ASP.NET MVC的理由。

功能简介:短消息收件箱,显示当前用户短消息列表。

用到的主要技术:Master Page, JQueryJQuery插件Templates, WCF。

Templates是由微软开发的jQuery插件,功能类似于ASP.NET的Repeater控件,Templates将被整合进jQuery 1.5成为核心组件。想更多了解Templates,推荐阅读Microsoft and jQuery

主要代码:

1. ASP.NET页面文件:

<%@ Page Title="" Language="C#" MasterPageFile="msg.master" %> <asp:Content ID="ContentMain" ContentPlaceHolderID="cphMain" Runat="Server"> <div id="msg_list"> </div> <script id="contentTmpl" type="text/x-jquery-tmpl"> <div class="msg_item"> <div class="msg_sender">${SenderName}</div> <div class="msg_title">${Subject}</div> <div class="msg_sendtime">${SendTime}</div> </div> </script> <script type="text/javascript"> GetMsgList(1, 30); </script> </asp:Content>

上面的代码通过GetMsgList方法a调用WCF获取短消息列表,然后显示在msg_list中。

这里用Master Page是为了重用HTML的公用元素,不然,只要一个html文件就够了,.aspx都不需要,为什么还要用ASP.NET MVC?对于这样的ajax应用,只要加载一个简单的html页面,接下来就交给js了,就是需要MVC,也是在js中进行,ASP.NET MVC无用武之处。

不用ASP.NET MVC,这一个理由足矣。

为了完整地介绍这个示例,继续我们的代码。

2. js代码:

a) js文件引用

<script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script> <script type="text/javascript" src="http://common.cnblogs.com/script/json2.js"></script> <script type="text/javascript" src="js/jquery.tmpl.min.js"></script> <script type="text/javascript" src="js/msg.js"></script>

json2.js是用于将js对象转换为json。

jQuery.tmpl.min.js是jQuery插件Templates的引用文件。

msg.js中定义了GetMsgList方法。

b) GetMsgList方法定义:

function GetMsgList(pageIndex, pageSize) { var msgQuery = {} msgQuery.PageIndex = pageIndex; msgQuery.PageSize = pageSize; $.ajaxSettings.type = 'post'; $.ajaxSettings.dataType = 'json'; $.ajaxSettings.contentType = 'application/json'; $.ajaxSettings.url = '/services/AjaxMsgService.svc/GetMsgList'; $.ajaxSettings.data = '{"msgQuery":' + JSON.stringify(msgQuery) + '}'; $.ajaxSettings.success = function (data) { $("#contentTmpl").tmpl(data.d).appendTo("#msg_list"); }; $.ajax(); }

“/services/AjaxMsgService.svc”——调用的WCF服务,jQuery如何调用WCF请参考抛弃WebService,在.NET4中用 jQuery 调用 WCF

“JSON.stringify(msgQuery)”——将msgQuery对象转换为json,WCF中对应的方法是 “GetMsgList(SiteMsgQuery msgQuery)”,达到的效果是将js对象作为参数传给了WCF方法。在之前文章的评论中有人说jQuery调用.ashx更方便,从这里的效果看, 我觉得jQuery调用WCF(或.asmx)更方便。

$(“#contentTmpl”).tmpl(data.d).appendTo(“#msg_list”);——将WCF返回的数据绑定至contentTmpl(见代码一)形成列表,并加载至msg_list,完成数据的显示。这就是Templates插件的作用。

3. WCF代码:

[ServiceContract] [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] public class AjaxMsgService { [OperationContract] public SiteMsg[] GetMsgList(SiteMsgQuery msgQuery) { int spaceUserId = Util.GetCurrentUser(HttpContext.Current).SpaceUserID; msgQuery.SiteMsg = new SiteMsg() { RecipientSpaceUserId = spaceUserId }; //调用后台的WCF服务 MsgServiceClient client = new MsgServiceClient(); SiteMsg[] siteMsgList = client.GetMsgList(msgQuery); try { client.Close(); } catch { client.Abort(); } return siteMsgList; } }

这里的WCF相当于一个中转站,它又去调用后台另外一台服务器上的WCF服务,获取短消息数据,以json格式返回给客户端js。

示例介绍完毕,不足之处欢迎大家指出。

总结

随着越来越多的Web应用使用Ajax,ASP.NET MVC施展身手的空间越来越小。

现在唯一阻碍Ajax使用的是搜索引擎不能索引Ajax加载的内容,但这个情况一定会改观,Ajax是趋势,Web App是趋势。

[转载]android UI进阶之仿iphone的tab效果(二)

mikel阅读(974)

[转载]android UI进阶之仿iphone的tab效果(二) – noTice520 – 博客园.

今天把这个仿iphone效果的tab写完,这个例子参考国外rolle3k共享的代码,感谢rolle3k。

上篇博客我们写了一个Itab类,介绍了背景的绘制和简单的一个图的贴图方法。我们继续来完成Itab这个类,同时把他放到 MainAcitvity(继承Activity)这个类内部,这样,整个程序只需一个类就可以了。(上篇博客例子运行需要再建一个Activity的子 类来作为lanucher)。废话不多说了,看看代码

1 public static class iTab extends View 2 { 3 private Paint mPaint;//背景画笔 4   private Paint mActiveTextPaint;//选中 5   private Paint mInactiveTextPaint;//未选中 6   private ArrayList<TabMember> mTabMembers;//tab成员 7   private int mActiveTab; 8 private OnTabClickListener mOnTabClickListener = null; 9 10 public iTab( Context context, AttributeSet attrs ) //构造器,在里面初始化画笔 11   { 12 super(context, attrs); 13 14 mTabMembers = new ArrayList<MainActivity.iTab.TabMember>( ); 15 16 mPaint = new Paint( ); 17 mActiveTextPaint = new Paint( ); 18 mInactiveTextPaint = new Paint( ); 19 20 mPaint.setStyle( Paint.Style.FILL ); 21 mPaint.setColor( 0xFFFFFF00 ); 22 mPaint.setAntiAlias(true); 23 24 mActiveTextPaint.setTextAlign( Align.CENTER ); 25 mActiveTextPaint.setTextSize( 12 ); 26 mActiveTextPaint.setColor( 0xFFFFFFFF ); 27 mActiveTextPaint.setAntiAlias(true); 28 29 30 mInactiveTextPaint.setTextAlign( Align.CENTER ); 31 mInactiveTextPaint.setTextSize( 12 ); 32 mInactiveTextPaint.setColor( 0xFF999999 ); 33 mInactiveTextPaint.setAntiAlias(true); 34 mActiveTab = 0; 35 36 } 37 38 @Override 39 protected void onDraw( Canvas canvas ) 40 { 41 super.onDraw( canvas ); 42 43 Rect r = new Rect( ); 44 this.getDrawingRect( r ); 45 46 // 计算每个标签能使用多少像素 47   int singleTabWidth = r.right / ( mTabMembers.size( ) != 0 ? mTabMembers.size( ) : 1 ); 48 49 50 // 绘制背景 51   canvas.drawColor( 0xFF000000 ); 52 mPaint.setColor( 0xFF434343 ); 53 canvas.drawLine( r.left, r.top + 1, r.right, r.top + 1, mPaint ); 54 55 int color = 46; 56 57 for( int i = 0; i < 24; i++ ) 58 { 59 mPaint.setARGB( 255, color, color, color ); 60 canvas.drawRect( r.left, r.top + i + 1, r.right, r.top + i + 2, mPaint ); 61 color--; 62 } 63 64 // 绘制每一个tab 65   for( int i = 0; i < mTabMembers.size( ); i++ ) 66 { 67 TabMember tabMember = mTabMembers.get( i ); 68 69 Bitmap icon = BitmapFactory.decodeResource( getResources( ), tabMember.getIconResourceId( ) ); 70 Bitmap iconColored = Bitmap.createBitmap( icon.getWidth(), icon.getHeight(), Bitmap.Config.ARGB_8888 ); 71 Paint p = new Paint( Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG); 72 Canvas iconCanvas = new Canvas( ); 73 iconCanvas.setBitmap( iconColored ); 74 75 if( mActiveTab == i )//为已选中的tab绘制一个白蓝的渐变色,未选中的绘制一个白灰的渐变色 76 { 77 p.setShader( new LinearGradient( 0, 0, icon.getWidth(), icon.getHeight(), 78 0xFFFFFFFF, 0xFF54C7E1, Shader.TileMode.CLAMP ) ); 79 } 80 else { 81 p.setShader( new LinearGradient( 0, 0, icon.getWidth(), icon.getHeight(), 82 0xFFA2A2A2, 0xFF5F5F5F, Shader.TileMode.CLAMP ) ); 83 } 84 85 iconCanvas.drawRect( 0, 0, icon.getWidth( ), icon.getHeight( ), p ); 86 87 for( int x = 0; x < icon.getWidth(); x++ ) 88 { 89 for( int y = 0; y < icon.getHeight(); y++ ) 90 { 91 if( ( icon.getPixel(x, y) & 0xFF000000 ) == 0 ) 92 { 93 iconColored.setPixel( x, y, 0x00000000 ); 94 } 95 } 96 } 97 98 // 计算tab图片的位置 99 int tabImgX = singleTabWidth * i + ( singleTabWidth / 2 - icon.getWidth( ) / 2 ); 100 101 // 绘制tab图片 选中的和未选中的 102 if( mActiveTab == i ) 103 { 104 mPaint.setARGB( 37, 255, 255, 255 ); 105 canvas.drawRoundRect( new RectF( r.left + singleTabWidth * i + 3, r.top + 3, 106 r.left + singleTabWidth * ( i + 1 ) - 3, r.bottom - 2 ), 5, 5, mPaint ); 107 canvas.drawBitmap( iconColored, tabImgX , r.top + 5, null ); 108 canvas.drawText( tabMember.getText( ), 109 singleTabWidth * i + ( singleTabWidth / 2), r.bottom - 2, mActiveTextPaint ); 110 } else 111 { 112 canvas.drawBitmap( iconColored, tabImgX , r.top + 5, null ); 113 canvas.drawText( tabMember.getText( ), 114 singleTabWidth * i + ( singleTabWidth / 2), r.bottom - 2, mInactiveTextPaint ); 115 } 116 } 117 118 } 119 /* 120 * 触摸事件 121 */ 122 @Override 123 public boolean onTouchEvent( MotionEvent motionEvent ) 124 { 125 Rect r = new Rect( ); 126 this.getDrawingRect( r ); 127 float singleTabWidth = r.right / ( mTabMembers.size( ) != 0 ? mTabMembers.size( ) : 1 ); 128 129 int pressedTab = (int) ( ( motionEvent.getX( ) / singleTabWidth ) - ( motionEvent.getX( ) / singleTabWidth ) % 1 ); 130 131 mActiveTab = pressedTab; 132 133 if( this.mOnTabClickListener != null) 134 { 135 this.mOnTabClickListener.onTabClick( mTabMembers.get( pressedTab ).getId( ) ); 136 } 137 138 this.invalidate(); 139 140 return super.onTouchEvent( motionEvent ); 141 } 142 143 void addTabMember( TabMember tabMember ) 144 { 145 mTabMembers.add( tabMember ); 146 } 147 148 void setOnTabClickListener( OnTabClickListener onTabClickListener ) 149 { 150 mOnTabClickListener = onTabClickListener; 151 } 152 153 public static class TabMember//处理tab成员 154 { 155 protected int mId; 156 protected String mText; 157 protected int mIconResourceId; 158 159 TabMember( int Id, String Text, int iconResourceId ) 160 { 161 mId = Id; 162 mIconResourceId = iconResourceId; 163 mText = Text; 164 } 165 166 public int getId( ) 167 { 168 return mId; 169 } 170 171 public String getText( ) 172 { 173 return mText; 174 } 175 176 public int getIconResourceId( ) 177 { 178 return mIconResourceId; 179 } 180 181 public void setText( String Text ) 182 { 183 mText = Text; 184 } 185 186 public void setIconResourceId( int iconResourceId ) 187 { 188 mIconResourceId = iconResourceId; 189 } 190 } 191 192 public static interface OnTabClickListener 193 { 194 public abstract void onTabClick( int tabId ); 195 } 196 }

这是MainActivity这个类里面的两个static类,看我写的注释和上篇博客的内容应该都能理解。其中还定义了触摸事件,实现点击tab出现不同布局的效果。接下来我们只需要在我们的layout上添加就可以了,我们继续写一个内部类

1 public static class iRelativeLayout extends RelativeLayout//注意,还是声明为静态 2 { 3 private Paint mPaint; 4 private Rect mRect; 5 6 public iRelativeLayout( Context context, AttributeSet attrs ) 7 { 8 super(context, attrs); 9 10 mRect = new Rect( ); 11 mPaint = new Paint( ); 12 13 mPaint.setStyle( Paint.Style.FILL_AND_STROKE ); 14 mPaint.setColor( 0xFFCBD2D8 ); 15 } 16 17 @Override 18 protected void onDraw( Canvas canvas ) 19 { 20 super.onDraw( canvas ); 21 22 canvas.drawColor( 0xFFC5CCD4 ); 23 24 this.getDrawingRect( mRect ); 25 26 for( int i = 0; i < mRect.right; i += 7 )//绘制屏幕背景的纹理效果 27 { 28 canvas.drawRect( mRect.left + i, mRect.top, mRect.left + i + 2, mRect.bottom, mPaint ); 29 } 30 31 } 32 } 33 34 35 private static final int TAB_HIGHLIGHT = 1; 36 private static final int TAB_CHAT = 2; 37 private static final int TAB_LOOPBACK = 3; 38 private static final int TAB_REDO = 4; 39 private iTab mTabs; 40 private LinearLayout mTabLayout_One; 41 private LinearLayout mTabLayout_Two; 42 private LinearLayout mTabLayout_Three; 43 private LinearLayout mTabLayout_Four; 44 private LinearLayout mTabLayout_Five; 45 46 @Override 47 public void onCreate(Bundle savedInstanceState) 48 { 49 super.onCreate(savedInstanceState); 50 setContentView(R.layout.main); 51 52 53 mTabs = (iTab) this.findViewById( R.id.Tabs ); 54 mTabLayout_One = (LinearLayout) this.findViewById( R.id.TabLayout_One ); 55 mTabLayout_Two = (LinearLayout) this.findViewById( R.id.TabLayout_Two ); 56 mTabLayout_Three = (LinearLayout) this.findViewById( R.id.TabLayout_Three ); 57 mTabLayout_Four = (LinearLayout) this.findViewById( R.id.TabLayout_Four ); 58 mTabLayout_Five = (LinearLayout) this.findViewById( R.id.TabLayout_Four );//偷个懒,不写第五个界面啦 59 60 mTabs.addTabMember( new TabMember( TAB_HIGHLIGHT, "精选", R.drawable.jingxuan ) ); 61 mTabs.addTabMember( new TabMember( TAB_CHAT, "类别", R.drawable.cat ) ); 62 mTabs.addTabMember( new TabMember( TAB_LOOPBACK, "25大排行榜", R.drawable.rank ) ); 63 mTabs.addTabMember( new TabMember( TAB_REDO, "搜索", R.drawable.search ) ); 64 mTabs.addTabMember( new TabMember( TAB_REDO, "更新", R.drawable.download ) );//添加tab 65 66 /*初始显示第一个界面*/ 67 mTabLayout_One.setVisibility( View.VISIBLE ); 68 mTabLayout_Two.setVisibility( View.GONE ); 69 mTabLayout_Three.setVisibility( View.GONE ); 70 mTabLayout_Four.setVisibility( View.GONE ); 71 72 mTabs.setOnTabClickListener( new OnTabClickListener( ) { 73 @Override 74 public void onTabClick( int tabId )//实现点击事件 75 { 76 if( tabId == TAB_HIGHLIGHT ) 77 { 78 mTabLayout_One.setVisibility( View.VISIBLE ); 79 mTabLayout_Two.setVisibility( View.GONE ); 80 mTabLayout_Three.setVisibility( View.GONE ); 81 mTabLayout_Four.setVisibility( View.GONE ); 82 } else if( tabId == TAB_CHAT ) 83 { 84 mTabLayout_One.setVisibility( View.GONE ); 85 mTabLayout_Two.setVisibility( View.VISIBLE ); 86 mTabLayout_Three.setVisibility( View.GONE ); 87 mTabLayout_Four.setVisibility( View.GONE ); 88 } else if( tabId == TAB_LOOPBACK ) 89 { 90 mTabLayout_One.setVisibility( View.GONE ); 91 mTabLayout_Two.setVisibility( View.GONE ); 92 mTabLayout_Three.setVisibility( View.VISIBLE ); 93 mTabLayout_Four.setVisibility( View.GONE ); 94 } else if( tabId == TAB_REDO ) 95 { 96 mTabLayout_One.setVisibility( View.GONE ); 97 mTabLayout_Two.setVisibility( View.GONE ); 98 mTabLayout_Three.setVisibility( View.GONE ); 99 mTabLayout_Four.setVisibility( View.VISIBLE ); 100 } 101 } 102 }); 103 }

其中onDraw()方法里面实现了背景的纹理效果,配合xml里面背景色的配置,实现了如下图所示的效果:

是不是非常漂亮呢。下面就是xml里面的配置了

代码

1 <?xml version="1.0" encoding="utf-8"?> 2 3 <view xmlns:android="http://schemas.android.com/apk/res/android" 4 class="com.notice520.MainActivity$iRelativeLayout" 5 android:orientation="vertical" 6 android:layout_width="fill_parent" 7 android:layout_height="fill_parent" 8 android:background = "#C5CCD4FF" 9 > 10 <LinearLayout 11 android:id = "@+id/TabLayout_One" 12 android:layout_width = "fill_parent" 13 android:layout_height = "fill_parent" 14 android:layout_above = "@+id/Tabs" 15 > 16 <ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content"> 17 <RelativeLayout 18 android:layout_width = "fill_parent" 19 android:layout_height = "fill_parent" 20 android:visibility = "visible" 21 > 22 <TextView 23 android:textColor="@android:color/black" 24 android:textSize="30sp" 25 android:layout_width = "wrap_content" 26 android:layout_height = "wrap_content" 27 android:text = "春节快乐!!" 28 /> 29 </RelativeLayout> 30 </ScrollView> 31 </LinearLayout> 32 33 <LinearLayout 34 android:id = "@+id/TabLayout_Two" 35 android:layout_width = "fill_parent" 36 android:layout_height = "fill_parent" 37 android:layout_above = "@+id/Tabs" 38 > 39 <ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content"> 40 <RelativeLayout 41 android:layout_width = "fill_parent" 42 android:layout_height = "fill_parent" 43 android:visibility = "visible" 44 android:layout_above = "@+id/Tabs" 45 > 46 <Button 47 android:layout_width = "wrap_content" 48 android:layout_height = "wrap_content" 49 android:text = "祝大家事业有成!" 50 android:textSize = "30sp" 51 /> 52 </RelativeLayout> 53 </ScrollView> 54 </LinearLayout> 55 <LinearLayout 56 android:id = "@+id/TabLayout_Three" 57 android:layout_width = "fill_parent" 58 android:layout_height = "fill_parent" 59 android:layout_above = "@+id/Tabs" 60 > 61 <ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content"> 62 <RelativeLayout 63 android:layout_width = "fill_parent" 64 android:layout_height = "fill_parent" 65 android:visibility = "visible" 66 android:layout_above = "@+id/Tabs" 67 > 68 <ImageView 69 70 android:layout_width = "fill_parent" 71 android:layout_height = "fill_parent" 72 android:src="@drawable/newq" 73 /> 74 </RelativeLayout> 75 </ScrollView> 76 </LinearLayout> 77 <LinearLayout 78 android:id = "@+id/TabLayout_Four" 79 android:layout_width = "fill_parent" 80 android:layout_height = "fill_parent" 81 android:layout_above = "@+id/Tabs" 82 > 83 <ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content"> 84 <RelativeLayout 85 android:id = "@+id/TabLayout_Four" 86 android:layout_width = "fill_parent" 87 android:layout_height = "fill_parent" 88 android:visibility = "visible" 89 android:layout_above = "@+id/Tabs" 90 > 91 <TextView 92 android:textColor="@android:color/black" 93 android:layout_width = "wrap_content" 94 android:layout_height = "wrap_content" 95 android:text = "很简单,是么" 96 /> 97 </RelativeLayout> 98 </ScrollView> 99 </LinearLayout> 100 <view 101 class="com.notice520.MainActivity$iTab" 102 android:id="@+id/Tabs" 103 android:layout_width = "fill_parent" 104 android:layout_height = "49px" 105 android:layout_alignParentBottom = "true" 106 /> 107 </view> 108

来看看最终的效果吧

是不是还不错呢  希望大家喜欢,有问题可以留言交流。

[转载]android UI进阶之仿iphone的tab效果

mikel阅读(1026)

[转载]android UI进阶之仿iphone的tab效果 – noTice520 – 博客园.

相信很多人都喜欢iphone 酷炫的界面,虽然Android的原生控件已经足够漂亮,但是往往不能满足用户越来越挑剔的眼光。其实,我们完全可以自己来绘制界面。今天我就来分享下做一个和iphone一样的tab界面。下面先来看下iphone上的效果

在开始之前,我们必须掌握最基础的,也就是Android中图形界面的绘制。首先讲下简单图形的绘制,这里我们就借绘制这个的背景部分来讲下吧。直接看代码

代码

1 public class Itab extends View { 2 3 private Paint mPaint; 4 5 public Itab(Context context, AttributeSet attrs) {//构造器,View下构造器有三种方式,在xml中配置必须实现这种方式 6   super(context, attrs); 7 8 } 9 10 @Override 11 protected void onDraw( Canvas canvas ) 12 { 13 14 super.onDraw( canvas ); 15 16 mPaint = new Paint( );//创建画笔 17 mPaint.setStyle( Paint.Style.FILL );//设置画笔 为实心 18 19 Rect r = new Rect( );//创建一个矩形 20 this.getDrawingRect( r ); 21 22 canvas.drawColor( 0xFF000000 ); 23 mPaint.setColor( 0xFF434343 ); 24 canvas.drawLine( r.left, r.top + 1, r.right, r.top + 1, mPaint );//绘制这个矩形图形 25 } 26 }

在xml中这样配置

代码

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#C5CCD4FF" > <com.notice520.itab.Itab android:id="@+id/Tabs" android:layout_width="fill_parent" android:layout_height = "49px" android:layout_alignParentBottom = "true" /> </RelativeLayout>

这样就会得到如下的效果,这显然不是我们想要的。

不过别着急,我们只要在onDraw()这个方法里面添加如下一段代码:

代码

int color = 46; for( int i = 0; i < 24; i++ ) { mPaint.setARGB( 255, color, color, color ); canvas.drawRect( r.left, r.top + i + 1, r.right, r.top + i + 2, mPaint ); color--; }

通过循环的绘制,我们就可以得到如下的效果

是不是很简单呢。图形绘制中还有一个比较重要的是贴图的绘制。同样这个例子,我们在这个背景上绘制一个图标,非常的简单,同样在onDraw()这个方法里面添加如下代码

代码

1 Bitmap icon = BitmapFactory.decodeResource( getResources( ), R.drawable.monitor ); 2 Paint p = new Paint( Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG); 3 p.setColor(Color.WHITE); 4 canvas.drawBitmap(icon, 10, 10, p);

代码非常简单,第一行获得图片资源,第二行第一一个画笔,同时打开抗锯齿和过滤,第三行设置画笔颜色,最后一行绘制图片。

来看看效果

还不错吧,当然要实现完全的tab效果,这还是远远不够的。今天就写到这吧,天冷啊,手都冻僵了,明天或者后天我再接着写,从而最终实现和iphone一样的tab,当然也有完全可以替代原生tab的功能。大家有什么问题可以留言讨论哈。