Quickly Building a Wireframe using VirtualViewer for your AJAX Viewing Application
I’m fortunate enough to enjoy my work as a web designer with Snowbound Software and occasionally I’m called upon to showcase unique ways of marketing and providing value to our customers through web-based applications and demonstrations. Snowbound provides a wide variety of software applications to a number of industries including insurance, mortgage processing, banking, healthcare, and the federal government.
Marketing a product that provides useful functionality for so many applications can be challenging. As there are several CMS-type business solutions, like FileNet and SharePoint, in the marketplace, we wanted to provide a quick tutorial for providing useful proof of concept wireframes for our VirtualViewer product.
In the following demonstration, I’ll show how we can quickly embed our VirtualViewer application into a custom frame for proof of concept projects and wireframes. In the following example, we will be using the AJAX VirtualViewer application from Snowbound to view medical records.
After a recent health care conference, our Marketing Department was thrilled to hear how engaged customers were with product features and development. The users we spoke with were not only very specific about how medical imaging technology and repositories were changing, but they also provided specific examples of what they needed in a document viewing system and how the landscape was changing.
Rather than showcase our standard VirtualViewer demo, we wanted to find a way to showcase the viewer embedded in a medical imaging system with some of the features requested from end users at the show.
This is what we came up with:
As you can see, we wanted the repository to be connected directly to the VirtualViewer interface so that documents and images could be retrieved without having to change screens or navigate to additional directory pages.
We include a search feature so that documents can be retrieved by medical identification numbers, primary care physician, patient name, and even date of birth. A file repository is also included in the left column so that documents can be quickly organized, retrieved, annotated and saved back to the database (all without modifying the original document) by date and with a time stamp.
Keep in mind, this is a proof of concept to use as an example of how quickly and easily AJAX document viewing capabilities using VirtualViewer may be implemented.
The first part of this tutorial deals with importing the viewer data structure and code. You can see a screenshot of the directory structure below:
As you can see, most of the folders can remain static and modifications for a proof-of-concept wireframe can be made simply by editing the HTML and CSS files directly. Of course more advanced features could be added by simply including popular JavaScript libraries like MooTools or Jquery but in the following example we will be working directly with the HTML and CSS files.
Let’s get started!
Simply open one of your favorite text editions. (Coda or Dreamweaver for example) and find the code in brackets:
<!–THIS IS THE VIRTUALVIEWER CONTENT CODE–>
This code embeds the viewer and some modifications should be made in order for the content to scale properly.
Our main concern at this point, is the “ContentColumn” div which acts as the container for hosting the VirtualViewer code. If you view the original VirtualViewer demo http://ajax.snowbound.com/ you will notice that the contentcolumn div contains everything from the imageControlsDiv
And the annToolbar div
As you can see from the images, these divs contain our navigation and will need to be moved into our contentcolumn div in the following order:
Next, to ensure that the navigation doesn’t break rank and collapse onto itself, we will apply a percentage to the contentcolumn div and use CSS3 to give this window a minimum and maximum width while giving our container divs, “anntoolbar” and “imagecontrolsdiv” an absolute position:
Now that we have our VirtualViewer code embedded into our contentcolumn div, we can resize the browser and test to make sure it’s embedded properly and that the navigation expands and contracts as expected.
Now we will begin working on the surrounding proof of concept code for our physicians Portal with VirtualViewer AJAX. As I mentioned previously in this post, we are going to add images that will represent specific functionality (in concept only).
The top navigation is, conceptually, pretty straightforward. A search feature provides quick access to patient information and physicians files and notes. We also added links that could potentially guide the search. An easy integration here would be to use the Google Custom Search to integrate a searchable form for your front end.
Second, we’ve added a visual representation of application search fields, which could be used to extract records or documents from a database with either XML or a structure for the metadata.
Last, we’ve used the MooTools JavaScript library to integrate an animated drop down menu in the left column to further enhance the customization and organization of files and medical documents. All this code can be easily modified to restrict certain elements and/or add others dependent upon whether it’s a patient using the site or a physician.
MGH Boston recently incorporated a Patient Portal which was a popular concept at the McKesson users group gathering. We hope that demonstrations of this type will help more developers expand on their own proof of concept wireframes for medical imaging systems, so that they can quickly assemble the tools needed to develop their own patient portals and medical repositories.
We hope you found this tutorial helpful and informative and would love to hear any feedback or comments you may have about your own development tools or the medical imaging field in general. Many thanks for reading and stay tuned!
32 Responses to Quickly Building a Wireframe using VirtualViewer for your AJAX Viewing Application
Your information Helped me Thanks you Much
What an awemsoe way to explain this-now I know everything!
i love your blog, i have it in my rss reader and always like new things coming up from it.
A person essentially help to make severely articles I might state. This is the very first time I frequented your website page and so far? I amazed with the analysis you made to make this particular put up incredible. Wonderful task!
Thanks for the good writeup. It actually used to be a leisure account it. Look advanced to more added agreeable from you! By the way, how could we be in contact?
Hi there very nice web site!! Man .. Beautiful .. Amazing .. I will bookmark your site and take the feeds additionally?I’m satisfied to find numerous useful info right here in the put up, we need develop extra strategies on this regard, thank you for sharing. . . . . .
I like the valuable info you supply for your articles. I’ll bookmark your weblog and check again here regularly. I am reasonably certain I will learn many new stuff right right here! Best of luck for the next!
I just want to say I’m very new to blogging and truly enjoyed you’re web site. More than likely I’m want to bookmark your website . You really have wonderful well written articles. Bless you for sharing your web-site.
Excellent, Luz. Keep an eye out for a redesign soon. Thanks for your feedback
You have an affecting point of view on this subject. I am happy you shared your thoughts and ideas and I find that I agree. I appreciate your clear writing style and the effort you have spent on this post. Thank you for the good work and good luck with your blog, I look forward to future updates.
This blog is definitely rather handy since I’m at the moment creating an internet floral website – although I am only starting out therefore it’s really fairly small, nothing like this site. Can link to a few of the posts here as they are quite. Thanks much. Zoey Olsen
Thanks Zoey
I have to point out whoa exactly what a inspiring write-up. This is actually superb. Keep doing what you’re doing!!
Wonderful written article. Will probably be valuable to anyone who utilizes it, including me. Keep doing what you’re doing C definitely i’m going to look at more posts.
Thanks. glad you enjoyed it!
Intleilgnece and simplicity – easy to understand how you think.
good idea im gonna try it
Big help, big help. And sueprltavie news of course.
My brother recommended I might like this blog. He was entirely right. This post truly made my day. You cann’t imagine just how much time I had spent for this info! Thanks!
I’m usually to blogging and i really admire your content. The article has actually peaks my interest. I am going to bookmark your site and preserve checking for new information.
Woah! I’m really loving the template/theme of this site. It’s simple, yet effective. A lot of times it’s difficult to get that “perfect balance” between user friendliness and visual appeal. I must say you’ve done a great job with this. Additionally, the blog loads super quick for me on Chrome. Outstanding Blog!
Wow, wonderful blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your web site is magnificent, as well as the content!. Thanks For Your article about Quickly Building a Wireframe using VirtualViewer for your AJAX Viewing Application – dSDesign | Web Portfolio – only the essentials… .
Thanks for the fantastic post! Very inspiring.
Only wanna tell that this is very useful , Thanks for taking your time to write this.
Greetings from Idaho! I’m bored at work so I decided to browse your website on my iphone during lunch break. I really like the information you present here and can’t wait to take a look when I get home. I’m shocked at how quick your blog loaded on my phone .. I’m not even using WIFI, just 3G .. Anyhow, wonderful site!
I do not even know how I ended up here, but I thought this post was great. I do not know who you are but certainly you are going to a famous blogger if you aren’t already
Cheers!
Great post!
I’d have to check with you here. Which is not something I usually do! I enjoy reading a post that will make people think. Also, thanks for allowing me to comment!
Way to focus and straight to your point, i love it. Keep up the work people. Dont let anyone stop us bloggers.,
I appreciate your post, it was interesting and compelling. I have found my way here through Google, I am going to return over again
Awesome writing style!
Couldn’t have said it better myself.