AppSuite:Developing for the UI: Difference between revisions
No edit summary |
|||
| Line 1: | Line 1: | ||
<div class="title">UI Development for OX | <div class="title">UI Development for OX AppSuite</div> | ||
__TOC__ | __TOC__ | ||
| Line 6: | Line 6: | ||
=== Tech Overview === | === Tech Overview === | ||
All technologies and frameworks used for developing a new component for the | All technologies and frameworks used for developing a new component for the AppSuite UI are listed and described in the following article: [[AppSuite:UI developer primer| Skills needed to develop the UI]] | ||
Since the | Since the AppSuite product consists of a server and a UI, you also need a working backend (AppSuite application server) to communicate with. | ||
You have 2 options: | You have 2 options: | ||
| Line 15: | Line 15: | ||
* or run [[AppSuite:Appserver | Appserver]] | * or run [[AppSuite:Appserver | Appserver]] | ||
* Use an existing OX | * Use an existing OX AppSuite server and copy the source from openxchange git repositories and (with local parts of the AppSuite) automaticly getting the recent stable source packages from the AppSuite servers. | ||
=== Developing Style Guide === | === Developing Style Guide === | ||
| Line 24: | Line 24: | ||
Always keep in mind, that using OX products should be possible for everyone and therefor it's important to follow simple rules regarding [[AppSuite:Accessibility | accessibility]]. | Always keep in mind, that using OX products should be possible for everyone and therefor it's important to follow simple rules regarding [[AppSuite:Accessibility | accessibility]]. | ||
Writing apps or plugins for | Writing apps or plugins for AppSuite will often include extending the existing user interface. AppSuite provides extension points offering you possibilties to add your own contents. | ||
Beginning to develop using extension points? Read this guide first having [[AppSuite:Extending the UI (Hands-on introduction) | a hands-on introduction]] for extending the OX user interface. Get more information and a complete list of [[AppSuite:Extension points |extension points]] offered by OX products. | Beginning to develop using extension points? Read this guide first having [[AppSuite:Extending the UI (Hands-on introduction) | a hands-on introduction]] for extending the OX user interface. Get more information and a complete list of [[AppSuite:Extension points |extension points]] offered by OX products. | ||
| Line 34: | Line 34: | ||
The following possibilities are available to develop for AppSuite. | The following possibilities are available to develop for AppSuite. | ||
*[[AppSuite:Writing a portal plugin | A portal plugin]] is a widget, which can be used in the 'portal'-section of | *[[AppSuite:Writing a portal plugin | A portal plugin]] is a widget, which can be used in the 'portal'-section of AppSuite only. Please just check for the right [[AppSuite:Extension points |extension point]] to write a plugin which extends and interacts with other parts of AppSuite. Configuring portal plugins can be achieved by reading [[AppSuite:Configuring portal plugins | this guide]] | ||
*[[AppSuite:Using the Upsell widget | Upsell Widget]], to enable the | *[[AppSuite:Using the Upsell widget | Upsell Widget]], to enable the AppSuite user to purchase additional features. | ||
*[[AppSuite:Writing a simple application | A real application/module]] for AppSuite, which should be displayed full screen and appear as a bread crump in the title bar, take a look at the article about [[AppSuite:Writing a simple application | 'Writing a simple application']]. | *[[AppSuite:Writing a simple application | A real application/module]] for AppSuite, which should be displayed full screen and appear as a bread crump in the title bar, take a look at the article about [[AppSuite:Writing a simple application | 'Writing a simple application']]. | ||
*[[AppSuite:Writing a notification area plugin | A notification plugin]] for | *[[AppSuite:Writing a notification area plugin | A notification plugin]] for AppSuite | ||
*[[AppSuite:Writing a wizard | A wizard]], which can be first time users to show them important informations or configure initial settings for 3rd party applications. | *[[AppSuite:Writing a wizard | A wizard]], which can be first time users to show them important informations or configure initial settings for 3rd party applications. | ||
| Line 49: | Line 49: | ||
=== How to get your code running === | === How to get your code running === | ||
Written your first app/plugin? Using the [[ | Written your first app/plugin? Using the [[AppSuite:UI build system | UI build system]] will help you to get fast, easy-to-distribute and correct builds running on your AppSuite. The article will show you how to package your code and copy from OX source code / directories. | ||
Revision as of 12:21, 21 October 2013
This page contains articles about the inner workings of the web-based graphical user interface. It is aimed at software developers that want to improve on existing features, implement extensions or just gain a general understanding.
Tech Overview
All technologies and frameworks used for developing a new component for the AppSuite UI are listed and described in the following article: Skills needed to develop the UI
Since the AppSuite product consists of a server and a UI, you also need a working backend (AppSuite application server) to communicate with.
You have 2 options:
- Checkout and deploy the backend locally using Eclipse IDE. Apache config
- or run Appserver
- Use an existing OX AppSuite server and copy the source from openxchange git repositories and (with local parts of the AppSuite) automaticly getting the recent stable source packages from the AppSuite servers.
Developing Style Guide
While developing code for OX products the UI Developement Style Guide helps you writing safe, clear and functional code.
Designing apps, plugins and widgets running with the right layout, colors, look and feel is a breeze following the guidelines described in the UI Design Guide.
Always keep in mind, that using OX products should be possible for everyone and therefor it's important to follow simple rules regarding accessibility.
Writing apps or plugins for AppSuite will often include extending the existing user interface. AppSuite provides extension points offering you possibilties to add your own contents. Beginning to develop using extension points? Read this guide first having a hands-on introduction for extending the OX user interface. Get more information and a complete list of extension points offered by OX products.
How to get code
Using git as a version version control system getting the code from existing OX products is quite easy. Simply clone the UI or the backend repository and start working with it.
What can i build?
The following possibilities are available to develop for AppSuite.
- A portal plugin is a widget, which can be used in the 'portal'-section of AppSuite only. Please just check for the right extension point to write a plugin which extends and interacts with other parts of AppSuite. Configuring portal plugins can be achieved by reading this guide
- Upsell Widget, to enable the AppSuite user to purchase additional features.
- A real application/module for AppSuite, which should be displayed full screen and appear as a bread crump in the title bar, take a look at the article about 'Writing a simple application'.
- A notification plugin for AppSuite
- A wizard, which can be first time users to show them important informations or configure initial settings for 3rd party applications.
- Settings plugin to provide a UI for storing settings of your application.
You got stuck somewhere? There are some hints, which might help you debugging the UI.
How to get your code running
Written your first app/plugin? Using the UI build system will help you to get fast, easy-to-distribute and correct builds running on your AppSuite. The article will show you how to package your code and copy from OX source code / directories.