Ashera

Creating your ui and backing fragment

To develop Ashera ui, you use android studio and android widgets in Android studio. There are already lot of video tutorials on how to use android studio to create user interface. Click here to know how to use android studio to design a user interface. You can follow only how the xmls are created and ignore any topic related to java code reference as Ashera provides Generic implementation of the same.

Lets us first understand the basic structure of android xml.

General structure of xml

The following code shows the general structure of the root xml:

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:ignore="MissingPrefix">

    <data></data>
     <!-- Root view. can be ConstraintLayout, LinearLayout etc   -->
    <androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#e5db54"
    tools:ignore="MissingPrefix">
    ...
    <!-- Inline java script + resource  -->
     <View
        name="@layout/cat_hello_textview"
        type="javascript"
        widget-override="Inline"
        android:layout_width="0dp"
        android:layout_height="0dp"
        tools:ignore="ExtraText">
         <![CDATA[
                window.inlineFunction = function() {
                    alert("Meow meow !!!!");
                }
            ]]>
     </View>
    
    
    <!-- Include other files  -->
    <include layout="@layout/test"/>
    
    <!-- Include ui elements  -->
    <Button
        android:id="@+id/loginButton"
        onClick="validateMyForm"
        android:layout_width="0dp"
        android:textColor="#000"
        android:layout_height="0dp"
        android:layout_marginBottom="5dp"
        android:text="Login"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.082"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintWidth_percent=".87" />
    ...
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

The following code shows the general structure of child xml:

<?xml version="1.0" encoding="utf-8"?>
<!-- Can be ConstraintLayout, LinearLayout etc   -->
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:background="#e5db54"
   tools:ignore="MissingPrefix">
   ...

	<!-- Include other files  -->
    <include layout="@layout/test"/>
    
   

   ...
</LinearLayout>

Root xml vs Child xml

It is important to note that child xml does not contain the layout and data tag. It can contain other child xml through the include tag. Interactive samples provided use child xml and hence layout and data tags are missing.

Inline javascript vs Typescript in backed fragment

Use Inline javascript to a minimum. Always create handlers in Typescript using VS Code as you get advanced refactoring capabilities. Inline javascript/resources can be used for downloadable xml cases. i.e. you download a xml using http and the file should have all the functionalities i.e. javascript, child xml. For xml downloaded via http, you bundle all the javascript and dependent resources in single xml file.

Login example

Lets us start building the classic login page. We will enhance the example as we go along in the future sections.

The steps below describe how to create an ui in Ashera:

Step 1 - Design the xml e.g. login.xml
Step 2 - Create your backing Fragment by adding fragment attribute in the ui xml. This will automatically map the login.xml to the Login.ts component
Step 3 - Add an entry to navigation/nav_graph.xml. This will generate an actionId in "./R/NavGraph.ts"
Step 4 - Use the actionId generated in NavGraph.ts to navigate to the login.xml using NavController
Step 5 - Update Login.ts to add click handlers for login button