Debugger 101

There are a lot of users that don't realize that Real Studio has a debugger- and it's very easy to use!

Let's say that you want to track down a bug in your code and you know that the problem occurs when you push the Show Me button on a window. In your project you would go to the action event of the Show Me button and set a breakpoint next to one of the lines of code as shown below by the red dot (click on the hash mark to set the breakpoint):

Then, to debug the code:

1. Press the Run button

2. Enter any necessary values into the UI

3. Press the Show Me button

You will see debugger pane on the right (this shows the result after pressing the Step button several times):

That's all there is to it. Using the debugger you will have a much easier time locating and fixing problems in your code. For more details on how to use the Real Studio debugger visit "Debugging Your Code" in our Documentation Wiki.

Leveling the playing field

Anyone reading this blog knows that one of the most valuable features of Real Studio is its ability to create cross-platform applications. So it goes without saying that the more level the desktop OS playing field is, the more important cross-platform becomes. As the Mac market share has increased, we get more and more Windows developers coming to Real Studio because their customers want them to support the Mac.

Last week, research firm Gartner released a report on PC shipments for the fourth quarter of 2011. It showed that while all the major Windows PC makers saw a drop in market share, the market share for the Mac increased substantially. And this week, the Wall Street Journal reported that big companies like GE are allowing employees to choose the Mac as the computer they will use at work.

As the market share for the Mac increases, the OS playing field becomes more level and that's great for cross-platform software. It's good news for those of you that create cross-platform, commercial software with Real Studio and it's great for us. In the ideal world, the market share for the three major desktop OSs would be split evenly. But anything that makes it more even is a good thing.

Is it time to redesign?

A huge part of what makes any application intuitive is its interface. If it's well thought out, a user interface can make the difference between an app that is fun and easy to use and one that makes water boarding seem like a nice alternative. If the developer has taken the time to make sure the interface is not only self-consistent but consistent with other applications that provide similar functionality (when appropriate), it can add beauty to an application.

User interfaces don't age like fine wine. If an application's user interface is not updated from time to time, it's going to start making the app look old and out-dated. Additionally, if the application has a lot of features, its developers are likely to have learned quite a bit over the years about how people use the app. It's important to continually advance the usability of an application, this improves the productivity of its users and, in the case of commercial software, keeps the app competitive.

In some cases, incremental improvements can be made to a user interface. But sometimes the entire user interface needs to be redesigned. If you could do it over again, would you create the same user interface you have today? Though it may be a lot of work up front, a much improved user interface should be seriously considered throughout an application's life. Real Studio has gone through several user interface changes since version 1 and we are working on another big one right now.

Let's take a look at how the Real Studio user interface has evolved. Real Studio was first released on July 4, 1998 as REALbasic. The original release of Real Studio back in 1998, looked like this:

REALbasic 1.0

When Mac OS X was released, we updated the user interface to have an appropriate, native look and feel:

REALbasic 5.5 for Mac OS X

And when we brought it to Windows, we took care to make sure the UI felt native:

REALbasic 5.5 for Windows

Over the years we began to recognize that there were areas where we could really improve the user interface. One of the downsides to the original interface was that a user could easily end up with a lot of windows open. At the time, browsers also suffered from this same problem and to solve it the idea of using tabs to separate documents rather than windows was adopted. We also recognized that users spend a lot of their time navigating their projects, so anything to make navigation easier would be helpful. Lastly, we decided we should be eating our own dog food. The IDE was written in C++ and it really should be written in Real Studio itself. So in 2004 we began redesigning the user interface, rewriting in it Realbasic, to solve these and other problems. In mid-2005 we introduced the current Real Studio user interface:

Real Studio 2011

This current interface uses a single window rather than multiple windows. This makes it easier for the user to concentrate on the item they are editing, rather than spending time rearranging and scanning through windows that are layered on top of each other. This concept started on Windows and Linux but has been adopted more and more by Mac OS X applications as well.

The user interface you see above has served Real Studio users well for the past six years. In that time, however, we have learned a lot about how people use and learn to use Real Studio and we have taken note as interfaces have changed in the last six years. As a result, we are applying all of this to a significant redesign of Real Studio's user interface. Our goals are a cleaner user interface, easier navigation, better interactivity, a more intuitive user interface and a more modern look and feel. I'll be more specific about these goals for Real Studio:

• Cleaner user interface - Every piece of text, control, line, and icon you present in a window is something the user believes they have to understand to use the product. Determining which items are infrequently used and removing them (possibly moving them to menus if they still do provide a needed function) can help make the interface cleaner. For example, the current user interface relies too much on text.
• Easier to navigate - Real Studio users spend a lot of time moving from one part of a project to another. While the tabs help, they can also get in the way. The user has to constantly return to the project tab and double-click on a project item which then opens in its own tab. All of these tabs start to take up a lot of room in the tab bar and before long the user is spending time closing tabs to make room for new tabs! Search results only add to this issue because double-clicking on  result opens another tab. And while there's one way to navigate a project, there's a different way to navigate the code for the project. All of these ways of navigating present opportunities for improvement.
• Better interactivity - A project can be filled with many different project items that need to interact with each other. The current user interface does not make this as easy as it could be. For example, to create a custom canvas subclass and use it on a window requires as many as six steps:

1. Click Add Class in the Project Editor.
2. Change the Super property of the new class to Canvas.
3. Write your code.
4. Switch to the Window Editor.
5. Choose Project Controls from the Controls Selector popupmenu above the Controls list in the Window Editor.
6. Drag your custom canvas subclass to the window.

That's a lot of steps. It's also not easy for a new user to figure out these steps. Making basic tasks like this more simple and intuitive helps create better interactivity. And this not only makes it easier for a new user to learn; it makes the experienced user more productive.

• More intuitive - An intuitive interface is one where the user can use the software, for the most part, without consulting the documentation. The key is to think of all the different ways users will try to use the software and anticipate them. The more often a user is successful when attempting a task, the more intuitive the software is. In the current version of Real Studio, there is usually only one way to do a particular task. In the new user interface, we are adding more ways to accomplish tasks to create a more intuitive design for more users.
• Modern look and feel - Modern user interfaces are using higher resolution graphics, shadows, textures, animation and more. We are using many of these elements in the new user interface to modernize the look and feel.

It's been 2 years since we first began designing and implementing a greatly improved user interface to reach these goals. Because Real Studio has many editors, this has been an enormous task but we are very pleased with the results and I'm sure you will be too. 

Some people just don't like change and any significant change to a user interface will result in some of the existing users balking at these changes. There's just no getting around that. Though most of our users really appreciated the changes in the 2005 user interface refresh, there were a small number of users that just hated it. Apple changed the direction of gesture for scrolling in Mac OS X Lion; though it seemed like a huge change at first, it quickly became more intuitive to users. Technology moves fast and user interfaces need to keep pace. People will adjust quickly to well-thought-out changes and designers have to consider what the best user interface will be for the application moving forward. 

iOS Meta Tags

Over the last few months, there have been several requests for the ability to override the tags that are used for determining how a website scales on iOS devices. Before Real Studio 2011r4, you were locked into using our defaults.

Viewport

The default tag looks like this:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

This says:
1. The page width should be the same as the device width
2. Users are NOT allowed to pinch or zoom the page to change the scale
3. The initial scale is 100%
4. The minimum scale is 100%
5. The maximum scale is 100%

While this works out great for web applications (most of the time anyway), it's not so hot for other uses.

Take our Orders example – the minimum width of the main screen is 1012. Not so much a constraint of the browser, but of the content on the page. When viewed on an iPad in portrait mode, you have to slide the page left and right to access all of the elements. To accommodate this, you can now override this tag with your own by simply adding a replacement in App.HTMLHeader. For the Orders example, the code looks like this:

<meta name="viewport" content="width=1012">

This tag tells the browser that the width of the content is 1012 and not to restrict page scale. In doing so, the page will scale to fit the device. Note: Using this dimension does not work for smaller devices like the iPhone. With a smaller screen, it tries to fit the content into 320px (portrait mode) or 480px (landscape mode), which means the content will be drawn at ¼ or ⅓ of the original size, respectively.

Web App Capable

On iOS devices, when looking at a web page in Safari, you can add the current page to your Home screen where it will get an icon and be available directly with a single touch. Our defaults make it so Safari does not display the URL and Search fields, nor the Safari toolbar across the bottom of the page. The result is that there is a greater amount of vertical space for your application to run.

If you want to turn off this capability, thereby making your application always work more like a website, you can add a line to App.HTMLHeader:

<meta name="apple-mobile-web-app-capable" content="no">

Web App Icons

By default, we compose your application icon for you so that it fits nicely within a white rounded rectangle background. While this is the style that Apple recommends for icons, you have very little control of how big your icon will be. Moreover, as Apple has started offering devices with higher resolution screens, they've suggested different resolutions for different devices.

You can override the default icon by adding a line like this:

<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png">

if you want iOS to add the nice "shine" effect to your icon, leave out "precomposed" like this:

<link rel="apple-touch-icon" href="touch-icon-iphone.png">

For more information on the options for configuring Web Applications for iOS, see Apple's Safari Web Content PDF.

Remember: setting these values affects every page that is loaded. If you set the width to 1024, every page will render as if it needs 1024 pixels to appear properly. If your page is only 320 pixels wide it will only take up ⅓ of the device width, regardless of the resolution.

More Video Tutorials Coming Soon

Starting in February we will welcome Paul Lefebvre as our new Developer Evangelist. Among many other tasks, Paul will be giving live tutorials on a number of Real Studio topics each month.

We already have quite a few ideas for these tutorials from your feedback and I'm sure that Paul will arrive with ideas of his own. In addition, we welcome tutorial suggestions from you. If you have a suggestion for a video tutorial, one that would be helpful for you as well as other Real Studio users, please enter a Feature Request into Feedback.