Tabs, advanced lists,
and form components
This chapter covers
Using the tabs component with individual navigation
histories
Displaying a list of items that can be toggled and
reordered
Setting up pull-to-refresh to reload data
Using several mobile form input controls
This chapter continues our look at many of Ionicrsquo;s features, and just like in chapter
4, yoursquo;ll build a complete app from start to finish. Yoursquo;ll build a mobile app to show
current market and historical chart data for Bitcoin in many different currencies.
The interface will leverage the Ionic tabs component to have three tabs: to view cur-
rent market rates, to view a chart of historical rates, and for currency management.
Yoursquo;ll learn more about how to have a navigation window inside each tab. This
is important when you want to create rich experiences with tabs that maintain the
user interface state between tabs. Also when you load data from an external source,
the data is cached even if you change between tabs, improving speed and avoiding
unnecessary HTTP requests.
94
Licensed to Mark Watson lt;nordickan@gmail.comgt;
95
What is Bitcoin?
Bitcoin is a popular digital cryptocurrency. It has a buy and sell price, much like a
stock or commodity, and is exchanged via digital marketplaces. For the purposes of
this chapter, yoursquo;re mostly interested in the current price of Bitcoin compared to tra-
ditional currencies (such as US dollars or Euros), and also in visualizing the price his-
tory over the past month.
You can read more about Bitcoin and the technology that powers it at https://
In figure 5.1 you see the app that yoursquo;ll create. Yoursquo;ll show the current rates for Bit-
coin in several currencies, which will compare the price over the past 24 hours to indi-
cate if itrsquo;s trending positively or negatively. Then yoursquo;ll show the historical price,
averaged hourly, over the past month. Yoursquo;ll use a third-party library to generate the
chart. Lastly, the currencies that are displayed in the app can be configured by tog-
gling them to show or hide them, as well as reordered so your favorite currencies are
at the top.
The entire example is available on GitHub at https://github.com/ionic-in-action/
chapter5. The example is also live at https://ionic-in-action-chapter5.herokuapp.com.
Current rates
bull; Show list of currencies
bull; Current rates and stats
bull; List component
bull; Pull-to-refresh
Historical chart
bull; Show chart for currency
bull; Use Highcharts
bull; Select box to change
Currencies
bull; List of currencies
bull; Toggle on or off
bull; List component
bull; Reorder currencies
Currency detail
bull; Display remaining stats
bull; List component
bull; Link to History Tab
bull; Same tab as parent
Figure 5.1 Bitcoin app example, with
three tabs and four views
Licensed to Mark Watson lt;nordickan@gmail.comgt;
96 CHAPTER 5 Tabs, advanced lists, and form components
5.1 Set up chapter project
You can follow along in this chapter either by creating a new Ionic app and adding the
code from the listings in this chapter, or by cloning the finished app from the Ionic in
Action GitHub repository and following along with each step. At the end, use ionic
serve to preview the app in a browser.
5.1.1 Create a new app and add code manually
To create a new project for the app using the Ionic command-line interface (CLI) util-
ity, open the command line and execute the following command (remember, you can
refer to chapter 2 if you need a refresher on how projects are set up):
$ ionic start chapter5 https://github.com/ionic-in-action/starter
$ cd chapter5
$ ionic serve
5.1.2 Clone the finished app and follow along
To check out the finished app and use Git, use the following command to clone the
repository and check out the first step:
$ git clone https://github.com/ionic-in-action/chapter5.git
$ cd chapter5
$ git checkout –f step1
$ ionic serve
5.2 ionTabs: adding tabs and navigation
Your first task is to add in the base navigational elements: the ionNavBar and
ionNavView components. ionNavBar will be useful to dynamically update the title bar
depending on the tab yoursquo;re using, and ionNavView will contain the tabs template.
You saw these two working in the chapter 4 app, so refer back if you need a refresher
on their purpose. If yoursquo;re following along using Git, you can check out the code for
this step:
$ git checkout –f step2
In this section yoursquo;ll implement the basic tabs and navigation, as you can see in figure 5.2.
In the following listing, yoursquo;ll update the www/index.html file with the navigation
components.
Listing 5.1 Adding ionNavBar and ionNavView (www/index.html)
lt;body ng-app='App'gt;
lt;
剩余内容已隐藏，支付完成后下载完整资料
选项卡、先进的列表和表单组件
本章涵盖了
使用选项卡组件与拥有历史的导航栏
显示一个项目列表，可以切换和重新排序
设置pull-to-refresh(下拉刷新)重新加载数据
使用移动表单输入控件
本章我们可以看到许多Ionic的功能，就像在第四章，您将从头开始构建一个完整的应用程序。您将构建一个这样的移动应用程序：显示当前市场和历史的比特币的图表数据。将利用Ionic选项卡的接口组件，有三个选项卡:查看最新租金市场利率，查看历史汇率的图表，对外汇管理。
您将了解更多关于如何在每个导航窗口中插入选项卡。当你想要根据选项卡创建丰富的体验与用户界面选项卡之间的联系时这是非常重要的。当你从外部源加载数据，即使你改变选项卡，数据也是会被缓存，同时也会提高速度和避免不必要的HTTP请求。
什么是比特币?
比特币是一种流行的数字货币，它拥有购买和出售的价值，就像股票或商品，通过数字市场交换.这一章的目的，,你最感兴趣的是比特币和当前的货币相比(如美元或欧元),和过去一个月的可视的价格。
你可以在https://bitcoin.org上了解更多关于比特币的知识
在图5.1中,您可以看到将创建的应用程序。你会显示对比特币和其他几种货币在24小时是上升的还是下降趋势的利率。然后你将展示历史价格,平均每小时、过去一个月的价格浮动，在这里您将使用第三方库生成图表。最后,在应用程序可以配置切换显示或隐藏它们,以及重新排序你最喜欢的货币到顶部。
整个例子可以在GitHub https://github.com/ionic-in-action/chapter5上查看，也可以在https://ionic-in-action-chapter5.herokuapp.com上查看。
当前的利率bull;
bull; 显示货币的列表
bull; 当前的利率和统计数据
bull; 列表组件
bull; 下拉刷新
历史图表
bull; 显示图表
bull; 使用Highcharts
bull; 下拉框改变
货币
bull; 货币列表
bull; 切换开关
bull; 列表组件
bull; 重新排序的货币
货币详情
bull; 显示剩余的数据
bull; 列表组件
bull; 链接到历史选项卡
bull; 与父元素相同的选项卡
图5.1 比特币app的三个选项、四个视图的例子
5.1建立项目工程
你可以跟随在本章通过创建一个新的ionic应用，并且添加这一章代码清单中的代码，或者跟随已经完成的Ionic in Action的GitHub中每一步进行克隆。最后，在浏览器中运行Ionic服务预览应用程序。
5.1.1创建一个新的应用程序，并手动添加代码
使用Ionic命令行界面（CLI）程序创建一个新的项目，打开命令行，执行以下命令（记住，如果你想要知道怎样设置项目，你可以参考第二章）
$ ionic start chapter5 https://github.com/ionic-in-action/starter
$ cd chapter5
$ ionic serve
5.1.2克隆并跟进完成后的应用程序
使用Git检查完成后的应用程序，使用以下命令克隆存储库并检查第一步
$ git clone https://github.com/ionic-in-action/chapter5.git
$ cd chapter5
$ git checkout –f step1
$ ionic serve
5.2 ionTabs: 添 加 选 项卡 和 导 航
你的首要任务是添加底部导航元素：ionNavBar和ionNavView组件。ionNavBar会根据您所使用的选项卡动态的更新标题栏，ionNavView将包含选项卡模板。你在第四章看到过这两个工程，如果你需要复习，可以参考下。如果使用Git，你可以通过这一步查看代码：
$ git checkout –f step2
在本节中，您将实现基本的导航和选项卡，如图5.2所示。
在以下清单，你将更新www/index.html文件的导航。
给body元素添加ngApp
lt;body ng-app='App'gt;
lt;ion-nav-bar class='bar-positive'gt;
添加ionNavBackButton显示隐藏导航
lt;ion-nav-back-button class='button-clear'gt;
添ionNavNBar，设置样式
lt;i class='ion-chevron-left'gt;lt;/igt; Back
lt;/ion-nav-back-buttongt;
lt;/ion-nav-bargt;
添加ionNavView组件
lt;ion-nav-viewgt;lt;/ion-nav-viewgt;
lt;/bodygt;
Navbar
(ionNavBar)
Tabs container
(ionTabs)
Individual tabs
(ionTab)
图5.2 app面板，基本导航，空白内容
在这个地方将组件添加到你的模板中，这样他们就能呈现在你的路由中。ionNavBackButton是用在当你有一个视图可以导航到子视图。现在你必须要声明将会出现的路由或者模板。
打开www/js/app.js文件，你可以声明你的第一路由。修改现有的内容添加到config()方法下:
Listing 5.2 Add first route to app config() method
angular.module(App， [ionic])
声明App模块和所包含deioni模块，声明config()方法和注入服务
.config(function ($stateProvider， $urlRouterProvider) {
$stateProvider
.state(tabs， {
建立默认路由
})
Url: /tabs，
templateUrl: views/tabs/tabs.html
});
$urlRouterProvider.otherwise(/tabs);
5.2.1 将选项卡容器和三个选项卡添加到应用程序中
在移动应用中，选项卡是非常普遍的，Ionic提供了一个功能丰富的组件让你能够快速创建它们。选项卡通常用于在几个视图之间进行视觉连接。虽然说实际中没有限制选项卡的使用数量，但是在有限的空间内2-5个选项卡为最佳。
选项卡可以在你的应用程序的任何地方使用，除了内部的ionContent指令，因为ionTabs在ionContent内会发生碰撞冲突。
Ionic提供了两个组件来构建自己的选项卡：ionTabs和ionTab。就像ionSlideBox一样，先声明ionTabs，然后在里面你可以根据需求创建很多的ionTab组件。在这种情况下，先声明三个选项卡。
选项卡可以有一个图标，一个标题，或者两者兼而有之。你可以通过应用不同的class名，修改标题和图标，在这种情况下，你可以在标题上应用一个类，让图标显示。选项卡有一个活跃和不活跃的图标状态，你可以根据选项卡的活跃状态应用不同的图标。
现在将你的模板选项卡添加到应用程序中。在www/views/tabs/下创建文件tabs.html，并填好以下的内容。
lt;ion-tabs class='tabs-icon-top tabs-positive'gt;
lt;ion-tab title='Rates' icon-on='ion-social-bitcoin' icon-off=
'ion-social-bitcoin-outline'gt;
lt;/ion-tabgt;
lt;ion-tab title='History' icon-on='ion-ios-analytics' icon-off=
'ion-ios-analytics-outline'gt;
lt;/ion-tabgt;
lt;ion-tab title='Currencies' icon-on='ion-ios-cog' icon-off=
'ion-ios-cog-outline'gt;
lt;/ion-tabgt;
lt;/ion-tabsgt;
选项卡拥有非常简单的声明，每个选项卡必须声明唯一的标题。现在你的选项卡是空白的，但是如果你在浏览器中预览应用程序，你会看到如图5.2所示的选项卡底部。你可以通过点击每个选项卡，改变选项卡的状态，看到图标的变化。
在你开始添加内容到您的选项卡之前，你需要设置每个选项卡的ionNavView。
5.3给每个选项卡添加ionNavView
现在你的选项卡是空白的，你应该使用额外的ionNavView组件加载你的组件。这将允许每个选项卡来维持自己的导航历史。它允许只对一个给定的选项卡应用后退按钮，而不是整个应用程序。
在图5.3中，你可以看到用户体验如何滑动每个有导航历史的选项卡。如果你在使用Git，你可以通过这一步查看代码。
$ git checkout –f step3
选项卡不需要个人视图
选项卡可以包含任何你想要放的内容在里面。一个选项卡界面，只有一个视图以及相应的选项卡显示，而其他的选项卡处于隐藏状态。这就像几张纸堆叠在一起，只有一张在上面，你可以在任何时刻移动一个较低的页面到顶部使其可见。
在每个选项卡中使用ionNavView元素带给你主要的好处是每个选项卡有自己的历史。现在就更像一堆书，最上面的书打开到一个特定的页面，而不是一堆论文，而且如果你交换书籍书签页面并返回完全相同的地方。
在本质上归结为如何使用选项，我觉得有两个主要方法：一是选项卡提供导航，和在单一视图内选项卡配件更多的内容。使用选项卡导航时，添加个别的视图是很有用的。本章的例子将演示这个用例。
在一个视图中使用选项卡呈现更多的内容不会受益于个别的视图。例如，你可以在天气应用程序中使用选项卡来显示当前的天气状况。因为当前的状态信息可能只会从API中加载一次，并且信息是逻辑相关联的，你可能需要使用选项卡将信息分割到多个简单的块中。设想一下，有三个选项卡：当前的天气状况、天气图和未来10天的天气预测。
我一般建议如果选项卡的内容有逻辑关系，应该将他们放在同一个视图和控制器中，那么你可能就不会想用个人的ionNavView组件了。
现在你要开始添加ionNavView组件到你的选项卡中。你必须给每一个选项卡定义一个名字，这样他们就能被识别。在你的Ionic应用中，你可以只有一个没有被命名的ionNavView组件，这个没有被命名的ionNavView通常是默认视图。你可以给每个选项卡赋予ui-sref属性，让选项卡的按钮能够有图标。正如你所预料的，这部分会看起来截然不同，但在图5.4所看到的，他会在头部条中显示标题。
打开www/views/tabs/tabs.html 的模板文件并更新，你就会看到下面的代码。大胆的更新这个模板吧。
lt;ion-tabs class='tabs-icon-top tabs-positive'gt;
lt;ion-tab title='Rates' icon-on='ion-social-bitcoin' icon-off=
'ion-social-bitcoin-outline' ui-sref='tabs.rates'gt;cb
'ion-ios-analytics-outline' ui-sref='tabs.history'gt;
lt;ion-nav-view name='history-tab'gt;lt;/ion-nav-viewgt;
lt;/ion-tabgt;
lt;ion-tab title='Currencies
剩余内容已隐藏，支付完成后下载完整资料
资料编号：[28946]，资料为PDF文档或Word文档，PDF文档可免费转换为Word
以上是毕业论文外文翻译，课题毕业论文、任务书、文献综述、开题报告、程序设计、图纸设计等资料可联系客服协助查找。
