AppSuite:Writing contact plugin - Revision history

Mark.schmidts: Blanked the page

2013-10-23T15:50:38Z

Blanked the page

← Older revision		Revision as of 15:50, 23 October 2013
Line 1:		Line 1:
	~~[[]]~~

Mark.schmidts at 15:50, 23 October 2013

2013-10-23T15:50:32Z

← Older revision		Revision as of 15:50, 23 October 2013
Line 1:		Line 1:
	[]		[[]]

Mark.schmidts: Replaced content with "[]"

2013-10-23T15:50:24Z

Replaced content with "[]"

← Older revision		Revision as of 15:50, 23 October 2013
Line 1:		Line 1:
	~~== Where and how to start ==~~		[]
	Plugins are collected in the folder ui/apps/plugins. Start your new plugin there: Create a folder and in this folder, create two files: <tt>register.js</tt> (where everything happens) and <tt>manifest.json</tt>


	~~== What are you going to do ==~~
	Your plugin code can interact with the app suite is by way of extension points and extensions. Stated briefly an extension point is an invitation to contributing an implementation to a part of the UI. For example the contact detail view consists of an extension point that receives contributions in the form of renderers, that render different parts of the contact. Say, one for rendering the display name, one for the mail addresses, one for the postal addresses and so on. All these, in turn then, make up the contacts detail view. It is easy for plugins to affect this set of extensions. A plugin can contribute its own extension to an extension point, thereby rendering a different part of a contact or contributing a new button to work on a contact. A plugin can also disable existing extensions, thereby removing parts of the UI.

	~~== Hans-On ==~~
	~~=== Register ===~~
	~~As an example, let's add a new renderer to the contact detail view. Let's create a new file myplugin/apps/com.example/contacts/register.js:~~

	~~<pre class="language-javacript">~~
	~~define('com.example/contacts/register',~~ [~~'io.ox/core/extensions'~~]~~, function (ext) {~~
	~~'use strict';~~

	~~ext.point('io.ox/contacts/detail').extend({~~
	~~id: 'com-example-contact-reversename',~~
	~~after: 'contact-details',~~
	~~draw: function (baton) {~~

	~~var name = baton.data.display_name;~~
	~~var rev = name.split("").reverse().join("");~~

	~~this.append(~~
	~~$("<h1>").text(rev)~~
	~~));~~
	}
	~~});~~
	~~});~~
	~~</pre>~~

	~~=== Manifest ===~~
	Next we have to make sure our code is actually loaded by the UI at the right moment. The right moment in our case is right before it loads the file apps/io.ox/contacts/view-detail, where the extension point is processed. For this, we need another [[AppSuite:UI_manifests_explained \| manifest]] file at myplugin/apps/com.example/contacts/manifest.json:

	~~<pre class="language-javacript">~~
	{
	~~namespace: "io.ox/contacts/view-detail"~~
	}
	~~</pre>~~

	~~After writing your code, always [[AppSuite:GettingStarted#Building \| build]] your javascript code to make apply.~~
	~~See the [[AppSuite:GettingStarted#Development_cycle \| development cycle]] to keep easy steps in mind you need while developing.~~

	~~=== Running a local backend? ===~~

	~~If using a local backend, restart it to pick up on the changed manifest, or, for a remote backend, edit myplugin/src/manifests.js again so it reads:~~

	~~<pre class="language-javacript">~~
	~~define(function () {~~
	~~return [~~
	{
	~~path: "com.example/main",~~
	~~title: 'Hello World App'~~
	},
	{
	~~path: "com.example/contacts/register",~~
	~~namespace: "io.ox/contacts/view-detail"~~
	}
	];
	~~});~~
	~~</pre>~~

	~~reload the UI and navigate to a contact. It should contain the new section with the display name in reverse.~~

	~~== Extension Points ==~~
	~~Trouble [[AppSuite:Extending_the_UI_(Hands-on_introduction)#Trouble_finding_the_right_extension_point.3F \| finding the right extension point]]?~~
	~~Learn more about Extension points regarding [[AppSuite:Extension_points \| these articles]].~~
	~~== Stuck somewhere? ==~~
	~~You got stuck with a problem while developing? OXpedia might help you out with the article about [[AppSuite:Debugging_the_UI \| debugging the UI]].~~

Mark.schmidts at 15:47, 23 October 2013

2013-10-23T15:47:30Z

← Older revision		Revision as of 15:47, 23 October 2013
Line 63:		Line 63:
	reload the UI and navigate to a contact. It should contain the new section with the display name in reverse.		reload the UI and navigate to a contact. It should contain the new section with the display name in reverse.

	=== Extension Points ===		== Extension Points ==
	Trouble [[AppSuite:Extending_the_UI_(Hands-on_introduction)#Trouble_finding_the_right_extension_point.3F \| finding the right extension point]]?		Trouble [[AppSuite:Extending_the_UI_(Hands-on_introduction)#Trouble_finding_the_right_extension_point.3F \| finding the right extension point]]?
	Learn more about Extension points regarding [[AppSuite:Extension_points \| these articles]].		Learn more about Extension points regarding [[AppSuite:Extension_points \| these articles]].
	== Stuck somewhere? ==		== Stuck somewhere? ==
	You got stuck with a problem while developing? OXpedia might help you out with the article about [[AppSuite:Debugging_the_UI \| debugging the UI]].		You got stuck with a problem while developing? OXpedia might help you out with the article about [[AppSuite:Debugging_the_UI \| debugging the UI]].

Mark.schmidts at 15:47, 23 October 2013

2013-10-23T15:47:14Z

@@ Line 41: / Line 41: @@
 After writing your code, always [[AppSuite:GettingStarted#Building | build]] your javascript code to make apply.
 See the [[AppSuite:GettingStarted#Development_cycle | development cycle]] to keep easy steps in mind you need while developing.
 === Extension Points ===

Mark.schmidts at 15:42, 23 October 2013

2013-10-23T15:42:15Z

← Older revision		Revision as of 15:42, 23 October 2013
Line 41:		Line 41:
	After writing your code, always [[AppSuite:GettingStarted#Building \| build]] your javascript code to make apply.		After writing your code, always [[AppSuite:GettingStarted#Building \| build]] your javascript code to make apply.
	See the [[AppSuite:GettingStarted#Development_cycle \| development cycle]] to keep easy steps in mind you need while developing.		See the [[AppSuite:GettingStarted#Development_cycle \| development cycle]] to keep easy steps in mind you need while developing.

			=== Extension Points ===
			Trouble [[AppSuite:Extending_the_UI_(Hands-on_introduction)#Trouble_finding_the_right_extension_point.3F \| finding the right extension point]]?
			Learn more about Extension points regarding [[AppSuite:Extension_points \| these articles]].
			== Stuck somewhere? ==
			You got stuck with a problem while developing? OXpedia might help you out with the article about [[AppSuite:Debugging_the_UI \| debugging the UI]].

Mark.schmidts: Created page with "== Where and how to start == Plugins are collected in the folder ui/apps/plugins. Start your new plugin there: Create a folder and in this folder, create two files: `regist..."`

2013-10-23T15:37:40Z Created page with "== Where and how to start == Plugins are collected in the folder ui/apps/plugins. Start your new plugin there: Create a folder and in this folder, create two files: <tt>regist..." New page == Where and how to start == Plugins are collected in the folder ui/apps/plugins. Start your new plugin there: Create a folder and in this folder, create two files: <tt>register.js</tt> (where everything happens) and <tt>manifest.json</tt> == What are you going to do == Your plugin code can interact with the app suite is by way of extension points and extensions. Stated briefly an extension point is an invitation to contributing an implementation to a part of the UI. For example the contact detail view consists of an extension point that receives contributions in the form of renderers, that render different parts of the contact. Say, one for rendering the display name, one for the mail addresses, one for the postal addresses and so on. All these, in turn then, make up the contacts detail view. It is easy for plugins to affect this set of extensions. A plugin can contribute its own extension to an extension point, thereby rendering a different part of a contact or contributing a new button to work on a contact. A plugin can also disable existing extensions, thereby removing parts of the UI. == Hans-On == === Register === As an example, let's add a new renderer to the contact detail view. Let's create a new file myplugin/apps/com.example/contacts/register.js: <pre class="language-javacript"> define('com.example/contacts/register', ['io.ox/core/extensions'], function (ext) { 'use strict'; ext.point('io.ox/contacts/detail').extend({ id: 'com-example-contact-reversename', after: 'contact-details', draw: function (baton) { var name = baton.data.display_name; var rev = name.split("").reverse().join(""); this.append( $("<h1>").text(rev) )); } }); }); </pre> === Manifest === Next we have to make sure our code is actually loaded by the UI at the right moment. The right moment in our case is right before it loads the file apps/io.ox/contacts/view-detail, where the extension point is processed. For this, we need another [[AppSuite:UI_manifests_explained | manifest]] file at myplugin/apps/com.example/contacts/manifest.json: <pre class="language-javacript"> { namespace: "io.ox/contacts/view-detail" } </pre> After writing your code, always [[AppSuite:GettingStarted#Building | build]] your javascript code to make apply. See the [[AppSuite:GettingStarted#Development_cycle | development cycle]] to keep easy steps in mind you need while developing.

AppSuite:Writing contact plugin - Revision history

Mark.schmidts: Blanked the page

Mark.schmidts at 15:50, 23 October 2013

Mark.schmidts: Replaced content with "[]"

Mark.schmidts at 15:47, 23 October 2013

Mark.schmidts at 15:47, 23 October 2013

Mark.schmidts at 15:42, 23 October 2013

Mark.schmidts: Created page with "== Where and how to start == Plugins are collected in the folder ui/apps/plugins. Start your new plugin there: Create a folder and in this folder, create two files: regist..."

Mark.schmidts: Created page with "== Where and how to start == Plugins are collected in the folder ui/apps/plugins. Start your new plugin there: Create a folder and in this folder, create two files: `regist..."`