MetroMail Responsive Email Template
 
 
icon 2    January 17th, 2014
 
 
 
UPDATES & NEWS FOR THE LIVECODE COMMUNITY
 
 
 
 
 
 
 
Article 3: MobGUI Updated
 
 
main image

What's new?
Recently, work began on updating MobGUI (a plugin to aid mobile app development). The idea is to supply a set of custom controls to drag and drop on to your own projects and give you a flying start in getting your own app up and running. So – how does the new plugin differ from the old? They're like chalk and cheese!

 

The old MobGUI plugin was a password protected stack that attached itself to your project. The plugin's code was all centralized into a library stack and the custom controls all made use of the library for their intended tasks. The downside was that the developer didn't have access to all the code in their project as the MobGUI stack was always locked. Front and back scripts (check out the message path in the LiveCode docs) were used to catch messages, which could also potentially cause problems because the scripts are not accessible and developers may have their own front/back scripts in play. On the plus side, because the library was locked, it had a fully functional and unlimited trial version. The biggest problem with a password protected plugin is the fact that it can't run on the community edition of LiveCode.

 

Community Compatible

The new MobGUI plugin uses behaviors : each control has its behavior property set to the id of a button, and that button contains the code to make the control act in a particular way. There's no library stack added to your project, but a MobGUI card is added instead. All the behavior buttons are placed on the MobGUI card, making them easy to find. The new plugin is NOT a password protected stack, so it runs happily on both community and commercial editions. Another great benefit is that every bit of code in your project is visible and easy to get to – there are no locked out, mysterious libraries lurking in the background.

 

One of the great things about LiveCode behaviors is that the control's own script is kept minimal – it's free from all the behavior code, which is tucked away in the script of the behavior button. The behavior script is still editable if you want to do a bit of fine tuning, but when you look in the actual control script, there aren't pages of code to get in your way or distract you. The result is, for example, that a button can change appearance when touched and change back again when released, but the code for these actions is tucked away – so you can concentrate on the actual code that makes the button perform its intended task in your app.

 

To make sure that getting to these behavior scripts is even easier, the new plugin has an option to add it's own items to the context menu when you're editing your cards – just right click on any control (or controls) and if there's a behavior script (or scripts) associated, then they are opened in the script editor.

 

The native controls are restless!
One thing that both plugin versions have in common is the ability to drag native mobile controls on to your card. This is – of course – a white lie! The custom controls for the native mobile controls currently supported by LiveCode (Browser, Scroller, Input, Multiline and Player) are actually just place holders. These place holder controls are replaced with the native controls when your stack runs on a simulator or device, but they let you visualize the space that the control will occupy and get on with the important task of designing the rest of your app.

 

That looks familiar...
A big thing on the MobGUI wish list was always themes. Previously, iOS styled controls and Android styled controls were separate items, so you'd have to create one version of your app for iOS and another for Android (or have multiple copies of each card) – unless you had a completely custom look going on (check out http://tmtools.tactilemedia.com). Now you can create, export and import themes – and all controls on a card can be switched to another theme at the click of a button – allowing you to keep an eye on how things are looking for each platform you are developing for. You can create your own theme, customize the controls' appearance, then export the theme: themes are exported as a theme stack which you can send to other users and they can send their themes to you. You can do what you like with them – even sell them if you're creative!

 

Switch Themes

Switch themes at the touch of a button

 

What about this Resolution Independence thing?
A big development on the LiveCode front was the introduction of resolution independence. Now LiveCode supports all these varying screen size/density combinations. MobGUI has a handy slider control to quickly scale your stacks to common mobile device sizes – which is great for testing your own resize handlers for repositioning controls – and - all MobGUI custom controls should scale nicely for any screen density. The latest custom control added to MobGUI is an icon button that can display an icon over a label in one of two ways: referencing image objects (which can make use of the standard image, @2x for retina, etc...) or using a character from an icon font. The button can change appearance when touched, etc. by switching icons, changing fonts, changing the character from within a font – all these methods are interchangeable, you can mix and match. That explanation makes it sound more complex than it is – here's a short demo video I made recently:

 


Where do I get font icons?
There are loads of icons you can pick up online – some GPL licensed, some totally free, but, in an effort to make things even easier, MobGUI is now bundled with two (and a bit!) icon fonts. These fonts can be used royalty free in your apps. I've used lowercase a-z and uppercase A-Z in each font: the lowercase letters are line icons and the uppercase letters are their filled equivalents. Other characters were avoided as there are so many different keyboard layouts...


The fonts are: mobguicons-1, mobguicons-2 and mobguicons-3. A button using the 'a' icon can be switched to the filled icon by changing the character to 'A'.

Icons

What controls are already on the plugin?
The plugin currently has:

  • Nav-bar
  • Tab-bar
  • Button
  • Icon button
  • Option button
  • Switch
  • Slider
  • Vertical slider
  • Progress
  • Native mobile controls (Browser, Scroller, Input, Multiline, Player).

This is a work in progress, more controls will be added.

 

What about desktop apps?
All MobGUI custom controls - except for the native mobile controls - also work for desktop apps. You can already create some nice looking interfaces for desktop and MobGUI uses some of its own option buttons and sliders in its interface... Desktop equivalents of the native mobile controls may be added in the future, allowing common code to function across desktop and mobile apps: LiveCode already has a browser, single line and multiline fields, scrollable groups and player objects, so it should be possible!


Is there a demo version?
Sadly, the answer is no. Since the new plugin is not password protected, there's no solid way to add a trial mechanism, but feel free to head over the the support forum and ask any questions you have. You'll get honest answers from the LiveCode community.

 

How do I get my hands on this wonder?

MobGUI is available in the Extensions store for a very modest $50, and is also included in the MegaBundle. If you have already purchased the MegaBundle, or pucrhased MobGUI within the last year, you can get this update free by going here and entering your license key.

John Craig

John Craig is a family guy with 2 kids and 2 dogs. He mainly develops database intensive web apps and is well known in the LiveCode community as the developer of MobGUI.

 
 
section image
 
New Year Roadmap
 
Last year was exciting, this year will be even better!
 
read more
 
 
section image
 
Excel Library
 
Get your hands on the newest LiveCode Extensions release
 
read more
 
 
section image
 
MobGUI Updated
 
MobGUI supports themes, iOS7, resolution independence and more
 
read more
 
 
section image
 
Thumbnail Image
 
A hands on tutorial showing you how to create thumbnails from images
 
read more
 
 
 
Join Us in San Diego
 

Next 20 tickets for RunRevLive.14 sold save $200 with this coupon:

SANDIEGO

Check out runrevlive.com for more!

 
download
 
 
Featured Extensions
 
section image
 
Excel Library
 
Take control of MS Excel with this library of over 170 commands and functions for LiveCode. Import/export data from MS Excel to LiveCode. Automate tasks, convert worksheets and more.
 
read more
 
 
section image
 
Matrix Recoded
 
Matrix ReCoded offers 30 functions and 12 handlers to manipulate matrices. Develop mathematical or engineering solutions, or even vector-based drawing packages. Included in the Megabundle.
 
read more
 
Connect With Us
 
RunRev © Copyright 2013 . All Rights Reserved
 
 
 
RunRev © Copyright 2013 . All Rights Reserved