Skip to main content

20 posts tagged with "FirefoxOS"

View All Tags

· 2 min read

I'm pleased to release first FoxBox version that may save a lot of time for people who wants to give FirefoxOS development a try.

For web developer who wants to contribute to gaia might meet a serious problem that they might have limit knowledge of *nix system. But to build gaia, the command line and make script is essential.

For developer who wants to contribute to B2G project, a bunch of per-requisite settings must be configured well before really digging into the code.

FoxBox could help (currently I mainly focus on) B2G/gaia developer quickly setup a working environment in VM.

Generally FoxBox 0.4 provide a Vagrantfile which automatically configure a VM with bunch of tools you need for building FirefoxOS and gaia development.

FoxBox have put a comprehend list of USB vendors, so any Android/FirefoxOS smartphone plugged can be identified.

With vagrant's NFS shared folder, developer can use their favorite editor to code.

FoxBox also bundled with a minimum GUI environment that enable you to test FirefoxOS in VM. Firefox Nightly will be pre-installed for you as well!

Read README for more detail.

Happy Hacking!

Disclaim: Though I work for mozilla, FoxBox is not an official project of Mozilla. Currently its just my side project create around Chinese New Year's holiday.

· 2 min read

 

List of UI elements

Though what FirefoxOS encourage developers to develop for the (general) Web, but not for FirefoxOS only. There's still a portion of developers would prefer to start their very first mobile web app with FirefoxOS native look and feel.

From Feb 2013, I've made my first Firefox/OS marketplace webapp: UI Demos , which demonstrate FirefoxOS (gaia) UI Building-Blocks elements and provide correspondent code blocks for reference.  (The wrapper version of UI Demos is also available in Android Play Store)

Basically those FirefoxOS(gaia) UI Building-Blocks are a set of UI elements defined purely in CSS. So you can include correspondent styles and see your web changed to a 'mobile' looking.

 

Custom headers

Since these UI are intended to serve the need of FirefoxOS(gaia) presence, they looks not well in other browser. (update: Include cross_browser.css if you want your webapp can run on other browsers.)

Recently FirefoxOS UI related developers starting a project called "Building-Blocks" to make developers outside of FirefoxOS (gaia) can reuse the same UI more easily.

https://github.com/buildingfirefoxos/Building-Blocks/

  1. Currently you can git clone the code from git https://github.com/buildingfirefoxos/Building-Blocks.git

2. I also register 'building-blocks' to bower list so my webapplate project or yeoman generators can reuse it with bower. Use bower (need ran 'npm install -g bower' first) to install 'building-blocks' into your project is easy $ bower install building-blocks

Or you can predefined required libraries in 'bower.json' file. then run 'bower install' directly.

For code and demos, please install UI Demos by your Desktop Firefox browser or FirefoxOS devices.

 

Reusable code samples

· 2 min read

原來就預期今年會有很多 OS 出現,但沒想到有那麼多。 來簡單整理一下列個表。如果有漏掉的,請路過的讀者幫忙提醒吧。

後面括號 (Mod) 表示是 Android 的衍生版本。月份是大概印象,與實際日期可能有出入。

這些 OS 其中當然有些只是拿來賺眼球,還沒有實際出貨計劃的 OS。 不過廠商群雄並起逐鹿的感覺,當可確認現在已進入後 PC 時代無疑。

3 月

OUYA (Mod) 遊戲機與自有市集

Smartisn OS (錘子 OS, Mod)

BlackBerry 10 OS 已出兩隻手機

5 月

Android 4.3 + Google Services 各種跨版本可用的 Google 服務,扁平化與卡片式設計 現有設備升級,n 台新機

Chrome OS Pixel 筆電與 Chrome box

7 月

FirefoxOS 1.0.1 ZTE open, TCL One touch Fire

Ubuntu Phone 相似的概念性界面還有 for Tablet, for Android, for TV...

9 月 CyanogenMod (Mod) 宣布公司化

Sailfish OS

iOS7 iOS 五年來最大的改版

現有設備升級,iPhone 5s, 5c

SteamOS 客廳與遊戲用 OS

10 月

FirefoxOS 1.1

Ali OS (阿里 OS) 可定製手機

11 月

Tizen 平板

 

Android 4.4 KitKat

· One min read

上週在 Coscup 2013 演講的投影片,介紹為何要參與 Open Source 專案,基本 Firefox OS 架構,和 web 技術人如何運用自己的能力來參與 Gaia 專案開發。

Steps to contribute to firefox os (gaia) 

為這次演講花一個晚上做了一個簡單的 hack demo,在撥打電話時,馬總統會報出正在播的數字。

感謝馬總統跨刀演出。

聲音來自 Open Source 的 Bumbler to speech 專案。

· 3 min read

'repo' is a good tool to manage project with multiple git repositories. Its developed to serve the need to manage Android Open Source Project (AOSP), which counts on bunch of open source projects. Then the 'repo' tool is used for chromium and chromium OS (known as open source version of Chrome browser and Chrome OS). Now Mozilla Boot-to-Gecko (B2G, known as Firefox OS) also adpot the 'repo' tool to manage multiple git repositories.

For a short time of experiment, I find its pretty simple to setup your own 'repo' that can help you manage multiple git repositories. Here is my findings.

To install 'repo' command, you can refer to Installing repo.

Make your own repo

All you have to do is:

1. setup an accessible git repository 2. Put a 'default.xml' file in it 3. Use 'repo init' command to access this  git repository.

Done!

Here is the default.xml sample, there are three main tags:

<div class="highlight">> <span class="cp">&lt;?xml version="1.0" encoding="UTF-8"?&gt;</span>
> <span class="nt">&lt;manifest&gt;</span>
> <span class="c">&lt;!-- define hosts --&gt;</span>
> <span class="nt">&lt;**remote**</span> <span class="na">name=</span><span class="s">"b2g"</span> <span class="na">fetch=</span><span class="s">"https://github.com/mozilla-b2g/"</span><span class="nt">/&gt;</span>
> <span class="c">&lt;!-- default settings --&gt;</span>
> <span class="nt">&lt;**default**</span> <span class="na">sync-j=</span><span class="s">"4"</span><span class="nt">/&gt;</span> <span class="c"><!-- projects -->**project** remote="b2g" revision="refs/heads/master" name="gaia" path="."</manifest>Look at the 'project' tag. It describes that we'd like to sync the 'gaia' repository's 'master' branch from remote 'b2g' host.

Explaination

<?xml version="1.0" encoding="UTF-8">
<manifest>
...
</manifest>

The 'default.xml' syntax is wrapped by 'manifest' tag. It contains three parts of definition:

Hosts

<remote name="b2g" fetch="https://github.com/mozilla-b2g/"/>

remote' tag is used to define the hosts that we'd like to use in projects. Note that it's not the actual git URL, but where the git hosted on.We can specify the actual git URL in 'project' tag.

Projects

<project 
remote="b2g"
revision="refs/heads/master"
name="gaia"
path="."/>

The file describes that we'll like to sync the 'gaia' repository's 'master' branch from remote 'b2g' host.

The 'revision' path is defined within the original .git folder. To switch to branch like "v1.0.1", we could change  "refs/heads/master" to "refs/heads/v1.0.1".

It's almost the same as we have to do with git command.

By the way, default.xml itself is in a git repository, so you can specify versions by branch or whatever you like.

Defaults <default sync-j="4" />

In default tag we can specify the default values in project tag. ex: revisions, default repositories..., etc. 'sync-j' means with this setting, 'repo' command will download 4 resources at the same time.

The usage

Create a folder, switch in it, and run the following command:

> $ repo init -u https://&lt;your own git URL&gt;.gitThen, fetch the resources with command

> $ repo syncTo fetch a branch, run command
> $ repo init -u https://&lt;your own git URL&gt;.git **-b** &lt;branch&gt;

Read Git and repo cheatsheet for more details about how git and repo tool work together.  

Sample

Here is a working sample that able you to sync Mozilla Gaia repositorie, and automatically put vendor customization folder into its 'distribution/' sub-folder to ease the customization work.

https://github.com/gasolin/gaia-custom-repo

Update at 7/29:

A workable process elaboration in slide format http://gasolin.github.io/gaia-repo/