Note
The files highlighted in yellow are hardcoded in code and cannot be changed.
- Home
- Getting Started
- The Basics
- The Essentials
- The Advanced
-
Plugins
- AppBarLayout
- AsheraCore
- BrowserDialogs
- CapInsets
- CardView
- Chip
- ConstraintLayout
- CoordinatorLayout
- cordova-plugin-camera-swt
- cordova-plugin-qrscanner-swt
- cordova-plugin-sqlite-2-swt
- cordova-swt
- cordova-web
- CSSBorder
- Custom
- CustomWidgetExtension
- DateTime
- Dialog
- Drawer
- Glide
- GridLayout
- IndexedDb
- IQkeyboardManager
- NavigationView
- NestedScrollView
- Picasso
- RecycleView
- SDWebImagePlugin
- ShutterBug
- Snackbar
- Splash
- TabLayout
- TextInputLayout
- Toolbar
- ViewPager
Creating your first project
Ashera project can be created by creating a Apache Cordova project as explained here. The project structure is similar to Apache Cordova.
Understanding the folder structure
Given that Ashera native is Android first i.e. android platform is mandatory for development as the development is done using Android Studio inside the android platform folder. Hence it is important to understand the folder structure inside android folder.
android/app/src/main/
├── assets/www/
│ ├── css
│ ├── js
│ │ └── index.js
│ └── img
├── gentool/
├── java/
├── res/
│ ├── color
│ │ └── border_material_color.xml
│ ├── drawable
│ │ ├── checkbox_selector.xml
│ │ └── radio_selector.xml
│ ├── drawable-hdpi
│ ├── drawable-ldpi
│ ├── drawable-mdpi
│ ├── drawable-xhdpi
│ ├── drawable-xxhdpi
│ ├── drawable-xxxhdpi
│ ├── font
│ │ ├── droidsansmono.ttf
│ │ ├── robotobold.ttf
│ │ ├── robotobolditalic.ttf
│ │ ├── robotoitalic.ttf
│ │ └── robotoregular.ttf
│ ├── layout
│ │ └── index.xml
│ ├── menu
│ │ └── main_menu.xml
│ ├── navigation
│ │ └── nav_graph.xml
│ ├── values
│ │ ├── colors.xml
│ │ ├── dimens.xml
│ │ ├── strings.xml
│ │ ├── styles.xml
│ │ └── sytem_styles.xml
│ ├── values-fr
│ ├── values-w100dp-h100dp
│ └── xml
│ └── recyclerview_simple.xml
├── res-ios/drawable-ios/
├── res-swt/drawable/
├── tsc/src
│ └── Index.ts
└── resources/
Note
The files highlighted in red are auto generated and managed by scripts inside gentool.
The following table lists the function of each folder:
| # | Name | Description |
|---|---|---|
| 1 | assets/www | Folder which contain cordova files. Ashera uses this folder to load the hidden webview by loading index.html. |
| 2 | gentool | Folder which consists of tools related to generating index.js, resources and drawable folders. |
| 3 | res/color | Folder which consists of color xml selector files. |
| 4 | res/color | Folder which consists of drawable xml selector files. |
| 5 | res/drawable-xxxhdpi | Folder which consists of png image files required for the application. |
| 6 | res/font | Folder which consists of ttf font files and custom xml font definition files. |
| 7 | res/layout | Folder which consists of layout files. The native UI provided by Ashera needs to be created here. This is where most of the ui development takes place. |
| 8 | res/menu | Folder which consists of menu files required for toolbar widget. |
| 9 | res/navigation | Folder which consists of nav_graph.xml which is used for building navigation between screens. |
| 10 | res/values | Folder which consists of colors.xml for defining color definitions, dimens.xml for defining dimension definitions, strings.xml for internationalization, styles.xml for cross platform styling and sytem_styles.xml for theming. |
| 11 | res/xml | Folder which consists of xml files required for recycler view widget. |
| 12 | tsc/src | Folder which consists of fragment files backing the xml files. i.e each xml file in layout will have ts file backing it. This will be responsible for handling ui events. |