Documentation

DedrisFramework documentation

Introduction

DedrisFramework is a thin, friendly layer on top of Apache Cordova. Cordova wraps your web app (HTML, CSS, JavaScript) inside a native container so it can run as a real app on iOS and Android and access device features through plugins. DedrisFramework adds the things Cordova leaves to you: a UI component library, starter templates, and clear guides.

If you're brand new, start with the installation guide and come back here to go deeper.

Project structure

A freshly created Cordova project looks like this:

Path	What it holds
`www/`	Your app's HTML, CSS and JS — this is where you build.
`config.xml`	App metadata, icons, permissions and plugin settings.
`platforms/`	Generated native projects (Android/iOS). Don't edit by hand.
`plugins/`	Installed Cordova plugins.

You spend almost all of your time in www/. Drop DedrisFramework's dedris.css there and start composing screens from components.

The Cordova WebView

Your app runs inside a system WebView. Because it's a real browser engine, everything you know from the web works — but a few things differ from a normal web page:

There is no address bar; navigation is driven entirely by your code.
Device features (camera, GPS, files) are reached through plugins, not browser APIs.
You should wait for the deviceready event before calling native code.

www/js/app.js

document.addEventListener("deviceready", onReady, false);

function onReady() {
  // Cordova and its plugins are now available
  console.log("Running on " + device.platform);
}

Configuring config.xml

The config.xml file controls how your app is packaged. A minimal example:

config.xml

<widget id="com.dedris.myapp" version="1.0.0">
  <name>MyApp</name>
  <description>Built with DedrisFramework</description>
  <content src="index.html" />
</widget>

App lifecycle

Cordova surfaces native lifecycle events you can hook into:

Event	Fires when
`deviceready`	Cordova is fully loaded and ready.
`pause`	The app moves to the background.
`resume`	The app returns to the foreground.
`backbutton`	The Android hardware back button is pressed.

Build & run

Build and launch on a device or emulator:

terminal

cordova run android
cordova run ios

Release builds

When you're ready to ship, produce an optimized, signed build:

terminal

cordova build android --release
cordova build ios --release

From there, follow each store's submission process to publish your app. Need a hand? Ask in the community.