Skip to content

Create Project

Jump to bottom
Hyojin Kim edited this page Apr 11, 2017 · 33 revisions

How to create Toast project

recommended workspace

./
   |-cordova-js/ ............
   |-cordova-plugin-toast/ ..
   |-cordova-sectv-orsay/ ...
   |-cordova-sectv-tizen/ ...
   |-cordova-tv-webos/ ......
   |-grunt-cordova-sectv/ ...

create empty project

# Create cordova project
$ cordova create TestApp
$ cd TestApp

# Beware of hidden file
$ cp -rf ../grunt-cordova-sectv/sample/. ./
$ npm install ../grunt-cordova-sectv
# Grunt task for build and package

# Install dependency modules
$ npm install

# For toast browser simulator
$ cordova platform add browser

# Mandatory plugins for using browser simulator (not for other platforms)
$ cordova plugin add cordova-plugin-device
$ cordova plugin add cordova-plugin-network-information
$ cordova plugin add cordova-plugin-globalization

# Add toast plugin
$ cordova plugin add ../cordova-plugin-toast

create project with sample media template

ex. media sample in cordova-plugin-toast

# Create cordova project
$ cordova create sampleMedia --template=cordova-plugin-toast/sample/media
$ cd sampleMedia

# Beware of hidden file
$ cp -rf ../grunt-cordova-sectv/sample/. ./
$ npm install ../grunt-cordova-sectv
# Grunt task for build and package

# Install dependency modules
$ npm install

# For toast browser simulator
$ cordova platform add browser

# Mandatory plugins for using browser simulator (not for other platforms)
$ cordova plugin add cordova-plugin-device
$ cordova plugin add cordova-plugin-network-information
$ cordova plugin add cordova-plugin-globalization

# Add toast plugin
$ cordova plugin add ../cordova-plugin-toast

www/index.html

  • Please note that cordova.js, toast.js have to be placed in bottom of <body> tag. (If placed to <head> tag, It causes timing issue.)
<!-- REMOVE meta tag for setting CSP(Content-Security-Policy)
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
-->

<!-- Please add below script tags to body tag (not head tag) -->
<body>
    ...
    <script type="text/javascript" src="cordova.js"></script>
    
    <!-- Add toast.js to use toast api -->
    <script type="text/javascript" src="toast.js"></script>
    ...
</body>

How to add other elements to a particular platform

  • It is sometimes necessary to add something to each platform which maybe not mandatory but needed.

Mandatory elements

In config.xml of your Cordova project, please add elements in each platform tag.

And these elements will be automatically added to each platform when preparing.

  • In case orasy and tizen, elements format is XML tag.
  • In case webos, elements format is JSON.
<platform name="sectv-orsay">
    <multiapp>y</multiapp>
</platform>
<platform name="sectv-tizen">
    <tizen:metadata key="http://samsung.com/tv/metadata/prelaunch.support" value="true" />
</platform>
<platform name="tv-webos">
    {"appDescription": "This is an sample application"}
</platform>

For more details, please see the config.xml reference on Cordova site.

uuuu

Home

Getting Started

Converting Tizen to Toast

Converting Legacy to Toast

API Reference

Supported platforms

Sample App

Contribution

Frequently Asked Questions

Clone this wiki locally