We will create a mobile stock quote tracker program in this article. The program retrieves the real time quotes of symbols specified by the user and displays the results in a user friendly format. The user can also specify the high and low thresholds for setting alerts. The View Stock Alerts screen displays the stocks that have crossed above the high threshold and stocks that have values below the low threshold.
The stock symbols selected by the user are stored in a simple MS Access database containing a single table "tblStk".
Here is the data structure of tblStk.
| Field Name |
Description |
Data Type |
| StkSymbol |
Stock Symbol. |
Text |
| StkHigh |
High Threshold for alerts. |
Number(decimal) |
| StkLow |
Low Threshold for alerts. |
Number(decimal) |
Open up your favorite html editor and let's get started with the coding. Save the file as mobstk.aspx.
Rather than going sequentially through the program, we will discuss the example in logical steps. You may prefer to download the complete code listing for the article and run through it once, read this overview and then try it out.
The Home Page:
This page provides a simple menu of choices for the user to navigate through the program.
<mobile:Form id = "Form1" runat="server">
<mobile:Label runat="server">Stock Quotes</mobile:Label>
<mobile:List id="List1" runat="server" OnItemCommand="Navigate">
<Item Value="ViewStkQuotes" Text="View Stock Quotes"></Item>
<Item Value="ViewStkAlerts" Text="View Stock Alerts" ></Item>
<Item Value="Add" Text="Add Stocks" ></Item>
</mobile:List>
</mobile:Form>
Code Snippet 1: Home Page UI.
The above listing creates the user interface for a mobile web form containing a List control with 3 options.
- View Stock Quotes.
- View Stock Alerts.
- Add Stocks.
Figure 1 : Home Page.
View Stock Quotes.
Selection of the first option "View Stock Quotes" from the Home page results in the activation of the View Stock Quotes Form.
Below is the code for creating the user interface for the View Stock Quotes Form.
<mobile:Form runat="server" id="FormViewStkQuotes"
OnActivate="FormViewStkQuotes_Activate">
<mobile:Label id ="lblAllStkQuotes" runat="server" >
Your Stock Quotes
</mobile:Label>
<mobile:ObjectList id="StkQuotes" runat="server"
TableFields="StkSymbol;StkPrice" >
</mobile:ObjectList>
<mobile:Command runat="server" id="btnRefreshQuotes" OnClick="QuotesRefresh"> Refresh
</mobile:Command>
<mobile:Link runat="server" NavigateURL="#Form1">
Back to Main Menu
</mobile:Link>
</mobile:Form>
Code Snippet 2: "View Stock Quotes" UI.
This form contains a list of the stock symbols selected by the user. On clicking the stock symbols, the user is presented with the stock quotes for the symbol.
The function FillStocks is invoked when the View Stock Quotes is activated and also when the Refresh button is clicked.
In the function, we get the list of stock symbols specified by the user from the Access database in a dataset. Next we add a column StkPrice to the dataset as a place holder for the stock quotes. The function iterates through each stock symbol and retrieves the stock quote from the web site and fills the value in the StkPrice column of the row. Once the data is ready, we bind the ObjectList control to the data in the dataset and display the results to the user.
The ObjectList control provides special formatting options in Mobile Forms. This control is strictly databound.
Private
Sub FillQuotes()
Dim Conn As New OleDbConnection(strConn)
Dim cmd As New OleDbCommand("select StkSymbol from tblStk", Conn)
Dim oDataAdapter As New OleDbDataAdapter(cmd)
Conn.Open()
ds = New DataSet
oDataAdapter.Fill(ds, "tblStk")
Conn.Close()
Dim req As HttpWebRequest
Dim res As HttpWebResponse
Dim sr As StreamReader
Dim strResult As String
Dim temp() As String
Dim strcurindex As String
Dim fullpath As String
Dim PriceColumn As New DataColumn
PriceColumn.DataType = System.Type.GetType("System.Decimal")
PriceColumn.AllowDBNull = True
PriceColumn.Caption = "Price"
PriceColumn.ColumnName = "StkPrice"
PriceColumn.DefaultValue = 0
' Add the column to the table.
ds.Tables("tblStk").Columns.Add(PriceColumn)
'Get stock quotes for each stock symbol
Dim myRow As DataRow
For Each myRow In ds.Tables("tblStk").Rows
fullpath = "http://quote.yahoo.com/d/quotes.csv?s=" + myRow(0) + "&f=sl1d1t1c1ohgvj1pp2owern&e=.csv"
Try
req = CType(WebRequest.Create(fullpath), HttpWebRequest)
res = CType(req.GetResponse(), HttpWebResponse)
sr = New StreamReader(res.GetResponseStream(), Encoding.ASCII)
strResult = sr.ReadLine()
sr.Close()
temp = strResult.Split(separator)
If temp.Length > 1 Then
'only the relevant portion .
strcurindex = temp(1)
myRow(1) = Convert.ToDecimal(strcurindex)
End If
Catch
End Try
Next myRow
dv = ds.Tables(0).DefaultView
StkQuotes.DataSource = dv
StkQuotes.DataBind()
End Sub 'FillQuotes
Code Snippet 3: Functionality to retrieve and display stock quotes.
Figure 2: View Stock Quotes Page.
Figure 3: Details of Stock quote.
View Stock Alerts.
Displaying stock alerts uses the same logic as that for stock quotes with a small addition. The form ViewStkAlerts generates the front end UI for the page. The function FillAlerts is called on Form activation of the ViewStkAlerts Form or when the Refresh button on the form is clicked.
When a stock in the list is clicked, the details of the alert are displayed – the high threshold, low threshold and the current stock price.
dv.RowFilter = "StkPrice>StkHigh or StkPrice <StkLow"
Code Snippet 4: "View Stock Alerts" Functionality.
This line of code is used to filter only the stocks which have crossed the user specified threshold values.
Figure 4: Stock Alerts.
Figure 5: Details of stock alerts.
Add New Stock.
Listed below is the code for generating the user interface for adding new stock symbols for future tracking.
<mobile:Form runat="server" id="FormAdd">
<mobile:Label id ="lbl1" runat="server" >
Enter a new Stock to track
</mobile:Label>
<BR/>
<mobile:Label id ="lblSymbol" runat="server" >Symbol:</mobile:Label>
<mobile:TextBox id="txtSymbol" runat="server"></mobile:TextBox>
<mobile:Label id ="lblHigh" runat="server" >High Threshold</mobile:Label><BR/>
<mobile:TextBox id="txtHigh" runat="server"></mobile:TextBox>
<mobile:Label id ="lblLow" runat="server" >Low Threshold</mobile:Label><BR/>
<mobile:TextBox id="txtLow" runat="server"></mobile:TextBox>
<mobile:Command runat="server" id="Button" OnClick="AddNewStk">
OK
</mobile:Command>
<mobile:Link runat="server" NavigateURL="#Form1">
Back to Main Menu
</mobile:Link>
</mobile:Form>
Code Snippet 5: "Add New Stock" UI.
The code to save the new stock symbol simply executes an insert against the Access database and the user is informed that the Save was successful.
Protected
Sub AddNewStk(ByVal Sender As [Object], ByVal e As EventArgs)
Dim strSQL As [String] = "Insert into tblStk (stkSymbol, StkHigh, StkLow) VALUES ('" + txtSymbol.Text + "', " + Convert.ToDecimal(txtHigh.Text) + ", " + Convert.ToDecimal(txtLow.Text) + ");"
Dim Conn As New OleDbConnection("PROVIDER=Microsoft.Jet.OLEDB.4.0;DATA c:\inetpub\wwwroot\dotnet\test.mdb;")
Conn.Open()
Dim cmd As New OleDbCommand(strSQL, Conn)
cmd.ExecuteNonQuery()
Conn.Close()
ActiveForm = FormAdded
End Sub 'AddNewStk.
Code Snippet 6 : Add new Stock Functionality.
Figure 6: Add new stock.
Figure 7 : User confirmation for Add New Stock.
Figure 8: The newly added stock symbol "HWP" is also added in the stock list.
Note that exception handling, user data entry validation have not been included in this example for the sake of simplicity.
Conclusion.
This example demonstrates some of the different controls used in Mobile .Net Web Forms and the ease with which the extensive capabilities of the .Net Framework components can be applied for mobile programming.