基于Firefox OS平台的微件设置方法及系统的制作方法
【专利摘要】本发明公开基于Firefox?OS平台的微件设置方法及系统，其中，方法包括步骤：A、在接收到向桌面页面上添加微件的指令时，计算当前桌面页面中除去应用图标后的空间大小；B、判断所述空间大小是否可容纳需添加的微件，当是时，则将相应尺寸的iframe窗体添加到当前桌面页面，iframe窗体的源属性指向微件的web页面。本发明通过在Firefox?OS平台上使用iframe窗体作为容器承载Widget的内容页面，在添加Widget时，将相应尺寸的iframe窗体添加到当前桌面页面，iframe的源属性指向目标微件的web页面，这样即可实现在Firefox?OS平台上使用到非常方便直观的Widget组件。
【专利说明】基于Firefox OS平台的微件设置方法及系统
【技术领域】
[0001]本发明涉及计算机领域，尤其涉及基于Firefox OS平台的微件设置方法及系统。【背景技术】
[0002]随着移动设备的普及，各种移动操作系统层出不穷，比如谷歌的Android，苹果的iOS等等，不同系统有各自特点。其中，Mozilla公司开发的Firefox OS系统则以其优秀的性能，使其可以运行在低配硬件的移动设备上，从而让很多低端设备享受到了智能操作系统的优点。而在一些移动操作系统中，比如Android系统中，Widget组件(微件)是一种为用户提供简单直观的信息显示和操作的组件，但是受约束于不同公司的设计和定义，并不是每款操作系统都具有这样的组件，例如在Firefox OS平台中就无法实现Widget组件的功能，影响了用户的使用体验。
[0003]因此，现有技术还有待于改进和发展。
【发明内容】
[0004]鉴于上述现有技术的不足，本发明的目的在于提供基于Firefox OS平台的微件设置方法及系统，旨在解决现有Firefox OS平台无法实现微件功能的问题。
[0005]本发明的技术方案如下:
一种基于Firefox OS平台的微件设置方法，其中，包括步骤:
A、在接收到向桌面页面上添加微件的指令时，计算当前桌面页面中除去应用图标后的空间大小；
B、判断所述空间大小是否可容纳需添加的微件，当是时，则将相应尺寸的iframe窗体添加到当前桌面页面，iframe窗体的源属性指向微件的web页面。
[0006]所述的基于Firefox OS平台的微件设置方法，其中，采用具有透明属性的图标占位符占据在桌面页面上的空白位置，使桌面页面上的微件不自动缩进。
[0007]所述的基于Firefox OS平台的微件设置方法，其中，当需要移动微件时，还包括步骤:
C、系统捕获到目标微件的oncontextmenu事件，对目标微件应用区别于正常状态下微件的CSS样式，当用户拖动并放下目标微件后，计算目标微件当前位置的空间大小，并判断该空间大小是否可容纳该目标微件，当是时，移除目标微件原位置的iframe窗体，并使用图标占位符填充目标微件原位置，删除目标微件当前位置的图标占位符，将iframe窗体放置在目标微件当前位置上。
[0008]所述的基于Firefox OS平台的微件设置方法，其中，所述步骤C中，事先将桌面页面的window, onmessage绑定一个回调函数,当移动目标微件时，获取产生的拖动事件的坐标数据，并通过父窗口的iframe数组获取自身窗口对象,调用postMessage方法将坐标数据发送到父窗口，使桌面页面的回调函数重绘目标微件的位置。
[0009]所述的基于Firefox OS平台的微件设置方法，其中，当桌面页面中有效元素发生数量或位置的改动时，记录桌面页面的新状态，并将新状态序列化成json格式文件，将json格式文件存储进数据库。
[0010]所述的基于Firefox OS平台的微件设置方法，其中，当桌面系统重启时，从数据库中读取上一次存储的json格式文件，获取桌面页面的新状态，并按照桌面页面的新状态填充桌面兀素。
[0011]所述的基于Firefox OS平台的微件设置方法，其中，当桌面页面上的最后一个有效元素被移除时，使用图标占位符将刚移除的有效元素所在位置填充，然后检测当前桌面页面是否还存在有效元素，当没有时，将此桌面页面移除，将此桌面页面的新状态序列化为json格式文件，并存储进数据库中。
[0012]所述的基于Firefox OS平台的微件设置方法，其中，当需创建桌面页面时，将界面移至新创建的桌面页面，使用图标占位符将新桌面页面填充，在捕获到用户的drop事件后，根据drop事件的坐标计算微件的放置位置，然后移除该放置位置上的图标占位符，将iframe窗体置于该放置位置。
[0013]一种基于Firefox OS平台的微件设置系统，其中，包括:
空间大小计算模块，用于当需要往桌面页面上添加微件时，计算当前桌面页面中除去应用图标后的空间大小；
微件创建模块，用于判断所述空间大小是否可容纳需添加的微件，当是时，则将相应尺寸的iframe窗体添加到当前桌面页面，iframe窗体的源属性指向微件的web页面。
[0014]所述的基于Firefox OS平台的微件设置系统，其中，还包括:
填充模块，用于采用具有透明属性的图标占位符占据在桌面页面上的空白位置，使桌面页面上的微件不自动缩进。
[0015]有益效果:本发明通过在Firefox OS平台上使用iframe窗体作为容器承载Widget的内容页面,在添加Widget时,将相应尺寸的iframe窗体添加到当前桌面页面，iframe窗体的源属性指向目标微件的web页面,这样即可实现在Firefox OS平台上使用到非常方便直观的Widget组件,提升了 Firefox OS设备的使用体验。
【专利附图】
【附图说明】
[0016]图1为本发明基于Firefox OS平台的微件设置方法较佳实施例的流程图。
[0017]图2为图1所示的实施例步骤S102中在桌面页面上添加iframe窗体后的布局方式界面实例。
[0018]图3为图1所示的实施例步骤S102之后的移动桌面页面上Widge时的效果实例。
[0019]图4为图1所示的实施例步骤S102之后的在同一桌面页面上移动Widget的效果实例。
[0020]图5为图1所示的实施例步骤S02之后的在桌面页面上Widget产生拖动事件的原理实例。
[0021]图6为本发明基于Firefox OS平台的微件设置系统较佳实施例的流程图。【具体实施方式】
[0022]本发明提供基于Firefox OS平台的微件设置方法及系统，为使本发明的目的、技术方案及效果更加清楚、明确，以下对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
[0023]请参阅图1，图1为本发明基于Firefox OS平台的微件设置方法较佳实施例的流程图，如图所示，其包括步骤:
5101、在接收到向桌面页面上添加微件的指令时，计算当前桌面页面中除去应用图标后的空间大小；
5102、判断所述空间大小是否可容纳需添加的微件，当是时，则将相应尺寸的iframe窗体添加到当前桌面页面，iframe窗体的源属性指向微件的web页面。
[0024]为使专业性更强、便于阅读理解，以下用“Widget”替换“微件”进行描述。
[0025]本实施例是通过将iframe窗体作为容器承载Widget的内容页面,在添加微件时，若空间大小可容纳微件，则将与微件尺寸相同的iframe窗体添加到桌面页面上，iframe窗体的源属性指向微件的web页面。这样在基于Firefox OS平台的移动设备上即可实Widget功能。下面对本发明的具体实现过程的技术细节进行具体说明。
[0026]在移动设备的桌面上显示的是安装在本机上的应用程序图标，桌面布局方式通常有4*4、5*4等几种布局方式。所以Widget要创建在桌面上，也应当遵循这种布局方式。但是Widget并不仅限于占据一个基本单位的空间，根据其需要显示信息量的多少，其自身的大小可以是1*2，1*4，2*4等等各种情况。Widget所显示的内容是来自于其他应用程序的内容，或是某应用程序的数据，或是直接将某一界面的一部分(或几乎全部)显示出来，Widget的内容同时也可以是一个标准的HTML5应用，这与它是否以Widget的形式被加载在桌面上无关紧要。因为桌面系统自身就是一个HTML5应用程序，所以在桌面上创建Widget时，需要使用iframe窗体当作容器去承载Widget的内容页面。
[0027]以iframe窗体作为容器，其大小和尺寸较佳的是遵守桌面布局的N*N的规划，如图2所示，1'1、1'2、1'3、1'4分别代表第一行、第二行、第三行、第四行，(:1、(32、(33、(34分别代表第一列、第二列、第三列、第四列，但其布局方式不局限于此，仅是为了美观以及布局计算的方便。Widget具有和标准图标相同的属性，此外，还具有一些特有的属性，比如其占位高和占位宽，代表竖向和横向分别占据多少个标准图标大小的位置。
[0028]在本实施例中，Widget具有固定位置，即Widget图标的放置不会自动缩进，类似于Android图标放置风格，而不是iOS图标放置风格。为实现这一目的，在桌面页面的空白位置使用具有透明属性的图标占位符来占据。该图标占位符对象在数据结构上和Firefox
OS标准图标对象具有相同的属性，但是图标占位符的目标链接为空，且图标占位符的图标图片为纯透明状态，即不显示在桌面上。图标占位符在桌面计算空间时不被计入有效图标数量，即图标占位符当作不存在。
[0029]在本实施例中，用户可通过一定的手势或菜单选择将某个Widget添加到桌面上，此时，桌面系统会根据此Widget的尺寸属性计算出它所需要占据的空间大小，然后判断当前桌面页面中除去应用图标后剩下的空间是否可以容纳这个Widget，如果不可以，则向用户弹出提示以说明不能添加的原因为桌面空间不足。如果空间足够，则加入相应尺寸的iframe窗体到桌面页面上，iframe的源属性(src)指向Widget的Web页面。
[0030]Widget添加完毕之后，用户可以通过长按手势激活Widget的操作状态，即在步骤S102之后还可以包括如下步骤: 当需要删除Widget时，包括步骤:1、长按Widget2秒以上(此时间可根据实际需要设置)；2、系统捕获到Widget的oncontextmenu事件(在PC浏览器中，contextmenu事件是由鼠标右键触发，而在Firefox OS中是由长按触发的);3、对Widget应用其他CSS样式，使之有区别于正常状态下的Widget，并且在桌面页面上的任意位置添加删除按钮或标识；4、通过点击删除按钮/标识，桌面系统移除此Widget对应的iframe窗体，实现删除Widget。
[0031]当需要移动(即拖动)Widget,包括步骤:1、长按Widget2秒以上并且不离开屏幕；2、系统捕获到Widget的oncontextmenu事件；3、对Widget应用其他CSS样式,使之有区别于正常状态下的Widget，并且在桌面页面上的任意位置添加删除按钮/标识；4、当用户拖动Widget在屏幕上移动并放下后，计算Widget当前位置的空间大小，并判断该空间大小是否可容纳该Widget,当是时,移除Widget原位置的iframe窗体,并使用图标占位符填充目标微件原位置，删除Widget当前位置的图标占位符，将iframe窗体放置在Widget当前位置上。
[0032]在上述实施例中，如果Widget —直在同一桌面页面中移动，如图3所示，则只改变Widget的iframe窗体的CSS的X、Y坐标属性即可；如果移动至其他桌面页面,则由桌面系统控制界面转至其他桌面页面，如果Widget移动至最后页的边缘(即用户想添加新桌面页并用来放置Widget)，此流程在后面单独说明。
[0033]当用户放置Widget时,系统捕获到iframe窗体的ondrop事件,此时桌面系统计算Widget当前位置是否有足够空间放置该Widget。
[0034]以行数的改变为例，即上下移动:
当Widget大小为l*n (与列数无关，下同)，则计算手指离开的坐标所在行(称为L行，下同)是否有足够空间来放置Widget。
[0035]当Widget大小为2*n，则计算L和(L+1)行，或者L和(L-1)行是否有足够空间来放置Widget,如果L为第一行,则相应省略L和(L-1)的计算过程,如果L为最后一行,则相应省略L和(L+1)的计算过程，因为这种两种情况下，均不足以放置该Widget，如图4所示，该Widget大小为2*n, Widget从桌面页面的顶部移动至下方,且其他图标不会自动缩进。
[0036]当Widget 大小为 3*n，则计算 L, (L_2)，(L-1)或者(L-1 )，L，(L+1)或者 L, (L+1),(L+2)行是否有足够空间来放置Widget，如果L为第一行、第二行、倒数第一行、或者倒数第二行，则同样略去超出行外的计算过程。
[0037]对于其他行数L的改变，以此类推。
[0038]在计算得到在Widget当前位置的空间大小后，判断是否足够放置该Widget，在判定为没有足够空间放置Widget时，返回原始状态，即不对桌面状态进行改变。在判定为有足够空间放置Widget时，则移除Widget原位置的iframe窗体，并使用图标占位符填充Widget原位置,删除Widget新位置的图标占位符,将iframe窗体放置在Widget新位置上。
[0039]以Firefox OS运行应用程序的机制来说，每个应用都由单个或多个Web页面组成，都具有自己单独的“域”，而在HTML中跨域通信是受到严格限制的，所以当在Widget中的长按以及拖动等事件只能在Widget页面中捕获，并不能传递到桌面页面中，所以必须使用postMessage方法互相通信。
[0040]以Widget移动为例，事先将桌面页面的window, onmessage绑定一个回调函数F,当手指拖动Widget时,取得产生的拖动事件的坐标数据，并通过父窗口的iframe数组拿到自身窗口对象(为此，需要对每个iframe窗体设置name属性),调用postMessage方法将坐标数据发送到父窗口(桌面页面)，此时桌面页面的回调函数F就会运行，在F函数中重绘Widget的位置，于是就产生了拖动的效果，其过程如图5所示。
[0041]基于上述原理，本发明实施例中，当桌面状态变化时，其包括如下步骤:
当桌面页面中有效元素(例如图标和Widget)发生数量或位置的改动时,桌面系统记录桌面页面的新状态记录，即将桌面页面有效元素的数据结构对象组织成数组或列表等，然后桌面系统将新状态序列化成json格式文件，最后将json格式文件存储进数据库，可具体可通过使用indexDB来存储。
[0042]这样，当设备重新启动或其他原因导致桌面系统重新启动时，桌面系统从数据库中读取上一次存储的json格式文件，获取桌面页面的新状态，并按照桌面页面的新状态依次填充桌面元素(桌面有效元素)，同时桌面系统进入状态的监听状态。
[0043]当桌面页面上的最后一个有效兀素(图标和Widget)被移除时,桌面系统使用图标占位符将刚移除的有效元素位置填充，然后桌面系统检测桌面页面是否还存在有效元素，如果没有有效元素，桌面系统此桌面页面从桌面中移除，界面回到前一桌面页，同时桌面系统将此时的桌面状态序列化为json格式文件，并存储进数据库中。
[0044]当Widget接收用户拖动事件,并且Widget被拖动至最后桌面页面的下一边缘(即用户希望创建一新的桌面页面)，桌面系统会自动创建新的桌面页面，并将界面移至新桌面页，使用图标占位符将新桌面页填充，在捕获到用户的drop事件后，根据drop事件的坐标计算此Widget的放置位置,然后移除放置位置上的图标占位符,将Widget的iframe元素置于此放置位置。
[0045]基于上述方法，本发明还提供一种基于Firefox OS平台的微件设置系统，如图6所示，其包括:
空间大小计算模块100，用于在接收到向桌面页面上添加微件的指令时，计算当前桌面页面中除去应用图标后的空间大小；
微件创建模块200，用于判断所述空间大小是否可容纳需添加的微件，当是时，则将相应尺寸的iframe窗体添加到当前桌面页面，iframe窗体的源属性指向微件的web页面。关于上述模块的技术细节在前面的方法中已有对应说明，故不再赘述。
[0046]进一步，所述系统还包括:
填充模块，用于采用具有透明属性的图标占位符占据在桌面页面上的空白位置，使桌面页面上的微件不自动缩进。关于上述模块的技术细节在前面的方法中已有对应说明，故不再赘述。
[0047]综上所述，本发明通过在Firefox OS平台上使用iframe窗体作为容器承载Widget的内容页面,在添加Widget时,将相应尺寸的iframe窗体添加到当前桌面页面，iframe的源属性指向目标微件的web页面,这样即可实现在Firefox OS平台上使用到非常方便直观的Widget组件,提升了 Firefox OS设备的使用体验。
[0048]应当理解的是，本发明的应用不限于上述的举例，对本领域普通技术人员来说，可以根据上述说明加以改进或变换，所有这些改进和变换都应属于本发明所附权利要求的保护范围。
【权利要求】
1.一种基于Firefox OS平台的微件设置方法，其特征在于，包括步骤: A、在接收到向桌面页面上添加微件的指令时，计算当前桌面页面中除去应用图标后的空间大小； B、判断所述空间大小是否可容纳需添加的微件，当是时，则将相应尺寸的iframe窗体添加到当前桌面页面，iframe窗体的源属性指向微件的web页面。
2.根据 权利要求1所述的基于FirefoxOS平台的微件设置方法，其特征在于，采用具有透明属性的图标占位符占据在桌面页面上的空白位置，使桌面页面上的微件不自动缩进。
3.根据权利要求2所述的基于FirefoxOS平台的微件设置方法，其特征在于，当需要移动微件时，还包括步骤: C、系统捕获到目标微件的oncontextmenu事件，对目标微件应用区别于正常状态下微件的CSS样式，当用户拖动并放下目标微件后，计算目标微件当前位置的空间大小，并判断该空间大小是否可容纳该目标微件，当是时，移除目标微件原位置的iframe窗体，并使用图标占位符填充目标微件原位置，删除目标微件当前位置的图标占位符，将iframe窗体放置在目标微件当前位置上。
4.根据权利要求3所述的基于FirefoxOS平台的微件设置方法，其特征在于，所述步骤C中，事先将桌面页面的window, onmessage绑定一个回调函数，当移动目标微件时，获取产生的拖动事件的坐标数据，并通过父窗口的iframe数组获取自身窗口对象，调用postMessage方法将坐标数据发送到父窗口，使桌面页面的回调函数重绘目标微件的位置。
5.根据权利要求4所述的基于FirefoxOS平台的微件设置方法，其特征在于，当桌面页面中有效元素发生数量或位置的改动时，记录桌面页面的新状态，并将新状态序列化成json格式文件,将json格式文件存储进数据库。
6.根据权利要求5所述的基于FirefoxOS平台的微件设置方法，其特征在于，当桌面系统重启时，从数据库中读取上一次存储的json格式文件，获取桌面页面的新状态，并按照桌面页面的新状态填充桌面元素。
7.根据权利要求4所述的基于FirefoxOS平台的微件设置方法，其特征在于，当桌面页面上的最后一个有效元素被移除时，使用图标占位符将刚移除的有效元素所在位置填充，然后检测当前桌面页面是否还存在有效元素，当没有时，将此桌面页面移除，将此桌面页面的新状态序列化为json格式文件，并存储进数据库中。
8.根据权利要求4所述的基于FirefoxOS平台的微件设置方法，其特征在于，当需创建桌面页面时，将界面移至新创建的桌面页面，使用图标占位符将新桌面页面填充，在捕获到用户的drop事件后，根据drop事件的坐标计算微件的放置位置，然后移除该放置位置上的图标占位符，将iframe窗体置于该放置位置。
9.一种基于Firefox OS平台的微件设置系统，其特征在于，包括: 空间大小计算模块，用于在接收到向桌面页面上添加微件的指令时，计算当前桌面页面中除去应用图标后的空间大小； 微件创建模块，用于判断所述空间大小是否可容纳需添加的微件，当是时，则将相应尺寸的iframe窗体添加到当前桌面页面，iframe窗体的源属性指向微件的web页面。
10.根据权利要求9所述的基于FirefoxOS平台的微件设置系统，其特征在于，还包括: 填充模块，用于采用具有透明属性的图标占位符占据在桌面页面上的空白位置，使桌面页面上的微件不自动缩进。
【文档编号】G06F9/44GK103699381SQ201310707980
【公开日】2014年4月2日 申请日期:2013年12月20日 优先权日:2013年12月20日
【发明者】豆泽云 申请人:Tcl集团股份有限公司