Posts

Posted on

Make your own Bootstrap Theme

AppStudio lets you manipulate many of the features of the Bootstrap controls. Essential to their appearance, however, is the theme they use. By changing the theme, you can affect the color and appearance of all your Bootstrap controls. AppStudio includes 18 Bootstrap themes: bootstrap, bootstrap-enhanced, cerulean, cosmo, cyborg, darkly, flatly, journal, lumin, paper, readable, sandstone, simplex, slate, spacelab, superhero, united and yeti.

But what if you want to make your own theme? It’s surprisingly easy to do using the Bootstrap Theme Customizer. You start it from http://getbootstrap.com/customize/ or AppStudio’s Tools menu. It includes full documentation – we just present an overview here.

Continue reading “Make your own Bootstrap Theme”

Posted on

Positioning Controls

Web design is constantly evolving. Each year, new features are introduced to HTML, CSS and JavaScript. New page design trends emerge along with new style guides. AppStudio 6 has a number of changes to bring AppStudio development up to date with current best practices.

Responsive Web Design allows your apps to change how they display depending on screen size. Most new web development is based on RWD. AppStudio 6 has enhancements to better use RWD.

The position property, in Form Properties, is key to this. Its setting determines how controls are positioned on a form.

There are three useful settings: absolute, static and relative. (fixed is included for completeness, but not currently used by AppStudio).

Let’s discuss the differences and advantages of each.

Continue reading “Positioning Controls”

Posted on

AppStudio 6: Accessing Google Drive

searchGoogle Drive is a convenient way to store documents in the cloud and access them on any of your devices. It’s also an easy way to share documents. Millions of people use Google Drive – recent statistics show Google Docs to be as much as 5 times more popular than Microsoft Word.

The great news is that you can access the data in Google Drive from your AppStudio app. For example, you can read the data in a Google Sheet, modify it, and write it out again. This effectively turns the spreadsheet into a database for your app.

Volt makes this possible for everyone to use. To use Google Drive, your app needs to be deployed to a server. For security purposes, you have to give Google Drive the name of the server before it will authorize it to access your files. You can set up your own server for this or simply use Volt. After you deploy your app to Volt, enter the path which Volt gives you (something like “https://googlespreadsheet-signs-smoothly.volt.live”) and update the credentials.
Continue reading “AppStudio 6: Accessing Google Drive”

Posted on

AppStudio 6.0.3 released!

We’re pleased to announce AppStudio 6.0.3 is ready. New and improved stuff includes:

  1. Design Screen: Positioning logic improved for relative and static. (Blog post coming!)
  2. Libraries: Google Drive added to Libraries – makes Google Drive easier to use. (Blog post coming!)
  3. Controls: Bootstrap Dropdown selectable in Design Screen with static positioning.
  4. Controls: Bootstrap Slider: Use .control.value=x instead of .setValue(x)
  5. Controls: Common Grid style attribute fixed.
  6. Controls: jqWidgets DataTimeInput requires fastclick = false.

A couple of these are of special interest – watch for blog posts soon!

Download the latest version from ‘Check for Updates’ under then AppStudio Help menu. It is a free upgrade for AppStudio 6 users.

Posted on

AppStudio 6.0.2 released!

We’re pleased to announce AppStudio 6.0.2 is ready. New and improved stuff includes:

  1. Bootstrap: New Slider control.
  2. Controls: Camera control rewritten so it will work with Bootstrap. Delete and re-add the control.
  3. Design Screen: Responsive forms now use static positioning.
  4. Design Screen: jQM Checkbox and RadioButton samples render properly on Mac.
  5. Design Screen: Show warning if Bootstrap and jQuery Mobile controls used in same project.

Download the latest version from ‘Check for Updates’ under then AppStudio Help menu. It is a free upgrade for AppStudio 6 users.

Posted on

AppStudio 6.0.1 released!

We’re pleased to announce AppStudio 6.0.1 is ready. New and improved stuff includes:

  1. Bootstrap Badge: Add a space to the left.
  2. Bootstrap Icons: Can now be added/changed at runtime.
  3. Bootstrap Jumbotron: Fix error when optional button removed.
  4. Bootstrap Jumbotron: HTML and multiple lines in value and header.
  5. Bootstrap Modal: HTML and multiple lines in value, header and footer.
  6. Code Window: Adding event to form does not also add it to Global code.
  7. Code Window: .xhtml is now an editable type.
  8. Container: .addChild function supported.
  9. Design Screen: Grandchildren can now be copied.
  10. Documentation: offline Wiki updated.
  11. Header: Buttons as children now work.
  12. Header: .addChild function supported.
  13. PlaySound() now has a volume option.
  14. jQM Checkboxes: problem with horizontal checkboxes fixed.
  15. jQM Collapsible: Can now be used as a container.
  16. jQM Select: Multi select added.
  17. jQM Select: setIndex was indexing incorrectly.
  18. Project Properties: New “Use strict” option does additional syntax checking, such as undeclared variables.
  19. Project Properties: Content Security Policy moved from PhoneGap. Add “connect-src”.
  20. Runtime: Allow special characters in the code.
  21. Runtime: code.js is now obfuscated when that option is selected.
  22. Runtime: better error message when initializing undefined control.
  23. Samples: new PhoneGapSMS sample.
  24. ServerStorage deprecated.
  25. Translations: Arabic complete. (Thanks, Aya!)

Download the latest version from ‘Check for Updates’ under then AppStudio Help menu. It is a free upgrade for AppStudio 6 users.

Posted on

Why we switched to a Subscription Plan

AppStudio has always been sold with a flat license fee. Pay for it once and you can use it forever. Starting with AppStudio 6, this changes.

We think we can improve your experience with subscription plans. It lets us provide more updates, more features and better support. Rather than an upfront fee, you’ll pay monthly for the service level you actually need.

Volt will be revolutionary. It provides services we never could have before. Subscriptions give us flexibility to keep our customer’s costs low during the development cycle, while allowing for high usage from apps which have gone live.

It’s good for our customers. They get access to high volume servers to host their apps. Rather than an up front cost, AppStudio is available for a low cost per month.

We also benefit. A lot more of our expenses are now monthly – we have to pay for the servers and bandwidth, as well as support them. Having a steady revenue stream helps us deliver enhancements and new versions on a continuous basis.

We’re looking after our existing users. The AppStudio 6 Upgrade is the same as it was for previous releases ($49.95). In addition, it has 4 months of Volt Essential included (a $60 value), with a discounted rate thereafter.

If you don’t need a monthly plan, cancel it. AppStudio 6 will still work.

Let us know if you have questions!

You can order the upgrade to AppStudio 6 here.

Posted on

AppStudio 6: Introducing Bootstrap!

screen-shot-2016-10-28-at-2-39-53-pm

AppStudio 6 adds support for the Bootstrap framework. It describes itself as “the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.’

It is a free and open-source front-end library for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications. Originally developed at Twitter as an internal tool, it was released as an open source project in August, 2011. Bootstrap is the second most-starred project on GitHub, with over 95 thousand stars and more than 40 thousand forks. It’s used by over 10 million websites.
Continue reading “AppStudio 6: Introducing Bootstrap!”

Posted on

AppStudio 6: New Header control

AppStudio 6 brings a new Header control. It’s a Common control, which means it will work with all frameworks.

Header puts a simple header bar at the top of your app:

screen-shot-2016-10-26-at-11-40-29-am

You can customize the colors, font and size. It’s a simple useful control if used for just this.

What makes it special is that it can be used as a container for other controls. Add a couple of Buttons named Left and Right to a project with a Header. Now, drag them onto the Header:

screen-shot-2016-10-26-at-11-46-46-am

Now it looks like this:

screen-shot-2016-10-26-at-11-53-59-am

Change margin-all for both buttons to 3, and change the style of the Right button from float:left; to float:right;

Here is our final Header with buttons:

screen-shot-2016-10-26-at-11-56-24-am

Of course, controls other than buttons can be used to create interesting headers.

Posted on

AppStudio 6: Updated Error Messages

In Version 6, we’ve changed a couple of error messages. One you saw too often, and the other you never saw at all. Both these changes will make you more productive.

New Version Warning

How many times have you seen this message when testing an AppStudio 5 app?

screen-shot-2016-10-24-at-3-50-46-pm

It warns you that you are about to overwrite the current version of your app. There isn’t any need to get this message every time your change your app when you’re developing. In AppStudio 6, there is a new setting in Project Properties called ‘newVersionWarning’. If set to false (the default!), this message will not show.

When your app goes into production, you might want your user to be warned if a new version is available, and give them the choice not to update. In that case, change ‘newVersionWarning’ to true and it will work just as it did in AppStudio 5.

Stop on Error

In AppStudio 5, the only way to find out if your app had a runtime error was to open the Chrome Debugger and look at the console. In AppStudio 6, errors are reported in a message box which appears over your app:

screen-shot-2016-10-24-at-3-57-28-pm

It will tell you the filename of the error (code.js), the line number and even the position in the line.

This catches most runtime errors. It doesn’t catch syntax errors, where the code is not properly formed. You’ll still need to use the Chrome Debugger for that. With this feature, I’ve found errors in code which I thought was working properly – it’s very handy.

You can turn off this feature in Project Properties by setting ‘stopOnError’ to False.