You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by ha...@apache.org on 2017/10/13 13:04:02 UTC
[07/51] [abbrv] incubator-weex-site git commit: rearrangement the
structure of the document
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/advanced/extend-jsfm.md
----------------------------------------------------------------------
diff --git a/source/references/advanced/extend-jsfm.md b/source/references/advanced/extend-jsfm.md
deleted file mode 100644
index fc0fd79..0000000
--- a/source/references/advanced/extend-jsfm.md
+++ /dev/null
@@ -1,167 +0,0 @@
----
-title: Extend JS framework
-type: references
-order: 11.4
-version: 2.1
----
-
-# Extend JS framework
-
-This part of the extension of JS framework is still in the discussion, may be adjusted at any time, please pay attention.
-
-Weex wants to be able to respect as many developer development habits as possible.So, in addition to Weex official support Vue 2.0, the developer can also customize and horizontally extension their own or their favorite JS Framework.The steps to customize the JS Framework are as follows:
-
-+ First you have a complete set of JS Framework.
-+ Learn about Weex's JS engine feature support.
-+ Adapting Weex's native DOM APIs.
-+ Adapting Weex's initialization portal and multi-instance management mechanism.
-+ Add your own JS Framework to the framework configuration of the Weex JS runtime. Then pack it.
-+ Build JS bundles based on the JS Framework. You need to add a specific prefix comment so that the Weex JS runtime can recognize it.
-
-## Weex JS engine features support
-
-+ Under iOS, Weex uses the JavaScriptCore that comes with the system, so the ES support depends on the version of the operating system.
-The current conservative judgments, ES5 features on the market mainstream iOS devices are perfectly supported, but some of the features of ES6 + is not supported.
-
-+ Under Android, Weex uses the v8 kernel provided by UC. For performance and stability considerations, we are not using the latest version of the v8 kernel.The same conservative judgment, the ES5 feature can all support, including strict mode `Object.freeze` and so on.
-
-+ The Weex JS engine does not support HTML DOM APIs and HTML5 JS APIs, including `document`, `set`Timeout`, and so on.
-
-+ We added `Promise`'s polyfill, as well as the `console`'s polyfill.
-
-+ In addition, in order to ensure that the JS engine can manage memory as much as possible, we have a generic global object for the `Object.freeze ()` freeze operation, which includes:
-
- - `Object`
- - `Object.prototype`
- - `Array`
- - `Array.prototype`
- - `String.prototype`
- - `Number.prototype`
- - `Boolean.prototype`
- - `Error.prototype`
- - `Date.prototype`
- - `RegExp.prototype`
-
-## Adapt to Weex's initial entry and multi-instance management mechanism
-
-The JS Framework provided by the developer needs to be packaged as a **CommonJS** package, and the package needs to be extension to the following methods:
-
-### Framework initialization
-
-+ `init(config)`
- - `config`
- - `Document`
- - `Element`
- - `Comment`
- - `TaskSender`
- - `CallbackManager`
-
-This method places the Native DOM class and two auxiliary classes provided by Weex in the `config` parameter and allows the framework itself to be initialized.
-
-Tip: At the same time, the author can pass in a different `config` in the framework of the initialization time. This allows for framework testing or environmental simulation.
-
-#### Introduction to parameter format
-
-+ `TaskSender`: wip…
-+ `CallbackManager`: wip…
-
-### Register available native components and modules
-
-+ `registerComponents(components)`
-+ `registerModules(modules)`
-
-These two methods are called immediately after the frame is initialized. This framework will be able to know which components and modules the current client supports.
-
-#### Introduction to parameter format
-
-+ `components: Array`: Describe the array of components, each of which includes:
- + `type: string`: Component name, for example `div`。
- + `methods: string[]`: Optional, a list of method names supported by this component. These methods can follow the native DOM APIs call.
-+ `modules: Object`: Describe the hash table of a series of modules. Key is the module name, the value is an array. The elements of the array describe a method in the module. The information of the method includes:
- + `name: string`: Method name
- + `args: string[]`: Parameter number and type description
-
-**E.g:**
-
-```javascript
-registerComponents([
- { type: 'web', methods: ['goBack', 'goForward', 'refresh']}
-])
-registerModules({
- event: [
- {name: 'openURL', args: ['string']}
- ]
-})
-```
-
-### Multi - instance lifecycle management
-
-+ `createInstance(instanceId, code, config, data, env)`
-+ `refreshInstance(instanceId, data)`
-+ `destroyInstance(instanceId)`
-
-Each Weex page has two stages: created and destroyed. At the same time in the Weex page running process, native can send messages to the Weex page. Different frameworks can follow their own ideas to achieve the message.
-
-#### Introduction to parameter format
-
-+ `instanceId: string`: The unique id of the Weex page is generated by native.
-+ `code: string`:The Wex page's JS bundle's code is passed through native.
-+ `config: Object?`: The configuration information for the Wex page, such as the bundleUrl representing the bundle address, is generated by the native configuration. It has nothing to do with the contents of the JS bundle itself.
-+ `data: Object?`: Native can import an external data when creating a Weex page. The JS framework can also generate different page content for the same JS bundle with different data.
-+ `env: Object?`:The current environment information about the Weex page, the meaning of each field:
- - `info: Object`: Framework information, see the "JS Bundle format requirements" later.
- - `config: Object`:Equivalent to the third parameter of the method `config`
- - `callbacks: CallbackManager`: only `CallbackManager`instance of Weex page.
- - `created: number`:The number of seconds that the Wex page was created.
- - `framework: string`:The name of the framework used by the Wex page. Equivalent to `info.framework`.
-
-### Native communication
-
-+ `receiveTasks(instanceId, tasks)`
-
-Native can use the `refreshInstance` method to send a message to the JS framework layer. But in many cases will use `receiveTasks` to send user events or methods callback to the JS framework.
-
-For example, if the user clicks on a button, native will send a `fireEvent` type of task to the JS framework, and then the JS framework will handle the corresponding event logic. This part of the working mechanism is related to the design of the `addEvent` in the native DOM interface.
-
-Another example is the user using fetch to send network requests. When the request is done at the native end, it will be sent to the JS framework with a callback type of task. Since native can not pass the function in JavaScript, it actually only sends a callbackId to the JS framework. This part of the working mechanism is related to the design of CallbackManager.
-
-#### Auxiliary method
-
-+ `getRoot(instanceId): JSON`
-
-This method returns the full JSON description of the document body node. Developers can view the full native DOM tree as a result. The format of the specific return value is the same as the return method of the toJSON () method in the native DOM interface. This feature is used extensively as a developer tool extension.
-
-## Configure the JS Framework in WeexSDK
-### Prepare your JS Framework code
-
-```javascript
-// your-own-js-framework.js
-export function init (config) { ... }
-export function registerComponents (components) { ... }
-export function registerModules (modules) { ... }
-export function createInstance (id, code, config, data, env) { ... }
-export function destroyInstance (id) { ... }
-export function refreshInstance (id, data) { ... }
-export function recieveTasks (id, tasks) { ... }
-export function getRoot (id) { ... }
-```
-
-### Register a JS Framework
-
-```javascript
-import * as Vue from '...'
-import * as React from '...'
-import * as Angular from '...'
-export default { Vue, React, Angular };
-```
-And then packaged JS runtime, integrated into WeexSDK.
-
-#### JS Bundle format requirements
-
-**Framework info**
-The note(alias framework info) at the beginning of the JS Bundle file is very important. The format is as follows:
-
-```javascript
-// { "framework": "Vue" }
-```
-So that the Weex JS engine will know that the JS bundle needs to use the Vue framework to resolve.Similarly, Weex supports multiple frameworks.It will be based on js bundle notes to select the corresponding framework resolution.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/advanced/extend-to-android.md
----------------------------------------------------------------------
diff --git a/source/references/advanced/extend-to-android.md b/source/references/advanced/extend-to-android.md
deleted file mode 100644
index 2ec4bc5..0000000
--- a/source/references/advanced/extend-to-android.md
+++ /dev/null
@@ -1,219 +0,0 @@
----
-title: Extend to Android
-type: references
-order: 11.2
-version: 2.1
----
-
-# Extend to Android
-
-## Module extend
-
-weex sdk support Module extend, Weex SDK provides only rendering capabilities, rather than have other capabilities, such as network, picture, and URL redirection. If you want the these features, you need to implement it.
-
-For example: If you want to implement an address jumping function, you can achieve a Module Follow the steps below.
-
-### Step to customize a module
-
-- Customize module must extend WXModule
-- @WXModuleAnno annotation must be added, as it is the only the way to recognized by Weex
-- The access levels of mehtod must be **public**
-- The module class also can not be an inner class
-- Customize can not be obfuscated by tools like ProGuard
-- Module methods will be invoked in UI thread, do not put time consuming operation there
-- Weex params can be int, double, float, String, Map, List
-
-Refer to the following example:
-
-```java
-public class WXEventModule extends WXModule{
-
- private static final String WEEX_CATEGORY="com.taobao.android.intent.category.WEEX";
-
- @WXModuleAnno
- public void openURL(String url){
- //implement your module logic here
- }
-}
-```
-
-#### Support synchronous/asynchronous callback
-
-You can add `@JSMethod (uiThread = false or true)` annotation to choose the callback mode of moudle. See the follow example.
-
-```java
- // as sync-callback mode
-@JSMethod (uiThread = false)
-public void testSyncCall(){
- WXLogUtils.d("WXComponentSyncTest : Thread.currentThread().getName());
-}
-
-// as async-callback mode
-@JSMethod (uiThread = true)
-public void testAsyncCall(){
- WXLogUtils.e("WXComponentASynTest : Thread.currentThread().getName() );
-}
-```
-
-### Register the moulde
-
-```java
-WXSDKEngine.registerModule("event", WXEventModule.class);
-```
-
-### Use this module in weex DSL
-Now `event` moudle is avaiable in weex, use the module like this:
-
-```javascript
-var event = weex.requireModule('event');
-event.openURL("http://www.github.com");
-```
-
-### Javascript callback
-
-If the module need implement a callback to javascript, you just add `JSCallback` argument to the method you want expose to javascript:
-
-```java
-@WXModuleAnno
-public void openURL(String url,JSCallback callback){
- //implement your module logic here
- Map<String,Object> resp = new HashMap();
- resp.put("result","ok");
- callback.invoke(resp);
-}
-```
-
-At the javascript side, call the module with javascript function to receive callback data:
-
-```javascript
-event.openURL("http://www.github.com",function(resp){ console.log(resp.result); });
-```
-
-### Component extend
-
-There are label, image, div, scroll, ect. components in weex, you can also customize your own components.
-
-#### Step to customize a component
-
-1. Customize components must extend WXComponent or WXContainer
-2. @WXComponentProp(name=value(value is attr or style of dsl)) for it be recognized by weex SDK.
-3. The access levels of mehtod must be **public**
-4. The component class can not be an inner class
-5. Customize can not be obfuscated by tools like ProGuard
-6. Component methods will be invoked in UI thread, do not put time consuming operation there.
-7. Weex params can be int, double, float, String, Map, List, Array
-
-
-Refer to the following example
-
-```java
-public class MyViewComponent extends WXComponent{
- public MyViewComponent(WXSDKInstance instance, WXDomObject dom,
- WXVContainer parent, String instanceId, boolean isLazy)
- {
- public MyViewComponent(WXSDKInstance instance, WXDomObject dom,
- WXVContainer parent, String instanceId, boolean isLazy) {
- super(instance, dom, parent, instanceId, isLazy);
- }
-
- @Override
- protected void initView() {
- mHost = new TextView(mContext);
- }
- @WXComponentProp(name=WXDomPropConstant.WX_ATTR_VALUE)
- public void setMyViewValue(String value) {
- ((TextView)mHost).setText(value);
- }
-}
-```
-
-#### Register the Component
-
-
-```java
-WXSDKEngine.registerComponent("MyView", MyViewComponent.class);
-```
-
-### Adapter extend
-
-#### ImagedownloadAdapter
-
-Weex SDK has no image download capability, you need to implement `IWXImgLoaderAdapter`. Refer to the following examples.
-
-```java
-public class ImageAdapter implements IWXImgLoaderAdapter {
-
- private Activity mContext;
-
- public ImageAdapter(Activity activity) {
- mContext = activity;
- }
-
- @Override
- public void setImage(final String url, final ImageView view,
- WXImageQuality quality, WXImageStrategy strategy) {
- mContext.runOnUiThread(new Runnable() {
-
- @Override
- public void run() {
- if (TextUtils.isEmpty(url)) {
- view.setImageBitmap(null);
- return;
- }
- String temp = url;
- if (url.startsWith("//")){
- temp = "http:" + url;
- }
- if (view.getLayoutParams().width<=0 || view.getLayoutParams().height<=0) {
- return;
- }
- Picasso.with(WXEnvironment.getApplication())
- .load(temp)
- .resize(view.getLayoutParams().width,
- view.getLayoutParams().height).into(view);
- }
- });
- }
-}
-```
-
-#### Component Method
- from WeexSDK `0.9.5`, you can define your component method
-
- for example, define a method in component:
-
- ```java
- @JSMethod
- public void focus(){
- //method implementation
- }
- ```
-
- after your registration for your own custom component, now you can call it in your js file.
-
- ```html
-<template>
- <mycomponent id='mycomponent'></mycomponent>
-</template>
-<script>
- module.exports = {
- created: function() {
- this.$el('mycomponent').focus();
- }
- }
-</script>
-```
-
-#### Proguard Rules
-
-If you want to using proguard to protect your source code, please add the following rules to your profile:
-
-```java
--keep class com.taobao.weex.WXDebugTool{*;}
--keep class com.taobao.weex.devtools.common.LogUtil{*;}
--keep public class * extends com.taobao.weex.ui.component.WXComponent{*;}
--keep public class * extends com.taobao.weex.common.WXModule{*;}
--keepclassmembers class ** {
- @com.taobao.weex.ui.component.WXComponentProp public *;
-}
-```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/advanced/extend-to-html5.md
----------------------------------------------------------------------
diff --git a/source/references/advanced/extend-to-html5.md b/source/references/advanced/extend-to-html5.md
deleted file mode 100644
index cc9acf3..0000000
--- a/source/references/advanced/extend-to-html5.md
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: Extend to HTML5
-type: references
-order: 11.3
-version: 2.1
----
-
-# Extend to HTML5
-
-Weex itself offers a lot of built-in components and modules, but also has the ability to expand horizontally. It allows developers to expand and customize themselves. But it is important to note that Weex is a cross-platform solution. When extending its built-in components or modules, you need to implement it on the three ends (Android, iOS, Web).
-
-
-After Weex switches the kernel to Vue 2.x, it will be easier to extend the Vue component on the Web side.
-
-## Extend Web components
-
-Vue.js is an independent front-end framework. In the browser, you can not use the Weex container for page rendering. So, the two things are the same: (1) for the Weex platform to expand Vue.js Web components. (2) directly using Vue.js to develop a Web component. The development of components can refer to its documentation: [component](https://vuejs.org/v2/guide/components.html). It is also recommended to use the ```.vue``` file to write components. How to use it: [Single file component](https://vuejs.org/v2/guide/single-file-components.html).
-
-### Example of component extension
-To extend ```<sidebar>``` as an example, you should first write the logic of the component itself:
-
-```html
-<!-- sidebar.vue -->
-<template>
- <div class="sidebar">
- <slot></slot>
- </div>
-</template>
-<style scoped>
- .sidebar {
- /* ... */
- }
-</style>
-<script>
- export default {
- props: [],
- data () {
- return {}
- }
- }
-</script>
-```
-
-And then register the ```<sidebar>``` component globally before using it:
-
-```javascript
-import Vue from 'vue'
-import Sidebar from './path/to/sidebar.vue'
-// register the ```<sidebar>``` component globally
-Vue.component('sidebar', Sidebar)
-```
-
-When you extend the Weex component, if you only use the built-in components provided by Weex and use the styles that Weex supports, it is no different from the normal custom component and does not need to be implemented at the Native side.
-
-If you find a component that does not support labels and styles that are not supported by Weex, you will need to really extend the Weex component. At the same time, you also need to extend in the Android side and the iOS side, or will lead to rendering exception.
-
-## Extend the Web module
-
-In addition to the common components, Weex also provides a common module, you can easily call the native API. In general, the registered Weex module requires three ends to be implemented, otherwise it will affect its normal use.
-
-### Register the module
-If we import the ```weex-vue-render``` library, we can get the weex variable globally. You can register the module using the ```registerModule```method.
-
-#### API format
-+ `registerModule`
-
- 1.```name```: {String} Required, module name.
- 2.```define```: {Object} Required, module definition.
-
-#### The example of register module
-The following code registers a module called guide:
-
-```javascript
-weex.registerModule('guide', {
- greeting () {
- console.log('Hello, nice to meet you. I am your guide.')
- },
- farewell () {
- console.log('Goodbye, I am always at your service.')
- }
-})
-```
-
-### Use the module
-
-Weex provides the require method for getting registered modules. You only need to pass the module name directly:
-
-```javascript
-//import module
-const guide = weex.requireModule('guide')
-// use the methods of module
-guide.greeting()
-guide.farewell()
-```
-
-The above wording is as useful as the native end, except that the methods in the module are provided by Native.
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/advanced/extend-to-ios.md
----------------------------------------------------------------------
diff --git a/source/references/advanced/extend-to-ios.md b/source/references/advanced/extend-to-ios.md
deleted file mode 100644
index 02dc037..0000000
--- a/source/references/advanced/extend-to-ios.md
+++ /dev/null
@@ -1,341 +0,0 @@
----
-title: Extend to iOS
-type: references
-order: 11.1
-version: 2.1
----
-
-# Extend to iOS
-
-#### Notice
-
-**All of the exported APIs in Weex are controllable and safe, they can not access private APIs or do any system hacks at runtime, neither can they change the primary purpose of the Application**.
-
-**If you are extending your custom modules/components, be sure NOT to export the ability of Objective-C runtime, be sure NOT to export dynamic and uncontrolled methods such as `dlopen()`, `dlsym()`, `respondsToSelector:`, `performSelector:`, `method_exchangeImplementations()`, be sure NOT to export any private methods. **
-
-### Module extend
-
-Weex SDK provides only rendering capabilities, rather than have other capabilities, such as network, picture, and URL redirection. If you want these features, you need to implement it.
-
-For example: If you want to implement an address jumping function, you can achieve a Module following the steps below.
-
-#### Step to customize a module
-
-1. Module
- customized must implement WXModuleProtocol
-2. A macro named `WX_EXPORT_METHOD` must be added, as it is the only way to export methods to JavaScript.
-3. The weexInstance should be synthesized. Each module object is bind to a specific instance.
-4. Module methods will be invoked in UI thread, so do not put time consuming operation there. If you want to execute the whole module methods in other thread, please implement the method `- (NSThread *)targetExecuteThread` in protocol. In the way, tasks distributed to this module will be executed in targetExecuteThread.
-5. Weex params can be String or Map.
-6. Module supports to return results to Javascript in callback. This callback is type of `WXModuleCallback`, the params of which can be String or Map.
-
-```objective-c
-@implementation WXEventModule
-
-@synthesize weexInstance;
-WX_EXPORT_METHOD(@selector(openURL:callback:))
-
-- (void)openURL:(NSString *)url callback:(WXModuleCallback)callback
-{
- NSString *newURL = url;
- if ([url hasPrefix:@"//"]) {
- newURL = [NSString stringWithFormat:@"http:%@", url];
- } else if (![url hasPrefix:@"http"]) {
- newURL = [NSURL URLWithString:url relativeToURL:weexInstance.scriptURL].absoluteString;
- }
-
- UIViewController *controller = [[WXDemoViewController alloc] init];
- ((WXDemoViewController *)controller).url = [NSURL URLWithString:newURL];
-
- [[weexInstance.viewController navigationController] pushViewController:controller animated:YES];
- callback(@{@"result":@"success"});
-}
-
-@end
-```
-
-#### export synchronous methods <span class="api-version">v0.10+</span>
-
-If you want to export synchronous methods which could make Javascript receive return values from natvie, you can use `WX_EXPORT_METHOD_SYNC` macro.
-
-native code:
-
-```objective-c
-@implementation WXEventModule
-
-WX_EXPORT_METHOD_SYNC(@selector(getString))
-
-- (NSString *)getString
-{
- return @"testString";
-}
-
-@end
-```
-
-js code:
-
-```javascript
-const eventModule = weex.requireModule('event')
-const returnString = syncTest.getString() // return "testString"
-```
-
-You can alse return number/array/dictionary except string.
-
-`notice:` the exported synchronous native method **can only be called on JS thread**. **Do not** do heavy work which will block js execution.
-
-`notice:` Vue 2.0 has not supported this feature yet. It will be supported in version 0.12 at the soonest.
-
-#### Register the module
-
-You can register the customized module by calling the method `registerModule:withClass` in WXSDKEngine.
-
-```objective-c
-WXSDKEngine.h
-/**
-* @abstract Registers a module for a given name
-* @param name The module name to register
-* @param clazz The module class to register
-**/
-+ (void)registerModule:(NSString *)name withClass:(Class)clazz;
-
-[WXSDKEngine registerModule:@"event" withClass:[WXEventModule class]];
-```
-
-### Handler extend
-
-Weex SDK doesn't have capabilitis, such as image download 、navigator operation，please implement these protocols by yourself.
-
-#### WXImgLoaderProtocol
-<font color="gray">
-Weex SDK has no image download capability, you need to implement `WXImgLoaderProtocol`. Refer to the following examples.
-
-```objective-c
-WXImageLoaderProtocol.h
-@protocol WXImgLoaderProtocol <WXModuleProtocol>
-
-/**
- * @abstract Creates a image download handler with a given URL
- * @param imageUrl The URL of the image to download
- * @param imageFrame The frame of the image you want to set
- * @param options : The options to be used for this download
- * @param completedBlock : A block called once the download is completed.
- image : the image which has been download to local.
- error : the error which has happened in download.
- finished : a Boolean value indicating whether download action has finished.
- */
- -(id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)options completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock;
- @end
-```
-
-Implement above protocol as follows.
-
-
-```objective-c
-@implementation WXImgLoaderDefaultImpl
-#pragma mark -
-#pragma mark WXImgLoaderProtocol
-
-- (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)userInfo completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock
-{
- if ([url hasPrefix:@"//"]) {
- url = [@"http:" stringByAppendingString:url];
- }
- return (id<WXImageOperationProtocol>)[[SDWebImageManager sharedManager] downloadImageWithURL:[NSURL URLWithString:url] options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) {
- } completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
- if (completedBlock) {
- completedBlock(image, error, finished);
- }
- }];
-}
-@end
-```
-
-#### Register the handler
-
-You can register the handler which implements the protocol by calling `registerHandler:withProtocol` in WXSDKEngine.
-
-```objective-c
-WXSDKEngine.h
-/**
-* @abstract Registers a handler for a given handler instance and specific protocol
-* @param handler The handler instance to register
-* @param protocol The protocol to confirm
-*/
-+ (void)registerHandler:(id)handler withProtocol:(Protocol *)protocol;
-
-[WXSDKEngine registerHandler:[WXImgLoaderDefaultImpl new] withProtocol:@protocol(WXImgLoaderProtocol)];
-```
-
-## Custom Native Components for iOS
-
-### Component extend
-
-There are a lot of native components ready to be used in the Weex SDK, but users always have their own use cases. You might have written an awesome native UI widget in your previous work and just want to wrap up it and export to Weex. So we provide a way to enable developers to create their own custom fully-native components.
-
-This guide will use the implementation of existing component `image` to show you how to build a native component. It will also assume that you are familiar with iOS programming.
-
-#### Registration
-
-Defining a custom native component is simple. Just call `[WXSDKEngine registerComponent:withClass:]` with the component's tag name as first argument.
-
-```objective-c
-[WXSDKEngine registerComponent:@"image" withClass:[WXImageComponent class]];
-```
-
-Then you can create a `WXImageComponent` class to represent the implementation of image component.
-
-Now you can use `<image>` wherever you want in the template.
-
-```html
-<image></image>
-```
-
-#### Adding Properties
-
-The next thing we can do is to extend some native properties to make the component more powerful. As an image, let's say we should have a `src` attribute as image's remote source and a `resize` attribute as image's resize mode(contain/cover/stretch).
-
-```objective-c
-@interface WXImageComponent ()
-
-@property (nonatomic, strong) NSString *imageSrc;
-@property (nonatomic, assign) UIViewContentMode resizeMode;
-
-@end
-```
-
-All of the styles, attributes and events will be passed to the component's initialization method, so here you can store the properties which you are interested in.
-
-```objective-c
-@implementation WXImageComponent
-
-- (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance
-{
- if (self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance]) {
- _imageSrc = [WXConvert NSString:attributes[@"src"]];
- _resizeMode = [WXConvert UIViewContentMode:attributes[@"resize"]];
- }
-
- return self;
-}
-
-@end
-```
-
-The properties getted in the attributes are of `id` type, so we have to convert them to the type we want using a conversion function. Basic conversion functions can be found in the `WXConvert` file, or you can just add your own conversion function.
-
-
-#### Hooking Render Life Cycle
-
-A Native Component has a life cycle managed by Weex. Weex creates it, layout it, renders it and destroys it.
-
-Weex offers component life cycle hooks that give you visibility into these key moments and the ability to act when they occur.
-
-| method | description |
-| :------------------: | ---------------------------------------- |
-| initWithRef:type:... | Initializes a new component using the specified properties. |
-| layoutDidFinish | Called when the component has just laid out. |
-| loadView | Creates the view that the component manages. |
-| viewWillLoad | Called before the load of component's view . |
-| viewDidLoad | Called after the component's view is loaded and set. |
-| viewWillUnload | Called just before releasing the component's view. |
-| viewDidUnload | Called when the component's view is released. |
-| updateStyles: | Called when component's style are updated. |
-| updateAttributes: | Called when component's attributes are updated. |
-| addEvent: | Called when adding an event to the component. |
-| removeEvent: | Called when removing an event frome the component. |
-
-
-As in the image component example, if we need to use our own image view, we can override the `loadView` method.
-
-
-```objective-c
-- (UIView *)loadView
-{
- return [[WXImageView alloc] init];
-}
-```
-
-Now Weex will use `WXImageView` to render the `image` component.
-
-As an image component, we will need to fetch the remote image and set it to the image view. This can be done in `viewDidLoad` method when the view is created and loaded. `viewDidLoad` is also the best time to perform additional initialization for your view， such as content mode changing.
-
-
-```objective-c
-- (void)viewDidLoad
-{
- UIImageView *imageView = (UIImageView *)self.view;
- imageView.contentMode = _resizeMode;
- imageView.userInteractionEnabled = YES;
- imageView.clipsToBounds = YES;
- imageView.exclusiveTouch = YES;
-
- // Do your image fetching and updating logic
-}
-```
-
-If image's remote source can be changed, you can also hook the `updateAttributes:` method to perform your attributes changing logic. Component's view always has been loaded while `updateAttributes:` or `updateStyles:` is called.
-
-
-```objective-c
-- (void)updateAttributes:(NSDictionary *)attributes
-{
- if (attributes[@"src"]) {
- _imageSrc = [WXConvert NSString:attributes[@"src"]];
- // Do your image updating logic
- }
-
- if (attributes[@"resize"]) {
- _resizeMode = [WXConvert UIViewContentMode:attributes[@"resize"]];
- self.view.contentMode = _resizeMode;
- }
-}
-```
-
-Maybe there is even more life cycle hooks you might need to consider, such as `layoutDidFinish` while layout computing is finished. If you want to go deeper, check out the `WXComponent.h` file in the source code.
-
-Now you can use `<image>` and its attributes wherever you want in the template.
-
-```html
-<image style="your-custom-style" src="image-remote-source" resize="contain/cover/stretch"></image>
-```
-
-#### Component Method
-from WeexSDK `0.9.5`, you can define your component method by macro `WX_EXPORT_METHOD`
-for example:
-
-```
-@implementation WXMyComponent
- +WX_EXPORT_METHOD(@selector(focus))
- +- (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance
- {
- if (self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance]) {
- // handle your attributes
- // handle your styles
- }
-
- return self;
- }
-
-
- - (void)focus
- {
- NSLog(@"you got it");
- }
-@end
-```
-
-after your registration for your own custom component, now you can call it in your js file.
-
-```html
-<template>
- <mycomponent ref='mycomponent'></mycomponent>
-</template>
-<script>
- module.exports = {
- created: function() {
- this.$refs.mycomponent.focus();
- }
- }
-</script>
-```
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/advanced/index.md
----------------------------------------------------------------------
diff --git a/source/references/advanced/index.md b/source/references/advanced/index.md
deleted file mode 100644
index c5c049d..0000000
--- a/source/references/advanced/index.md
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: Advanced
-type: references
-order: 11
-version: 2.1
----
-
-# Advanced
-
-- [Extend to iOS](./extend-to-ios.html)
-- [Extend to Android](./extend-to-android.html)
-- [Extend to HTML5](./extend-to-html5.html)
-- [Extend JS framework](./extend-jsfm.html)
-- [Integrate Devtool to Android](./integrate-devtool-to-android.html)
-- [Integrate Devtool to iOS](./integrate-devtool-to-ios.html)
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/advanced/integrate-devtool-to-android.md
----------------------------------------------------------------------
diff --git a/source/references/advanced/integrate-devtool-to-android.md b/source/references/advanced/integrate-devtool-to-android.md
deleted file mode 100644
index af5480d..0000000
--- a/source/references/advanced/integrate-devtool-to-android.md
+++ /dev/null
@@ -1,146 +0,0 @@
----
-title: Integrate Devtool to Android
-type: references
-order: 11.5
-version: 2.1
----
-
-# Integrate Devtool to Android
-
-Weex devtools is a custom devtools for weex that implements Chrome Debugging Protocol inspired by Stetho, it is designed to help you quickly inspect your app and debug your JS bundle source in a Chrome web page. To make it work, at first you must integrate devtool to your App. This page will help you integrate devtool to your Android App.
-
-## Integrate to Android
-
-### Installing Dependencies
-
-Weex Devtools depend on `weex_inspector`. I strongly recommend you use the latest version since both Weex SDK and devtools are developed iteratively and rapidly. See the release version list [here](https://github.com/weexteam/weex_devtools_android/releases). All the release version will publish to the [jcenter repo](https://bintray.com/alibabaweex/maven/weex_inspector). There are two choices to install it:
-
-- From Gradle
-
- ```gradle
- dependencies {
- compile 'com.taobao.android:weex_inspector:0.8.0.0'
- }
- ```
-
-- From source code
-
- you need to copy the dir of inspector to the same dir of your app and add `include ":inspector"`in your project's `settings.gradle` file just like playground have done, then add dependency in your app's `build.gralde`.
-
- ```gradle
- dependencies {
- compile project(':inspector')
- }
- ```
-
-#### Version compatibility
-
-| weex sdk | weex inspector | Debugger Server |
-|----------|----------------|-----------------|
-| 0.8.0.1+ | 0.0.8.1+ | 0.2.39+ |
-| 0.7.0+ | 0.0.7.13 | 0.2.38 |
-| 0.6.0+ | 0.0.2.2 | - |
-
-
-### Adding Debug mode switch
-
-The key to control the opening and closing of the debug mode can be summarized as three rules:
-
-**No.1: Set the switch and Debugger Server addresses via `sRemoteDebugMode` and ` sRemoteDebugProxyUrl`.**
-
-`WXEnvironment` class has a pair of static variables mark Weex current debug mode:
-
-```java
-public static boolean sRemoteDebugMode; // default close
-public static String sRemoteDebugProxyUrl; // Debugger Server addresses
-```
-
-You have to set `WXEnvironment.sRemoteDebugMode` and `WXEnvironment.sRemoteDebugProxyUrl` at the right time, for example:
-
-```java
-private void initDebugEnvironment(boolean enable, String host) {
- WXEnvironment.sRemoteDebugMode = enable;
- WXEnvironment.sRemoteDebugProxyUrl = "ws://" + host + ":8088/debugProxy/native";
-}
-```
-
-**No.2: You must call `WXSDKEngine.reload()` method when `sRemoteDebugMode` was changed.**
-
-You can control a state of debug mode via the `WXEnvironment.sRemoteDebugMode`, but you need reset Weex runtime if you changed a state of debug mode.
-
-```java
-private void launchInspector(boolean remoteDebug) {
- if (WXEnvironment.isApkDebugable()) {
- try {
- if (mWxDebugProxy != null) {
- mWxDebugProxy.stop();
- }
- HackedClass<Object> debugProxyClass = WXHack.into("com.taobao.weex.devtools.debug.DebugServerProxy");
- mWxDebugProxy = (IWXDebugProxy) debugProxyClass.constructor(Context.class, WXBridgeManager.class)
- .getInstance(WXEnvironment.getApplication(), WXBridgeManager.this);
- if (mWxDebugProxy != null) {
- mWxDebugProxy.start();
- if (remoteDebug) {
- mWXBridge = mWxDebugProxy.getWXBridge();
- } else {
- if (mWXBridge != null && !(mWXBridge instanceof WXBridge)) {
- mWXBridge = null;
- }
- }
- }
- } catch (HackAssertionException e) {
- WXLogUtils.e("launchInspector HackAssertionException ", e);
- }
- }
-}
-```
-
-In this way, You can control the debug mode flexibly.
-
-**No.3: Auto refresh page via `ACTION_DEBUG_INSTANCE_REFRESH` broadcast**
-
-`ACTION_DEBUG_INSTANCE_REFRESH` can be broadcast messages when the debug mode is switched or Chrome page refresh. You can use this mechanism to inform the current page to refresh in time.
-
-```java
-public class RefreshBroadcastReceiver extends BroadcastReceiver {
- @Override
- public void onReceive(Context context, Intent intent) {
- if (IWXDebugProxy.ACTION_DEBUG_INSTANCE_REFRESH.equals(intent.getAction())) {
- if (mUri != null) {
- if (TextUtils.equals(mUri.getScheme(), "http") || TextUtils.equals(mUri.getScheme(), "https")) {
- loadWXfromService(mUri.toString());
- } else {
- loadWXfromLocal(true);
- }
- }
- }
- }
-}
-```
-
-### Example
-
-The easiest way is reuse the code of playground. On the other hand QR code is not necessary, if you review the source code you can draw a conclusion that QR CODE is just a way to set devtools server address. There are two examples of how to open debug modes in the Playground App:
-
-- Set the debug mode via `XXXApplication`
-
- ```java
- public class MyApplication extends Application {
- public void onCreate() {
- super.onCreate();
- initDebugEnvironment(true, "xxx.xxx.xxx.xxx"/*"DEBUG_SERVER_HOST"*/);
- }
- }
- ```
-
-- Set the debug mode by scan QR code
-
- You review the source code of playground.
-
- - Debug mode switch control: [`WXApplication.java`](https://github.com/weexteam/weex_devtools_android/blob/master/playground/app/src/main/java/com/alibaba/weex/WXApplication.java)
- - Refresh control [`WXPageActivity.java`](https://github.com/weexteam/weex_devtools_android/blob/master/playground/app/src/main/java/com/alibaba/weex/WXPageActivity.java)
-
-
-## Known Issues
-
-You can report issues and bugs [here](https://github.com/weexteam/weex_devtools_android/issues). We will reply as soon as possible.
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/advanced/integrate-devtool-to-ios.md
----------------------------------------------------------------------
diff --git a/source/references/advanced/integrate-devtool-to-ios.md b/source/references/advanced/integrate-devtool-to-ios.md
deleted file mode 100644
index 0ae3ef5..0000000
--- a/source/references/advanced/integrate-devtool-to-ios.md
+++ /dev/null
@@ -1,192 +0,0 @@
----
-title: Integrate Devtool to iOS
-type: references
-order: 11.6
-version: 2.1
----
-
-# Integrate Devtool to iOS
-
-Weex devtools is a custom devtools for weex that implements Chrome Debugging Protocol inspired by Stetho, it is designed to help you quickly inspect your app and debug your JS bundle source in a Chrome web page. To make it work, at first you must integrate devtool to your App. This page will help you integrate devtool to your iOS App.
-
-## Integrate to iOS
-
-### Installing Dependencies
-
-There are two choices to install dependencies:
-
-#### No.1 From cocoapods
-
-```
-source https://github.com/CocoaPods/Specs.git，
-pod 'WXDevtool', '0.7.0', :configurations => ['Debug']，
-```
-
-I strongly recommend you use the latest version since both Weex SDK and devtools are developed iteratively and rapidly.
-
-#### No.2 From source code
-
-1. Get source code by [GitHub](https://github.com/weexteam/weex-devtool-iOS).
-
-2. Copy source folder to your project.
-
- 
-
-3. Choose options as the picture shows.
-
- 
-
-### Integrate
-
-#### Step 1. Add header file in `AppDelegate.m`
-
- - From cocoapods:
-
- ```
- #import <TBWXDevtool/WXDevtool.h>
- ``
-
- - From source code
-
- ```
- #import "WXDevtool.h"
- ```
-
-#### Step 2. Initialize inspector when the APP launched
-
-You can see the WXDevtool header file as follows:
-
-```object-c
-#import <Foundation/Foundation.h>
-
-@interface WXDevTool : NSObject
-/**
-* set debug status
-* @param isDebug : YES:open debug model and inspect model;
-* default is NO,if isDebug is NO, open inspect only;
-* */
-+ (void)setDebug:(BOOL)isDebug;
-
-
-/**
-* get debug status
-* */
-+ (BOOL)isDebug;
-
-
-/**
-* launch weex debug
-* @param url : ws://ip:port/debugProxy/native, ip and port is your devtool server address
-* eg:@"ws://30.30.29.242:8088/debugProxy/native"
-* */
-+ (void)launchDevToolDebugWithUrl:(NSString *)url;
-
-@end
-```
-
-**Note: The inspector API must be called before weex is initialized**
-
-- `setDebug`
-
- `setDebug` is used to control the state of debug mode, when its value is `YES`, open the debug mode, otherwise closed.
-
-- `(void)launchDevToolDebugWithUrl:(NSString *)url;`
-
- wssip was the wss address showing in the chrome address bar.
-
-open debug model and inspector model
-
-eg：
-
-```object-c
-- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { [WXDevTool setDebug:YES]; [WXDevTool launchDevToolDebugWithUrl:@"ws://wssip/debugProxy/native"]; }
-```
-
-open inspect model, remove the `@selector
-(setDebug:)` or add `[WXDevTool setDebug:NO]`
-
-eg：
-
-```object-c
-- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { [WXDevTool launchDevToolDebugWithUrl:@"ws://wssip/debugProxy/native"]; }
-```
-
-#### Step 3. Auto refresh
-
-Q: Why do we need auto refresh feature?
-
-A: As shown in future, when you click the debugger button, Javascript runtime environment will change from the phone (JavaScriptCore) to PC (Chrome V8), then Weex need to re-initialize the Weex environment, re-render the page. Page rendering is required for the developer to add on its own page.
-
-
-
-Q: What kind of scene need to add refresh feature?
-
-- Click debugger button
-- Switch remoteDebug
-- Refresh inspect page
-
-Q: How to add auto refresh feature?
-
-Register events when Weex initialization.
-
-```object-c
-[[NSNotificationCenter defaultCenter] addObserver:self selector:notificationRefreshInstance: name:@"RefreshInstance" object:nil];
-```
-
-**Notes: You must cancel this event in the `dealloc` method. For example:**
-
-```
-- (void)dealloc
-{
- [[NSNotificationCenter defaultCenter] removeObserver:self];
-}
-```
-
-For example, First you can destroy the current instance, and then re-create instance:
-
-
-```
-- (void)dealloc
-{
- [[NSNotificationCenter defaultCenter] removeObserver:self];
-}
-```
-
-页面刷新实现，先销毁当前 instance，然后重新创建 instance，举例如下:
-
-```
- - (void)render
- {
- CGFloat width = self.view.frame.size.width;
- [_instance destroyInstance];
- _instance = [[WXSDKInstance alloc] init];
- _instance.viewController = self;
- _instance.frame = CGRectMake(self.view.frame.size.width-width, 0, width, _weexHeight);
-
- __weak typeof(self) weakSelf = self;
- _instance.onCreate = ^(UIView *view) {
- [weakSelf.weexView removeFromSuperview];
- weakSelf.weexView = view;
- [weakSelf.view addSubview:weakSelf.weexView];
- UIAccessibilityPostNotification(UIAccessibilityScreenChangedNotification, weakSelf.weexView);
- };
- _instance.onFailed = ^(NSError *error) {
-
- };
-
- _instance.renderFinish = ^(UIView *view) {
- [weakSelf updateInstanceState:WeexInstanceAppear];
- };
-
- _instance.updateFinish = ^(UIView *view) {
- };
- if (!self.url) {
- return;
- }
- NSURL *URL = [self testURL: [self.url absoluteString]];
- NSString *randomURL = [NSString stringWithFormat:@"%@?random=%d",URL.absoluteString,arc4random()];
- [_instance renderWithURL:[NSURL URLWithString:randomURL] options:@{@"bundleUrl":URL.absoluteString} data:nil];
-}
-```
-
-You can see the details in this case [WXDemoViewController.m](https://github.com/weexteam/weex-devtool-iOS/blob/master/Devtools/playground/WeexDemo/WXDemoViewController.m)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/android-apis.md
----------------------------------------------------------------------
diff --git a/source/references/android-apis.md b/source/references/android-apis.md
index 963371c..44d1fe2 100644
--- a/source/references/android-apis.md
+++ b/source/references/android-apis.md
@@ -1,7 +1,8 @@
---
-title: Android APIs
+title: Android APIs
type: references
-order: 1.2
+group: API
+order: 2.2
version: 2.1
---
@@ -151,7 +152,7 @@ public class WXLocation extends WXModule {
callback.invoke(data);
//Continuous connection
callback.invokeAndKeepAlive(data);
-
+
//Invoke method and invokeAndKeepAlive two methods of choice }
}
```
@@ -216,4 +217,4 @@ You can use the `mWXSDKInstance.setSize()` method to change the size of the Weex
Weex in the development stage will add some new features and new methods, but these new features and functions must be upgraded to achieve the SDK, for the application should not be upgraded how to deal with it? You can use the downgrade feature.
-Native can be handled by the `onException` method in interface `IWXRenderListener`, and if it is an active demoulding errCode is a character that is divided by "|". "|" The preceding character is 1 for active demotion, and the Native side can jump to the corresponding H5 page. Or otherwise prompted the user's current environment does not support Weex.
\ No newline at end of file
+Native can be handled by the `onException` method in interface `IWXRenderListener`, and if it is an active demoulding errCode is a character that is divided by "|". "|" The preceding character is 1 for active demotion, and the Native side can jump to the corresponding H5 page. Or otherwise prompted the user's current environment does not support Weex.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/bubble.md
----------------------------------------------------------------------
diff --git a/source/references/bubble.md b/source/references/bubble.md
deleted file mode 100644
index 8d2470c..0000000
--- a/source/references/bubble.md
+++ /dev/null
@@ -1,146 +0,0 @@
----
-title: Event Bubble
-type: references
-order: 1.3
-version: 2.1
----
-
-# Event Bubble <span class="api-version">v0.13+</span>
-
-Weex 2.0 implements the W3C standard event bubbling mechanism.
-
-### Usage
-
-```html
-<template>
- <div class="root" @click="rootClick" bubble="true">
- <text style="font-size: 40px;">{{rootText}}</text>
- <div class="outer" @click="parentClick">
- <div>
- <text style="font-size: 40px;">{{parentText}}</text>
- </div>
- <text class="inner" @click="click">{{innerText}}</text>
- </div>
- </div>
-</template>
-
-<script>
- module.exports = {
- data: {
- innerText: 'click me',
- parentText: '',
- rootText: ''
- },
- methods: {
- click: function(e) {
- this.innerText = 'inner bubble'
- },
- parentClick: function(e) {
- this.parentText = 'parent bubble'
- },
- rootClick: function(e) {
- this.rootText = 'root bubble'
- }
- }
- }
-</script>
-
-<style scoped>
- .inner {
- font-size: 40px;
- text-align: center;
- background-color: #7a9b1b;
- padding: 40px;
- }
-
- .outer {
- font-size: 40px;
- text-align: center;
- background-color: #9b7a1b;
- padding: 120px;
- }
-
- .root {
- font-size: 40px;
- text-align: center;
- background-color: #7a1b9b;
- padding: 80px;
- }
-</style>
-```
-
-[try it](http://dotwe.org/vue/fa2957ce3e9eb47ad9ae1da22d845e95)
-
-Run the above code, open with the client, click on the middle of the elements, you can see the event spread up, followed by the trigger.
-
-### Notice
-
-One thing should be noticed: **For compatibility with previous versions, Weex does not turn on event bubbling by default. You need to add `bubble = "true"` on the root element's properties to turn on the bubbling mechanism. Otherwise, the event will not be propagated upwards, keeping the same effect as the previous version.**
-
-### stopPropagation
-
-In the event handler function, you can use the `e.stopPropagation()` method to prevent the event from escalating. Note that `e.stopPropagation()` differs from `bubble = "true"`, which affects only the current elements and the propagation of parent elements, without affecting the propagation of child elements; the latter is a switching mechanism that is added for compatibility, Will be a global shutdown or open the bubble mechanism, the two can co-exist, as follows:
-
-```html
-<template>
- <div class="root" @click="rootClick" bubble="true">
- <text style="font-size: 40px;">{{rootText}}</text>
- <div class="outer" @click="parentClick">
- <div>
- <text style="font-size: 40px;">{{parentText}}</text>
- </div>
- <text class="inner" @click="click">{{innerText}}</text>
- </div>
- </div>
-</template>
-
-<script>
- module.exports = {
- data: {
- innerText: 'click me',
- parentText: '',
- rootText: ''
- },
- methods: {
- click: function(e) {
- this.innerText = 'inner bubble'
- },
- parentClick: function(e) {
- this.parentText = 'parent bubble'
- e.stopPropagation()
- },
- rootClick: function(e) {
- this.rootText = 'root bubble'
- // e.stopPropagation()
- }
- }
- }
-</script>
-
-<style scoped>
- .inner {
- font-size: 40px;
- text-align: center;
- background-color: #7a9b1b;
- padding: 40px;
- }
-
- .outer {
- font-size: 40px;
- text-align: center;
- background-color: #9b7a1b;
- padding: 120px;
- }
-
- .root {
- font-size: 40px;
- text-align: center;
- background-color: #7a1b9b;
- padding: 80px;
- }
-</style>
-```
-
-[try it](http://dotwe.org/vue/2cc80e19c9b2430fb780234628065a69)
-
-Run the above code, open with the client, click on the middle of the element, you can see the event up to the parent element is terminated, no longer continue to spread to the root element.
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/color-names.md
----------------------------------------------------------------------
diff --git a/source/references/color-names.md b/source/references/color-names.md
deleted file mode 100644
index fa78cda..0000000
--- a/source/references/color-names.md
+++ /dev/null
@@ -1,182 +0,0 @@
----
-title: Color name
-type: references
-order: 1.7
-version: 2.1
----
-
-# List of the names of colors
-
-### Basic color keywords:
-
-| Color Name | Hex rgb |
-| ---------- | ------- |
-| black | #000000 |
-| silver | #C0C0C0 |
-| gray | #808080 |
-| white | #FFFFFF |
-| maroon | #800000 |
-| red | #FF0000 |
-| purple | #800080 |
-| fuchsia | #FF00FF |
-| green | #008000 |
-| lime | #00FF00 |
-| olive | #808000 |
-| yellow | #FFFF00 |
-| navy | #000080 |
-| blue | #0000FF |
-| teal | #008080 |
-| aqua | #00FFFF |
-
-### Extended color keywords:
-
-| Color Name | Hex rgb |
-| ---------- | ------- |
-| aliceblue | #F0F8FF |
-| antiquewhite | #FAEBD7 |
-| aqua | #00FFFF |
-| aquamarine | #7FFFD4 |
-| azure | #F0FFFF |
-| beige | #F5F5DC |
-| bisque | #FFE4C4 |
-| black | #000000 |
-| blanchedalmond | #FFEBCD |
-| blue | #0000FF |
-| blueviolet | #8A2BE2 |
-| brown | #A52A2A |
-| burlywood | #DEB887 |
-| cadetblue | #5F9EA0 |
-| chartreuse | #7FFF00 |
-| chocolate | #D2691E |
-| coral | #FF7F50 |
-| cornflowerblue | #6495ED |
-| cornsilk | #FFF8DC |
-| crimson | #DC143C |
-| cyan | #00FFFF |
-| darkblue | #00008B |
-| darkcyan | #008B8B |
-| darkgoldenrod | #B8860B |
-| darkgray | #A9A9A9 |
-| darkgreen | #006400 |
-| darkgrey | #A9A9A9 |
-| darkkhaki | #BDB76B |
-| darkmagenta | #8B008B |
-| darkolivegreen | #556B2F |
-| darkorange | #FF8C00 |
-| darkorchid | #9932CC |
-| darkred | #8B0000 |
-| darksalmon | #E9967A |
-| darkseagreen | #8FBC8F |
-| darkslateblue | #483D8B |
-| darkslategray | #2F4F4F |
-| darkslategrey | #2F4F4F |
-| darkturquoise | #00CED1 |
-| darkviolet | #9400D3 |
-| deeppink | #FF1493 |
-| deepskyblue | #00BFFF |
-| dimgray | #696969 |
-| dimgrey | #696969 |
-| dodgerblue | #1E90FF |
-| firebrick | #B22222 |
-| floralwhite | #FFFAF0 |
-| forestgreen | #228B22 |
-| fuchsia | #FF00FF |
-| gainsboro | #DCDCDC |
-| ghostwhite | #F8F8FF |
-| gold | #FFD700 |
-| goldenrod | #DAA520 |
-| gray | #808080 |
-| green | #008000 |
-| greenyellow | #ADFF2F |
-| grey | #808080 |
-| honeydew | #F0FFF0 |
-| hotpink | #FF69B4 |
-| indianred | #CD5C5C |
-| indigo | #4B0082 |
-| ivory | #FFFFF0 |
-| khaki | #F0E68C |
-| lavender | #E6E6FA |
-| lavenderblush | #FFF0F5 |
-| lawngreen | #7CFC00 |
-| lemonchiffon | #FFFACD |
-| lightblue | #ADD8E6 |
-| lightcoral | #F08080 |
-| lightcyan | #E0FFFF |
-| lightgoldenrodyellow | #FAFAD2 |
-| lightgray | #D3D3D3 |
-| lightgreen | #90EE90 |
-| lightgrey | #D3D3D3 |
-| lightpink | #FFB6C1 |
-| lightsalmon | #FFA07A |
-| lightseagreen | #20B2AA |
-| lightskyblue | #87CEFA |
-| lightslategray | #778899 |
-| lightslategrey | #778899 |
-| lightsteelblue | #B0C4DE |
-| lightyellow | #FFFFE0 |
-| lime | #00FF00 |
-| limegreen | #32CD32 |
-| linen | #FAF0E6 |
-| magenta | #FF00FF |
-| maroon | #800000 |
-| mediumaquamarine | #66CDAA |
-| mediumblue | #0000CD |
-| mediumorchid | #BA55D3 |
-| mediumpurple | #9370DB |
-| mediumseagreen | #3CB371 |
-| mediumslateblue | #7B68EE |
-| mediumspringgreen | #00FA9A |
-| mediumturquoise | #48D1CC |
-| mediumvioletred | #C71585 |
-| midnightblue | #191970 |
-| mintcream | #F5FFFA |
-| mistyrose | #FFE4E1 |
-| moccasin | #FFE4B5 |
-| navajowhite | #FFDEAD |
-| navy | #000080 |
-| oldlace | #FDF5E6 |
-| olive | #808000 |
-| olivedrab | #6B8E23 |
-| orange | #FFA500 |
-| orangered | #FF4500 |
-| orchid | #DA70D6 |
-| palegoldenrod | #EEE8AA |
-| palegreen | #98FB98 |
-| paleturquoise | #AFEEEE |
-| palevioletred | #DB7093 |
-| papayawhip | #FFEFD5 |
-| peachpuff | #FFDAB9 |
-| peru | #CD853F |
-| pink | #FFC0CB |
-| plum | #DDA0DD |
-| powderblue | #B0E0E6 |
-| purple | #800080 |
-| red | #FF0000 |
-| rosybrown | #BC8F8F |
-| royalblue | #4169E1 |
-| saddlebrown | #8B4513 |
-| salmon | #FA8072 |
-| sandybrown | #F4A460 |
-| seagreen | #2E8B57 |
-| seashell | #FFF5EE |
-| sienna | #A0522D |
-| silver | #C0C0C0 |
-| skyblue | #87CEEB |
-| slateblue | #6A5ACD |
-| slategray | #708090 |
-| slategrey | #708090 |
-| snow | #FFFAFA |
-| springgreen | #00FF7F |
-| steelblue | #4682B4 |
-| tan | #D2B48C |
-| teal | #008080 |
-| thistle | #D8BFD8 |
-| tomato | #FF6347 |
-| turquoise | #40E0D0 |
-| violet | #EE82EE |
-| wheat | #F5DEB3 |
-| white | #FFFFFF |
-| whitesmoke | #F5F5F5 |
-| yellow | #FFFF00 |
-| yellowgreen | #9ACD32 |
-
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/common-event.md
----------------------------------------------------------------------
diff --git a/source/references/common-event.md b/source/references/common-event.md
deleted file mode 100644
index 6492fe3..0000000
--- a/source/references/common-event.md
+++ /dev/null
@@ -1,129 +0,0 @@
----
-title: Common Events
-type: references
-order: 5
-version: 2.1
-has_chapter_content: true
----
-
-# Common Events
-
-Weex provide the ability to let events trigger action, like starting a JavaScript when a user click on a component. Bellow are the common event attributes that can be added to weex components to define event actions.
-
-## Click event
-
-The onclick attribute fires on a click gesture on the element.
-**Notes: ** The `input` and `switch` component does not currently support the `click` event, please use `change` or `input` event instead.
-
-### event object
-
-- `type` : `click`
-- `target` : The target component where the event is triggered
-- `timestamp` : Timestamp when event is triggered
-
-## Longpress event
-
-If a `longpress` event is bound to a component, the event will be triggered when user long press on it.
-**Notes: ** The `input` and `switch` component does not currently support the `click` event, please use `change` or `input` event instead.
-
-### event object
-
-- `type` : `longpress`
-- `target` : The target component where the event is triggered
-- `timestamp` : Timestamp when event is triggered
-
-## Appear event
-
-If a appear event is bound to a component inside a scrollable container, the event will be triggered when the component comes to be visible.
-
-### event object
-
-- `type` : `appear`
-- `target` : The target component where the event is triggered
-- `timestamp` : Timestamp when event is triggered
-- `direction` : The direction in which the scroller is scrolling. Could be `up` or `down`.
-
-## Disappear event
-
-If a `disappear` event is bound to a component inside a scrollable container, the event will be triggered when the component scrolls out of viewport and disappears from your sight.
-
-### event object
-
-- `type` : `disappear`
-- `target` : The target component where the event is triggered
-- `timestamp` : Timestamp when event is triggered
-- `direction` : The direction in which the scroller is scrolling. Could be `up` or `down`.
-
-## Page event
-
-Weex provides you with simple management of page status, such as `viewappear` and `viewdisappear`.
-The `viewappear` event will be triggered when page is about to show or before any animations are configured for showing. For example, when calling `push` method in `navigator` module, this event will be trigged in new page.
-The `viewdisappear` event will be triggeded when page is about to dismiss.
-Different from `appear` and `disappear` of component, these two events focus on the status of whole page, so **they must be bound to the root component**.
-In addititon, these events also can be bound to body component which is not root actually such as `wxc-navpage`.
-
-### event object
-
-- `type` : `viewappear` or `viewdisappear`
-- `target` : The target component where the event is triggered
-- `timestamp` : Timestamp when event is triggered
-
-
-## Example
-
-```html
-<template>
- <div>
- <div class="box" @click="onclick" @longpress="onlongpress" @appear="onappear" @disappear="ondisappear"></div>
- </div>
-</template>
-
-<script>
- const modal = weex.requireModule('modal')
- export default {
- methods: {
- onclick (event) {
- console.log('onclick:', event)
- modal.toast({
- message: 'onclick',
- duration: 0.8
- })
- },
- onlongpress (event) {
- console.log('onlongpress:', event)
- modal.toast({
- message: 'onlongpress',
- duration: 0.8
- })
- },
- onappear (event) {
- console.log('onappear:', event)
- modal.toast({
- message: 'onappear',
- duration: 0.8
- })
- },
- ondisappear (event) {
- console.log('ondisappear:', event)
- modal.toast({
- message: 'ondisappear',
- duration: 0.8
- })
- }
- }
- }
-</script>
-
-<style scoped>
- .box {
- border-width: 2px;
- border-style: solid;
- border-color: #BBB;
- width: 250px;
- height: 250px;
- margin-top: 250px;
- margin-left: 250px;
- background-color: #EEE;
- }
-</style>
-```
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/common-style.md
----------------------------------------------------------------------
diff --git a/source/references/common-style.md b/source/references/common-style.md
deleted file mode 100644
index 359b0e0..0000000
--- a/source/references/common-style.md
+++ /dev/null
@@ -1,522 +0,0 @@
----
-title: Common Style
-type: references
-order: 1.5
-version: 2.1
----
-
-# Common Style
-
-All of weex tags share some common style rules
-
-## Box Model
-
-
-
-Weex box model based on the CSS box model, all of weex elements can be considered as boxes. The term "box model" is used when talking about design and layout. The box model is essentially a box that wraps around every HTML element. It consists of margins, borders, paddings, and the actual content.
-
-you can use the definition below in weex box model.
-
-- `width`: `length` type, default value `0`
-- `height`: `length` type, default value `0`
-- `padding`: `length` type, default value `0`, (space around content, between element content and the element border)
- - `padding-left`: `length` type, default value `0`
- - `padding-right`: `length` type, default value `0`
- - `padding-top`: `length` type, default value `0`
- - `padding-bottom`: `length` type, default value `0`
-- `margin`: `length` type, default value `0`, (space around elements, outside the border)
- - `margin-left`: `length` type, default value `0`
- - `margin-right`: `length` type, default value `0`
- - `margin-top`: `length` type, default value `0`
- - `margin-bottom`: `length` type, default value `0`
-- `border`
- - `border-style`: values `solid` | `dashed` | `dotted`, default value `solid`
- - `border-left-style`: values `solid` | `dashed` | `dotted`, default value `solid`
- - `border-top-style`: values `solid` | `dashed` | `dotted`, default value `solid`
- - `border-right-style`: values `solid` | `dashed` | `dotted`, default value `solid`
- - `border-bottom-style`: values `solid` | `dashed` | `dotted`, default value `solid`
- - `border-width`: `length` type, non-negative, default value `0`
- - `border-left-width`: `length` type, non-negative, default value `0`
- - `border-top-width`: `length` type, non-negative, default value `0`
- - `border-right-width`: `length` type, non-negative, default value `0`
- - `border-bottom-width`: `length` type, non-negative, default value `0`
- - `border-color`: `color` type, default value `#000000`
- - `border-left-color`: `color` type, default value `#000000`
- - `border-top-color`: `color` type, default value `#000000`
- - `border-right-color`: `color` type, default value `#000000`
- - `border-bottom-color`: `color` type, default value `#000000`
- - `border-radius`: `length` type, default value `0`, (rounded borders to elements , default value is 0 meaning right angle )
- - `border-bottom-left-radius`: `length` type, non-negative, default value `0`
- - `border-bottom-right-radius`: `length` type, non-negative, default value `0`
- - `border-top-left-radius`: `length` type, non-negative, default value `0`
- - `border-top-right-radius`: `length` type, non-negative, default value `0`
-
-### Notes
-Weex box model uses `border-box` as the default value of `box-sizing`, meaning the width and height properties includes content, padding and border, but not the margin.
-
-The rule of border-radius for a specific corner such as `border-top-left-radius` is not currently supported for component `<image>`in iOS. This only happens to iOS, it works fine on Android.
-
-Although `overflow:hidden` is default on android, a view **will not** clip its children according to `border-radius` unless all the following condtions met. This only happens on Android, it works fine on iOS.
-* The view type is `div`, `a`, `cell`, `refresh` or `loading`.
-* OS version is Android 4.3 or higher.
-* OS version is **not** Andorid 7.0
-* A view **does not** have `background-image` property nor OS version is Android 5.0 or higher.
-
-### Example
-
-```html
-<template>
- <div>
- <image src="..." style="width: 400; height: 200; margin-left: 20;"></image>
- </div>
-</template>
-```
-
-## Flexbox
-
-Weex box style model based on the CSS flexbox, ensures that elements behave predictably and the page layout can accommodates to different screen sizes and different display devices.
-
-Flexbox consists of flex containers and flex items. If a weex element can containing other elements, it is a flex container.
-
-Notice that the old version of flexbox specification has differences with the new ones, such as whether or not to support wrapping. This is described at w3c's working drafts, and you should notice the differences among them. Also notice that the old version is only supported below the 4.4 version of android.
-
-### Flex container
-
-Flexbox is the default and only style model in Weex, so you don't have to add `display: flex;` in a container.
-
-- `flex-direction`: values `row` | `column`, default value `column`
-
-The flex-direction property specifies the direction of the flexible items inside the flex container. Default value is `column` (top-to-bottom).
-
-- `justify-content`: values `flex-start` | `flex-end` | `center` | `space-between`, default value `flex-start`
-
-The justify-content property horizontally aligns the flexible container's items when the items do not use all available space on the main-axis. Default value is `flex-start` meaning the flex items are positioned at the beginning of the container. `flex-end` means the items are positioned at the end of the container. `center` means the items are positioned at the center of the container. `space-between` means the items are positioned with space between the lines.
-
-
-
-- `align-items`: values `stretch` | `flex-start` | `center` | `flex-end`, default value `stretch`
-
-The align-items property vertically aligns the flexible container's items when the items do not use all available space on the cross-axis. Default value is `stretch` meaning the items are stretched to fit the container. `flex-start` means the items are positioned at the top of the container; `flex-end` means the items are positioned at the bottom of the container; `center` means items are positioned at the center of the container (vertically).
-
-
-
-### Flex item
-
-- `flex`: `number` type, default value `0`
-
-the flex property specifies the length of the flex item, relative to the rest of the flex items inside the same container. If all of the flex items set `flex: 1`, they will have equal width or height on direction of flex container's `flex-direction`. If there are two flex items, with one setting `flex: 1`, and the other setting `flex: 2`, the first one will take 1/3 container space, and the second one will take 2/3 container space. If all of flex items don't set `flex`, they will be aligned depending on the container's `justify-content` property.
-
-
-## Examples
-
-a list of images with equal scales align at the vertical axis:
-
-```html
-<template>
- <div style="width: 300; height: 100;">
- <image src="..." style="flex: 1;"></image>
- <image src="..." style="flex: 1;"></image>
- <image src="..." style="flex: 1;"></image>
- </div>
-</template>
-```
-
-a image with fixed width aligns with a stretched text:
-
-```html
-<template>
- <div style="width: 300; height: 100;">
- <image src="..." style="width: 100; height: 100;"></image>
- <text style="flex: 1;">...</text>
- </div>
-</template>
-```
-
-mixed direction alignment:
-
-```html
-<template>
- <div style="width: 100;">
- <image src="..." style="width: 100; height: 100;"></image>
- <div style="flex-direction: row;">
- <text style="flex: 2; font-size: 32;">title</text>
- <text style="flex: 1; font-size: 16;">$100</text>
- </div>
- </div>
-</template>
-```
-
-one text align left , the other float right:
-
-
-
-```html
-<template>
-<div style="flex-direction: row; justify-content: space-between;">
- <text>WEEX</text>
- <text>2016-05-08</text>
-</div>
-</template>
-```
-
-## Position
-
-we can use properties below to control placement of weex tag
-
-- `position`: values `relative` | `absolute` | `fixed` | `sticky`, default value `relative`
-
-`relative` means the item is positioned relative to its normal position. `absolute` means the item is positioned relative to its container. `fixed` keeps the elements position fixed when the page is scrolling. `sticky` keeps elements positioned inside the viewport as "stuck" at the top or "relative" at its original place depending on whether does it about to scroll out of the view.
-
-- `top`: `number` type, default value `0`, upward offset value
-- `bottom`: `number` type, default value `0`, downward offset value
-- `left`: `number` type, default value `0`, leftward offset value
-- `right`: `number` type, default value `0`, rightward offset value
-
-### Examples
-
-```html
-<template>
- <div style="flex-direction: column;">
- <div style="height: 3000;">
- <image src="..." style="top: 50px; left: 50px;"></image>
- </div>
- <div style="height: 3000;">
- <image src="..." style="position: sticky;"></image>
- </div>
- <div style="height: 3000;">
- <image src="..." style="position: absolute; top: 50px; left: 50px;"></image>
- </div>
- </div>
-</template>
-```
-
-## transform
-
-The CSS **transform** property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated and scaled.
-
-Currently supported format:
-
-* translate( <number/percentage> [, <number/percentage>]?)
-* translateX( <number/percentage> )
-* translateY( <number/percentage> )
-* scale( <number>)
-* scaleX( <number> )
-* scaleY( <number> )
-* rotate( <angle/degree> )
-* rotateX( <angle/degree> ) <span class="api-version">v0.14+</span>
-* rotateY( <angle/degree> ) <span class="api-version">v0.14+</span>
-* perspective( <number> ), supported for Android 4.1 and above. <span class="api-version">v0.16+</span>
-* transform-origin: number/percentage/keyword(top/left/right/bottom)
-
-### Example
-
-```HTML
-<template>
- <div class="wrapper">
- <div class="transform">
- <text class="title">Transformed element</text>
- </div>
- </div>
-</template>
-
-<style>
- .transform {
- align-items: center;
- transform: translate(150px,200px) rotate(20deg);
- transform-origin: 0 -250px;
- border-color:red;
- border-width:2px;
- }
- .title {font-size: 48px;}
-</style>
-```
-
-## transition <span class="api-version">v0.16.0+</span>
-
-Now you can use the transition attribute in CSS to enhance the interactivity and visual experience of your application. The transition includes the layout animation, that is, LayoutAnimation, which now changes the layout and uses the fluent animation of the transition. Transition allows the CSS attribute values to transition smoothly over a certain time interval.
-
-### Property
-
-- ``transition-property``:Allows the name of the transitional animation to set the value of the different styles transition effect, the default value is empty, that does not perform any transition, the following table lists all the legitimate parameters of the property:
-
-| Property | Description |
-| --------------- | ---------------------------------------- |
-| width | The transition is performed when the width of the component is involved in the animation |
-| height | The transition is performed when the height of the component is involved in the animation |
-| top | The transition is performed when the top of the component is involved in the animation |
-| bottom | The transition is performed when the bottom of the component is involved in the animation |
-| left | The transition is performed when the left of the component is involved in the animation |
-| right | The transition is performed when the right of the component is involved in the animation |
-| backgroundColor | The transition is performed when the backgroundColor of the component is involved in the animation |
-| opacity | The transition is performed when the opacity of the component is involved in the animation |
-| transform | The transition is performed when the transform of the component is involved in the animation |
-
-- ``transition-duration``:Specifies the duration of the transition transition (in milliseconds). The default value is 0, indicating that there is no animation.
-
-- ``transition-delay``:Specifies the time interval (in milliseconds or seconds) between the request transition transition and the transition transition. The default value is 0, indicating that there is no delay, and the transition transition is performed immediately after the request.
-
-- ``transition-timing-function``:Describes the velocity curve of the transition transition, which is used to make the transition transition smoother. The default is ease. The following table lists all the valid attributes:
-
-| Property | Description |
-| ------------------------------ | ---------------------------------------- |
-| ease | The transition gradually slow down the transition effect |
-| ease-in | The transition starts slowly and then becomes faster for the transition effect |
-| ease-out | The transition starts quickly and then slows the transition effect |
-| ease-in-out | The transition starts slowly, then goes fast and then slowly ends the transition effect |
-| linear | The transition changes at constant speed |
-| cubic-bezier(x1, y1, x2, y2) | Using the custom transition in the third-order Bessel function, the parameter values of the function must be between 0 and 1. For more information on three times Bessel, see [cubic-bezier](http://cubic-bezier.com/) and [Bézier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve). |
-
-### Example
-
-```html
-<style scoped>
- .panel {
- margin: 10px;
- top:10px;
- align-items: center;
- justify-content: center;
- border: solid;
- border-radius: 10px;
-
- transition-property: width,height,backgroundColor;
- transition-duration: 0.3s;
- transition-delay: 0s;
- transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
- }
-</style>
-```
-
-
-
-## Pseudo class <span class="api-version">v0.9.5+</span>
-
-Weex support four pseudo-classes: `active`, `focus`, `disabled`, `enabled`
-
-All components support `active`, but only the input component and the textarea component support `focus`, `enabled`, `diabled`.
-
-### Rule
-
-- the high priority override low priority when rules take effect at the same time
-
- - such as: "input:active:enabled" will override "input:active"
-
-- the interconnection rule as follow
-
- 
-
-### Example
-
-```html
-<template>
- <div class="wrapper">
- <image :src="logoUrl" class="logo"></image>
- </div>
-</template>
-
-<style scoped>
- .wrapper {
- align-items: center;
- margin-top: 120px;
- }
- .title {
- font-size: 48px;
- }
- .logo {
- width: 360px;
- height: 82px;
- background-color: red;
- }
- .logo:active {
- width: 180px;
- height: 82px;
- background-color: green;
- }
-</style>
-
-<script>
- export default {
- props: {
- logoUrl: {
- default: 'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png'
- },
- target: {
- default: 'World'
- }
- },
- methods: {
- update (e) {
- this.target = 'Weex';
- }
- }
- };
-</script>
-```
-
-[Try it](http://dotwe.org/vue/df2c8f254620d6d30d0906ee75fe5b99)
-
-## linear-gradient <span class="api-version">v0.10+</span>
-
-Weex support linear-gradient background, You can see [W3C description of the gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients).
-
-### Supported components
-
-All components in Weex support gradients
-
-### Usage
-
-You can use linear gradient by `background-image` property.
-
-```css
-background-image: linear-gradient(to top,#a80077,#66ff00);
-```
-
-`radial-gradient` is not currently supported, do not use it.
-
-Weex currently supports two color gradients. The direction of the gradient is as follows:
-
-* to right
- From left to right
-* to left
- From right to left
-* to bottom
- From top to bottom
-* to top
- From bottom to top
-* to bottom right
- From the upper left corner to the lower right corner
-* to top left
- From the lower right corner to the upper left corner
-
-### Note
-
-- `background-image` and `background-color` are set at the same time, `background-image` precedes `background-color`.
-- Do not use shorthand property such as `background`.
-
-### Example
-
-```html
-<template>
- <scroller style="background-color: #3a3a3a">
- <div class="container1" style="background-image:linear-gradient(to right,#a80077,#66ff00);">
- <text class="direction">to right</text>
- </div>
- <div class="container1" style="background-image:linear-gradient(to left,#a80077,#66ff00);">
- <text class="direction">to left</text>
- </div>
- <div class="container1" style="background-image:linear-gradient(to bottom,#a80077,#66ff00);">
- <text class="direction">to bottom</text>
- </div>
- <div class="container1" style="background-image:linear-gradient(to top,#a80077,#66ff00);">
- <text class="direction">to top</text>
- </div>
- <div style="flex-direction: row;align-items: center;justify-content: center">
- <div class="container2" style="background-image:linear-gradient(to bottom right,#a80077,#66ff00);">
- <text class="direction">to bottom right</text>
- </div>
- <div class="container2" style="background-image:linear-gradient(to top left,#a80077,#66ff00);">
- <text class="direction">to top left</text>
- </div>
- </div>
- </scroller>
-</template>
-<style>
- .container1 {
- margin: 10px;
- width: 730px;
- height: 200px;
- align-items: center;
- justify-content: center;
- border: solid;
- border-radius: 10px;
- }
-
- .container2 {
- margin: 10px;
- width: 300px;
- height: 300px;
- align-items: center;
- justify-content: center;
- border: solid;
- border-radius: 10px;
- }
-
- .direction {
- font-size: 40px;
- color: white;
- }
-</style>
-```
-
-## box-shadow <span class="api-version">v0.11+</span>
-
-Weex supports box-shadow in iOS： `inset`,`offset-x`,`offset-y`, `blur-radius`,`color`
-
-
-### Note
-
-- box-shadow takes effect in iOS
-
-### Example
-
-```html
-<template>
- <div class="wrapper">
- <div style="width:400px; height:60px;background-color: #FFE4C4; box-shadow:20px 10px rgb(255, 69, 0);">
- <text class="title" style="text-align: center">Hello {{target}}</text>
- </div>
- <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow: 20px 10px 5px rgba(255, 69, 0, 0.8);">
- <text class="title" style="text-align: center">Hello {{target}}</text>
- </div>
- <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:inset 20px 10px 5px rgba(255, 69, 0, 0.8);">
- <text class="title" style="text-align: center">Hello {{target}}</text>
- </div>
- <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:inset 20px 10px 5px rgb(255, 69, 0);">
- <text class="title" style="text-align: center">Hello {{target}}</text>
- </div>
- <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:20px 10px 5px black;">
- <text class="title" style="text-align: center">Hello {{target}}</text>
- </div>
- <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:20px 10px 5px #008B00;">
- <text class="title" style="text-align: center">Hello {{target}}</text>
- </div>
- </div>
-</template>
-
-<style scoped>
- .wrapper {align-items: center; margin-top: 120px;}
- .title {font-size: 48px;}
-</style>
-
-<script>
- module.exports = {
- data: function () {
- return {
- logoUrl: 'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png',
- target: 'World'
- };
- }
- };
-</script>
-```
-
-
-## Other Common Style
-
-- `opacity`
-- `background-color`
-
-## Type of Style Value
-
-- `length` type
-- `number` type
-- `color` type (*[The list of color keywords.](./color-names.html)*)
-- enumerated type
-
-## Simple Step
-
-These up-to-down steps may help you to plan the whole style of weex pages.
-
-1. overall style: divide the whole page to different parts
-2. flex alignment: align boxes in every part of page
-3. position box: place box, set offset
-4. element specific style: set styles for certain element if needed
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/components/a.md
----------------------------------------------------------------------
diff --git a/source/references/components/a.md b/source/references/components/a.md
index ae436bb..ac19ccd 100644
--- a/source/references/components/a.md
+++ b/source/references/components/a.md
@@ -1,7 +1,8 @@
---
title: <a>
type: references
-order: 2.1
+group: Build-in Components
+order: 8.04
version: 2.1
---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/components/cell.md
----------------------------------------------------------------------
diff --git a/source/references/components/cell.md b/source/references/components/cell.md
index a018c00..6b33fda 100644
--- a/source/references/components/cell.md
+++ b/source/references/components/cell.md
@@ -1,7 +1,8 @@
---
title: <cell>
type: references
-order: 2.6
+group: Build-in Components
+order: 8.07
version: 2.1
---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/components/div.md
----------------------------------------------------------------------
diff --git a/source/references/components/div.md b/source/references/components/div.md
index 1bcc162..0191750 100644
--- a/source/references/components/div.md
+++ b/source/references/components/div.md
@@ -1,7 +1,8 @@
---
title: <div>
type: references
-order: 2.2
+group: Build-in Components
+order: 8.01
version: 2.1
---
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/components/image.md
----------------------------------------------------------------------
diff --git a/source/references/components/image.md b/source/references/components/image.md
index d0f2520..717b161 100644
--- a/source/references/components/image.md
+++ b/source/references/components/image.md
@@ -1,7 +1,8 @@
---
title: <image>
type: references
-order: 2.3
+group: Build-in Components
+order: 8.02
version: 2.1
---
@@ -41,8 +42,8 @@ This component supports no child components.
**common events**: check out the [common events](../common-event.html)
- support `click` event. Check out [common events](../common-event.html)
-- support `appear` / `disappear` event. Check out [common events](../common-event.html)
-- `load`<sup class="api-version">v0.8+</sup> event. The `load` event fires on an image has been loaded. Only Android and iOS are supported currently. [example](http://dotwe.org/vue/e291159ac60b35dcd4994638a78d54ad)
+- support `appear` / `disappear` event. Check out [common events](../common-event.html)
+- `load`<sup class="api-version">v0.8+</sup> event. The `load` event fires on an image has been loaded. Only Android and iOS are supported currently. [example](http://dotwe.org/vue/e291159ac60b35dcd4994638a78d54ad)
- event object
- `success` : `true` if the image was loaded successfully, otherwise `false`
- `size` : the original size of image, contains two parameters: `naturalWidth` representing the original width of image in pixels, `naturalHeight` representing the original height of image in pixels. default value. The default value for both parameters is `0`.
@@ -50,12 +51,12 @@ This component supports no child components.
**component method**
- support save <sup class="api-version">v0.16.0+</sup> image to local device or photo album.
- - you should specify a callback function to receive the saving result.
+ - you should specify a callback function to receive the saving result.
```
var image = this.$refs.imageRef; // image 是之前已经定义过的ref
image.save(function(result) {
console.log(JSON.stringify(result))
- });
+ });
```
and the result can be the following format
```
@@ -123,4 +124,4 @@ This component supports no child components.
</style>
```
-[try it](http://dotwe.org/vue/e2122bc245beafb0348d79bfd1274904)
\ No newline at end of file
+[try it](http://dotwe.org/vue/e2122bc245beafb0348d79bfd1274904)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/components/index.md
----------------------------------------------------------------------
diff --git a/source/references/components/index.md b/source/references/components/index.md
deleted file mode 100644
index dd9162e..0000000
--- a/source/references/components/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: Build-in Components
-type: references
-order: 2
-version: 2.1
----
-
-# Build-in Components
-
-- [<a>](./a.html)
-- [<indicator>](./indicator.html)
-- [<switch>](./switch.html)
-- [<text>](./text.html)
-- [<textarea>](./textarea.html)
-- [<video>](./video.html)
-- [<web>](./web.html)
-- [<div>](./div.html)
-- [<image>](./image.html)
-- [<input>](./input.html)
-- [<list>](./list.html)
-- [<cell>](./cell.html)
-- [<refresh> & <loading>](./refresh.html)
-- [<scroller>](./scroller.html)
-- [<slider>](./slider.html)
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/components/indicator.md
----------------------------------------------------------------------
diff --git a/source/references/components/indicator.md b/source/references/components/indicator.md
index 29f4454..63cf272 100644
--- a/source/references/components/indicator.md
+++ b/source/references/components/indicator.md
@@ -1,7 +1,8 @@
---
title: <indicator>
type: references
-order: 2.10
+group: Build-in Components
+order: 8.14
version: 2.1
---
@@ -118,4 +119,4 @@ There is no specific attribute for this component.
</script>
```
-[try it](http://dotwe.org/vue/d2a654c4b75f1b4d80336c8a5fe133b9)
\ No newline at end of file
+[try it](http://dotwe.org/vue/d2a654c4b75f1b4d80336c8a5fe133b9)
http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/components/input.md
----------------------------------------------------------------------
diff --git a/source/references/components/input.md b/source/references/components/input.md
index fdd4d0a..c3d9967 100644
--- a/source/references/components/input.md
+++ b/source/references/components/input.md
@@ -1,7 +1,8 @@
---
title: <input>
type: references
-order: 2.4
+group: Build-in Components
+order: 8.10
version: 2.1
---