Lab3 Glue API Web Intro

(This is a continuation from the previous post: Lab2 “Glue API Intro”)

So far, we have written a program that is a desktop client application. Next, we will write a simple ASP.NET web application. For now, we keep the basic functionality same as Lab2 (i.e., login, get a list of projects, get a list of models, and display a model). Later on in the Lab4, we will add JavaScript layer to have UI interaction with the viewer.

The good news is that you should be able to reuse most of Glue web services REST calls that you wrote in the previous labs. In the sample project accompany this labs exercises, we put the common Glue REST calls under Glue folder. You can simply copy the folder to your web application if you are using our sample app.

2015_0115_Lab3GlueApiWebIntro_Solution

Instead of Win Form, we use Web Form when we choose a project in Microsoft Visual Studio (MSVS). For this exercise, a simple single web page will be enough. MSVS ASP.NET development environment provides you a set of tools that is analogous to win forms tools. If you have been programming a windows application using Visual Studio, it will look familiar to you.

Difference is, of course, the UI is a web page. A web page in ASP.NET has an extension “aspx”. ASP.NET tools starts with “asp:” in a web form. We can use <iframe/> to embed a display component in the aspx page, which looks like this:

<iframe id=”iframeGlue” title=”BIM 360 Glue Display Component” src=”” runat=”server”></iframe>

A code behind an aspx page has an extension “aspx.cs”. In the corresponding code, we set src with the url that we constructed in Glue.View(). e.g.,

ButtonView_Click

      protected void ButtonView_Click(object sender, EventArgs e)
      {
         string authToken = HttpContext.Current.Session[“authToken”] as string;
         string project_id = HttpContext.Current.Session[“projectId”] as string;
         string model_id = HttpContext.Current.Session[“modelId”] as string;

         string url = Glue.View(authToken, project_id, model_id);

         // embed a viewer in iframe
         iframeGlue.Src = url;
      }

Note: “iframeGlue” is the value of id in the iframe, which you can reference from your code.

Notice also that we are using HttpContent.Current.Session to keep temporary, session specific data. Image below shows an example of how an application might look.

2015_0115_Lab3GlueAPIWebIntro_UI

You can download the full code project for the Glue API Intro Labs from here.

Mikako

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s