Now, it is time to create our test Cordova application, "SmsApp". In order to create our test Cordova application, we can execute the following cordova create command:
> cordova create smsApp com.jsmobile.sms.app SmsApp
Then, we can add Android, iOS, and wp8 from the application directory as follows:
> cordova platform add android > cordova platform add ios > cordova platform add wp8
The following code snippet shows the jQuery Mobile page (index.html), which allows the user to enter a phone number and message. The user can then click on the Send button to send an SMS.
<html>
<head>
<!-- meta data and jQuery mobile includes are omitted for saving space -->
<script src="jqueryMobile/jquery.validate.min.js"></script>
<title>SMS App</title>
</head>
<body>
<div data-role="page" id="sms">
<div data-role="header">
<h1>Send SMS</h1>
</div>
<div data-role="content">
<h1>Send SMS now</h1>
<p>Enter mobile number and mobile message and click "send" button.</p>
<form id="smsForm">
<div class="ui-field-contain">
<label for="phoneNo">Phone Number</label>
<input type="text" id="phoneNo" name="phoneNo"></input>
</div>
<div class="ui-field-contain">
<label for="textMessage">Message</label>
<input type="text" id="textMessage" name="textMessage"></input>
</div>
<input type="submit" id="sendSMS" data-icon="action" value="Send"></input>
<ul id="messageBox"></ul>
<div id="result">
</div>
</form>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/sms.js"></script>
</body>
</html>As shown in the preceding highlighted code, we are utilizing the jQuery validation plugin. This is why we included the jquery.validate.min.js file. The "smsForm" form element contains the following elements:
"phoneNo": It includes a label and an input text to enter phone number- "
textMessage": It includes a label and an input text to enter text message. "sendSMS": It is a button to send an SMS message"messageBox": This is an unordered list used to display validation errors"result": This div is used to display the SMS operation result
Finally, we included sms.js. The sms.js file includes the implementation for the event handlers of "smsForm". The following code snippet shows the sms.js file's code:
(function() {
$(document).on("pageinit", "#sms", function(e) {
e.preventDefault();
function onDeviceReady() {
console.log("Apache Cordova is loaded ...");
$("#sendSMS").on("tap", function(e) {
e.preventDefault();
if (! $("#smsForm").valid()) {
return;
}
var messageInfo = {
phoneNumber: $("#phoneNo").val(),
textMessage: $("#textMessage").val()
};
sms.sendMessage(messageInfo, function() {
$("#result").html("Message is sent successfully ...");
}, function(error) {
$("#result").html("Error code: " + error.code + ", Error message: " + error.message);
});
});
}
document.addEventListener("deviceready", onDeviceReady, false);
});
$(document).on("pageshow", "#sms", function(e) {
e.preventDefault();
$("#smsForm").validate({
errorLabelContainer: "#messageBox",
wrapper: "li",
rules: {
textMessage: "required",
phoneNo: {
required: true,
number: true
}
},
messages: {
textMessage: "Please specify text message",
phoneNo: {
required: "Please specify Phone number",
number: "Phone number is numeric only"
}
}
});
});
})();As shown in the preceding code, in the "pageinit" event of the "sms" page, the "tap" event handler of the "sendSMS" button is registered after Apache Cordova is loaded. In the implementation of the "sendSMS" button's tap event handler:
- The
"smsForm"is validated using$("#smsForm").valid(). - If the form is valid, then, as shown in the preceding highlighted code, the
messageInfoobject is constructed using thephoneNumberandtextMessageattributes. ThephoneNumberandtextMessageattributes are initialized with the"phoneNo"and"textMessage"input text values. - A call to
sms.sendMessage(messageInfo, successCallback, errorCallback)is performed with the following parameters in order:- The
messageInfoobject. - The
successcallback function that will be called when an SMS is successfully sent. Thesuccesscallback function displays the"Message is sent successfully ..."message inside the"result"div. - The
errorcallback function that will be called when sending SMS fails. Thefailurecallback function displays both the error code and error message inside the"result"div.
- The
In the "pageshow" event of the "sms" page, our form validation is specified as follows:
errorLabelContainer: This is set to"messageBox"to display the validation errors insidewrapper: This is set to"li"to wrap the error messages in list itemsrules: This is set as follows:textMessageis set torequiredphoneNumberis set tonumberandrequired
messages: This is set totextMessageandphoneNumbervalidation errors messages
Now, let's build and run our SMS app in order to observe how our custom SMS plugin will behave across the different platforms (Android, iOS, and Windows Phone 8). When the user enters a valid phone number and a text message and then clicks on the Send button, the following will happen:
- In Android, an SMS will be sent directly from our Android SMS app without any intervention from the platform's default SMS app.
- In iOS, the user will be forwarded to the default iOS SMS app initialized with the phone number and text message from our custom SMS plugin. Once the user clicks on the Send or even Cancel button, the user will get back to our SMS app with the correct result displayed.
- In Windows Phone 8, the user will be forwarded to the default Windows Phone 8 SMS app initialized with the phone number and text message from our custom SMS plugin. Unfortunately, due to wp8 API limitations, when the user clicks on the Send or even Cancel button, we will not be able to detect what happens. This is why when you click on your wp8 device's back button to get back to our SMS app, you will find our SMS application always displaying the success message, which is not always correct due to the current wp8 API limitations.
Note
The complete source code of "SmsApp" can be downloaded from the book's web page or from GitHub (https://github.com/hazems/cordova-sms-plugin-test).