All we need is Visual Studio 2005 and a database, for this example I’m creating a new class called Customer which is based on the database table Customer, the table columns description is shown below.
1) Open your project and create a new empty XML Schema, for this example.
2) Open the server explorer in visual studio 2005 and connect to your database server, for this example I’m using a database located in my pc.
3) Drag the database table into your empty XML schema previously created.
4) Modify the schema as wanted, for this example I’m making the following changes:
· Changing the file id from an element to an attribute
· Removing the main element called Document, leaving just one main element called Customer.
You can also add subtypes, for example dragging a “telephoneNumber” table which is not showed in the example, but contains the following fields: Id, Number and type. Create a new type called Telephone, make some modifications to it and set it as reference for the fields MobileNumber, PhoneNumber and FaxNumber in our main “class” (Customer) XML schema. On that way you’ll build a more structured class.
At the end the schema looks like this:
5) Look into your PC for the application xsd.exe it should be in the directory: C:\Program Files\Microsoft Visual Studio 8\SDK\v2.0\Bin
(Optional) It is easier if you copy the xsd.exe file and your XML schema .xsd file in a known directory in your pc.
6) Open a command console and browse to the directory where the XML schema file and the file xsd.exe are in and run the following command:
7) Once you have done this, you will get a new file in the same directory, that file is the class!!! So basically you are done now, is just copy that file into your App_code directory or wherever you want.
8) What’s the big deal with this? The big deal is that now you can modify your class, add namespaces or whatever, and just creating an instance and adding a couple lines, you can use the XmlSerializer Class to build an XML document from your class, which will follow the same format as the XML schema that you created at the beginning, making easier validation and such processes. There are a lot more of things that you can do, this is just an example, for more information visit: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpref/html/frlrfsystemxmlserializationxmlserializerclasstopic.asp
You will notice that in the new class you’ll get some properties named like this: [existing property]+Specified. These properties are used by the XmlSerializer class to omit properties with “non nullable” types like int, double, etc. when none value has been assigned to the property. You can just delete those fields, but you have to be aware that when you make an instance of the class and try to serialize it you will get lines like this one: “0,00” , supposing defaultCommission hadn’t assigned any value in your instance.
Here is a simple example of the serializing process.
Add this method to the class Customer:
public string ToXml()
{
XmlSerializer serializer = new XmlSerializer(typeof(Customer));
System.IO.MemoryStream stream = new System.IO.MemoryStream();
System.IO.TextWriter writer = new System.IO.StreamWriter(stream);
//This line builds the xml into the stream
serializer.Serialize(writer, this);
//The following lines are used just to return a string but the XML is already build, you can convert it into a file or whatever you want.
writer.Flush();
stream.Seek(0, System.IO.SeekOrigin.Begin);
System.IO.TextReader reader = new System.IO.StreamReader(stream);
stream.Flush();
string strXml = reader.ReadToEnd();
stream.Dispose();
writer.Dispose();
reader.Dispose();
return strXml;
}
and with a test page containing the following test:
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e) {
Customer.Customer cust = new Customer.Customer();
cust.Address = “Address line number 1″;
cust.City = “Any city”;
cust.Country = “Any COuntry”;
cust.FaxNumber = “2843023984″;
cust.FirstName = “customer’s First name”;
cust.Id = 123;
cust.IdSpecified = true;
cust.PhoneNumber = 230984209843;
TextBox1.Text = cust.ToXml();
}
The result obtained is as follows:
As you notice the Id property is inserted as defined, as an attribute, and the property PhoneNumber is not shown even that a value was assigned to it, this is because the property PhoneNumberSpecified wasn’t set to true, you can modify your code and set [property]+Specified to true in the set part of [property].
It’s possible to do the opposite, using the deserialize method, you can build an instance of the class from an XML. The main reason for me to write this document is to introduce the xsd.exe tool and the XmlSerializer class which I think can be very useful for simple and may be advanced classes, it doesn’t support serialization of some object types like collections, but if you are a good programmer you’ll find for sure the right “patch” for implementing it. I used it to write a class from a 5000 lines XML schema and it helped a lot.
�
Your typical mobile phone is packed with potential. Come think about it, my old 120 mHz pentium had issues playing .mp3 files, let alone combining .mp3 playback with say opening an MsPaint picture. Your mobile probably does this skip-free.
Covering most of the alphabet, keywords like J2ME, CLDC, MIDP, WTK and so on make up the mobile Sun Java platform and is supported by most mobile phones. Write once, play anywhere, it’s all free and it’s easy getting started. So they claim.
John Carmack, founder of id software and the 3D guru behind titles like Doom, Quake and eh.. Commander Keen puts things in perspective in his blog. id’s game Doom II has been opened source-wise, copied, cloned, improved and put into every thinkable device that has a screen, like the iPod or the Game Boy platform. But even though the game is said to have run smoothly on the electrical wirings on a Kawasaki motorcycle, John Carmack apparently is not that optimistic when it comes to porting the game to mobile Java. “With Java, on most phones you are left with about the CPU power of an original 4.77 mhz IBM PC, and lousy control over everything”, Carmack says.
I’ve been working with mobile Java for some time now. Now first of all, it’s not that bad. But it’s not that good either. For example, here’s what the documentation says about screen refresh: “The change will typically not take effect immediately. It may be delayed so that it occurs between event delivery method calls, although it is not guaranteed to occur before the next event delivery method is called”. You’ll find yourself fighting these small issues all the time, and it will take some of the fun out of writing mobile games or applications.
Performance is really an issue. Especially when doing networking or database queries. Actually, you can’t do queries to the database at all as you have to write your own rowfilter class and go through the list of data enumeration from the database. Oh, and the database doesn’t really have tables. It’s more like a hashtable with an index and a value. Ask me, what really made the palm pilot world dominant years ago was a simple programming environment and good database support.
Another issue is that you get a compiler warning when doing network or database tasks in the main thread. Also, painting to the screen should be done in another thread. Therefore, you will have to leave your main thread, invoke a new thread that displays some status info or dialog to the screen and return to your main thread through a callback method. This also solves the issue of the indecisive timing when it comes to showing a dialog on the screen.
On the brighter side, the tools for developing mobile Java are free, runs ok and is quite easy to set up. I’ve been using Eclipse with a plug in called EclipseME and the official Java Wireless Toolkit (WTK) emulator from Sun. No hitches in installation or running Eclipse with the emulator. Last time I ran Eclipse, it would suddenly write backwards with inserts and other really annoying bugs happened all the time. So far, I’ve had absolutely no such problems with the IDE.
So if your goal is to make a simple game loop which writes some simple graphics onto the screen, getting started should be fun for the most part. If your goal is to make an application with several dialogs, screens, classes and plow a bit deeper into the platform, brace yourself for some work ahead. Be sure to catch a copy of the documentation and prepare to spend some time with it.
How can we actually improve the confirmation dialog? Is it even possible? Before I will disappoint someone, I have to say I haven't found a solution for a cross-browser confirmation dialog. I will rather tell you about my experiences. A confirmation dialog will halt all code-execution until a user input is done. This is actually the major breakdown. Only IE supports a way to wait for user input by using "showModalDialog", as far as I know this is not possible in either FireFox or Opera.
A few basic statements; The confirmation dialog is a function that returns a value. A function will halt the code-execution until the functions returns a value or reachs the end of the function. Can we emulate a confirmation dialog just by delaying the return?
My first thought by delaying a return was by using "setTimeout", but what we need is a blocking-delay, where "setTimeout" will come to short. A blocking-delay could be done by using a loop to simulate a sleep method, but this will be too far CPU intensive - also a very bad practice. A recursive call may also be too far CPU intensive, and to many recursive calls will not be allowed. The code-snippet below is certainly not the way to go but it will demonstrate what I intend to do:
If there is a solution for this (it probably is but I haven't found it) we could use a normal dialog window like "window.open" to simulate the confirmation dialog for non-IE browsers, as "showModalDialog" is the best way to go for IE browsers. The purpose of making a improvement of the confirmation box is to make it more user-friendly, the original confirmation box is lacking of features like button configuration, use of colors in the caption etc. The screenshot is an example of the improvement for IE browsers compared to the built-in confirmation dialog. There is always ways to work around, but none of the solutions will work as nice as the one in IE by using showModalDialog. The solution is very flexible since you can easily setup the style as you want, in a similar way as the "MsgBox" method in Visual Basic 6.For examples of how this works you can go to this page or download the source. You are welcome to contribute with solutions for this, and I will do my best to work out a nice solution for cross-browser - if it hasn't been done already.
A real pane with most web-based e-mail systems is adding attachments from your local computer. Normally you have to click on a ‘browse’ button, select a file and click submit to upload it. If you want to attach three files this can be annyoing.
In the toolbar you will find two attachments buttons: One for selecting files from the server (24SevenOffice) and the other opens the browse dialog to select a file from your computer. Notice that the ‘my computer’ button is part of the toolbar and is not a normal ‘file browse’ control as seen in other web-based e-mail applications. Thanks to PPK who showed us how to style a file browse button.
When selecting a file and clicking ‘OK’, the file is instantly uploaded in the background. No need to click submit. No need to wait for a large file to upload. During the entire upload I am able to continue writing my e-mail.
Notice the statusbar which shows the progress of the file upload. As you see in the attachment list, the text of the filename is gray which indicates that the file is currently uploading. When the file has been uploaded the text will turn black.
The last year there have been many good examples of very useful web-applications. Finally software companies have looked beyond the initial benefits of using web-application - such as no need for local installation, setting up your own server, lower distribution costs, ubiquitous access. Now the focus have shifted to building an effective/fast application using Ajax, good looking user-interface and integration (RSS, Web Services, XML).
In the list you’ll find 24SevenOffice.com - the company I work for. In this post I will outline my experience with building a web-application. Recently I was in charge of making a new version of the CRM module in 24SevenOffice.com.
A web-application is exactly that. An application. On the web. That means we must take advantage of the web, but it also means we must take with us the positive sides of regular applications..that has been used and researched for many years. Many web-applications “forget to” include simple things like keyboard shortcuts. It’s easy to implement using JavaScript. It is critical for repeated tasks like creating invoices, adding accounting entries, looking up customers etc. For users who are accustomed to DOS/Windows applications with heavy use of keyboard shortcuts, a web-application can be very ineffective to use without it.
Speed has been a major issue when it comes to using web-application effectively. This is due to the client/server environment, the typical web-interface and little knowledge of time saving techniques. The solutions is having the server do the required database and back-end operations, while the client can take care of the GUI with JavaScript and CSS - as much as possible. On the web much of the waiting time for the user is actually caused by the GUI to be downloaded and rendered by the browser. By minimizing the trips to the server with smart ways of collecting data (in the background using the XMLHttpRequest object) and by pre-loading scripts to be executed later on.
Case study - CRM module
After the CRM module is loaded I want to search for a customer. Here I will search after 24SevenOffice:
I hit enter and the search list (iframe) is presenting the results. The first result is automatically highlighted. I can click enter to go to the first result or I can use the keypad to move down through the list. Alternatively I can type more or use backspace and the search query will be change in the search field. I want the second company in the list and click the arrow down and then hit enter.
JavaScript takes care of loading the customer information. The tab panes are automatically displayed and a XMLHTTP request is made to get an XML file with the information for the selected customer. Looping through the DOM Document the values are inserted into the form. The user feels like he/she is using a locally installed application. The customer information is loaded in less than a second.
The tabs below are shown with all the associated contacts on the selected company. The count on each tab is updated in the background. The reason for this is so the user does not need to click the task tab to see how many tasks there are listed on this customer. That would require an extra click and extra waiting time for the user.
As in Microsoft Windows with normal applications I can right click in most part of the system. Here is an example of right clicking the customer form and a menu appears. From this menu I have access to most operations such as new appointment, send SMS, save…and more. This helps reducing the clutter in the user-interface and it is a quick and easy way to access both critical and less frequently used tasks. Again this is easy to accomplish with JavaScript. With the onContextMenu event and the use of Div’s.
After I have got the information I required on this customer. Maybe I was looking for the phone number or needed to update the address. Now I want to add a new company - a potential customer who just called. I click the ‘new company’ button.
Again, only JavaScript is used and information is gathered in the background using XMLHTTP. The tab panes available on an existing customer is now hidden. The values from the last customer are reset and the only values inserted are the next available customer id and the default country.
Want to see it live? Click this link for a test drive. Select CRM -> Customer Relationship Management in the menu (Internet Explorer 5.5+ required) More information about web-applications and why 2005 will be the year web-applications finally will become useful and common:
Because 2004 is the year that Google led the charge in making applications that showcase The Web Way — using just the simple and flexible mix of dynamic HTML, JavaScript, style sheets, and a DOM-capable browser — respectable and cool
I think that 2005 will be the year that proper use of the DOM really takes off. Most JavaScript on the web still hails from the late ’90s, but change is in the air.
Now that we can make web applications, here’s why we should, and will, do it.: - The application lies at only one place - The user doesn’t need any software - The user isn’t the administrator - The administrator is the application’s programmer - The application makes no assumptions about the user - Multiple versions is a thing of the past - It’s portable - It’s simple and trustworthy - The app architecture is transparent to the client
I am not very into the “web 2.0″ hype but there are some features of “web 2.0″ which I am very found of and really believe in. “Web 2.0″ has mostly been about simple consumer services. Simple ideas, quick to develop and easy to duplicate. There hasn’t really been much focus on what “web 2.0″ features can mean for enterprise software. Scott over at Zimbra has a good post about exactly that and he lists the three key main drivers:
(1) Rich Internet UI via Ajax - Yes, Ajax is really a technique for leveraging Web 1.0 technologies (JavaScript, CSS, HTML, DOM, …) to build more richly interactive user interfaces that run in the browser (albeit often with Flash/Flex for graphics and animation). Yes, it remains too hard, but the large web properties and software companies are already voting with their feet.
(2) Inter-application communications via XML, SOAP, REST, etc. - Of course, Ajax leverages XML for the browser application to server app communications, but this is just a special case of XML for SOA in general. Service-Oriented Architecture for applications has actually been around for decades, but back then we talked about Enterprise JavaBeans, Stored Procedures, CORBA, DCOM, MQSeries, and CICS/IMS transactions. The difference is that with the success of the Internet and Software as a Service, we have hopefully finally achieved critical mass.
(3) New technologies for intermixing Ajax and XML like the mash-up and now Ajax Linking and Embedding (ALE). (ALE in particular may prove to be a tipping point in terms of WYSIWYG authoring within the browser, which will allow users to far more easily create rich content for their emails, blogs, Wikis, and so on.) I don’t think this category is complete yet, and it may ultimately just devolve into cool tricks for leveraging Web 1.0, Ajax, and XML, but for now I think this is where the Web 2.0 technical action is.
We at 24SevenOffice have been thinking much of the same as well. We are just starting to launch an API which developers can use to access data in the system and create exciting add-ons for our customers. We have a report generator which is REST based and allows users/developers to use external XSLT stylesheets to export data in custom formats and use data into other applications on-demand. We have several mash-ups; integration with “yellow pages” (Proff.no) in Norway for instantly adding a new company to the CRM-system, show maps (we use Google Maps in the US and GuleSider here in Norway), pull financial and organizational data from various sources to check the financial stability of your customers. We are also currently in the (very early) planning stages with a very interesting integration in our telesales function in the CRM-module. It will give small and medium-sized businesses an opportunity to use and manage calling-lists to new or existing customers in a way that hasn’t been done before.
I am really looking forward to see what can be done with mash-ups and XML/SOAP/REST based API’s between web-applications. This is just the beginning.
Oh, and about the Google Maps integration I developed. I will probably be releasing an open-source version of the script soon. Google Maps is great but it doesn’t offer geocoding. So you have to get the coordinates from another source. After digging through some free but not very user-friendly services I found the excellent Yahoo! developer page which offer a fantastic REST/XML based geocoding service. So what my script does is: 1. Take input parameters about the address. 2. Get geocoding from yahoo!. 3. Display a Google map.
All you need is a yahoo! application ID and Google Maps API key.
You spent days and nights making your javascript perfect but still users complains about errors. There is a way of making the debugging process a little less painful by logging javascript errors.
Every javascript error can be trapped in the window.onerror event. We can return true or false so we can choose if the user shall see the normal javascript error dialog.
This script will, in the very unlikely event of a javascript error, gather information about the error and send a httprequest to a page which will log the javascript error to the database.
function doError(msg,url,ln) {
var strValues = "errMsg=" + escape(msg);
strValues += "&errLine=" + ln;
strValues += "&queryString=" + escape(location.search);
strValues += "&Url=" + escape(location.pathname);
strValues += "&HTTPRef=" + escape(document.referrer);
if (typeof XMLHttpRequest != "object") {
function XMLHttpRequest() { return new ActiveXObject("Microsoft.XMLHTTP"); } }
var objSave = new XMLHttpRequest();
objSave.open("GET", "/errorSave/?" + strValues, false);
objSave.send("");
}
try { window.onerror = doError; } catch(er) {}
