Skip to content

fulvio999/ubports_app_templates

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

42 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ubports_app_templates

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:

  1. donwload/clone the project (git clone https://github.com/fulvio999/ubports_app_templates.git)
  2. open a shell in the folder where you want create your new application
  3. 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.

  1. 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

AdaptiveLayout template

PageStack template

PageStack template

ListView template

ListView template

ChartsJs template

ChartsJs template

GridView template

GridView template

ContentHub template

About

A set of Application templates for UBports

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published