AS7: Syntax checking for JavaScript

Ever make a change to your app, run it, and have it die on a simple syntax error?

Wouldn’t it be great to catch it while still in the Code Window?

AppStudio 7 has a sophisticated JavaScript syntax checker built into the Code Window. It does more than just check for coding errors: it also encourages you to code using good style. It will give dozens of suggestions on ways to make your code follow the latest best practice standards for JavaScript.

Here’s how to use it: Right click in the Code Window, click on Check syntax using Eslint. A window will pop up with a list of errors and warnings.

Checking is done using the well known eslint utility. Eslint uses a set of customizable rules. For rules, we use the widely accepted AirBnB Style Guide.

If you’re a JavaScript programmer, you should read this document: it’s full of simple examples, good and bad. You’ll be a better programmer as a result.

If you have a team of developers working on a project, it will also help enforce a consistent programming style for all members of the team: they will be able to read and fix each other’s code much more easily.

AS7: Auto Open Chrome Debugger

The Chrome Developer Tools are incredibly useful for debugging your app. If you’re working on an app, you almost always want to have them open to check for errors, examine variables, look at your controls and do many more things.

But if you want to use them on Windows, you have always had to hit F12 after the page loads to open the Developer Tools.

AppStudio 7 opens them for you automatically. There are two things that are needed for this to happen.

  1. You need to be on Windows.
  2. You can’t already have any windows open in your Chrome browser.

AS7: What’s new in Frameworks?

Frameworks are the collections of controls in AppStudio. Each is a major product in itself: AppStudio has definition files which make it easy to drag and drop the controls onto the Design Screen. Since each one is developed by a different group, they have important differences. This blog post should get you up to date on the status of each one.

AppStudio Controls

In the Toolbox, these 30 controls are mostly light purple in color. Headings include Common, Date and Time, MultiMedia and Finance & Social Media. They are developed and maintained by us.

There are no major changes in AppStudio 7. Where needed, they have been updated and modified for consistency with other controls.

These controls play well with the other Frameworks.

Bootstrap 3

Bootstrap 3 was introduced in AppStudio 6. Originally developed by Twitter, they have been spun off into their own development group. It’s one of the most popular frameworks on the web, used by millions of websites.

The 27 controls are clean, powerful and nice to work with. New development on Bootstrap 3 has stopped, but the controls are still being maintained by the group. There’s a strong community as well.

AppStudio 7 has a number of bug fixes and refinements to the controls, but no major changes. We will continue to maintain them.

Bootstrap 4

Bootstrap 4 was released just a few months ago by the same development group as Bootstrap 3. They cleaned up a lot of the Bootstrap 3 code and made many improvements. We expect it to be one of the most popular frameworks in the years to come.

Unfortunately, it’s not a simple upgrade. There are significant changes to all of the controls. AppStudio minimizes these differences: Bootstrap 4 works pretty much the same as Bootstrap 3, but there was a lot of work under the covers to make this happen.

You can’t use Bootstrap 3 and 4 in the same project: the CSS definitions conflict.

We recommend using Bootstrap 4 for new projects.

jQuery Mobile

Another year has gone by without a new version of jQuery Mobile. For those keeping count, the last update was in 2014. It’s developed by the jQuery Foundation.

It continues to work fine with modern browsers. We don’t see any reason to drop support for it or tell you to stop using it, but it’s probably not good to use for new projects. It does not support the current version of jQuery (!), which could cause problems.

We’ve only made minor changes to its 16 controls.

jQWidgets

The jQWidgets team continues to improve this massive set of powerful controls. They work well, look good and have any feature you can imagine.

In AppStudio 7, we’ve added some new ones to the list of 29 controls. The jQWidgets controls play well with others: you can use them in your projects along with controls from the other frameworks.

Reflecting the amount of work and scope of these controls, they are the only ones which cost extra – you’ll need a license from JQWidgets to use them in a commercial project.

AS7: Easily select nested controls

AppStudio makes it easy to nest controls inside of other controls. Want a group of Buttons to be inside a Container? Drag and drop them into the Container.

But if a control is buried deep inside several layers of Containers, it can be difficult to select in the Design Screen. AppStudio 7 makes it easy.

Right click at any point in the Design Screen, and AppStudio will display the hierarchy of controls at that point, so you can select the one you need.

In this example, the right click was done on top of the Button. The context menu shows that Label1, Container2 and Button1 are there. If you click on Button1 in the menu, it is selected.

AS7: New Multifile Project Format

In AppStudio 7, we introduced a new format for saving projects. The old format, using the .nsx file, tried to store as much as possible into one file: source code, forms, controls, properties and more. The resulting file was large, complex and had a number of limitations. Furthermore, it still didn’t hold everything. Images, code modules and other stuff were stored externally.

AppStudio 7 replaces the .nsx file with the much simpler .project file. It keeps only the high level information about the project. Code, forms, elements and properties are saved in separate folders. This has a few advantages.

  • Individual files can now be edited using your favorite editor. Your changes will appear next time you launch AppStudio.
  • Projects can be searched more effectively. Global searches can now easily locate strings in the project.
  • Version Control tools now work on AppStudio projects. Git, Mercurial, VSS and others can help you keep track of changes to projects. Many companies require the use of version control on all projects.
  • Multiple developers can work on the same project, since they are not all updating the same file at once.

One of the requirements of the new format is that each project have its own folder: only one project per folder. A folder holding an AppStudio project will end in .appstudio. For example, a project folder could be named Project1.appstudio. (AppStudio will automatically add the .appstudio when you save the project for the first time.)

Here’s an example. This is how a project directory looks for an AppStudio 6 project:

Here is the same project in AppStudio 7:

Some of the differences:

  • MyProject.nsx has been replaced by MyProject.project
  • The name of the folder has been changed from MyProject to MyProject.appstudio
  • The forms are now in the ‘forms’ folder.
  • The controls for Form1 are in the Element subfolder.
  • The code for Form1 is in Form1.bas. (It would be Form1.js for JavaScript).
  • Form1.json contains the properties of Form1.
  • The files in properties used to be in .nsx.

Have questions? Post them to our web board!

AppStudio 7 Upgrades

Free Upgrades

Everyone with a current AppStudio Subscription or having purchased after May 1, 2018 is entitled to AppStudio 7 for no charge. We’ve sent emails to everyone. You have been updated in our database, so you should be ready to go.

Discounted Upgrades

If you’re not on the list for a free upgrade, you can still get a discount. From the About screen in AppStudio, click on the upgrade button. You’ll be taken to the order form, where you can order the upgrade for $49.95 (a new copy is $199.95). It includes 4 months of AppStudio subscription: after that, you’ll have a discounted subscription of $9.95 per month. (regularly $15.00).

You can also order it here: https://www.nsbasic.com/i/Subscription

Questions? Let us know: support@nsbasic.com

AppStudio 7 released!

We’re thrilled to announce AppStudio 7 is ready.

Inspiration for the new release came from a couple of places.

First, the world of web based development is changing quickly. We updated AppStudio to use up to date best practices and libraries. Your existing projects will still work, but you’ll get to use the latest techniques.

Second, we’ve gotten great feedback from developers using AppStudio for large commercial projects. AppStudio now works well for teams and supports technologies like GitHub and Node.js. We managed to add these new features while keeping AppStudio approachable and easy to start using.

Here are some of the main new features. The complete list is here. We will be adding articles to our Blog and Wiki explaining how to use these features.

  1. Multifile Projects: We’ve reorganized how projects are saved. The main .project file just contains values for project properties. All code, HTML and other text entities are now stored as separate folders and files.
  2. One Project Per Folder: All files for a project are now stored in one project folder. Two projects cannot share a folder.
  3. Bootstrap 4 is now supported.
  4. GitHub: AppStudio projects are now GitHub compatible.
  5. Version control: You can now use git (or other utility) for version control.
  6. Team Development: The combination of Multifile and GitHub allows a team of developers to work on the same project.
  7. External Editing: Having all code, HTML, etc. in separate files allows the use of other editors.
  8. Toolbox reorganized: All framework related files are now in folders for that framework.
  9. Eslint: Advanced syntax checking for JavaScript in the Code Window.
  10. Internationalization: Make your app work in multiple languages.
  11. PDF files: You can make PDF files from your Forms for emailing, etc.
  12. Validation allows you to automatically check the contents of forms.
  13. Node.js can now be used in AppStudio projects.

The most important thing to do before upgrading is make a backup. The project format has changed: be sure to keep a copy of the old format.

Download Links

You can use the link on the About screen in AppStudio, or

Mac: https://www.dropbox.com/s/ojbaoqbg6ffneyl/AppStudio.dmg
Win: https://www.dropbox.com/s/97iijiylsyvwui2/AppStudio.exe

To go back to Version 6:

Mac: https://www.dropbox.com/s/lqb59h0nkyz72cd/AppStudio6.dmg
Win: https://www.dropbox.com/s/a0bk44ydgtqv72p/AppStudio6.exe

Please open new topics on our Web Board for any questions you have – it will make it easier to keep track of the discussions.

Receiving SMS messages into your app (Android)

You can now receive incoming SMS messages (text messages) on Android devices, using the sms-receive plugin.

It does not intercept them – the messages still go to the Messages app. It only works if your app is compiled under PhoneGap.

Your app doesn’t have to be in the foreground – it will received the messages so long as it has been started. The received message is available as variable in your app – so you can use it to update databases, inform the user or all kinds of things.

Full details are in this Tech Note:
https://wiki.nsbasic.com/Using_the_PhoneGap_API:_SMS-Receive

AppStudio 6.3.1.2 released!

We’ve just released 6.3.1.2. It has one specific purpose.

Chrome 66 (released today) changes how the events are triggered after a BS Hamburger or Dropdown is clicked. We came up with a better way of handling this, which should make sure this doesn’t happen again.

If your app uses the Bootstrap Hamburger or Dropdown controls, you need to install this update.

The easiest way to get the update is on the Help menu – “Check for Updates…”

Using the Safari View Controller with PhoneGap

To be approved in the iTunes Store, Apple may require that your app open web pages inside your app, instead of opening Safari externally in another app window. It provides a better experience to the user.

When you open Safari in a new app window, it’s difficult to get back to your app. By using the Safari View Controller inside your app, switching to Safari is seamless – there is even a Done button to return to your app. Your users will thank you.

Title bar of a Safari View Controller. Note the Done button and the customized color.

There’s a handy PhoneGap plugin which makes this easy. Here’s how to use it:
Continue reading “Using the Safari View Controller with PhoneGap”