AppStudio 7.0.3 released!

We’re pleased to announce that 7.0.3 has been released.

It has some new features as well as usability enhancements. It also fixes issues people have reported.

  1. Deploy: Babel option transpiles code for compatibility with other browsers.
  2. Properties: New project properties to control Babel.
  3. Deploy: Problem importing .bas files fixed.
  4. Preferences: New preference for auto save on run. Defaults to true.
  5. PhoneGap Status: Can no longer be started more than once.
  6. MakeEXE: Default AppStudio icon used if none supplied.
  7. eslint: Icon added to top of Code Window for JavaScript.
  8. eslint: Always bring the window to the front when invoked.
  9. eslint: Close window if new code in Code Window.
  10. Properties: Implementation of enableAppScrolling updated for Android Chrome.
  11. BS: form.reset() now works on Bootstrap (3 and 4) controls.
  12. BS4 Label: Appearance property fixed.
  13. BS4 Buttons have a new toggleControl option to hide/show another control.
  14. BS4 Modal: Values can now be set using HTML, not just text.
  15. jqxPhotoGallery: Editor window now appears for editing photos property.
  16. jqxScheduler: Add a couple of missing icons.
  17. jqxScheduler: Sample improved.

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

AS7: Validation

AppStudio 7 brings Validation to your projects. Now it’s easy to check the validity of fields on your form.

If a field is invalid, a message in red appears next to the field.

Validation doesn’t kick in until you ask it to validate the form. This lets the operator input data undisturbed. As fields are corrected, the error messages disappear.

Validation should work on controls from all frameworks.

Here is the link to a new Tech Note to get you started using the Validation library, plus some additional reading:

AS7: Make your app work in different languages (i18n)

Want to get a wider audience for your app? Make it work in multiple languages!

AppStudio 7 introduces a library to make this much easier. You write your code once. You supply some translation tables. Your app then runs in multiple languages using the same version of the code.

(Aside: this is often called i18n, because there are 18 letters in “Internationalization”, and who wants to type that out?)

Controls

AppStudio Common and Bootstrap 4 controls already have translation built in. Any text which is in the Translation Table will be automatically converted. You don’t have to do anything except include the i18n library and the table in your project.

Text values at Runtime

If you’re setting a text value at runtime which needs to be translated, use the $.i18n() function:

Input1.placeholder = $.i18n("Monday")

The $.i18n() function looks up what the app’s language is set to. If it is “en”, nothing happens and “Monday” is assigned. If it is set to “de”, the function returns “Montag”.

Translation Table
You’ll need to set up a translation table and include it in your project. Here’s a sample with German days of the week:

{
  "Monday": "Montag",
  "Tuesday": "Dienstag",
  "Wednesday": "Mittwoch",
  "Thursday": "Donnerstag",
  "Friday": "Freitag",
  "Saturday": "Samstag",
  "Sunday": "Sontag",
  "Day": "Tag"
}

You can add as many strings as you like.

More Info

Each set of controls seems have its own method of handing i18n. For example, jqxWidgets has its own scheme. We go into the detail in this and other information in this Tech Note on Internationalization.

There is also a sample included in AppStudio called i18n. It shows the effect on lots of controls.

AS7: New options in the Project Explorer

With AppStudio 7, it is much easier to move controls around on your form. If you right click in the Project Explorer, you’ll see new options to Cut, Copy and Paste controls.

You can use them to move controls from one container to another, or to paste multiple copies of a control into a specific container.

They also work between projects: you can copy a control from one project and paste it into another.

They even work on containers: you can cut, copy and paste entire groups of controls.

Complex projects are now much easier to manipulate!

AS7: The new Snackbar message

Ever want to give your user a quick message about what he is doing? The Snackbar message is an easy way to do so.

It displays a message with an optional action. The message stays on the screen for a few seconds, then fades away.

It’s only available if you are using Bootstrap 4.

The concept of a Snackbar message originated in Google’s Material Design.

It’s easy to code.

BASIC:

Function Button1_onclick()
  Snackbar("This is a warning about something.", "more?", snackBarDismiss)
End Function

Function snackBarDismiss()
  MsgBox "Closed!"
End Function

JavaScript:

Button1.onclick = function() {
  NSB.Snackbar("This is a warning about something." , "more?" , snackBarDismiss);
};

function snackBarDismiss() {
  NSB.MsgBox("Closed!");
}

AppStudio 7.0.2 released!

We’re pleased to announce that 7.0.2 has been released.

It fixes a number of issues people have reported with the new release. Updated translations for many of the languages we support are included.

  1. Controls: jqxGrid: Problem with ‘ready’ property fixed.
  2. Deploy: Problem with Obfuscation fixed.
  3. Design Screen: MsgBox errors no longer display.
  4. Design Screen: Remove “Settings” from Add Control list.
  5. IDE: Export of external files fixed.
  6. Language files updated.
  7. Samples: BS4 Input fixed.
  8. Samples: Leaflet updated to use the latest libraries.
  9. Samples: StockQuote removed. Yahoo deprecated the API which it used.

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

AS7: Introducing GitHub

GitHub is a web service to help you organize and manage your projects. At its core, it runs a version control system called git. As git is not user friendly enough for most users, GitHub Inc. created a web interface and backend for git, making it much easier to use and extending its features. As of June 2018, over 57 million projects were hosted on GitHub. On June 4, 2018, Microsoft announced it had reached an agreement to acquire GitHub.

Advantages of using GitHub are:

  • Version Control: Each change to your project is recorded. You can see when changes were made and by who.
  • Branching: You can checkpoint a project at a certain point and easily go back to that point. For example, you could have an experimental branch without disturbing the main project.
  • Issues: You can track bugs and the work to be done on the project.
  • Milestones: You can group your issues in milestones, with a due date.
  • Developers: If there are multiple developers on a project, GitHub makes sure they do not overwrite each others work. It also allows the team to communicate effectively with one another.
  • Backup: You will now have another backup of your project.
  • Replication: Want to install your project to another system? You can clone it anywhere there is an internet connection.

Check out the new Technote which takes you through installing and using GitHub.

Got questions or comments? You can post them on our web board:
https://discuss.nsbasic.com/t/new-tech-note-about-github/1178

False Detection from Kaspersky

We are getting reports of Kaspersky blocking installations of AppStudio. Users get a message like this:

It’s a False Detection: there is no problem with AppStudio. Kaspersky is misinterpreting something in our installer as a threat.

The procedure when this happens is for us to upload a copy of our software to their site so they can examine it. I’m not sure why it has to be our problem to fix, but we have done so a couple of times. There has been no response from Kaspersky.

This is complicated by the fact that we update AppStudio frequently, especially after a new release. They may mark a build as good, but we issue a new one a few days later.

Until we hear something, we recommend you turn off Kaspersky when installing AppStudio, or use another anti virus app.

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.