分类目录归档:Mobile

Mobile文章资源

用CSS3移除点击交互元素的高亮背景

我在移动设备上测试前面教程的图表实例时发现,当手指点击图表出现ToolTip时,图表容器的会出现一个半透明的高亮背景。设备浏览器不一样,颜色也不一样,很是影响交互效果。试了一下用Javascript来移除,花了一天时间也没弄出来,最后不得不Google了,又花了几个小时,终于用CSS3搞定了。

代码如下:

-webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;

新增了禁止选择文本的功能。其中,前二句对WebKit内核浏览器(Safari、Chrome、iPhone、iPad、Android等)有效,后二句对Gecko内核的浏览器(Firefox等)有效。

看来真该花些时间学学CSS3了。

在Flex手机应用中使用PopUpManager创建Alert窗口

Flex手机应用中没有Alert组件。今天在Flex Developer Center看到一篇文章:http://www.adobe.com/devnet/flex/articles/flex-mobile-development-tips-tricks-pt4.html,觉得用SkinnablePopUpContainer来弹出Alert窗口确实简单,但这种做法太过简单了,不能重用代码,旋转手机时Alert窗口不能重新居中,于是我花了点时间自己做了一个Mobile Alert组件。 继续阅读在Flex手机应用中使用PopUpManager创建Alert窗口

设计和开发手机应用程序的注意事项

构建适用于移动设备的应用程序不仅仅是将桌面应用程序缩小为不同的屏幕大小。通过Flex,您可以针对每个外观因素分别创建适当的用户界面,同时在手机、浏览器和桌面项目之间共享基础模型和数据访问代码。

移动触摸屏设备的应用程序与桌面和浏览器应用程序有以下不同之处:

为了通过触控输入实现简便的操作,手机组件通常具有比桌面或浏览器应用程序中更大的点击区域。

  • 在触摸屏设备上,滚动等操作的交互模式不同。
  • 由于屏幕区域有限,因此手机应用程序通常设计为在屏幕上同时只显示少量的用户界面。
  • 用户界面的设计必须考虑不同设备之间屏幕分辨率的差异。
  • 相较于桌面设备,手机和平板电脑的CPU和GPU性能更为有限。
  • 由于移动设备上可用内存有限,因此应用程序必须注意节约内存。
  • 手机应用程序可以随时(例如在接听电话或短信时)退出和重新启动。

将Flex 4.5预览版手机应用迁移到正式版的问题

如果你以前用Hero或Flash Builder Burrito开发过手机应用,现在迁移到Flex 4.5正式版上会运行不了。总结了一下,主要有以下问题:

  • 应用描述文件中,AIR的版本从2.5升级2.6;
  • spark.components.MobileApplication被spark.components.ViewNavigatorApplication代替;
  • spark.components.TabbedMobileApplication被spark.components.TabbedViewNavigatorApplication代替;
  • spark.components.MobileIconItemRenderer被now spark.components.IconItemRenderer代替;
  • MobileIconItemRenderer的decoratorClass属性被IconItemRenderericonField的属性代替;
  • FlexEvent.REMOVINGView被NavigatorEvent.REMOVIN代替;
  • FlexEvent.VIEW_ACTIVATE被ViewNavigatorEvent.VIEW_ACTIVATE代替;
  • spark.components.supportClasses.MobileTextField被spark.components.supportClasses.StyleableTextField代替;
  • spark.effects.ViewTransition被spark.transitions.ViewTransitionBase代
  • spark.effects.SlideViewTransition被spark.transitions.SlideViewTransition代替;
  • lineBreak不再是Spark DataGrid的属性;

对于数据持有化,有以下变化:

  • sessionCachingEnabled属性被persistNavigatorState属性代替;
  • FlexEvent.APPLICATION_PERSISTING被FlexEvent.NAVIGATOR_STATE_SAVING代替;
  • FlexEvent.APPLICATION_RESTORING被FlexEvent.NAVIGATOR_STATE_LOADING代替;