Web App Development IDE

Visual Studio 2013 is not very clever when used to open a web site containing our Apex single page application HTML, CSS, JSON, Javascript etc.. It seems to try and launch a 'localhost' type of environment and because our source code files are cloud hosted, this takes minutes to just even load the project. Then it periodically just hangs momentarily even editing simple files.

What's a dev to do? Well, I looked at alternative IDE's (integrated development environments) to test the market. This article is recommended reading as it highlights alternative IDE's such as Netbeans, Eclipse, Komodo, Notepad++ and WebStorm. They all are very good and in many cases superior to VS, however there is one aspect which turned out to be critical. This is that we still use Visual Source Safe (VSS) internally. Although this has been superceded by Team Foundation Server at Microsoft, we have so much code in VSS tied to automated build scripts, and do not think that TFS will not add further complications to our control and build processes. For a small ISV, why spend extra cash fixing what already works?

Visual Studio 2013 defaults to TFS, however we were able to change that and point at VSS for seamless source code check-in/out and diff analysis. No other IDE seems to support VSS. Maybe I am missing something, but no google help on this.

So, we wanted a straight single page application (SPA) which does not rely upon ASP.Net, C# or VB.Net or the .Net Framework. Unfortunately VS 2013 does not provide such a simple project. We had to settle on an empty ASP.Net project and then drag in all our existing code folders which works recursively thank heavens, and then set the index.html as the start page.

So now we have an ASP.Net web application which does not need or use ASP.Net. This is a drag, but not a major problem. What about debugging support? So we ran it and got an error where IIS 8 complained about .json files. Although we set the .json mime type in IIS manager, it seems VS2013 ignores that and requires a web.config change. Luckily the solution was documented here.

Running our SPA application using Internet Explorer as the default browser now allows full debugging of the project javascript (JS), without having to use the browser integrated debuggers. This is another major benefit of using VS2013. Interestingly, no JS debugging is available when using alternative default browsers when running the debugger. You can even edit-and-continue, but of course also have to refresh your browser to accept source code changes.

We also get full intellisense on our javascript object hierarchies which helps Apex developers fully utilise the framework.

We will now be able to utilise separate worldwide teams to develop Apex using a single IDE with an integrated source code control system, javascript framework intellisense and debugging which promotes a more structured approach for QA and rollout allowing greater scalability in our development efforts.

Project Apex: Part 10

The last few weeks has seen enormous activity in the web development group, as they tackled ths most challenging aspect of TriSys - providing run-time form designing of complex business forms. Whilst this is a tough enough engineering exercise in a traditional windows application, it is much more difficult to do this in a web browser using HTML, Ajax and CSS.

We started off by utilising multiple nested splitters to allow the designer to draw field regions as shown below:

We then progressed to provide draggable and dockable field boxes which could be positioned and docked inside any splitter region:

In order to allow designers to create the splitter layout, we wrote components for splitter design:

We are now working on bringing the SDK toolbox into the browser based form designer to allow true drag/drop business form design.

Stay tuned.

UPDATE 2013:

Apex was put on-hold because browser technology is not yet performant or reliable enough for an industrial strength line of business application - take a look at todays competing browser CRM systems - they simply do not come close to the reliability, speed, extensibility and functionality of TriSys desktop solutions or TriSys delivered as a remote desktop via an HTML5 web browser. It is likely that this project will be resurrected in 2014 when the TriSys Web API and Mobile V2 technologies are completed and browser innovations improve todays issues.

Project Apex: Part 9

Last week we introduced the flexible declarative grid which allows developers/designers to simply declare a SQL statement and column layout to gain full grid functionality such as population, paging, sorting, grouping and filtering. It is also hyperlinkable with fingers on touch devices such as iPad and iPhone.

This week we have standardised the modal dialogues using jquery style popups. This is the user options dialogue which is opened after clicking the ribbon button:

This dialogue can be moved around the screen thus mimicking the windows forms approach used in windows desktop applications.

This form is invoked from a powerful Javascript client-side function:

openModalPopupClientSideFromJavascript("User Options",
                                        520, 600);


We have also added AJAX style client-side waiting animations to the login process to let the end-user know that an operation is in progress:

Typically login will take only a few seconds, but it is important to let the end-user know that something is happening at all times.

Project Apex: Part 8

Created the very important ctrlGrid component which is used throughout the application and allows developers to rapidly declare and specify powerful grids with full support for any SQL statement, column sorting, grouping, filtering, moving.

Here is the first usable version complete with integrated toolbar:

This also shows how to select additional fields to be dragged onto the grid at run-time.

This is a more detailed view showing grid paging in operation:

This uses complex client-side Javascript to render the grid dynamically when the browser is resized. The grid also remembers each end-users configuration of the grid including column sizes/ordering/sorting and filtering. These are stored as cookies and make it very user-friendly as they can have their data displayed exactly as they want it.

The declarative nature of this grid is very easy for web designers to use as shown in this example:

<trisys:ctrlGrid ID="grdPlacements" runat="server" 

            SQLCommand="Select PlacementId, Reference, PlacementType as 'Type',
	                        JobTitle as 'Job Title', Candidate, Skill as 'Status',
	                        Client, Company, PlacementDate as 'Start Date'
                        from v_WEB_PlacementSearch
                        Order by PlacementDate desc"
            RedirectURL="~/Pages/Placement.aspx?PlacementId="   > 

            <trisysGridColumn:GridColumn FieldName="PlacementId"    Width="100"      Visible="false"              
                                            Hyperlinked="true" DisplayFormat="#,###,###,###,##0"        />
            <trisysGridColumn:GridColumn FieldName="Reference"      Width="100"      VisibleIndex="0"                 
                                            Hyperlinked="true"                                          />
            <trisysGridColumn:GridColumn FieldName="Type"           Width="100"      VisibleIndex="1"   />
            <trisysGridColumn:GridColumn FieldName="Job Title"      Width="200"      VisibleIndex="2"   />
            <trisysGridColumn:GridColumn FieldName="Candidate"      Width="150"      VisibleIndex="3"   />
            <trisysGridColumn:GridColumn FieldName="Status"         Width="100"      VisibleIndex="4"   />
            <trisysGridColumn:GridColumn FieldName="Client"         Width="150"      VisibleIndex="5"   />
            <trisysGridColumn:GridColumn FieldName="Company"        Width="150"      VisibleIndex="6"   />
            <trisysGridColumn:GridColumn FieldName="Start Date"     Width="140"      VisibleIndex="7"   
                                            Alignment="right"   DisplayFormat="dd MMM yyyy"             />


As such, we are able to quickly port the existing SQL queries from V10 and get many of the lookup forms operational.

This will keep us busy over the next week, but we have also been working on system options which we will write about next time.

Project Apex: Part 7

Last week we introduced JQuery and client-side Javascript for maximum responsiveness to mimic our traditional windows desktop applications. This week we have connected the product to the back-end SQL Server database using our Business Objects Layer (BOL), and enhanced the forms framework to support contextual ribbon tabs, which are form specific ribbon tabs which only appear when the form is loaded.

This is the initial contextual tabs for the contact form as they will appear when the contact form is visible:

These contextual ribbon tabs become active and visible when the underlying form is visible as demonstrated in this early contact lookup form:

This form shows a DevExpress data grid which is connected to the logged in user database via the BOL and shows underlying test data from our OpusNet database server hosted at Amazon.

We are now working on the ctrlGrid SDK control which will abstract the underlying third party control and allow developers to rapidly build grids to work directly from the BOL. More on this next week.

Project Apex: Part 6

This last week, the design team has focused on the tab framework, and the database team has been working with the .Net developers on the business objects layer (BOL).

Here is the first login form which is automatically added to the tabbed framework you can see at the bottom of the page:

Much debate has focussed on the use of CSS and HTML tables and what is the best way to lay out data entry forms. We are now able to connect via the BOL to the back-end SQL Server.

The Javascript developers have introduced JQuery and Telerik client-side scripting to provide modality for message popups:

This shows the Office 2010 theme which has been implemented throughout as the default theme for the application.

Next week we will demonstrate the contextual ribbon tabs which are part of the underlying forms manager framework.

Project Apex: Part 5

We have now added the navigation bar item links including 16x16 web images and form hyperlinks:

Began work on the entity form layout and management framework. This allows developers and web designers to adhere to a well designed and proven interface for managing the layout and display operations of forms with a full event driven model.

Here is the first test form invoked from the navigation bar:

This technique will form the basis of the data entry form layouts in the next post.

Project Apex: Part 4

Added the drop down menu but it did not look correct:

The problem is due to cascading style sheets.

Here is the resolved menu which correctly floats on top of the ribbon and navigation bar area:

We have also create the navigation bar control and added this to the framework region:


It is gradually starting to resemble Version 10.

We are now working on the images and the hyperlinks for the navigation bar. More next time.

Project Apex: Part 3

The ribbon images are slightly more complex than in our WinForms Version 10 because they have to be multi-size web friendly i.e. PNG, GIF or JPG. Once we got our heads around this, we were able to create the correct images for the ribbon as shown in the following screenshot:

We have also added the alarms region to the right of the main content region, and of course tested in all browsers such as Firefox above.

We will complete the Home ribbon tab buttons over this weekend and hopefully solve some interesting problems with CSS overlays?


Project Apex: Part 2

We started this week developing our new web browser application code named 'Project-Apex'. Our web designers have created an HTML / CSS framework which mimics the layout and regions required in a line of business (LOB) application such as TriSys.

We are making sure that this framework is truly cross-browser, and supports the major web browsers used today, including those that do not yet fully support HTML5. These browsers include Mozilla Firefox (our favourite), Microsoft Internet Explorer (6, 7, 8, 9 & 10), Apple Safari, Google Chrome and Opera. This is very important because we want TriSys/Apex to be completely browser agnostic and provide the exact same look and feel on any operating system/browser combination.

So, here it is as it stands:

You can see the regions laid out with full auto-resize, and scrolling available in the content area for large forms or pages.

We are now working on the pop-out alarms region and images for the ribbon, and will show these early next week.

Stay tuned.