Category: tips

One of the handy gestures you can do on a mobile device that you cannot do on the desktop is shake the entire device. It’s a handy way for the user to tell your app to clear the screen, discard the current transaction, start a new game, etc.

To do this, you need to take measurements on the accelerometer and detect a shaking motion. This is a bit complex to do: AppStudio 4 adds a library to make this easy.
Continue reading “AppStudio 4: Shake your booty!”

AppStudio 4.0 allows your mobile app to share data with other computers using Dropbox.

(If you haven’t used Dropbox, it’s an easy to use cloud based filing system. It is very nicely integrated with Windows and Mac: it becomes just another folder on your system. Dropbox takes care of all the behind the scenes file transferring, and it’s free with a reasonable amount of storage.)

You can create, read, update and delete files in your Dropbox folder using AppStudio. This makes it a powerful tool for synching data between your device and the desktop. It even works offline: the files you create or update will be synced with the desktop next time there is a data connection.
Continue reading “AppStudio 4: Working with Dropbox”

One of the hardest things to explain to new AppStudio users has always been “Why is it so hard to show an image in a PictureBox?”

PictureBox is based in the HTML5 Canvas element. To display an image on it, you used to need the following code:

'Pre AppStudio 4.0 code
pb = PictureBox1.getContext("2d")
myImage=new Image()

Sub Main
  myImage.src="mario.jpg"
End Sub

Function myImage_onload()
  pb.drawImage(myImage,0,0)
End Function

Since an image can take some time to load, it is done asynchronously. When the load is complete, unload is called to finish the display.

In AppStudio 4.0, it’s much simpler, using the new addImage() function:
Continue reading “AppStudio 4: PictureBox images are way easier!”

Before AppStudio 4, sounds were played using the Audio control. This had a few drawbacks: it was a bit complicated to set up, there was a noticeable delay before the sound started, only one sound could play at a time and it would insist on putting Play/Resume buttons on the screen. These made sounds useless for many applications, including user feedback and gaming.

In AppStudio 4, we have added a new function, PlaySound:

  PlaySound("Bubbles.wav")

It plays the sound immediately, with nothing appearing on the screen. Sound files can be .wav or .mp3 format.
Continue reading “AppStudio 4: Sounds just got better!”

AppStudio 4 has a number of features to make your life easier. We looked for ways to make code easier to write and understand.

First up is GetJSON. This function is used to get information from a web service. There are many web services available: making use of these is a great way to connect your app to the outside world. The Programmable Web lists over 10,000 web API’s you can use. APIs exist for almost everything: sports, games, the stock market, weather, inventory checks at retailers, Yahoo, Twitter, FaceBook and Google.
Continue reading “AppStudio 4: GetJSON() makes Web Services Easy!”

PDF documents can be tricky to view. Different screen sizes, browsers and versions of the OS make showing a resizable, scrollable PDF within your app tricky.

Here’s a quick way around this:

  open("http://guu-izakaya.com/docs/2013.12_sakabar_menu.pdf")

The open function creates a new browser window which displays the pdf document. Once you are done viewing the PDF, you will need to use the OS to return to your app.

This method can also be used to open any document a browser can open, including web sites and images.

AppStudio has a lot of help built into it. Most of it based in the Wiki. Here are a few tricks to go directly from your app to the Help files in the Wiki:

Continue reading “5 Cool Tricks to get Help in AppStudio”

AppStudio 3.2.9 brings a great new feature: External files. This makes it much easier to add resources such as additional code, images, sounds and video to your app.

To add an external file to your project, drag and drop it into the Project Explorer. It will get added to its list of items. When you deploy your project, the latest version of the file on your hard drive will be used.

Use this feature to include code you want to share between projects, for third party JavaScript libraries or css files that would be useful in your project or for PHP scripts you want to deploy with your app. But there’s more: images, sounds and video clips you drag here will also be deployed with your project.

One of the beta testers immediately found a creative use for this feature. He wanted to make a change to iWebKit’s style.css. Since it is in the nsb folder, we strongly recommend not modifying the file. Instead, he created a single line css file:

.select select{-webkit-border-radius:0;color:#000;font-weight:normal;font-size:14px}

Saved it as SelectNotBold.css, then dragged it into the Project Explorer. Perfecto!

Here is how various file types get handled at deploy time:

File Type	Action
.bas	BASIC code. Will be translated and included in your app at runtime.
.cod	BASIC code. Will be translated and included in your app at runtime.
.js	JavaScript code. Will be included in your app at runtime.
.css	CSS formatting. Will be included in your app at runtime.
.php	PHP code: will be installed on the server during deployment.
other	Will be included in the manifest and deployed with your app. This can include .jpg, ,gif, .png, .wav and others.

Found an interesting way to use this feature? Let us know!

I recently came across a little known function that’s really useful for debugging.

The console.* functions have always been a great tool. They output data to the Chrome Debugger console. They can be used for tracing, timing and other statistics.

However, they’re a bit clumsy for looking at structures.

For example, suppose you have a structure like this:

languages = [ _
    { name: "JavaScript", fileExtension: ".js" }, _
    { name: "TypeScript", fileExtension: ".ts" },_
    { name: "CoffeeScript", fileExtension: ".coffee" }_
]

If you execute console.log(languages), you’ll get a tree structured view of the data which you can expand.

But if you do console.table(languages), you’ll get this:

Pretty cool!