Dawn of the Planet of the Widgets

On March 12th Kevin Miller announced the first LiveCode 8 developer preview at the LiveCode Unconference in Brooklyn. At the heart of the announcement was the introduction of widgets, a new control available to LiveCode developers. Thanks to the LiveCode Github respository, I had been using LiveCode 8 in the weeks leading up to the announcement. As LiveCode engineers made improvements I would update my local repository, rebuild using Xcode, and test. I was so impressed with what I saw that I decided to move a project I’ve been working on for the last few months to version 8 right away. Why would I trust my project to a LiveCode engine that hadn’t even reached a public beta yet? Let’s take a look.

The control you always wanted

I’ve been using LiveCode for over 12 years now. LiveCode has a lot of good things going for it, but creating controls that are customized for a specific project has never been one of them. Take, for example, the need to create a rectangle graphic that shows the border on the right side and bottom side of the graphic. In addition, the right border should be a different color than the bottom border. Prior to LiveCode 8 you had to use multiple graphics in order to achieve this look. The built-in rectangle graphic only allows you to turn borders on or off for the entire graphic, and you can only set the color of the border as a whole. With LiveCode 8 I was able to code a widget that did exactly what I needed. Take a look:

widget-vs-graphic

 

The way I designed my rectangle widget, I can change properties for each side. For example:

set the showLeftBorder of widget 1 to false
set the rightBorderColor of widget 1 to "128,0,0"

Using widgets I have been able to create the custom controls I need for my project. Here are some samples:

other-widgets

I have a button whose icon I can change using SVG path data. A checkbox that has the look and feel of my application. A hybrid button/menu control that sends different messages based on where you click. And a custom option menu that has the look and feel of my application. Each of these controls is a single control in LiveCode 8. It is not a number of built-in LiveCode controls grouped together. The controls are easy to work with in the project browser and when I update the source code for the widget every single instance of the widget gets updated in my application.

What’s the secret?

The beauty of a widget in LiveCode 8 is that you, the developer, control what gets drawn to the screen. LiveCode 8 adds a new language named LiveCode Builder which allows developers to access (among other things) the Skia drawing libraries that LiveCode uses. We can draw any shapes we want on the widget canvas. Take a look at the OnPaint() handler for a color swatch widget I made last night. It uses rounded rectangles, an SVG path, and clipping to create a control that was a real pain to create previously.

public handler OnPaint() returns nothing
 //////////
 // Draw checkbox background
 variable tPath as Path
 variable tRect as Rectangle
 
 set the paint of this canvas to solid paint with getColor("background")
 
 put my bounds into tRect
 put rounded rectangle path of tRect with radius mBoxCornerRadius into tPath
 fill tPath on this canvas
 
 // Draw color swatch
 set the paint of this canvas to solid paint with getColor("color")
 put rounded rectangle path of rectangle [0,0,the width of my bounds*0.75,the height of my bounds*0.75] with radius 1 into tPath
 // 0 out
 translate tPath by [- the x of the bounding box of tPath, - the y of the bounding box of tPath]
 // Center
 translate tPath by [the width of my bounds/2 - (the width of the bounding box of tPath)/2, \
 the height of my bounds/2 - (the height of the bounding box of tPath)/2]
 fill tPath on this canvas
 
 // Draw triangle box
 variable tSwatchRect as Rectangle
 put the bounding box of tPath into tSwatchRect
 
 set the paint of this canvas to solid paint with getColor("background")
 put rounded rectangle path of rectangle [0,0,the width of my bounds*0.458,the height of my bounds*0.5] with radius mBoxCornerRadius into tPath
 // 0 out
 translate tPath by [- the x of the bounding box of tPath, - the y of the bounding box of tPath]
 // Position
 translate tPath by [the width of my bounds - the width of the bounding box of tPath, \
 the height of my bounds - the height of the bounding box of tPath]
 
 save state of this canvas
 clip to tSwatchRect on this canvas
 fill tPath on this canvas
 restore state of this canvas
 
 set the paint of this canvas to solid paint with getColor("triangle") 
 
 // Draw triangle
 put path mTrianglePath into tPath
 transform tPath by scaleAndMaintainAspectRatioTransform(the bounding box of tPath, \
 rectangle [0,0,the width of my bounds*0.208,the height of my bounds*0.208])
 translate tPath by [- the x of the bounding box of tPath, - the y of the bounding box of tPath]
 translate tPath by [the right of tSwatchRect-the width of the bounding box of tPath, \
 the bottom of tSwatchRect-1-the height of the bounding box of tPath]
 fill tPath on this canvas
end handler

Here is the result:

color-swatch-widget

Going forward

Widgets in LiveCode 8 dp-1 are still in their infancy but already they allow us to create custom controls that make our products look and behave better. Given that LiveCode 8 is essentially widgets (and libraries, but that is a topic for another post) built on top of the LiveCode 7 engine I was able to move my existing LiveCode 7 project into LiveCode 8 and now add widgets where it makes sense. I’m like a kid in a candy store.

 

 

 

Using SourceTree to monitor progress on LiveCode

When LiveCode became open source after the Kickstarter campaign all of the source code was moved to Github. Because the livecode repository on Github is public, you can monitor all changes which are submitted to it.

I’m going to show you how to easily monitor progress on the LiveCode engine using SourceTree, a free Git client for Mac and Windows made by Atlassian.

Continue reading

A Plugin For Monitoring the focusedObject

Knowing which object currently has focus can help you troubleshoot situations when messages aren’t being sent to the object you think should be getting them. I have a plugin I use called ReportTheFocusedObject which continually monitors the focusedObject and selectedField so that you can quickly determine which object is the target of messages.

You can download the plugin here.

For instructions on how to install plugins for Revolution see this lesson.

RunRevLive 09 Resources

I took down the original page of links to my session materials that  I posted for the RunRevLive 09 conference so I’m reposting the content here.

Behaviors and Custom Controls

Behavior Helper Plugin

http://www.bluemangolearning.com/download/revolution/tools/BehaviorHelper.rev.zip

Custom Control Helper Plugin

http://www.bluemangolearning.com/download/revolution/tools/CustomControlHelper.rev.zip

Behaviors & Custom Controls Stacks

http://www.bluemangolearning.com/download/revolution/tools/behaviors_customcontrols.zip

Instructions Showing How To Install a Plugin

http://revolution.screenstepslive.com/spaces/revolution/manuals/plugins/lessons/5489-Installing-the-Plugin

Password Font

http://www.bluemangolearning.com/download/revolution/tutorials/passwordentry.zip

Presenting Data with the Data Grid

Data Grid Sample MP3 Library

http://www.bluemangolearning.com/download/revolution/tools/data_grid_sample_mp3_library.zip

Creating a Music Library Interface Part I

http://revolution.screenstepslive.com/spaces/public_staging/manuals/740

SQL Yoga 1.0.1 Released with New IDE Plugin


New Features and Bug Fixes

SQL Yoga 1.0.1 is now available for immediate download from the SQL Yoga site. The new version has a number of bug fixes as well as some new features.

Two new time-saving commands have been added to the library that will speed up creating and updating records:

Both of these commands allow you to pass in arrays with the values you want to insert/update in the database.

For a full list of changes please see the change log.

New Plugin

A new IDE plugin is now included with the SQL Yoga distribution. The plugin automates a few tasks and provides logging. You can read about how to install and use the plugin in the new plugin manual.

Learn More

To learn more about SQL Yoga, download a demo or purchase please visit the SQL Yoga page.

RunRev MegaBundle: Get $4000 of software for $499

RunRev is offering their MegaBundle sale again this year. This is your best chance to get all of the tools you need for a great price.

RunRev MegaBundle 09

If you just need to renew your revEnterprise license or have been looking at developing software with Revolution this is the best price you are going to get.

All of our products that are available through RevSelect are included with the bundle: SQL Yoga, Professional Application Development with Revolution training courses and ScreenSteps standard.

http://www.runrev.com/products/mega-bundle-09/

SQL Yoga Log Plugin

UPDATE: This plugin has been replaced by the plugin that comes with the SQL Yoga distribution.

SQL Yoga automatically generates SQL for you so you don’t have to worry about it. Sometimes, however, it can be helpful to see the SQL that is being generated. Database objects have a couple of properties that can automatically log all generated SQL to a field or file.

The SQL Yoga Log Field plugin is simply a stack that registers a field as the field to log all statements to. When you want to see the SQL being generated by the default Database object simply open it from the plugins menu. When you are done just close it and all logging will stop.

Download: http://bluemangolearning.com/download/revolution/plugins/SqlYogaLogField.zip

SQL Yoga Log Field Plugin

New Manual: Converting An Existing Application To Use The Framework

Ivan Wong of MapleCommerce was kind enough to let me use an application he is working on as an example of how to convert an existing application to use the GLX Application Framework.

I just uploaded the new manual which I think will prove useful to those looking to start using the framework.

View Converting An Existing Application To Use The Framework