Category: tips

Posted on

The new CSSGrid Control

AppStudio 7.2.2 introduces the CSSGrid control, which provides a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

You can layout your form with areas, each of which can act as a container for the actual controls you will use. It’s a big help if you want to make a responsive layout.

There is reference documentation about it in the wiki – let’s walk through a tutorial of actually using it.

Support we want to layout a form like this:

This is actually how a lot of web pages are laid out. A Header at the top, a sidebar on the the left, some content in the middle and on the right, and a Footer at the bottom. For fun, we’re making a Footer which isn’t full width.
Continue reading “The new CSSGrid Control”

Posted on

Enhancements to the Bootstrap 4 Select control

AppStudio 7.2 adds a useful property to the Select control: value.

It’s a hidden field which keeps a value. This could be an index or a key to a database which lets you look up a record easily when a Select choice is made.

Using this can greatly simplify your code.

Important

To make this feature work, we had to change the Select control. You may need to change your code!
1. Change Select.value to Select.text in your code: So the statements would make sense we had to rename .value to .text.
2. Check any case where you’re using .addItem. If you have just a single argument, you do not need to do anything. If you have multiple arguments on addItem, add a new value argument as the second parameter.

Example of using Select.value
Continue reading “Enhancements to the Bootstrap 4 Select control”

Posted on

More on the Flexbox control

Ever feel like this when trying to get your CSS to work?

You’ll find the Flexbox control is a big help.

Here’s a good article telling even more about how to use Flexbox…

Flexbox promises to save us from the evils of plain CSS (like vertical alignment).
Well, Flexbox does deliver on that goal. But mastering its new mental model can be challenging.
So let’s take an animated look at how Flexbox works, so we can use it to build better layouts.
Flexbox’s underlying principle is to make layouts flexible and intuitive.

keep reading

Plus, there’s a follow up article.

Posted on

Introducing the new FlexBox control

AppStudio 7.0.4 introduces the FlexBox control. It makes it much easier to design a flexible responsive layout structure without using float or positioning.

Start by putting all the controls you want to position into a container. The new Flexbox properties allow you to control how the contents of the container are positioned.

These properties are part of the new FlexBox control. They have also been added to Container, Header, GridColumn and GridRow. To use them in these controls, you also need to set the display property to ‘flex’.

Here’s what each of the new properties does. Complete information is in the Wiki page about FlexBox.
Continue reading “Introducing the new FlexBox control”

Posted on

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:

Posted on

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.

Posted on

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!

Posted on

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!");
}
Posted on

False Detection from Anti Virus

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.

Update: William Robinson suggests the following workaround:

Open Kaspersky
Click on the settings cog (Bottom left hand corner)
Click on protection (Second listing on left)
Click on Firewall
Click on Configure Application Rules (Bottom left corner)
Scroll down to any NSB logo’s and Right Click and set to Allow

All should be good after this.

Update 2: There are reports of similar messages from Microsoft Security, AVG and Norton.

Update 3: There are reports of problems with Quick Heal Total Security as well. Whitelisting AppStudio solves the problem.

Update 4: Avast as well.

Update 5: You might think before you install AV software. These companies sometimes collect and sell your data, which is pretty much the opposite of you would expect. https://www.vice.com/en_us/article/qjdkq7/avast-antivirus-sells-user-browsing-data-investigation

Posted on

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.