Interaction between webview and Titanium API

Introduction :
I have faced this as a very common requirement, where we need to display any html content to any specific portion of our app and we need to make a bridge which can talk with platform APIs.
So here again webview content can also make communication with Titanium native API’s. Here I have demonstrated a way to call native API functionality from webview contents.

Summary :
With above video, I have described the way to bind Titanium API’s with HTML events, which can talk to each other.

THAT’S IT

Presented By: Raju Mahato, Software Developer, Mindfire Solutions

Get page tile that loaded on webview in Titanium

Introduction :
Sometime we need to know the page title of the currently loaded page in webview.
Using Titanium evalJS() method we can get the specific DOM element of the page loaded in webview. Using the same we can get the page title too.

Summary :
Above screen cast demonstrates the way to get page title i.e. currently loaded on the webview using Alloy in Titanium

THAT’S IT

Presented By: Raju Mahato, Software Developer, Mindfire Solutions

Load event of webview in Titanium

Introduction :
Load is an event associated with the webview in Titanium which gets called once the page gets loaded on the webview controller.

Summary :
Using Load event we can trigger any function or event which will be fired once the page gets fully loaded.

THAT’S IT

Presented By: Raju Mahato, Software Developer, Mindfire Solutions

Webview to load local html content in Titanium

Introduction :
Using webview API in Titanium we can load external web link, we can load html file contain addition to that locally we can prepare variable holding html data and using one of the property of webview called ‘html’ we able load html string to it.

Summary :
So on runtime we are able to load any html string content to any webview by assigning the same to its very own property ‘html’.

THAT’S IT

Presented By: Raju Mahato, Software Developer, Mindfire Solutions

Invoking Camera Using WinJS

Introduction

Couple of days back, I got a task to capture image of an user. The image area is very limited in size. The user has to crop the image as per the required size and area to display. Before start worrying about the same, I was glad to see the features provided by WinJS.

We can use Windows.Media.Capture.CameraCaptureUI to invoke the camera and capture image. This not only shows the camera UI on screen but also displays the cropping options along with pixel adjustment and timer options.

Below is just a simple example of how it works.

HTML PART:-

<body>
    <input type="button" id="btnOpenCamera" value="Open Camera" />
    <br />
    <img src="#" id="imgCapture" alt="Caputured Image" style="display:none" />
</body>

We have added a button to open the camera and an image control to display the captured image on screen.

Continue reading

Callbacks the very essence of asynchronous JavaScript programming

Introduction

In earlier days of programming every thing was sequential when one operation needed to wait for the others above it to finish. In situation like those of some priority task had to be done then it had to wait for a long to execute the next. So Callbacks and asynchronous programming are the new market introductions.

Description

Callbacks can be in simpler term visualized as a reminder to the Event loop that this has to be executed after a specific interval. As a result after the interval is reached the callbacks get executed on the highest priority basis (But still there’s some limitation which you’ll get to know reading further).

These call backs can be of two types:

–  Blocking callbacks (also known as synchronous callbacks or just callbacks)
–  Deferred callbacks (also known as asynchronous callbacks)

Continue reading

Video Tutorial for Dynamically Inserting Multiple Progress Bar

In this tutorial we will demonstrate the way to insert the progress bar dynamically to the DOM using JavaScript.

Basic Template:-

<div class="progressBarHolder"
        data-progress="40"
        data-max-progress="100"
        data-show-extra="N">
</div>

Video Tutorial:-

Continue reading

Handling PhoneGap Android Application Using Custom URL Scheme

Introduction:-
When we are launching the Android application using custom URL scheme, we may need to extract the parameter attached with the custom URL that we are using as link in the other native application like email.

Description:-
In my last post I have described how to launch the android application using custom scheme. So continuing with that here we can get to know how to use the same URL scheme along with WebIntent Plugin to get the parameter attached with the custom URL.

After creating the intent in the manifest file in the next step we need to pass the  parameter via the href in the anchor tag. Lets say we are passing the user name as parameter in the href along with the custom scheme and we need the same user name after launching the application.

Continue reading

Video Tutorial for Designing Static Progress Bar

This tutorial we will demonstrate the way to design the basic progress bar. First, we will look into the design concept to be used, then will try to make the progress bar quite attractive.

Basic Layout:-

Designing Static Progress Bar

Designing Static Progress Bar

Video Tutorial:-

Desired Output:-

OutPut-Video Tutorial for Designing Static Progress Bar

OutPut-Video Tutorial for Designing Static Progress Bar

To achieve the above design below is the simple code,

Continue reading

One Way Data Binding In WinJS

Introduction
Data binding is one of the key feature in the application development. One way data binding is the way to reflect the data in the control from a model. Any up-gradation made to the data in the model it will reflect in the control to which it is bound.

One way data binding
Below is a one way binding application example to see how it is really working. Let’s add a page item to the project. This will add 3 files in general. One JS file, Html file and a CSS file with the same name specified for the page item.

Continue reading