06 Creating a More Complex Context

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-6

Otherwise, follow the instructions below.

---

Overview

We already have our helloWorld.contexts.HelloWorldContext that exhibits some very basic behaviour, namely outputting some 'Hello World' text into a text area. Now its time to build a brand new Context (and its associated View) that will serve as a test bed to demonstrate some fairly complex behaviour. We will call it 'StringListContext', and it will be responsible for maintaining a list of Strings, and updating its view to display these.

---

Create the View

Create the following class:

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

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

There's nothing really new here. Much like our previous View, it extends the CoreUI component matching the behaviour we want, only this time it’s a List component instead of a TextArea.

---

Create the Context

Create the following class:

package helloWorld.contexts
{
	import flash.display.DisplayObject;
	
	import core.appEx.core.contexts.IVisualContext;
	import core.data.ArrayCollection;
	
	import helloWorld.ui.views.StringListView;
	
	public class StringListContext implements IVisualContext
	{
		private var _view		:StringListView;
		
		private var _dataProvider	:ArrayCollection;
		
		public function StringListContext()
		{
			_view = new StringListView();

			_dataProvider = new ArrayCollection();
			_dataProvider.addItem( "Item 1" );
			_dataProvider.addItem( "Item 2" );
			_dataProvider.addItem( "Item 3" );
			
			_view.dataProvider = _dataProvider;
		}
		
		public function get view():DisplayObject
		{
			return _view;
		}
		
		public function dispose():void
		{
			
		}
		
		public function get dataProvider():ArrayCollection { return _dataProvider; }
	}
}

Much like our previous Context, we see that the Context creates its own View and keeps a reference to it. You'll see we now have a read-only dataProvider property on our Context. This dataProvider is of type ArrayCollection. An ArrayCollection is a class in the CoreApp framework that wraps an Array data type, and provides detailed events when it changes. This ArrayCollection is populated by a few example strings, and is then set as the list's dataProvider.

---

Contributing the Context to the Extension

Add the following code to your extension's constructor:

CoreApp.resourceManager.addResource( new FactoryResource( StringListContext, "String List" ) );

Build and run the application. Then open your new View by selected Window->String List. You should see your new panel displaying three Strings in its list.

---

< Previous | Next >