Posts Tagged ‘json’

VB.NET is a pleasure

Wednesday, December 13th, 2006

I started using VB.NET to write that JSON/FTP/site editor program. I found a free ready made library to work with the JSON data. It’s from Newtonsoft Really easy to use. They don’t have much documentation, but just looking through the library with IntelliSense in the VB IDE is more than enough to understand how to use it. With around 6 lines of code I can flip data between CLR objects and JSON. Very nice!

I used VB.NET 2003 version about a year ago for the final group project in the last computer class I had. It didn’t seem as easy to use as the 2005 express version I am using now. It’s probably because that was my first foray into using .NET… anyways.

A a quick term list:
CLR = common language runtime
JSON = JavaScript object notation
IDE = integrated development environment
FTP = file transfer protocol
VB = Visual Basic programming language (.NET version)
IntelliSense = One of the ways Microsoft makes coding easier in the IDE.

Tags: , , , , ,
No Comments »

A few mishaps while getting the site ready

Tuesday, December 12th, 2006

The ajax/json site is fully functional now. I had a few problems though that I’ll discuss here.

First off, the simple hosting that is provided my my isp isn’t working correctly, so I had to look for an alternative host to do testing on. I found 50webs.com which provides 60mb of free bannerless hosting. They even allow you to use domain names with their free service, which is great. I got that setup and now my sister’s site (while slow) is on there and directly uses the domain name.

Today I showed the site to a friend, who in turn said that it didn’t work. He was using IE7. I use Firefox usually and had not gotten around to trying the completed site on different browsers… Anyways I figured out the problem and the site now works on Firefox2/Opera9/IE6/IE7.

What caused IE6 and 7 to not display the site? It seems that IE requires a new AJAX object for every request. I had it setup initially to define one AJAX object when the page loaded and reuse it. I also had an extra comma character in one of the json files that completely stopped IE from working (actually a good thing).

Now I can start working on the client application. I’ve decided to use VB.net instead of C# this time, so I can get more practice with it.

Tags: , , , , , , ,
No Comments »

No, but there is more…much more thanks to my new friend ajax.

Saturday, December 9th, 2006

As I mentioned in the previous post, I made a static website in html, css, javascript, and json. It works pretty good and that’s great. The problem is my sister is the one who should be adding/editing content because it is her site. So the question is, how can I make an easily update-able site that is on a server without any server-side coding functionality?

I had figured out pretty much how I wanted it to work even before I finished coding the first version of the site. Sure, I could just write a client application that spits out html\css code and uploads it to the server, but no, that isn’t cool enough.

I wanted to break up the site data and formatting. That way the client application would only need to create json files and upload them along with any new content.

That means the json data needs to be removed from the html files and the html page now needs to allow fetching of the data whenever the person using the site needs it. What does this mean? It means that I now have a site that is comprised of: index.htm, a css file, and a javascript file. This is pretty much the whole website (not including the json files)! How can this be possible? Thank our new friend ajax (Asynchronous JavaScript and XML). What that does is allow javascript code to fetch data from the server (in my case text files containing json data) when the user does some type of action.

Lets get on to a few examples, shall we!

The whole index page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
 <link rel="stylesheet" type="text/css" href="sapphirearts.css" />
 <script src="sapphirearts.js" type="text/javascript"></script>
</head>

<body onload="getJsonFromServer('links.json', 'init');">
<div id="divcontainer">
 <div id="divbanner"></div>

 <div id="divlinks"></div>

 <div id="divbody">
   <div id="divbodycontent"></div>
 </div>

 <div id="divfooter"></div>
</div>
</body>
</html>

What happens when this page is loaded on to a client computer? The javascript function getJsonFromServer() is called. This function downloads a block of json data that defines the main links for the site. Pretty cool, eh? When you click one of these main links, they call getJsonFromServer() again, but with different parameters and ends up filling the content area of the page.


function getJsonFromServer(filename, newstate)
{
 xmlHttp = getXmlHttpObject();

 if (xmlHttp != null){
   currentState = newstate; // save the state so we can process it later
   xmlHttp.onreadystatechange = stateChanged;
   xmlHttp.open("GET", filename, true);
   xmlHttp.send(null);
 }
}

Which relies on the function:

function getXmlHttpObject(){
 var objXMLHttp = null;

 if(window.XMLHttpRequest){
   objXMLHttp = new XMLHttpRequest();
 } else if(window.ActiveXObject){
   objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
 }

 return objXMLHttp;
}

The getXmlHttpObject() function needs to execute different functions based on what bowser the user is using. Just one of the multitude of problems getting cross browser compatibility.

Tags: , , , , , , , ,
No Comments »

javascript and json together forever

Saturday, December 9th, 2006

I created a static website recently for my sister. It is hosted on our ISP’s server, which means there is no way to do any server-side coding. The site is coding in html with a few pages using javascript and JSON (javascript object notation). Just what is JSON you ask? It is simply a way of structuring data like the more commonly known XML format, but it’s easier to use with javascript.

Why not just code the site in straight html? Well, I wanted the website to be somewhat easily modifiable. Even if the JSON is embedded in the page, it still allows easier access to the content and also cuts down on the actual number of pages.
For example, there is a page that displays a list of graphic designs she has made. The JSON text is processed when the page loads. When one of the graphic design links are clicked, a javascript function modifies the html on the page to display the new picture/title/description.

An example of JSON and the eval() function:

var pageInformation = '{"collection":[
   {"filename":"butterflyanimation.gif",
       "title":"Butterfly GIF",
 "description":"An animated butterfly made in ImageReady and Illustrator"},
   {"filename":"butterflypana.jpg",
       "title":"Express Colors",
 "description":"Express Inspiration for Spring 2005 Colors."}]}';

// create an object from the JSON formatted data
var objItems = eval('(' + pageInformation ')');

If this code were in a script tag, what would happen? The variable objItems would store all of that data in pageInformation as a javascript object. That means we can now access the data like: objItems.collection[0].title, which would be “Butterfly GIF”.

To change an element in a webpage, make sure it has its “id” property set. after that use the javascript: document.getElementById(‘id_name’).innerHTML = ‘whatever’;

Tags: , ,
No Comments »





 

 
Stock Photo Website
Tech Learning Site

Popular Article Tags

Recent Article Comments

Archives