02 Adding a View

View this tutorial's changes on GitHub.

If you're working with the tutorial repo, open a Git Shell in the CoreEditor-HelloWorld-Example-as folder and run the following command:

git checkout -f step-2

Otherwise, follow the instructions below.

---

Overview

In this tutorial we will add a view that can be opened via the 'Window' menu, and will be placed on the right hand side.

---

About Views

All Views should extend Flash’s DisplayObject class: flash.display.DisplayObject

In practice this usually means extending a Sprite, though equally you could use any CoreUI component.

When your view is displayed in the CoreEditor app, it is automatically made a child of a CoreUI component that implements the following interface. core.editor.core.IViewContainer

The concrete class for this container is specified during initialisation. For now all you need to know is that the framework will take care of wrapping your view in something the CoreEditor application knows how to work with.

Creating a View

• Right-click on the HelloWorldExtension project and click: New > ActionScript Class
• Set Package as “helloWorld.ui.views” and Name as “HelloWorldView”.
• Click Ok.

Paste the following code into your class:

package helloWorld.ui.views
{
	import core.ui.components.TextArea;

	public class HelloWorldView extends TextArea
	{
		public function HelloWorldView()
		{
			
		}
		
		override protected function init():void
		{
			super.init();
			_percentWidth = _percentHeight = 100;
		}
	}
}

---

About Contexts

In MVC terms a Context is the equivalent of a Controller. All contexts implement core.appEx.core.contexts.IContext. Every View has an associated Context, but not every Context has a View. A context with a view is called a VisualContext and is responsible for creating and maintaining its view.

Creating a Context

Create the following class:

package helloWorld.contexts
{
	import helloWorld.ui.views.HelloWorldView;
	import flash.display.DisplayObject;
	import core.appEx.core.contexts.IVisualContext;
	
	public class HelloWorldContext implements IVisualContext
	{
		private var _view		:HelloWorldView;
		
		public function HelloWorldContext()
		{
			_view = new HelloWorldView();
			_view.text = "Hello World";
		}
		
		public function get view():DisplayObject
		{
			return _view;
		}
		
		public function dispose():void
		{

		}
	}
}

A Context's lifecycle is managed by the CoreEditor app:

• An instance of the context is created.
• The view is added to the display list so all its children are ready.
• When being closed, dispose() is called. This is where any event listeners should be removed.
• The view is removed from the display list.

In our Context, you can see that we set a reference to the View in the constructor and give the View's text a value of "Hello World".

---

Contributing This View/Context Pair

Now that we've created our View and Context, we now need to 'Contribute' this resource.

To do so, we need to go back to our HelloWorldExtension.as class and replace it with this.

package 
{
	import flash.display.Sprite;
	
	import core.app.CoreApp;
	import core.app.resources.FactoryResource;
	
	import helloWorld.contexts.HelloWorldContext;
	
	public class HelloWorldExtension extends Sprite
	{
		public function HelloWorldExtension()
		{
			CoreApp.resourceManager.addResource( new FactoryResource( HelloWorldContext, "Hello World" ) );
		}
	}
}

First, let’s take a look at that FactoryResource class. A FactoryResource is an implementation of the Factory pattern, and is responsible for creating instances of a single type of class. The type of this class is passed in its constructor. In this example we are passing it the type of our Context. We are also passing it a string for its 'label' parameter. You can introspect all the contributed resources via the 'Resources' panel - the label parameter is what will appear in here.

All Contributions are done in this way. Rather than contributing an instance of something, we contribute a factory that can create an instance of that something. The reason for this abstraction is important to understand. In this example, the person using the application may not always want our View open - so the application needs to be able to create and delete instances of it on the fly. The same goes for practically every other type of Resource.

We are adding this Factory to a manager on the CoreApp static API. You can access this from any class within your extension. It has a number of managers on it that we will cover over the course of the tutorials. For now, we are only interested in the ResourceManager.

The ResourceManager manages a database of objects, most of which will be Factories. Any code with access to the CoreApp API can query the ResourceManager to get a list of all the resources, or filter them based on type etc. This is how other code can be aware of what contributions are available.

In our example, we are adding a Context that implements the interface IVisualContext. There is some behaviour contributed by one of the CoreEditor_Extensions that is specifically listening in for resources of this type being added to the ResourceManager. When triggered, it adds a menu item to the 'Window' menu that will open your context.

---

Build & Run

• Build your extension.
• Run CoreEditor_AIR
• When the application has loaded, open the 'Window' menu and click on the "Hello World” Context.

---

< Previous | Next >