当前位置:首页 > 开发 > Web前端 > 前端 > 正文

【翻译】Part 4 - FlickrView: Implementing SettingsView

发表于: 2014-05-29   作者:cyck02   来源:转载   浏览次数:
摘要: 英文原链接: http://dojotoolkit.org/documentation/tutorials/1.9/mobile/flickrview/part4/ 上一篇, FlickerView: Implementing FeedView,我们实现了Feed view,并且使用JSON请求回来的数据更新ScrollableView。这一篇我们关注Settings view如何处理各种输
英文原链接: http://dojotoolkit.org/documentation/tutorials/1.9/mobile/flickrview/part4/
上一篇, FlickerView: Implementing FeedView,我们实现了Feed view,并且使用JSON请求回来的数据更新ScrollableView。这一篇我们关注Settings view如何处理各种输入小部件(TextBox,Switch,RadioButton)的get和set以及使用跳转事件。
SettingsView属性
我们只需要保留一些小部件引用,以及当前语言选择。
return declare([ScrollableView], {
    feedView: '',
    tagInput: '',
    selectSwitch: '',
    selectedLanguage: '',
//...

SettingsView启动
跟我们在FeedView启动方法做的一样:调用父方法和初始化属性:
startup: function () {
    this.inherited(arguments);
    this.feedView = registry.byId("feed");
    this.tagInput = registry.byId("tags");
    this.selectSwitch = registry.byId("select");
    // ...
}

同时增加一些有用的getters和setters方法:
setTags: function (tags) {
    this.tagInput.set('value', tags);
},
getTags: function () {
    return this.tagInput.get('value');
},
setTagMode: function (tagmode) {
    this.selectSwitch.set('value', (tagmode === "all") ? "on" : "off");
},
getTagMode: function () {
    return (this.selectSwitch.get('value') === "on") ? "all" : "any";
}

dojox/mobile/switch有两个状态:on和off.我们准备将ALL设置对应on状态,ANY对应off状态。
继续启动方法,我们创建一个方法,当用户点击单选项时,保留选中的语言。dojo/on的这个强大特性可以实现这个功能: even delegation with selector.
// handler to record the selected feed language
this.on("[name=feedLanguage]:click", lang.hitch(this, function (e) {
    this.selectedLanguage = e.target.value;
}));

接下来做什么?
添加Done按钮的处理方法:
  • 编程实现转换回Feed View
  • 如果用户修改至少一个设置时,强制刷新视图

// handler to update search query parameters when done button is selected
registry.byId("doneButton").on("click", lang.hitch(this, function () {
    // we are done with the settings: transition to FeedView
    this.performTransition("feed");
    // check if anything changed in the setting view
    if (this.getTags() !== flickrview.QUERY.tags ||
        this.getTagMode() !== flickrview.QUERY.tagmode ||
        this.selectedLanguage !== flickrview.QUERY.lang) {
        // update QUERY
        flickrview.QUERY.tags = this.getTags();
        flickrview.QUERY.tagmode = this.getTagMode();
        flickrview.QUERY.lang = this.selectedLanguage;
        // force FeedView list refresh
        this.feedView.refresh()
    }
}));

因为编程实现的转换,所以要关掉小部件自身的自动转换功能,使用 moveTo:'#'
<!-- Settings view -->
<div id="settings"
    data-dojo-type="flickrview/SettingsView">
    <div data-dojo-type="dojox/mobile/Heading"
    data-dojo-props="fixed: 'top', label: 'Settings'">
        <span data-dojo-type="dojox/mobile/ToolBarButton"
            id="doneButton"
            data-dojo-props="label:'Done', moveTo:'#', transition:'none'" style="float:right;"></span>

最后一步就完成了!
响应转换事件
Dojo Mobile提供一组 转换相关的事件,还在在启动方法中,我们设置事件beforeTransitionIn的处理方法,在转换到设置视图时得到通知。
// handler to get notified before a transition to the current view starts
this.on("beforeTransitionIn", lang.hitch(this, function () {
    this.setTags(flickrview.QUERY.tags);
    this.setTagMode(flickrview.QUERY.tagmode);
    this.selectedLanguage = flickrview.QUERY.lang;
    registry.byId(this.selectedLanguage).set('checked', true);
}));

在这个处理方法中,我们更新设置视图上的输入小部件,从QUERY对象取到真实的值。
清理代码
这个教程的前面部分,我们首先创建了一个模型应用,这是一个最佳实践,从模型开始可以快速和简便地得到用户体验。
移除HTML中的模型代码
现在我们的应用已经完成,所以可以移除所有的静态模型代码了。这样可以减少代码量和得到整洁的代码。
  • FeedView:移除列表项。
  • DetailView:移除静态描述。

移除阻止缓存的元标签
移除开发时使用的阻止缓存标签,让应用允许缓存到设备。
<!-- prevent cache -->
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">

你成功了!
祝贺!你已经开发完成一个完整的Dojo Mobile应用程序,下一篇(本教程最后一篇)将告诉你怎么将应用产品化。
View Demo
下载源码
下载 Part 4 - FlickrView: Implementing SettingsView.


============================================
Part 4 END
next Part 5 - Build FlickrView for production

【翻译】Part 4 - FlickrView: Implementing SettingsView

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
英文原链接: http://dojotoolkit.org/documentation/tutorials/1.9/mobile/flickrview/part5/ 前面
英文原链接: http://dojotoolkit.org/documentation/tutorials/1.9/mobile/flickrview/part2/ 这个
<iframe align="top" marginwidth="0" marginheight="0" src="http://www.zealware.com/46860.htm
Silverlight Tutorial Part 4: Using Style Elements to Better Encapsulate Look and Feel This is
Form 这边介绍的from指的是HTML中的Form,前端HTML能给后台传数据有这么三种方式 url form hyperlin
前言 这是我第一次翻译技术性的文章,若有不正之处,请同行们多加指正。我个人认为翻译没有必要逐字
本文翻译自Robin Hewitt的《Seeing With OpenCV - A Five-Part Series》。 正如标题所表达的那样,通
原贴链接: http://weblogs.asp.net/scottgu/archive/2007/07/11/linq-to-sql-part-4-updating-our-
原贴链接: http://weblogs.asp.net/scottgu/archive/2007/07/11/linq-to-sql-part-4-updating-our-
【筛选亮点】 Process Monitor提供了一些方式来配置筛选器和高亮显示。 筛选器的包括与排除 您能够
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号