用Montagejs创建自适应界面的WordPress客户端

Standard

MontageJS是一个开源HTML5框架,不同于目前流行的其他HTML5框架,MontageJS提供从IDE到framework完整的开发环境,目的在于提高团队协作效率,开发高效的跨平台Single Page HTML5 应用,相对于Google的angularJS, MontageJS提供效率更高的绑定机制以及运行机制。根据MontageJS开发团队的说法,MontageJS更加适合大型的,复杂的,有大量交互的应用,而angularJS更适合小型的以数据驱动为主的应用。 在下一篇文章中,我会详细说明MontageJS团队对MontageJS和angularJS的对比。

WordPress众所周知是全球非常流行的网站框架程序,而最常被人们使用的方式是搭建Blog网站,用Wordpress搭建的Blog支持数以千计的插件以及主题。我们今天不讨论Wodpress本身的功能,而是使用Wordpress提供的JSON API以及MontageJS框架创建一个全新的客户端,客户端可以适应各种尺寸的屏幕。在这篇教程中,我将解释创建该应用的全过程,并尽可能详细的说明应用中关于MontageJS的各种知识,如创建MontageJS控件,使用Binding机制,等等。你可以尝试跟着教程从头创建该应用,因为内容较多,我没有详细列出所有的文件内容,你需要从源代码中将需要的文件拷入你的新项目。

在开始教程之前,大家可以先从github下载源文件

源文件下载

运行Demo

Montagejs WordPress demo

要求

阅读本文章你需要具备基础的MontageJS知识,并能创建简单的MontageJS应用,如果你还不知道什么是Montagejs,请先阅读Getting Started with Montagejs 。

你可以使用任意的Wordpress Blog实现本文章的内容,请确保你的Wordpress装有JSON REST API 插件

Continue reading

Chrome 超级TV历史记录插件

Standard

440x280

 

Chrome 商店下载:

点击下载

自己是非常喜欢看电视剧的人,尤其是美剧。前前后后追了也有十几部了。在这过程中最让我郁闷和烦躁的事就是忘记看到多少集。现在各大网站都引进了不少的美剧,优酷,搜狐和迅雷特权(配合人人影视,dianying.fm或者其他视频下载站使用)是我比较常去的,也几乎能找到所有喜欢的剧集。

为了测底解决忘记剧集的问题,做了这个Chrome插件 (国内普通用户使用Chrome的貌似很少?)插件的作用很简单,可以跨网站的记录我的观看历史。比如我在迅雷看了几集《复仇》,隔了几星期又到优酷去看,在你打开播放页时顶部就会看到上次看过的提示。如下图

Continue reading

#HTML5 & JS TIPS# 合法解决纯JS+HTML5前端简单跨域与复杂跨域问题

Standard

随着云端技术的不断发展与普及,越来越多的团队或公司开始将应用开发的注意力转移到前端。当下最大的前端市场无疑是移动应用。但随着HTML与JS技术的不断发展,纯JavaScript + HTML5 的web应用数量也在不断增长。这就引发出在以往网站中不太会出现的情况。 JS跨域问题,因为纯JS前端并不一定和后端服务在同一台设备上,或者说他们也许并不通过同一域名访问,因为你的后端也许只是一个云服务。而你的前端也许正部署在一个使用者(开发者)的设备上。而目前所有的浏览器都不会允许你从域名abc向域名xyz发起AJAX访问。

Continue reading

《ActionScript 3.0 基础教程》

Standard

《ActionScript 3.0 基础教程》是本人在2012年底翻译的一本ActionScript 3.0的入门教学书籍,本书的原作者是美国互动设计领域知名专家Doug Winnie,去年底拿到500页的原书时还很犹豫要不要翻译它,翻译的确是一项枯燥切工作量大的任务。曾经与朋友们合作写过一本《Flash Builder 4快速入门》的电子文档,但与这本翻译比起来,写上两章内容实在是太轻松不过的事了。抱着锻炼自己毅力以及翻译一本书的确很牛的思想,我开始着手翻译工作。

Continue reading

创建适用于Flex移动应用的ComboBox (下拉菜单) 控件

Standard

Flex 4.5 已经发布一段时间了,它针对移动设备提供了大量优化过的组建。但是不知道为什么,忽略了ComboBox (下拉菜单)这个在传统Flex项目中出境率超高的组件。ios的SDK中也没有这个组建,好吧。我承认comboBox也许不符合apple定义的“移动设备操作规范”。但是咱的客户就爱使用ComboxBox. 咱就是要尽量保持移动设备应用与桌面应用风格保持一致。怎么办呢?

没有咱就造一个吧,首先问了万能的google. 别说还被我找到一个 《Hacking Flex 4.5 SDK add some ComboBox to Mobile development》http://www.igorcosta.org/?p=360,证明不止我一个人有这需求。

但是经过试用之后,发现一些问题,影响还比较大

1. 不能设置宽度,高度.
2. 控件不会根据设备自适应大小。
3. 选中值以后,Label没有及时更新
4. 略显简陋。
5. 有一些我想要修改的部分。

决定在他代码的基础上动手完善它,基于开源代码大家享的原则,文章最后我附上了我修改的版本。

Continue reading

Flex DataGrid/AdvancedDatagrid 性能优化技巧(1) — ItemRenderer

Standard

DataGrid和AdvancedDataGrid应该是Flex企业项目中最常用的组件了,今天开始写一些优化技巧,这些技巧可以有效提高DataGrid的运行速度。

ItemRenderer优化。

ItemRenderer是我们在扩展DataGrid单元格功能时需要扩展开发最多的东西,网络上有很多ItemRenderer的例子,但是大部分来说都是从方便开发的角度来使用的ItemRenderer而忽略了效率问题。那么到底何种情况是看似没问题,但实际上却牺牲了效率的呢?比如:

Continue reading

使用Flexformatter自动整理代码结构

Standard

规范整洁的源代码是很赏心悦目的东西,但是要在开发中人为的做到完美的代码规范是不太现实的,总会有写代码写到忘我的时候,以至于忽略一些东西。

推荐给大家一个Flash Buidler(Eclipse)插件Flexformatter。相当的强悍。可以帮我们

  1. 自动对mxml文件节点进行属性换行对齐
  2. 自动从static到public标签排序,标签内字母排序
  3. 各种风格代码自动生成
  4. 自动生成注释
  5. 等等

总之是很强大的辅助工具,强烈推荐在开发中使用。

使用方法:

  1. Flash Builder或Eclipse中安装http://flexformatter.googlecode.com/svn/trunk/FlexFormatter/FlexPrettyPrintCommandUpdateSite
  2. 安装好后重启Flash Builder就可以了。
  3. 在preference里会多了一个Flex Formatting. 打开这里进行各种调整。调整时可以看到有预览区域及时预览自动格式后的效果
  4. 展开Flex Formatting节点,下面可以看到有Auto Format。这里可以是设置是否需要在保存文件时自动格式化。需要的话,勾上两个checkbox. 选项选择Format就可以
  5. 在Flash Builder的tool bar上可以看到多了几个按钮。其中是执行格式化。没有选择自动格式化的话,需要手动点击这里来规范文件。

Continue reading

【录制视频】RIAMeeting在线课程20110324:Spring Actionscript + Cairngorm 3 简化项目结构

Standard

3月在Riameeting做的在线课程

课程概要:一般来说引入第三方项目框架都会不同程度的加大项目结构的“复杂性”,所以很多团队在设计项目结构时会完全采用自己的框架,我们在过往所谓大型Flex项目中(多国团队开发,周期大于1年)也不无例外的是不采用第三方框架,而根据实际需要制定项目基础架构,开发规则以及规范。这虽然避免了第三方框架中过多的配置以及不灵活,但实际上还是会遇到各种其他问题,比如随意性过大,过多依赖程序员自身素质等等。 那是否我们可以结合第三方框架与自己框架?使灵活性与规范性达到一个更好的平衡?这次的课程希望与大家共同探讨这方面的可能性。

课程PPT:  [download id=”34″]
Demo1: http://www.riameeting.com/examples/spring_cairngorm/Demo1/bin-release/SpringActionscriptMVC.html
Demo2:  http://www.riameeting.com/examples/spring_cairngorm/demo2/bin-release/SpringActionScriptMVC2.html

Flex on Android – android phone上的”微直播”, 基于Cirrus的p2p视频直播

Standard

这两天有时间的时候是一直玩flex hero。又写了一个基于Cirrus(原来叫Stratus)的视频直播demo, demo允许用户在android phone上向其他装有相同程序的android phone或电脑直播当前拍摄的视频,视频通过p2p传送。 下面是demo的演示视频

源代码里包括了android 直播端和电脑的播放端,原理这里就不再写了,感兴趣的朋友可以可以直接阅读源代码,以及参看以前的博文。

Flex 迷你教程 — 基于Stratus 2的P2P一对多视频直播 (NetGroup, Multicast实例)

源代码下载

  1. [download id=”32″]
  2. [download id=”33″]

Flash Builder Burrito Preview + Flex Hero(4.5)初体验,在Android上开发简单RSS阅读器

Standard

昨晚下载了Flash Builder Burrito Preview,今天迫不及待的开始尝鲜。想了半天决定还是以开发一个Rss阅读器来体验一下Flex Hero的魅力,原因是

  1. RSS阅读器很简单。
  2. 可以测试到一些应用型程序会涉及到的功能,比如Navigator, HTTPService, XML,HTML显示等。
  3. 也打算写这篇比Hello World内容丰富一些的入门教程

下面的视频是开发好以后实际在HTC Desire上运行的效果,速度还是很流畅的,HTML的显示也非常快速,没有拖沓的现象,体验的过程还是很愉快的.

准备工作

  1. 下载Flash Builder Burrito preview(http://labs.adobe.com/technologies/flashbuilder_burrito/), 它自带Flex Hero
  2. 安装
  3. 导入下面的源代码
  4. 运行。不需要有真机,Flash Builder Burrito自带有模拟器,可以模拟包括HTC, 三星在内的10几款Android phone, 非常够用了。

查看代码的时候以HelloWorl.mxml — >ArticleListView –> ArticleListViewController -> ArticleView ->ArticleViewController的顺序查看就好。写了简单的注释,如果有不明白的可以留言问我。

有一些需要注意的地方

  1. 每个页面是一个View控件。
  2. 往View控件里放东西不是addChild而是addElement
  3. MobileApplication里有firstView属性,作用是在起动时自动载入一个View
  4. 每个View都指向相同navigator对象。navigator用于view间的切换,使用push和pop

其他应该没有什么特别的地方了。

我觉得最有意思是Navigator的设计,这个东西和ios的Navigator很像,不过这里貌似它只能每次重新创建加入的View? 我想这应该是Adobe为内存考虑,每次最多只初始化一个View。ios就没有这个限制,让开发者更自由, 不知道Flex有没有方法让我保留想保留的View呢?

源代码下载

[download id=”31″]