A set of Ubuntu Touch (UBports) templates/skeleton Applications created to speed up the development of new applications. You can create a new application using one of them as starting point.
Currently all the templates are “pure-qml-cmake - Pure QML App (built using Cmake)” (ie: Application qml+javascript based)
There are six templates:
The available templates are:
- AdaptiveLayout: to create an application based on the AdaptiveLayout Component
- ChartJs: to create an application that include chart creation using a javascript library
- ListView: to create an application that uses a ListView component (UbuntuListView) to show a list of items and PageStack for navigation
- PageStack: to create an application that uses PageStack component for pages navigation
-GridView: to create an application that show in the home page a Pages Menu list disposed as Grid
-ContentHub: to create an application based on UBPorts ContentHub to import images from the Apps registered as 'Images source' on your device. (With little changes this template can be adapted to import other types that need the ContentHub). For more technical comments and informations about ContentHub import process, please look at the source code of the template.
Requirements: A basic knowledge of QML language and Ubuntu Touch (UBports) development.
To use this templates is necessary install the “cookiecutter” library (https://cookiecutter.readthedocs.io/en/latest/installation.html).
After the installation will be available the executable ‘cookiecutter’ from the command line.
Also the installation of ‘clickable’ tool is nesessary (http://clickable.bhdouglass.com/en/latest/). It is not mandatory to create new applications from the templates but will be necessary to continue the development and test of the new application.
How to use the templates:
- donwload/clone the project (git clone https://github.com/fulvio999/ubports_app_templates.git)
- open a shell in the folder where you want create your new application
- run the following command:
$ cookiecutter "path to cookiecutter.json"
Where “path to cookiecutter.json” is the FULL path to “cookiecutter.json ”file of the chosen template.
- follow the textual wizard providing the required informations (press enter to use default proposed values)
At the end, your new application will be placed in a folder whose name is the value provided for “project_name” entry.
Example:
you want use 'ChartJs' template and you have cloned the "ubports_app_templates" project in the folder:
"/home/john/development/ubports/".
Now you are currently in the folder: /home/john/ and from this one you run the following command in a new shell:
$ cookiecutter /home/john/development/ubports/ubports_app_templates/ChartJs
(where "/home/john/development/ubports/ubports_app_templates/ChartJs" is the FULL path at 'cookiecutter.json' file of 'ChartJs' template).
At end of the textual wizard your new Application will be place under '/home/john/' folder. For example. if you have inserted "MyNewApp" for “project_name” entry you will find a folder with that name under '/home/john/'.
Testing: Note: ‘clickable’ tool is necessary to perform this task. To test your new application, enter in his root folder (e.g. "MyNewApp" looking at the above example). Inside it you’ll find a file named ‘clickable.json’, open a shell in that folder and run:
$ clickable desktop
If everything is ok, after a while your new application will start and look like one of the following screenshots (depends on the choosen tempplate).
Now you are ready to start your new application development. Open Atom Editor with 'clickable plugin' installed and open the root folder of your new generated App (e.g. "MyNewApp" referring at the above example).
Of course the names used in the templates (e.g. qml files, Pages, Components id, Components names...) are generic. Of Course, in your new Application you can customize, rename, adpat them according with your purpose. Also you can add new parts at the new Application just copying parts from different templates, just looking at his code and extract the part of your interest
Follow the screenshots of the base Application generated by the templates:
AdaptiveLayout template
PageStack template
ListView template
ChartsJs template
GridView template
