1. Getting Started

林法鑫 edited this page Aug 18, 2016 · 11 revisions

Getting Started

Ready

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 :

Created Project

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.

Open in Browser

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.

DebugLayout

Debug JS Code

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

DebugJSCode

Package App

see wiki: Package App

End

See the wiki to know more.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.