1. Getting Started

Getting Started

Ready

• WebStorm (new version is better)
• Node.js
• CLI for AndroidUIX : npm install -g androidui-cli

Create a project

1. Create a empty directory for your project
2. Cd into the directory, run androidui create to create a hello world project in the directory.
3. Open WebStorm and open the directory, your project will looks like :

Layout

Layout is same as Android's, files put at res/layout/xxxxx.xml, see the Docs.Layout

The created project's activity_main.xml:

<FrameLayout xmlns="android" xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_height="match_parent"
             android:layout_width="match_parent">
    <TextView
            android:id="textView"
            android:text="@string/hello_world"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_gravity="center"
            android:textSize="20sp" />
</FrameLayout>

JS Code

Use Typescript + ECMAScript6 to write the code.

Files put in the src directory, the API is same as Android's. see Docs.JSCode

The created project's MainActivity.ts:

///<reference path="../androidui-sdk/android-ui.d.ts"/>
///<reference path="../gen/R.ts"/>
module my.app {
    import ActionBarActivity = android.app.ActionBarActivity;
    import View = android.view.View;
    import Bundle = android.os.Bundle;

    export class MainActivity extends ActionBarActivity{

        protected onCreate(savedInstanceState?:Bundle):void {
            super.onCreate(savedInstanceState);

            this.setContentView(R.layout.activity_main);
        }
    }
}

Preview

Right click the index_debug.html file, choose Open in Browser to see created project's page.

Build Project

After you change the layout or modify the code, you should build your project before preview.

Debug Layout

Preview the index_debug.html file, open the dev dashboard, you can see the position and size of views.

Debug JS Code

Preview the index_debug.html file, open the dev dashboard, you can debug the typescript code in browser.

Package App

see wiki: Package App

End

See the wiki to know more.