Ibraheem Osama Mohamed (ابراهيم اسامه محمد)

Welcome to my blog :)

Client Dynamic Applicaiton : Read remote text file (using Drop Box) in Windows 8 JavaScript App

with 2 comments

Thinking of the client server model in your simple application and searching for the best hosting site for your services !!
What if you need to change the application content every day without hosting a web service ??
Now we need to think how to make a quotes application and we need to update the quotes everyday. So we need to text file
1)A Remote text file hosted in any free cloud service (Drop Box in this post).
2)A Local File to save this new quotes in cause of offline application running.

First we need to think about how we are going to save the data in the text file and what format we are going to use , sure without thinking XML OR JSON (I’ll use json in the post).

Lets start:

1)Open new Windows 8 JavaScript Application.
2)Design How the quotes will be displayed :-

3)Add a ListView in the default.html to bind it with the data

<div id="quotesTemplate" data-win-control="WinJS.Binding.Template">
           <h4 data-win-bind="innerText: Text"></h4> 
                <h6 data-win-bind="innerText: By"></h6>  
               <h6 data-win-bind="innerText: Situation"></h6>  
               <h6 data-win-bind="innerText: Date"></h6>        
 <div data-win-control="WinJS.UI.ListView" id="listView" data-win-options="{itemTemplate: select('#quotesTemplate')}">   

4)Now we need to add the data source , open drop box folder , add a public folder and add a file quotes.json
5)Right Click on the file and in drop box section click copy public link

6)Save the copied link in notepad or whatever
7)Add the quotes in the file in JSON format

{“quotes”:[{ “Text”: “Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius — and a lot of courage — to move in the opposite direction”, “By”: “Albert Einstein”, “Situation”: “Enter the situation”, “Date”: “2020” }
,{ “Text”: “Imagination is more important than knowledge”, “By”: “Albert Einstein”, “Situation”: “Enter the situation”, “Date”: “2020” }]}
if you can’t verify the JSON this is a very useful web site

8)After writing the data into the JSON file and verifying the correction of the JSON format
9)Open default.js and add the Code that reads the file in onactivated function

 WinJS.xhr({ url: "The public file URL that you saved earlier in a note pad " }).then(
function complete(result) {                     
var quoatesArray = JSON.parse(result.responseText).quotes;
var quoatesList = new WinJS.Binding.List(quoatesArray);
var publicMembers = {itemList: quoatesList};
listView.winControl.itemDataSource = quoatesList.dataSource; });

The Code :
A)We defined a WinJS XML http request to request the file (by default the method is GET).
B)In the JSON File I defined a variable called quotes that contains the array so after parsing I added .quotes to the result.
C)I added a WinJS.Binding.List so I can bind the received array to the list

now run the application and you'll get

10)to update the quotes in you application just what you need to do is add a new quotes or remove in the drop box file like 

{"quotes":[{ "Text": "Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius -- and a lot of courage -- to move in the opposite direction",
 "By": "Albert Einstein", "Situation": "Enter the situation", "Date": "2020" },
{ "Text": "Imagination is more important than knowledge",
 "By": "Albert Einstein", "Situation": "Enter the situation", "Date": "2020" },
{ "Text": "I Love Windows 8 and I Love JavaScript", "By": "Ibraheem Osama Mohamed", "Situation": "Thinking of ..",
 "Date": "2050" }]}  

11)Run the application again


Thanks and if you need any help or need to add something you are welcome just write a comment.
This is the code screen shot if you didn't get it from the post




Written by Ibraheem Osama Mohamed

September 18, 2013 at 8:24 am

Posted in Windows 8

2 Responses

Subscribe to comments with RSS.

  1. […] the last post I explained how to read data from a remote text file hosted in Drop Box using Windows 8 JavaScript […]

  2. all the time i used to read smaller articles that also clear their
    motive, and that is also happening with this post which
    I am reading at this time.

    hosting murah dan cepat

    June 12, 2015 at 4:54 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: