Canonical Voices

UbuntuTouch

[原]怎么安装Ubuntu应用到Device中

这里我们先设想你们已经把手机刷到Ubuntu Touch最新软件。下面我们来介绍怎么生成Click package,并安装到手机中。开始这前,我们必须确保我们已经在手机上打开开发者模式”。关于如何打开开发者模式,可以参考文章“怎么在Ubuntu手机中打开开发者模式”。


1) 生成Click Package

  • 启动Ubuntu SDK
  • 打开已经创建的应用


  • 选择IDE左下方的目标架构为"Ubuntu Device (GCC armhf-ubuntu-sdk-14.10-utopic)"
  • 选中IDE 左侧的"Publish",在这个框中我们可以设置我们所需要的一些东西,比如说应用的Title等

  • 点击"Click Package",这样在和项目目录"test2"平行的一个目录中"build-test2-Ubuntu_Device_GCC_armhf_ubuntu_sdk_14_10_utopic-Default"生成一个叫做"com.ubuntu.developer.liu-xiao-guo.test2_0.1_all.click"的click文件。这个即是可以安装到手机的文件。

2)安装Click文件包到手机上

启动一个Terminal。我们可以通过如下的指令来完成安装的工作

$ adb push com.ubuntu.developer.liu-xiao-guo.test2_0.1_all.click /tmp
$ adb shell "sudo -iu phablet pkcon --allow-untrusted install-local /tmp/com.ubuntu.developer.liu-xiao-guo.test2_0.1_all.click"



我们也可以直接登陆手机然后再在手机中安装:

$adb push *.click /home/phablet
$adb shell
$pkcon --allow-untrusted install-local *.click




这样在手机中的"应用”页面就可以找到我们的应用了。如果找不到的话,可以通过搜索的方式寻找它:



3)通过当前项目生成click包

我们也可以同过IDE的集成环境来完成应用的安装。具体的步骤如下:
  • 选中当前的项目(对纯QML项目,无C++代码)
  • 点击右键


我们可以在项目当前目录退后的一个目录找到所需要的click包。比如对我们的项目”balloon"来说,在目录build-balloon-UbuntuSDK_for_armhf_GCC_ubuntu_sdk_14_10_utopic-default里可以找到"com.ubuntu.developer.liu-xiao-guo.balloon_0.1_all.click"包。一旦生成这个包,我们可以按上述讲的方法来安装我们生成的应用。


4)查看Click安装包中的内容。

有时我们想查看一下Click安装包中到底有那些的内容,我们可以打入如下的命令:

$ click contents com.ubuntu.developer.liu-xiao-guo.test2_0.1_all.click


我们也可以通过如下的命令来得到click包里所有的文件。把我下面的click包文件名换成你自己的包的名字即可以

dpkg -x myapp.click unpacked
file unpacked/path/to/your/binary

通过”file"命令来查看文件的特性,比如:

/tmp/unpacked/lib/arm-linux-gnueabihf/bin/filemanager: ELF 32-bit LSB  executable, ARM, . . 

可以看到确实,该文件是一个ARM的可执行文件。



关于click命令还有其他的很多的功能,我们可以通过:

$ click --help

来查看它的具体的用法。

5) 登陆到手机

我们可以通过如下的命令来登陆到手机

$ adb shell



等进入手机后,我们就可以做任何我们可以做的事。如果果需要在手机上安装软件的话,我们需要在Terminal中输入如下的命令:



打入这样的命令后,手机会重启。等重新启动后,就可以在手机中直接安装软件了。千万要记得安装的密码就是我们手机启动设置的密码

6) 通过Terminal命令来生产click package


对有“CMakeLists.txt”的项目(通常是有C++代码的项目),我们也可以通过如下的命令来生产click package文件。首先我们使用Terminal进入到项目的目录(含有CMakeLists.txt)的目录,并键入如下的命令:

$click-buddy --arch armhf --framework ubuntu-sdk-14.10

一旦生产click package文件,我们就可以通过上面的方法来进行安装我们的应用了。


作者:UbuntuTouch 发表于2014-8-6 9:56:09 原文链接
阅读:163 评论:0 查看评论

Read more
UbuntuTouch

[原]怎么在Virtualbox下安装Ubuntu OS

在这篇文章中,我们来介绍如何安装VirtualBox及在VirtualBox下面安装最新的Ubuntu操作系统。


1)下载VirtualBox文件

首先我们到网站 https://www.virtualbox.org/wiki/Downloads下载最新的virtualbox。



根据自己的操作系统,在该网站上下载两样东西:

  • VirtualBox platform packages
  • VirtualBox 4.3.16 Oracle VM VirtualBox Extension Pack 
你可以永远下载最新的版本。

2)安装VirtualBox

我们在Ubuntu OS或Windows下,双击刚刚下载的VirtualBox文件,系统会自动帮我们调用软件帮我们安装。在Ubuntu OS下的界面如下:



至此,我们已经完成了对VirtualBox的安装。我们可以在Ubuntu中打开dash,找到VirtualBox的图标。在Windows上,我们也可以通过类似的方法找到相应的图标:



点击VirtualBox图标,我们可以看到如下的画面:



3) 下载Ubuntu Desktop Image

由于在Ubuntu for phone的开发中,我们将使用Utopic (14.10)来进行开发。我们在网址http://cdimage.ubuntu.com/daily-live/current/下载适合自己平台的image。这里我们选择utopic-desktop-amd64.iso。我们把image存放于我们电脑中的一个目录中。

4) 在VirtualBox中安装Ubuntu OS

打开"Oracle VM VirtualBox Manager",并点击“New”。可以看到如下的画面:



紧接着,我们根据我们电脑的实际情况给予一定的内存大小。



对于我们首次创建Ubuntu OS来说,我们选择“Create a virtual hard drive now”。如果你曾经创建过,并存有一个virtual hard drive的文件,你可以直接选择“Using an existing virtual hard drive file”。这样创建起来更块。



接下来:



再接下来,我们选择“Dynamically allocated”。



紧接着,我们选择至少有20G的硬盘容量以装载整个OS及SDK的安装:



这样就完成了我们初步的设置。下面我们来真正地来安装我们的Ubuntu OS系统。

点击VirtualBox中的“Start




我们选择我们刚才下载好的image:



再选择“Install Ubuntu



如果网络的情况好,可以在安装的过程中同时下载更新及第三方的软件。











紧接下来,就开始安装Ubuntu OS了:



最终,我们把Ubuntu系统安装好了。




5) 安装VirtualBox Extensions

我们发现当我们把Ubuntu OS安装好后,界面的分辨率是不对的。我们没法把它的分辨率调到我们的主屏幕的分辨率。这时我们需要安装Extensions。



首先,我们关掉Ubuntu OS。打开VirtualBox,并点击菜单中的“Preferences”:



点击"Extensions", 



重新启动我们创建的VM。



然后选择:



如果弹出一个对话框,就点击“运行”(Run)即可。如果没有对话框出现的话,寻找“Terminal



打开“Terminal”应用,并输入如下的命令:



等安装完后,我们重新启动VM。我们就可以看到全屏的Ubuntu系统了。它的分辨率和Host的分辨率应该是一样的。另外,如果在任何时候我们在VM中的系统升级而造成的分辨率下降或共享文件夹不可以工作,我们都可以通过上面的方法重新编译,并使得显示正常。

6) 设置VirtualBox


点击VirtualBox的“Settings”,选择“Display”进行设置。




点击“Shared Folders”,来设置可以在host及guest OS之间进行拷贝文件。



同时,我们在VM中的Ubuntu OS中的“Terminal”键入如下的命令:

$sudo usermod -a -G vboxsf username

这里“username"是用户名。具体操作如下:

 

在VM中打开文件浏览器,即可看见Host中被分享的文件夹。文件名通常会有一个“sf”开始,表示shared folder。




选择“General”,我们可以设置可以在host及guest系统之间进行拷贝。这个对我们有时非常有用。



这样我们基本上对VirtualBox的设置已经完成。当然,你们如果有兴趣的话,可以对更多的选项进行设置。


7) 安装中文输入法

我们知道中文输入法对开发中文的应用是非常有用的。我们可以参照文章“怎么在Ubuntu OS上面安装搜狗输入法及对Qt Creator的支持”进行输入法的设置。

8) 安装Ubuntu SDK

我们可以按照“Ubuntu SDK 安装”来安装我们的SDK来进行我们的Ubuntu应用开发了。


作者:UbuntuTouch 发表于2014-9-24 13:34:18 原文链接
阅读:211 评论:0 查看评论

Read more
UbuntuTouch

当我们刷最新的Ubuntu手机软件时,我们必须打开开发者模式。否则,当我们使用"adb"命令时,会出现如下的情况:




当手机和电脑连接后,不能查看到任何的device。当我们打开开发者模式后,我们可以看到如下的画面:



这里我们可以看到,我们通过"adb"命令可以看到连接到的device。


为了打开开发者模式,我们可以通过如下的步骤来操作:

1)打开“系统设置”应用




2) 选中“关于此手机”




3)点击“开发者模式”




4) 打开开关




一旦完成开发者模式的设置,我们就可以对手机进行部署了。

我们也可以通过“adb shell"命令对手机的文件系统进行操作




作者:UbuntuTouch 发表于2014-9-23 10:06:47 原文链接
阅读:277 评论:0 查看评论

Read more
UbuntuTouch

搜狗输入法是一个非常流行的输入法。在Ubuntu系统上没有默认安装这个输入法。在网上搜索,会发现不同的网站给出不同的方法。有些是工作的,有些不工作。现在,这里我把我的体会及安装步骤写下来。希望对开发者们有帮助。中文输入法对我们在Ubuntu Phone上开发中文的应用也是非常有帮助的。安装好中文输入法,我们可以在Qt Creator及Scope的测试工具中输入汉字来开发我们的中文应用。


1)首先下载“搜狗输入法for Linux”


我们可以到如下的网站“http://pinyin.sogou.com/linux/”下载最新发布的搜狗输入法。根据自己CPU的位数,下载合适的版本。



我们把文件存于默认的“Downloads”的文件夹中。当然你们也可以找一个自己喜欢的文件夹来存储这个debian文件。

2)安装搜狗输入法的debian文件

首先我们打开存放搜狗输入法的文件夹,并双击该文件:



我们可以看到系统会自动调用“Ubuntu Software Center”来安装已经下载的sogoupinyin软件。我们等待其安装完成。

3)安装Ubuntu OS的语言支持

我们首先来打开Ubuntu OS的设置。点击屏幕右上方的设置图标。



选择“System Settings..."。然后我们可以看到如下的画面:



点击“Language Support”图标。可以看大如下的画面:



如果你的系统还没有安装中文的话,请选择“Install/Remove Languages...”来安装对中文的支持。并同时选择“fcitx”。最终的画面为:



4) 配置搜狗中文输入法


重新启动系统,并点击带有“en”字样的屏幕右上方的图标:



点击屏幕右上角带有“en”字样的图标,或带有键盘的图标。


选择最后的一个“Text entry”项,并点击“+”来添加搜狗输入法。点击“OK"。重新启动系统即可。

5)添加对Qt的中文支持

启动Qt Creator。如果你在Qt Creator中输入汉字(使用Ctrl + Space组合键),没有中文显示的话,我们必须在termnial中输入如下的指令

$ sudo apt-get install fcitx-frontend-qt5

这样,重新启动Qt Creator。我们就可以输入汉字了。



6) 对Qt Creator 定制

在上面我们虽然已经完成了对中文输入法的安装。通常我们使用Ctrl+Space组合键来启动输入法的转变,可是,在Qt Creator中Ctrl+Space有一个特别的用途。具体描述如下:



当我们点击Ctrl+Space时,在QML文件中会显示该item的properties。对于大多数已经适应中文输入法切换的开发者来说,我们可以修改Qt Creator中的设置来改变这个功能的热键。



如果你不愿意自己修改Qt Creator中的设置,你也可以尝试修改切换输入法的方式。在Terminal中键入:

$ fcitx-config-gtk3

通过修改改应用中的设置达到目的!

至此。我们对Qt Creator的支持已经完成了。

作者:UbuntuTouch 发表于2014-9-23 11:45:26 原文链接
阅读:234 评论:0 查看评论

Read more
UbuntuTouch

在这篇文章里,我们将使用Ubuntu SDK从零开始来创建一个“中国天气”的Scope应用。通过这个过程,让开发者了解Scope在Ubuntu上的开发流程,以及对Scope有更深的认识。该应用完全使用std C++来完成的。更多关于Scope的知识,可以在网址:http://developer.ubuntu.com/scopes/。我们开发应用的最终显示图为:


        


1)启动Ubuntu SDK来创建一个基本的Scope应用


首先,我们来打开我们的Ubuntu SDK来创建一个最基本的应用。我们选择菜单“New file or Project”或使用热键“Ctrl + N”。我们选择“Unity Scope”模版。



我们给我们的应用一个名字“ChinaWeather”。我们同事也选择template的类型为“Scope using HTTP+JSON API”

   

接下来,我们也同时选择不同的Kit,这样我们都可以在他们上面编译并部署我们的应用。




我们直接在电脑的Desktop上运行我们的应用。为了确保我们能够在desktop上运行我们的scope并看到界面,我们可以点击“Projects”,并在Desktop中的“Run Configuration”中进行设置。确保选中“chinaweather”。




我们可以在“Unity Scope tool”中输入北京,我们就可以看到北京的天气的情况:



如果你能运行到这里,说明你的安装环境是没有问题的。如果有问题的话,请参阅我的Ubuntu SDK安装文章。这个最基本的应用其实没有什么内容。在下面的章节中我们来向这里添加一些东西以实现我们所需要的一些东西。

如果大家有手机的话,也可以直接在手机上运行看一下运行的效果。




2)完成我们的Client API代码


我们可以看到在项目的“src”目录下有两个目录:apiscope。api目录下的代码主要是为了来访问我们的web service来得到一个json或是xml的数据。这个数据可以在我们的Scope中进行利用并得到显示。下面我们来完成我们的工作。

首先我们需要在百度的开发者网站来申请我们的开发者账号。大家可以放问网站来申请账号。我们首先来做一个测试以确保我们的账号是可以工作的。按照文中所提到的,我们可以在浏览器中输入如下的地址:http://api.map.baidu.com/telematics/v3/weather?location=%E5%8C%97%E4%BA%AC&output=json&ak=5slgyqGDENN7Sy7pw29IUvrZ。我们可以得到如下的内容:

{"error":0,"status":"success","date":"2014-09-29","results":[{"currentCity":"北京","pm25":"42","index":[{"title":"穿衣","zs":"较冷","tipt":"穿衣指数","des":"建议着大衣、呢外套加毛衣、卫衣等服装。体弱者宜着厚外套、厚毛衣。因昼夜温差较大,注意增减衣服。"},{"title":"洗车","zs":"较不宜","tipt":"洗车指数","des":"较不宜洗车,未来一天无雨,风力较大,如果执意擦洗汽车,要做好蒙上污垢的心理准备。"},{"title":"旅游","zs":"适宜","tipt":"旅游指数","des":"天气较好,温度适宜,但风稍微有点大。这样的天气适宜旅游,您可以尽情地享受大自然的无限风光。"},{"title":"感冒","zs":"易发","tipt":"感冒指数","des":"昼夜温差大,风力较强,易发生感冒,请注意适当增减衣服,加强自我防护避免感冒。"},{"title":"运动","zs":"较适宜","tipt":"运动指数","des":"天气较好,但风力较大,推荐您进行室内运动,若在户外运动请注意避风保暖。"},{"title":"紫外线强度","zs":"弱","tipt":"紫外线强度指数","des":"紫外线强度较弱,建议出门前涂擦SPF在12-15之间、PA+的防晒护肤品。"}],"weather_data":[{"date":"周一 09月29日 (实时:23℃)","dayPictureUrl":"http://api.map.baidu.com/images/weather/day/duoyun.png","nightPictureUrl":"http://api.map.baidu.com/images/weather/night/qing.png","weather":"多云转晴","wind":"北风4-5级","temperature":"23 ~ 10℃"},{"date":"周二","dayPictureUrl":"http://api.map.baidu.com/images/weather/day/duoyun.png","nightPictureUrl":"http://api.map.baidu.com/images/weather/night/yin.png","weather":"多云转阴","wind":"微风","temperature":"18 ~ 12℃"},{"date":"周三","dayPictureUrl":"http://api.map.baidu.com/images/weather/day/zhenyu.png","nightPictureUrl":"http://api.map.baidu.com/images/weather/night/zhenyu.png","weather":"阵雨","wind":"微风","temperature":"15 ~ 12℃"},{"date":"周四","dayPictureUrl":"http://api.map.baidu.com/images/weather/day/duoyun.png","nightPictureUrl":"http://api.map.baidu.com/images/weather/night/duoyun.png","weather":"多云","wind":"微风","temperature":"23 ~ 13℃"}]}]}

首先,我们可以看到API是工作的。没有任何问题。显示的架构是json格式的。我们下面来修改架构中的“Client”类来完成对所得到的json格式的内容进行解析。首先,我们删除整个“Client::Current Client::weather(const string& query)”函数,因为这个是我们不需要的。为了能够编译,我们也删除或注释掉在query.cpp文件run函数中的部分内容,这样我们可以集中精力来完成这个Client API的设计。我们只留下最基本的部分以帮助我们来完成如下的设计。

void Query::run(sc::SearchReplyProxy const& reply) {
    try {
        // Start by getting information about the query
        const sc::CannedQuery &query(sc::SearchQueryBase::query());

        // Trim the query string of whitespace
        string query_string = alg::trim_copy(query.query_string());

        Client::Forecast forecast;
        if (query_string.empty()) {
            // If there is no search string, get the forecast for London
            forecast = client_.forecast_daily("北京");
        } else {
            // otherwise, get the forecast for the search string
            forecast = client_.forecast_daily(query_string);
        }

        // Register a category for the forecast
        auto forecast_cat = reply->register_category("forecast",
                                                     "7 day forecast", "", sc::CategoryRenderer(WEATHER_TEMPLATE));

        // For each of the forecast days
        for (const auto &weather : forecast.weather) {
            // Create a result
            sc::CategorisedResult res(forecast_cat);
        }

    } catch (domain_error &e) {
        // Handle exceptions being thrown by the client API
        cerr << e.what() << endl;
        reply->error(current_exception());
    }
}


为了能够正确地使用API,我们还必须在项目的设置文件中做一些设置。打开IDE项目中的api文件夹,并打开config.h文件。把它的内容修改为:

#ifndef API_CONFIG_H_
#define API_CONFIG_H_

#include <memory>
#include <string>

namespace api {

struct Config {
    typedef std::shared_ptr<Config> Ptr;

    /*
     * The root of all API request URLs
     */
    std::string apiroot { "http://api.map.baidu.com" };

    /*
     * The custom HTTP user agent string for this library
     */
    std::string user_agent { "chineweather 0.1; (foo)" };
};

}

#endif /* API_CONFIG_H_ */


为了适应我们的情况,我们把forecast_daily API修改为:

    virtual Forecast forecast_daily(const std::string &query);

这是因为我们的百度API中不需要天数。为了能够使得我们的数据结构和我们上面百度天气API接口返回的数据相匹配,我们对“client.h”做了修改:

class Client {
public:
    /**
     * Information about a City
     */
    struct City {
        unsigned int id;
        std::string name;
        std::string country;
    };

    /**
     * Weather information for a day.
     */
    struct Weather {
        std::string date;
        std::string dayPictureUrl;
        std::string nightPictureUrl;
        std::string weather;
        std::string wind;
        std::string temperature;
        std::string uri;
    };

    /**
     * A list of weather information
     */
    typedef std::deque<Weather> WeatherList;

    /**
     * Forecast information about a city
     */
    struct Forecast {
        City city;
        std::string pmIndex;
        WeatherList weather;
    };

    Client(Config::Ptr config);

    virtual ~Client() = default;

    /**
     * Get the weather forecast for the specified location and duration
     */
    virtual Forecast forecast_daily(const std::string &query);

    /**
     * Cancel any pending queries (this method can be called from a different thread)
     */
    virtual void cancel();

    virtual Config::Ptr config();

protected:
    void get(const core::net::Uri::Path &path,
             const core::net::Uri::QueryParameters ¶meters,
             Json::Value &root);

    /**
     * Progress callback that allows the query to cancel pending HTTP requests.
     */
    core::net::http::Request::Progress::Next progress_report(
            const core::net::http::Request::Progress& progress);

    /**
     * Hang onto the configuration information
     */
    Config::Ptr config_;

    /**
     * Thread-safe cancelled flag
     */
    std::atomic<bool> cancelled_;
};

}

特别值得注意的是,我们修改了weather的数据结构。这个和我们从百度API中返回的数据结构是一样的:

{"date":"周一 09月29日 (实时:23℃)","dayPictureUrl":"http://api.map.baidu.com/images/weather/day/duoyun.png","nightPictureUrl":"http://api.map.baidu.com/images/weather/night/qing.png","weather":"多云转晴","wind":"北风4-5级","temperature":"23 ~ 10℃"}

下面我们来看一看在client.cpp文件中的“get"函数。这是一个标准的函数接口。它是通过http来访问所需要访问输入参数所提供的地址,并得到相应的内容。这个内容可以是json或xml形式的。这个函数,我们不需要做任何的改变。

void Client::get(const net::Uri::Path &path, const net::Uri::QueryParameters &parameters, json::Value &root)

我们来修改forecast_daily函数,如下:

Client::Forecast Client::forecast_daily(const string& query) {
    json::Value root;

    // Build a URI and get the contents
    // The fist parameter forms the path part of the URI.
    // The second parameter forms the CGI parameters.
    get( { "telematics", "v3", "weather" },
    { { "location", query },
      { "output", "json" }, { "ak", "DdzwVcsGMoYpeg5xQlAFrXQt" } }, root);
    // e.g. http://api.map.baidu.com/telematics/v3/weather?location=%1&output=json&ak=DdzwVcsGMoYpeg5xQlAFrXQt

    Forecast result;

    //    // Iterate through the weather data
    string date = root["date"].asString();
    cerr << "date: "  << date << endl;

    int indexofYear = date.find_first_of("-", 0);
    cerr << "indexofYear: " << indexofYear << endl;

    string year = date.substr(0, indexofYear);
    cerr << "year: " << year << endl;

    int indexofMonth = date.find("-", indexofYear+1);
    cerr << "indexofMonth: " << indexofMonth << endl;

    string month = date.substr(indexofYear + 1, indexofMonth-indexofYear-1);
    cerr << "month: " << month << endl;

    string day = date.substr(indexofMonth +1, date.length()-indexofMonth);
    cerr << "day: " << day << endl;

    std::locale::global(std::locale(""));

    // current date/time based on current system
    time_t now = time(0);

    tm *localtm = localtime(&now);

    localtm->tm_year = stoi( year ) - 1900;
    localtm->tm_mon = stoi( month );
    localtm->tm_mday = stoi( day );

    json::Value results = root["results"];
    for (json::ArrayIndex index = 0; index < results.size(); ++index) {
        json::Value item = results.get(index, json::Value());

        // Extract the first weather item
        result.city.name = item["currentCity"].asString();

        cerr << "city name: " << result.city.name << endl;

        result.pmIndex = item["pm25"].asString();
        cerr << "PM index: " << result.pmIndex  << endl;

        json::Value weathers = item["weather_data"];

        for ( json::ArrayIndex i = 0; i < weathers.size(); i ++ ) {
            json::Value weather = weathers.get(i, json::Value());

            localtm->tm_mday++;

            time_t newtime = mktime(localtm);
            tm *newlocaltm = localtime(&newtime);
            char buffer[256];
            strftime(buffer, sizeof(buffer), "%a %Y年%b%d ", newlocaltm);

            string date = buffer;
            cerr << "date: " << date << endl;

            string dayPictureUrl = weather["dayPictureUrl"].asString();
            cerr << "dayPictureUrl: " << dayPictureUrl << endl;

            string nightPictureUrl = weather["nightPictureUrl"].asString();
            cerr << "nightPictureUrl: " << nightPictureUrl << endl;

            string weather1 = weather["weather"].asString();
            cerr << "weather: " << weather1 << endl;

            string temperature = weather["temperature"].asString();
            cerr << "temperature: " << temperature << endl;

            string wind = weather["wind"].asString();
            cerr << "wind: " << wind << endl;

            cerr << "====================================" << endl;

            result.weather.emplace_back(
                        Weather { date,
                                  dayPictureUrl,
                                  nightPictureUrl,
                                  weather1,
                                  wind,
                                  temperature,
                                  URI
                        }
                        );

        }
    }

    return result;
}

同时我们在client.h中定义如下的宏:

#define URI "http://www.weather.com.cn/html/weather/101010100.shtml"

重新编译项目,如果遇到任何的问题,我们必须停下来解决以使得整个项目能够被正确地编译。在Ubuntu Desktop下运行我们的应用。我们可以在Application Output窗口看见许多的输出。


3)代码讲解


src/scope/scope.cpp


这个文件定义了一个unity::scopes::ScopeBase的类。它提供了客户端用来和Scope交互的起始接口。

  • 这个类定义了“start", "stop"及"run"来运行scope。绝大多数开发者并不需要修改这个类的大部分实现。在我们的例程中,我们将不做任何的修改
  • 它也同时实现了另外的两个方法:search 和 preview。我们一般来说不需要修改这俩个方法的实现。但是他们所调用的函数在具体的文件中必须实现

注意:我们可以通过研究Scope API的头文件来对API有更多的认识。更多的详细描述,开发者可以在http://developer.ubuntu.com/api/scopes/sdk-14.10/查看。

src/scope/query.cpp


这个文件定义了一个unity::scopes::SearchQueryBase类。

这个类用来产生由用户提供的查询字符串而生产的查询结果。这个结果可能是基于json或是xml的。这个类可以用来进行对返回的结果处理并显示。

  • 得到由用户输入的查询字符串
  • 向web services发送请求
  • 生成搜索的结果(根据每个不同而不同)
  • 创建搜索结果category(比如不同的layout-- grid/carousel)
  • 根据不同的搜寻结果来绑定不同的category以显示我们所需要的UI
  • 推送不同的category来显示给最终用户

创建并注册CategoryRenderers

在本例中,我们创建了两个JSON objects. 它们是最原始的字符串,如下所示,它有两个field:template及components。template是用来定义是用什么layout来显示我们所搜索到的结果。这里我们选择的是”grid"及小的card-size。components项可以用来让我们选择预先定义好的field来显示我们所需要的结果。这里我们添加了"title"及“art"。


std::string CR_GRID = R"(
    {
        "schema-version" : 1,
        "template" : {
            "category-layout" : "grid",
            "card-size": "medium"
        },
        "components" : {
            "title" : "title",
            "art" : {
                "field": "art",
                "aspect-ratio": 1.6,
                "fill-mode": "fit"
            }
        }
    }

这是一个grid的layout,同时我们可以显示一个title及一个图片(art)。我们在文件的开始部分加入如上的的template的定义。

更多关于 CategoryRenderer 类的介绍可以在 docs找到。

我们为每个JSON Object创建了一个CategoryRenderer,并同时向reply object注册。我们修改我们的run方法来实现显示:


void Query::run(sc::SearchReplyProxy const& reply) {
    try {
        // Start by getting information about the query
        const sc::CannedQuery &query(sc::SearchQueryBase::query());

        // Trim the query string of whitespace
        string query_string = alg::trim_copy(query.query_string());

        Client::Forecast forecast;

        cerr << "query_string: " << query_string;

        if (query_string.empty()) {
            // If there is no search string, get the forecast for London
            forecast = client_.forecast_daily("北京");
        } else {
            // otherwise, get the forecast for the search string
            forecast = client_.forecast_daily(query_string);
        }

        // Register a category for the forecast
        auto forecast_cat = reply->register_category("Chineweather",
                                                     forecast.city.name,
                                                     "", sc::CategoryRenderer(CR_GRID));

        // For each of the forecast days
        for (const auto &weather : forecast.weather) {

            // Create a result
            sc::CategorisedResult res(forecast_cat);

            // Set the rest of the attributes
            res.set_art(weather.dayPictureUrl);
            stringstream ss(stringstream::in | stringstream::out);
            ss << "白天: " << weather.date;


            res.set_title(ss.str());

            // We must have a URI
            res.set_uri(weather.uri);
            res.set_dnd_uri(weather.uri);

            // Add some extra data, and they will be shown in the preview
            res["weather"] = sc::Variant(weather.weather);
            res["temperature"] = sc::Variant(weather.temperature);
            res["wind"] = sc::Variant(weather.wind);

            // Push the result
            if (!reply->push(res)) {
                // If we fail to push, it means the query has been cancelled.
                // So don't continue;
                return;
            }

            res.set_art(weather.nightPictureUrl);
            ss.str(std::string());
            ss << "夜晚: " << weather.date;
            res.set_title(ss.str());

            // We must have a URI
            res.set_uri(weather.uri);
            res.set_dnd_uri(weather.uri);

            // Push the result
            if (!reply->push(res)) {
                // If we fail to push, it means the query has been cancelled.
                // So don't continue;
                return;
            }

        }

    } catch (domain_error &e) {
        // Handle exceptions being thrown by the client API
        cerr << e.what() << endl;
        reply->error(current_exception());
    }
}

我们从我们的Client API中的Client::Forecast来获取我们所需要的web service的数据,把数据填入到相应的CategorisedResult中。

我们运行我们的程序,我们可以在屏幕上看到如下的画面:

    

我们也可以尝试点击我们的画面,在另外一个画面中可以看到一个图片。到这里,我们基本上已经看到了Scope工作的了。我们下面来更进一步来在Preview中显示更多的内容。

src/scope/preview.cpp

这个文件定义了一个unity::scopes::PreviewQueryBase类。

这个类定义了一个widget及一个layout来展示我们搜索到的结果。这是一个preview结i果,就像它的名字所描述的那样。

  • 定义在preview时所需要的widget
  • 让widget和搜索到的数据field一一对应起来
  • 定义不同数量的layout列(由屏幕的尺寸来定)
  • 把不同的widget分配到layout中的不同列中
  • 把reply实例显示到layout的widget中

大多数的代码在“run&quot;中实现。跟多关于这个类的介绍可以在http://developer.ubuntu.com/api/scopes/sdk-14.10/previewwidgets/找到。

Preview

Preview需要来生成widget并连接它们的field到CategorisedResult所定义的数据项中。它同时也用来为不同的显示环境(比如屏幕尺寸)生成不同的layout。根据不同的显示环境来生成不同数量的column。

Preview Widgets

这是一组预先定义好的widgets。每个都有一个类型。更据这个类型我们可以生成它们。你可以在这里找到Preview Widget列表及它们提供的的field类型。

这个例子使用了如下的widgets

  • header:它有title及subtitle field
  • image:它有source field有来显示从哪里得到这个art
  • text:它有text field
  • action:用来展示一个有"Open"的按钮。当用户点击时,所包含的URI将被打开

如下是一个例子,它定义了一个叫做“headerId"的PreviewWidget。第二个参数是它的类型"header"。

  1. PreviewWidget w_header("headerId""header");  

最终的程序如下:

#include <scope/preview.h>

#include <unity/scopes/ColumnLayout.h>
#include <unity/scopes/PreviewWidget.h>
#include <unity/scopes/PreviewReply.h>
#include <unity/scopes/Result.h>
#include <unity/scopes/VariantBuilder.h>

#include <iostream>

namespace sc = unity::scopes;

using namespace std;
using namespace scope;
using namespace unity::scopes;

Preview::Preview(const sc::Result &result, const sc::ActionMetadata &metadata) :
    sc::PreviewQueryBase(result, metadata) {
}

void Preview::cancelled() {
}

void Preview::run(sc::PreviewReplyProxy const& reply) {
    //
    // This preview handler just reuses values of the original result via
    // add_attribute_mapping() calls, but it could also do another network
    // request for more details if needed.
    //

    // Client can display Previews differently depending on the context
    // By creates two layouts (one with one column, one with two) and then
    // adding widgets to them differently, Unity can pick the layout the
    // scope developer thinks is best for the mode
    sc::ColumnLayout layout1col(1), layout2col(2);

    // add columns and widgets (by id) to layouts.
    // The single column layout gets one column and all widets
    layout1col.add_column({"headerId", "artId", "tempId", "windId", "actionsId"});

    // The two column layout gets two columns.
    // The first column gets the art and header widgets (by id)
    layout2col.add_column({"artId", "headerId"});
    // The second column gets the info and actions widgets
    layout2col.add_column({"infoId", "windId", "actionsId"});

    // Push the layouts into the PreviewReplyProxy intance, thus making them
    // available for use in Preview diplay
    reply->register_layout({layout1col, layout2col});

    //Create some widgets
    // header type first. note 'headerId' used in layouts
    // second field ('header) is a standard preview widget type
    PreviewWidget w_header("headerId", "header");
    // This maps the title field of the header widget (first param)  to the
    // title field in the result to be displayed in this preview, thus providing
    // the result-specific data to the preview for display
    w_header.add_attribute_mapping("title", "title"); // attribute, result field name
    // Standard subtitle field here gets our 'artist' key value
    w_header.add_attribute_mapping("subtitle", "weather");

    PreviewWidget w_art("artId", "image");
    w_art.add_attribute_mapping("source", "art"); // // key, result field name

    PreviewWidget w_info("tempId", "text");
    w_info.add_attribute_mapping("text", "temperature");

    PreviewWidget w_wind("windId", "text");
    w_wind.add_attribute_mapping("text", "wind");

    Result result = PreviewQueryBase::result();
//    QString urlString(result["uri"].get_string().c_str());
    cerr << "[Details] GET " << result["uri"].get_string() << endl;

    // Create an Open button and provide the URI to open for this preview result
    PreviewWidget w_actions("actionsId", "actions");
    VariantBuilder builder;
    builder.add_tuple({
            {"id", Variant("open")},
            {"label", Variant("Open")},
            {"uri", Variant(result["uri"].get_string())} // uri set, this action will be handled by the Dash
        });
    w_actions.add_attribute_value("actions", builder.end());

    // Bundle out widgets as required into a PreviewWidgetList
    PreviewWidgetList widgets({w_header, w_art, w_info, w_wind, w_actions});
    // And push them to the PreviewReplyProxy as needed for use in the preview
    reply->push(widgets);
}


我们再重新运行程序,我们可以看到如下的画面:

      


在手机上的运行情况如下:

   

最后,我们可以找到data文件夹,并换上我们喜欢的应用图标。这样,我们就基本完成了我们所要完成的应用了。

所有的程序代码可以在如下的网址找到:

bzr branch lp:~liu-xiao-guo/debiantrial/chinaweathernew

该应用的另外一个用Qt进行开发的范例可以在如下的网址找到:

bzr branch lp:~liu-xiao-guo/debiantrial/chinaweatherfinal

4)调试应用

当我们在开发应用时,我们可以通过上面的“cerr”在“Application Output”输出结果来查看结果。当在手机运行时,我们也可以通过查看如下的文件来看Scope的运行情况:



我们可以通过查看在手机中的文件“~/.cache/upstart/scope-registry.log”来看最新的Scope的运行情况。




作者:UbuntuTouch 发表于2014-9-29 11:20:38 原文链接
阅读:244 评论:0 查看评论

Read more
UbuntuTouch

QML中的Loader是用来动态地载入一个QML的Component。它可以用来载入一个QML文件(使用它的source属性)。它也可以载入一个Component(使用它的sourceComponent属性)。它适合在需要载入一个Component时才载入它,这样避免资源的浪费。它可以动态地载入按需求在需要的时候创建我们需要的Component。更多阅读,可以参照:http://qt-project.org/doc/qt-4.8/qml-loader.html


1)动态载入一个Component


我们首先来创建我们一个基本的应用。这里我们使用一个"App with Simple UI"的模版。我们首先创建一个称作为"filearray.js"的javascript文件,如下:

var filearray = [
                    ["images/fall1.jpg", "First image"],
                    ["images/fall2.jpg", "Second image"],
                    ["images/fall3.jpg", "Three image"],
                    ["images/fall4.jpg", "Fourth image"]
                ];

这里创建了一个二维的数组。为了我们能够在应用中使用。同时,我们在"main.qml"中也创建一个Component。这样它可以在我们的应用中动态地产生。代码如下:

        Component {
            id: imageText

            Rectangle {
                id:top
                anchors.fill: parent
                Image {
                    id:innerImage
                    anchors.top: parent.top
                    anchors.topMargin:30
                    anchors.horizontalCenter: parent.horizontalCenter
                    width:parent.width*0.8;
                    height: parent.height*0.8
                    source:root.currentImage

                }
                Text{
                    id:answer
                    anchors.top:innerImage.bottom
                    anchors.topMargin:30
                    horizontalAlignment: Text.AlignHCenter
                    width:parent.width;
                    text:root.currentText
                }
            }

       
这个Component非常简单。上面使用了一个Image,下面是一个Text。这两个item的内容是从root控件中的两个property中获得。我们希望这root中的这两个property改变时他们的内容也可以改变。

   Page {
        id: root;
        title: i18n.tr("QML Loader")
        property int index: 0
        property string currentImage
        property string currentText:" "

同时,为了说明问题,我们也设计了一个timer。当这个timer每次timeout时,我们希望我们的loader:

        Loader {
            id: loader
            anchors.fill: parent
            anchors.centerIn:parent
        }

的"sourceComponent"每次都能发生改变,以使得UI得到变化。这里有趣的是,我们也可以为Loader定义它的大小:

  • 如果没有定义Loader的大小的话,Loader将会自动地适配到Component的大小尺寸(当component完成装载以后)
  • 如果Loader的大小已经被定义的话,当component完成装载后,component的尺寸将自动被适配到Loader的尺寸
    function timeout() {
        console.log("root.index" + root.index);
        console.log(FileExt.filearray[root.index][0]);
        root.currentImage = FileExt.filearray[root.index][0];
        root.currentText = FileExt.filearray[root.index][1];
        loader.sourceComponent = imageText;

        root.index++;
        if ( root.index === FileExt.filearray.length) {
            root.index = 0;
        }
    }

        Timer {
            id: timer
            interval: 3000
            onTriggered: {
                timeout();
            }
            repeat: true
            triggeredOnStart: true
        }

运行的效果图如下:



我们可以看到画面中的每三次改变一次。每一次都是一个新的Component,而不是同一个Component不变,只是其中的属性发生改变。Loader很适用于在不同的场景中装载不同的component,比如在不同的菜单中,装载不同的component,以显示不同的UI。Qt SDK很多的例程就是这样写的!

整个例程的代码在如下地址找到:

bzr branch lp:~liu-xiao-guo/debiantrial/loaderqml

2)使用Loader载入qml文件

在下面的例程中,我们来完成一个使用Loader来载入qml文件。我们来做一个类似wizard的东西。当第一个页面显示完后,紧接着按下一个按钮,进入下一个页面。我们首先来创建一个简单的"App with Simple UI"的模版应用,然后,修改main.qml文件:

import QtQuick 2.0
import Ubuntu.Components 1.1
import "components"

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "com.ubuntu.developer.liu-xiao-guo.wizard"


    //automaticOrientation: true

    // Removes the old toolbar and enables new features of the new header.
    useDeprecatedToolbar: false

    width: units.gu(100)
    height: units.gu(75)

    Page {
        id: root
        title: i18n.tr("Wizard")

        Loader {
            z: 1
            id: main
            anchors.fill: parent
        }

        Image {
            source: "images/fall1.jpg"
            anchors.fill: parent
        }

        Button {
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 20
            anchors.rightMargin: 20


            text: "Go to Page 1"
            onClicked: {
                main.source = "Page1.qml"
                console.log("Clicked in main")
            }
        }

        Connections {
            target:main.item
            onHandlerLoader:{
                console.log("Something happened!")
            }
        }
    }
}


这里我们定义了一个叫做main的Loader。当我们点击按钮”Go to Page 1"时,我们使用它来装载另外一个页面“Page1.qml"。注意我们在这里设置它的"z" order值为"1”。同时,我们也可以通过如下的Connections来接受来自main Loader的一些signal来做我们所需要的一些处理。
        Connections {
            target:main.item
            onHandlerLoader:{
                console.log("Something happened!")
            }
        }

在我们的Page1.qml文件中,我们设计如下:

import QtQuick 2.0
import Ubuntu.Components 1.1

Rectangle {
    id:page1
    anchors.fill: parent

    signal handlerLoader;

    Loader{
        z: 2
        id:loader
        anchors.fill: parent
    }
    
    Image {
        source: "images/fall2.jpg"
        anchors.fill: parent
    }

    Button {
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 20
        anchors.rightMargin: 20

        text: "Go to Page 2"
        onClicked: {
            loader.source = "Page2.qml"
            handlerLoader();
        }
    }
}

在这里,我们定义了另外一个Loader, 并且设置它的“z” order值为2,使一个画面得它可以覆盖以前的页面。我们也尝试定义了一个signal "handlerLoader"。这样我们可以使得前一个面可以的得到一个响应。我们可以把我们想要的信号通过这样的方式发送出去,让需要对它感兴趣的代码利用它。

运行我们的程序,结果如下:

       

代码在如下的地址可以找到:

bzr branch lp:~liu-xiao-guo/debiantrial/wizard

作者:UbuntuTouch 发表于2014-9-9 14:07:55 原文链接
阅读:117 评论:0 查看评论

Read more
UbuntuTouch

在这篇文章里,我来介绍如何在Ubuntu  OS上上面读取电话本的信息。


1)首先我们来创建一个最基本的应用

打开我们的Qt Creator, 我们来创建一个称作为“contact1"的项目。在本项目中,我们使用"App with Simple UI"的模版。我们修改我们的“main.qml"代码如下:


import QtQuick 2.0
import Ubuntu.Components 0.1
import "components"
import QtContacts 5.0
import Ubuntu.Components.ListItems 0.1 as ListItem

/*!
    \brief MainView with a Label and Button elements.
*/

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "com.ubuntu.developer.liu-xiao-guo.contact1"

    /*
     This property enables the application to change orientation
     when the device is rotated. The default is false.
    */
    //automaticOrientation: true

    // Removes the old toolbar and enables new features of the new header.
    useDeprecatedToolbar: false

    width: units.gu(100)
    height: units.gu(75)

    Page {
        title: i18n.tr("Contact1")

        ContactModel {
            id: contactModel

            manager: "galera"
        }

        ListView {
            id: contactView

            anchors {
                left: parent.left
                right: parent.right
                top: parent.top
                bottom: buttons.bottom
            }

            model: contactModel

            delegate: ListItem.Subtitled {
                text: contact.name.firstName
                subText: contact.phoneNumber.number
            }
        }
    }
}

这里我们首先输入我们的QtContact 5.0库。在代码中我们定义了如下的ContactModel:

        ContactModel {
            id: contactModel
            manager: "galera"
        }

一定要记住使用"galera" manager。最后,我们使用一个ListView来展示我们的内容。代码显示如上所示。但是我们现在马上在手机上运行时,可能看到如下的信息:

Fail to connect with service: QDBusError("org.freedesktop.DBus.Error.AccessDenied", "An AppArmor policy prevents this sender from sending this message to this recipient, 0 matched rules; type="method_call", sender=":1.119" (uid=32011 pid=20604 comm="/usr/lib/arm-linux-gnueabihf/qt5/bin/qmlscene $@ m") interface="org.freedesktop.DBus.Introspectable" member="Introspect" error name="(unset)" destination="com.canonical.pim" (uid=32011 pid=3057 comm="/usr/lib/arm-linux-gnueabihf/address-book-service/")")

这说明,我们的程序遇到了安全的问题。我们必须在我们应用的apparmor文件中加入相应的policy以来使得我们的读取是可行的。

==ou

加入"Contacts"policy后,我们再在手机中运行,可以看到如下的画面:



我们可以在如下的地址下载我们的代码:

bzr branch lp:~liu-xiao-guo/debiantrial/contact1

2)读取favorite contact信息


我们在我们的应用中定义如下的以个favorite model

        ContactModel {
            id: favouritesContactsModel

            manager: "galera"
            sortOrders: [
                SortOrder {
                    id: sortOrder

                    detail: ContactDetail.Name
                    field: Name.FirstName
                    direction: Qt.AscendingOrder
                }
            ]

            fetchHint: FetchHint {
                detailTypesHint: [ContactDetail.Avatar,
                    ContactDetail.Name,
                    ContactDetail.PhoneNumber]
            }

            filter: DetailFilter {
                id: favouritesFilter

                detail: ContactDetail.Favorite
                field: Favorite.Favorite
                value: true
                matchFlags: DetailFilter.MatchExactly
            }

            onErrorChanged: {
                if (error) {
                    busyIndicator.busy = false
                    contactListView.error(error)
                }
            }
        }

我们在手机上使一个contact成为favorite。这时在我们的ListView中使用我们的favorite Model。代码如下:

        ListView {
            id: contactView
            anchors.fill:parent

            model: root.showFavourites ? favouritesContactsModel : contactModel

            delegate: ListItem.Subtitled {
                text: contact.name.firstName
                subText: contact.phoneNumber.number
            }
        }
我们可以看到我们的一个被设为favorite的contact被列举出来了。



代码在如下的地址可以下载:

bzr branch lp:~liu-xiao-guo/debiantrial/contact2





作者:UbuntuTouch 发表于2014-9-9 9:01:03 原文链接
阅读:103 评论:0 查看评论

Read more
UbuntuTouch

在这篇文章里,我们将学习如何使用QML的Qt.createComponent来动态生成我们所需要的Component。这是一个有趣的练习。我希望大家能跟随我一步一步地完成这个练习。最终使得大家对QML应用有更多的认识。这篇文章中我们也将使用我们的sensor来完成我们其中的一部分功能。在练习之前请大家先去按照安装Ubuntu SDK来安装好我们的环境。


1)使用Qt Creator创建一个最基本的应用


我们首先选择一个“App with Simple UI"的模版来创建我们的最基本的应用。在创建应用的时候,由于应用的package名字中不能出现大写的字母,所以我们选择使用小写的“balloon"来作为我们的工程的名字:



紧接着,我们填入所需要的信息来完成我们的应用。



把应用的大小设为如下的值:

    width: units.gu(50)
    height: units.gu(75)


运行我们的应用:



我们看到,这个应用没有什么太多的内容。我们可以尝试点击按钮,然后看见方框中的文字发生改变。

2)添加Balloon Component

我们按照如下的图,用右键点击项目"balloon",并选择“Add New"。



我们选择创建一个叫做“Balloon.qml”的文件。记住第一个字母为大写的字母。



至此我们已经创建了一个名字叫做"Balloon.qml"的component,虽然现在它做不了什么。为了测试我们刚刚已经创建好的Balloon Component,我们把我们的Balloon在main.qml中创建出来。现在我们来修改main.qml文件:

import QtQuick 2.0
import Ubuntu.Components 1.1
import "components"

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "com.ubuntu.developer.liu-xiao-guo.balloon"

    //automaticOrientation: true

    // Removes the old toolbar and enables new features of the new header.
    useDeprecatedToolbar: false

    width: units.gu(50)
    height: units.gu(75)

    Page {
        title: i18n.tr("Balloon")

        Balloon {
            width: parent.width/3
            height: parent.height/3
            x: (parent.width - width) / 2
            y: (parent.height - height) /2
        }
    }
}

这里我们把Balloon放到了我们主界面的正中央的位置。重新运行我们的程序,我们可以看到:



显然,我们可以看到,我们的Balloon component里没有任何的东西。只是一个白色方框在那里。但是,至少,我们可以看到确实Balloon已经能被正确地调用。在下面的章节中,我们来一步一步地完成我们的Balloon的功能。

3)完成Balloon模块

请到地址https://github.com/liu-xiao-guo/balloon下载应用,并拷贝应用的"images"目录到我们已经创建好的项目中(别的文件不要拷贝)。这样使得我们的应用有一个叫做"images"的目录,里面有我们想要的图片。



打开我们的Balloon.qml文件。我们知道Balloon component其实是一个Image的item。我们首先把它设计为如下:

import QtQuick 2.0

Image {
    id: balloon
    width: 100
    height: 250

    source: "images/red.svg"
}

我们运行程序,我们发现它的结果如下:



显然,我们已经看到了我们所需要看到的气球了。只是它的颜色是固定的红色。我们想显示不同的气球。这时我们需要加入一个颜色的属性。我们的Balloon.qml的代码如下:

Image {
    id: balloon
    width: 100
    height: 250
    property string color: "red"

    source: "images/" + color + ".svg"
}

默认的颜色我红色(在没有定义的情况下)。我们可以尝试改变我们的main.qml文件。加入color属性:

        Balloon {
            color: "green"
            width: parent.width/3
            height: parent.height/3
            x: (parent.width - width) / 2
            y: (parent.height - height) /2
        }

再重新运行应用:



我们看见了一个绿色的气球。显然它的颜色属性是起作用的。为了能够使我们拖动鼠标移动气球,我们可以在Balloon.qml的Image中加入如下的代码:

    MouseArea {
        x: 0; y: parent.height/2
        width: parent.width
        height: parent.height/2

        drag.target: parent
        drag.axis: "XandYAxis"
    }

再重新运行应用。我们尝试用鼠标点击气球的下半部,并移动气球。我们可以看到气球随着鼠标的移动而移动。下面,我们想在点击气球的上半部分时,气球发生爆炸。为了这样做,我们必须定义另外一个MouseArea来扑捉这个事件。当我们点击气球的上半部时会发出一个爆破声。

    MouseArea {
        x: 0; y: 0
        width: parent.width
        height: parent.height/2

        onClicked: {
            balloon.state = "exploded";
            player.play();
        }
    }

为了我们能够听到一个声音,我们也同时定义了一个MediaPlayer。同时记得把刚下载好的程序中的"sounds"目录考到我们的项目中,并处于和“images”相同的目录中。

import QtMultimedia 5.0

Image {
    ...

    MediaPlayer {
        id: player
        source: "sounds/blast.wav"
    }

   ...
}

为了能够使得我们的应用能够在手机上播放出声音,我们必须为它加入我们所需要的security policy。为此,我们必须修改项目的“balloon.apparmor”文件:



有了“Audio”的policy,我们就可以在我们的手机上听到一声“砰”的声音(在气球爆炸的时候)。

这里我们把Image的id定义为"balloon"。当点击气球的上半部时,我们同时设置balloon的状态为“exploded”状态。我们知道,QML设计中可以设置component为不同的状态。在不同的状态中,可以定义component中各个item的不同属性的值。默认的状态为"",即空串。我们定义的状态如下:

    states: [
        State {
            name: "exploded"

            StateChangeScript {
                script: {
 //                   particle.running = true;
                }
            }

            PropertyChanges {
                target: balloon
                visible: false
                source: "images/" + color + "_exploded.png"
            }

            PropertyChanges {
                target: balloon
                opacity: 0
            }

            PropertyChanges {
                target: balloon
                scale: 0
            }

 //           StateChangeScript { script: balloon.destroy(1000); }
        }
    ]

这时我们重新运行我们的应用,我们会发现我们可以点击球的上半部,并听到一声爆破声。随后球就消失了。我们的目的达到了,但是,还不是我们最终想要的。这是因为从气球点击到消失,速度太快了。我们机会没有看到任何的中间过程。为了我们能够看到气球是怎么爆炸的,我们必须使用一个叫做 transition的。

    transitions: [
        Transition {
            to: "exploded"
            SequentialAnimation {

                // Disappear
                NumberAnimation { target: balloon; property: "opacity"
                    to: 0; duration: 800 }
                NumberAnimation { target: balloon; property: "scale"
                    to: 0; duration: 800 }

                PropertyAction { target: balloon; property: "source"
                    value:  {
                        if ( !surprise )
                            "images/" + color + "_exploded.png"
                        else
                            "images/flower.png";
                    }
                }

                NumberAnimation { target: balloon; property: "opacity"
                    to: 1; duration: 300 }
                NumberAnimation { target: balloon; property: "scale"
                    to: 1; duration: 300 }

                PauseAnimation {
                    duration: {
                        if (surprise)
                            2000
                        else
                            800
                    }
                }

                PropertyAction { target: balloon; property: "visible"
                    value: "false"}
            }
        }
    ]

有了这个我们可以看到气球是逐渐消失的。我们在Image中也加入了如下的属性。当这个气球是一个surprise时,我们会显示一朵花:

Image {
    id: balloon
    width: 100
    height: 250
    property string color: "red"
    property bool surprise: true
    ....
}

为了达到更加逼真的效果,我也为我们的Balloon加入了一个烟花的效果:

import QtQuick.Particles 2.0
...
Image {
    ...
ParticleSystem {
        id: particle
        anchors.fill: parent
        running: false

        Emitter {
            group: "stars"
            emitRate: 800
            lifeSpan: 2400
            size: 24
            sizeVariation: 8
            anchors.fill: parent
        }

        ImageParticle {
            anchors.fill: parent
            source: "qrc:///particleresources/star.png"
            alpha: 0
            alphaVariation: 0.2
            colorVariation: 1.0
        }

        Emitter {
            anchors.centerIn: parent
            emitRate: 400
            lifeSpan: 2400
            size: 20 // 48
            sizeVariation: 8
            velocity: AngleDirection {angleVariation: 180; magnitude: 60}
        }

        Turbulence {
            anchors.fill: parent
            strength: 2
        }
    }

...
}

并在state变化时让它运行:

            StateChangeScript {
                script: {
                    particle.running = true;
                }
            }

运行应用,效果图如下:

    

至此所有的源码可以在如下的网址下载:


bzr branch lp:~liu-xiao-guo/debiantrial/balloon1

由于篇幅的原因。我们将在下一篇文章中详细介绍怎么动态创建很多个Balloon的。大家敬请期待!











            
作者:UbuntuTouch 发表于2014-9-10 11:41:52 原文链接
阅读:170 评论:0 查看评论

Read more
UbuntuTouch

上一篇文章中,我们已经生成了我们Balloon component了。现在我们来让大家怎么来动态生成很多的气球。


4)更进一步完成我们的Balloon component


为了使得我们的Balloon更加像现实生活中的气球,我们来给Balloon给予更多的属性:

    property int x1
    property int y1
    property int speed
    property bool created: false

这里x1, y1是我们让气球飞到一个目的地时的终点位置。我们可以使用如下的语句使得它具有动画的效果:

   NumberAnimation on y {
        easing.type: Easing.InOutQuad; to: y1; duration: speed
        running: created
    }

    NumberAnimation on x {
        easing.type: Easing.InOutQuad; to: x1; duration: speed
        running: created
    }

无论x, 或是y变化时,我们都做一个动画,用speed定义的时间来完成。这个动画只有在“created"为真时才起作用。这是为了能够保证我们的动画只有在Balloon被动态生成完成后才可以产生动作。“created"在我们的程序设计中,只有被动态生成时才设计为true。为了能够destroy我们动态生成的Ballloon,我们也在Transition中的部分做了如下的修改:

    transitions: [
        Transition {
            to: "exploded"
            SequentialAnimation {
                NumberAnimation { target: balloon; property: "opacity"
                    to: 0; duration: 800 }

                NumberAnimation { target: balloon; property: "scale"
                    to: 0; duration: 800 }

                PropertyAction { target: balloon; property: "source"
                    value:  {
                        if ( surprise )
                            "images/flower.png";
                        else
                            ""
                    }
                }

                NumberAnimation { target: balloon; property: "opacity"
                    to: 1; duration: 300 }
                NumberAnimation { target: balloon; property: "scale"
                    to: 1; duration: 300
                }

                PauseAnimation {
                    duration: {
                        if (surprise)
                            400
                        else
                            200
                    }
                }

                PropertyAction { target: balloon; property: "visible"
                   value: "false"}
            }
        }
    ]

5)动态生成QML Component

为了动态生成Balloon, 我们在主界面里加入一个Button。这个按钮可以帮我们生成所需要的Balloon。我们同时也为我们的主界面加上一个天空的背景:

    Page {
        id:main
        title: i18n.tr("Balloon")
        property int time: 2000
        property int rotateVal: 0

        Image {
            anchors.fill:parent
            source: "images/sky.jpg"
        }

        Balloon {
            id: red
            x: main.width/2
            y: main.height - 60
            rotation: main.rotateVal
            color: "red"
            y1: main.height/6
            x1: 0
            speed: main.time/2
            created: true
            surprise: true
        }

        Balloon {
            id: blue
            x: main.width / 3 - 60
            y: main.height - 60
            color: "blue"
            rotation: main.rotateVal
            y1: main.height/4
            x1: main.width/2 + 20
            speed: main.time/2
            created: true
        }

        Balloon {
            id: green
            x: main.width*2/3
            y: main.height - 10
            rotation: main.rotateVal
            color: "green"
            y1: main.height/5
            x1: main.width/3 + 20
            speed: main.time/3
            created: true
            surprise: true
        }

        Button {
            z: 2
            id: restartButton

            anchors.bottom: parent.bottom
            anchors.right: parent.right
            anchors.bottomMargin: 10
            anchors.rightMargin: 10

            width: 100
            height: 40
            text: "Add"
            onClicked: {
                var x = Math.random() * main.width
                var y = main.height - 60
                var colors = new Array("red","blue","green");

                var date = new Date()
                // Use miliseconds avoids the same random secuece
                // generation among calls
                var mils = date.getMilliseconds()
                var index = Math.floor((Math.random()*mils)%3)

                var obj = Logic.createBalloon( Math.floor(x), Math.floor(y),
                                              colors[index] )
            }
        }
    }

在这里,我们使用了一个天空的Image背景。同时也创建了三个不同颜色的气球。同时,我们也加入了一个按钮“Add”用来添加动态生成的气球。为了能够使用上面的“Logic”,我们也创建了一个叫做“logic.js”的文件,处于和"main.qml"同一个目录中。它的内容如下:

var component;

function addBinding (from, toObj, toProp)
{
    var bindObj = Qt.createQmlObject("import QtQuick 2.0; Binding {value:"+from+"}", main)
    if (bindObj) {
        bindObj.target = toObj
        bindObj.property = toProp
    }
    else {
        console.log("error creating binding object")
        console.log(bindObj.errorString())
        return false
    }
    return true
}


function createBalloon(x, y, color) {
    // console.log( "Color:" + color)
    if (component == null)
        component = Qt.createComponent("Balloon.qml");

    // Note that if Block.qml was not a local file, component.status would be
    // Loading and we should wait for the component's statusChanged() signal to
    // know when the file is downloaded and ready before calling createObject().
    if (component.status === Component.Ready) {
        var dynamicObject = component.createObject(main);
        if (dynamicObject === null) {
            console.log("error creating block");
            console.log(component.errorString());
            return false;
        }

        var xx = main.width*Math.random();
        var xx1 = Math.floor(Math.min(xx, main.width-dynamicObject.width));

        dynamicObject.x = x;
        dynamicObject.y = y;
        dynamicObject.x1 = xx1;
        dynamicObject.y1 = 100 * Math.random();
        dynamicObject.speed = 2000
        dynamicObject.color = color;

        with(Math) {
            var tmp = floor(random() * 10 + 1)
            dynamicObject.surprise = (tmp===10);
        }

        var bindObj = Qt.createQmlObject("import QtQuick 2.0; Binding {value: main.rotateVal}", main);

        if (bindObj) {
            bindObj.target = dynamicObject
            bindObj.property = "rotation"
        }
        else {
            console.log("error creating binding component") ;
            console.log(bindObj.errorString());
            return false;
        }

        // This should be set last
        dynamicObject.created = true;

        // addBinding( "scaleVal", dynamicObject, scale );

    } else {
        console.log("error loading block component");
        console.log(component.errorString());
        dynamicObject = null;
        return null;
    }

    return dynamicObject;
}

function playsound(surprise) {
    if ( surprise ) {
        clapPlayer.play();
    }
    else {
        player.play();
    }
}

这里,我们使用了createBalloon(x, y, color)方法在(x, y)处创建我们所需要颜色的气球。最后为了引用"logic.js",我们必须在main.qml文件的顶头部分使用如下的语句:

import "logic.js" as Logic

这样我们就可以使用这个js文件中的方法了。


    

至此,我们已经基本完成了如何自动动态地生成QML component。全部的代码在如下的地址可以下载:

bzr branch lp:~liu-xiao-guo/debiantrial/balloon2

6)加入sensor 到应用中去

接下来,我们想把sensor加入到我们的应用中去。我们想当我们倾斜我们的手机的时候,气球也要随着转动,同时当我们摇动手机的时候,我们希望气球能跟着我们的摇动不断地变大,这样能使得我们的气球直至破裂。为了我们能够使用sensor,我们必须在main.qml中加入如下的库:

import QtSensors 5.0

同时,我们也加入如下的代码:

        Accelerometer {
            id: accel
            active: true
            dataRate: 20

            onReadingChanged: {
                var x = Math.abs(accel.reading.x);
                var y = Math.abs(accel.reading.y);
                var z = Math.abs(accel.reading.z);

                if ( x > main.maxX ) {
                    main.maxX = x;
                }

                if ( y > main.maxY ) {
                    main.maxY = y;
                }

                if ( z > main.maxZ ) {
                    main.maxZ = z;
                }

                if ( x > main.threshold || y > main.threshold || z > main.threshold ) {
                    console.log("x: " + main.maxX + " y: " + main.maxY + " z: " + main.maxZ);
                    var count = main.children.length

                    for(var i=0; i < count; i++) {
                        if ( main.children[i].type !== "balloon" )
                            continue;
                        if ( main.children[i].type === "balloon") {
                            if ( main.children[i].color === "red")
                                main.children[i].scale += 0.1
                            else if ( main.children[i].color === "green" )
                                main.children[i].scale += 0.02
                            else
                                main.children[i].scale += 0.05
                        }

                        if( main.children[i].scale > 2.0 &&
                                main.children[i].state !== "exploded" &&
                                main.children[i].color === "red" &&
                                main.children[i].type === "balloon" ) {
                            main.children[i].state = "exploded"
                        }

                        if( main.children[i].scale > 3.0 &&
                                main.children[i].state !== "exploded" &&
                                main.children[i].color === "green" &&
                                main.children[i].type === "balloon" ) {
                            main.children[i].state = "exploded"
                        }

                        if( main.children[i].scale > 4.0 &&
                                main.children[i].state !== "exploded" &&
                                main.children[i].color === "blue" &&
                                main.children[i].type === "balloon" ) {
                            main.children[i].state = "exploded"
                        }
                    }
                }
            }
        }

        RotationSensor {
            id: rotation
            dataRate: 50
            onReadingChanged: {
                var count = main.children.length

                for ( var i = 0; i < count; i ++ ) {
                    if (main.children[i].type !== "balloon")
                        continue;

                    main.children[i].rotation = -rotation.reading.x;
                    main.children[i].rotation = -rotation.reading.y;
                }

            }
        }

我们使用了加速传感器和旋转传感器。这样在我们摇动的时候,我们就可以使得气球不断地变大。当我们倾斜的时候,气球也可以随着我们的倾斜而倾斜。

最终的代码可以在如下的地址下载:

bzr branch lp:~liu-xiao-guo/debiantrial/balloonfinal





作者:UbuntuTouch 发表于2014-9-10 20:39:32 原文链接
阅读:141 评论:0 查看评论

Read more
Steph

Last week was a week of firsts for me: my first trip to America, my first Sprint and my first chili-dog.

Introducing myself as the new (only) Editorial and Web Publisher, I dove head first into the world of developers, designers and Community members. It was a very absorbing week, which after felt more like a marathon than a sprint.

After being grilled by Customs, finally we arrived at Tyson’s Corner where 200 or so other developers, designers and Community members gathered for the Devices Sprint. It was a great opportunity for me to see how people from each corner of the world contribute to Ubuntu, and share their passion for open source. I especially found it interesting to see how designers and developers work together, given their different mind sets and how they collaborated together.

The highlight for me was talking to some of the Community guys, it was really interesting to talk to them about why and how they contribute from all corners of the world.

From left to right: Riccardo, Andrew, Filippo and Victor.

(From left to right: Riccardo, Andrew, Filippo and Victor)

The main ballroom.

(The main Ballroom)

Design Team dinner.  From the left: TingTing, Andrew, John, Giorgio, Marcus, Olga, James, Florian, Bejan and Jouni.

(Design Team dinner. From the left: TingTing, Andrew, John, Giorgio, Marcus, Olga, James, Florian, Bejan and Jouni)

I caught up with Olga and Giorgio to share their thoughts and experiences from the Sprint:

So how did the Sprint go for you guys?

Olga: “It was very busy and productive in terms of having face time with development, which was the main reason we went, as we don’t get to see them that often.

For myself personally, I have a better understanding of things in terms of what the issues are and what is needed, and also what can or cannot be done in certain ways. I was very pleased with the whole sprint. There was a lot of running around between meetings, where I tried to use the the time in-between to catch-up with people. On the other hand as well, Development made the approach to the Design Team in terms of guidance, opinions and a general catch-up/chat, which was great!

Steph: “I agree, I found it especially productive in terms of getting the right people in the same room and working face-to-face, as it was a lot more productive than sharing a document or talking on IRC.”

Giorgio: “Working remotely with the engineers works well for certain tasks, but the Design Team sometimes needs to achieve a higher bandwidth through other means of communication, so these sprints every 3 months are incredibly useful.

What a Sprint allows us to do is to put a face to the name and start to understand each other’s needs, expectations and problems, as stuff gets lost in translation.

I agree with Olga, this Sprint was a massive opportunity to shift to much higher level of collaboration with the engineers.

What was your best moment?

Giorgio: “My best moment was when the engineers perception towards the efforts of the Design Team changed. My goal is to better this collaboration process with each Sprint.”

Did anything come up that you didn’t expect?

Giorgio: “Gaming was an underground topic that came up during the Sprint. There was a nice workshop on Wednesday on it, which was really interesting.”

Steph: “Andrew a Community Developer I interviewed actually made two games one evening during the Sprint!”

Olga: “They love what they do, they’re very passionate and care deeply.”

Do you feel as a whole the Design Team gave off a good vibe?

Giorgio: “We got a good vibe but it’s still a working progress, as we need to raise our game and become even better. This has been a long process as the design of the Platform and Apps wasn’t simply done overnight. However, now we are in a mature stage of the process where we can afford to engage with Community more. We are all in this journey together.

Canonical has a very strong engineering nature, as it was founded by engineers and driven by them, and it is has evolved because of this. As a result, over the last few years the design culture is beginning to complement that. Now they expect steer from the Design Team on a number of things, for example: Responsive design and convergence.

The Sprint was good, as we finally got more of a perception on what other parties expect from you. It’s like a relationship, you suddenly have a moment of clarity and enlightenment, where you start to see that you actually need to do that, and that will make the relationship better.”

Olga: The other parties and the Development Team started to understand that initiated communication is not just the responsibility of the Design Team, but it’s an engagement we all need to be involved in.”

In all it was a very productive week, as everyone worked hard to push for the first release of the BQ phone; together with some positive feedback and shout-outs for the Design Team :)

Unicorn hard at work.

(Unicorn hard at work)

There was a bit of time for some sightseeing too…

It would have been rude not to see what the capital had to offer, so on the weekend before the sprint we checked out some of Washington’s iconic sceneries.

The Washington Monument.

(The Washington Monument)

We saw most of the important parliamentary buildings like the White House, Washington Monument and Lincoln’s Statue. Seeing them in the flesh was spectacular, however, I half expected a UFO to appear over the Monument like in ‘Independence Day’, and for Abraham Lincoln to suddenly get up off his chair like in the movie ‘Night at the Museum’ - unfortunately none of that happened.

The White House.

(The White House)

D.C. isn’t as buzzing as London but it definitely has a lot of character, as it embodies an array of thriving ethnic pockets that represented African, Asian and Latin American cultures, and also a lot of Italians. Washington is known for getting its sax on, so me and a few of the Design Team decided to check-out the night scene and hit a local Jazz Club in Georgetown.

...And all the jazz.

(Twins Jazz Club)

On the Sunday, we decided to leave the hustle and bustle of the city and venture to the beautiful Great Falls Park, which was only 10-15 minutes from the hotel. The park was located in the Northern Fairfax County along the banks of the Potomac River, which is an integral part of the George Washington Memorial Parkway. Its creeks and rapids made for some great selfie opportunities…

Great Falls Park.

(Great Falls Park)

Read more
UbuntuTouch

Ubuntu SDK对我们大多数开发者来说非常有效。它甚至可以帮我们来进行在线调试。在这篇文章中,我们来介绍如何使用command line来编译并运行我们的scope。


1)创建一个最基本的Scope

我们可以使用Ubuntu SDK来创建一个最基本的Scope。在创建时,我们可以选择任何一个template。我们可以在SDK中试着在Desktop上进行编译运行以确保没有任何问题。



我们创建一个叫做“scopetest”的scope。

2)运用Command Line进行编译及运行

我们首先打开一个Terminal。我们也可以打开已经创建好的template Scope中的readme.txt文件:

This project contains a simple Unity Scope and all files needed to build
and deploy it. Building it is simple. First you need to install the scopes
development package and CMake. Then you go into the source root and type
the following commands.

mkdir build
cd build
cmake -DCMAKE_BUILD_TYPE=debug ..
make

我们首先进入Scope所在的目录,并创建一个“build”子目录。

  


  


我们打入如上所述的命令。等编译好没有错误后,我们再进入当前目录下的“src”子目录,并打入如下的命令:

unity-scope-tool com.ubuntu.developer.liu-xiao-guo.scopetest_scopetest.ini 

这样,我们就可以在desktop上运行我们的scope了。


3)安装到手机中

我们可以创建两个如下的scripts文件:

build.sh


build.sh:
#!/bin/bash
click-buddy --arch armhf --framework ubuntu-sdk-14.10 --dir ..

provision.sh

#!/bin/bash
rm -f ../*click
click-buddy --arch armhf --framework ubuntu-sdk-14.10 --dir .. --provision

并同时把这两个文件存于scope项目的上一个目录。对我来说,我存放于“release”目录中。这样当我们处于“build”目录时,




我们也可以同时使用provision.sh来部署scope到手机中



在我们的手机上就可以看到我们已经部署好的scope。我们如果看不到的话,我们可以通过搜索的方式找到我们的scope。


作者:UbuntuTouch 发表于2014-10-31 10:54:57 原文链接
阅读:90 评论:0 查看评论

Read more
Michael Hall

With all of the new documentation coming to support the development of Unity Scopes, it’s time for us to have another development shodown! Contestants will have five (5) weeks to develop a project, from scratch, and submit it to the Ubuntu Store. But this time all of the entries must be Scopes.

Be sure to update to the latest SDK packages to ensure that you have the correct template and tools. You should also create a new Click chroot to get the latest build and runtime packages.

Prizes

prizesWe’ve got some great prizes lined up for the winners of this competition.

  • 1st place will win a new Dell XPS 13 Laptop, Developer Edition (preloaded with Ubuntu)
  • Runners up will receive one of:
    • Logitech UE Boom Bluetooth speakers
    • Nexus 7 running Ubuntu
    • An Ubuntu bundle, featuring:
      • Ubuntu messenger bag
      • Ubuntu Touch Infographic T-shirt
      • Ubuntu Neoprene Laptop Sleeve
    • An Ubuntu bundle, featuring:
      • Ubuntu backpack
      • Ubuntu Circle of Friends Dot Design T-shirt
      • Ubuntu Neoprene Laptop Sleeve

Judging

Scope entries will be reviewed by a panel of judges from a variety of backgrounds and specialties, all of whom will evaluate the scope based on the following criteria:

  • General Interest – Scopes that are of more interest to general phone users will be scored higher. We recommend identifying what kind of content phone users want to have fast, easy access to and then finding an online source where you can query for it
  • Creativity – Scopes are a unique way of bringing content and information to a user, and we’ve only scratched the surface of what they can do. Thinking outside the box and providing something new and exciting will lead to a higher score for your Scope
  • Features – There’s more to scopes than basic searching, take advantage of the departments, categories and settings APIs to enhance the functionality of your Scope
  • Design – Scopes offer a variety of ways to customize the way content is displayed, from different layouts to visual styling. Take full advantage of what’s possible to provide a beautiful presentation of your results.
  • Awareness / Promotion – we will award extra points to those of you who blog, tweet, facebook, Google+, reddit, and otherwise share updates and information about your scope as it progresses.

The judges for this contest are:

  • Chris Wayne developer behind a number of current pre-installed Scopes
  • Joey-Elijah Sneddon Author and editor of Omg!Ubuntu!
  • Victor Thompson Ubuntu Core Apps developer
  • Jouni Helminen Designer at Canonical
  • Alan Pope from the Ubuntu Community Team at Canonical

Learn how to write Ubuntu Scopes

To get things started we’ve recently introduced a new Unity Scope project template into the Ubuntu SDK, you can use this to get a working foundation for your code right away. Then you can follow along with our new SoundCloud scope tutorial to learn how to tailor your code to a remote data source and give your scope a unique look and feel that highlights both the content and the source. To help you out along the way, we’ll be scheduling a series of online Workshops that will cover how to use the Ubuntu SDK and the Scope APIs. In the last weeks of the contest we will also be hosting a hackathon on our IRC channel (#ubuntu-app-devel on Freenode) to answer any last questions and help you get your c If you cannot join those, you can still find everything you need to know in our scope developer documentation.

How to participate

If you are not a programmer and want to share some ideas for cool scopes, be sure to add and vote for scopes on our reddit page. The contest is free to enter and open to everyone. The five week period starts on the Thursday 30th October and runs until Wednesday 3rd December 2014! Enter the Ubuntu Scope Showdown >

Read more
facundo

A la caza del Octubre


Cuando estuve planificando el segundo semestre de este año no tenía idea que Octubre iba a estar tan complicado.

Lo primero grande que me llevó mucho tiempo fue el cumpleaños de Felipe. Este año hicimos algo en un saloncito (el mismo donde le festejamos el primer cumple) para los amiguitos del jardín y todos nuestros familiares/amigos que tienen niños, el mismo viernes que Felipe cumplía. Y luego un asado en casa para todo el resto de amigos y familiares, el domingo siguiente.

Felu soplando la velita

Salió todo muy bien, pero organizar todo lleva varios, varios días y terminás exhausto :p. Igual, la que más labura en estos casos es Moni, desde muchas semanas antes... haciendo decoraciones, los souvenirs, escenografías, y mil cosas más. Yo me ocupo de muchas cosas que tienen que ser los últimos días, así que lo mío es más corto, pero intensivo.

Felipe 5

Algo que no tenía planeado al armar el segundo semestre era una semana de laburo en Washington. Claro, es una semana hábil más el viaje durante el finde, así que ocupa bastante tiempo.

Yo ya conocía Washington (ver este post y siguientes), así que no me hice mucha malasangre porque no tenía tiempo de pasear por los alrededores y el centro. Igual algo caminamos, especialmente una noche que hicimos la cena de equipo, y nos fuimos a una ciudad costera cercana, a comer "bien local" (estuvo buenísimo). Y siempre es una excusa para volver a reencontrarse con gente, romper la rutina, jugar algunos juegos de mesa, etc... ¡ah! y trabajar en equipo, claro, :p

Salsa

Y para cerrar el mes, justo la semana posterior al viaje, asistí a mi primera Ekoparty (la conferencia seguridad más grande de latinoamérica). Esto lo estoy escribiendo el jueves a la mañana, así que todavía me resta asistir a dos tercios de la misma, y el primer día estuve a full en el stand de PyAr.

Bueno, "estuve", ¡estuvimos! Con Gabriel, Osiris, Nico y Julián, armando todo lo que es la competencia de Python Argentina, que armamos especialmente para Ekoparty. Lo que armamos fue un TypusPocus toqueteado especialmente para el evento; lo hacemos correr en una RasPi en modo "kiosco" para que la gente juegue, y sincronicamos los highscores a otra RasPi donde también corre TypusPocus, en modo "showcase" (mostrando highscores y propagandas de PyAr, la próxima PyConAr, y cosas del mismo juego).

Stand de PyAr en la Ekoparty

El stand va siendo un éxito. Ayer volaron los 100 microtutoriales que llevé, y la gente viene y va todo el tiempo. El jueves (hoy!) voy medio día, y mañana ya voy desde temprano y me quedo hasta bien el final. Y como ya tenemos 98% de todo listo, seguro que voy a ir a varias charlas de la conferencia misma, que hay algunas muy copadas.

Y ni hablemos de que todavía no liberé la nueva versión de Encuentro, o que tengo a medio armar varias cosas de CDPedia, las clases atrasadas de tenis, y muchas cosas para hacer en casa. Esperemos que Noviembre venga más tranquilo...

Read more
Jussi Pakkanen

Bug finding tools

In Canonical’s recent devices sprint I held a presentation on automatic bug detection tools. The slides are now available here and contain info on tools such as:

Enjoy.

 

Read more
Daniel Holbach

In the Community Q&A with Alan and Michael yesterday, I talked a bit about the sprint in Washington already, but I thought I’d write up a bit more about it again.

First of all: it was great to see a lot of old friends and new faces at the sprint. Especially with the two events (14.10 release and upcoming phone release) coming together, it was good to lock people up in various rooms and let them figure it out when nobody could run away easily. For me it was a great time to chat with lots of people and figure out if we’re still on track and if our old assumptions still made sense.  :-)

We were all locked up in a room as well...We were all locked up in a room as well…

What was pretty fantastic was the general vibe there. Everyone was crazy busy, but everybody seemed happy to see that their work of the last months and years is slowly coming together. There are still bugs to be fixed but we are close to getting the first Ubuntu phone ever out the door. Who would have thought that a couple of years ago?

It was great to catch up with people about our App Development story. There were a number of things we looked at during the sprint:

  • Up until now we had a Virtualbox image with Ubuntu and the SDK installed for people at training (or App Dev School) events, who didn’t have Ubuntu installed. This was a clunky solution, my beta testing at xda:devcon confirmed that. I sat down with Michael Vogt who encouraged me to look into providing something more akin to an “official ISO” and showed me the ropes in terms of creating seeds and how livecd-rootfs is used.
  • I had a number of conversations with XiaoGuo Liu, who works for Canonical as well, and has been testing our developer site and our tools for the last few months. He also wrote lots and lots of great articles about Ubuntu development in Chinese. We talked about providing our developer site in Chinese as well, how we could integrate code snippets more easily and many other things.
  • I had a many chats at the breakfast buffet with Zoltan and Zsombor of the SDK team (it always looked like we were there at the same time).  We talked about making fat packages easier to generate, my experiences with kits and many other things.
  • It was also great to catch up with David Callé who is working on scopes documentation. He’s just great!

What also liked a lot was being able to debug issues with the phone on the spot. I changed to the proposed channel, set it to read-write and installed debug symbols and voilà, grabbing the developer was never easier. My personal recommendation: make sure the problem happens around 12:00, stand in the hallway with your laptop attached to the phone and wait for the developer in charge to grab lunch. This way I could find out more about a couple of issues which are being fixed now.

It was also great to meet the non-Canonical folks at the sprint who worked on the Core Apps like crazy.

What I liked as well was our Berlin meet-up: we basically invited Berliners, ex-Berliners and honorary Berliners and went to a Mexican place. Wished I met those guys more often.

I also got my Ubuntu Pioneers T-Shirt. Thanks a lot! I’ll make sure to post a selfie (as everyone else :-)) soon.

Thanks a lot for a great sprint, now I’m looking forward to the upcoming Ubuntu Online Summit (12-14 Nov)! Make sure you register and add your sessions to the schedule!

Read more
UbuntuTouch

[原]使用Ubuntu SDK开发Flickr应用教程

在这篇文章中我们将一步一步地教大家怎么在Ubuntu手机平台来开发一个QML的应用。我们知道QML开发对很多初学者来说并不难。我们需要有一些简单的javascript的基础就可以开始我们的开发了。QML应用的调试也是很方便的。我们通过这个教程的学习,掌握基本的开发流程及界面设计。最终的应用显示的图片如下:

     

1)创建一个最基本的QML应用

我们首先打开Ubuntu SDK,并选择“App with Simple UI”模版。

  

这样我们就产生了一个最基本的QML应用。我们可以在desktop上运行它(通过按下Ctrl+R)键或点击SDK左下方的绿色的运行键。我们同时修改main.qml中的尺寸为:

    width: units.gu(80)
    height: units.gu(100)

修改应用的title为:

        title: i18n.tr("Flickr")


应用中有一个按钮,大家可以点击并看看有什么变化。

2)实现一个最基本的列表

回头看看我们的设计,我们需要有一个列表来列出我们的图片。我们这里来使用一个列表的控件来实现它。在Ubuntu SDK的toolkit中,有一个conrtol叫做UbuntuListView。我们可以使用它来设计我们的列表。当然我们也可以使用QML中的ListView。UbuntuListView有一些更多的功能比如pullToRefresh。我们可以在下面用到。我们首先通过如下的方式添加一个文件“PictureListView.qml”到项目中。



    



这样我们就基本上创建了一个叫做“PictureListView.qml”的文件。在这里,它实际上创建一个叫做“PictureListView”的Component。一个Component的名称通常是以大写字母为开始的。通常它是以“Item”为基础的元素。Item在QML中是所有可视元素的最基础的元素。相当于在我们C++或JAVA编程中最基础的一个类。PictureListView.qml的设计如下:

import QtQuick 2.0

Item {
    anchors.fill: parent

}

为了能够在main.qml中调用它,我们修改我们的main.qml如下:

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "com.ubuntu.developer.liu-xiao-guo.flickr"

    /*
     This property enables the application to change orientation
     when the device is rotated. The default is false.
    */
    //automaticOrientation: true

    // Removes the old toolbar and enables new features of the new header.
    useDeprecatedToolbar: false

    width: units.gu(80)
    height: units.gu(100)

    Page {
        id:mainPage
        title: i18n.tr("Flickr")
        clip:true

        PictureListView {
            anchors.fill: parent
        }
    }
}

重新运行运行程序,显示如下。目前我们的应用应该没有做上面东西。代码可以在如下的地址找到:

bzr branch lp:~liu-xiao-guo/debiantrial/flick1

2)完成UbuntuListView

我们再次回顾一下我们最上面的设计。里面是一个ListView。这里我们来使用UbuntuListView来完成该View。我们重新设计我们的PictureListView.qml文件。为了能够显示我们的ListView,我们对PictureListView做了一个简单的展示:

import QtQuick 2.0
import Ubuntu.Components 1.1
import Ubuntu.Components.ListItems 1.0

Item {
    id: mainScreen

    UbuntuListView {
        id: listView
        width: mainScreen.width
        height:mainScreen.height

        model: 10

        delegate:
            Text {
                text: "Hi"
            }

        Scrollbar {
            flickableItem: listView
        }
    }
}

重新运行程序,我们可以看到显示为10个“Hi”,证明ListView已经是在工作,虽然不是我们所需要的展示。在我们的设计中,我们的ListView的左边是一个图片,右边是一些文字。为了快速设计的方便,我们们将先只显示一行字。同时我们可以在网上的任何一个位置下载一个我们自己喜欢的图片并存放到项目根目录下的一个叫做“images”的目录中,并重新命令为sample.jpg。在这里,我选择网上的一个图片。我们也需要下载另外一个图片list.png来完成我们的这个步骤(存放于images目录中)。我们可以同时参阅Qt网页里的ListView。我们修改我们的程序如下:

import QtQuick 2.0
import Ubuntu.Components 1.1
import Ubuntu.Components.ListItems 1.0

Item {
    id: mainScreen

    ListModel {
        id: sampleListModel

        ListElement {
            imagePath: "images/sample.jpg"
            title: "First picture"
        }
        ListElement {
            imagePath: "images/sample.jpg"
            title: "Second picture"
        }
        ListElement {
            imagePath: "images/sample.jpg"
            title: "Third picture"
        }
    }

    Component {
        id: listDelegate
        BorderImage {
            source: "images/list.png"
            border { top:4; left:4; right:100; bottom: 4 }
            anchors.right: parent.right
            // width: mainScreen.width
            width: ListView.view.width

            property int fontSize: 25

            Rectangle {
                id: imageId
                x: 6; y: 4; width: parent.height - 10; height:width; color: "white"; smooth: true
                anchors.verticalCenter: parent.verticalCenter

                BorderImage {
                    source: imagePath; x: 0; y: 0
                    height:parent.height
                    width:parent.width
                    anchors.verticalCenter: parent.verticalCenter
                }

            }

            Text {
                x: imageId.width + 20
                y: 15
                width: ListView.view.width*2/3
                text: title; color: "white"
                font { pixelSize: fontSize; bold: true }
                elide: Text.ElideRight; style: Text.Raised; styleColor: "black"
            }
        }
    }

    UbuntuListView {
        id: listView
        width: mainScreen.width
        height:mainScreen.height

        model: sampleListModel

        delegate: listDelegate
    }

    Scrollbar {
        flickableItem: listView
    }
}

特别值得注意的是,我们这里使用了一个叫做listDelegate的Component来显示每一个list中的项。同时我们也使用了一个人工假想的sampleListModel来填充我们的数据。重新运行我们的应用。我们可以看到如下的显示:



到这里,我们基本上已经完成了整个ListView的显示。整个的源代码在如下的网址可以下载:

bzr branch lp:~liu-xiao-guo/debiantrial/flick2


3)创建toolbar

在这个章节里,我们来完成我们的toolbar的设计。再回到我们最上面图显示的最初的设计,我们需要有一个输入的框来输入我们的关键词以来搜索。

    BorderImage {
        id:toolbar

        anchors.bottom:parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter

        width: parent.width
        height: units.gu(6)

        source: "images/toolbar.png"
        border.left: 4; border.top: 4
        border.right: 4; border.bottom: 4

        Row {
            id:inputcontainer
            anchors.centerIn:toolbar
            anchors.verticalCenterOffset:6
            spacing:12
            Text {
                id:label
                font.pixelSize:30
                anchors.verticalCenter:parent.verticalCenter;
                text: i18n.tr("Search:")
                font.bold:true
                style:Text.Raised
                styleColor:"#fff"
                color:"#444"
            }

            TextField {
                id:input
                placeholderText: "Please input a text to search:"
                width:220
                text:"Beijing"
            }
        }

        Image {
            id: backbutton
            opacity:0
            source: "images/back.png"
            anchors.verticalCenter:parent.verticalCenter
            anchors.verticalCenterOffset:0
            anchors.left:parent.left
            anchors.leftMargin:8

            MouseArea{
                anchors.fill:parent
                onClicked: mainScreen.state=""
                scale:4
            }
        }
    }

整个的设计也是非常直接的。我们使用了一个toolbar.png作为背景。使用一个Row来管理我们的“Search”及TextField输入框。同时我们还有一个在默认情况下opacity为零的back.png的Image。它用来显示在detail屏中来返回到ListView.默认情况下是不可见的。我们需要下载toolbar.pngback.png来完成该步骤。为了能够得到整屏的显示,我们也对ListView的高度进行调整如下:

    UbuntuListView {
        id: listView
        width: mainScreen.width
        height:mainScreen.height - toolbar.height
        model: sampleListModel
        delegate: listDelegate
    }

重新运行我们的应用,我们可以看到如下的画面:



虽然现在还不能做什么,但是我们应用的基本框架已经搭好了。在接下来的章节中,我们来更进一步把真实的数据填进来。这个步骤的代码在如下的地址可以找到:

bzr branch lp:~liu-xiao-guo/debiantrial/flick3

3)对ListView添加真实的数据

虽然上面我们已经有一个显示,但是毕竟是虚假的数据。在这个章节中,我们将使用XmlListModel来对Flickr网站进行请求并得到真实的数据。首先,我们在PictureListView.qml的开始部分加入

import QtQuick.XmlListModel 2.0

在sampleListModel的上面加入如下的代码:

XmlListModel {
    id: feedModel

//     source: "http://api.flickr.com/services/feeds/photos_public.gne?format=rss2"
    source: "http://api.flickr.com/services/feeds/photos_public.gne?format=rss2&tags=" + escape(input.text)
    query: "/rss/channel/item"  // flickr
    namespaceDeclarations:  "declare namespace media=\"http://search.yahoo.com/mrss/\";"

    // Flickr
    XmlRole { name: "title"; query: "title/string()" }
    XmlRole { name: "imagePath"; query: "media:thumbnail/@url/string()" }
    XmlRole { name: "photoAuthor"; query: "author/string()" }
    XmlRole { name: "photoDate"; query: "pubDate/string()" }

    XmlRole { name: "url"; query: "media:content/@url/string()" }
    XmlRole { name: "description"; query: "description/string()" }
    XmlRole { name: "tags"; query: "media:category/string()" }
    XmlRole { name: "photoWidth"; query: "media:content/@width/string()" }
    XmlRole { name: "photoHeight"; query: "media:content/@height/string()" }
    XmlRole { name: "photoType"; query: "media:content/@type/string()" }
}

同时修改listView的model为feedModel:

    UbuntuListView {
        id: listView
        width: mainScreen.width
        height:mainScreen.height - toolbar.height
        model: feedModel
        delegate: listDelegate
    }

这里我们使用了XmlListModel来查询我们的数据。我们可以在浏览器中输入地址http://api.flickr.com/services/feeds/photos_public.gne?format=rss2&tags=beijing。我们可以看到如下的显示



我们通过XmlListModel进行查询,并同时转换为我们所需要的数据进行显示。比如我们用到的“title”及“imagePath”。在查询时我们也同时使用了input输入框中的text。我们运行我们刚生成的应用,并同时修改在输入框中的内容,比如“shanghai”或“tianjing”等。我们会看到内容的改变。

  

为了使得图片的大小更加适合于在手机上显示,我们也同时修改listDelegate中BorderImage的高度为180.

所有的源码可以在如下的地址找到:


bzr branch lp:~liu-xiao-guo/debiantrial/flick4

4)显示照片的详细信息

我们虽然已经显示了照片的详细信息,我们希望在点击每个ListView中的每个项目的时候,能够更加清楚地看得到更加详细的照片信息。为了能够达到这个目的,我们可以在ListView的右边放置一个同样大小的屏幕。当我们点击ListView中的每一项时,我们就把屏幕向右移动。这样就可以看到照片的详细信息。当我们看完照片时,我们也可以把屏幕向左移动这样又回到ListView的页面。为了达到这样的设计,我们在我们的项目中加入一个新的叫做“SpinnerImage.qml”的Component。它的创建方法和上面介绍的“PictureListView.qml”是一样的。它的设计如下:

import QtQuick 2.0

Image {
    id:image

    property bool loading:status != Image.Ready

    Image {
        id: container
        property bool on: false
        source: "images/spinner.png";
        visible: loading
        anchors.centerIn:parent
        NumberAnimation on rotation {
            running: loading ; from: 0; to: 360;
            loops: Animation.Infinite; duration: 2000
        }
    }
}

我们可以看到,这是一个Image中含有一个Image的Component。当id为image中的Image还在下载时,里面的container中的spinner.png将不断地旋转。我们需要下载spinner.png文件。

我们需要修改ListView的设计如下:

    Row {
        id:viewcontainer

        UbuntuListView {
            id: listView
            width: mainScreen.width
            height:mainScreen.height - toolbar.height

            model: feedModel
            delegate: listDelegate

            Scrollbar {
                flickableItem: listView
            }
        }

        SpinnerImage {
            id:viewscreen
            clip:true
            width:mainScreen.width
            height:mainScreen.height - toolbar.height
            smooth:true
            fillMode:Image.PreserveAspectFit
        }
    }

在这里我们使用了一个Row布局,从而产生了一个和mainScreen宽度两倍的显示。在起始显示的时候,只有最左边的显示可以在屏幕中展示。为了能够相应对触屏的响应,我们在我们的listDeleage中最外层的BorderImage中加入如下的代码:

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    viewcontainer.x = -mainScreen.width
                    viewscreen.source = imagePath
                }
            }

重新运行应用。我们发现,当我们点击listview中的每一项时,就会很快地切换到另外一个页面,并展示该图片。在实际体验中,这个可能并不是最好的,有时我们希望能看到一个平滑过度的中间状态。我们在这里可以使用QML中的状态来实现这个功能。在PictureListView.qml中,加入如下的代码(放在mainScreen):

    states: [
        State {
            name: "view"
            PropertyChanges {
                target: viewcontainer
                x:-mainScreen.width
            }
            PropertyChanges {
                target: backbutton
                opacity:1
            }
            PropertyChanges {
                target: inputcontainer
                opacity:0
            }
        }
    ]

    transitions: [
        Transition {
            NumberAnimation { target: viewcontainer; property: "x"; duration: 500
                easing.type:Easing.OutSine}
            NumberAnimation { target: inputcontainer; property: "opacity"; duration: 200}
            NumberAnimation { target: backbutton; property: "opacity"; duration: 200}
        }
    ]

在这里我们定义了一个新的状态“view”。默认的状态为"",即一个空字符串。在状态放生切换时我们可以使用transitions来实现动画的展示。在上面,我们使得在x发生改变时,需要500毫秒来完成。这样我们就可以看到状态的变化。加入了状态后,我们重新改写listDelegate中MouseArea中的代码:

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    viewscreen.source = imagePath.replace("_s", "_m")
                    mainScreen.state = "view"
                }
            }

在这里,我们同时也修改了imagePath中的内容,从而使得我们能够在展示详细图片时,使用的是“中”(m)等大小的图片而不是“小”(s)的图片。重新运行我们的应用:


   

当我们点击在ListView中的每个项时,就会展示它的详细的图片的情况。我们可以点击详细图片下方的箭头回到ListView中去。这个代码在toolbar的如下代码中可以到:

        Image {
            id: backbutton
            opacity:0
            source: "images/back.png"
            anchors.verticalCenter:parent.verticalCenter
            anchors.verticalCenterOffset:0
            anchors.left:parent.left
            anchors.leftMargin:8

            MouseArea{
                anchors.fill:parent
                onClicked: mainScreen.state=""
                scale:4
            }
        }

在这里我们可以看到,当我们点击的时候,mainScreen的状态state有设为"",也就是应用最起始的状态。在x坐标发生变化时,我们可以通过transitions来实现动画的效果。

这个应用在手机的图片为:

  


整个应用的源码在如下地址可以找到:

bzr branch lp:~liu-xiao-guo/debiantrial/flick5


5)更进一步完善应用

细心的开发者如果在手机上运行并输入字符串时,可能会发现跳出的键盘挡住了我们的输入框。我们可以通过打开在main.qml中的MainView中的如下的项:

anchorToKeyboard: true

更多的阅读可以参照文章来详细了解。

另外,在ListView中,当照片还在下载时,我们也希望能够看到不断选择的spinner。我们可以把listDelegate中的imageId修改为:

            Rectangle {
                id: imageId
                x: 6; y: 4; width: parent.height - 10; height:width; color: "white"; smooth: true
                anchors.verticalCenter: parent.verticalCenter

                SpinnerImage {
                    source: imagePath; x: 0; y: 0
                    height:parent.height
                    width:parent.width
                    anchors.verticalCenter: parent.verticalCenter
                }
            }

我们可以在UbuntuListView中加入“PullToRefresh”如下的代码:

        UbuntuListView {
            id: listView
            width: mainScreen.width
            height:mainScreen.height - toolbar.height

            model: feedModel
            delegate: listDelegate

            // let refresh control know when the refresh gets completed
            PullToRefresh {
                refreshing: listView.model.status === XmlListModel.Loading
                onRefresh: listView.model.reload()
            }

            Scrollbar {
                flickableItem: listView
            }
        }

这样,当我们往下拉ListView时,会自动更新我们的ListView中的内容。

我们也可以通过修改Flickr.png来实现我们自己的定制的icon。整个应用的最终版本在如下的地址可以找到:

bzr branch lp:~liu-xiao-guo/debiantrial/flick6

另外一个更加复杂的版本在如下地址可以下载:

bzr branch lp:~liu-xiao-guo/debiantrial/flickrfinal



作者:UbuntuTouch 发表于2014-10-29 15:44:42 原文链接
阅读:40 评论:0 查看评论

Read more
David Callé

A scope can provide persistent settings for simple customizations, such as allowing the user to configure an email address or select a distance unit as metric or imperial.

In this tutorial, you well learn how to add settings to your scope and allow users to customize their experience.

Read…

scope-settings_coffeenearby2 scope-settings_visitparis2 scope-settings_indieconcerts1

Read more
Joseph Salisbury

Meeting Minutes

IRC Log of the meeting.

Meeting minutes.

Agenda

20141028 Meeting Agenda


Release Metrics and Incoming Bugs

Release metrics and incoming bug data can be reviewed at the following link:

  • http://people.canonical.com/~kernel/reports/kt-meeting.txt


Status: Vivid Development Kernel

The Vivid kernel has been opened and master-next rebased to the lastest
v3.18-rc2 upstream kernel. We have witheld uploading to the archive
until we’ve progressed to a later -rc candidate.
—–
Important upcoming dates:
The Vivid ReleaseSchedule has not yet been posted.


Status: CVE’s

The current CVE status can be reviewed at the following link:

http://people.canonical.com/~kernel/cve/pkg/ALL-linux.html


Status: Stable, Security, and Bugfix Kernel Updates – Utopic/Trusty/Precise/Lucid

Status for the main kernels, until today (Sept. 30):

  • Lucid -
  • Precise -
  • Trusty – Testing

    Current opened tracking bugs details:

  • http://kernel.ubuntu.com/sru/kernel-sru-workflow.html

    For SRUs, SRU report is a good source of information:

  • http://kernel.ubuntu.com/sru/sru-report.html

    Schedule:

    cycle: 10-Oct through 31-Oct
    ====================================================================
    8-Oct Last day for kernel commits for this cycle
    09-Oct – 10-Oct Kernel prep
    12-Oct – 18-Oct Bug verification & Regression testing.
    19-Oct – 25-Oct Bug verification & Regression testing.
    26-Oct – 01-Nov Regression testing & Release to -updates.


Open Discussion or Questions? Raise your hand to be recognized

No open discussions.

Read more
UbuntuTouch

[原]使用URL dispatcher的范例

在上面的一篇文章中,我们介绍了如何使用URL disptacher。在这篇文章中,我们来通过一个范例更进一步来了解如何实现它。


1)创建一个具有URL dispatcher的应用

我们首先打开我们的SDK,然后创建一个最基本的QML template应用。我们把该应用叫做“MyApp”。我们首先在“MyApp”的根目录添加一个文件叫做“MyApp.url-dispatcher”文件,这里面的内容如下:

[
	{
		"protocol": "launchmyapp"
	}
]

这样的定义使得任何在Qt.openUrlExternally()中具有以“launchmyapp:///”开头的调用,就可以打开该应用。比如:

Qt.openUrlExternally("launchmyapp:///123");

同时,我们修改我们的manifest.json文件如下:

{
    "architecture": "all",
    "description": "description of MyApp",
    "framework": "ubuntu-sdk-14.10-dev2",
    "hooks": {
        "MyApp": {
            "apparmor": "MyApp.apparmor",
            "desktop": "MyApp.desktop",
	    "urls": "MyApp.url-dispatcher"
        }
    },
    "maintainer": "XiaoGuo, Liu <xiaoguo.liu@canonical.com>",
    "name": "com.ubuntu.developer.unknown.myapp",
    "title": "MyApp",
    "version": "0.1"
}

注意这里的“urls”项。到这里,我们基本上就可以让我们的应用能够被其它的应用调用了。为了能够得到调用应用传来的参数,我们也同时修改我们的desktop文件如下:

[Desktop Entry]
Name=MyApp
Exec=qmlscene $@ main.qml -- %u
Icon=MyApp.png
Terminal=false
Type=Application
X-Ubuntu-Touch=true

注意这里的"-- %u",这是加入的部分。为了能够在程序中显示得到的URL信息,我们对程序做了如下的修改:


import QtQuick 2.0
import Ubuntu.Components 1.1

/*!
    \brief MainView with a Label and Button elements.
*/

MainView {
    id:root

    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "com.ubuntu.developer.unknown.myapp"

    Component.onCompleted: {
        mylabel.text = "aaaa";
        console.log( "arg length: " + myarg.arguments.length );

        if ( myarg.defaultArgument === undefined) {
            mylabel.text = "undefined";
        } else {
            mylabel.text = "args: " + myarg.defaultArgument.at(0);
        }

        console.log("argument: " + myarg.defaultArgument.at(0));
        console.log("")
    }

    Arguments {
        id: myarg
        defaultArgument.help: "Expects URL of the media to play."
        defaultArgument.valueNames: ["URL"]
    }

    /*
     This property enables the application to change orientation
     when the device is rotated. The default is false.
    */
    //automaticOrientation: true

    // Removes the old toolbar and enables new features of the new header.
    useDeprecatedToolbar: false

    width: units.gu(50)
    height: units.gu(75)

    Page {
        title: i18n.tr("MyApp")

        Column {
            spacing: units.gu(1)
            anchors {
                margins: units.gu(2)
                fill: parent
            }

            Row {
                spacing: units.gu(2)

                Label {
                    id: mylabel
                    objectName: "label"

                    text: i18n.tr("Received parameters: ")
                }

                Label {
                    id: label
                    objectName: "label"

                    text: i18n.tr("")
                }

                Connections {
                    target: UriHandler
                    onOpened: {
                        // root.applicationName = "good"
                        mylabel.text = "dddddd";

                        var para = "";
                        for (var i = 0; i < uris.length; ++i) {
                            // application.parseArgument(uris[i])
                            console.log( uris[i] );
                            para +=  uris[i];
                        }

                        label.text = para;
                    }
                }
            }
        }
    }

}

注意这里的“UriHandler”部分,当应用在运行时,url dispatcher被调用时,该部分代码会被执行。当应用没有运行时,我们通过传人的参数从而得到输入的参数值:

    Arguments {
        id: myarg
        defaultArgument.help: "Expects URL of the media to play."
        defaultArgument.valueNames: ["URL"]
    }

整个的代码在如下的地址可以找到:

https://code.launchpad.net/~liu-xiao-guo/debiantrial/myapp


2)创建调用应用


这个应用其实很简单。我们直接创建一个基本的QML template应用,同时修改我们的main.qml如下:

import QtQuick 2.0
import Ubuntu.Components 1.1

/*!
    \brief MainView with a Label and Button elements.
*/

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "com.ubuntu.developer.unknown.launchmyapp"

    /*
     This property enables the application to change orientation
     when the device is rotated. The default is false.
    */
    //automaticOrientation: true

    // Removes the old toolbar and enables new features of the new header.
    useDeprecatedToolbar: false

    width: units.gu(100)
    height: units.gu(75)

    Page {
        title: i18n.tr("LaunchMyApp")

        Column {
            spacing: units.gu(1)
            anchors {
                margins: units.gu(2)
                fill: parent
            }

            Button {
                objectName: "button"
                width: parent.width

                text: i18n.tr("Launch MyApp")

                onClicked: {
                    Qt.openUrlExternally("launchmyapp:///123");
                }
            }

            Button {
                objectName: "button"
                width: parent.width

                text: i18n.tr("Open MyApp")

                onClicked: {
                    Qt.openUrlExternally("appid://com.ubuntu.developer.unknown.myapp/MyApp/current-user-version");
                }
            }
        }
    }
}

这里我们使用了两种方法来调用我们的“MyApp”。第一种是通过:

 Qt.openUrlExternally("launchmyapp:///123");

这种方法的好处是可以传人我们需要的参数,并解析,从而对于不同的参数可以得到不同的响应。

另外一种方式是通过:

Qt.openUrlExternally("appid://com.ubuntu.developer.unknown.myapp/MyApp/current-user-version");

这种方法不能解析任何的参数,它可以把应用启动起来。我们可以通过如下的方法得到应用的一些信息:


运行我们的应用:



我们按下第一个按钮,如果“MyApp”没有运行时,会显示如下的在左边的画面。如果“MyApp”在已经运行的情况下,可以看到如下的右边的画面:

   

如果,我们点击应用下面的按钮的话,可以看到如下的画面:



整个项目的源码在如下的地址可以找到:


bzr branch lp:~liu-xiao-guo/debiantrial/launchmyapp




作者:UbuntuTouch 发表于2014-10-28 12:49:37 原文链接
阅读:174 评论:0 查看评论

Read more
David Owen

This last Saturday, I gave a presentation on classification, starting with a basic linear classifier and building it up to k-class, n-dimensional classification. I've been asked for the material I used, so here are the links:
Continue reading "Material from my presentation on Classification"

Read more