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”

AppStudio 7.2.0 Released!

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

This release has a couple of breaking changes. Please read the section “Important!” below!

  1. BS4: i18n support added to iconFeedback descriptions.
  2. BS4: Select: text property added.
  3. BS4: Select: value property changed to contain an index value.
  4. Common: Container (and other controls) no longer get error on .addChild()
  5. Installer: MacOS installer is now fully code signed.
  6. Installer: MacOS now built using PyInstaller 3.4.
  7. jqW: jqWidgets 7.0 is supported.
  8. Runtime: Delay on starting app in local browser in MacOS Mojave fixed.

Important!

  • Please note that the changes to BS4 Select will break code in some cases. See Wiki.
  • The new version of AppStudio may hang the first or second time it is run. Just restart it. This is due to the new code signing requirements of MacOS Mojave.

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

AppStudio 7.1.0 released!

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

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

  1. BS4: New themes: lux, materia, minty, pulse and solar.
  2. BS4: Upgraded to Bootstrap 4.2.1.
  3. BS4 Dropdown: Outline button option added.
  4. BS4 Dropdown: Icon was not showing in some cases.
  5. BS4 Hamburger: Outline button option added.
  6. BS4 Jumbotron: Outline button option added.
  7. BS4 Label: Appearance defaults to ‘primary’.
  8. BS4 Listgroup: Appearances adds primary, secondary, light and dark options.
  9. BS4 Listgroup: Icons property added.
  10. BS4 Select: fontsize of select option is now same as title.
  11. BS4 Select: Icon was not appearing.
  12. BS4 Textarea: fontsize of body is now same as title.
  13. BS4: You can now specify the text which appears when hovering over an icon.
  14. IDE: Copyright changed to 2019.
  15. jqW: jqxGrid – problem with column property fixed.
  16. Samples: Flexbox sample improved.
  17. Samples: Labels sample renamed to Label.
  18. Volt: Upload limit increased from 50 megs. Keeping it under that size is strongly recommended.

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

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.

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”

AppStudio 7.0.4 released!

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

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

  1. Controls: BS4 Label has new LabelStyle and borderRadius options.
  2. Controls: DataTable now includes extensions, including buttons, responsive, scroller and fixedHeader.
  3. Controls: Flexbox properties added the Container, Header, GridRow and GridCol.
  4. Controls: New FlexBox control makes layout easier.
  5. PhoneGap Status: Closes instead of hiding behind AppStudio when file is selected.
  6. Properties: Problem with calc (used in bounds) and ‘vh’ fixed.
  7. Samples: New BS4 Labels sample.
  8. Samples: New FlexBox sample.
  9. Samples: Validation sample updated.
  10. Translator: Const is now translated properly from BASIC.

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

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!