jQuery Mobile 1.4: A new look and feel!

It’s not just AppStudio which got a makeover in Version 4. The default framework is now jQuery 1.4, which has had its own appearance updated.

After iOS 7 introduced its new look and feel, it was soon apparent which apps were paying attention and updated their own appearance. Apps which have not done so look old and tired. To stay competitive, apps need to updated.

Upgrading from jQuery Mobile 1.3 to 1.4 will give you that updated look.
Continue reading “jQuery Mobile 1.4: A new look and feel!”

Upgrading to AppStudio 4

Upgrading to AppStudio 4.0 should be straightforward. Here’s the information you need.

Ordering the Upgrade

  • Upgrades are free for anyone who bought AppStudio 3 (or the upgrade to it) after January 1, 2014.
  • If you bought before Jan 1, the upgrade costs $49.95.
  • You can download the demo to give it a try.
  • You can buy the full version in the demo using PayPal or use our order form.
  • After you buy, restart the IDE and you will have the full licensed version.

Some technical stuff you should know

  • Keep a backup of your critical projects. (Always!)
  • jQuery Mobile 1.3 has been deprecated. While it will still work with AppStudio 4, support will be removed in a future AppStudio release. jQuery Mobile 1.4 has a much more modern look and feel, as well as many new features.
  • iWebKit has been deprecated. While it will still work with AppStudio 4, support will be removed in a future AppStudio release. When we first launched AppStudio, it was a great framework. However, it has been abandoned by its author: it has not been updated in years. Time to move on!
  • When you first load a project in AppStudio 4, it will ask if you want to update to jQuery 1.4. AppStudio will update all your jQuery Mobile controls.
  • It will also update most of your iWebKit controls. Some, like menus, will need to be redone.
  • Read about the rest of the breaking changes.

AppStudio 4.0 released!

We’re pleased to announce that AppStudio 4.0 has been released.

There’s a lot of new stuff in it, but the first thing you notice is the whole new look and feel.

The old design looked like something from the last century, when a design by programmers was good enough. It worked, wasn’t pretty and was cluttered.

Software design these days has been strongly influenced by mobile devices. Nothing is put on the screen unless it needs to be. Colors are flat and harmonious, fonts are sans-serif. We enlisted Tomo Arakawa, a software designer and professional architect, to come up with a new design.

The comments so far have overwhelmingly positive:

    Excellent Job…
    I think this is a great new look.
    Very nice… Good, and Clean and Fresh, and very responsive.
    George nicer look!
    I like it. A lot. Nice, specially the listing of all the functions ({..}), really nice.
    Sieht super aus.” (Looks super.)
    It’s look very good
    Wow! New design is the bomb! Speechless…

but also, inevitably, one comment of “Go back to the original it was far better.

Continue reading “AppStudio 4.0 released!”

A quick way to open a PDF…

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.

New AppStudio Course available!

We have just added an AppStudio course to the Wiki:

http://wiki.nsbasic.com/AppStudio_Course

It assumes the trainees have a programming background. You can follow through the course notes and lab sessions on your own: if you would like on site training please contact us for details.

It includes samples, lab sessions and solutions.

Since it is in the Wiki, this is a living document. We will expand and update it as AppStudio progresses.

Have a look at let us know what you think!

External files now supported!

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!

codemodules

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!

AppStudio 3.2.9.0 released!

AppStudio 3.2.9.0 has been released.

It has an important new feature: External Files. It makes it much easier to add, edit and deploy files which you want to include in your app.

Fixes and Enhancements

  1. Code Modules: External code modules are now supported. (Thanks, Tony!)
  2. IDE: External files can be added to an app by dragging and dropping them into the Project Explorer.
  3. IDE: About Screen scrollable again.
  4. Code Window: Some autocomplete items added.
  5. Code Window: Equal (=) now autocompletes.
  6. Controls: New .setting() function on FlipToggle returns True/False.
  7. Deploy: Icons on Chrome Packaged App improved.
  8. Deploy: Error in Italian translation which broke deploy to nsbapp fixed.
  9. IDE: Design screen was becoming unresponsive after switching forms. (Thanks, Teo!)
  10. Runtime: NSB.Print wasn’t working after being dismissed.
  11. Runtime: Warning in Chrome about event.returnValue eliminated.
  12. Samples: New ChromeAPI sample shows how to use Android FileSystem object.

You can now put a path in the src property of a Code Module. This will be treated as an external file and only copied into your project on deploy. Files can be in JavaScript (.js), BASIC (.bas), PHP (.php) or Other (.css, etc.). This allows you to have code modules which are shared by multiple apps. Use Add New Module to add a new external file to your project, or drag the files and drop them in the Project Explorer.

How to use console.table() for debugging

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:

consoletable

Pretty cool!