Part one - Send and recive SMS
In this tutorial we will use the SMS View in the Ikivo IDE to simulate the sending and receiving of a message.
If you already have a project opened, you can use this one. If not, begin with open a project (File -> New Project)
• Create a new SVG Tiny File in the Ikivo IDE (File -> New…)
• Replace “Add your SVG code here” with the following code:
<![CDATA[
<text id="status" x="10" y="20">
Waiting for SMS...</text>]]>
• Debug your file and watch the result in the “Playback View” (The only thing visible should be the text string “Waiting for SMS”)
• Add the following javascript code:
<![CDATA[
<script type="application/ecmascript"><![CDATA[
var enrichNS = "http://www.ikivo.com/enrich";
var status = document.getElementById("status");
var root = document.documentElement;
root.addEventListenerNS(enrichNS, "SMSReceived",
SMSReceived, false, null);
function SMSReceived(evt)
{
status.textContent = "SMS received";
var msg = evt.getMessage();
var t = msg.to.getItem(0);
var f = msg.from;
ikivo.debug.log("From: " + f.name);
ikivo.debug.log("To: " + t.name);
ikivo.debug.log("Message: " + msg.getText());
}
]]]]><![CDATA[></script>
]]>
The code above contains a script tag. The first part contains the needed variable declarations and statements. The script tag also contains a function; SMSReceived. The first part of the function sets variables by getting information from the SMS View. The simulated SMS sent from the SMS View prints out a log, based on the variables, in the Console View.
In the script, we are using a function called addEventListenerNS. If you want to know more about it and how to use it, click here.
• Debug your file, type in your information in the SMS View, press send and watch the result in the Playback View and the Console View.
Part two - Adding graphics
You have already managed to send a message though the SMS View and watched the result in the Console View. Now we are going to take it a step further and make the message appear in the Playback View.
• Let’s begin with changing our text in the Playback View to something more graphical appealing.
<![CDATA[
Change:
<text id="status" x="10" y="20">
Waiting for SMS...</text>
To:
<g id="sms">
<rect x="10" y="20" rx="20" ry="20"
width="220" height="200"
fill="#abc" stroke="#678" stroke-width="6"/>
<text id="status" font-size="26" font-weight="bold"
x="30" y="50" fill="#678">Waiting for SMS</text>
<!-- 'From' text -->
<text x="30" y="80" font-size="16"
fill="#678">From:</text>
<rect x="30" y="85" width="180"
height="20" fill="#def" stroke="#678"
stroke-width="1"/>
<text id="fromText" x="35" y="100"
font-size="14"/>
<!-- 'To' text -->
<text x="30" y="128" font-size="16"
fill="#678">To:</text>
<rect x="30" y="133" width="180" height="20"
fill="#def" stroke="#678" stroke-width="1"/>
<text id="toText" x="35" y="148"
font-size="14"/>
<!-- 'Message' text -->
<text x="30" y="176" font-size="16"
fill="#678">Text:</text>
<rect x="30" y="181" width="180" height="20"
fill="#def" stroke="#678" stroke-width="1"/>
<text id="messageText" x="35" y="196"
font-size="14"/>
</g> ]]>
• Debug or run the file, you will se the new graphics in the Playback view.
Now we have the structure, but we want our input from the SMS View to appear in the Playback View instead of in the Console View. To do this, we need to change our script.
• Replace your function SMSReceived with the following function:
<![CDATA[
function SMSReceived(evt){
//Get the corresponding svgtext elements
var fromText = document.getElementById("fromText");
var toText = document.getElementById("toText");
var messageText = document.getElementById("messageText");
var status = document.getElementById("status");
status.textContent = "SMS received";
// Get the message object
var msg = evt.getMessage();
// Get the first Contact Card from the 'to' list
var toCard = msg.to.getItem(0);
// Get the 'from' Contact Card
var fromCard = msg.from;
// Set the text on the SVG text elements
fromText.textContent = fromCard.name.substring(0,15);
toText.textContent = toCard.name.substring(0,15);
messageText.textContent = msg.getText().substring(0,15);
}
]]>
Debug the file. If everything works correctly, your information should appear in the Playback View and no longer be visible in the Console View.
|
