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 numbertextMessage"
: 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 resultFinally, 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:
"smsForm"
is validated using $("#smsForm").valid()
.messageInfo
object is constructed using the phoneNumber
and textMessage
attributes. The phoneNumber
and textMessage
attributes are initialized with the "phoneNo"
and "textMessage"
input text values.sms.sendMessage(messageInfo, successCallback, errorCallback)
is performed with the following parameters in order:messageInfo
object.success
callback function that will be called when an SMS is successfully sent. The success
callback function displays the "Message is sent successfully ..."
message inside the "result"
div.error
callback function that will be called when sending SMS fails. The failure
callback function displays both the error code and error message inside the "result"
div.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:textMessage
is set to required
phoneNumber
is set to number
and required
messages
: This is set to textMessage
and phoneNumber
validation errors messagesNow, 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:
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).
18.191.150.231