Create Project

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.

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.