zoukankan      html  css  js  c++  java
  • [翻译]Popfly系列课程5 – 列表处理

    [翻译]Popfly系列课程5 – 列表处理:使用Popfly使用Popfly制作一个个性化的天气地图

    许多网站,新闻广播,及报纸使用气象地图来显示气温并预报这些选择的城市的天气。

    在本课中,你将学习两种不同的技术来构建你自定义的气象地图,在其中你可以绘制你选择的城市的气温及天气预报信息。

    列表处理:使用Popfly使用Popfly制作一个个性化的天气地图

    本课的Professor Popfly Mashups参考:

    l WeatherMap1(http://www.popfly.com/users/professorpopfly/WeatherMap1)

    l WeatherMap2(http://www.popfly.com/users/professorpopfly/WeatherMap2)

    image

    学习成果

    完成本课学习后,你应该能够:

    l 创建并处理数据的列表。

    l 解释静态内容与动态内容之间的不同。

    l 将字符串按空格分隔来创建项目的列表。

    l 指定Popfly要处理其每一项的信息的列表

    l 将较短的字符串追加在一起来形成一个较长的字符串

    l 在地图上绘制经纬度信息

    概览

    许多网站,新闻广播,及报纸使用气象地图来显示气温并预报这些选择的城市的天气。在本课中,你将学习两种不同的技术处理数据来构建你自定义的气象地图,在其中你可以绘制你选择的城市的气温及天气预报信息。

    创建一个个性化地图需要收集每一个标记的城市的气象信息,然后将这些数据与地图混合。

    这是一个来自weather.com的地图的例子。

    image

    http://www.weather.com/maps/activity/travel/usweathertoday_large.html

    Weather.com将它们的气象地图作为一个服务提供给其它信息提供者。例如,USA Today使用来自weather.com的气象地图。查看位于http://www.usatoday.com/weather/temppic/wtempusa.htm的USA Today页面,仔细看地图的右下角,你会注意到USA Today网站直接由weather.com获取温度地图。

    你可以使用Popfly通过将你首选的城市与气象信息混搭在一起并绘制在地图上的方式来制作一个自定义的气象地图。下面是完成后的Popfly mashup的效果:

    image

    处理列表

    气象地图mashup将收集几个不同城市的气温值,并将它们存储在一个列表中(有时也称为一个数组)。一个列表或数组描述了一个包含相同类型信息的项目的集合。处理列表中每个项的方式基本一致:如向列表中添加一组测试数据。查找你投资组合中所有股票的最大值,查找一套百科全书的某一卷或者打印一个你联系人中没一个成员的自定义的表单。对于某个项的处理是一致的,唯一不同的是每个项目中指定的信息不同。

    Popfly足够智能,它可以知道一个块是否接受一个对象的数组作为输入,块会以相同的方式处理数组中的项目。

    数据提供者

    构建一个Popfly mashup的气象地图需要整合气象数据,经/纬度数据,以及一个地图。

    这里的实现使用了SebaGomez制作的Yahoo气象块。(在块搜索栏输入weather可以找到它。有不只一个名为Yahoo Weather Block的,确认你选择了正确的!)这个块有两个操作 – GetWeather与GetForecast。

    GetWeather操作返回一个YahooWeatherCondition对象,这个对象包含一个标题,纬度,经度,文本,温度,气象图片(云,太阳等),以及一个yahoo网站这个城市气象信息页面的链接。块中另一个方法GetForecast返回指定城市当前的天气及明天的气象预报以及一个yahoo网站这个城市气象信息页面的链接。气象地图mashup中不使用这个方法。

    image

    因为GetWeather操作同时提供经度与纬度信息,这使它成为制作气象预报地图的极佳选择。在地图上标记数据需要指定这些坐标。一些块为你提供经度纬度信息,然而其他情况在mashup中需要使用Popfly的GeoNames或YahooGeoCoding块来获得指定位置的经纬度信息。

    混搭气象数据

    一种设计这个mashup的方式是为每个城市使用独立的Yahoo气象块来在地图上标记,然后使用Combine块来合并气象结果,然后将Combine块的输出传递给Virtual Earth。参加:http://www.popfly.com/users/professorpopfly/WeatherMap1这里有Professor Popfly版本的气象地图mashup。

    image

    这个方法相当直接:如果你想要一个这三个城市的地图,你需要3个块。如果你想要一个有6个城市气象信息的地图,你需要6个块。

    Virtual Earth块将为使用合并块合并气象信息的每一个城市添加一个图钉。

    注意:Popfly的Combine块拥有将输出相同类型的信息的三个块的数据合并起来的方法。CombineUpto10块拥有将最多10个块的数据合并到一个列表的方法。

    我们将这个mashup的处理过程摘要如下:

    1. 查找city #1的气象信息。

    2. 查找city #1的气象信息。

    3. 查找city #1的气象信息。

    4. 合并这些结果到一个列表

    5. 针对合并结果中的每一个城市,

    a. 将一个图钉与气象信息置于一个地图上。

    静态数据 vs 动态数据

    第一个例子为每一个城市使用了一个不同的Yahoo Weather块。这需要在预览mashup前知道有多少城市需要在地图上标记。

    这个解决方案是“静态”的 – 然而气象预报是动态的,在预览期间城市获取的天气预报不会更新。此外,在地图上标记的城市的数目在mashup设计时就已决定,这是由于它是由组成mashup的Yahoo Weather块多的数目决定的。

    一个更通用的解决方案,就像Professor Popfly的 WeatherMap2这个mashup展示的,允许用户输入尽可能多的期望的邮政编码,并把所有这些城市标记在地图上。在这个例子中,城市的数目与城市本身在mashup实际运行之前都是不可知的。这种方式下,结果是动态的,由于mashup返回给用户的信息是基于用户的输入。

    一般化解决方案

    考虑下方的创建气象地图的Popfly的mashup。

    image

    就像这里展示的,User Input块的getText操作允许用户输入一系列的邮政编码,每两个之间由空格分隔。Popfly知道的仅是用户输入了一串字符,但是mashup设计器知道这些空格完成一个特殊的任务:它们将用户输入的邮政编码相分隔。

    为了Popfly可以以这样的方式解释空格 ,mashup在Text Util块中使用Split操作来以空格分隔用户的输入,创建一个邮政编码的列表作为结果。

    image

    因为Split操作的输出是一个列表,下一个块将要操作列表中的每一个项。Mashup将会迭代这个列表,对每一个项应用相同的处理。因为在运行mashup时Popfly动态创建邮政编码的列表。它可以适应用户指定的任意数目的邮政编码。Popfly知道列表中项的数目,所以它知道应该将如下步骤重复多少次,列表中每个邮政编码执行一次。

    我们将这个WeatherMap2的处理过程摘要如下:

    1. 由用户输入获得一个字符串格式的邮政编码信息。

    2. 将邮政编码信息按空格分隔,并将这些邮政编码信息放置于一个列表中。

    3. 针对列表中每一个邮政编码:

    a. 查找这个邮政编码代表地区的天气。

    b. 在地图上放置这个地区的气象信息与一个图钉。

    附:向插图的编号添加超链接

    如果你了解Html中超链接的标签,你可以在地图的编号处添加一个到Yahoo气象预报页面的超链接。要这样做,将YahooWeather的输出连接到一个TextAppender块,并使用下面的设置创建一个Html的超链接。使用TextAppender输出的字符串作为地图中编号的标题。

    image

    内幕:循环在哪发生?

    WeatherMap2描述的第三步的a与b组成了一个循环的主体(一系列的重复指令)来描述怎样处理每一个对象。如果你熟悉计算机编程,你可能学习过一种”for循环” – 其描述了怎样迭代列表中的每一个项。Popfly隐藏了接受列表作为输入的任何块的源代码的高级视图。例如,点击Virtual Earth块的Switch to an Advanced按钮你在块的源代码中会看到循环的实现。

    image

  • 相关阅读:
    leetcode Convert Sorted List to Binary Search Tree
    leetcode Convert Sorted Array to Binary Search Tree
    leetcode Binary Tree Level Order Traversal II
    leetcode Construct Binary Tree from Preorder and Inorder Traversal
    leetcode[105] Construct Binary Tree from Inorder and Postorder Traversal
    证明中序遍历O(n)
    leetcode Maximum Depth of Binary Tree
    限制 button 在 3 秒内不可重复点击
    HTML 和 CSS 画三角形和画多边行基本原理及实践
    在线前端 JS 或 HTML 或 CSS 编写 Demo 处 JSbin 与 jsFiddle 比较
  • 原文地址:https://www.cnblogs.com/lsxqw2004/p/1615996.html
Copyright © 2011-2022 走看看