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