LiveCode
  • Why LiveCode?
  • Customers
  • Resources
  • Education
  • Consulting
  • Pricing
  • Blog
  • Login
  • Try LiveCode
Back to
  • slides
  • tutorial
Resources

Duplicating the Line Graph Widget

Topic Progress:
← Back to Lesson

Duplicating the Line Graph Widget

The Line Graph widget is part of the LiveCode distribution so we can’t make changes to it directly.

To create a modified version of the Line Graph widget we will make a copy of the LCB file in a new folder and update the name, extension id and author so the two Line Graph widgets can exist together without conflicts.

We will also use a different icon when installing our version so it’s clear which widget is which in the Tools Palette.

Start by creating a new folder.

Next we will copy in the LiveCode Builder source file for the Line Graph widget.

You can find the source for all the extensions used in LiveCode inside your LiveCode application package.

  • Mac: <LiveCode 8.1.app>/Contents/Tools/Extensions
  • Windows: <LiveCode 8.1>/Extensions

In the Extensions folder you will find a folder for each extension. Copy the graph.lcb file from the com.livecode.widget.lineGraph folder into the new directory you created.

The source file can also be found in the Resources for this lesson.

Update the Widget Metadata

Update the widget identifier and metadata.

  • Set the widget identifier to “community.livecode.<developer id>.lineGraph2”
  • Set the author to your name.
  • Set the version number to “1.0.0”
  • Set the title to “Modified Line Graph”
  • Remove the svgicon metadata. We’ll be selecting our icons in the Extension Builder and this piece of metadata would override the icons.

This will ensure LiveCode recognises the modified Line Graph as a unique widget, not a version of the initial widget.

widget community.livecode.elanorb.modifiedlinegraph
    -- dependency declarations
    -- metadata

    metadata author is "Elanor Buchanan"
    metadata version is "1.0.0"
    metadata title is "Modified Line Graph"
    metadata preferredSize is "300,175"
    … widget code continues

end widget

Update OnCreate

We also need to update the OnCreate handler to set the default value of the mMarkerStyles  variable.

If we don’t set a value for this list variable in OnCreate the Extension Builder will encounter an error when using the Test button to test the widget. This is because LCB throws an error if you try to access a list element that does not exist so we must ensure the variable is set to its default value.

public handler OnCreate() returns nothing
   … previous code
   put [] into mMarkerStyles
   put ["filled circle","filled square","filled diamond"] into mMarkerStyles
   … code continues
end handler

Test the widget

Test that the widget compiles with these changes.

  • Open the Extension Builder from the Tools menu
  • Load the Modified Line Graph LCB file.
  • Click Test
  • The Extension Builder will compile the widget and create a test stack containing an instance of the widget.

test1

← Previous Topic

← Previous Topic Next Topic →
  •  
  •  
  • (0)
  •  

Expand All | Collapse All
Lessons Status
1 - Hello World Library
  • Introduction
  • Installing a Text Editor
  • Creating an LCB library
  • LCB library definition
  • LCB handler definitions
  • Compiling and testing a library in LiveCode
  • LCB metadata
  • Installing an LCB Library
  • Packaging and sharing an LCB library
  • Including an LCB library in a standalone
  • Conclusion
2 - Extended Hello World Library
  • Introduction
  • Explicit Types
  • LCB Lists and Arrays
  • Type Conversion between LCB and LiveCode Script
  • Using Explicit Typing in the Library
  • Passing Parameters to the Library
  • Using Lists in the Library
  • Documenting the Library
  • Browsing the Documentation
  • Conclusion
3 - Rotated Text Widget
  • Introduction
  • Defining a Widget
  • LCB Module Level Variables
  • Widget Properties
  • Widget Handlers
  • LCB Canvas Operations
  • Compiling and Testing the Widget
  • Installing the Widget and adding it to a Stack
  • Including the Widget in a Standalone
  • Conclusion
4 - Extended Rotated Text Widget
  • Introduction
  • Integrating Properties
  • Accessing LiveCode Control Properties
  • Handling Mouse Events
  • Saving and Loading Widgets
  • Read Only Properties
  • Documenting the Widget
  • Conclusion
5 - Pie Chart Widget
  • Introduction
  • Planning the Widget
  • Widget Properties
  • The OnCreate Handler
  • The OnPaint Handler
  • Responding to Mouse Events
  • Saving and Loading the Widget
  • Installing and Including the Widget in a Standalone
  • Documenting the Widget
  • Conclusion
6 - Modifying the Line Graph Widget
  • Introduction
  • Duplicating the Line Graph Widget
  • Additional Color Properties
  • Filling the area below the line
  • Adding graph marker mouse events
  • Conclusion
7 - Additional Resources
  • Extending LiveCode Guide
  • LiveCode Builder Language Reference
  • LiveCode Builder Style Guide
  • LiveCode Documentation Format
 

LCB Source

LCB Source

Icons

Icons
 

Login

LiveCode

  • Why LiveCode?
  • Pricing
  • Customer Stories
  • Extensions
  • LiveCode in Education
  • LiveCode in Business

Looking for LiveCode FileMaker?

LiveCode for FM

Resources

  • Docs
  • API (Language Dictionary)
  • Lessons
  • Sample Stacks
  • Forums
  • Stackoverflow
  • User Groups
  • Support
  • Directory
  • LiveCode Services

About

  • About
  • Meet The Team
  • Careers at LiveCode
  • Contact us

Recent Posts

  • LiveCode Classic 10.0.1 Stable and 10.0.2-rc-1 Released
  • Create Progress – the Three D’s
  • LiveCode Create: Closing out the year with big steps forward
  • Create dp-5: Unified Engines and Shared Extensions
  • 3 Great New LiveCode Releases
Sitemap
Terms Privacy Policy EULA
Brought to you by LiveCode Ltd, Registered in Scotland, No. SC200728
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.Ok