Posts

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

AppStudio 7.2.2 released!

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

It includes new features and some bug fixes.

  1. Controls: New CSSGrid and CSSGridItem controls.
  2. Documentation: Wiki updated with new controls.
  3. Documentation: Bootstrap 3 vs Bootstrap 4 doc improved.
  4. BS4: New link to preview icons.
  5. BS4 Card: new imageWidth property added.
  6. BS4 Switch: bug fixed – no size option.
  7. Installer: Windows signing certificate updated.
  8. Samples: New CSSGrid sample.
  9. Samples: Volt Storage sample – fix to password check.
  10. Icons: Update link to point to https://www.nsbasic.com/app/OpenIconic.html

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

Posted on

AppStudio 7.2.1 released!

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

It includes new features and some bug fixes.

  1. BS4: New Toast control
  2. BS4: Select: No longer creates empty values for item
  3. BS4: Updated Bootswatch themes
  4. BS4: Switch: New Bootstrap native Switch replaces of Titatoggle’s Fliptoggle.
  5. Code Windows: Markdown (.md) files can now be edited.
  6. Deploy: loadType is now implemented.
  7. Deploy: new loadType: noload
  8. IDE: eslint dialog is reused (so there are never two visible at once)
  9. IDE: Project CSS is now marked up as CSS.
  10. IDE: Rare project corruption issues fixed – now it self fixes.
  11. IDE: Update copyright to 2019
  12. Project Explorer: Files can now be dragged and dropped. Will be deployed to the project’s root directory.
  13. Project Explorer: Folders can now be dragged and dropped. Will be deployed to the project’s root directory.
  14. Samples: Volt users – bug fixed in password check.

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

Posted on

Something from the labs: Framework Converter

We’ve been working on a way to get projects using old frameworks up to date. Bootstrap 3 has been updated to Bootstrap 4. jQuery Mobile hasn’t been updated in 5 years.

The Framework Converter is an open source project which hopes to help with this. It replaces all the controls it can in your project with the latest version from Bootstrap 4. The new controls have the same names, positions, text and other values as the original control.

You will still need to work on positioning and styling so the result looks good. Especially in the case of jQM, the web has evolved. Fonts are bigger, there is more white space and layouts tend to be less busy. The Framework Converter does the heavy lifting – you’ll still have work to do.

Here’s how to use it:
https://wiki.nsbasic.com/Framework_Converter.

We’ve also put the project in a Github repo called framework-converter, if you want to look at the source code and see how it works.

There’s some interesting technology under the hood. The project is done in AppStudio, using Node.js with npm, a huge library of addons; and Electron, a technology for packaging JavaScript into a desktop app.

Give it a try – you’re certain to have questions. Feel free to post them to our web board. If you find issues, post them to the framework-converter issue tracker on GitHub.

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

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…”

Posted on

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…”

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”