So at work we’re developing a mobile web application. I’m not going to go into the functionality of said app, but I will provide you with some emulation tools that I’ve found particularly useful.
The frontend UI is styled using jQuery Mobile. This is an extension style-sheet and Javascript file to the already popular jQuery JavaScript framework. It provides the necessary UI features that look at home on mobile devices, i.e. button controls, page transitions, and so on. (Click here to see a demo of it in action). Sadly, we’re having jQuery Mobile rendering issues on IE (Not really surprised, to be honest!). In fact, Google Chrome is the only browser that seems to render it correctly. Safari and Firefox render it about 90% correct.
It’s hard to get a feel for an App when you’re testing it in a Desktop browser as the dimensions are usually at a much larger scale, so this is where browser/device emulation comes into play. By using an emulator we can, to some degree, see a realistic end-user output. It also makes it easier to present to management, as they are seeing it as it is and not having to imagine what it’d look like on a mobile device.
The three devices we are targeting are iPhone/iPad, Android and Windows Phone 7. For iPhone/iPad, we are using the iBBdemo.
iBB offers both iPad and iPhone web emulation. Alternating between devices is just a keystroke away and it also offers views in both landscape and potrait. Basically, it just displays the page in a scaled down version of Safari inside an iPad/iPhone sized-graphic with it’s user agent set in such a way that it’ll render as those devices do. It is possible to configure Safari on the Desktop to render in iPhone/iPad mode, but the iBB approach makes for a better visual feel.
Microsoft Provide their own Windows Phone 7 emulator. Unlike iBB, this is a full emulator, so it will work for testing Wp7 Applications and will integrate nicely into the Visual Studio IDE suite. WP7 uses IE as it’s browser, and sadly we had issues rendering some jQuery Mobile elements on it. However, when we tested it on an actual physical WP7 device it rendered fine, so we’ve put it down to an emulator fault, which will hopefully be addressed in future releases.
For android testing we used the android device emulator available from the android website. The emulator works pretty much in the same manner as the WP7, it also supports IDE integration. I’ve used it briefly with Eclipse, and had no problems. I’ve heard of a few people having problems using it in conjunction with Netbeans, but there are work-arounds available.
All in all the emulators seem sufficient enough for testing the look and functionality of mobile web applications. We’re happy with the development of the app and any slight rendering issues are only small and don’t pose any show-stopper threats.
With regards to testing device applications I can’t really comment. However this should change in the coming months. I am partnering up with the extremely talented Dylan Rathbone, and together we’re going to take on the Android app market. Well, that’s the broad picture, but for now we’re just going to try flesh out a few apps and see how the whole process from development to publication works. The plan is to document this adventure and maybe something good will come out of it.
Feb
Just before Christmas I thought I’d apply for some developer roles to see where I’d stand in regards to employment after I finish my M.Sc. I went for three face-to-face interviews with three different companies and I got offered two positions. So there seems to be plenty of employment opportunities in Ireland for computing graduates, which is great news.
The position I accepted is a Graduate .NET Developer / C# Web Applications Developer for an American company called Xilinx. The job is in Dublin so I’ll be making the transition from the hills to the big schmoke sometime next week.
The interviewing process for computing roles can be very tough, especially when it comes to the technical questions. I don’t agree that pen-paper programming tests is a good measure of a persons ability to code, and even asking them framework specific questions can be a bit redundant, however I can’t think of a viable alternative so I guess the industry is stuck with this method for now.
I really enjoyed Xilinx’s interview. It was technical, without being too technical, everything was very conversational and the questions were asked just to see was I aware of the various technologies, and what experience I had with them.
I got the generic questions such as “Tell us about a project you did that you’re most proud of” but that is easily answered, being a graduate position I was able to use my degree and master projects as examples. Overall the interview couldn’t have went any better. I was really impressed with the company, their premises, projects and employees so I instantly liked the place.
I might do a post about my other interviews at some point as it’s always good to read about the different formats that companies employ. So I guess this ends my 6 years of academic computer science studies, and the start of my professional career! Let’s hope the Dublin roads don’t kill me.
Feb
Well, I never did get around to documenting the implementation process of the project. I became too engrossed in the development and before I knew it I had more or less completed the whole thing, so I thought I may as well just wrap it up and post the final piece. All images will enlarge when clicked.
When the application is first launched, it presents the user with controls to either login to their existing account, or create a new one.
Either logging in or creating an account will load the user’s control panel. From the control panel the user can view their current help files, as well as the web service URI information for retrieving the content. Additionally, they can add a new help file. (Highlighted in red)
When adding a new help file the user is prompted to enter a name in the popup box provided.
Once successfully added by the server it will instantaneously appear in their Control Panel. The web application is asynchronous, so the web page never has to reload. Now, a help file is no good without content. Highlighted in red is the button to add content to that specific help file.
When clicked, the application will load the necessary forms for adding a section. A section consists of a Title and a Content body. There are also additional options to encrypt the data, which is used further down.
Once added, it will appear in the Edit Sections page of the help file. From here, the user can edit or delete sections. The web service URI for retrieving individual sections is also displayed. Now, lets add an encrypted section.
An encrypted section is added in the same manner as a non-encrypted section, with the exception that the user must provide a passphrase (key) to encrypt the text with. The system uses a Data Encryption Standard (DES) algorithm (Symmetric cryptography) which uses the same passphrase to encrypt and decrypt data.
A key icon will appear beside encrypted sections to distinguish them from non-encrypted sections.
If the user wishes to edit an encrypted section they will be prompted to enter the passphrase, so that the client can decrypt the ciphertext and display it in plaintext.
Using the URIs, the user can add these help files into their own application.
Displayed above is a Java Web Application, and a C# Desktop Application. They have the same functionality; simple integer addition calculators. They both use the same help content that is stored online. By employing this approach, the developer can apply changes to the content from a central repository and it will be applied to any devices pulling it down.
At some stage I will do a post that goes into greater detail of the functionality of the system, as well as the encryption process on the client side, and the authorsation and web service layers of the API.
My biggest fear with this project was that at some point during development I’d realise that it wouldn’t be do-able, not the concept itself, but using the technologies that I had stated in my design document. Yes, I will admit that I wasn’t 100% sure that they’d all work in unison when I had them listed in my specification, but my current knowledge of the technologies coupled with common sense had me believing that they would work… and I was right.
Although it wasn’t all smooth sailing. After installation of the core necessities (Eclipse, GWT, MySQL, Tomcat) I wanted to make sure that each of them worked together. So instead of jumping straight into development of the front end web application, I instead created the default “Greeting” GWT project and exported it properly so that it would run on the Tomcat server and not the Google App Engine or Jetty.
Finding clear and concise instructions on exporting the application correctly can be hard to come across, luckily I came across this article on elitecoderz.net. The instructions were clear and they almost got it working. The application was throwing up an error about re-compiling a GWT module, however the solution was found in the comments:
It is important to note, that prior to performing any of these steps, you need to (in Eclipse):
- perform a clean on the project making sure the “Start a build automatically ” checkbox is NOT checked;
- right click on the project and select Google, followed by GWT Compile
- Then build the jar and war file as described above.
Otherwise, after you deploy the war to Apache Tomcat the error “gwt module may need to be (re)compiled” will appear, when you click on the application to bring it up in a browser.
The next step was ensuring that it could also speak to the database. After downloading the JDBC jar and placing it in the correct folder of the server I was able to update the code so that it retrieved a name of a user from the DB. The image above shows the application telling us what server it is running on, and also the retrieved data from the database. So far, so good.
However, I noticed that when I ran the App from inside of Eclipse that it wouldn’t return anything from the database. This was no good to me as when it comes to fleshing out the front end I will need to be able to test my code from within the IDE. After a few hours of Googling I finally realised what the problem was; I was using the GAE. Remember in my previous post I said MySQL can’t be used with GAE? Well I had forgotten to uncheck the “Use GAE” box when creating the project. So after creating a new project with the same code and the GAE box unchecked it finally worked as it does on Apache Tomcat.
So I knew the front end would work without any further disastrous problems, but what about the web services? I’m happy to be able to tell you that they work fine too, with no conflictions with Apache or GWT thus far. I’m working from this article, which uses Jersey implementation of JAX-RS to create the REST services. I did run into some problems though, for some reason Eclipse refused to see my Tomcat server, or let me re-add another 6.0 one. This is a bug in Eclipse and a very annoying one at that, but the solution can be found here. Information on exporting and publishing a web service onto Tomcat can be read here. Although the article is dealing with SOAP services the procedure is the same for REST.
I now know for sure that the front end can run on Tomcat and communicate with the database without any problems, and that the web services can run along side it without any interference so all in all I think I am ready to begin the front end application, without fear of it all falling apart mid-project. I am sure I will run into many more problems along the way, some of which I can already foresee, but at least I know they can be solved with some research and won’t put an early end to development!
Hopefully in the next update we will start to see something more substantial; this post was mostly about risk assessment! Also, I’ve been messing about with Google’s EC2 Free Tier, so I might try host the entire project on that once I become more used to it’s capabilities, but for now development will be hosted locally. Stay tuned!
It is important to note, that prior to performing any of these steps, you need to (in Eclipse):
- perform a clean on the project making sure the “Start a build automatically ” checkbox is NOT checked;
- right click on the project and select Google, followed by GWT Compile
- Then build the jar and war file as described above.
Otherwise, after you deploy the war to Apache Tomcat the error “gwt module may need to be (re)compiled” will appear, when you click on the application to bring it up in a browser.
Btw, excellent instructions on how to build the jar and war file. Thanks a lot!
Dec
I’ve finished (for now) the research, design and specification of my thesis project, so the next month is going to be spent building it. A whole Christmas of programming, lucky me! So you might be curious to what the project is, well the title of my dessertation is: Investigation into efficiency and security issues regarding remote document storage and retrieval. For the practical element I am going to be building a service which will allow developers to store their application’s Help File content online, and provide them with an API containing various web services which will enable them to pull down the data into the applications. The main advantages being that the content is stored centrally and can be updated acrossed the board using one interface, and that it can be pulled into any application that can call a web service.
I’ve decided to develop the frontend web application using Google’s Web Toolkit (GWT).
During the M.Sc. course we had a module called Client Centric Development where we had to develop two Blog websites; one in GWT and the other in C# MVC. I was really impressed with GWT, which allowed me to create an AJAX web application using the high-level language Java. GWT took care of alot of the messy parts, allowing me to develop more quickly and effectively.
The web application will run on the Apache Tomcat Application Server as opposed to Google’s Application Engine (GAE). There are several reasons for this choice, but the main one being that I wish to use a mySQL database server which GAE doesn’t support.
My research into web services led me to concluding that REST is more ideal for this situation than a SOAP approach. REST is more simplistic yet doesn’t compromise on functionality or capability. For those looking to start developing web services, might I suggest Restful Java with JAX-RS by Bill Burke and Java Web Services: Up and Running by Martin Kalin.
So my next step will be setting up my development environment: Java, Eclipse, GWT, mySQL, etc,. Once development commences I’ll try blog my progress to keep the motivation up and running.
It’ll be an interesting Christmas.
Dec
So I’m currently wrapping up the Design and Specification of my thesis project and have spent a large chunk of it designing/re-designing UML and Entity Relationship Diagrams. After the initial pen & paper drafts I decided I needed to tidy them up to enforce some clarity on the design.
I had the option of using Microsoft Visio but I didn’t feel up to the task of installing another Microsoft product; I much rathered something smaller that I could be using within minutes. I had used UML software such as Rational Rose and UMLet before, but I wasn’t overally impressed. A few minutes of Googling and review glancing had me stumble upon Dia. Dia is “a GTK+ based diagram creation program for GNU/Linux, Unix and Windows released under the GPL license”. It is said to be inspired by Microsoft Visio but with more emphasis on casual designs, which suited my project perfectly.
It seems to have all the necessary tools and functionality for designing the technical diagrams needed for such projects. It has around 50 different diagram tool templates such as UML, Flowchart, Database, Network and ER.
The screenshot on the right (expands when clicked) shows a basic database design being developed in Dia. The diagram can be updated to include more high-level detail such as relationship indicators (1 to many, etc) and can be exported to a number of formats, including EPS, SVG, XFIG, WMF and PNG.
Overall it has proved extremely useful in the development of my project, and is a decent alternative to those wishing to use something quick and lightweight.
Well I guess this is my new blog. I’v yet to read an interesting “first blog post” so I’ll not even attempt to fashion one.

















