基于微软XAML技术的前端开发方法

使用XAML技术的平台目前包括WPF,Silverlight,Windows8等平台,未来的Windows10统一Windows App也使用XAML技术。

前端开发指通过可视化集成开发环境进行用户界面的设计和实现,结合手动编写XML界面描述代码,完成表现层开发的过程。基于XAML技术的前端开发使用的开发环境是Blend,输出是XAML代码。由于目前版本的Blend 2013存在一些问题,需要和VS配合使用。Blend 2015进行了重大改进,较好地解决了各种问题,但还未发布正式版。

下面总结一下理想的基于XAML技术的前端开发方法,部分流程在小范围内进行了尝试和推广,效果还可以,还需全面尝试和推广。

1.  该部分工作的输入是原型和需求。

原型推荐使用Axure RP或Prototyper(该软件对移动开发的支持较好)来制作,非程序员(如产品经理,UI设计师等),可以方便地绘制界面元素并使用可视化的方法表达交互逻辑。

2.  该部分工作的输出是,a. Style层代码,b. View层代码,c. 样式设计文档,d. View和ViewModel层契约-数据绑定接口文档(与后端人员协商编写)。

样式设计文档和数据绑定接口文档,推荐使用UML的方式表达,因为样式和数据皆为层次结构,存在继承和依赖关系,所以UML表达方式最为合适,推荐使用Visio绘制UML图。

Style层和View层主要使用Blend完成,尽量多地使用可视化开发方法,尽量减少手工编写XAML的工作量。

3.  分析原型,理解需求。

全部前端开发人员都要深入理解需求,连要做什么和为什么做都不清楚,是做不好界面设计和实现的。

4.  开会讨论全部原型和需求中的问题,确定无问题,达成一致的理解。

这里可以认为是第0个里程碑,即前端开发工作的起点,所有人都对需求有了一致的理解,尽量避免以后的争论。

5.  讨论整体设计风格和页面结构的设计。

在这个会上可以用头脑风暴的方式根据原型构思页面的细节展示方式,一般使用几层嵌套结构,确定使用几种标题,几种正文,几种主要字体,字号,颜色等。由一个人在Visio中用UML表达清楚,便于以后使用。这其实是制定了初步的标准,以后大家都要遵守。

6.  根据上一步的讨论,一部分人编写样式设计文档并完成Style层底层的代码。另一部分人针对关键部分出几张PS效果图。两部分要能对应。

7.  第一个里程碑,效果图确认

效果图需要领导确认。

8.  效果图修改,同时可创建全部空页面和样式文件的框架,描述各个文件都是干什么用的。

如果使用自定义的界面框架,需引入界面框架并依据框架搭建页面结构。

9.  完成全部页面的控件选用和外层布局(可加入颜色指示),可以把绘制了效果图的页面进一步美化,加入Border等元素,设置并抽取样式放入Style层。

10. 第二个里程碑,控件和布局确认。

需要后端人员确认所用控件以及预想的交互逻辑后端人员是否能够实现。

11.  修改控件问题和不合理的布局,优化布局。

12.  完成全部页面的控件内部模板,样例数据,绑定设置。

13.  第三个里程碑,页面确认。

此时包含全部功能的白页面已经完成,需要项目负责人确认所有页面的功能。

14.  数据绑定接口文档应该已经完成,页面已经可以和后端配合,联调测试。

15.  应用前期抽取的样式到全部页面,进一步设置并抽取样式到Style,完善Style层。

注意人员之间的配合,保证一致性。

16.  进入控件内部模板的修改阶段,深度修改并抽取Style。

可从易到难,内部模板的修改也要抽取样式,保证一致性。

17.  进一步完善控件内部模板的动态效果。

如鼠标移上,按下,选中等状态时的样式,可加入动画提升效果。

18.  可以完成预想的动画或考虑加入动画提升效果。

19.  如已接入真实数据,自测,互测,包括不同窗口大小,分辨率,不同真实数据下的情况,记录BUG。

20.  修改BUG。

时间: 2024-08-28 15:38:42

基于微软XAML技术的前端开发方法的相关文章

基于微软平台IIS/ASP.NET开发的大型网站有哪些呢?

首先说明一下,本文绝不是要说Microsoft平台多么好,多么牛.只是要提醒一些LAMP/JAVA平台下的同志们,微软平台不至于像你们说的,和想象的那么不堪!只是你们自己不知道而已.同时,也希望广大Microsoft同志们不要太妄自菲薄,有点信心!下面一一列举基于微软平台IIS/ASP.NET开发的大型网站有哪些:http://www.msn.com/ http://www.live.com/ (包括OneDrive.OneNote.Hotmail.Office365等等)http://www.

基于微软平台IIS/ASP.NET开发的大型网站有哪些?

首先说明一下,本文绝不是要说Microsoft平台多么好,多么牛.只是要提醒一些LAMP/Java平台下的同志们,微软平台不至于像你们说的,和想象的那么不堪!只是你们自己不知道而已.同时,也希望广大Microsoft同志们不要太妄自菲薄,有点信心! 下面一一列举几个: http://www.msn.com/  http://www.live.com/ (包括skydrive.hotmail等) http://www.bing.com/ 根据comScore今年11月份的统计,微软网站已经超过雅虎

现代化前端开发方法

使用babel将es6代码转化为es5 由于目前大多浏览器不支持ES6语法(firefox和chorme)支持,需要把ES6编译成ES5: - 使用nodejs的npm包管理器,安装babel-cli依赖: `npm install babel-cli --save-dev` 其中--save-dev作用是把依赖名称保存到package.json配置中 下载解释器依赖: npm install babel-preset-es2015 --save-dev 需要一个配置文件.babelrc 告诉我

基于Nodejs+Vue+Webpack的前端开发指导

//饿了么官网 https://element.eleme.cn/#/zh-CN/component/layout https://cn.vuejs.org/v2/guide/class-and-style.html 安装nodejs,上官网(https://nodejs.org/en/),根据OS系统版本下载.直接安装.安装过程,直接点击“”Next“”. (安装完毕,会自动添加 X:/program/nodejs目录到环境变量path中) 检查:      输入 node  -v,是否正常返

移动端前端开发调试

转自:http://yujiangshui.com/multidevice-frontend-debug/ 通过移动端使用 Web 服务的比率越来越大,例如淘宝今年双十一,移动端交易份额就达到 42.6%.由此可见,掌握移动端的前端开发和测试是非常有必要的. 由于之前做过大量有响应式需求的项目:今年(2014)年初也配合 Denis 的 微信机器人 做了一些用于微信的移动端项目:在淘宝 UED 实习的时候,也有参与过一个针对移动端的游戏的部分开发.所以算是积累了一点移动端调试的经验,在这里分享一

转载 移动端前端开发调试

以下内容转载自:http://yujiangshui.com/multidevice-frontend-debug/ 本文更新说明:第一版是在 2014-06-16 编写的,现在来看,内容不够分明,思路不够清晰,方法不够完全.故再次更新.补充.修改,力求可以作为移动端前端开发测试的基本参考文档.后续还会随着技术的进步不断调整和修改. ———————————————————— 通过移动端使用 Web 服务的比率越来越大,例如淘宝今年双十一,移动端交易份额就达到 42.6%.由此可见,掌握移动端的前

[转]关于Web前端开发,附:(百度web前端笔试面试题目)

关于Web前端及百度web前端笔试面试题目 随着各大互联网公司设立了Web前端开发工程师.设计工程师等职位,web前端越来越得到互联网企业的认可.而且其重视程度与地位也随着浏览器 端的富客户端的体现而日益提高. 眼前对HTML5的未来和走向,业内的预测是会和Flash.Silverlight等相结合,从而取代传统的客户端应用程序.而实现这个目标的客户端核 心工作是有Web前端工程师来完成的. 从另一个角度,对于web产品来说,交互和用户体验是产品的第一价值,这部分价值的体现就是在web前端.可以

web前端开发浅析

原文地址:http://www.cnblogs.com/babyzone2004/articles/1807381.html 摘 要:前端开发作为一项新的领域,经历的时间随然较短,却显示了强大的生命里,在web2.0时代,扮演着极其重要的角色,它是RIA时代的幕后推手,同时,也是数字媒体技术的应用之一.   关键词:数字媒体技术:web开发:前端开发,网页重构 什么是前端技术  前端技术包括JavaScript.ActionScript.CSS.xHTML等"传统"技术与Adobe R

爱创课堂2016年Angular.JS前端开发从入门到上手企业开发视频教程(完整版)

资源网盘: 2016年Angular.JS从入门到上手企业开发 链接: https://pan.baidu.com/s/1dF2vBzV 密码: 3hbk 免费学习网站地址:http://www.icketang.com/ AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事.AngularJS试图成为WEB应用中的一种客户端的解决