Open-Xchange - User contributions [en]

https://wiki.open-xchange.com/wiki/api.php?action=feedcontributions&feedformat=atom&user=John.broomfield Open-Xchange - User contributions [en] 2026-10-06T02:01:59Z User contributions MediaWiki 1.39.7 https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:GettingStarted_7.4.2&diff=16454 AppSuite:GettingStarted 7.4.2 2013-11-14T17:42:42Z

<p>John.broomfield: /* Further Reading */</p> <hr /> <div><div class="title">Getting Started</div><br /> <br /> <div style="float:right; padding: 10px;">[[File:OX_AppSuite_UI_Development_Workflow.png]]</div><br /> <br /> __TOC__<br /> <br /> Hello and welcome to the world of OX App Suite development. This document is designed to get you started with developing your first app for OX App Suite as quickly and simply as possible. However, along the way we will also tempt you to learn more by linking to some more in-depth documentation about the various topics we cover. <br /> <br /> <div style="clear: both"></div><br /> <br /> == Installing the Development Tools ==<br /> <br /> First, you need to install some tools which are necessary for UI development. For now, the simplest way is to download the source of the OX App Suite UI. Since the source code is kept in a [http://git-scm.com/ Git] repository, you will need <tt>git</tt> to download it:<br /> <br /> $ git clone --depth 1 -b release-7.4.1 https://code.open-xchange.com/git/wd/frontend/web<br /> <br /> This downloads the latest version and unpacks it into a subdirectory called <tt>web</tt> in the current directory.<br /> <br /> The option <tt>--depth 1</tt> prevents the download of the entire history, and reduces the download size from hundreds of MB to less than 20MB. The option <tt>-b release-7.4.1</tt> specifies a git branch. The full functionality described in this article is only available in the branch <tt>release-7.4.1</tt> until 7.4.1 is released.<br /> <br /> The tools which you will need are contained in the directory <tt>ui/bin</tt>. To simplify their use, you should add this directory to your <tt>$PATH</tt>:<br /> <br /> $ export PATH="$PATH:$(pwd)/web/ui/bin"<br /> <br /> == Create a Workspace ==<br /> <br /> All your app development can take place inside one working directory. The examples will assume you have created a directory named <tt>myapp</tt> inside your home directory:<br /> <br /> $ mkdir ~/myapp<br /> $ cd ~/myapp<br /> <br /> It doesn't need to be in your home directory, and the actual name should reflect the name of your app. The main point is that all commands will be executed in this directory and all paths will be relative to this directory from now on.<br /> <br /> The source code of your app will reside in the subfolder named <tt>apps</tt>. To avoid name collisions please pick a unique subfolder inside that. The easiest and recommended way is to use a domain name that you own. Typically, the domain elements are reversed, like in Java. <tt>example.com</tt> becomes <tt>com.example</tt>:<br /> <br /> $ mkdir -p apps/com.example<br /> <br /> == Writing an App ==<br /> <br /> As an example, let's create the smallest possible app and test it. It requires only two files: <tt>apps/com.example/register.js</tt> for the source code of the app:<br /> <br /> <pre class="language-javascript"><br /> define('com.example/register', function () {<br /> 'use strict';<br /> alert('Hello, World!');<br /> });<br /> </pre><br /> <br /> and <tt>apps/com.example/manifest.json</tt> for the [[AppSuite:UI_manifests_explained | manifest]] which tells the UI that your app exists and what to do with it:<br /> <br /> <pre class="language-javascript">{ "namespace": "core" }</pre><br /> <br /> == Building an App ==<br /> <br /> The source code of your app can't be used by OX App Suite as it. It first has to be processed by the [[AppSuite:UI_build_system | build system]]. This step will check the source code for syntax errors, compress it, and depending on the structure of your code, many other things. The processed code is then written to a directory named <tt>build</tt> by default. Start the build with this command:<br /> <br /> $ build-appsuite app<br /> <br /> If your editor supports it, you can configure it to call the build system after every file save. Take care to call it from the top directory of your app's workspace, not from the directory of the saved file.<br /> <br /> == Testing an App ==<br /> <br /> The freshly built code can now be tested. Instead of uploading your code to an OX App Suite server, you can use the [[AppSuite:Appserver|appserver]] proxy to inject your code into the UI code of any existing OX App Suite installation. For example, start <tt>appserver</tt> using [http://ox.io/ ox.io] as the server:<br /> <br /> <nowiki>$ appserver --server=https://www.ox.io/appsuite/ build</nowiki><br /> <br /> This command will serve your app from the local directory <tt>build</tt>, and get everything else from the URL specified by the <tt>--server</tt> parameter. To serve multiple apps, you can specify multiple local directories separated by spaces.<br /> <br /> You should start <tt>appserver</tt> in a separate terminal, since it needs to run in the background. To stop <tt>appserver</tt>, press <tt>Ctrl+C</tt> in its terminal.<br /> <br /> Once appserver is running, you can access OX App Suite by opening your browser using this address:<br /> <br /> http://localhost:8337/appsuite<br /> <br /> After logging in, the app should be loaded and display the <tt>alert</tt> message.<br /> <br /> If you later add images or other files, which are not JavaScript, CSS or LessCSS, then you need to [[AppSuite:Appserver#Use_with_Apache | use a web server]] to serve them.<br /> <br /> === Development cycle ===<br /> <br /> Once you are sure that your setup works, you can extend the example and write the actual code for your app. Keep in mind that after [[#Writing | writing your code]], you will always need to [[#Building | build the app]] and have your [[#Hosting the app | Appserver]] running in the background, but don't need to restart it after every build.<br /> <br /> While developing always keep in mind, that there is an [[AppSuite:Debugging_the_UI | article about debugging the user interface]] which helps you avoid and fix typical errors.<br /> <br /> == Packaging ==<br /> <br /> When your app is finished you will probably want to test it on a staging system, and later install it on a production system. To keep track of which installed files belong to which version of which app, you should use the native package manager of the Linux distribution of the target system. The packages can be easily created using the build system.<br /> <br /> === Initialization ===<br /> First, you need to create several files describing how to package you app. Use the <tt>init-packaging</tt> task of the build system:<br /> <br /> $ build-appsuite init-packaging<br /> Node version: v0.10.21<br /> Build path: build<br /> Build version: 0.0.1-1.20131025.133931<br /> Package name: example-app<br /> Version [0.0.1]: <br /> Maintainer (Name <e-mail>): Maintainer <maintainer@example.com><br /> Copyright line [2013 Open-Xchange, Inc]: <br /> <br /> Known licenses for which you don't need to specify a file:<br /> APACHE-2, BSD-2-CLAUSE, BSD-3-CLAUSE, CC-BY-3, CC-BY-NC-3, CC-BY-NC-ND-3,<br /> CC-BY-NC-SA-3, CC-BY-ND-3, CC-BY-SA-3, CC0-1, EXPAT, GPL-2, GPL-3, LGPL-3<br /> <br /> License name [CC-BY-NC-SA-3.0]: BSD-3-Clause<br /> Short description: Example app<br /> <br /> The task presents a number of interactive prompts to get the necessary information about the generated packages. The default values are presented in square brackets ([...]) and can be selected by just pressing Enter. Otherwise, the entered values should follow the Debian Maintainers Guide. Debian tools are especially picky about the syntax of the maintainer name and email address.<br /> <br /> If none of the known licenses suit you, you can enter any other license name. Then you will be asked to enter the file name of your license text. It should be a plain text file using the UTF-8 encoding.<br /> <br /> Some or even all prompts can be skipped by explicitly specifying the information as a build variable. The list of variable names is available in the reference of the <tt>[[AppSuite:UI_build_system#init-packaging|init-packaging]]</tt> task.<br /> <br /> After answering all the questions, you can customize the generated files to account for any additional packaging requirements.<br /> <br /> === Static Files ===<br /> If your app includes images (themes do most of the time), then you should check the generated packaging files for sections marked<br /> <br /> ## Uncomment for multiple packages<br /> #...<br /> <br /> and remove the '#' at the start of each line in each block. This enables the creation of a second package, with a name ending in "<tt>-static</tt>". The images and any other files which are not JavaScript or CSS are served by the Apache web server, instead of the OX App Suite application server. These files are copied to a separate package for the case that the web server is on a dedicated system or maybe even has its own cluster. The default package is installed on the OX application server, and the second, "<tt>-static</tt>" package is installed on the web server.<br /> <br /> === Building Packages ===<br /> Since the actual package format depends on the distribution it is built for, and there are already tools available to create packages from suitably arranged source code archives, the OX App Suite build system merely prepares such source archives. Using the <tt>dist</tt> task to create the archives:<br /> <br /> $ build-appsuite dist<br /> Node version: v0.10.21<br /> Build path: build<br /> Build version: 0.0.1-1.20131025.150034<br /> dpkg-source: info: using source format `3.0 (quilt)'<br /> dpkg-source: info: building example-app using existing ./example-app_0.0.1.orig.tar.bz2<br /> dpkg-source: info: building example-app in example-app_0.0.1-1.debian.tar.bz2<br /> dpkg-source: info: building example-app in example-app_0.0.1-1.dsc<br /> <br /> $ ls tmp/packaging/<br /> example-app-0.0.1 example-app_0.0.1-1.dsc<br /> example-app.spec example-app_0.0.1.orig.tar.bz2<br /> example-app_0.0.1-1.debian.tar.bz2<br /> <br /> The task creates a temporary directory and four files. The archive with the extension <tt>.orig.tar.bz2</tt> contains the source of your app. It is required to build both Debian and RPM packages. The files with extensions <tt>.debian.tar.bz2</tt> and <tt>.dsc</tt> are used together with the <tt>.orig.tar.bz2</tt> archive to build Debian packages. The file with the extension <tt>.spec</tt> is used together with the <tt>.orig.tar.bz2</tt> archive to build RPM packages.<br /> <br /> ==== Building Debian Packages ====<br /> The Debian package can be built directly in the temporary directory created by the <tt>dist</tt> task:<br /> <br /> $ cd tmp/packaging/example-app-0.0.1/<br /> $ dpkg-buildpackage -b<br /> <br /> The package will be placed in <tt>tmp/packaging/</tt>.<br /> <br /> ==== Building RPM Packages ====<br /> The RPM package build tool <tt>rpmbuild</tt> requires the files to be in a specific directory layout before building:<br /> <br /> $ mkdir -p ~/rpmbuild/{SOURCES,SPECS,BUILD,RPMS}<br /> $ cp tmp/packaging/*.orig.tar.bz2 ~/rpmbuild/SOURCES/<br /> $ cp tmp/packaging/*.spec ~/rpmbuild/SPECS/<br /> $ rpmbuild --define "_topdir $HOME/rpmbuild" -bb ~/rpmbuild/SPECS/*.spec<br /> <br /> The package will be placed in <tt>~/rpmbuild/RPMS/noarch/</tt>.<br /> <br /> The parameter <tt>--define "_topdir $HOME/rpmbuild"</tt> can also be specified in the file <tt>~/.rpmmacros</tt> or, on some distributions, is even unnecessary.<br /> <br /> == Further Reading ==<br /> * Congratulations you have just built your first app for OX App Suite, but please keep in mind that there are [[AppSuite:Developing for the UI#What_can_i_build.3F | quite a few options]] for developing for OX App Suite.<br /> * It's highly recommended that you read and understand all the benefits [[AppSuite:UI_build_system | the UI build system]] and [[AppSuite:Appserver|the Appserver]] provide you for OX App Suite development.<br /> * If you're stuck somewhere, the article about [[AppSuite:Debugging_the_UI | debugging the UI]] might help you.<br /> * You can read this to get a better overview of [[AppSuite:Developing for the UI | developing the user inferface]].</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:GettingStarted_7.4.2&diff=16453 AppSuite:GettingStarted 7.4.2 2013-11-14T17:42:13Z

<p>John.broomfield: /* Further Reading */</p> <hr /> <div><div class="title">Getting Started</div><br /> <br /> <div style="float:right; padding: 10px;">[[File:OX_AppSuite_UI_Development_Workflow.png]]</div><br /> <br /> __TOC__<br /> <br /> Hello and welcome to the world of OX App Suite development. This document is designed to get you started with developing your first app for OX App Suite as quickly and simply as possible. However, along the way we will also tempt you to learn more by linking to some more in-depth documentation about the various topics we cover. <br /> <br /> <div style="clear: both"></div><br /> <br /> == Installing the Development Tools ==<br /> <br /> First, you need to install some tools which are necessary for UI development. For now, the simplest way is to download the source of the OX App Suite UI. Since the source code is kept in a [http://git-scm.com/ Git] repository, you will need <tt>git</tt> to download it:<br /> <br /> $ git clone --depth 1 -b release-7.4.1 https://code.open-xchange.com/git/wd/frontend/web<br /> <br /> This downloads the latest version and unpacks it into a subdirectory called <tt>web</tt> in the current directory.<br /> <br /> The option <tt>--depth 1</tt> prevents the download of the entire history, and reduces the download size from hundreds of MB to less than 20MB. The option <tt>-b release-7.4.1</tt> specifies a git branch. The full functionality described in this article is only available in the branch <tt>release-7.4.1</tt> until 7.4.1 is released.<br /> <br /> The tools which you will need are contained in the directory <tt>ui/bin</tt>. To simplify their use, you should add this directory to your <tt>$PATH</tt>:<br /> <br /> $ export PATH="$PATH:$(pwd)/web/ui/bin"<br /> <br /> == Create a Workspace ==<br /> <br /> All your app development can take place inside one working directory. The examples will assume you have created a directory named <tt>myapp</tt> inside your home directory:<br /> <br /> $ mkdir ~/myapp<br /> $ cd ~/myapp<br /> <br /> It doesn't need to be in your home directory, and the actual name should reflect the name of your app. The main point is that all commands will be executed in this directory and all paths will be relative to this directory from now on.<br /> <br /> The source code of your app will reside in the subfolder named <tt>apps</tt>. To avoid name collisions please pick a unique subfolder inside that. The easiest and recommended way is to use a domain name that you own. Typically, the domain elements are reversed, like in Java. <tt>example.com</tt> becomes <tt>com.example</tt>:<br /> <br /> $ mkdir -p apps/com.example<br /> <br /> == Writing an App ==<br /> <br /> As an example, let's create the smallest possible app and test it. It requires only two files: <tt>apps/com.example/register.js</tt> for the source code of the app:<br /> <br /> <pre class="language-javascript"><br /> define('com.example/register', function () {<br /> 'use strict';<br /> alert('Hello, World!');<br /> });<br /> </pre><br /> <br /> and <tt>apps/com.example/manifest.json</tt> for the [[AppSuite:UI_manifests_explained | manifest]] which tells the UI that your app exists and what to do with it:<br /> <br /> <pre class="language-javascript">{ "namespace": "core" }</pre><br /> <br /> == Building an App ==<br /> <br /> The source code of your app can't be used by OX App Suite as it. It first has to be processed by the [[AppSuite:UI_build_system | build system]]. This step will check the source code for syntax errors, compress it, and depending on the structure of your code, many other things. The processed code is then written to a directory named <tt>build</tt> by default. Start the build with this command:<br /> <br /> $ build-appsuite app<br /> <br /> If your editor supports it, you can configure it to call the build system after every file save. Take care to call it from the top directory of your app's workspace, not from the directory of the saved file.<br /> <br /> == Testing an App ==<br /> <br /> The freshly built code can now be tested. Instead of uploading your code to an OX App Suite server, you can use the [[AppSuite:Appserver|appserver]] proxy to inject your code into the UI code of any existing OX App Suite installation. For example, start <tt>appserver</tt> using [http://ox.io/ ox.io] as the server:<br /> <br /> <nowiki>$ appserver --server=https://www.ox.io/appsuite/ build</nowiki><br /> <br /> This command will serve your app from the local directory <tt>build</tt>, and get everything else from the URL specified by the <tt>--server</tt> parameter. To serve multiple apps, you can specify multiple local directories separated by spaces.<br /> <br /> You should start <tt>appserver</tt> in a separate terminal, since it needs to run in the background. To stop <tt>appserver</tt>, press <tt>Ctrl+C</tt> in its terminal.<br /> <br /> Once appserver is running, you can access OX App Suite by opening your browser using this address:<br /> <br /> http://localhost:8337/appsuite<br /> <br /> After logging in, the app should be loaded and display the <tt>alert</tt> message.<br /> <br /> If you later add images or other files, which are not JavaScript, CSS or LessCSS, then you need to [[AppSuite:Appserver#Use_with_Apache | use a web server]] to serve them.<br /> <br /> === Development cycle ===<br /> <br /> Once you are sure that your setup works, you can extend the example and write the actual code for your app. Keep in mind that after [[#Writing | writing your code]], you will always need to [[#Building | build the app]] and have your [[#Hosting the app | Appserver]] running in the background, but don't need to restart it after every build.<br /> <br /> While developing always keep in mind, that there is an [[AppSuite:Debugging_the_UI | article about debugging the user interface]] which helps you avoid and fix typical errors.<br /> <br /> == Packaging ==<br /> <br /> When your app is finished you will probably want to test it on a staging system, and later install it on a production system. To keep track of which installed files belong to which version of which app, you should use the native package manager of the Linux distribution of the target system. The packages can be easily created using the build system.<br /> <br /> === Initialization ===<br /> First, you need to create several files describing how to package you app. Use the <tt>init-packaging</tt> task of the build system:<br /> <br /> $ build-appsuite init-packaging<br /> Node version: v0.10.21<br /> Build path: build<br /> Build version: 0.0.1-1.20131025.133931<br /> Package name: example-app<br /> Version [0.0.1]: <br /> Maintainer (Name <e-mail>): Maintainer <maintainer@example.com><br /> Copyright line [2013 Open-Xchange, Inc]: <br /> <br /> Known licenses for which you don't need to specify a file:<br /> APACHE-2, BSD-2-CLAUSE, BSD-3-CLAUSE, CC-BY-3, CC-BY-NC-3, CC-BY-NC-ND-3,<br /> CC-BY-NC-SA-3, CC-BY-ND-3, CC-BY-SA-3, CC0-1, EXPAT, GPL-2, GPL-3, LGPL-3<br /> <br /> License name [CC-BY-NC-SA-3.0]: BSD-3-Clause<br /> Short description: Example app<br /> <br /> The task presents a number of interactive prompts to get the necessary information about the generated packages. The default values are presented in square brackets ([...]) and can be selected by just pressing Enter. Otherwise, the entered values should follow the Debian Maintainers Guide. Debian tools are especially picky about the syntax of the maintainer name and email address.<br /> <br /> If none of the known licenses suit you, you can enter any other license name. Then you will be asked to enter the file name of your license text. It should be a plain text file using the UTF-8 encoding.<br /> <br /> Some or even all prompts can be skipped by explicitly specifying the information as a build variable. The list of variable names is available in the reference of the <tt>[[AppSuite:UI_build_system#init-packaging|init-packaging]]</tt> task.<br /> <br /> After answering all the questions, you can customize the generated files to account for any additional packaging requirements.<br /> <br /> === Static Files ===<br /> If your app includes images (themes do most of the time), then you should check the generated packaging files for sections marked<br /> <br /> ## Uncomment for multiple packages<br /> #...<br /> <br /> and remove the '#' at the start of each line in each block. This enables the creation of a second package, with a name ending in "<tt>-static</tt>". The images and any other files which are not JavaScript or CSS are served by the Apache web server, instead of the OX App Suite application server. These files are copied to a separate package for the case that the web server is on a dedicated system or maybe even has its own cluster. The default package is installed on the OX application server, and the second, "<tt>-static</tt>" package is installed on the web server.<br /> <br /> === Building Packages ===<br /> Since the actual package format depends on the distribution it is built for, and there are already tools available to create packages from suitably arranged source code archives, the OX App Suite build system merely prepares such source archives. Using the <tt>dist</tt> task to create the archives:<br /> <br /> $ build-appsuite dist<br /> Node version: v0.10.21<br /> Build path: build<br /> Build version: 0.0.1-1.20131025.150034<br /> dpkg-source: info: using source format `3.0 (quilt)'<br /> dpkg-source: info: building example-app using existing ./example-app_0.0.1.orig.tar.bz2<br /> dpkg-source: info: building example-app in example-app_0.0.1-1.debian.tar.bz2<br /> dpkg-source: info: building example-app in example-app_0.0.1-1.dsc<br /> <br /> $ ls tmp/packaging/<br /> example-app-0.0.1 example-app_0.0.1-1.dsc<br /> example-app.spec example-app_0.0.1.orig.tar.bz2<br /> example-app_0.0.1-1.debian.tar.bz2<br /> <br /> The task creates a temporary directory and four files. The archive with the extension <tt>.orig.tar.bz2</tt> contains the source of your app. It is required to build both Debian and RPM packages. The files with extensions <tt>.debian.tar.bz2</tt> and <tt>.dsc</tt> are used together with the <tt>.orig.tar.bz2</tt> archive to build Debian packages. The file with the extension <tt>.spec</tt> is used together with the <tt>.orig.tar.bz2</tt> archive to build RPM packages.<br /> <br /> ==== Building Debian Packages ====<br /> The Debian package can be built directly in the temporary directory created by the <tt>dist</tt> task:<br /> <br /> $ cd tmp/packaging/example-app-0.0.1/<br /> $ dpkg-buildpackage -b<br /> <br /> The package will be placed in <tt>tmp/packaging/</tt>.<br /> <br /> ==== Building RPM Packages ====<br /> The RPM package build tool <tt>rpmbuild</tt> requires the files to be in a specific directory layout before building:<br /> <br /> $ mkdir -p ~/rpmbuild/{SOURCES,SPECS,BUILD,RPMS}<br /> $ cp tmp/packaging/*.orig.tar.bz2 ~/rpmbuild/SOURCES/<br /> $ cp tmp/packaging/*.spec ~/rpmbuild/SPECS/<br /> $ rpmbuild --define "_topdir $HOME/rpmbuild" -bb ~/rpmbuild/SPECS/*.spec<br /> <br /> The package will be placed in <tt>~/rpmbuild/RPMS/noarch/</tt>.<br /> <br /> The parameter <tt>--define "_topdir $HOME/rpmbuild"</tt> can also be specified in the file <tt>~/.rpmmacros</tt> or, on some distributions, is even unnecessary.<br /> <br /> == Further Reading ==<br /> * Congratulations you have just built your first app for OX App Suite, but please keep in mind that there are [[AppSuite:Developing for the UI#What_can_i_build.3F | quite a few options]] for developing for OX App Suite.<br /> * It's highly recommended that you read and understand all the benefits [[AppSuite:UI_build_system | the UI build system]] and [[AppSuite:Appserver|the Appserver]] provide you for OX App Suite development.<br /> * If you're stuck somewhere, the article about [[AppSuite:Debugging_the_UI | debugging the UI]] might help you.<br /> * You can read this to get a better overview [[AppSuite:Developing for the UI | developing the user inferface]].</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:GettingStarted_7.4.2&diff=16452 AppSuite:GettingStarted 7.4.2 2013-11-14T17:41:14Z

<p>John.broomfield: /* Further Reading */</p> <hr /> <div><div class="title">Getting Started</div><br /> <br /> <div style="float:right; padding: 10px;">[[File:OX_AppSuite_UI_Development_Workflow.png]]</div><br /> <br /> __TOC__<br /> <br /> Hello and welcome to the world of OX App Suite development. This document is designed to get you started with developing your first app for OX App Suite as quickly and simply as possible. However, along the way we will also tempt you to learn more by linking to some more in-depth documentation about the various topics we cover. <br /> <br /> <div style="clear: both"></div><br /> <br /> == Installing the Development Tools ==<br /> <br /> First, you need to install some tools which are necessary for UI development. For now, the simplest way is to download the source of the OX App Suite UI. Since the source code is kept in a [http://git-scm.com/ Git] repository, you will need <tt>git</tt> to download it:<br /> <br /> $ git clone --depth 1 -b release-7.4.1 https://code.open-xchange.com/git/wd/frontend/web<br /> <br /> This downloads the latest version and unpacks it into a subdirectory called <tt>web</tt> in the current directory.<br /> <br /> The option <tt>--depth 1</tt> prevents the download of the entire history, and reduces the download size from hundreds of MB to less than 20MB. The option <tt>-b release-7.4.1</tt> specifies a git branch. The full functionality described in this article is only available in the branch <tt>release-7.4.1</tt> until 7.4.1 is released.<br /> <br /> The tools which you will need are contained in the directory <tt>ui/bin</tt>. To simplify their use, you should add this directory to your <tt>$PATH</tt>:<br /> <br /> $ export PATH="$PATH:$(pwd)/web/ui/bin"<br /> <br /> == Create a Workspace ==<br /> <br /> All your app development can take place inside one working directory. The examples will assume you have created a directory named <tt>myapp</tt> inside your home directory:<br /> <br /> $ mkdir ~/myapp<br /> $ cd ~/myapp<br /> <br /> It doesn't need to be in your home directory, and the actual name should reflect the name of your app. The main point is that all commands will be executed in this directory and all paths will be relative to this directory from now on.<br /> <br /> The source code of your app will reside in the subfolder named <tt>apps</tt>. To avoid name collisions please pick a unique subfolder inside that. The easiest and recommended way is to use a domain name that you own. Typically, the domain elements are reversed, like in Java. <tt>example.com</tt> becomes <tt>com.example</tt>:<br /> <br /> $ mkdir -p apps/com.example<br /> <br /> == Writing an App ==<br /> <br /> As an example, let's create the smallest possible app and test it. It requires only two files: <tt>apps/com.example/register.js</tt> for the source code of the app:<br /> <br /> <pre class="language-javascript"><br /> define('com.example/register', function () {<br /> 'use strict';<br /> alert('Hello, World!');<br /> });<br /> </pre><br /> <br /> and <tt>apps/com.example/manifest.json</tt> for the [[AppSuite:UI_manifests_explained | manifest]] which tells the UI that your app exists and what to do with it:<br /> <br /> <pre class="language-javascript">{ "namespace": "core" }</pre><br /> <br /> == Building an App ==<br /> <br /> The source code of your app can't be used by OX App Suite as it. It first has to be processed by the [[AppSuite:UI_build_system | build system]]. This step will check the source code for syntax errors, compress it, and depending on the structure of your code, many other things. The processed code is then written to a directory named <tt>build</tt> by default. Start the build with this command:<br /> <br /> $ build-appsuite app<br /> <br /> If your editor supports it, you can configure it to call the build system after every file save. Take care to call it from the top directory of your app's workspace, not from the directory of the saved file.<br /> <br /> == Testing an App ==<br /> <br /> The freshly built code can now be tested. Instead of uploading your code to an OX App Suite server, you can use the [[AppSuite:Appserver|appserver]] proxy to inject your code into the UI code of any existing OX App Suite installation. For example, start <tt>appserver</tt> using [http://ox.io/ ox.io] as the server:<br /> <br /> <nowiki>$ appserver --server=https://www.ox.io/appsuite/ build</nowiki><br /> <br /> This command will serve your app from the local directory <tt>build</tt>, and get everything else from the URL specified by the <tt>--server</tt> parameter. To serve multiple apps, you can specify multiple local directories separated by spaces.<br /> <br /> You should start <tt>appserver</tt> in a separate terminal, since it needs to run in the background. To stop <tt>appserver</tt>, press <tt>Ctrl+C</tt> in its terminal.<br /> <br /> Once appserver is running, you can access OX App Suite by opening your browser using this address:<br /> <br /> http://localhost:8337/appsuite<br /> <br /> After logging in, the app should be loaded and display the <tt>alert</tt> message.<br /> <br /> If you later add images or other files, which are not JavaScript, CSS or LessCSS, then you need to [[AppSuite:Appserver#Use_with_Apache | use a web server]] to serve them.<br /> <br /> === Development cycle ===<br /> <br /> Once you are sure that your setup works, you can extend the example and write the actual code for your app. Keep in mind that after [[#Writing | writing your code]], you will always need to [[#Building | build the app]] and have your [[#Hosting the app | Appserver]] running in the background, but don't need to restart it after every build.<br /> <br /> While developing always keep in mind, that there is an [[AppSuite:Debugging_the_UI | article about debugging the user interface]] which helps you avoid and fix typical errors.<br /> <br /> == Packaging ==<br /> <br /> When your app is finished you will probably want to test it on a staging system, and later install it on a production system. To keep track of which installed files belong to which version of which app, you should use the native package manager of the Linux distribution of the target system. The packages can be easily created using the build system.<br /> <br /> === Initialization ===<br /> First, you need to create several files describing how to package you app. Use the <tt>init-packaging</tt> task of the build system:<br /> <br /> $ build-appsuite init-packaging<br /> Node version: v0.10.21<br /> Build path: build<br /> Build version: 0.0.1-1.20131025.133931<br /> Package name: example-app<br /> Version [0.0.1]: <br /> Maintainer (Name <e-mail>): Maintainer <maintainer@example.com><br /> Copyright line [2013 Open-Xchange, Inc]: <br /> <br /> Known licenses for which you don't need to specify a file:<br /> APACHE-2, BSD-2-CLAUSE, BSD-3-CLAUSE, CC-BY-3, CC-BY-NC-3, CC-BY-NC-ND-3,<br /> CC-BY-NC-SA-3, CC-BY-ND-3, CC-BY-SA-3, CC0-1, EXPAT, GPL-2, GPL-3, LGPL-3<br /> <br /> License name [CC-BY-NC-SA-3.0]: BSD-3-Clause<br /> Short description: Example app<br /> <br /> The task presents a number of interactive prompts to get the necessary information about the generated packages. The default values are presented in square brackets ([...]) and can be selected by just pressing Enter. Otherwise, the entered values should follow the Debian Maintainers Guide. Debian tools are especially picky about the syntax of the maintainer name and email address.<br /> <br /> If none of the known licenses suit you, you can enter any other license name. Then you will be asked to enter the file name of your license text. It should be a plain text file using the UTF-8 encoding.<br /> <br /> Some or even all prompts can be skipped by explicitly specifying the information as a build variable. The list of variable names is available in the reference of the <tt>[[AppSuite:UI_build_system#init-packaging|init-packaging]]</tt> task.<br /> <br /> After answering all the questions, you can customize the generated files to account for any additional packaging requirements.<br /> <br /> === Static Files ===<br /> If your app includes images (themes do most of the time), then you should check the generated packaging files for sections marked<br /> <br /> ## Uncomment for multiple packages<br /> #...<br /> <br /> and remove the '#' at the start of each line in each block. This enables the creation of a second package, with a name ending in "<tt>-static</tt>". The images and any other files which are not JavaScript or CSS are served by the Apache web server, instead of the OX App Suite application server. These files are copied to a separate package for the case that the web server is on a dedicated system or maybe even has its own cluster. The default package is installed on the OX application server, and the second, "<tt>-static</tt>" package is installed on the web server.<br /> <br /> === Building Packages ===<br /> Since the actual package format depends on the distribution it is built for, and there are already tools available to create packages from suitably arranged source code archives, the OX App Suite build system merely prepares such source archives. Using the <tt>dist</tt> task to create the archives:<br /> <br /> $ build-appsuite dist<br /> Node version: v0.10.21<br /> Build path: build<br /> Build version: 0.0.1-1.20131025.150034<br /> dpkg-source: info: using source format `3.0 (quilt)'<br /> dpkg-source: info: building example-app using existing ./example-app_0.0.1.orig.tar.bz2<br /> dpkg-source: info: building example-app in example-app_0.0.1-1.debian.tar.bz2<br /> dpkg-source: info: building example-app in example-app_0.0.1-1.dsc<br /> <br /> $ ls tmp/packaging/<br /> example-app-0.0.1 example-app_0.0.1-1.dsc<br /> example-app.spec example-app_0.0.1.orig.tar.bz2<br /> example-app_0.0.1-1.debian.tar.bz2<br /> <br /> The task creates a temporary directory and four files. The archive with the extension <tt>.orig.tar.bz2</tt> contains the source of your app. It is required to build both Debian and RPM packages. The files with extensions <tt>.debian.tar.bz2</tt> and <tt>.dsc</tt> are used together with the <tt>.orig.tar.bz2</tt> archive to build Debian packages. The file with the extension <tt>.spec</tt> is used together with the <tt>.orig.tar.bz2</tt> archive to build RPM packages.<br /> <br /> ==== Building Debian Packages ====<br /> The Debian package can be built directly in the temporary directory created by the <tt>dist</tt> task:<br /> <br /> $ cd tmp/packaging/example-app-0.0.1/<br /> $ dpkg-buildpackage -b<br /> <br /> The package will be placed in <tt>tmp/packaging/</tt>.<br /> <br /> ==== Building RPM Packages ====<br /> The RPM package build tool <tt>rpmbuild</tt> requires the files to be in a specific directory layout before building:<br /> <br /> $ mkdir -p ~/rpmbuild/{SOURCES,SPECS,BUILD,RPMS}<br /> $ cp tmp/packaging/*.orig.tar.bz2 ~/rpmbuild/SOURCES/<br /> $ cp tmp/packaging/*.spec ~/rpmbuild/SPECS/<br /> $ rpmbuild --define "_topdir $HOME/rpmbuild" -bb ~/rpmbuild/SPECS/*.spec<br /> <br /> The package will be placed in <tt>~/rpmbuild/RPMS/noarch/</tt>.<br /> <br /> The parameter <tt>--define "_topdir $HOME/rpmbuild"</tt> can also be specified in the file <tt>~/.rpmmacros</tt> or, on some distributions, is even unnecessary.<br /> <br /> == Further Reading ==<br /> * Congratulations you have just built your first app for OX App Suite, but please keep in mind that there are [[AppSuite:Developing for the UI#What_can_i_build.3F | quite a few options]] for developing for OX App Suite.<br /> * It's highly recommended that you read and understand all the benefits [[AppSuite:UI_build_system | the UI build system]] and [[AppSuite:Appserver|the Appserver]] provide you for OX App Suite development.<br /> * If you're stuck somewhere, the article about [[AppSuite:Debugging_the_UI | debugging the UI]] might help you.<br /> * To get a better overview about [[AppSuite:Developing for the UI | developing the user inferface]].</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:GettingStarted_7.4.2&diff=16451 AppSuite:GettingStarted 7.4.2 2013-11-14T17:39:08Z

<p>John.broomfield: /* Further Reading */</p> <hr /> <div><div class="title">Getting Started</div><br /> <br /> <div style="float:right; padding: 10px;">[[File:OX_AppSuite_UI_Development_Workflow.png]]</div><br /> <br /> __TOC__<br /> <br /> Hello and welcome to the world of OX App Suite development. This document is designed to get you started with developing your first app for OX App Suite as quickly and simply as possible. However, along the way we will also tempt you to learn more by linking to some more in-depth documentation about the various topics we cover. <br /> <br /> <div style="clear: both"></div><br /> <br /> == Installing the Development Tools ==<br /> <br /> First, you need to install some tools which are necessary for UI development. For now, the simplest way is to download the source of the OX App Suite UI. Since the source code is kept in a [http://git-scm.com/ Git] repository, you will need <tt>git</tt> to download it:<br /> <br /> $ git clone --depth 1 -b release-7.4.1 https://code.open-xchange.com/git/wd/frontend/web<br /> <br /> This downloads the latest version and unpacks it into a subdirectory called <tt>web</tt> in the current directory.<br /> <br /> The option <tt>--depth 1</tt> prevents the download of the entire history, and reduces the download size from hundreds of MB to less than 20MB. The option <tt>-b release-7.4.1</tt> specifies a git branch. The full functionality described in this article is only available in the branch <tt>release-7.4.1</tt> until 7.4.1 is released.<br /> <br /> The tools which you will need are contained in the directory <tt>ui/bin</tt>. To simplify their use, you should add this directory to your <tt>$PATH</tt>:<br /> <br /> $ export PATH="$PATH:$(pwd)/web/ui/bin"<br /> <br /> == Create a Workspace ==<br /> <br /> All your app development can take place inside one working directory. The examples will assume you have created a directory named <tt>myapp</tt> inside your home directory:<br /> <br /> $ mkdir ~/myapp<br /> $ cd ~/myapp<br /> <br /> It doesn't need to be in your home directory, and the actual name should reflect the name of your app. The main point is that all commands will be executed in this directory and all paths will be relative to this directory from now on.<br /> <br /> The source code of your app will reside in the subfolder named <tt>apps</tt>. To avoid name collisions please pick a unique subfolder inside that. The easiest and recommended way is to use a domain name that you own. Typically, the domain elements are reversed, like in Java. <tt>example.com</tt> becomes <tt>com.example</tt>:<br /> <br /> $ mkdir -p apps/com.example<br /> <br /> == Writing an App ==<br /> <br /> As an example, let's create the smallest possible app and test it. It requires only two files: <tt>apps/com.example/register.js</tt> for the source code of the app:<br /> <br /> <pre class="language-javascript"><br /> define('com.example/register', function () {<br /> 'use strict';<br /> alert('Hello, World!');<br /> });<br /> </pre><br /> <br /> and <tt>apps/com.example/manifest.json</tt> for the [[AppSuite:UI_manifests_explained | manifest]] which tells the UI that your app exists and what to do with it:<br /> <br /> <pre class="language-javascript">{ "namespace": "core" }</pre><br /> <br /> == Building an App ==<br /> <br /> The source code of your app can't be used by OX App Suite as it. It first has to be processed by the [[AppSuite:UI_build_system | build system]]. This step will check the source code for syntax errors, compress it, and depending on the structure of your code, many other things. The processed code is then written to a directory named <tt>build</tt> by default. Start the build with this command:<br /> <br /> $ build-appsuite app<br /> <br /> If your editor supports it, you can configure it to call the build system after every file save. Take care to call it from the top directory of your app's workspace, not from the directory of the saved file.<br /> <br /> == Testing an App ==<br /> <br /> The freshly built code can now be tested. Instead of uploading your code to an OX App Suite server, you can use the [[AppSuite:Appserver|appserver]] proxy to inject your code into the UI code of any existing OX App Suite installation. For example, start <tt>appserver</tt> using [http://ox.io/ ox.io] as the server:<br /> <br /> <nowiki>$ appserver --server=https://www.ox.io/appsuite/ build</nowiki><br /> <br /> This command will serve your app from the local directory <tt>build</tt>, and get everything else from the URL specified by the <tt>--server</tt> parameter. To serve multiple apps, you can specify multiple local directories separated by spaces.<br /> <br /> You should start <tt>appserver</tt> in a separate terminal, since it needs to run in the background. To stop <tt>appserver</tt>, press <tt>Ctrl+C</tt> in its terminal.<br /> <br /> Once appserver is running, you can access OX App Suite by opening your browser using this address:<br /> <br /> http://localhost:8337/appsuite<br /> <br /> After logging in, the app should be loaded and display the <tt>alert</tt> message.<br /> <br /> If you later add images or other files, which are not JavaScript, CSS or LessCSS, then you need to [[AppSuite:Appserver#Use_with_Apache | use a web server]] to serve them.<br /> <br /> === Development cycle ===<br /> <br /> Once you are sure that your setup works, you can extend the example and write the actual code for your app. Keep in mind that after [[#Writing | writing your code]], you will always need to [[#Building | build the app]] and have your [[#Hosting the app | Appserver]] running in the background, but don't need to restart it after every build.<br /> <br /> While developing always keep in mind, that there is an [[AppSuite:Debugging_the_UI | article about debugging the user interface]] which helps you avoid and fix typical errors.<br /> <br /> == Packaging ==<br /> <br /> When your app is finished you will probably want to test it on a staging system, and later install it on a production system. To keep track of which installed files belong to which version of which app, you should use the native package manager of the Linux distribution of the target system. The packages can be easily created using the build system.<br /> <br /> === Initialization ===<br /> First, you need to create several files describing how to package you app. Use the <tt>init-packaging</tt> task of the build system:<br /> <br /> $ build-appsuite init-packaging<br /> Node version: v0.10.21<br /> Build path: build<br /> Build version: 0.0.1-1.20131025.133931<br /> Package name: example-app<br /> Version [0.0.1]: <br /> Maintainer (Name <e-mail>): Maintainer <maintainer@example.com><br /> Copyright line [2013 Open-Xchange, Inc]: <br /> <br /> Known licenses for which you don't need to specify a file:<br /> APACHE-2, BSD-2-CLAUSE, BSD-3-CLAUSE, CC-BY-3, CC-BY-NC-3, CC-BY-NC-ND-3,<br /> CC-BY-NC-SA-3, CC-BY-ND-3, CC-BY-SA-3, CC0-1, EXPAT, GPL-2, GPL-3, LGPL-3<br /> <br /> License name [CC-BY-NC-SA-3.0]: BSD-3-Clause<br /> Short description: Example app<br /> <br /> The task presents a number of interactive prompts to get the necessary information about the generated packages. The default values are presented in square brackets ([...]) and can be selected by just pressing Enter. Otherwise, the entered values should follow the Debian Maintainers Guide. Debian tools are especially picky about the syntax of the maintainer name and email address.<br /> <br /> If none of the known licenses suit you, you can enter any other license name. Then you will be asked to enter the file name of your license text. It should be a plain text file using the UTF-8 encoding.<br /> <br /> Some or even all prompts can be skipped by explicitly specifying the information as a build variable. The list of variable names is available in the reference of the <tt>[[AppSuite:UI_build_system#init-packaging|init-packaging]]</tt> task.<br /> <br /> After answering all the questions, you can customize the generated files to account for any additional packaging requirements.<br /> <br /> === Static Files ===<br /> If your app includes images (themes do most of the time), then you should check the generated packaging files for sections marked<br /> <br /> ## Uncomment for multiple packages<br /> #...<br /> <br /> and remove the '#' at the start of each line in each block. This enables the creation of a second package, with a name ending in "<tt>-static</tt>". The images and any other files which are not JavaScript or CSS are served by the Apache web server, instead of the OX App Suite application server. These files are copied to a separate package for the case that the web server is on a dedicated system or maybe even has its own cluster. The default package is installed on the OX application server, and the second, "<tt>-static</tt>" package is installed on the web server.<br /> <br /> === Building Packages ===<br /> Since the actual package format depends on the distribution it is built for, and there are already tools available to create packages from suitably arranged source code archives, the OX App Suite build system merely prepares such source archives. Using the <tt>dist</tt> task to create the archives:<br /> <br /> $ build-appsuite dist<br /> Node version: v0.10.21<br /> Build path: build<br /> Build version: 0.0.1-1.20131025.150034<br /> dpkg-source: info: using source format `3.0 (quilt)'<br /> dpkg-source: info: building example-app using existing ./example-app_0.0.1.orig.tar.bz2<br /> dpkg-source: info: building example-app in example-app_0.0.1-1.debian.tar.bz2<br /> dpkg-source: info: building example-app in example-app_0.0.1-1.dsc<br /> <br /> $ ls tmp/packaging/<br /> example-app-0.0.1 example-app_0.0.1-1.dsc<br /> example-app.spec example-app_0.0.1.orig.tar.bz2<br /> example-app_0.0.1-1.debian.tar.bz2<br /> <br /> The task creates a temporary directory and four files. The archive with the extension <tt>.orig.tar.bz2</tt> contains the source of your app. It is required to build both Debian and RPM packages. The files with extensions <tt>.debian.tar.bz2</tt> and <tt>.dsc</tt> are used together with the <tt>.orig.tar.bz2</tt> archive to build Debian packages. The file with the extension <tt>.spec</tt> is used together with the <tt>.orig.tar.bz2</tt> archive to build RPM packages.<br /> <br /> ==== Building Debian Packages ====<br /> The Debian package can be built directly in the temporary directory created by the <tt>dist</tt> task:<br /> <br /> $ cd tmp/packaging/example-app-0.0.1/<br /> $ dpkg-buildpackage -b<br /> <br /> The package will be placed in <tt>tmp/packaging/</tt>.<br /> <br /> ==== Building RPM Packages ====<br /> The RPM package build tool <tt>rpmbuild</tt> requires the files to be in a specific directory layout before building:<br /> <br /> $ mkdir -p ~/rpmbuild/{SOURCES,SPECS,BUILD,RPMS}<br /> $ cp tmp/packaging/*.orig.tar.bz2 ~/rpmbuild/SOURCES/<br /> $ cp tmp/packaging/*.spec ~/rpmbuild/SPECS/<br /> $ rpmbuild --define "_topdir $HOME/rpmbuild" -bb ~/rpmbuild/SPECS/*.spec<br /> <br /> The package will be placed in <tt>~/rpmbuild/RPMS/noarch/</tt>.<br /> <br /> The parameter <tt>--define "_topdir $HOME/rpmbuild"</tt> can also be specified in the file <tt>~/.rpmmacros</tt> or, on some distributions, is even unnecessary.<br /> <br /> == Further Reading ==<br /> * Congratulations you have just built your first app for OX App Suite, but please keep in mind that there [[AppSuite:Developing for the UI#What_can_i_build.3F | quite a few options]] for developing for OX App Suite.<br /> * It's highly recommended to gain more knowledge about all the benefits [[AppSuite:UI_build_system | the UI build system]] and [[AppSuite:Appserver|the Appserver]] are providing you for developing OX App Suite.<br /> * If you're stuck somewhere, the article about [[AppSuite:Debugging_the_UI | debugging the UI]] might help you.<br /> * Get a better overview about [[AppSuite:Developing for the UI | developing the user inferface]].</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:GettingStarted_7.4.2&diff=16450 AppSuite:GettingStarted 7.4.2 2013-11-14T17:38:20Z

<p>John.broomfield: /* Further Reading */</p> <hr /> <div><div class="title">Getting Started</div><br /> <br /> <div style="float:right; padding: 10px;">[[File:OX_AppSuite_UI_Development_Workflow.png]]</div><br /> <br /> __TOC__<br /> <br /> Hello and welcome to the world of OX App Suite development. This document is designed to get you started with developing your first app for OX App Suite as quickly and simply as possible. However, along the way we will also tempt you to learn more by linking to some more in-depth documentation about the various topics we cover. <br /> <br /> <div style="clear: both"></div><br /> <br /> == Installing the Development Tools ==<br /> <br /> First, you need to install some tools which are necessary for UI development. For now, the simplest way is to download the source of the OX App Suite UI. Since the source code is kept in a [http://git-scm.com/ Git] repository, you will need <tt>git</tt> to download it:<br /> <br /> $ git clone --depth 1 -b release-7.4.1 https://code.open-xchange.com/git/wd/frontend/web<br /> <br /> This downloads the latest version and unpacks it into a subdirectory called <tt>web</tt> in the current directory.<br /> <br /> The option <tt>--depth 1</tt> prevents the download of the entire history, and reduces the download size from hundreds of MB to less than 20MB. The option <tt>-b release-7.4.1</tt> specifies a git branch. The full functionality described in this article is only available in the branch <tt>release-7.4.1</tt> until 7.4.1 is released.<br /> <br /> The tools which you will need are contained in the directory <tt>ui/bin</tt>. To simplify their use, you should add this directory to your <tt>$PATH</tt>:<br /> <br /> $ export PATH="$PATH:$(pwd)/web/ui/bin"<br /> <br /> == Create a Workspace ==<br /> <br /> All your app development can take place inside one working directory. The examples will assume you have created a directory named <tt>myapp</tt> inside your home directory:<br /> <br /> $ mkdir ~/myapp<br /> $ cd ~/myapp<br /> <br /> It doesn't need to be in your home directory, and the actual name should reflect the name of your app. The main point is that all commands will be executed in this directory and all paths will be relative to this directory from now on.<br /> <br /> The source code of your app will reside in the subfolder named <tt>apps</tt>. To avoid name collisions please pick a unique subfolder inside that. The easiest and recommended way is to use a domain name that you own. Typically, the domain elements are reversed, like in Java. <tt>example.com</tt> becomes <tt>com.example</tt>:<br /> <br /> $ mkdir -p apps/com.example<br /> <br /> == Writing an App ==<br /> <br /> As an example, let's create the smallest possible app and test it. It requires only two files: <tt>apps/com.example/register.js</tt> for the source code of the app:<br /> <br /> <pre class="language-javascript"><br /> define('com.example/register', function () {<br /> 'use strict';<br /> alert('Hello, World!');<br /> });<br /> </pre><br /> <br /> and <tt>apps/com.example/manifest.json</tt> for the [[AppSuite:UI_manifests_explained | manifest]] which tells the UI that your app exists and what to do with it:<br /> <br /> <pre class="language-javascript">{ "namespace": "core" }</pre><br /> <br /> == Building an App ==<br /> <br /> The source code of your app can't be used by OX App Suite as it. It first has to be processed by the [[AppSuite:UI_build_system | build system]]. This step will check the source code for syntax errors, compress it, and depending on the structure of your code, many other things. The processed code is then written to a directory named <tt>build</tt> by default. Start the build with this command:<br /> <br /> $ build-appsuite app<br /> <br /> If your editor supports it, you can configure it to call the build system after every file save. Take care to call it from the top directory of your app's workspace, not from the directory of the saved file.<br /> <br /> == Testing an App ==<br /> <br /> The freshly built code can now be tested. Instead of uploading your code to an OX App Suite server, you can use the [[AppSuite:Appserver|appserver]] proxy to inject your code into the UI code of any existing OX App Suite installation. For example, start <tt>appserver</tt> using [http://ox.io/ ox.io] as the server:<br /> <br /> <nowiki>$ appserver --server=https://www.ox.io/appsuite/ build</nowiki><br /> <br /> This command will serve your app from the local directory <tt>build</tt>, and get everything else from the URL specified by the <tt>--server</tt> parameter. To serve multiple apps, you can specify multiple local directories separated by spaces.<br /> <br /> You should start <tt>appserver</tt> in a separate terminal, since it needs to run in the background. To stop <tt>appserver</tt>, press <tt>Ctrl+C</tt> in its terminal.<br /> <br /> Once appserver is running, you can access OX App Suite by opening your browser using this address:<br /> <br /> http://localhost:8337/appsuite<br /> <br /> After logging in, the app should be loaded and display the <tt>alert</tt> message.<br /> <br /> If you later add images or other files, which are not JavaScript, CSS or LessCSS, then you need to [[AppSuite:Appserver#Use_with_Apache | use a web server]] to serve them.<br /> <br /> === Development cycle ===<br /> <br /> Once you are sure that your setup works, you can extend the example and write the actual code for your app. Keep in mind that after [[#Writing | writing your code]], you will always need to [[#Building | build the app]] and have your [[#Hosting the app | Appserver]] running in the background, but don't need to restart it after every build.<br /> <br /> While developing always keep in mind, that there is an [[AppSuite:Debugging_the_UI | article about debugging the user interface]] which helps you avoid and fix typical errors.<br /> <br /> == Packaging ==<br /> <br /> When your app is finished you will probably want to test it on a staging system, and later install it on a production system. To keep track of which installed files belong to which version of which app, you should use the native package manager of the Linux distribution of the target system. The packages can be easily created using the build system.<br /> <br /> === Initialization ===<br /> First, you need to create several files describing how to package you app. Use the <tt>init-packaging</tt> task of the build system:<br /> <br /> $ build-appsuite init-packaging<br /> Node version: v0.10.21<br /> Build path: build<br /> Build version: 0.0.1-1.20131025.133931<br /> Package name: example-app<br /> Version [0.0.1]: <br /> Maintainer (Name <e-mail>): Maintainer <maintainer@example.com><br /> Copyright line [2013 Open-Xchange, Inc]: <br /> <br /> Known licenses for which you don't need to specify a file:<br /> APACHE-2, BSD-2-CLAUSE, BSD-3-CLAUSE, CC-BY-3, CC-BY-NC-3, CC-BY-NC-ND-3,<br /> CC-BY-NC-SA-3, CC-BY-ND-3, CC-BY-SA-3, CC0-1, EXPAT, GPL-2, GPL-3, LGPL-3<br /> <br /> License name [CC-BY-NC-SA-3.0]: BSD-3-Clause<br /> Short description: Example app<br /> <br /> The task presents a number of interactive prompts to get the necessary information about the generated packages. The default values are presented in square brackets ([...]) and can be selected by just pressing Enter. Otherwise, the entered values should follow the Debian Maintainers Guide. Debian tools are especially picky about the syntax of the maintainer name and email address.<br /> <br /> If none of the known licenses suit you, you can enter any other license name. Then you will be asked to enter the file name of your license text. It should be a plain text file using the UTF-8 encoding.<br /> <br /> Some or even all prompts can be skipped by explicitly specifying the information as a build variable. The list of variable names is available in the reference of the <tt>[[AppSuite:UI_build_system#init-packaging|init-packaging]]</tt> task.<br /> <br /> After answering all the questions, you can customize the generated files to account for any additional packaging requirements.<br /> <br /> === Static Files ===<br /> If your app includes images (themes do most of the time), then you should check the generated packaging files for sections marked<br /> <br /> ## Uncomment for multiple packages<br /> #...<br /> <br /> and remove the '#' at the start of each line in each block. This enables the creation of a second package, with a name ending in "<tt>-static</tt>". The images and any other files which are not JavaScript or CSS are served by the Apache web server, instead of the OX App Suite application server. These files are copied to a separate package for the case that the web server is on a dedicated system or maybe even has its own cluster. The default package is installed on the OX application server, and the second, "<tt>-static</tt>" package is installed on the web server.<br /> <br /> === Building Packages ===<br /> Since the actual package format depends on the distribution it is built for, and there are already tools available to create packages from suitably arranged source code archives, the OX App Suite build system merely prepares such source archives. Using the <tt>dist</tt> task to create the archives:<br /> <br /> $ build-appsuite dist<br /> Node version: v0.10.21<br /> Build path: build<br /> Build version: 0.0.1-1.20131025.150034<br /> dpkg-source: info: using source format `3.0 (quilt)'<br /> dpkg-source: info: building example-app using existing ./example-app_0.0.1.orig.tar.bz2<br /> dpkg-source: info: building example-app in example-app_0.0.1-1.debian.tar.bz2<br /> dpkg-source: info: building example-app in example-app_0.0.1-1.dsc<br /> <br /> $ ls tmp/packaging/<br /> example-app-0.0.1 example-app_0.0.1-1.dsc<br /> example-app.spec example-app_0.0.1.orig.tar.bz2<br /> example-app_0.0.1-1.debian.tar.bz2<br /> <br /> The task creates a temporary directory and four files. The archive with the extension <tt>.orig.tar.bz2</tt> contains the source of your app. It is required to build both Debian and RPM packages. The files with extensions <tt>.debian.tar.bz2</tt> and <tt>.dsc</tt> are used together with the <tt>.orig.tar.bz2</tt> archive to build Debian packages. The file with the extension <tt>.spec</tt> is used together with the <tt>.orig.tar.bz2</tt> archive to build RPM packages.<br /> <br /> ==== Building Debian Packages ====<br /> The Debian package can be built directly in the temporary directory created by the <tt>dist</tt> task:<br /> <br /> $ cd tmp/packaging/example-app-0.0.1/<br /> $ dpkg-buildpackage -b<br /> <br /> The package will be placed in <tt>tmp/packaging/</tt>.<br /> <br /> ==== Building RPM Packages ====<br /> The RPM package build tool <tt>rpmbuild</tt> requires the files to be in a specific directory layout before building:<br /> <br /> $ mkdir -p ~/rpmbuild/{SOURCES,SPECS,BUILD,RPMS}<br /> $ cp tmp/packaging/*.orig.tar.bz2 ~/rpmbuild/SOURCES/<br /> $ cp tmp/packaging/*.spec ~/rpmbuild/SPECS/<br /> $ rpmbuild --define "_topdir $HOME/rpmbuild" -bb ~/rpmbuild/SPECS/*.spec<br /> <br /> The package will be placed in <tt>~/rpmbuild/RPMS/noarch/</tt>.<br /> <br /> The parameter <tt>--define "_topdir $HOME/rpmbuild"</tt> can also be specified in the file <tt>~/.rpmmacros</tt> or, on some distributions, is even unnecessary.<br /> <br /> == Further Reading ==<br /> * Congratulations you have just built your first app for OX App Suite, but please keep in mind that there [[AppSuite:Developing for the UI#What_can_i_build.3F | quite a few options]] how you can develop for OX App Suite.<br /> * It's highly recommended to gain more knowledge about all the benefits [[AppSuite:UI_build_system | the UI build system]] and [[AppSuite:Appserver|the Appserver]] are providing you for developing OX App Suite.<br /> * If you're stuck somewhere, the article about [[AppSuite:Debugging_the_UI | debugging the UI]] might help you.<br /> * Get a better overview about [[AppSuite:Developing for the UI | developing the user inferface]].</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:GettingStarted_7.4.2&diff=16449 AppSuite:GettingStarted 7.4.2 2013-11-14T17:36:46Z

<p>John.broomfield: /* Packaging */</p> <hr /> <div><div class="title">Getting Started</div><br /> <br /> <div style="float:right; padding: 10px;">[[File:OX_AppSuite_UI_Development_Workflow.png]]</div><br /> <br /> __TOC__<br /> <br /> Hello and welcome to the world of OX App Suite development. This document is designed to get you started with developing your first app for OX App Suite as quickly and simply as possible. However, along the way we will also tempt you to learn more by linking to some more in-depth documentation about the various topics we cover. <br /> <br /> <div style="clear: both"></div><br /> <br /> == Installing the Development Tools ==<br /> <br /> First, you need to install some tools which are necessary for UI development. For now, the simplest way is to download the source of the OX App Suite UI. Since the source code is kept in a [http://git-scm.com/ Git] repository, you will need <tt>git</tt> to download it:<br /> <br /> $ git clone --depth 1 -b release-7.4.1 https://code.open-xchange.com/git/wd/frontend/web<br /> <br /> This downloads the latest version and unpacks it into a subdirectory called <tt>web</tt> in the current directory.<br /> <br /> The option <tt>--depth 1</tt> prevents the download of the entire history, and reduces the download size from hundreds of MB to less than 20MB. The option <tt>-b release-7.4.1</tt> specifies a git branch. The full functionality described in this article is only available in the branch <tt>release-7.4.1</tt> until 7.4.1 is released.<br /> <br /> The tools which you will need are contained in the directory <tt>ui/bin</tt>. To simplify their use, you should add this directory to your <tt>$PATH</tt>:<br /> <br /> $ export PATH="$PATH:$(pwd)/web/ui/bin"<br /> <br /> == Create a Workspace ==<br /> <br /> All your app development can take place inside one working directory. The examples will assume you have created a directory named <tt>myapp</tt> inside your home directory:<br /> <br /> $ mkdir ~/myapp<br /> $ cd ~/myapp<br /> <br /> It doesn't need to be in your home directory, and the actual name should reflect the name of your app. The main point is that all commands will be executed in this directory and all paths will be relative to this directory from now on.<br /> <br /> The source code of your app will reside in the subfolder named <tt>apps</tt>. To avoid name collisions please pick a unique subfolder inside that. The easiest and recommended way is to use a domain name that you own. Typically, the domain elements are reversed, like in Java. <tt>example.com</tt> becomes <tt>com.example</tt>:<br /> <br /> $ mkdir -p apps/com.example<br /> <br /> == Writing an App ==<br /> <br /> As an example, let's create the smallest possible app and test it. It requires only two files: <tt>apps/com.example/register.js</tt> for the source code of the app:<br /> <br /> <pre class="language-javascript"><br /> define('com.example/register', function () {<br /> 'use strict';<br /> alert('Hello, World!');<br /> });<br /> </pre><br /> <br /> and <tt>apps/com.example/manifest.json</tt> for the [[AppSuite:UI_manifests_explained | manifest]] which tells the UI that your app exists and what to do with it:<br /> <br /> <pre class="language-javascript">{ "namespace": "core" }</pre><br /> <br /> == Building an App ==<br /> <br /> The source code of your app can't be used by OX App Suite as it. It first has to be processed by the [[AppSuite:UI_build_system | build system]]. This step will check the source code for syntax errors, compress it, and depending on the structure of your code, many other things. The processed code is then written to a directory named <tt>build</tt> by default. Start the build with this command:<br /> <br /> $ build-appsuite app<br /> <br /> If your editor supports it, you can configure it to call the build system after every file save. Take care to call it from the top directory of your app's workspace, not from the directory of the saved file.<br /> <br /> == Testing an App ==<br /> <br /> The freshly built code can now be tested. Instead of uploading your code to an OX App Suite server, you can use the [[AppSuite:Appserver|appserver]] proxy to inject your code into the UI code of any existing OX App Suite installation. For example, start <tt>appserver</tt> using [http://ox.io/ ox.io] as the server:<br /> <br /> <nowiki>$ appserver --server=https://www.ox.io/appsuite/ build</nowiki><br /> <br /> This command will serve your app from the local directory <tt>build</tt>, and get everything else from the URL specified by the <tt>--server</tt> parameter. To serve multiple apps, you can specify multiple local directories separated by spaces.<br /> <br /> You should start <tt>appserver</tt> in a separate terminal, since it needs to run in the background. To stop <tt>appserver</tt>, press <tt>Ctrl+C</tt> in its terminal.<br /> <br /> Once appserver is running, you can access OX App Suite by opening your browser using this address:<br /> <br /> http://localhost:8337/appsuite<br /> <br /> After logging in, the app should be loaded and display the <tt>alert</tt> message.<br /> <br /> If you later add images or other files, which are not JavaScript, CSS or LessCSS, then you need to [[AppSuite:Appserver#Use_with_Apache | use a web server]] to serve them.<br /> <br /> === Development cycle ===<br /> <br /> Once you are sure that your setup works, you can extend the example and write the actual code for your app. Keep in mind that after [[#Writing | writing your code]], you will always need to [[#Building | build the app]] and have your [[#Hosting the app | Appserver]] running in the background, but don't need to restart it after every build.<br /> <br /> While developing always keep in mind, that there is an [[AppSuite:Debugging_the_UI | article about debugging the user interface]] which helps you avoid and fix typical errors.<br /> <br /> == Packaging ==<br /> <br /> When your app is finished you will probably want to test it on a staging system, and later install it on a production system. To keep track of which installed files belong to which version of which app, you should use the native package manager of the Linux distribution of the target system. The packages can be easily created using the build system.<br /> <br /> === Initialization ===<br /> First, you need to create several files describing how to package you app. Use the <tt>init-packaging</tt> task of the build system:<br /> <br /> $ build-appsuite init-packaging<br /> Node version: v0.10.21<br /> Build path: build<br /> Build version: 0.0.1-1.20131025.133931<br /> Package name: example-app<br /> Version [0.0.1]: <br /> Maintainer (Name <e-mail>): Maintainer <maintainer@example.com><br /> Copyright line [2013 Open-Xchange, Inc]: <br /> <br /> Known licenses for which you don't need to specify a file:<br /> APACHE-2, BSD-2-CLAUSE, BSD-3-CLAUSE, CC-BY-3, CC-BY-NC-3, CC-BY-NC-ND-3,<br /> CC-BY-NC-SA-3, CC-BY-ND-3, CC-BY-SA-3, CC0-1, EXPAT, GPL-2, GPL-3, LGPL-3<br /> <br /> License name [CC-BY-NC-SA-3.0]: BSD-3-Clause<br /> Short description: Example app<br /> <br /> The task presents a number of interactive prompts to get the necessary information about the generated packages. The default values are presented in square brackets ([...]) and can be selected by just pressing Enter. Otherwise, the entered values should follow the Debian Maintainers Guide. Debian tools are especially picky about the syntax of the maintainer name and email address.<br /> <br /> If none of the known licenses suit you, you can enter any other license name. Then you will be asked to enter the file name of your license text. It should be a plain text file using the UTF-8 encoding.<br /> <br /> Some or even all prompts can be skipped by explicitly specifying the information as a build variable. The list of variable names is available in the reference of the <tt>[[AppSuite:UI_build_system#init-packaging|init-packaging]]</tt> task.<br /> <br /> After answering all the questions, you can customize the generated files to account for any additional packaging requirements.<br /> <br /> === Static Files ===<br /> If your app includes images (themes do most of the time), then you should check the generated packaging files for sections marked<br /> <br /> ## Uncomment for multiple packages<br /> #...<br /> <br /> and remove the '#' at the start of each line in each block. This enables the creation of a second package, with a name ending in "<tt>-static</tt>". The images and any other files which are not JavaScript or CSS are served by the Apache web server, instead of the OX App Suite application server. These files are copied to a separate package for the case that the web server is on a dedicated system or maybe even has its own cluster. The default package is installed on the OX application server, and the second, "<tt>-static</tt>" package is installed on the web server.<br /> <br /> === Building Packages ===<br /> Since the actual package format depends on the distribution it is built for, and there are already tools available to create packages from suitably arranged source code archives, the OX App Suite build system merely prepares such source archives. Using the <tt>dist</tt> task to create the archives:<br /> <br /> $ build-appsuite dist<br /> Node version: v0.10.21<br /> Build path: build<br /> Build version: 0.0.1-1.20131025.150034<br /> dpkg-source: info: using source format `3.0 (quilt)'<br /> dpkg-source: info: building example-app using existing ./example-app_0.0.1.orig.tar.bz2<br /> dpkg-source: info: building example-app in example-app_0.0.1-1.debian.tar.bz2<br /> dpkg-source: info: building example-app in example-app_0.0.1-1.dsc<br /> <br /> $ ls tmp/packaging/<br /> example-app-0.0.1 example-app_0.0.1-1.dsc<br /> example-app.spec example-app_0.0.1.orig.tar.bz2<br /> example-app_0.0.1-1.debian.tar.bz2<br /> <br /> The task creates a temporary directory and four files. The archive with the extension <tt>.orig.tar.bz2</tt> contains the source of your app. It is required to build both Debian and RPM packages. The files with extensions <tt>.debian.tar.bz2</tt> and <tt>.dsc</tt> are used together with the <tt>.orig.tar.bz2</tt> archive to build Debian packages. The file with the extension <tt>.spec</tt> is used together with the <tt>.orig.tar.bz2</tt> archive to build RPM packages.<br /> <br /> ==== Building Debian Packages ====<br /> The Debian package can be built directly in the temporary directory created by the <tt>dist</tt> task:<br /> <br /> $ cd tmp/packaging/example-app-0.0.1/<br /> $ dpkg-buildpackage -b<br /> <br /> The package will be placed in <tt>tmp/packaging/</tt>.<br /> <br /> ==== Building RPM Packages ====<br /> The RPM package build tool <tt>rpmbuild</tt> requires the files to be in a specific directory layout before building:<br /> <br /> $ mkdir -p ~/rpmbuild/{SOURCES,SPECS,BUILD,RPMS}<br /> $ cp tmp/packaging/*.orig.tar.bz2 ~/rpmbuild/SOURCES/<br /> $ cp tmp/packaging/*.spec ~/rpmbuild/SPECS/<br /> $ rpmbuild --define "_topdir $HOME/rpmbuild" -bb ~/rpmbuild/SPECS/*.spec<br /> <br /> The package will be placed in <tt>~/rpmbuild/RPMS/noarch/</tt>.<br /> <br /> The parameter <tt>--define "_topdir $HOME/rpmbuild"</tt> can also be specified in the file <tt>~/.rpmmacros</tt> or, on some distributions, is even unnecessary.<br /> <br /> == Further Reading ==<br /> * You just build your first app for OX App Suite, keep in mind that there [[AppSuite:Developing for the UI#What_can_i_build.3F | quite a few options]] how you can develop for OX App Suite.<br /> * It's highly recommended to gain more knowledge about all the benefits [[AppSuite:UI_build_system | the UI build system]] and [[AppSuite:Appserver|the Appserver]] are providing you for developing OX App Suite.<br /> * If you're stuck somewhere, the article about [[AppSuite:Debugging_the_UI | debugging the UI]] might help you.<br /> * Get a better overview about [[AppSuite:Developing for the UI | developing the user inferface]].</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:GettingStarted_7.4.2&diff=16448 AppSuite:GettingStarted 7.4.2 2013-11-14T17:30:54Z

<p>John.broomfield: /* Testing an App */</p> <hr /> <div><div class="title">Getting Started</div><br /> <br /> <div style="float:right; padding: 10px;">[[File:OX_AppSuite_UI_Development_Workflow.png]]</div><br /> <br /> __TOC__<br /> <br /> Hello and welcome to the world of OX App Suite development. This document is designed to get you started with developing your first app for OX App Suite as quickly and simply as possible. However, along the way we will also tempt you to learn more by linking to some more in-depth documentation about the various topics we cover. <br /> <br /> <div style="clear: both"></div><br /> <br /> == Installing the Development Tools ==<br /> <br /> First, you need to install some tools which are necessary for UI development. For now, the simplest way is to download the source of the OX App Suite UI. Since the source code is kept in a [http://git-scm.com/ Git] repository, you will need <tt>git</tt> to download it:<br /> <br /> $ git clone --depth 1 -b release-7.4.1 https://code.open-xchange.com/git/wd/frontend/web<br /> <br /> This downloads the latest version and unpacks it into a subdirectory called <tt>web</tt> in the current directory.<br /> <br /> The option <tt>--depth 1</tt> prevents the download of the entire history, and reduces the download size from hundreds of MB to less than 20MB. The option <tt>-b release-7.4.1</tt> specifies a git branch. The full functionality described in this article is only available in the branch <tt>release-7.4.1</tt> until 7.4.1 is released.<br /> <br /> The tools which you will need are contained in the directory <tt>ui/bin</tt>. To simplify their use, you should add this directory to your <tt>$PATH</tt>:<br /> <br /> $ export PATH="$PATH:$(pwd)/web/ui/bin"<br /> <br /> == Create a Workspace ==<br /> <br /> All your app development can take place inside one working directory. The examples will assume you have created a directory named <tt>myapp</tt> inside your home directory:<br /> <br /> $ mkdir ~/myapp<br /> $ cd ~/myapp<br /> <br /> It doesn't need to be in your home directory, and the actual name should reflect the name of your app. The main point is that all commands will be executed in this directory and all paths will be relative to this directory from now on.<br /> <br /> The source code of your app will reside in the subfolder named <tt>apps</tt>. To avoid name collisions please pick a unique subfolder inside that. The easiest and recommended way is to use a domain name that you own. Typically, the domain elements are reversed, like in Java. <tt>example.com</tt> becomes <tt>com.example</tt>:<br /> <br /> $ mkdir -p apps/com.example<br /> <br /> == Writing an App ==<br /> <br /> As an example, let's create the smallest possible app and test it. It requires only two files: <tt>apps/com.example/register.js</tt> for the source code of the app:<br /> <br /> <pre class="language-javascript"><br /> define('com.example/register', function () {<br /> 'use strict';<br /> alert('Hello, World!');<br /> });<br /> </pre><br /> <br /> and <tt>apps/com.example/manifest.json</tt> for the [[AppSuite:UI_manifests_explained | manifest]] which tells the UI that your app exists and what to do with it:<br /> <br /> <pre class="language-javascript">{ "namespace": "core" }</pre><br /> <br /> == Building an App ==<br /> <br /> The source code of your app can't be used by OX App Suite as it. It first has to be processed by the [[AppSuite:UI_build_system | build system]]. This step will check the source code for syntax errors, compress it, and depending on the structure of your code, many other things. The processed code is then written to a directory named <tt>build</tt> by default. Start the build with this command:<br /> <br /> $ build-appsuite app<br /> <br /> If your editor supports it, you can configure it to call the build system after every file save. Take care to call it from the top directory of your app's workspace, not from the directory of the saved file.<br /> <br /> == Testing an App ==<br /> <br /> The freshly built code can now be tested. Instead of uploading your code to an OX App Suite server, you can use the [[AppSuite:Appserver|appserver]] proxy to inject your code into the UI code of any existing OX App Suite installation. For example, start <tt>appserver</tt> using [http://ox.io/ ox.io] as the server:<br /> <br /> <nowiki>$ appserver --server=https://www.ox.io/appsuite/ build</nowiki><br /> <br /> This command will serve your app from the local directory <tt>build</tt>, and get everything else from the URL specified by the <tt>--server</tt> parameter. To serve multiple apps, you can specify multiple local directories separated by spaces.<br /> <br /> You should start <tt>appserver</tt> in a separate terminal, since it needs to run in the background. To stop <tt>appserver</tt>, press <tt>Ctrl+C</tt> in its terminal.<br /> <br /> Once appserver is running, you can access OX App Suite by opening your browser using this address:<br /> <br /> http://localhost:8337/appsuite<br /> <br /> After logging in, the app should be loaded and display the <tt>alert</tt> message.<br /> <br /> If you later add images or other files, which are not JavaScript, CSS or LessCSS, then you need to [[AppSuite:Appserver#Use_with_Apache | use a web server]] to serve them.<br /> <br /> === Development cycle ===<br /> <br /> Once you are sure that your setup works, you can extend the example and write the actual code for your app. Keep in mind that after [[#Writing | writing your code]], you will always need to [[#Building | build the app]] and have your [[#Hosting the app | Appserver]] running in the background, but don't need to restart it after every build.<br /> <br /> While developing always keep in mind, that there is an [[AppSuite:Debugging_the_UI | article about debugging the user interface]] which helps you avoid and fix typical errors.<br /> <br /> == Packaging ==<br /> <br /> When your app is done, you probably want to test it on a staging system, and later install it on a production system. To keep track of which installed files belong to which version of which app, you should use the native package manager of the Linux distribution of the target system. The packages can be easily created using the build system.<br /> <br /> === Initialization ===<br /> First, you need to create several files describing how to package you app. Use the <tt>init-packaging</tt> task of the build system:<br /> <br /> $ build-appsuite init-packaging<br /> Node version: v0.10.21<br /> Build path: build<br /> Build version: 0.0.1-1.20131025.133931<br /> Package name: example-app<br /> Version [0.0.1]: <br /> Maintainer (Name <e-mail>): Maintainer <maintainer@example.com><br /> Copyright line [2013 Open-Xchange, Inc]: <br /> <br /> Known licenses for which you don't need to specify a file:<br /> APACHE-2, BSD-2-CLAUSE, BSD-3-CLAUSE, CC-BY-3, CC-BY-NC-3, CC-BY-NC-ND-3,<br /> CC-BY-NC-SA-3, CC-BY-ND-3, CC-BY-SA-3, CC0-1, EXPAT, GPL-2, GPL-3, LGPL-3<br /> <br /> License name [CC-BY-NC-SA-3.0]: BSD-3-Clause<br /> Short description: Example app<br /> <br /> The task presents a number of interactive prompts to get the necessary information about the generated packages. The default values are presented in square brackets ([...]) and can be selected by just pressing Enter. Otherwise, the entered values should follow the Debian Maintainer's Guide. Debian tools are especially picky about the syntax of the maintainer name and email address.<br /> <br /> If none of the known licenses suit you, you can enter any other license name. Then you will be asked to enter the file name of your license text. It should be a plain text file using the UTF-8 encoding.<br /> <br /> Some or even all prompts can be skipped by explicitly specifying the information as a build variable. The list of variable names is available in the reference of the <tt>[[AppSuite:UI_build_system#init-packaging|init-packaging]]</tt> task.<br /> <br /> After answering all the questions, you can customize the generated files to account for any additional packaging requirements.<br /> <br /> === Static Files ===<br /> If your app includes images (e.g. themes do this most of the time), then you should check the generated packaging files for sections marked<br /> <br /> ## Uncomment for multiple packages<br /> #...<br /> <br /> and remove the '#' at the start of each line in each block. This enables the creation of a second package, with a name ending in "<tt>-static</tt>". The images and any other files which are not JavaScript or CSS are served by the Apache web server, instead of the OX App Suite application server. These files are copied to a separate package for the case that the web server is on a dedicated system or maybe even has its own cluster. The default package is installed on the OX application server, and the second, "<tt>-static</tt>" package is installed on the web server.<br /> <br /> === Building Packages ===<br /> Since the actual package format depends on the distribution it is built for, and there already exist tools to create packages from suitably arranged source code archives, the OX App Suite build system merely prepares such source archives. Using the <tt>dist</tt> task to create the archives:<br /> <br /> $ build-appsuite dist<br /> Node version: v0.10.21<br /> Build path: build<br /> Build version: 0.0.1-1.20131025.150034<br /> dpkg-source: info: using source format `3.0 (quilt)'<br /> dpkg-source: info: building example-app using existing ./example-app_0.0.1.orig.tar.bz2<br /> dpkg-source: info: building example-app in example-app_0.0.1-1.debian.tar.bz2<br /> dpkg-source: info: building example-app in example-app_0.0.1-1.dsc<br /> <br /> $ ls tmp/packaging/<br /> example-app-0.0.1 example-app_0.0.1-1.dsc<br /> example-app.spec example-app_0.0.1.orig.tar.bz2<br /> example-app_0.0.1-1.debian.tar.bz2<br /> <br /> The task creates a temporary directory and four files. The archive with the extension <tt>.orig.tar.bz2</tt> contains the source of your app. It is required to build both Debian and RPM packages. The files with extensions <tt>.debian.tar.bz2</tt> and <tt>.dsc</tt> are used together with the <tt>.orig.tar.bz2</tt> archive to build Debian packages. The file with the extension <tt>.spec</tt> is used together with the <tt>.orig.tar.bz2</tt> archive to build RPM packages.<br /> <br /> ==== Building Debian Packages ====<br /> The Debian package can be built directly in the temporary directory created by the <tt>dist</tt> task:<br /> <br /> $ cd tmp/packaging/example-app-0.0.1/<br /> $ dpkg-buildpackage -b<br /> <br /> The package will be placed in <tt>tmp/packaging/</tt>.<br /> <br /> ==== Building RPM Packages ====<br /> The RPM package build tool <tt>rpmbuild</tt> requires the files to be in a specific directory layout before building:<br /> <br /> $ mkdir -p ~/rpmbuild/{SOURCES,SPECS,BUILD,RPMS}<br /> $ cp tmp/packaging/*.orig.tar.bz2 ~/rpmbuild/SOURCES/<br /> $ cp tmp/packaging/*.spec ~/rpmbuild/SPECS/<br /> $ rpmbuild --define "_topdir $HOME/rpmbuild" -bb ~/rpmbuild/SPECS/*.spec<br /> <br /> The package will be placed in <tt>~/rpmbuild/RPMS/noarch/</tt>.<br /> <br /> The parameter <tt>--define "_topdir $HOME/rpmbuild"</tt> can also be specified in the file <tt>~/.rpmmacros</tt> or, on some distributions, is even unnecessary.<br /> <br /> == Further Reading ==<br /> * You just build your first app for OX App Suite, keep in mind that there [[AppSuite:Developing for the UI#What_can_i_build.3F | quite a few options]] how you can develop for OX App Suite.<br /> * It's highly recommended to gain more knowledge about all the benefits [[AppSuite:UI_build_system | the UI build system]] and [[AppSuite:Appserver|the Appserver]] are providing you for developing OX App Suite.<br /> * If you're stuck somewhere, the article about [[AppSuite:Debugging_the_UI | debugging the UI]] might help you.<br /> * Get a better overview about [[AppSuite:Developing for the UI | developing the user inferface]].</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:GettingStarted_7.4.2&diff=16447 AppSuite:GettingStarted 7.4.2 2013-11-14T17:28:26Z

<p>John.broomfield: /* Building an App */</p> <hr /> <div><div class="title">Getting Started</div><br /> <br /> <div style="float:right; padding: 10px;">[[File:OX_AppSuite_UI_Development_Workflow.png]]</div><br /> <br /> __TOC__<br /> <br /> Hello and welcome to the world of OX App Suite development. This document is designed to get you started with developing your first app for OX App Suite as quickly and simply as possible. However, along the way we will also tempt you to learn more by linking to some more in-depth documentation about the various topics we cover. <br /> <br /> <div style="clear: both"></div><br /> <br /> == Installing the Development Tools ==<br /> <br /> First, you need to install some tools which are necessary for UI development. For now, the simplest way is to download the source of the OX App Suite UI. Since the source code is kept in a [http://git-scm.com/ Git] repository, you will need <tt>git</tt> to download it:<br /> <br /> $ git clone --depth 1 -b release-7.4.1 https://code.open-xchange.com/git/wd/frontend/web<br /> <br /> This downloads the latest version and unpacks it into a subdirectory called <tt>web</tt> in the current directory.<br /> <br /> The option <tt>--depth 1</tt> prevents the download of the entire history, and reduces the download size from hundreds of MB to less than 20MB. The option <tt>-b release-7.4.1</tt> specifies a git branch. The full functionality described in this article is only available in the branch <tt>release-7.4.1</tt> until 7.4.1 is released.<br /> <br /> The tools which you will need are contained in the directory <tt>ui/bin</tt>. To simplify their use, you should add this directory to your <tt>$PATH</tt>:<br /> <br /> $ export PATH="$PATH:$(pwd)/web/ui/bin"<br /> <br /> == Create a Workspace ==<br /> <br /> All your app development can take place inside one working directory. The examples will assume you have created a directory named <tt>myapp</tt> inside your home directory:<br /> <br /> $ mkdir ~/myapp<br /> $ cd ~/myapp<br /> <br /> It doesn't need to be in your home directory, and the actual name should reflect the name of your app. The main point is that all commands will be executed in this directory and all paths will be relative to this directory from now on.<br /> <br /> The source code of your app will reside in the subfolder named <tt>apps</tt>. To avoid name collisions please pick a unique subfolder inside that. The easiest and recommended way is to use a domain name that you own. Typically, the domain elements are reversed, like in Java. <tt>example.com</tt> becomes <tt>com.example</tt>:<br /> <br /> $ mkdir -p apps/com.example<br /> <br /> == Writing an App ==<br /> <br /> As an example, let's create the smallest possible app and test it. It requires only two files: <tt>apps/com.example/register.js</tt> for the source code of the app:<br /> <br /> <pre class="language-javascript"><br /> define('com.example/register', function () {<br /> 'use strict';<br /> alert('Hello, World!');<br /> });<br /> </pre><br /> <br /> and <tt>apps/com.example/manifest.json</tt> for the [[AppSuite:UI_manifests_explained | manifest]] which tells the UI that your app exists and what to do with it:<br /> <br /> <pre class="language-javascript">{ "namespace": "core" }</pre><br /> <br /> == Building an App ==<br /> <br /> The source code of your app can't be used by OX App Suite as it. It first has to be processed by the [[AppSuite:UI_build_system | build system]]. This step will check the source code for syntax errors, compress it, and depending on the structure of your code, many other things. The processed code is then written to a directory named <tt>build</tt> by default. Start the build with this command:<br /> <br /> $ build-appsuite app<br /> <br /> If your editor supports it, you can configure it to call the build system after every file save. Take care to call it from the top directory of your app's workspace, not from the directory of the saved file.<br /> <br /> == Testing an App ==<br /> <br /> The freshly built code can now be tested. Instead of uploading your code to an OX App Suite server, you can use the [[AppSuite:Appserver|appserver]] proxy to inject your code into the UI code of any existing OX App Suite installation. For example, start <tt>appserver</tt> using [http://ox.io/ ox.io] as server:<br /> <br /> <nowiki>$ appserver --server=https://www.ox.io/appsuite/ build</nowiki><br /> <br /> This command will serve your app from the local directory <tt>build</tt>, and get everything else from the URL specified by the <tt>--server</tt> parameter. To serve multiple apps, you can specify multiple local directories separated by spaces.<br /> <br /> You should start <tt>appserver</tt> in a separate terminal, since it needs to run in the background. To stop <tt>appserver</tt>, press <tt>Ctrl+C</tt> in its terminal.<br /> <br /> Once appserver is running, you can access OX App Suite opening your browser with this address:<br /> <br /> http://localhost:8337/appsuite<br /> <br /> After logging in, the app should be loaded and display the <tt>alert</tt> message.<br /> <br /> If you later add images or other files, which are not JavaScript, CSS or LessCSS, then you need to [[AppSuite:Appserver#Use_with_Apache | use a web server]] to serve them.<br /> <br /> === Development cycle ===<br /> <br /> Once you are sure that your setup works, you can extend the example and write the actual code of your app. Keep in mind that after [[#Writing | writing your code]], you will always need to [[#Building | build the app]] and have your [[#Hosting the app | Appserver]] running in the background, but don't need to restart it after every build.<br /> <br /> While developing always keep in mind, that there is an [[AppSuite:Debugging_the_UI | article about debugging the user interface]] which helps you avoiding and fixing typical errors.<br /> <br /> == Packaging ==<br /> <br /> When your app is done, you probably want to test it on a staging system, and later install it on a production system. To keep track of which installed files belong to which version of which app, you should use the native package manager of the Linux distribution of the target system. The packages can be easily created using the build system.<br /> <br /> === Initialization ===<br /> First, you need to create several files describing how to package you app. Use the <tt>init-packaging</tt> task of the build system:<br /> <br /> $ build-appsuite init-packaging<br /> Node version: v0.10.21<br /> Build path: build<br /> Build version: 0.0.1-1.20131025.133931<br /> Package name: example-app<br /> Version [0.0.1]: <br /> Maintainer (Name <e-mail>): Maintainer <maintainer@example.com><br /> Copyright line [2013 Open-Xchange, Inc]: <br /> <br /> Known licenses for which you don't need to specify a file:<br /> APACHE-2, BSD-2-CLAUSE, BSD-3-CLAUSE, CC-BY-3, CC-BY-NC-3, CC-BY-NC-ND-3,<br /> CC-BY-NC-SA-3, CC-BY-ND-3, CC-BY-SA-3, CC0-1, EXPAT, GPL-2, GPL-3, LGPL-3<br /> <br /> License name [CC-BY-NC-SA-3.0]: BSD-3-Clause<br /> Short description: Example app<br /> <br /> The task presents a number of interactive prompts to get the necessary information about the generated packages. The default values are presented in square brackets ([...]) and can be selected by just pressing Enter. Otherwise, the entered values should follow the Debian Maintainer's Guide. Debian tools are especially picky about the syntax of the maintainer name and email address.<br /> <br /> If none of the known licenses suit you, you can enter any other license name. Then you will be asked to enter the file name of your license text. It should be a plain text file using the UTF-8 encoding.<br /> <br /> Some or even all prompts can be skipped by explicitly specifying the information as a build variable. The list of variable names is available in the reference of the <tt>[[AppSuite:UI_build_system#init-packaging|init-packaging]]</tt> task.<br /> <br /> After answering all the questions, you can customize the generated files to account for any additional packaging requirements.<br /> <br /> === Static Files ===<br /> If your app includes images (e.g. themes do this most of the time), then you should check the generated packaging files for sections marked<br /> <br /> ## Uncomment for multiple packages<br /> #...<br /> <br /> and remove the '#' at the start of each line in each block. This enables the creation of a second package, with a name ending in "<tt>-static</tt>". The images and any other files which are not JavaScript or CSS are served by the Apache web server, instead of the OX App Suite application server. These files are copied to a separate package for the case that the web server is on a dedicated system or maybe even has its own cluster. The default package is installed on the OX application server, and the second, "<tt>-static</tt>" package is installed on the web server.<br /> <br /> === Building Packages ===<br /> Since the actual package format depends on the distribution it is built for, and there already exist tools to create packages from suitably arranged source code archives, the OX App Suite build system merely prepares such source archives. Using the <tt>dist</tt> task to create the archives:<br /> <br /> $ build-appsuite dist<br /> Node version: v0.10.21<br /> Build path: build<br /> Build version: 0.0.1-1.20131025.150034<br /> dpkg-source: info: using source format `3.0 (quilt)'<br /> dpkg-source: info: building example-app using existing ./example-app_0.0.1.orig.tar.bz2<br /> dpkg-source: info: building example-app in example-app_0.0.1-1.debian.tar.bz2<br /> dpkg-source: info: building example-app in example-app_0.0.1-1.dsc<br /> <br /> $ ls tmp/packaging/<br /> example-app-0.0.1 example-app_0.0.1-1.dsc<br /> example-app.spec example-app_0.0.1.orig.tar.bz2<br /> example-app_0.0.1-1.debian.tar.bz2<br /> <br /> The task creates a temporary directory and four files. The archive with the extension <tt>.orig.tar.bz2</tt> contains the source of your app. It is required to build both Debian and RPM packages. The files with extensions <tt>.debian.tar.bz2</tt> and <tt>.dsc</tt> are used together with the <tt>.orig.tar.bz2</tt> archive to build Debian packages. The file with the extension <tt>.spec</tt> is used together with the <tt>.orig.tar.bz2</tt> archive to build RPM packages.<br /> <br /> ==== Building Debian Packages ====<br /> The Debian package can be built directly in the temporary directory created by the <tt>dist</tt> task:<br /> <br /> $ cd tmp/packaging/example-app-0.0.1/<br /> $ dpkg-buildpackage -b<br /> <br /> The package will be placed in <tt>tmp/packaging/</tt>.<br /> <br /> ==== Building RPM Packages ====<br /> The RPM package build tool <tt>rpmbuild</tt> requires the files to be in a specific directory layout before building:<br /> <br /> $ mkdir -p ~/rpmbuild/{SOURCES,SPECS,BUILD,RPMS}<br /> $ cp tmp/packaging/*.orig.tar.bz2 ~/rpmbuild/SOURCES/<br /> $ cp tmp/packaging/*.spec ~/rpmbuild/SPECS/<br /> $ rpmbuild --define "_topdir $HOME/rpmbuild" -bb ~/rpmbuild/SPECS/*.spec<br /> <br /> The package will be placed in <tt>~/rpmbuild/RPMS/noarch/</tt>.<br /> <br /> The parameter <tt>--define "_topdir $HOME/rpmbuild"</tt> can also be specified in the file <tt>~/.rpmmacros</tt> or, on some distributions, is even unnecessary.<br /> <br /> == Further Reading ==<br /> * You just build your first app for OX App Suite, keep in mind that there [[AppSuite:Developing for the UI#What_can_i_build.3F | quite a few options]] how you can develop for OX App Suite.<br /> * It's highly recommended to gain more knowledge about all the benefits [[AppSuite:UI_build_system | the UI build system]] and [[AppSuite:Appserver|the Appserver]] are providing you for developing OX App Suite.<br /> * If you're stuck somewhere, the article about [[AppSuite:Debugging_the_UI | debugging the UI]] might help you.<br /> * Get a better overview about [[AppSuite:Developing for the UI | developing the user inferface]].</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:GettingStarted_7.4.2&diff=16446 AppSuite:GettingStarted 7.4.2 2013-11-14T17:27:18Z

<p>John.broomfield: /* Testing */</p> <hr /> <div><div class="title">Getting Started</div><br /> <br /> <div style="float:right; padding: 10px;">[[File:OX_AppSuite_UI_Development_Workflow.png]]</div><br /> <br /> __TOC__<br /> <br /> Hello and welcome to the world of OX App Suite development. This document is designed to get you started with developing your first app for OX App Suite as quickly and simply as possible. However, along the way we will also tempt you to learn more by linking to some more in-depth documentation about the various topics we cover. <br /> <br /> <div style="clear: both"></div><br /> <br /> == Installing the Development Tools ==<br /> <br /> First, you need to install some tools which are necessary for UI development. For now, the simplest way is to download the source of the OX App Suite UI. Since the source code is kept in a [http://git-scm.com/ Git] repository, you will need <tt>git</tt> to download it:<br /> <br /> $ git clone --depth 1 -b release-7.4.1 https://code.open-xchange.com/git/wd/frontend/web<br /> <br /> This downloads the latest version and unpacks it into a subdirectory called <tt>web</tt> in the current directory.<br /> <br /> The option <tt>--depth 1</tt> prevents the download of the entire history, and reduces the download size from hundreds of MB to less than 20MB. The option <tt>-b release-7.4.1</tt> specifies a git branch. The full functionality described in this article is only available in the branch <tt>release-7.4.1</tt> until 7.4.1 is released.<br /> <br /> The tools which you will need are contained in the directory <tt>ui/bin</tt>. To simplify their use, you should add this directory to your <tt>$PATH</tt>:<br /> <br /> $ export PATH="$PATH:$(pwd)/web/ui/bin"<br /> <br /> == Create a Workspace ==<br /> <br /> All your app development can take place inside one working directory. The examples will assume you have created a directory named <tt>myapp</tt> inside your home directory:<br /> <br /> $ mkdir ~/myapp<br /> $ cd ~/myapp<br /> <br /> It doesn't need to be in your home directory, and the actual name should reflect the name of your app. The main point is that all commands will be executed in this directory and all paths will be relative to this directory from now on.<br /> <br /> The source code of your app will reside in the subfolder named <tt>apps</tt>. To avoid name collisions please pick a unique subfolder inside that. The easiest and recommended way is to use a domain name that you own. Typically, the domain elements are reversed, like in Java. <tt>example.com</tt> becomes <tt>com.example</tt>:<br /> <br /> $ mkdir -p apps/com.example<br /> <br /> == Writing an App ==<br /> <br /> As an example, let's create the smallest possible app and test it. It requires only two files: <tt>apps/com.example/register.js</tt> for the source code of the app:<br /> <br /> <pre class="language-javascript"><br /> define('com.example/register', function () {<br /> 'use strict';<br /> alert('Hello, World!');<br /> });<br /> </pre><br /> <br /> and <tt>apps/com.example/manifest.json</tt> for the [[AppSuite:UI_manifests_explained | manifest]] which tells the UI that your app exists and what to do with it:<br /> <br /> <pre class="language-javascript">{ "namespace": "core" }</pre><br /> <br /> == Building an App ==<br /> <br /> The source code of your app can't be used by OX App Suite as it. It has to be first processed by the [[AppSuite:UI_build_system | build system]]. This step will check the source code for syntax errors, compress it, and depending on the structure of your code, many other things. The processed code is then written to a directory named <tt>build</tt> by default. Start the build with this command:<br /> <br /> $ build-appsuite app<br /> <br /> If your editor supports it, you can configure it to call the build system after every file save. Take care to call it from the top directory of your app's workspace, not from the directory of the saved file.<br /> <br /> == Testing an App ==<br /> <br /> The freshly built code can now be tested. Instead of uploading your code to an OX App Suite server, you can use the [[AppSuite:Appserver|appserver]] proxy to inject your code into the UI code of any existing OX App Suite installation. For example, start <tt>appserver</tt> using [http://ox.io/ ox.io] as server:<br /> <br /> <nowiki>$ appserver --server=https://www.ox.io/appsuite/ build</nowiki><br /> <br /> This command will serve your app from the local directory <tt>build</tt>, and get everything else from the URL specified by the <tt>--server</tt> parameter. To serve multiple apps, you can specify multiple local directories separated by spaces.<br /> <br /> You should start <tt>appserver</tt> in a separate terminal, since it needs to run in the background. To stop <tt>appserver</tt>, press <tt>Ctrl+C</tt> in its terminal.<br /> <br /> Once appserver is running, you can access OX App Suite opening your browser with this address:<br /> <br /> http://localhost:8337/appsuite<br /> <br /> After logging in, the app should be loaded and display the <tt>alert</tt> message.<br /> <br /> If you later add images or other files, which are not JavaScript, CSS or LessCSS, then you need to [[AppSuite:Appserver#Use_with_Apache | use a web server]] to serve them.<br /> <br /> === Development cycle ===<br /> <br /> Once you are sure that your setup works, you can extend the example and write the actual code of your app. Keep in mind that after [[#Writing | writing your code]], you will always need to [[#Building | build the app]] and have your [[#Hosting the app | Appserver]] running in the background, but don't need to restart it after every build.<br /> <br /> While developing always keep in mind, that there is an [[AppSuite:Debugging_the_UI | article about debugging the user interface]] which helps you avoiding and fixing typical errors.<br /> <br /> == Packaging ==<br /> <br /> When your app is done, you probably want to test it on a staging system, and later install it on a production system. To keep track of which installed files belong to which version of which app, you should use the native package manager of the Linux distribution of the target system. The packages can be easily created using the build system.<br /> <br /> === Initialization ===<br /> First, you need to create several files describing how to package you app. Use the <tt>init-packaging</tt> task of the build system:<br /> <br /> $ build-appsuite init-packaging<br /> Node version: v0.10.21<br /> Build path: build<br /> Build version: 0.0.1-1.20131025.133931<br /> Package name: example-app<br /> Version [0.0.1]: <br /> Maintainer (Name <e-mail>): Maintainer <maintainer@example.com><br /> Copyright line [2013 Open-Xchange, Inc]: <br /> <br /> Known licenses for which you don't need to specify a file:<br /> APACHE-2, BSD-2-CLAUSE, BSD-3-CLAUSE, CC-BY-3, CC-BY-NC-3, CC-BY-NC-ND-3,<br /> CC-BY-NC-SA-3, CC-BY-ND-3, CC-BY-SA-3, CC0-1, EXPAT, GPL-2, GPL-3, LGPL-3<br /> <br /> License name [CC-BY-NC-SA-3.0]: BSD-3-Clause<br /> Short description: Example app<br /> <br /> The task presents a number of interactive prompts to get the necessary information about the generated packages. The default values are presented in square brackets ([...]) and can be selected by just pressing Enter. Otherwise, the entered values should follow the Debian Maintainer's Guide. Debian tools are especially picky about the syntax of the maintainer name and email address.<br /> <br /> If none of the known licenses suit you, you can enter any other license name. Then you will be asked to enter the file name of your license text. It should be a plain text file using the UTF-8 encoding.<br /> <br /> Some or even all prompts can be skipped by explicitly specifying the information as a build variable. The list of variable names is available in the reference of the <tt>[[AppSuite:UI_build_system#init-packaging|init-packaging]]</tt> task.<br /> <br /> After answering all the questions, you can customize the generated files to account for any additional packaging requirements.<br /> <br /> === Static Files ===<br /> If your app includes images (e.g. themes do this most of the time), then you should check the generated packaging files for sections marked<br /> <br /> ## Uncomment for multiple packages<br /> #...<br /> <br /> and remove the '#' at the start of each line in each block. This enables the creation of a second package, with a name ending in "<tt>-static</tt>". The images and any other files which are not JavaScript or CSS are served by the Apache web server, instead of the OX App Suite application server. These files are copied to a separate package for the case that the web server is on a dedicated system or maybe even has its own cluster. The default package is installed on the OX application server, and the second, "<tt>-static</tt>" package is installed on the web server.<br /> <br /> === Building Packages ===<br /> Since the actual package format depends on the distribution it is built for, and there already exist tools to create packages from suitably arranged source code archives, the OX App Suite build system merely prepares such source archives. Using the <tt>dist</tt> task to create the archives:<br /> <br /> $ build-appsuite dist<br /> Node version: v0.10.21<br /> Build path: build<br /> Build version: 0.0.1-1.20131025.150034<br /> dpkg-source: info: using source format `3.0 (quilt)'<br /> dpkg-source: info: building example-app using existing ./example-app_0.0.1.orig.tar.bz2<br /> dpkg-source: info: building example-app in example-app_0.0.1-1.debian.tar.bz2<br /> dpkg-source: info: building example-app in example-app_0.0.1-1.dsc<br /> <br /> $ ls tmp/packaging/<br /> example-app-0.0.1 example-app_0.0.1-1.dsc<br /> example-app.spec example-app_0.0.1.orig.tar.bz2<br /> example-app_0.0.1-1.debian.tar.bz2<br /> <br /> The task creates a temporary directory and four files. The archive with the extension <tt>.orig.tar.bz2</tt> contains the source of your app. It is required to build both Debian and RPM packages. The files with extensions <tt>.debian.tar.bz2</tt> and <tt>.dsc</tt> are used together with the <tt>.orig.tar.bz2</tt> archive to build Debian packages. The file with the extension <tt>.spec</tt> is used together with the <tt>.orig.tar.bz2</tt> archive to build RPM packages.<br /> <br /> ==== Building Debian Packages ====<br /> The Debian package can be built directly in the temporary directory created by the <tt>dist</tt> task:<br /> <br /> $ cd tmp/packaging/example-app-0.0.1/<br /> $ dpkg-buildpackage -b<br /> <br /> The package will be placed in <tt>tmp/packaging/</tt>.<br /> <br /> ==== Building RPM Packages ====<br /> The RPM package build tool <tt>rpmbuild</tt> requires the files to be in a specific directory layout before building:<br /> <br /> $ mkdir -p ~/rpmbuild/{SOURCES,SPECS,BUILD,RPMS}<br /> $ cp tmp/packaging/*.orig.tar.bz2 ~/rpmbuild/SOURCES/<br /> $ cp tmp/packaging/*.spec ~/rpmbuild/SPECS/<br /> $ rpmbuild --define "_topdir $HOME/rpmbuild" -bb ~/rpmbuild/SPECS/*.spec<br /> <br /> The package will be placed in <tt>~/rpmbuild/RPMS/noarch/</tt>.<br /> <br /> The parameter <tt>--define "_topdir $HOME/rpmbuild"</tt> can also be specified in the file <tt>~/.rpmmacros</tt> or, on some distributions, is even unnecessary.<br /> <br /> == Further Reading ==<br /> * You just build your first app for OX App Suite, keep in mind that there [[AppSuite:Developing for the UI#What_can_i_build.3F | quite a few options]] how you can develop for OX App Suite.<br /> * It's highly recommended to gain more knowledge about all the benefits [[AppSuite:UI_build_system | the UI build system]] and [[AppSuite:Appserver|the Appserver]] are providing you for developing OX App Suite.<br /> * If you're stuck somewhere, the article about [[AppSuite:Debugging_the_UI | debugging the UI]] might help you.<br /> * Get a better overview about [[AppSuite:Developing for the UI | developing the user inferface]].</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:GettingStarted_7.4.2&diff=16445 AppSuite:GettingStarted 7.4.2 2013-11-14T17:27:03Z

<p>John.broomfield: /* Building */</p> <hr /> <div><div class="title">Getting Started</div><br /> <br /> <div style="float:right; padding: 10px;">[[File:OX_AppSuite_UI_Development_Workflow.png]]</div><br /> <br /> __TOC__<br /> <br /> Hello and welcome to the world of OX App Suite development. This document is designed to get you started with developing your first app for OX App Suite as quickly and simply as possible. However, along the way we will also tempt you to learn more by linking to some more in-depth documentation about the various topics we cover. <br /> <br /> <div style="clear: both"></div><br /> <br /> == Installing the Development Tools ==<br /> <br /> First, you need to install some tools which are necessary for UI development. For now, the simplest way is to download the source of the OX App Suite UI. Since the source code is kept in a [http://git-scm.com/ Git] repository, you will need <tt>git</tt> to download it:<br /> <br /> $ git clone --depth 1 -b release-7.4.1 https://code.open-xchange.com/git/wd/frontend/web<br /> <br /> This downloads the latest version and unpacks it into a subdirectory called <tt>web</tt> in the current directory.<br /> <br /> The option <tt>--depth 1</tt> prevents the download of the entire history, and reduces the download size from hundreds of MB to less than 20MB. The option <tt>-b release-7.4.1</tt> specifies a git branch. The full functionality described in this article is only available in the branch <tt>release-7.4.1</tt> until 7.4.1 is released.<br /> <br /> The tools which you will need are contained in the directory <tt>ui/bin</tt>. To simplify their use, you should add this directory to your <tt>$PATH</tt>:<br /> <br /> $ export PATH="$PATH:$(pwd)/web/ui/bin"<br /> <br /> == Create a Workspace ==<br /> <br /> All your app development can take place inside one working directory. The examples will assume you have created a directory named <tt>myapp</tt> inside your home directory:<br /> <br /> $ mkdir ~/myapp<br /> $ cd ~/myapp<br /> <br /> It doesn't need to be in your home directory, and the actual name should reflect the name of your app. The main point is that all commands will be executed in this directory and all paths will be relative to this directory from now on.<br /> <br /> The source code of your app will reside in the subfolder named <tt>apps</tt>. To avoid name collisions please pick a unique subfolder inside that. The easiest and recommended way is to use a domain name that you own. Typically, the domain elements are reversed, like in Java. <tt>example.com</tt> becomes <tt>com.example</tt>:<br /> <br /> $ mkdir -p apps/com.example<br /> <br /> == Writing an App ==<br /> <br /> As an example, let's create the smallest possible app and test it. It requires only two files: <tt>apps/com.example/register.js</tt> for the source code of the app:<br /> <br /> <pre class="language-javascript"><br /> define('com.example/register', function () {<br /> 'use strict';<br /> alert('Hello, World!');<br /> });<br /> </pre><br /> <br /> and <tt>apps/com.example/manifest.json</tt> for the [[AppSuite:UI_manifests_explained | manifest]] which tells the UI that your app exists and what to do with it:<br /> <br /> <pre class="language-javascript">{ "namespace": "core" }</pre><br /> <br /> == Building an App ==<br /> <br /> The source code of your app can't be used by OX App Suite as it. It has to be first processed by the [[AppSuite:UI_build_system | build system]]. This step will check the source code for syntax errors, compress it, and depending on the structure of your code, many other things. The processed code is then written to a directory named <tt>build</tt> by default. Start the build with this command:<br /> <br /> $ build-appsuite app<br /> <br /> If your editor supports it, you can configure it to call the build system after every file save. Take care to call it from the top directory of your app's workspace, not from the directory of the saved file.<br /> <br /> == Testing ==<br /> <br /> The freshly built code can now be tested. Instead of uploading your code to an OX App Suite server, you can use the [[AppSuite:Appserver|appserver]] proxy to inject your code into the UI code of any existing OX App Suite installation. For example, start <tt>appserver</tt> using [http://ox.io/ ox.io] as server:<br /> <br /> <nowiki>$ appserver --server=https://www.ox.io/appsuite/ build</nowiki><br /> <br /> This command will serve your app from the local directory <tt>build</tt>, and get everything else from the URL specified by the <tt>--server</tt> parameter. To serve multiple apps, you can specify multiple local directories separated by spaces.<br /> <br /> You should start <tt>appserver</tt> in a separate terminal, since it needs to run in the background. To stop <tt>appserver</tt>, press <tt>Ctrl+C</tt> in its terminal.<br /> <br /> Once appserver is running, you can access OX App Suite opening your browser with this address:<br /> <br /> http://localhost:8337/appsuite<br /> <br /> After logging in, the app should be loaded and display the <tt>alert</tt> message.<br /> <br /> If you later add images or other files, which are not JavaScript, CSS or LessCSS, then you need to [[AppSuite:Appserver#Use_with_Apache | use a web server]] to serve them.<br /> <br /> === Development cycle ===<br /> <br /> Once you are sure that your setup works, you can extend the example and write the actual code of your app. Keep in mind that after [[#Writing | writing your code]], you will always need to [[#Building | build the app]] and have your [[#Hosting the app | Appserver]] running in the background, but don't need to restart it after every build.<br /> <br /> While developing always keep in mind, that there is an [[AppSuite:Debugging_the_UI | article about debugging the user interface]] which helps you avoiding and fixing typical errors.<br /> <br /> == Packaging ==<br /> <br /> When your app is done, you probably want to test it on a staging system, and later install it on a production system. To keep track of which installed files belong to which version of which app, you should use the native package manager of the Linux distribution of the target system. The packages can be easily created using the build system.<br /> <br /> === Initialization ===<br /> First, you need to create several files describing how to package you app. Use the <tt>init-packaging</tt> task of the build system:<br /> <br /> $ build-appsuite init-packaging<br /> Node version: v0.10.21<br /> Build path: build<br /> Build version: 0.0.1-1.20131025.133931<br /> Package name: example-app<br /> Version [0.0.1]: <br /> Maintainer (Name <e-mail>): Maintainer <maintainer@example.com><br /> Copyright line [2013 Open-Xchange, Inc]: <br /> <br /> Known licenses for which you don't need to specify a file:<br /> APACHE-2, BSD-2-CLAUSE, BSD-3-CLAUSE, CC-BY-3, CC-BY-NC-3, CC-BY-NC-ND-3,<br /> CC-BY-NC-SA-3, CC-BY-ND-3, CC-BY-SA-3, CC0-1, EXPAT, GPL-2, GPL-3, LGPL-3<br /> <br /> License name [CC-BY-NC-SA-3.0]: BSD-3-Clause<br /> Short description: Example app<br /> <br /> The task presents a number of interactive prompts to get the necessary information about the generated packages. The default values are presented in square brackets ([...]) and can be selected by just pressing Enter. Otherwise, the entered values should follow the Debian Maintainer's Guide. Debian tools are especially picky about the syntax of the maintainer name and email address.<br /> <br /> If none of the known licenses suit you, you can enter any other license name. Then you will be asked to enter the file name of your license text. It should be a plain text file using the UTF-8 encoding.<br /> <br /> Some or even all prompts can be skipped by explicitly specifying the information as a build variable. The list of variable names is available in the reference of the <tt>[[AppSuite:UI_build_system#init-packaging|init-packaging]]</tt> task.<br /> <br /> After answering all the questions, you can customize the generated files to account for any additional packaging requirements.<br /> <br /> === Static Files ===<br /> If your app includes images (e.g. themes do this most of the time), then you should check the generated packaging files for sections marked<br /> <br /> ## Uncomment for multiple packages<br /> #...<br /> <br /> and remove the '#' at the start of each line in each block. This enables the creation of a second package, with a name ending in "<tt>-static</tt>". The images and any other files which are not JavaScript or CSS are served by the Apache web server, instead of the OX App Suite application server. These files are copied to a separate package for the case that the web server is on a dedicated system or maybe even has its own cluster. The default package is installed on the OX application server, and the second, "<tt>-static</tt>" package is installed on the web server.<br /> <br /> === Building Packages ===<br /> Since the actual package format depends on the distribution it is built for, and there already exist tools to create packages from suitably arranged source code archives, the OX App Suite build system merely prepares such source archives. Using the <tt>dist</tt> task to create the archives:<br /> <br /> $ build-appsuite dist<br /> Node version: v0.10.21<br /> Build path: build<br /> Build version: 0.0.1-1.20131025.150034<br /> dpkg-source: info: using source format `3.0 (quilt)'<br /> dpkg-source: info: building example-app using existing ./example-app_0.0.1.orig.tar.bz2<br /> dpkg-source: info: building example-app in example-app_0.0.1-1.debian.tar.bz2<br /> dpkg-source: info: building example-app in example-app_0.0.1-1.dsc<br /> <br /> $ ls tmp/packaging/<br /> example-app-0.0.1 example-app_0.0.1-1.dsc<br /> example-app.spec example-app_0.0.1.orig.tar.bz2<br /> example-app_0.0.1-1.debian.tar.bz2<br /> <br /> The task creates a temporary directory and four files. The archive with the extension <tt>.orig.tar.bz2</tt> contains the source of your app. It is required to build both Debian and RPM packages. The files with extensions <tt>.debian.tar.bz2</tt> and <tt>.dsc</tt> are used together with the <tt>.orig.tar.bz2</tt> archive to build Debian packages. The file with the extension <tt>.spec</tt> is used together with the <tt>.orig.tar.bz2</tt> archive to build RPM packages.<br /> <br /> ==== Building Debian Packages ====<br /> The Debian package can be built directly in the temporary directory created by the <tt>dist</tt> task:<br /> <br /> $ cd tmp/packaging/example-app-0.0.1/<br /> $ dpkg-buildpackage -b<br /> <br /> The package will be placed in <tt>tmp/packaging/</tt>.<br /> <br /> ==== Building RPM Packages ====<br /> The RPM package build tool <tt>rpmbuild</tt> requires the files to be in a specific directory layout before building:<br /> <br /> $ mkdir -p ~/rpmbuild/{SOURCES,SPECS,BUILD,RPMS}<br /> $ cp tmp/packaging/*.orig.tar.bz2 ~/rpmbuild/SOURCES/<br /> $ cp tmp/packaging/*.spec ~/rpmbuild/SPECS/<br /> $ rpmbuild --define "_topdir $HOME/rpmbuild" -bb ~/rpmbuild/SPECS/*.spec<br /> <br /> The package will be placed in <tt>~/rpmbuild/RPMS/noarch/</tt>.<br /> <br /> The parameter <tt>--define "_topdir $HOME/rpmbuild"</tt> can also be specified in the file <tt>~/.rpmmacros</tt> or, on some distributions, is even unnecessary.<br /> <br /> == Further Reading ==<br /> * You just build your first app for OX App Suite, keep in mind that there [[AppSuite:Developing for the UI#What_can_i_build.3F | quite a few options]] how you can develop for OX App Suite.<br /> * It's highly recommended to gain more knowledge about all the benefits [[AppSuite:UI_build_system | the UI build system]] and [[AppSuite:Appserver|the Appserver]] are providing you for developing OX App Suite.<br /> * If you're stuck somewhere, the article about [[AppSuite:Debugging_the_UI | debugging the UI]] might help you.<br /> * Get a better overview about [[AppSuite:Developing for the UI | developing the user inferface]].</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:GettingStarted_7.4.2&diff=16444 AppSuite:GettingStarted 7.4.2 2013-11-14T17:26:41Z

<p>John.broomfield: /* Writing */</p> <hr /> <div><div class="title">Getting Started</div><br /> <br /> <div style="float:right; padding: 10px;">[[File:OX_AppSuite_UI_Development_Workflow.png]]</div><br /> <br /> __TOC__<br /> <br /> Hello and welcome to the world of OX App Suite development. This document is designed to get you started with developing your first app for OX App Suite as quickly and simply as possible. However, along the way we will also tempt you to learn more by linking to some more in-depth documentation about the various topics we cover. <br /> <br /> <div style="clear: both"></div><br /> <br /> == Installing the Development Tools ==<br /> <br /> First, you need to install some tools which are necessary for UI development. For now, the simplest way is to download the source of the OX App Suite UI. Since the source code is kept in a [http://git-scm.com/ Git] repository, you will need <tt>git</tt> to download it:<br /> <br /> $ git clone --depth 1 -b release-7.4.1 https://code.open-xchange.com/git/wd/frontend/web<br /> <br /> This downloads the latest version and unpacks it into a subdirectory called <tt>web</tt> in the current directory.<br /> <br /> The option <tt>--depth 1</tt> prevents the download of the entire history, and reduces the download size from hundreds of MB to less than 20MB. The option <tt>-b release-7.4.1</tt> specifies a git branch. The full functionality described in this article is only available in the branch <tt>release-7.4.1</tt> until 7.4.1 is released.<br /> <br /> The tools which you will need are contained in the directory <tt>ui/bin</tt>. To simplify their use, you should add this directory to your <tt>$PATH</tt>:<br /> <br /> $ export PATH="$PATH:$(pwd)/web/ui/bin"<br /> <br /> == Create a Workspace ==<br /> <br /> All your app development can take place inside one working directory. The examples will assume you have created a directory named <tt>myapp</tt> inside your home directory:<br /> <br /> $ mkdir ~/myapp<br /> $ cd ~/myapp<br /> <br /> It doesn't need to be in your home directory, and the actual name should reflect the name of your app. The main point is that all commands will be executed in this directory and all paths will be relative to this directory from now on.<br /> <br /> The source code of your app will reside in the subfolder named <tt>apps</tt>. To avoid name collisions please pick a unique subfolder inside that. The easiest and recommended way is to use a domain name that you own. Typically, the domain elements are reversed, like in Java. <tt>example.com</tt> becomes <tt>com.example</tt>:<br /> <br /> $ mkdir -p apps/com.example<br /> <br /> == Writing an App ==<br /> <br /> As an example, let's create the smallest possible app and test it. It requires only two files: <tt>apps/com.example/register.js</tt> for the source code of the app:<br /> <br /> <pre class="language-javascript"><br /> define('com.example/register', function () {<br /> 'use strict';<br /> alert('Hello, World!');<br /> });<br /> </pre><br /> <br /> and <tt>apps/com.example/manifest.json</tt> for the [[AppSuite:UI_manifests_explained | manifest]] which tells the UI that your app exists and what to do with it:<br /> <br /> <pre class="language-javascript">{ "namespace": "core" }</pre><br /> <br /> == Building ==<br /> <br /> The source code of your app can't be used by OX App Suite as it. It has to be first processed by the [[AppSuite:UI_build_system | build system]]. This step will check the source code for syntax errors, compress it, and depending on the structure of your code, many other things. The processed code is then written to a directory named <tt>build</tt> by default. Start the build with this command:<br /> <br /> $ build-appsuite app<br /> <br /> If your editor supports it, you can configure it to call the build system after every file save. Take care to call it from the top directory of your app's workspace, not from the directory of the saved file.<br /> <br /> == Testing ==<br /> <br /> The freshly built code can now be tested. Instead of uploading your code to an OX App Suite server, you can use the [[AppSuite:Appserver|appserver]] proxy to inject your code into the UI code of any existing OX App Suite installation. For example, start <tt>appserver</tt> using [http://ox.io/ ox.io] as server:<br /> <br /> <nowiki>$ appserver --server=https://www.ox.io/appsuite/ build</nowiki><br /> <br /> This command will serve your app from the local directory <tt>build</tt>, and get everything else from the URL specified by the <tt>--server</tt> parameter. To serve multiple apps, you can specify multiple local directories separated by spaces.<br /> <br /> You should start <tt>appserver</tt> in a separate terminal, since it needs to run in the background. To stop <tt>appserver</tt>, press <tt>Ctrl+C</tt> in its terminal.<br /> <br /> Once appserver is running, you can access OX App Suite opening your browser with this address:<br /> <br /> http://localhost:8337/appsuite<br /> <br /> After logging in, the app should be loaded and display the <tt>alert</tt> message.<br /> <br /> If you later add images or other files, which are not JavaScript, CSS or LessCSS, then you need to [[AppSuite:Appserver#Use_with_Apache | use a web server]] to serve them.<br /> <br /> === Development cycle ===<br /> <br /> Once you are sure that your setup works, you can extend the example and write the actual code of your app. Keep in mind that after [[#Writing | writing your code]], you will always need to [[#Building | build the app]] and have your [[#Hosting the app | Appserver]] running in the background, but don't need to restart it after every build.<br /> <br /> While developing always keep in mind, that there is an [[AppSuite:Debugging_the_UI | article about debugging the user interface]] which helps you avoiding and fixing typical errors.<br /> <br /> == Packaging ==<br /> <br /> When your app is done, you probably want to test it on a staging system, and later install it on a production system. To keep track of which installed files belong to which version of which app, you should use the native package manager of the Linux distribution of the target system. The packages can be easily created using the build system.<br /> <br /> === Initialization ===<br /> First, you need to create several files describing how to package you app. Use the <tt>init-packaging</tt> task of the build system:<br /> <br /> $ build-appsuite init-packaging<br /> Node version: v0.10.21<br /> Build path: build<br /> Build version: 0.0.1-1.20131025.133931<br /> Package name: example-app<br /> Version [0.0.1]: <br /> Maintainer (Name <e-mail>): Maintainer <maintainer@example.com><br /> Copyright line [2013 Open-Xchange, Inc]: <br /> <br /> Known licenses for which you don't need to specify a file:<br /> APACHE-2, BSD-2-CLAUSE, BSD-3-CLAUSE, CC-BY-3, CC-BY-NC-3, CC-BY-NC-ND-3,<br /> CC-BY-NC-SA-3, CC-BY-ND-3, CC-BY-SA-3, CC0-1, EXPAT, GPL-2, GPL-3, LGPL-3<br /> <br /> License name [CC-BY-NC-SA-3.0]: BSD-3-Clause<br /> Short description: Example app<br /> <br /> The task presents a number of interactive prompts to get the necessary information about the generated packages. The default values are presented in square brackets ([...]) and can be selected by just pressing Enter. Otherwise, the entered values should follow the Debian Maintainer's Guide. Debian tools are especially picky about the syntax of the maintainer name and email address.<br /> <br /> If none of the known licenses suit you, you can enter any other license name. Then you will be asked to enter the file name of your license text. It should be a plain text file using the UTF-8 encoding.<br /> <br /> Some or even all prompts can be skipped by explicitly specifying the information as a build variable. The list of variable names is available in the reference of the <tt>[[AppSuite:UI_build_system#init-packaging|init-packaging]]</tt> task.<br /> <br /> After answering all the questions, you can customize the generated files to account for any additional packaging requirements.<br /> <br /> === Static Files ===<br /> If your app includes images (e.g. themes do this most of the time), then you should check the generated packaging files for sections marked<br /> <br /> ## Uncomment for multiple packages<br /> #...<br /> <br /> and remove the '#' at the start of each line in each block. This enables the creation of a second package, with a name ending in "<tt>-static</tt>". The images and any other files which are not JavaScript or CSS are served by the Apache web server, instead of the OX App Suite application server. These files are copied to a separate package for the case that the web server is on a dedicated system or maybe even has its own cluster. The default package is installed on the OX application server, and the second, "<tt>-static</tt>" package is installed on the web server.<br /> <br /> === Building Packages ===<br /> Since the actual package format depends on the distribution it is built for, and there already exist tools to create packages from suitably arranged source code archives, the OX App Suite build system merely prepares such source archives. Using the <tt>dist</tt> task to create the archives:<br /> <br /> $ build-appsuite dist<br /> Node version: v0.10.21<br /> Build path: build<br /> Build version: 0.0.1-1.20131025.150034<br /> dpkg-source: info: using source format `3.0 (quilt)'<br /> dpkg-source: info: building example-app using existing ./example-app_0.0.1.orig.tar.bz2<br /> dpkg-source: info: building example-app in example-app_0.0.1-1.debian.tar.bz2<br /> dpkg-source: info: building example-app in example-app_0.0.1-1.dsc<br /> <br /> $ ls tmp/packaging/<br /> example-app-0.0.1 example-app_0.0.1-1.dsc<br /> example-app.spec example-app_0.0.1.orig.tar.bz2<br /> example-app_0.0.1-1.debian.tar.bz2<br /> <br /> The task creates a temporary directory and four files. The archive with the extension <tt>.orig.tar.bz2</tt> contains the source of your app. It is required to build both Debian and RPM packages. The files with extensions <tt>.debian.tar.bz2</tt> and <tt>.dsc</tt> are used together with the <tt>.orig.tar.bz2</tt> archive to build Debian packages. The file with the extension <tt>.spec</tt> is used together with the <tt>.orig.tar.bz2</tt> archive to build RPM packages.<br /> <br /> ==== Building Debian Packages ====<br /> The Debian package can be built directly in the temporary directory created by the <tt>dist</tt> task:<br /> <br /> $ cd tmp/packaging/example-app-0.0.1/<br /> $ dpkg-buildpackage -b<br /> <br /> The package will be placed in <tt>tmp/packaging/</tt>.<br /> <br /> ==== Building RPM Packages ====<br /> The RPM package build tool <tt>rpmbuild</tt> requires the files to be in a specific directory layout before building:<br /> <br /> $ mkdir -p ~/rpmbuild/{SOURCES,SPECS,BUILD,RPMS}<br /> $ cp tmp/packaging/*.orig.tar.bz2 ~/rpmbuild/SOURCES/<br /> $ cp tmp/packaging/*.spec ~/rpmbuild/SPECS/<br /> $ rpmbuild --define "_topdir $HOME/rpmbuild" -bb ~/rpmbuild/SPECS/*.spec<br /> <br /> The package will be placed in <tt>~/rpmbuild/RPMS/noarch/</tt>.<br /> <br /> The parameter <tt>--define "_topdir $HOME/rpmbuild"</tt> can also be specified in the file <tt>~/.rpmmacros</tt> or, on some distributions, is even unnecessary.<br /> <br /> == Further Reading ==<br /> * You just build your first app for OX App Suite, keep in mind that there [[AppSuite:Developing for the UI#What_can_i_build.3F | quite a few options]] how you can develop for OX App Suite.<br /> * It's highly recommended to gain more knowledge about all the benefits [[AppSuite:UI_build_system | the UI build system]] and [[AppSuite:Appserver|the Appserver]] are providing you for developing OX App Suite.<br /> * If you're stuck somewhere, the article about [[AppSuite:Debugging_the_UI | debugging the UI]] might help you.<br /> * Get a better overview about [[AppSuite:Developing for the UI | developing the user inferface]].</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:GettingStarted_7.4.2&diff=16443 AppSuite:GettingStarted 7.4.2 2013-11-14T17:25:30Z

<p>John.broomfield: /* Create Workspace */</p> <hr /> <div><div class="title">Getting Started</div><br /> <br /> <div style="float:right; padding: 10px;">[[File:OX_AppSuite_UI_Development_Workflow.png]]</div><br /> <br /> __TOC__<br /> <br /> Hello and welcome to the world of OX App Suite development. This document is designed to get you started with developing your first app for OX App Suite as quickly and simply as possible. However, along the way we will also tempt you to learn more by linking to some more in-depth documentation about the various topics we cover. <br /> <br /> <div style="clear: both"></div><br /> <br /> == Installing the Development Tools ==<br /> <br /> First, you need to install some tools which are necessary for UI development. For now, the simplest way is to download the source of the OX App Suite UI. Since the source code is kept in a [http://git-scm.com/ Git] repository, you will need <tt>git</tt> to download it:<br /> <br /> $ git clone --depth 1 -b release-7.4.1 https://code.open-xchange.com/git/wd/frontend/web<br /> <br /> This downloads the latest version and unpacks it into a subdirectory called <tt>web</tt> in the current directory.<br /> <br /> The option <tt>--depth 1</tt> prevents the download of the entire history, and reduces the download size from hundreds of MB to less than 20MB. The option <tt>-b release-7.4.1</tt> specifies a git branch. The full functionality described in this article is only available in the branch <tt>release-7.4.1</tt> until 7.4.1 is released.<br /> <br /> The tools which you will need are contained in the directory <tt>ui/bin</tt>. To simplify their use, you should add this directory to your <tt>$PATH</tt>:<br /> <br /> $ export PATH="$PATH:$(pwd)/web/ui/bin"<br /> <br /> == Create a Workspace ==<br /> <br /> All your app development can take place inside one working directory. The examples will assume you have created a directory named <tt>myapp</tt> inside your home directory:<br /> <br /> $ mkdir ~/myapp<br /> $ cd ~/myapp<br /> <br /> It doesn't need to be in your home directory, and the actual name should reflect the name of your app. The main point is that all commands will be executed in this directory and all paths will be relative to this directory from now on.<br /> <br /> The source code of your app will reside in the subfolder named <tt>apps</tt>. To avoid name collisions please pick a unique subfolder inside that. The easiest and recommended way is to use a domain name that you own. Typically, the domain elements are reversed, like in Java. <tt>example.com</tt> becomes <tt>com.example</tt>:<br /> <br /> $ mkdir -p apps/com.example<br /> <br /> == Writing ==<br /> <br /> As an example, let's create the smallest possible app and test it. It requires only two files: <tt>apps/com.example/register.js</tt> for the source code of the app:<br /> <br /> <pre class="language-javascript"><br /> define('com.example/register', function () {<br /> 'use strict';<br /> alert('Hello, World!');<br /> });<br /> </pre><br /> <br /> and <tt>apps/com.example/manifest.json</tt> for the [[AppSuite:UI_manifests_explained | manifest]] which tells the UI that your app exists and what to do with it:<br /> <br /> <pre class="language-javascript">{ "namespace": "core" }</pre><br /> <br /> == Building ==<br /> <br /> The source code of your app can't be used by OX App Suite as it. It has to be first processed by the [[AppSuite:UI_build_system | build system]]. This step will check the source code for syntax errors, compress it, and depending on the structure of your code, many other things. The processed code is then written to a directory named <tt>build</tt> by default. Start the build with this command:<br /> <br /> $ build-appsuite app<br /> <br /> If your editor supports it, you can configure it to call the build system after every file save. Take care to call it from the top directory of your app's workspace, not from the directory of the saved file.<br /> <br /> == Testing ==<br /> <br /> The freshly built code can now be tested. Instead of uploading your code to an OX App Suite server, you can use the [[AppSuite:Appserver|appserver]] proxy to inject your code into the UI code of any existing OX App Suite installation. For example, start <tt>appserver</tt> using [http://ox.io/ ox.io] as server:<br /> <br /> <nowiki>$ appserver --server=https://www.ox.io/appsuite/ build</nowiki><br /> <br /> This command will serve your app from the local directory <tt>build</tt>, and get everything else from the URL specified by the <tt>--server</tt> parameter. To serve multiple apps, you can specify multiple local directories separated by spaces.<br /> <br /> You should start <tt>appserver</tt> in a separate terminal, since it needs to run in the background. To stop <tt>appserver</tt>, press <tt>Ctrl+C</tt> in its terminal.<br /> <br /> Once appserver is running, you can access OX App Suite opening your browser with this address:<br /> <br /> http://localhost:8337/appsuite<br /> <br /> After logging in, the app should be loaded and display the <tt>alert</tt> message.<br /> <br /> If you later add images or other files, which are not JavaScript, CSS or LessCSS, then you need to [[AppSuite:Appserver#Use_with_Apache | use a web server]] to serve them.<br /> <br /> === Development cycle ===<br /> <br /> Once you are sure that your setup works, you can extend the example and write the actual code of your app. Keep in mind that after [[#Writing | writing your code]], you will always need to [[#Building | build the app]] and have your [[#Hosting the app | Appserver]] running in the background, but don't need to restart it after every build.<br /> <br /> While developing always keep in mind, that there is an [[AppSuite:Debugging_the_UI | article about debugging the user interface]] which helps you avoiding and fixing typical errors.<br /> <br /> == Packaging ==<br /> <br /> When your app is done, you probably want to test it on a staging system, and later install it on a production system. To keep track of which installed files belong to which version of which app, you should use the native package manager of the Linux distribution of the target system. The packages can be easily created using the build system.<br /> <br /> === Initialization ===<br /> First, you need to create several files describing how to package you app. Use the <tt>init-packaging</tt> task of the build system:<br /> <br /> $ build-appsuite init-packaging<br /> Node version: v0.10.21<br /> Build path: build<br /> Build version: 0.0.1-1.20131025.133931<br /> Package name: example-app<br /> Version [0.0.1]: <br /> Maintainer (Name <e-mail>): Maintainer <maintainer@example.com><br /> Copyright line [2013 Open-Xchange, Inc]: <br /> <br /> Known licenses for which you don't need to specify a file:<br /> APACHE-2, BSD-2-CLAUSE, BSD-3-CLAUSE, CC-BY-3, CC-BY-NC-3, CC-BY-NC-ND-3,<br /> CC-BY-NC-SA-3, CC-BY-ND-3, CC-BY-SA-3, CC0-1, EXPAT, GPL-2, GPL-3, LGPL-3<br /> <br /> License name [CC-BY-NC-SA-3.0]: BSD-3-Clause<br /> Short description: Example app<br /> <br /> The task presents a number of interactive prompts to get the necessary information about the generated packages. The default values are presented in square brackets ([...]) and can be selected by just pressing Enter. Otherwise, the entered values should follow the Debian Maintainer's Guide. Debian tools are especially picky about the syntax of the maintainer name and email address.<br /> <br /> If none of the known licenses suit you, you can enter any other license name. Then you will be asked to enter the file name of your license text. It should be a plain text file using the UTF-8 encoding.<br /> <br /> Some or even all prompts can be skipped by explicitly specifying the information as a build variable. The list of variable names is available in the reference of the <tt>[[AppSuite:UI_build_system#init-packaging|init-packaging]]</tt> task.<br /> <br /> After answering all the questions, you can customize the generated files to account for any additional packaging requirements.<br /> <br /> === Static Files ===<br /> If your app includes images (e.g. themes do this most of the time), then you should check the generated packaging files for sections marked<br /> <br /> ## Uncomment for multiple packages<br /> #...<br /> <br /> and remove the '#' at the start of each line in each block. This enables the creation of a second package, with a name ending in "<tt>-static</tt>". The images and any other files which are not JavaScript or CSS are served by the Apache web server, instead of the OX App Suite application server. These files are copied to a separate package for the case that the web server is on a dedicated system or maybe even has its own cluster. The default package is installed on the OX application server, and the second, "<tt>-static</tt>" package is installed on the web server.<br /> <br /> === Building Packages ===<br /> Since the actual package format depends on the distribution it is built for, and there already exist tools to create packages from suitably arranged source code archives, the OX App Suite build system merely prepares such source archives. Using the <tt>dist</tt> task to create the archives:<br /> <br /> $ build-appsuite dist<br /> Node version: v0.10.21<br /> Build path: build<br /> Build version: 0.0.1-1.20131025.150034<br /> dpkg-source: info: using source format `3.0 (quilt)'<br /> dpkg-source: info: building example-app using existing ./example-app_0.0.1.orig.tar.bz2<br /> dpkg-source: info: building example-app in example-app_0.0.1-1.debian.tar.bz2<br /> dpkg-source: info: building example-app in example-app_0.0.1-1.dsc<br /> <br /> $ ls tmp/packaging/<br /> example-app-0.0.1 example-app_0.0.1-1.dsc<br /> example-app.spec example-app_0.0.1.orig.tar.bz2<br /> example-app_0.0.1-1.debian.tar.bz2<br /> <br /> The task creates a temporary directory and four files. The archive with the extension <tt>.orig.tar.bz2</tt> contains the source of your app. It is required to build both Debian and RPM packages. The files with extensions <tt>.debian.tar.bz2</tt> and <tt>.dsc</tt> are used together with the <tt>.orig.tar.bz2</tt> archive to build Debian packages. The file with the extension <tt>.spec</tt> is used together with the <tt>.orig.tar.bz2</tt> archive to build RPM packages.<br /> <br /> ==== Building Debian Packages ====<br /> The Debian package can be built directly in the temporary directory created by the <tt>dist</tt> task:<br /> <br /> $ cd tmp/packaging/example-app-0.0.1/<br /> $ dpkg-buildpackage -b<br /> <br /> The package will be placed in <tt>tmp/packaging/</tt>.<br /> <br /> ==== Building RPM Packages ====<br /> The RPM package build tool <tt>rpmbuild</tt> requires the files to be in a specific directory layout before building:<br /> <br /> $ mkdir -p ~/rpmbuild/{SOURCES,SPECS,BUILD,RPMS}<br /> $ cp tmp/packaging/*.orig.tar.bz2 ~/rpmbuild/SOURCES/<br /> $ cp tmp/packaging/*.spec ~/rpmbuild/SPECS/<br /> $ rpmbuild --define "_topdir $HOME/rpmbuild" -bb ~/rpmbuild/SPECS/*.spec<br /> <br /> The package will be placed in <tt>~/rpmbuild/RPMS/noarch/</tt>.<br /> <br /> The parameter <tt>--define "_topdir $HOME/rpmbuild"</tt> can also be specified in the file <tt>~/.rpmmacros</tt> or, on some distributions, is even unnecessary.<br /> <br /> == Further Reading ==<br /> * You just build your first app for OX App Suite, keep in mind that there [[AppSuite:Developing for the UI#What_can_i_build.3F | quite a few options]] how you can develop for OX App Suite.<br /> * It's highly recommended to gain more knowledge about all the benefits [[AppSuite:UI_build_system | the UI build system]] and [[AppSuite:Appserver|the Appserver]] are providing you for developing OX App Suite.<br /> * If you're stuck somewhere, the article about [[AppSuite:Debugging_the_UI | debugging the UI]] might help you.<br /> * Get a better overview about [[AppSuite:Developing for the UI | developing the user inferface]].</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:GettingStarted_7.4.2&diff=16442 AppSuite:GettingStarted 7.4.2 2013-11-14T17:20:51Z

<p>John.broomfield: /* Installing */</p> <hr /> <div><div class="title">Getting Started</div><br /> <br /> <div style="float:right; padding: 10px;">[[File:OX_AppSuite_UI_Development_Workflow.png]]</div><br /> <br /> __TOC__<br /> <br /> Hello and welcome to the world of OX App Suite development. This document is designed to get you started with developing your first app for OX App Suite as quickly and simply as possible. However, along the way we will also tempt you to learn more by linking to some more in-depth documentation about the various topics we cover. <br /> <br /> <div style="clear: both"></div><br /> <br /> == Installing the Development Tools ==<br /> <br /> First, you need to install some tools which are necessary for UI development. For now, the simplest way is to download the source of the OX App Suite UI. Since the source code is kept in a [http://git-scm.com/ Git] repository, you will need <tt>git</tt> to download it:<br /> <br /> $ git clone --depth 1 -b release-7.4.1 https://code.open-xchange.com/git/wd/frontend/web<br /> <br /> This downloads the latest version and unpacks it into a subdirectory called <tt>web</tt> in the current directory.<br /> <br /> The option <tt>--depth 1</tt> prevents the download of the entire history, and reduces the download size from hundreds of MB to less than 20MB. The option <tt>-b release-7.4.1</tt> specifies a git branch. The full functionality described in this article is only available in the branch <tt>release-7.4.1</tt> until 7.4.1 is released.<br /> <br /> The tools which you will need are contained in the directory <tt>ui/bin</tt>. To simplify their use, you should add this directory to your <tt>$PATH</tt>:<br /> <br /> $ export PATH="$PATH:$(pwd)/web/ui/bin"<br /> <br /> == Create Workspace ==<br /> <br /> Your entire work on an app can take place inside a working directory. The examples will assume you have created a directory named <tt>myapp</tt> inside your home directory:<br /> <br /> $ mkdir ~/myapp<br /> $ cd ~/myapp<br /> <br /> It doesn't need to be in your home directory, and the actual name should reflect the name of your app. The main point is that all commands will be executed in this directory and all relative paths will be relative to this directory from now on.<br /> <br /> The source code of your app will reside in the subfolder named <tt>apps</tt>. To avoid name collisions, pick a unique subfolder inside that. The easiest and recommended way is to use a domain name that you own. Typically, the domain element are reversed, like in Java. <tt>example.com</tt> becomes <tt>com.example</tt>:<br /> <br /> $ mkdir -p apps/com.example<br /> <br /> == Writing ==<br /> <br /> As an example, let's create the smallest possible app and test it. It requires only two files: <tt>apps/com.example/register.js</tt> for the source code of the app:<br /> <br /> <pre class="language-javascript"><br /> define('com.example/register', function () {<br /> 'use strict';<br /> alert('Hello, World!');<br /> });<br /> </pre><br /> <br /> and <tt>apps/com.example/manifest.json</tt> for the [[AppSuite:UI_manifests_explained | manifest]] which tells the UI that your app exists and what to do with it:<br /> <br /> <pre class="language-javascript">{ "namespace": "core" }</pre><br /> <br /> == Building ==<br /> <br /> The source code of your app can't be used by OX App Suite as it. It has to be first processed by the [[AppSuite:UI_build_system | build system]]. This step will check the source code for syntax errors, compress it, and depending on the structure of your code, many other things. The processed code is then written to a directory named <tt>build</tt> by default. Start the build with this command:<br /> <br /> $ build-appsuite app<br /> <br /> If your editor supports it, you can configure it to call the build system after every file save. Take care to call it from the top directory of your app's workspace, not from the directory of the saved file.<br /> <br /> == Testing ==<br /> <br /> The freshly built code can now be tested. Instead of uploading your code to an OX App Suite server, you can use the [[AppSuite:Appserver|appserver]] proxy to inject your code into the UI code of any existing OX App Suite installation. For example, start <tt>appserver</tt> using [http://ox.io/ ox.io] as server:<br /> <br /> <nowiki>$ appserver --server=https://www.ox.io/appsuite/ build</nowiki><br /> <br /> This command will serve your app from the local directory <tt>build</tt>, and get everything else from the URL specified by the <tt>--server</tt> parameter. To serve multiple apps, you can specify multiple local directories separated by spaces.<br /> <br /> You should start <tt>appserver</tt> in a separate terminal, since it needs to run in the background. To stop <tt>appserver</tt>, press <tt>Ctrl+C</tt> in its terminal.<br /> <br /> Once appserver is running, you can access OX App Suite opening your browser with this address:<br /> <br /> http://localhost:8337/appsuite<br /> <br /> After logging in, the app should be loaded and display the <tt>alert</tt> message.<br /> <br /> If you later add images or other files, which are not JavaScript, CSS or LessCSS, then you need to [[AppSuite:Appserver#Use_with_Apache | use a web server]] to serve them.<br /> <br /> === Development cycle ===<br /> <br /> Once you are sure that your setup works, you can extend the example and write the actual code of your app. Keep in mind that after [[#Writing | writing your code]], you will always need to [[#Building | build the app]] and have your [[#Hosting the app | Appserver]] running in the background, but don't need to restart it after every build.<br /> <br /> While developing always keep in mind, that there is an [[AppSuite:Debugging_the_UI | article about debugging the user interface]] which helps you avoiding and fixing typical errors.<br /> <br /> == Packaging ==<br /> <br /> When your app is done, you probably want to test it on a staging system, and later install it on a production system. To keep track of which installed files belong to which version of which app, you should use the native package manager of the Linux distribution of the target system. The packages can be easily created using the build system.<br /> <br /> === Initialization ===<br /> First, you need to create several files describing how to package you app. Use the <tt>init-packaging</tt> task of the build system:<br /> <br /> $ build-appsuite init-packaging<br /> Node version: v0.10.21<br /> Build path: build<br /> Build version: 0.0.1-1.20131025.133931<br /> Package name: example-app<br /> Version [0.0.1]: <br /> Maintainer (Name <e-mail>): Maintainer <maintainer@example.com><br /> Copyright line [2013 Open-Xchange, Inc]: <br /> <br /> Known licenses for which you don't need to specify a file:<br /> APACHE-2, BSD-2-CLAUSE, BSD-3-CLAUSE, CC-BY-3, CC-BY-NC-3, CC-BY-NC-ND-3,<br /> CC-BY-NC-SA-3, CC-BY-ND-3, CC-BY-SA-3, CC0-1, EXPAT, GPL-2, GPL-3, LGPL-3<br /> <br /> License name [CC-BY-NC-SA-3.0]: BSD-3-Clause<br /> Short description: Example app<br /> <br /> The task presents a number of interactive prompts to get the necessary information about the generated packages. The default values are presented in square brackets ([...]) and can be selected by just pressing Enter. Otherwise, the entered values should follow the Debian Maintainer's Guide. Debian tools are especially picky about the syntax of the maintainer name and email address.<br /> <br /> If none of the known licenses suit you, you can enter any other license name. Then you will be asked to enter the file name of your license text. It should be a plain text file using the UTF-8 encoding.<br /> <br /> Some or even all prompts can be skipped by explicitly specifying the information as a build variable. The list of variable names is available in the reference of the <tt>[[AppSuite:UI_build_system#init-packaging|init-packaging]]</tt> task.<br /> <br /> After answering all the questions, you can customize the generated files to account for any additional packaging requirements.<br /> <br /> === Static Files ===<br /> If your app includes images (e.g. themes do this most of the time), then you should check the generated packaging files for sections marked<br /> <br /> ## Uncomment for multiple packages<br /> #...<br /> <br /> and remove the '#' at the start of each line in each block. This enables the creation of a second package, with a name ending in "<tt>-static</tt>". The images and any other files which are not JavaScript or CSS are served by the Apache web server, instead of the OX App Suite application server. These files are copied to a separate package for the case that the web server is on a dedicated system or maybe even has its own cluster. The default package is installed on the OX application server, and the second, "<tt>-static</tt>" package is installed on the web server.<br /> <br /> === Building Packages ===<br /> Since the actual package format depends on the distribution it is built for, and there already exist tools to create packages from suitably arranged source code archives, the OX App Suite build system merely prepares such source archives. Using the <tt>dist</tt> task to create the archives:<br /> <br /> $ build-appsuite dist<br /> Node version: v0.10.21<br /> Build path: build<br /> Build version: 0.0.1-1.20131025.150034<br /> dpkg-source: info: using source format `3.0 (quilt)'<br /> dpkg-source: info: building example-app using existing ./example-app_0.0.1.orig.tar.bz2<br /> dpkg-source: info: building example-app in example-app_0.0.1-1.debian.tar.bz2<br /> dpkg-source: info: building example-app in example-app_0.0.1-1.dsc<br /> <br /> $ ls tmp/packaging/<br /> example-app-0.0.1 example-app_0.0.1-1.dsc<br /> example-app.spec example-app_0.0.1.orig.tar.bz2<br /> example-app_0.0.1-1.debian.tar.bz2<br /> <br /> The task creates a temporary directory and four files. The archive with the extension <tt>.orig.tar.bz2</tt> contains the source of your app. It is required to build both Debian and RPM packages. The files with extensions <tt>.debian.tar.bz2</tt> and <tt>.dsc</tt> are used together with the <tt>.orig.tar.bz2</tt> archive to build Debian packages. The file with the extension <tt>.spec</tt> is used together with the <tt>.orig.tar.bz2</tt> archive to build RPM packages.<br /> <br /> ==== Building Debian Packages ====<br /> The Debian package can be built directly in the temporary directory created by the <tt>dist</tt> task:<br /> <br /> $ cd tmp/packaging/example-app-0.0.1/<br /> $ dpkg-buildpackage -b<br /> <br /> The package will be placed in <tt>tmp/packaging/</tt>.<br /> <br /> ==== Building RPM Packages ====<br /> The RPM package build tool <tt>rpmbuild</tt> requires the files to be in a specific directory layout before building:<br /> <br /> $ mkdir -p ~/rpmbuild/{SOURCES,SPECS,BUILD,RPMS}<br /> $ cp tmp/packaging/*.orig.tar.bz2 ~/rpmbuild/SOURCES/<br /> $ cp tmp/packaging/*.spec ~/rpmbuild/SPECS/<br /> $ rpmbuild --define "_topdir $HOME/rpmbuild" -bb ~/rpmbuild/SPECS/*.spec<br /> <br /> The package will be placed in <tt>~/rpmbuild/RPMS/noarch/</tt>.<br /> <br /> The parameter <tt>--define "_topdir $HOME/rpmbuild"</tt> can also be specified in the file <tt>~/.rpmmacros</tt> or, on some distributions, is even unnecessary.<br /> <br /> == Further Reading ==<br /> * You just build your first app for OX App Suite, keep in mind that there [[AppSuite:Developing for the UI#What_can_i_build.3F | quite a few options]] how you can develop for OX App Suite.<br /> * It's highly recommended to gain more knowledge about all the benefits [[AppSuite:UI_build_system | the UI build system]] and [[AppSuite:Appserver|the Appserver]] are providing you for developing OX App Suite.<br /> * If you're stuck somewhere, the article about [[AppSuite:Debugging_the_UI | debugging the UI]] might help you.<br /> * Get a better overview about [[AppSuite:Developing for the UI | developing the user inferface]].</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:GettingStarted_7.4.2&diff=16441 AppSuite:GettingStarted 7.4.2 2013-11-14T17:17:15Z

<p>John.broomfield: </p> <hr /> <div><div class="title">Getting Started</div><br /> <br /> <div style="float:right; padding: 10px;">[[File:OX_AppSuite_UI_Development_Workflow.png]]</div><br /> <br /> __TOC__<br /> <br /> Hello and welcome to the world of OX App Suite development. This document is designed to get you started with developing your first app for OX App Suite as quickly and simply as possible. However, along the way we will also tempt you to learn more by linking to some more in-depth documentation about the various topics we cover. <br /> <br /> <div style="clear: both"></div><br /> <br /> == Installing ==<br /> <br /> First, you need to install some tools which are necessary for UI development. For now, the simplest way is to download the source of the OX App Suite UI. Since the source code is kept in a [http://git-scm.com/ Git] repository, you will need <tt>git</tt> to download it:<br /> <br /> $ git clone --depth 1 -b release-7.4.1 https://code.open-xchange.com/git/wd/frontend/web<br /> <br /> This downloads the latest version and unpacks it into a subdirectory <tt>web</tt> in the current directory.<br /> <br /> The option <tt>--depth 1</tt> prevents the download of the entire history, and reduces the download size from hundreds of MB to less than 20MB. The option <tt>-b release-7.4.1</tt> specifies a git branch. The full functionality described in this article is only available in the branch <tt>release-7.4.1</tt> until 7.4.1 is released.<br /> <br /> The tools which you will need are contained in the directory <tt>ui/bin</tt>. To simplify their use, you should add this directory to your <tt>$PATH</tt>:<br /> <br /> $ export PATH="$PATH:$(pwd)/web/ui/bin"<br /> <br /> == Create Workspace ==<br /> <br /> Your entire work on an app can take place inside a working directory. The examples will assume you have created a directory named <tt>myapp</tt> inside your home directory:<br /> <br /> $ mkdir ~/myapp<br /> $ cd ~/myapp<br /> <br /> It doesn't need to be in your home directory, and the actual name should reflect the name of your app. The main point is that all commands will be executed in this directory and all relative paths will be relative to this directory from now on.<br /> <br /> The source code of your app will reside in the subfolder named <tt>apps</tt>. To avoid name collisions, pick a unique subfolder inside that. The easiest and recommended way is to use a domain name that you own. Typically, the domain element are reversed, like in Java. <tt>example.com</tt> becomes <tt>com.example</tt>:<br /> <br /> $ mkdir -p apps/com.example<br /> <br /> == Writing ==<br /> <br /> As an example, let's create the smallest possible app and test it. It requires only two files: <tt>apps/com.example/register.js</tt> for the source code of the app:<br /> <br /> <pre class="language-javascript"><br /> define('com.example/register', function () {<br /> 'use strict';<br /> alert('Hello, World!');<br /> });<br /> </pre><br /> <br /> and <tt>apps/com.example/manifest.json</tt> for the [[AppSuite:UI_manifests_explained | manifest]] which tells the UI that your app exists and what to do with it:<br /> <br /> <pre class="language-javascript">{ "namespace": "core" }</pre><br /> <br /> == Building ==<br /> <br /> The source code of your app can't be used by OX App Suite as it. It has to be first processed by the [[AppSuite:UI_build_system | build system]]. This step will check the source code for syntax errors, compress it, and depending on the structure of your code, many other things. The processed code is then written to a directory named <tt>build</tt> by default. Start the build with this command:<br /> <br /> $ build-appsuite app<br /> <br /> If your editor supports it, you can configure it to call the build system after every file save. Take care to call it from the top directory of your app's workspace, not from the directory of the saved file.<br /> <br /> == Testing ==<br /> <br /> The freshly built code can now be tested. Instead of uploading your code to an OX App Suite server, you can use the [[AppSuite:Appserver|appserver]] proxy to inject your code into the UI code of any existing OX App Suite installation. For example, start <tt>appserver</tt> using [http://ox.io/ ox.io] as server:<br /> <br /> <nowiki>$ appserver --server=https://www.ox.io/appsuite/ build</nowiki><br /> <br /> This command will serve your app from the local directory <tt>build</tt>, and get everything else from the URL specified by the <tt>--server</tt> parameter. To serve multiple apps, you can specify multiple local directories separated by spaces.<br /> <br /> You should start <tt>appserver</tt> in a separate terminal, since it needs to run in the background. To stop <tt>appserver</tt>, press <tt>Ctrl+C</tt> in its terminal.<br /> <br /> Once appserver is running, you can access OX App Suite opening your browser with this address:<br /> <br /> http://localhost:8337/appsuite<br /> <br /> After logging in, the app should be loaded and display the <tt>alert</tt> message.<br /> <br /> If you later add images or other files, which are not JavaScript, CSS or LessCSS, then you need to [[AppSuite:Appserver#Use_with_Apache | use a web server]] to serve them.<br /> <br /> === Development cycle ===<br /> <br /> Once you are sure that your setup works, you can extend the example and write the actual code of your app. Keep in mind that after [[#Writing | writing your code]], you will always need to [[#Building | build the app]] and have your [[#Hosting the app | Appserver]] running in the background, but don't need to restart it after every build.<br /> <br /> While developing always keep in mind, that there is an [[AppSuite:Debugging_the_UI | article about debugging the user interface]] which helps you avoiding and fixing typical errors.<br /> <br /> == Packaging ==<br /> <br /> When your app is done, you probably want to test it on a staging system, and later install it on a production system. To keep track of which installed files belong to which version of which app, you should use the native package manager of the Linux distribution of the target system. The packages can be easily created using the build system.<br /> <br /> === Initialization ===<br /> First, you need to create several files describing how to package you app. Use the <tt>init-packaging</tt> task of the build system:<br /> <br /> $ build-appsuite init-packaging<br /> Node version: v0.10.21<br /> Build path: build<br /> Build version: 0.0.1-1.20131025.133931<br /> Package name: example-app<br /> Version [0.0.1]: <br /> Maintainer (Name <e-mail>): Maintainer <maintainer@example.com><br /> Copyright line [2013 Open-Xchange, Inc]: <br /> <br /> Known licenses for which you don't need to specify a file:<br /> APACHE-2, BSD-2-CLAUSE, BSD-3-CLAUSE, CC-BY-3, CC-BY-NC-3, CC-BY-NC-ND-3,<br /> CC-BY-NC-SA-3, CC-BY-ND-3, CC-BY-SA-3, CC0-1, EXPAT, GPL-2, GPL-3, LGPL-3<br /> <br /> License name [CC-BY-NC-SA-3.0]: BSD-3-Clause<br /> Short description: Example app<br /> <br /> The task presents a number of interactive prompts to get the necessary information about the generated packages. The default values are presented in square brackets ([...]) and can be selected by just pressing Enter. Otherwise, the entered values should follow the Debian Maintainer's Guide. Debian tools are especially picky about the syntax of the maintainer name and email address.<br /> <br /> If none of the known licenses suit you, you can enter any other license name. Then you will be asked to enter the file name of your license text. It should be a plain text file using the UTF-8 encoding.<br /> <br /> Some or even all prompts can be skipped by explicitly specifying the information as a build variable. The list of variable names is available in the reference of the <tt>[[AppSuite:UI_build_system#init-packaging|init-packaging]]</tt> task.<br /> <br /> After answering all the questions, you can customize the generated files to account for any additional packaging requirements.<br /> <br /> === Static Files ===<br /> If your app includes images (e.g. themes do this most of the time), then you should check the generated packaging files for sections marked<br /> <br /> ## Uncomment for multiple packages<br /> #...<br /> <br /> and remove the '#' at the start of each line in each block. This enables the creation of a second package, with a name ending in "<tt>-static</tt>". The images and any other files which are not JavaScript or CSS are served by the Apache web server, instead of the OX App Suite application server. These files are copied to a separate package for the case that the web server is on a dedicated system or maybe even has its own cluster. The default package is installed on the OX application server, and the second, "<tt>-static</tt>" package is installed on the web server.<br /> <br /> === Building Packages ===<br /> Since the actual package format depends on the distribution it is built for, and there already exist tools to create packages from suitably arranged source code archives, the OX App Suite build system merely prepares such source archives. Using the <tt>dist</tt> task to create the archives:<br /> <br /> $ build-appsuite dist<br /> Node version: v0.10.21<br /> Build path: build<br /> Build version: 0.0.1-1.20131025.150034<br /> dpkg-source: info: using source format `3.0 (quilt)'<br /> dpkg-source: info: building example-app using existing ./example-app_0.0.1.orig.tar.bz2<br /> dpkg-source: info: building example-app in example-app_0.0.1-1.debian.tar.bz2<br /> dpkg-source: info: building example-app in example-app_0.0.1-1.dsc<br /> <br /> $ ls tmp/packaging/<br /> example-app-0.0.1 example-app_0.0.1-1.dsc<br /> example-app.spec example-app_0.0.1.orig.tar.bz2<br /> example-app_0.0.1-1.debian.tar.bz2<br /> <br /> The task creates a temporary directory and four files. The archive with the extension <tt>.orig.tar.bz2</tt> contains the source of your app. It is required to build both Debian and RPM packages. The files with extensions <tt>.debian.tar.bz2</tt> and <tt>.dsc</tt> are used together with the <tt>.orig.tar.bz2</tt> archive to build Debian packages. The file with the extension <tt>.spec</tt> is used together with the <tt>.orig.tar.bz2</tt> archive to build RPM packages.<br /> <br /> ==== Building Debian Packages ====<br /> The Debian package can be built directly in the temporary directory created by the <tt>dist</tt> task:<br /> <br /> $ cd tmp/packaging/example-app-0.0.1/<br /> $ dpkg-buildpackage -b<br /> <br /> The package will be placed in <tt>tmp/packaging/</tt>.<br /> <br /> ==== Building RPM Packages ====<br /> The RPM package build tool <tt>rpmbuild</tt> requires the files to be in a specific directory layout before building:<br /> <br /> $ mkdir -p ~/rpmbuild/{SOURCES,SPECS,BUILD,RPMS}<br /> $ cp tmp/packaging/*.orig.tar.bz2 ~/rpmbuild/SOURCES/<br /> $ cp tmp/packaging/*.spec ~/rpmbuild/SPECS/<br /> $ rpmbuild --define "_topdir $HOME/rpmbuild" -bb ~/rpmbuild/SPECS/*.spec<br /> <br /> The package will be placed in <tt>~/rpmbuild/RPMS/noarch/</tt>.<br /> <br /> The parameter <tt>--define "_topdir $HOME/rpmbuild"</tt> can also be specified in the file <tt>~/.rpmmacros</tt> or, on some distributions, is even unnecessary.<br /> <br /> == Further Reading ==<br /> * You just build your first app for OX App Suite, keep in mind that there [[AppSuite:Developing for the UI#What_can_i_build.3F | quite a few options]] how you can develop for OX App Suite.<br /> * It's highly recommended to gain more knowledge about all the benefits [[AppSuite:UI_build_system | the UI build system]] and [[AppSuite:Appserver|the Appserver]] are providing you for developing OX App Suite.<br /> * If you're stuck somewhere, the article about [[AppSuite:Debugging_the_UI | debugging the UI]] might help you.<br /> * Get a better overview about [[AppSuite:Developing for the UI | developing the user inferface]].</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:Developing_for_the_UI&diff=16440 AppSuite:Developing for the UI 2013-11-14T16:54:51Z

<p>John.broomfield: /* What's next */</p> <hr /> <div><div class="title">UI Development for OX AppSuite</div><br /> <br /> __TOC__<br /> <br /> This page contains articles explaining the inner workings of the OX App Suite, web-based, graphical user interface. It is aimed at software developers who want to expand existing features, implement extensions or just gain a general understanding of how the UI works.<br /> <br /> === Tech Overview ===<br /> All technologies and frameworks used for developing a new component for the App Suite UI are listed and described in the following article: [[AppSuite:UI developer primer| Requirements to develop for the UI]]<br /> <br /> ==== Development Flow for the App Suite UI ====<br /> <br /> [[File:OX_AppSuite_UI_Development_Workflow.png]]<br /> <br /> === Development Guidelines ===<br /> While developing code for OX products [[AppSuite:UI Development Style Guide | the UI Developement Style Guide]] helps you write safe, clear and functional code.<br /> <br /> Designing apps, plugins and widgets, and getting them running with the right layout, colors, look and feel is a breeze if you follow the guidelines described in [[AppSuite:UI Design Guide | the UI Design Guide]].<br /> <br /> Always keep in mind that using OX products should be possible for everyone. Therefor it's important to follow simple rules regarding [[AppSuite:Accessibility | accessibility]].<br /> <br /> === Using extension points ===<br /> <br /> Writing apps or plugins for App Suite will often include extending the existing user interface. App Suite provides extension points for you to add your own content.<br /> Beginning to develop using extension points? Read this guide first: [[AppSuite:Extending the UI (Hands-on introduction) | a hands-on introduction]] for extending the OX user interface. Here you can get more information and a complete list of the [[AppSuite:Extension points |extension points]] offered by OX products.<br /> <br /> === How to get code ===<br /> Using git as a version control system and getting the code for existing OX products is quite easy.<br /> Simply clone the [[AppSuite:UI build system#Source | UI]] repository and start working with it. If you would like to develop for the server/backend (using the OSGI Framework) plugins, you should check out the [[AppSuite:Backend build system#Source | backend]].<br /> <br /> === What can I build? ===<br /> <br /> If you want a simple introduction with easy to follow steps - from creating your workspace to actually integrating your source code within App Suite - please read our [[AppSuite:GettingStarted | GettingStarted guide]].<br /> <br /> There are many options available for App Suite developers. For example:<br /> <br /> *[[AppSuite:Writing a portal plugin | A portal plugin]] is a widget, which can only be used in the 'portal'-section of App Suite. Please just check for the right [[AppSuite:Extension points |extension point]] when writing a plugin which extends and interacts with other parts of App Suite. Configuring portal plugins is described in [[AppSuite:Configuring portal plugins | this guide]].<br /> <br /> *[[AppSuite:Writing_a_contacts_plugin | A contacts plugin]] let's you modify parts of App Suite's contact view.<br /> <br /> *[[AppSuite:Using the Upsell widget | Upsell Widget]] is used to enable upsell in the App Suite so user can purchase additional features. <br /> <br /> *[[AppSuite:Writing a simple application | A real application/module]] for App Suite apps which should be displayed full screen.<br /> <br /> *[[AppSuite:Writing a notification area plugin | A notification plugin]] for App Suite<br /> <br /> *[[AppSuite:Writing a wizard | A wizard]] which can be used to show first time users important information or help with the initial configuration of settings for 3rd party applications.<br /> <br /> *[[AppSuite:Creating a settings section in AppSuite settings | Settings plugin]] allows you to extend App Suite settings or create a new section.<br /> <br /> *[[AppSuite:Embedding your settings into AppSuite settings | Settings plugin]] allows you to embed your own settings section in App Suite via iframes.<br /> <br /> And if you get stuck somewhere? Then here are some hints to help you [[AppSuite:Debugging_the_UI | debugging the UI]].<br /> <br /> === How to get your code running ===<br /> Written your first app/plugin? Using the [[AppSuite:UI build system | UI build system]] will help you to get fast, easy-to-distribute and error free builds running on your App Suite in no time. The article shows you how to package your code and copy from OX source code / directories.<br /> <br /> Because the App Suite product consists of a server and a UI, you also need a working backend (App Suite application server) to communicate with. <br /> This means you should run [[AppSuite:Appserver | Appserver]] using an existing OX App Suite server and (with local parts of App Suite) automatically get the recent stable source packages from the App Suite servers. To use your namespace as a source for hosting your app, simply add the build-path of your app as an parameter while running appserver.<br /> <br /> === What's next ===<br /> No Idea what to do first? Read our [[AppSuite:GettingStarted | GettingStarted guide]] for a step-by-step introduction on how to install the SDK, use the Build System, write your first app and get it running.</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:Developing_for_the_UI&diff=16439 AppSuite:Developing for the UI 2013-11-14T16:53:56Z

<p>John.broomfield: /* How to get your code running */</p> <hr /> <div><div class="title">UI Development for OX AppSuite</div><br /> <br /> __TOC__<br /> <br /> This page contains articles explaining the inner workings of the OX App Suite, web-based, graphical user interface. It is aimed at software developers who want to expand existing features, implement extensions or just gain a general understanding of how the UI works.<br /> <br /> === Tech Overview ===<br /> All technologies and frameworks used for developing a new component for the App Suite UI are listed and described in the following article: [[AppSuite:UI developer primer| Requirements to develop for the UI]]<br /> <br /> ==== Development Flow for the App Suite UI ====<br /> <br /> [[File:OX_AppSuite_UI_Development_Workflow.png]]<br /> <br /> === Development Guidelines ===<br /> While developing code for OX products [[AppSuite:UI Development Style Guide | the UI Developement Style Guide]] helps you write safe, clear and functional code.<br /> <br /> Designing apps, plugins and widgets, and getting them running with the right layout, colors, look and feel is a breeze if you follow the guidelines described in [[AppSuite:UI Design Guide | the UI Design Guide]].<br /> <br /> Always keep in mind that using OX products should be possible for everyone. Therefor it's important to follow simple rules regarding [[AppSuite:Accessibility | accessibility]].<br /> <br /> === Using extension points ===<br /> <br /> Writing apps or plugins for App Suite will often include extending the existing user interface. App Suite provides extension points for you to add your own content.<br /> Beginning to develop using extension points? Read this guide first: [[AppSuite:Extending the UI (Hands-on introduction) | a hands-on introduction]] for extending the OX user interface. Here you can get more information and a complete list of the [[AppSuite:Extension points |extension points]] offered by OX products.<br /> <br /> === How to get code ===<br /> Using git as a version control system and getting the code for existing OX products is quite easy.<br /> Simply clone the [[AppSuite:UI build system#Source | UI]] repository and start working with it. If you would like to develop for the server/backend (using the OSGI Framework) plugins, you should check out the [[AppSuite:Backend build system#Source | backend]].<br /> <br /> === What can I build? ===<br /> <br /> If you want a simple introduction with easy to follow steps - from creating your workspace to actually integrating your source code within App Suite - please read our [[AppSuite:GettingStarted | GettingStarted guide]].<br /> <br /> There are many options available for App Suite developers. For example:<br /> <br /> *[[AppSuite:Writing a portal plugin | A portal plugin]] is a widget, which can only be used in the 'portal'-section of App Suite. Please just check for the right [[AppSuite:Extension points |extension point]] when writing a plugin which extends and interacts with other parts of App Suite. Configuring portal plugins is described in [[AppSuite:Configuring portal plugins | this guide]].<br /> <br /> *[[AppSuite:Writing_a_contacts_plugin | A contacts plugin]] let's you modify parts of App Suite's contact view.<br /> <br /> *[[AppSuite:Using the Upsell widget | Upsell Widget]] is used to enable upsell in the App Suite so user can purchase additional features. <br /> <br /> *[[AppSuite:Writing a simple application | A real application/module]] for App Suite apps which should be displayed full screen.<br /> <br /> *[[AppSuite:Writing a notification area plugin | A notification plugin]] for App Suite<br /> <br /> *[[AppSuite:Writing a wizard | A wizard]] which can be used to show first time users important information or help with the initial configuration of settings for 3rd party applications.<br /> <br /> *[[AppSuite:Creating a settings section in AppSuite settings | Settings plugin]] allows you to extend App Suite settings or create a new section.<br /> <br /> *[[AppSuite:Embedding your settings into AppSuite settings | Settings plugin]] allows you to embed your own settings section in App Suite via iframes.<br /> <br /> And if you get stuck somewhere? Then here are some hints to help you [[AppSuite:Debugging_the_UI | debugging the UI]].<br /> <br /> === How to get your code running ===<br /> Written your first app/plugin? Using the [[AppSuite:UI build system | UI build system]] will help you to get fast, easy-to-distribute and error free builds running on your App Suite in no time. The article shows you how to package your code and copy from OX source code / directories.<br /> <br /> Because the App Suite product consists of a server and a UI, you also need a working backend (App Suite application server) to communicate with. <br /> This means you should run [[AppSuite:Appserver | Appserver]] using an existing OX App Suite server and (with local parts of App Suite) automatically get the recent stable source packages from the App Suite servers. To use your namespace as a source for hosting your app, simply add the build-path of your app as an parameter while running appserver.<br /> <br /> === What's next ===<br /> No Idea what to do first? Read our [[AppSuite:GettingStarted | GettingStarted guide]] to have a step-by-step introduction about how to install the SDK, use the Build System, write your first app and get it running.</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:Developing_for_the_UI&diff=16438 AppSuite:Developing for the UI 2013-11-14T16:50:00Z

<p>John.broomfield: /* What can I build? */</p> <hr /> <div><div class="title">UI Development for OX AppSuite</div><br /> <br /> __TOC__<br /> <br /> This page contains articles explaining the inner workings of the OX App Suite, web-based, graphical user interface. It is aimed at software developers who want to expand existing features, implement extensions or just gain a general understanding of how the UI works.<br /> <br /> === Tech Overview ===<br /> All technologies and frameworks used for developing a new component for the App Suite UI are listed and described in the following article: [[AppSuite:UI developer primer| Requirements to develop for the UI]]<br /> <br /> ==== Development Flow for the App Suite UI ====<br /> <br /> [[File:OX_AppSuite_UI_Development_Workflow.png]]<br /> <br /> === Development Guidelines ===<br /> While developing code for OX products [[AppSuite:UI Development Style Guide | the UI Developement Style Guide]] helps you write safe, clear and functional code.<br /> <br /> Designing apps, plugins and widgets, and getting them running with the right layout, colors, look and feel is a breeze if you follow the guidelines described in [[AppSuite:UI Design Guide | the UI Design Guide]].<br /> <br /> Always keep in mind that using OX products should be possible for everyone. Therefor it's important to follow simple rules regarding [[AppSuite:Accessibility | accessibility]].<br /> <br /> === Using extension points ===<br /> <br /> Writing apps or plugins for App Suite will often include extending the existing user interface. App Suite provides extension points for you to add your own content.<br /> Beginning to develop using extension points? Read this guide first: [[AppSuite:Extending the UI (Hands-on introduction) | a hands-on introduction]] for extending the OX user interface. Here you can get more information and a complete list of the [[AppSuite:Extension points |extension points]] offered by OX products.<br /> <br /> === How to get code ===<br /> Using git as a version control system and getting the code for existing OX products is quite easy.<br /> Simply clone the [[AppSuite:UI build system#Source | UI]] repository and start working with it. If you would like to develop for the server/backend (using the OSGI Framework) plugins, you should check out the [[AppSuite:Backend build system#Source | backend]].<br /> <br /> === What can I build? ===<br /> <br /> If you want a simple introduction with easy to follow steps - from creating your workspace to actually integrating your source code within App Suite - please read our [[AppSuite:GettingStarted | GettingStarted guide]].<br /> <br /> There are many options available for App Suite developers. For example:<br /> <br /> *[[AppSuite:Writing a portal plugin | A portal plugin]] is a widget, which can only be used in the 'portal'-section of App Suite. Please just check for the right [[AppSuite:Extension points |extension point]] when writing a plugin which extends and interacts with other parts of App Suite. Configuring portal plugins is described in [[AppSuite:Configuring portal plugins | this guide]].<br /> <br /> *[[AppSuite:Writing_a_contacts_plugin | A contacts plugin]] let's you modify parts of App Suite's contact view.<br /> <br /> *[[AppSuite:Using the Upsell widget | Upsell Widget]] is used to enable upsell in the App Suite so user can purchase additional features. <br /> <br /> *[[AppSuite:Writing a simple application | A real application/module]] for App Suite apps which should be displayed full screen.<br /> <br /> *[[AppSuite:Writing a notification area plugin | A notification plugin]] for App Suite<br /> <br /> *[[AppSuite:Writing a wizard | A wizard]] which can be used to show first time users important information or help with the initial configuration of settings for 3rd party applications.<br /> <br /> *[[AppSuite:Creating a settings section in AppSuite settings | Settings plugin]] allows you to extend App Suite settings or create a new section.<br /> <br /> *[[AppSuite:Embedding your settings into AppSuite settings | Settings plugin]] allows you to embed your own settings section in App Suite via iframes.<br /> <br /> And if you get stuck somewhere? Then here are some hints to help you [[AppSuite:Debugging_the_UI | debugging the UI]].<br /> <br /> === How to get your code running ===<br /> 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.<br /> <br /> Since the AppSuite product consists of a server and a UI, you also need a working backend (AppSuite application server) to communicate with. <br /> Therefor you should run [[AppSuite:Appserver | Appserver]] using an existing OX AppSuite server and (with local parts of the AppSuite) automaticly get the recent stable source packages from the AppSuite servers. For using your namespace as a source for hosting your app, simply add the build-path of your app as an parameter while running appserver.<br /> <br /> === What's next ===<br /> No Idea what to do first? Read our [[AppSuite:GettingStarted | GettingStarted guide]] to have a step-by-step introduction about how to install the SDK, use the Build System, write your first app and get it running.</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:Developing_for_the_UI&diff=16437 AppSuite:Developing for the UI 2013-11-14T16:48:25Z

<p>John.broomfield: /* What can I build? */</p> <hr /> <div><div class="title">UI Development for OX AppSuite</div><br /> <br /> __TOC__<br /> <br /> This page contains articles explaining the inner workings of the OX App Suite, web-based, graphical user interface. It is aimed at software developers who want to expand existing features, implement extensions or just gain a general understanding of how the UI works.<br /> <br /> === Tech Overview ===<br /> All technologies and frameworks used for developing a new component for the App Suite UI are listed and described in the following article: [[AppSuite:UI developer primer| Requirements to develop for the UI]]<br /> <br /> ==== Development Flow for the App Suite UI ====<br /> <br /> [[File:OX_AppSuite_UI_Development_Workflow.png]]<br /> <br /> === Development Guidelines ===<br /> While developing code for OX products [[AppSuite:UI Development Style Guide | the UI Developement Style Guide]] helps you write safe, clear and functional code.<br /> <br /> Designing apps, plugins and widgets, and getting them running with the right layout, colors, look and feel is a breeze if you follow the guidelines described in [[AppSuite:UI Design Guide | the UI Design Guide]].<br /> <br /> Always keep in mind that using OX products should be possible for everyone. Therefor it's important to follow simple rules regarding [[AppSuite:Accessibility | accessibility]].<br /> <br /> === Using extension points ===<br /> <br /> Writing apps or plugins for App Suite will often include extending the existing user interface. App Suite provides extension points for you to add your own content.<br /> Beginning to develop using extension points? Read this guide first: [[AppSuite:Extending the UI (Hands-on introduction) | a hands-on introduction]] for extending the OX user interface. Here you can get more information and a complete list of the [[AppSuite:Extension points |extension points]] offered by OX products.<br /> <br /> === How to get code ===<br /> Using git as a version control system and getting the code for existing OX products is quite easy.<br /> Simply clone the [[AppSuite:UI build system#Source | UI]] repository and start working with it. If you would like to develop for the server/backend (using the OSGI Framework) plugins, you should check out the [[AppSuite:Backend build system#Source | backend]].<br /> <br /> === What can I build? ===<br /> <br /> If you want a simple introduction with easy to follow steps - from creating your workspace to actually integrating your source code within App Suite - please read our [[AppSuite:GettingStarted | GettingStarted guide]].<br /> <br /> There are many options available for App Suite developers. For example:<br /> <br /> *[[AppSuite:Writing a portal plugin | A portal plugin]] is a widget, which can only be used in the 'portal'-section of App Suite. Please just check for the right [[AppSuite:Extension points |extension point]] when writing a plugin which extends and interacts with other parts of App Suite. Configuring portal plugins is described in [[AppSuite:Configuring portal plugins | this guide]].<br /> <br /> *[[AppSuite:Writing_a_contacts_plugin | A contacts plugin]] let's you modify parts of App Suite's contact view.<br /> <br /> *[[AppSuite:Using the Upsell widget | Upsell Widget]] is used to enable upsell in the App Suite so user can purchase additional features. <br /> <br /> *[[AppSuite:Writing a simple application | A real application/module]] for App Suite apps which should be displayed full screen.<br /> <br /> *[[AppSuite:Writing a notification area plugin | A notification plugin]] for App Suite<br /> <br /> *[[AppSuite:Writing a wizard | A wizard]] which can be used to show first time users important information or help with the initial configuration of settings for 3rd party applications.<br /> <br /> *[[AppSuite:Creating a settings section in AppSuite settings | Settings plugin]] allows you to extend App Suite settings or create a new section.<br /> <br /> *[[AppSuite:Embedding your settings into AppSuite settings | Settings plugin]] embedding your own settings section via iframe into AppSuite.<br /> <br /> And if you get stuck somewhere? Then here are some hints to help you [[AppSuite:Debugging_the_UI | debugging the UI]].<br /> <br /> === How to get your code running ===<br /> 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.<br /> <br /> Since the AppSuite product consists of a server and a UI, you also need a working backend (AppSuite application server) to communicate with. <br /> Therefor you should run [[AppSuite:Appserver | Appserver]] using an existing OX AppSuite server and (with local parts of the AppSuite) automaticly get the recent stable source packages from the AppSuite servers. For using your namespace as a source for hosting your app, simply add the build-path of your app as an parameter while running appserver.<br /> <br /> === What's next ===<br /> No Idea what to do first? Read our [[AppSuite:GettingStarted | GettingStarted guide]] to have a step-by-step introduction about how to install the SDK, use the Build System, write your first app and get it running.</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:Developing_for_the_UI&diff=16436 AppSuite:Developing for the UI 2013-11-14T16:45:14Z

<p>John.broomfield: /* What can I build? */</p> <hr /> <div><div class="title">UI Development for OX AppSuite</div><br /> <br /> __TOC__<br /> <br /> This page contains articles explaining the inner workings of the OX App Suite, web-based, graphical user interface. It is aimed at software developers who want to expand existing features, implement extensions or just gain a general understanding of how the UI works.<br /> <br /> === Tech Overview ===<br /> All technologies and frameworks used for developing a new component for the App Suite UI are listed and described in the following article: [[AppSuite:UI developer primer| Requirements to develop for the UI]]<br /> <br /> ==== Development Flow for the App Suite UI ====<br /> <br /> [[File:OX_AppSuite_UI_Development_Workflow.png]]<br /> <br /> === Development Guidelines ===<br /> While developing code for OX products [[AppSuite:UI Development Style Guide | the UI Developement Style Guide]] helps you write safe, clear and functional code.<br /> <br /> Designing apps, plugins and widgets, and getting them running with the right layout, colors, look and feel is a breeze if you follow the guidelines described in [[AppSuite:UI Design Guide | the UI Design Guide]].<br /> <br /> Always keep in mind that using OX products should be possible for everyone. Therefor it's important to follow simple rules regarding [[AppSuite:Accessibility | accessibility]].<br /> <br /> === Using extension points ===<br /> <br /> Writing apps or plugins for App Suite will often include extending the existing user interface. App Suite provides extension points for you to add your own content.<br /> Beginning to develop using extension points? Read this guide first: [[AppSuite:Extending the UI (Hands-on introduction) | a hands-on introduction]] for extending the OX user interface. Here you can get more information and a complete list of the [[AppSuite:Extension points |extension points]] offered by OX products.<br /> <br /> === How to get code ===<br /> Using git as a version control system and getting the code for existing OX products is quite easy.<br /> Simply clone the [[AppSuite:UI build system#Source | UI]] repository and start working with it. If you would like to develop for the server/backend (using the OSGI Framework) plugins, you should check out the [[AppSuite:Backend build system#Source | backend]].<br /> <br /> === What can I build? ===<br /> <br /> If you want a simple introduction with easy to follow steps - from creating your workspace to actually integrating your source code within App Suite - please read our [[AppSuite:GettingStarted | GettingStarted guide]].<br /> <br /> There are many options available for App Suite developers. For example:<br /> <br /> *[[AppSuite:Writing a portal plugin | A portal plugin]] is a widget, which can only be used in the 'portal'-section of App Suite. Please just check for the right [[AppSuite:Extension points |extension point]] when writing a plugin which extends and interacts with other parts of App Suite. Configuring portal plugins is described in [[AppSuite:Configuring portal plugins | this guide]].<br /> <br /> *[[AppSuite:Writing_a_contacts_plugin | A contacts plugin]] let's you modify parts of App Suite's contact view.<br /> <br /> *[[AppSuite:Using the Upsell widget | Upsell Widget]] is used to enable upsell in the App Suite so user can purchase additional features. <br /> <br /> *[[AppSuite:Writing a simple application | A real application/module]] for App Suite apps which should be displayed full screen.<br /> <br /> *[[AppSuite:Writing a notification area plugin | A notification plugin]] for App Suite<br /> <br /> *[[AppSuite:Writing a wizard | A wizard]] which can be used to show first time users important information or help with the initial configuration of settings for 3rd party applications.<br /> <br /> *[[AppSuite:Creating a settings section in AppSuite settings | Settings plugin]] extending AppSuite settings and creating a new section.<br /> <br /> *[[AppSuite:Embedding your settings into AppSuite settings | Settings plugin]] embedding your own settings section via iframe into AppSuite.<br /> <br /> You got stuck somewhere? There are some hints, which might help you [[AppSuite:Debugging_the_UI | debugging the UI]].<br /> <br /> === How to get your code running ===<br /> 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.<br /> <br /> Since the AppSuite product consists of a server and a UI, you also need a working backend (AppSuite application server) to communicate with. <br /> Therefor you should run [[AppSuite:Appserver | Appserver]] using an existing OX AppSuite server and (with local parts of the AppSuite) automaticly get the recent stable source packages from the AppSuite servers. For using your namespace as a source for hosting your app, simply add the build-path of your app as an parameter while running appserver.<br /> <br /> === What's next ===<br /> No Idea what to do first? Read our [[AppSuite:GettingStarted | GettingStarted guide]] to have a step-by-step introduction about how to install the SDK, use the Build System, write your first app and get it running.</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:Developing_for_the_UI&diff=16435 AppSuite:Developing for the UI 2013-11-14T16:42:37Z

<p>John.broomfield: /* What can I build? */</p> <hr /> <div><div class="title">UI Development for OX AppSuite</div><br /> <br /> __TOC__<br /> <br /> This page contains articles explaining the inner workings of the OX App Suite, web-based, graphical user interface. It is aimed at software developers who want to expand existing features, implement extensions or just gain a general understanding of how the UI works.<br /> <br /> === Tech Overview ===<br /> All technologies and frameworks used for developing a new component for the App Suite UI are listed and described in the following article: [[AppSuite:UI developer primer| Requirements to develop for the UI]]<br /> <br /> ==== Development Flow for the App Suite UI ====<br /> <br /> [[File:OX_AppSuite_UI_Development_Workflow.png]]<br /> <br /> === Development Guidelines ===<br /> While developing code for OX products [[AppSuite:UI Development Style Guide | the UI Developement Style Guide]] helps you write safe, clear and functional code.<br /> <br /> Designing apps, plugins and widgets, and getting them running with the right layout, colors, look and feel is a breeze if you follow the guidelines described in [[AppSuite:UI Design Guide | the UI Design Guide]].<br /> <br /> Always keep in mind that using OX products should be possible for everyone. Therefor it's important to follow simple rules regarding [[AppSuite:Accessibility | accessibility]].<br /> <br /> === Using extension points ===<br /> <br /> Writing apps or plugins for App Suite will often include extending the existing user interface. App Suite provides extension points for you to add your own content.<br /> Beginning to develop using extension points? Read this guide first: [[AppSuite:Extending the UI (Hands-on introduction) | a hands-on introduction]] for extending the OX user interface. Here you can get more information and a complete list of the [[AppSuite:Extension points |extension points]] offered by OX products.<br /> <br /> === How to get code ===<br /> Using git as a version control system and getting the code for existing OX products is quite easy.<br /> Simply clone the [[AppSuite:UI build system#Source | UI]] repository and start working with it. If you would like to develop for the server/backend (using the OSGI Framework) plugins, you should check out the [[AppSuite:Backend build system#Source | backend]].<br /> <br /> === What can I build? ===<br /> <br /> If you want a simple introduction with easy to follow steps - from creating your workspace to actually integrating your source code within App Suite - please read our [[AppSuite:GettingStarted | GettingStarted guide]].<br /> <br /> There are many options available for App Suite developers. For example:<br /> <br /> *[[AppSuite:Writing a portal plugin | A portal plugin]] is a widget, which can only be used in the 'portal'-section of App Suite. Please just check for the right [[AppSuite:Extension points |extension point]] when writing a plugin which extends and interacts with other parts of App Suite. Configuring portal plugins is described in [[AppSuite:Configuring portal plugins | this guide]].<br /> <br /> *[[AppSuite:Writing_a_contacts_plugin | A contacts plugin]] let's you modify parts of App Suite's contact view.<br /> <br /> *[[AppSuite:Using the Upsell widget | Upsell Widget]], is used to enable upsell in the App Suite so user can purchase additional features. <br /> <br /> *[[AppSuite:Writing a simple application | A real application/module]] for App Suite apps which should be displayed full screen.<br /> <br /> *[[AppSuite:Writing a notification area plugin | A notification plugin]] for App Suite<br /> <br /> *[[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.<br /> <br /> *[[AppSuite:Creating a settings section in AppSuite settings | Settings plugin]] extending AppSuite settings and creating a new section.<br /> <br /> *[[AppSuite:Embedding your settings into AppSuite settings | Settings plugin]] embedding your own settings section via iframe into AppSuite.<br /> <br /> You got stuck somewhere? There are some hints, which might help you [[AppSuite:Debugging_the_UI | debugging the UI]].<br /> <br /> === How to get your code running ===<br /> 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.<br /> <br /> Since the AppSuite product consists of a server and a UI, you also need a working backend (AppSuite application server) to communicate with. <br /> Therefor you should run [[AppSuite:Appserver | Appserver]] using an existing OX AppSuite server and (with local parts of the AppSuite) automaticly get the recent stable source packages from the AppSuite servers. For using your namespace as a source for hosting your app, simply add the build-path of your app as an parameter while running appserver.<br /> <br /> === What's next ===<br /> No Idea what to do first? Read our [[AppSuite:GettingStarted | GettingStarted guide]] to have a step-by-step introduction about how to install the SDK, use the Build System, write your first app and get it running.</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:Developing_for_the_UI&diff=16434 AppSuite:Developing for the UI 2013-11-14T16:41:28Z

<p>John.broomfield: /* What can I build? */</p> <hr /> <div><div class="title">UI Development for OX AppSuite</div><br /> <br /> __TOC__<br /> <br /> This page contains articles explaining the inner workings of the OX App Suite, web-based, graphical user interface. It is aimed at software developers who want to expand existing features, implement extensions or just gain a general understanding of how the UI works.<br /> <br /> === Tech Overview ===<br /> All technologies and frameworks used for developing a new component for the App Suite UI are listed and described in the following article: [[AppSuite:UI developer primer| Requirements to develop for the UI]]<br /> <br /> ==== Development Flow for the App Suite UI ====<br /> <br /> [[File:OX_AppSuite_UI_Development_Workflow.png]]<br /> <br /> === Development Guidelines ===<br /> While developing code for OX products [[AppSuite:UI Development Style Guide | the UI Developement Style Guide]] helps you write safe, clear and functional code.<br /> <br /> Designing apps, plugins and widgets, and getting them running with the right layout, colors, look and feel is a breeze if you follow the guidelines described in [[AppSuite:UI Design Guide | the UI Design Guide]].<br /> <br /> Always keep in mind that using OX products should be possible for everyone. Therefor it's important to follow simple rules regarding [[AppSuite:Accessibility | accessibility]].<br /> <br /> === Using extension points ===<br /> <br /> Writing apps or plugins for App Suite will often include extending the existing user interface. App Suite provides extension points for you to add your own content.<br /> Beginning to develop using extension points? Read this guide first: [[AppSuite:Extending the UI (Hands-on introduction) | a hands-on introduction]] for extending the OX user interface. Here you can get more information and a complete list of the [[AppSuite:Extension points |extension points]] offered by OX products.<br /> <br /> === How to get code ===<br /> Using git as a version control system and getting the code for existing OX products is quite easy.<br /> Simply clone the [[AppSuite:UI build system#Source | UI]] repository and start working with it. If you would like to develop for the server/backend (using the OSGI Framework) plugins, you should check out the [[AppSuite:Backend build system#Source | backend]].<br /> <br /> === What can I build? ===<br /> <br /> If you want a simple introduction with easy to follow steps - from creating your workspace to actually integrating your source code within App Suite - please read our [[AppSuite:GettingStarted | GettingStarted guide]].<br /> <br /> There are many options available for App Suite developers. For example:<br /> <br /> *[[AppSuite:Writing a portal plugin | A portal plugin]] is a widget, which can only be used in the 'portal'-section of App Suite. Please just check for the right [[AppSuite:Extension points |extension point]] when writing a plugin which extends and interacts with other parts of App Suite. Configuring portal plugins is described in [[AppSuite:Configuring portal plugins | this guide]].<br /> <br /> *[[AppSuite:Writing_a_contacts_plugin | A contacts plugin]] let's you modify parts of App Suite's contact view.<br /> <br /> *[[AppSuite:Using the Upsell widget | Upsell Widget]], is used to enable upsell in the App Suite so user can purchase additional features. <br /> <br /> *[[AppSuite:Writing a simple application | A real application/module]] for App Suite, which should be displayed full screen.<br /> <br /> *[[AppSuite:Writing a notification area plugin | A notification plugin]] for App Suite<br /> <br /> *[[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.<br /> <br /> *[[AppSuite:Creating a settings section in AppSuite settings | Settings plugin]] extending AppSuite settings and creating a new section.<br /> <br /> *[[AppSuite:Embedding your settings into AppSuite settings | Settings plugin]] embedding your own settings section via iframe into AppSuite.<br /> <br /> You got stuck somewhere? There are some hints, which might help you [[AppSuite:Debugging_the_UI | debugging the UI]].<br /> <br /> === How to get your code running ===<br /> 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.<br /> <br /> Since the AppSuite product consists of a server and a UI, you also need a working backend (AppSuite application server) to communicate with. <br /> Therefor you should run [[AppSuite:Appserver | Appserver]] using an existing OX AppSuite server and (with local parts of the AppSuite) automaticly get the recent stable source packages from the AppSuite servers. For using your namespace as a source for hosting your app, simply add the build-path of your app as an parameter while running appserver.<br /> <br /> === What's next ===<br /> No Idea what to do first? Read our [[AppSuite:GettingStarted | GettingStarted guide]] to have a step-by-step introduction about how to install the SDK, use the Build System, write your first app and get it running.</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:Developing_for_the_UI&diff=16433 AppSuite:Developing for the UI 2013-11-14T16:40:15Z

<p>John.broomfield: /* What can I build? */</p> <hr /> <div><div class="title">UI Development for OX AppSuite</div><br /> <br /> __TOC__<br /> <br /> This page contains articles explaining the inner workings of the OX App Suite, web-based, graphical user interface. It is aimed at software developers who want to expand existing features, implement extensions or just gain a general understanding of how the UI works.<br /> <br /> === Tech Overview ===<br /> All technologies and frameworks used for developing a new component for the App Suite UI are listed and described in the following article: [[AppSuite:UI developer primer| Requirements to develop for the UI]]<br /> <br /> ==== Development Flow for the App Suite UI ====<br /> <br /> [[File:OX_AppSuite_UI_Development_Workflow.png]]<br /> <br /> === Development Guidelines ===<br /> While developing code for OX products [[AppSuite:UI Development Style Guide | the UI Developement Style Guide]] helps you write safe, clear and functional code.<br /> <br /> Designing apps, plugins and widgets, and getting them running with the right layout, colors, look and feel is a breeze if you follow the guidelines described in [[AppSuite:UI Design Guide | the UI Design Guide]].<br /> <br /> Always keep in mind that using OX products should be possible for everyone. Therefor it's important to follow simple rules regarding [[AppSuite:Accessibility | accessibility]].<br /> <br /> === Using extension points ===<br /> <br /> Writing apps or plugins for App Suite will often include extending the existing user interface. App Suite provides extension points for you to add your own content.<br /> Beginning to develop using extension points? Read this guide first: [[AppSuite:Extending the UI (Hands-on introduction) | a hands-on introduction]] for extending the OX user interface. Here you can get more information and a complete list of the [[AppSuite:Extension points |extension points]] offered by OX products.<br /> <br /> === How to get code ===<br /> Using git as a version control system and getting the code for existing OX products is quite easy.<br /> Simply clone the [[AppSuite:UI build system#Source | UI]] repository and start working with it. If you would like to develop for the server/backend (using the OSGI Framework) plugins, you should check out the [[AppSuite:Backend build system#Source | backend]].<br /> <br /> === What can I build? ===<br /> <br /> If you want a simple introduction with easy to follow steps - from creating your workspace to actually integrating your source code within App Suite - please read our [[AppSuite:GettingStarted | GettingStarted guide]].<br /> <br /> There are many options available for App Suite developers. For example:<br /> <br /> *[[AppSuite:Writing a portal plugin | A portal plugin]] is a widget, which can only be used in the 'portal'-section of App Suite. Please just check for the right [[AppSuite:Extension points |extension point]] when writing a plugin which extends and interacts with other parts of App Suite. Configuring portal plugins is described in [[AppSuite:Configuring portal plugins | this guide]].<br /> <br /> *[[AppSuite:Writing_a_contacts_plugin | A contacts plugin]] let's you modify parts of App Suite's contact view.<br /> <br /> *[[AppSuite:Using the Upsell widget | Upsell Widget]], to enable the App Suite user to purchase additional features. <br /> <br /> *[[AppSuite:Writing a simple application | A real application/module]] for App Suite, which should be displayed full screen.<br /> <br /> *[[AppSuite:Writing a notification area plugin | A notification plugin]] for App Suite<br /> <br /> *[[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.<br /> <br /> *[[AppSuite:Creating a settings section in AppSuite settings | Settings plugin]] extending AppSuite settings and creating a new section.<br /> <br /> *[[AppSuite:Embedding your settings into AppSuite settings | Settings plugin]] embedding your own settings section via iframe into AppSuite.<br /> <br /> You got stuck somewhere? There are some hints, which might help you [[AppSuite:Debugging_the_UI | debugging the UI]].<br /> <br /> === How to get your code running ===<br /> 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.<br /> <br /> Since the AppSuite product consists of a server and a UI, you also need a working backend (AppSuite application server) to communicate with. <br /> Therefor you should run [[AppSuite:Appserver | Appserver]] using an existing OX AppSuite server and (with local parts of the AppSuite) automaticly get the recent stable source packages from the AppSuite servers. For using your namespace as a source for hosting your app, simply add the build-path of your app as an parameter while running appserver.<br /> <br /> === What's next ===<br /> No Idea what to do first? Read our [[AppSuite:GettingStarted | GettingStarted guide]] to have a step-by-step introduction about how to install the SDK, use the Build System, write your first app and get it running.</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:Developing_for_the_UI&diff=16432 AppSuite:Developing for the UI 2013-11-14T16:38:33Z

<p>John.broomfield: /* What can I build? */</p> <hr /> <div><div class="title">UI Development for OX AppSuite</div><br /> <br /> __TOC__<br /> <br /> This page contains articles explaining the inner workings of the OX App Suite, web-based, graphical user interface. It is aimed at software developers who want to expand existing features, implement extensions or just gain a general understanding of how the UI works.<br /> <br /> === Tech Overview ===<br /> All technologies and frameworks used for developing a new component for the App Suite UI are listed and described in the following article: [[AppSuite:UI developer primer| Requirements to develop for the UI]]<br /> <br /> ==== Development Flow for the App Suite UI ====<br /> <br /> [[File:OX_AppSuite_UI_Development_Workflow.png]]<br /> <br /> === Development Guidelines ===<br /> While developing code for OX products [[AppSuite:UI Development Style Guide | the UI Developement Style Guide]] helps you write safe, clear and functional code.<br /> <br /> Designing apps, plugins and widgets, and getting them running with the right layout, colors, look and feel is a breeze if you follow the guidelines described in [[AppSuite:UI Design Guide | the UI Design Guide]].<br /> <br /> Always keep in mind that using OX products should be possible for everyone. Therefor it's important to follow simple rules regarding [[AppSuite:Accessibility | accessibility]].<br /> <br /> === Using extension points ===<br /> <br /> Writing apps or plugins for App Suite will often include extending the existing user interface. App Suite provides extension points for you to add your own content.<br /> Beginning to develop using extension points? Read this guide first: [[AppSuite:Extending the UI (Hands-on introduction) | a hands-on introduction]] for extending the OX user interface. Here you can get more information and a complete list of the [[AppSuite:Extension points |extension points]] offered by OX products.<br /> <br /> === How to get code ===<br /> Using git as a version control system and getting the code for existing OX products is quite easy.<br /> Simply clone the [[AppSuite:UI build system#Source | UI]] repository and start working with it. If you would like to develop for the server/backend (using the OSGI Framework) plugins, you should check out the [[AppSuite:Backend build system#Source | backend]].<br /> <br /> === What can I build? ===<br /> <br /> If you want a simple introduction with easy to follow steps - from creating your workspace to actually integrating your source code within App Suite - please read our [[AppSuite:GettingStarted | GettingStarted guide]].<br /> <br /> There are many options available for App Suite developers. For example:<br /> <br /> *[[AppSuite:Writing a portal plugin | A portal plugin]] is a widget, which can only be used in the 'portal'-section of App Suite. Please just check for the right [[AppSuite:Extension points |extension point]] when writing a plugin which extends and interacts with other parts of AppSuite. Configuring portal plugins is described here [[AppSuite:Configuring portal plugins | this guide]].<br /> <br /> *[[AppSuite:Writing_a_contacts_plugin | A contacts plugin]] let's you modify parts of AppSuite's contact view.<br /> <br /> *[[AppSuite:Using the Upsell widget | Upsell Widget]], to enable the AppSuite user to purchase additional features. <br /> <br /> *[[AppSuite:Writing a simple application | A real application/module]] for AppSuite, which should be displayed full screen.<br /> <br /> *[[AppSuite:Writing a notification area plugin | A notification plugin]] for AppSuite<br /> <br /> *[[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.<br /> <br /> *[[AppSuite:Creating a settings section in AppSuite settings | Settings plugin]] extending AppSuite settings and creating a new section.<br /> <br /> *[[AppSuite:Embedding your settings into AppSuite settings | Settings plugin]] embedding your own settings section via iframe into AppSuite.<br /> <br /> You got stuck somewhere? There are some hints, which might help you [[AppSuite:Debugging_the_UI | debugging the UI]].<br /> <br /> === How to get your code running ===<br /> 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.<br /> <br /> Since the AppSuite product consists of a server and a UI, you also need a working backend (AppSuite application server) to communicate with. <br /> Therefor you should run [[AppSuite:Appserver | Appserver]] using an existing OX AppSuite server and (with local parts of the AppSuite) automaticly get the recent stable source packages from the AppSuite servers. For using your namespace as a source for hosting your app, simply add the build-path of your app as an parameter while running appserver.<br /> <br /> === What's next ===<br /> No Idea what to do first? Read our [[AppSuite:GettingStarted | GettingStarted guide]] to have a step-by-step introduction about how to install the SDK, use the Build System, write your first app and get it running.</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:Developing_for_the_UI&diff=16431 AppSuite:Developing for the UI 2013-11-14T16:36:46Z

<p>John.broomfield: /* What can I build? */</p> <hr /> <div><div class="title">UI Development for OX AppSuite</div><br /> <br /> __TOC__<br /> <br /> This page contains articles explaining the inner workings of the OX App Suite, web-based, graphical user interface. It is aimed at software developers who want to expand existing features, implement extensions or just gain a general understanding of how the UI works.<br /> <br /> === Tech Overview ===<br /> All technologies and frameworks used for developing a new component for the App Suite UI are listed and described in the following article: [[AppSuite:UI developer primer| Requirements to develop for the UI]]<br /> <br /> ==== Development Flow for the App Suite UI ====<br /> <br /> [[File:OX_AppSuite_UI_Development_Workflow.png]]<br /> <br /> === Development Guidelines ===<br /> While developing code for OX products [[AppSuite:UI Development Style Guide | the UI Developement Style Guide]] helps you write safe, clear and functional code.<br /> <br /> Designing apps, plugins and widgets, and getting them running with the right layout, colors, look and feel is a breeze if you follow the guidelines described in [[AppSuite:UI Design Guide | the UI Design Guide]].<br /> <br /> Always keep in mind that using OX products should be possible for everyone. Therefor it's important to follow simple rules regarding [[AppSuite:Accessibility | accessibility]].<br /> <br /> === Using extension points ===<br /> <br /> Writing apps or plugins for App Suite will often include extending the existing user interface. App Suite provides extension points for you to add your own content.<br /> Beginning to develop using extension points? Read this guide first: [[AppSuite:Extending the UI (Hands-on introduction) | a hands-on introduction]] for extending the OX user interface. Here you can get more information and a complete list of the [[AppSuite:Extension points |extension points]] offered by OX products.<br /> <br /> === How to get code ===<br /> Using git as a version control system and getting the code for existing OX products is quite easy.<br /> Simply clone the [[AppSuite:UI build system#Source | UI]] repository and start working with it. If you would like to develop for the server/backend (using the OSGI Framework) plugins, you should check out the [[AppSuite:Backend build system#Source | backend]].<br /> <br /> === What can I build? ===<br /> <br /> If you want a simple introduction with easy to follow steps - from creating your workspace to actually integrating your source code within App Suite - please read our [[AppSuite:GettingStarted | GettingStarted guide]].<br /> <br /> There are many options available for App Suite developers. For example:<br /> <br /> *[[AppSuite:Writing a portal plugin | A portal plugin]] is a widget, which can only be used in the 'portal'-section of App Suite. 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]].<br /> <br /> *[[AppSuite:Writing_a_contacts_plugin | A contacts plugin]] let's you modify parts of AppSuite's contact view.<br /> <br /> *[[AppSuite:Using the Upsell widget | Upsell Widget]], to enable the AppSuite user to purchase additional features. <br /> <br /> *[[AppSuite:Writing a simple application | A real application/module]] for AppSuite, which should be displayed full screen.<br /> <br /> *[[AppSuite:Writing a notification area plugin | A notification plugin]] for AppSuite<br /> <br /> *[[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.<br /> <br /> *[[AppSuite:Creating a settings section in AppSuite settings | Settings plugin]] extending AppSuite settings and creating a new section.<br /> <br /> *[[AppSuite:Embedding your settings into AppSuite settings | Settings plugin]] embedding your own settings section via iframe into AppSuite.<br /> <br /> You got stuck somewhere? There are some hints, which might help you [[AppSuite:Debugging_the_UI | debugging the UI]].<br /> <br /> === How to get your code running ===<br /> 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.<br /> <br /> Since the AppSuite product consists of a server and a UI, you also need a working backend (AppSuite application server) to communicate with. <br /> Therefor you should run [[AppSuite:Appserver | Appserver]] using an existing OX AppSuite server and (with local parts of the AppSuite) automaticly get the recent stable source packages from the AppSuite servers. For using your namespace as a source for hosting your app, simply add the build-path of your app as an parameter while running appserver.<br /> <br /> === What's next ===<br /> No Idea what to do first? Read our [[AppSuite:GettingStarted | GettingStarted guide]] to have a step-by-step introduction about how to install the SDK, use the Build System, write your first app and get it running.</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:Developing_for_the_UI&diff=16430 AppSuite:Developing for the UI 2013-11-14T16:35:47Z

<p>John.broomfield: /* What can I build? */</p> <hr /> <div><div class="title">UI Development for OX AppSuite</div><br /> <br /> __TOC__<br /> <br /> This page contains articles explaining the inner workings of the OX App Suite, web-based, graphical user interface. It is aimed at software developers who want to expand existing features, implement extensions or just gain a general understanding of how the UI works.<br /> <br /> === Tech Overview ===<br /> All technologies and frameworks used for developing a new component for the App Suite UI are listed and described in the following article: [[AppSuite:UI developer primer| Requirements to develop for the UI]]<br /> <br /> ==== Development Flow for the App Suite UI ====<br /> <br /> [[File:OX_AppSuite_UI_Development_Workflow.png]]<br /> <br /> === Development Guidelines ===<br /> While developing code for OX products [[AppSuite:UI Development Style Guide | the UI Developement Style Guide]] helps you write safe, clear and functional code.<br /> <br /> Designing apps, plugins and widgets, and getting them running with the right layout, colors, look and feel is a breeze if you follow the guidelines described in [[AppSuite:UI Design Guide | the UI Design Guide]].<br /> <br /> Always keep in mind that using OX products should be possible for everyone. Therefor it's important to follow simple rules regarding [[AppSuite:Accessibility | accessibility]].<br /> <br /> === Using extension points ===<br /> <br /> Writing apps or plugins for App Suite will often include extending the existing user interface. App Suite provides extension points for you to add your own content.<br /> Beginning to develop using extension points? Read this guide first: [[AppSuite:Extending the UI (Hands-on introduction) | a hands-on introduction]] for extending the OX user interface. Here you can get more information and a complete list of the [[AppSuite:Extension points |extension points]] offered by OX products.<br /> <br /> === How to get code ===<br /> Using git as a version control system and getting the code for existing OX products is quite easy.<br /> Simply clone the [[AppSuite:UI build system#Source | UI]] repository and start working with it. If you would like to develop for the server/backend (using the OSGI Framework) plugins, you should check out the [[AppSuite:Backend build system#Source | backend]].<br /> <br /> === What can I build? ===<br /> <br /> If you want a simple introduction with easy to follow steps - from creating your workspace to actually integrating your source code within App Suite - please read our [[AppSuite:GettingStarted | GettingStarted guide]].<br /> <br /> There are many options available for App Suite developers. For example:<br /> <br /> *[[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]].<br /> <br /> *[[AppSuite:Writing_a_contacts_plugin | A contacts plugin]] let's you modify parts of AppSuite's contact view.<br /> <br /> *[[AppSuite:Using the Upsell widget | Upsell Widget]], to enable the AppSuite user to purchase additional features. <br /> <br /> *[[AppSuite:Writing a simple application | A real application/module]] for AppSuite, which should be displayed full screen.<br /> <br /> *[[AppSuite:Writing a notification area plugin | A notification plugin]] for AppSuite<br /> <br /> *[[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.<br /> <br /> *[[AppSuite:Creating a settings section in AppSuite settings | Settings plugin]] extending AppSuite settings and creating a new section.<br /> <br /> *[[AppSuite:Embedding your settings into AppSuite settings | Settings plugin]] embedding your own settings section via iframe into AppSuite.<br /> <br /> You got stuck somewhere? There are some hints, which might help you [[AppSuite:Debugging_the_UI | debugging the UI]].<br /> <br /> === How to get your code running ===<br /> 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.<br /> <br /> Since the AppSuite product consists of a server and a UI, you also need a working backend (AppSuite application server) to communicate with. <br /> Therefor you should run [[AppSuite:Appserver | Appserver]] using an existing OX AppSuite server and (with local parts of the AppSuite) automaticly get the recent stable source packages from the AppSuite servers. For using your namespace as a source for hosting your app, simply add the build-path of your app as an parameter while running appserver.<br /> <br /> === What's next ===<br /> No Idea what to do first? Read our [[AppSuite:GettingStarted | GettingStarted guide]] to have a step-by-step introduction about how to install the SDK, use the Build System, write your first app and get it running.</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:Developing_for_the_UI&diff=16429 AppSuite:Developing for the UI 2013-11-14T16:35:01Z

<p>John.broomfield: /* What can I build? */</p> <hr /> <div><div class="title">UI Development for OX AppSuite</div><br /> <br /> __TOC__<br /> <br /> This page contains articles explaining the inner workings of the OX App Suite, web-based, graphical user interface. It is aimed at software developers who want to expand existing features, implement extensions or just gain a general understanding of how the UI works.<br /> <br /> === Tech Overview ===<br /> All technologies and frameworks used for developing a new component for the App Suite UI are listed and described in the following article: [[AppSuite:UI developer primer| Requirements to develop for the UI]]<br /> <br /> ==== Development Flow for the App Suite UI ====<br /> <br /> [[File:OX_AppSuite_UI_Development_Workflow.png]]<br /> <br /> === Development Guidelines ===<br /> While developing code for OX products [[AppSuite:UI Development Style Guide | the UI Developement Style Guide]] helps you write safe, clear and functional code.<br /> <br /> Designing apps, plugins and widgets, and getting them running with the right layout, colors, look and feel is a breeze if you follow the guidelines described in [[AppSuite:UI Design Guide | the UI Design Guide]].<br /> <br /> Always keep in mind that using OX products should be possible for everyone. Therefor it's important to follow simple rules regarding [[AppSuite:Accessibility | accessibility]].<br /> <br /> === Using extension points ===<br /> <br /> Writing apps or plugins for App Suite will often include extending the existing user interface. App Suite provides extension points for you to add your own content.<br /> Beginning to develop using extension points? Read this guide first: [[AppSuite:Extending the UI (Hands-on introduction) | a hands-on introduction]] for extending the OX user interface. Here you can get more information and a complete list of the [[AppSuite:Extension points |extension points]] offered by OX products.<br /> <br /> === How to get code ===<br /> Using git as a version control system and getting the code for existing OX products is quite easy.<br /> Simply clone the [[AppSuite:UI build system#Source | UI]] repository and start working with it. If you would like to develop for the server/backend (using the OSGI Framework) plugins, you should check out the [[AppSuite:Backend build system#Source | backend]].<br /> <br /> === What can I build? ===<br /> <br /> If you want a simple introduction with easy to follow steps - from creating your workspace to actually integrating your source code within App Suite - please read our [[AppSuite:GettingStarted | GettingStarted guide]].<br /> <br /> There are many options available for App Suite developers.<br /> <br /> *[[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]].<br /> <br /> *[[AppSuite:Writing_a_contacts_plugin | A contacts plugin]] let's you modify parts of AppSuite's contact view.<br /> <br /> *[[AppSuite:Using the Upsell widget | Upsell Widget]], to enable the AppSuite user to purchase additional features. <br /> <br /> *[[AppSuite:Writing a simple application | A real application/module]] for AppSuite, which should be displayed full screen.<br /> <br /> *[[AppSuite:Writing a notification area plugin | A notification plugin]] for AppSuite<br /> <br /> *[[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.<br /> <br /> *[[AppSuite:Creating a settings section in AppSuite settings | Settings plugin]] extending AppSuite settings and creating a new section.<br /> <br /> *[[AppSuite:Embedding your settings into AppSuite settings | Settings plugin]] embedding your own settings section via iframe into AppSuite.<br /> <br /> You got stuck somewhere? There are some hints, which might help you [[AppSuite:Debugging_the_UI | debugging the UI]].<br /> <br /> === How to get your code running ===<br /> 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.<br /> <br /> Since the AppSuite product consists of a server and a UI, you also need a working backend (AppSuite application server) to communicate with. <br /> Therefor you should run [[AppSuite:Appserver | Appserver]] using an existing OX AppSuite server and (with local parts of the AppSuite) automaticly get the recent stable source packages from the AppSuite servers. For using your namespace as a source for hosting your app, simply add the build-path of your app as an parameter while running appserver.<br /> <br /> === What's next ===<br /> No Idea what to do first? Read our [[AppSuite:GettingStarted | GettingStarted guide]] to have a step-by-step introduction about how to install the SDK, use the Build System, write your first app and get it running.</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:Developing_for_the_UI&diff=16428 AppSuite:Developing for the UI 2013-11-14T16:32:49Z

<p>John.broomfield: /* What can I build? */</p> <hr /> <div><div class="title">UI Development for OX AppSuite</div><br /> <br /> __TOC__<br /> <br /> This page contains articles explaining the inner workings of the OX App Suite, web-based, graphical user interface. It is aimed at software developers who want to expand existing features, implement extensions or just gain a general understanding of how the UI works.<br /> <br /> === Tech Overview ===<br /> All technologies and frameworks used for developing a new component for the App Suite UI are listed and described in the following article: [[AppSuite:UI developer primer| Requirements to develop for the UI]]<br /> <br /> ==== Development Flow for the App Suite UI ====<br /> <br /> [[File:OX_AppSuite_UI_Development_Workflow.png]]<br /> <br /> === Development Guidelines ===<br /> While developing code for OX products [[AppSuite:UI Development Style Guide | the UI Developement Style Guide]] helps you write safe, clear and functional code.<br /> <br /> Designing apps, plugins and widgets, and getting them running with the right layout, colors, look and feel is a breeze if you follow the guidelines described in [[AppSuite:UI Design Guide | the UI Design Guide]].<br /> <br /> Always keep in mind that using OX products should be possible for everyone. Therefor it's important to follow simple rules regarding [[AppSuite:Accessibility | accessibility]].<br /> <br /> === Using extension points ===<br /> <br /> Writing apps or plugins for App Suite will often include extending the existing user interface. App Suite provides extension points for you to add your own content.<br /> Beginning to develop using extension points? Read this guide first: [[AppSuite:Extending the UI (Hands-on introduction) | a hands-on introduction]] for extending the OX user interface. Here you can get more information and a complete list of the [[AppSuite:Extension points |extension points]] offered by OX products.<br /> <br /> === How to get code ===<br /> Using git as a version control system and getting the code for existing OX products is quite easy.<br /> Simply clone the [[AppSuite:UI build system#Source | UI]] repository and start working with it. If you would like to develop for the server/backend (using the OSGI Framework) plugins, you should check out the [[AppSuite:Backend build system#Source | backend]].<br /> <br /> === What can I build? ===<br /> <br /> If you want a simple introduction with easy to follow steps - from creating your workspace to actually integrating your source code within App Suite - please read our [[AppSuite:GettingStarted | GettingStarted guide]].<br /> <br /> There are several other possibilities available to develop for AppSuite.<br /> <br /> *[[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]].<br /> <br /> *[[AppSuite:Writing_a_contacts_plugin | A contacts plugin]] let's you modify parts of AppSuite's contact view.<br /> <br /> *[[AppSuite:Using the Upsell widget | Upsell Widget]], to enable the AppSuite user to purchase additional features. <br /> <br /> *[[AppSuite:Writing a simple application | A real application/module]] for AppSuite, which should be displayed full screen.<br /> <br /> *[[AppSuite:Writing a notification area plugin | A notification plugin]] for AppSuite<br /> <br /> *[[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.<br /> <br /> *[[AppSuite:Creating a settings section in AppSuite settings | Settings plugin]] extending AppSuite settings and creating a new section.<br /> <br /> *[[AppSuite:Embedding your settings into AppSuite settings | Settings plugin]] embedding your own settings section via iframe into AppSuite.<br /> <br /> You got stuck somewhere? There are some hints, which might help you [[AppSuite:Debugging_the_UI | debugging the UI]].<br /> <br /> === How to get your code running ===<br /> 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.<br /> <br /> Since the AppSuite product consists of a server and a UI, you also need a working backend (AppSuite application server) to communicate with. <br /> Therefor you should run [[AppSuite:Appserver | Appserver]] using an existing OX AppSuite server and (with local parts of the AppSuite) automaticly get the recent stable source packages from the AppSuite servers. For using your namespace as a source for hosting your app, simply add the build-path of your app as an parameter while running appserver.<br /> <br /> === What's next ===<br /> No Idea what to do first? Read our [[AppSuite:GettingStarted | GettingStarted guide]] to have a step-by-step introduction about how to install the SDK, use the Build System, write your first app and get it running.</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:Developing_for_the_UI&diff=16427 AppSuite:Developing for the UI 2013-11-14T16:29:58Z

<p>John.broomfield: /* How to get code */</p> <hr /> <div><div class="title">UI Development for OX AppSuite</div><br /> <br /> __TOC__<br /> <br /> This page contains articles explaining the inner workings of the OX App Suite, web-based, graphical user interface. It is aimed at software developers who want to expand existing features, implement extensions or just gain a general understanding of how the UI works.<br /> <br /> === Tech Overview ===<br /> All technologies and frameworks used for developing a new component for the App Suite UI are listed and described in the following article: [[AppSuite:UI developer primer| Requirements to develop for the UI]]<br /> <br /> ==== Development Flow for the App Suite UI ====<br /> <br /> [[File:OX_AppSuite_UI_Development_Workflow.png]]<br /> <br /> === Development Guidelines ===<br /> While developing code for OX products [[AppSuite:UI Development Style Guide | the UI Developement Style Guide]] helps you write safe, clear and functional code.<br /> <br /> Designing apps, plugins and widgets, and getting them running with the right layout, colors, look and feel is a breeze if you follow the guidelines described in [[AppSuite:UI Design Guide | the UI Design Guide]].<br /> <br /> Always keep in mind that using OX products should be possible for everyone. Therefor it's important to follow simple rules regarding [[AppSuite:Accessibility | accessibility]].<br /> <br /> === Using extension points ===<br /> <br /> Writing apps or plugins for App Suite will often include extending the existing user interface. App Suite provides extension points for you to add your own content.<br /> Beginning to develop using extension points? Read this guide first: [[AppSuite:Extending the UI (Hands-on introduction) | a hands-on introduction]] for extending the OX user interface. Here you can get more information and a complete list of the [[AppSuite:Extension points |extension points]] offered by OX products.<br /> <br /> === How to get code ===<br /> Using git as a version control system and getting the code for existing OX products is quite easy.<br /> Simply clone the [[AppSuite:UI build system#Source | UI]] repository and start working with it. If you would like to develop for the server/backend (using the OSGI Framework) plugins, you should check out the [[AppSuite:Backend build system#Source | backend]].<br /> <br /> === What can I build? ===<br /> <br /> If you want to have a simple introduction following easy steps from creating your workspace to actually performing your source code within AppSuite, read our [[AppSuite:GettingStarted | GettingStarted guide]].<br /> <br /> There are several other possibilities available to develop for AppSuite.<br /> <br /> *[[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]].<br /> <br /> *[[AppSuite:Writing_a_contacts_plugin | A contacts plugin]] let's you modify parts of AppSuite's contact view.<br /> <br /> *[[AppSuite:Using the Upsell widget | Upsell Widget]], to enable the AppSuite user to purchase additional features. <br /> <br /> *[[AppSuite:Writing a simple application | A real application/module]] for AppSuite, which should be displayed full screen.<br /> <br /> *[[AppSuite:Writing a notification area plugin | A notification plugin]] for AppSuite<br /> <br /> *[[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.<br /> <br /> *[[AppSuite:Creating a settings section in AppSuite settings | Settings plugin]] extending AppSuite settings and creating a new section.<br /> <br /> *[[AppSuite:Embedding your settings into AppSuite settings | Settings plugin]] embedding your own settings section via iframe into AppSuite.<br /> <br /> You got stuck somewhere? There are some hints, which might help you [[AppSuite:Debugging_the_UI | debugging the UI]].<br /> <br /> === How to get your code running ===<br /> 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.<br /> <br /> Since the AppSuite product consists of a server and a UI, you also need a working backend (AppSuite application server) to communicate with. <br /> Therefor you should run [[AppSuite:Appserver | Appserver]] using an existing OX AppSuite server and (with local parts of the AppSuite) automaticly get the recent stable source packages from the AppSuite servers. For using your namespace as a source for hosting your app, simply add the build-path of your app as an parameter while running appserver.<br /> <br /> === What's next ===<br /> No Idea what to do first? Read our [[AppSuite:GettingStarted | GettingStarted guide]] to have a step-by-step introduction about how to install the SDK, use the Build System, write your first app and get it running.</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:Developing_for_the_UI&diff=16426 AppSuite:Developing for the UI 2013-11-14T16:29:26Z

<p>John.broomfield: /* How to get code */</p> <hr /> <div><div class="title">UI Development for OX AppSuite</div><br /> <br /> __TOC__<br /> <br /> This page contains articles explaining the inner workings of the OX App Suite, web-based, graphical user interface. It is aimed at software developers who want to expand existing features, implement extensions or just gain a general understanding of how the UI works.<br /> <br /> === Tech Overview ===<br /> All technologies and frameworks used for developing a new component for the App Suite UI are listed and described in the following article: [[AppSuite:UI developer primer| Requirements to develop for the UI]]<br /> <br /> ==== Development Flow for the App Suite UI ====<br /> <br /> [[File:OX_AppSuite_UI_Development_Workflow.png]]<br /> <br /> === Development Guidelines ===<br /> While developing code for OX products [[AppSuite:UI Development Style Guide | the UI Developement Style Guide]] helps you write safe, clear and functional code.<br /> <br /> Designing apps, plugins and widgets, and getting them running with the right layout, colors, look and feel is a breeze if you follow the guidelines described in [[AppSuite:UI Design Guide | the UI Design Guide]].<br /> <br /> Always keep in mind that using OX products should be possible for everyone. Therefor it's important to follow simple rules regarding [[AppSuite:Accessibility | accessibility]].<br /> <br /> === Using extension points ===<br /> <br /> Writing apps or plugins for App Suite will often include extending the existing user interface. App Suite provides extension points for you to add your own content.<br /> Beginning to develop using extension points? Read this guide first: [[AppSuite:Extending the UI (Hands-on introduction) | a hands-on introduction]] for extending the OX user interface. Here you can get more information and a complete list of the [[AppSuite:Extension points |extension points]] offered by OX products.<br /> <br /> === How to get code ===<br /> Using git as a version control system and getting the code for existing OX products is quite easy.<br /> Simply clone the [[AppSuite:UI build system#Source | UI]] repository and start working with it. If you would like to develop for the server/backend (using the OSGI Framework) plugins, you should check out the [[AppSuite:Backend build system#Source | backend]]<br /> <br /> === What can I build? ===<br /> <br /> If you want to have a simple introduction following easy steps from creating your workspace to actually performing your source code within AppSuite, read our [[AppSuite:GettingStarted | GettingStarted guide]].<br /> <br /> There are several other possibilities available to develop for AppSuite.<br /> <br /> *[[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]].<br /> <br /> *[[AppSuite:Writing_a_contacts_plugin | A contacts plugin]] let's you modify parts of AppSuite's contact view.<br /> <br /> *[[AppSuite:Using the Upsell widget | Upsell Widget]], to enable the AppSuite user to purchase additional features. <br /> <br /> *[[AppSuite:Writing a simple application | A real application/module]] for AppSuite, which should be displayed full screen.<br /> <br /> *[[AppSuite:Writing a notification area plugin | A notification plugin]] for AppSuite<br /> <br /> *[[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.<br /> <br /> *[[AppSuite:Creating a settings section in AppSuite settings | Settings plugin]] extending AppSuite settings and creating a new section.<br /> <br /> *[[AppSuite:Embedding your settings into AppSuite settings | Settings plugin]] embedding your own settings section via iframe into AppSuite.<br /> <br /> You got stuck somewhere? There are some hints, which might help you [[AppSuite:Debugging_the_UI | debugging the UI]].<br /> <br /> === How to get your code running ===<br /> 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.<br /> <br /> Since the AppSuite product consists of a server and a UI, you also need a working backend (AppSuite application server) to communicate with. <br /> Therefor you should run [[AppSuite:Appserver | Appserver]] using an existing OX AppSuite server and (with local parts of the AppSuite) automaticly get the recent stable source packages from the AppSuite servers. For using your namespace as a source for hosting your app, simply add the build-path of your app as an parameter while running appserver.<br /> <br /> === What's next ===<br /> No Idea what to do first? Read our [[AppSuite:GettingStarted | GettingStarted guide]] to have a step-by-step introduction about how to install the SDK, use the Build System, write your first app and get it running.</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:Developing_for_the_UI&diff=16425 AppSuite:Developing for the UI 2013-11-14T16:27:59Z

<p>John.broomfield: /* How to get code */</p> <hr /> <div><div class="title">UI Development for OX AppSuite</div><br /> <br /> __TOC__<br /> <br /> This page contains articles explaining the inner workings of the OX App Suite, web-based, graphical user interface. It is aimed at software developers who want to expand existing features, implement extensions or just gain a general understanding of how the UI works.<br /> <br /> === Tech Overview ===<br /> All technologies and frameworks used for developing a new component for the App Suite UI are listed and described in the following article: [[AppSuite:UI developer primer| Requirements to develop for the UI]]<br /> <br /> ==== Development Flow for the App Suite UI ====<br /> <br /> [[File:OX_AppSuite_UI_Development_Workflow.png]]<br /> <br /> === Development Guidelines ===<br /> While developing code for OX products [[AppSuite:UI Development Style Guide | the UI Developement Style Guide]] helps you write safe, clear and functional code.<br /> <br /> Designing apps, plugins and widgets, and getting them running with the right layout, colors, look and feel is a breeze if you follow the guidelines described in [[AppSuite:UI Design Guide | the UI Design Guide]].<br /> <br /> Always keep in mind that using OX products should be possible for everyone. Therefor it's important to follow simple rules regarding [[AppSuite:Accessibility | accessibility]].<br /> <br /> === Using extension points ===<br /> <br /> Writing apps or plugins for App Suite will often include extending the existing user interface. App Suite provides extension points for you to add your own content.<br /> Beginning to develop using extension points? Read this guide first: [[AppSuite:Extending the UI (Hands-on introduction) | a hands-on introduction]] for extending the OX user interface. Here you can get more information and a complete list of the [[AppSuite:Extension points |extension points]] offered by OX products.<br /> <br /> === How to get code ===<br /> Using git as a version control system and getting the code for existing OX products is quite easy.<br /> Simply clone the [[AppSuite:UI build system#Source | UI]] repository and start working with it. If you would like to develop server/backend (via OSGI Framework) plugins, you should check out the [[AppSuite:Backend build system#Source | backend]]<br /> <br /> === What can I build? ===<br /> <br /> If you want to have a simple introduction following easy steps from creating your workspace to actually performing your source code within AppSuite, read our [[AppSuite:GettingStarted | GettingStarted guide]].<br /> <br /> There are several other possibilities available to develop for AppSuite.<br /> <br /> *[[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]].<br /> <br /> *[[AppSuite:Writing_a_contacts_plugin | A contacts plugin]] let's you modify parts of AppSuite's contact view.<br /> <br /> *[[AppSuite:Using the Upsell widget | Upsell Widget]], to enable the AppSuite user to purchase additional features. <br /> <br /> *[[AppSuite:Writing a simple application | A real application/module]] for AppSuite, which should be displayed full screen.<br /> <br /> *[[AppSuite:Writing a notification area plugin | A notification plugin]] for AppSuite<br /> <br /> *[[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.<br /> <br /> *[[AppSuite:Creating a settings section in AppSuite settings | Settings plugin]] extending AppSuite settings and creating a new section.<br /> <br /> *[[AppSuite:Embedding your settings into AppSuite settings | Settings plugin]] embedding your own settings section via iframe into AppSuite.<br /> <br /> You got stuck somewhere? There are some hints, which might help you [[AppSuite:Debugging_the_UI | debugging the UI]].<br /> <br /> === How to get your code running ===<br /> 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.<br /> <br /> Since the AppSuite product consists of a server and a UI, you also need a working backend (AppSuite application server) to communicate with. <br /> Therefor you should run [[AppSuite:Appserver | Appserver]] using an existing OX AppSuite server and (with local parts of the AppSuite) automaticly get the recent stable source packages from the AppSuite servers. For using your namespace as a source for hosting your app, simply add the build-path of your app as an parameter while running appserver.<br /> <br /> === What's next ===<br /> No Idea what to do first? Read our [[AppSuite:GettingStarted | GettingStarted guide]] to have a step-by-step introduction about how to install the SDK, use the Build System, write your first app and get it running.</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:Developing_for_the_UI&diff=16424 AppSuite:Developing for the UI 2013-11-14T16:26:11Z

<p>John.broomfield: /* Using extension points */</p> <hr /> <div><div class="title">UI Development for OX AppSuite</div><br /> <br /> __TOC__<br /> <br /> This page contains articles explaining the inner workings of the OX App Suite, web-based, graphical user interface. It is aimed at software developers who want to expand existing features, implement extensions or just gain a general understanding of how the UI works.<br /> <br /> === Tech Overview ===<br /> All technologies and frameworks used for developing a new component for the App Suite UI are listed and described in the following article: [[AppSuite:UI developer primer| Requirements to develop for the UI]]<br /> <br /> ==== Development Flow for the App Suite UI ====<br /> <br /> [[File:OX_AppSuite_UI_Development_Workflow.png]]<br /> <br /> === Development Guidelines ===<br /> While developing code for OX products [[AppSuite:UI Development Style Guide | the UI Developement Style Guide]] helps you write safe, clear and functional code.<br /> <br /> Designing apps, plugins and widgets, and getting them running with the right layout, colors, look and feel is a breeze if you follow the guidelines described in [[AppSuite:UI Design Guide | the UI Design Guide]].<br /> <br /> Always keep in mind that using OX products should be possible for everyone. Therefor it's important to follow simple rules regarding [[AppSuite:Accessibility | accessibility]].<br /> <br /> === Using extension points ===<br /> <br /> Writing apps or plugins for App Suite will often include extending the existing user interface. App Suite provides extension points for you to add your own content.<br /> Beginning to develop using extension points? Read this guide first: [[AppSuite:Extending the UI (Hands-on introduction) | a hands-on introduction]] for extending the OX user interface. Here you can get more information and a complete list of the [[AppSuite:Extension points |extension points]] offered by OX products.<br /> <br /> === How to get code ===<br /> Using git as a version version control system getting the code from existing OX products is quite easy.<br /> Simply clone the [[AppSuite:UI build system#Source | UI]] repository and start working with it. If you would like to develop server/backend (via OSGI Framework) plugins, you would check out the the [[AppSuite:Backend build system#Source | backend]]<br /> <br /> === What can I build? ===<br /> <br /> If you want to have a simple introduction following easy steps from creating your workspace to actually performing your source code within AppSuite, read our [[AppSuite:GettingStarted | GettingStarted guide]].<br /> <br /> There are several other possibilities available to develop for AppSuite.<br /> <br /> *[[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]].<br /> <br /> *[[AppSuite:Writing_a_contacts_plugin | A contacts plugin]] let's you modify parts of AppSuite's contact view.<br /> <br /> *[[AppSuite:Using the Upsell widget | Upsell Widget]], to enable the AppSuite user to purchase additional features. <br /> <br /> *[[AppSuite:Writing a simple application | A real application/module]] for AppSuite, which should be displayed full screen.<br /> <br /> *[[AppSuite:Writing a notification area plugin | A notification plugin]] for AppSuite<br /> <br /> *[[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.<br /> <br /> *[[AppSuite:Creating a settings section in AppSuite settings | Settings plugin]] extending AppSuite settings and creating a new section.<br /> <br /> *[[AppSuite:Embedding your settings into AppSuite settings | Settings plugin]] embedding your own settings section via iframe into AppSuite.<br /> <br /> You got stuck somewhere? There are some hints, which might help you [[AppSuite:Debugging_the_UI | debugging the UI]].<br /> <br /> === How to get your code running ===<br /> 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.<br /> <br /> Since the AppSuite product consists of a server and a UI, you also need a working backend (AppSuite application server) to communicate with. <br /> Therefor you should run [[AppSuite:Appserver | Appserver]] using an existing OX AppSuite server and (with local parts of the AppSuite) automaticly get the recent stable source packages from the AppSuite servers. For using your namespace as a source for hosting your app, simply add the build-path of your app as an parameter while running appserver.<br /> <br /> === What's next ===<br /> No Idea what to do first? Read our [[AppSuite:GettingStarted | GettingStarted guide]] to have a step-by-step introduction about how to install the SDK, use the Build System, write your first app and get it running.</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:Developing_for_the_UI&diff=16423 AppSuite:Developing for the UI 2013-11-14T16:24:44Z

<p>John.broomfield: /* Using extension points */</p> <hr /> <div><div class="title">UI Development for OX AppSuite</div><br /> <br /> __TOC__<br /> <br /> This page contains articles explaining the inner workings of the OX App Suite, web-based, graphical user interface. It is aimed at software developers who want to expand existing features, implement extensions or just gain a general understanding of how the UI works.<br /> <br /> === Tech Overview ===<br /> All technologies and frameworks used for developing a new component for the App Suite UI are listed and described in the following article: [[AppSuite:UI developer primer| Requirements to develop for the UI]]<br /> <br /> ==== Development Flow for the App Suite UI ====<br /> <br /> [[File:OX_AppSuite_UI_Development_Workflow.png]]<br /> <br /> === Development Guidelines ===<br /> While developing code for OX products [[AppSuite:UI Development Style Guide | the UI Developement Style Guide]] helps you write safe, clear and functional code.<br /> <br /> Designing apps, plugins and widgets, and getting them running with the right layout, colors, look and feel is a breeze if you follow the guidelines described in [[AppSuite:UI Design Guide | the UI Design Guide]].<br /> <br /> Always keep in mind that using OX products should be possible for everyone. Therefor it's important to follow simple rules regarding [[AppSuite:Accessibility | accessibility]].<br /> <br /> === Using extension points ===<br /> <br /> Writing apps or plugins for App Suite will often include extending the existing user interface. App Suite provides extension points for you to add your own content.<br /> Beginning to develop using extension points? Read this guide first: [[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.<br /> <br /> === How to get code ===<br /> Using git as a version version control system getting the code from existing OX products is quite easy.<br /> Simply clone the [[AppSuite:UI build system#Source | UI]] repository and start working with it. If you would like to develop server/backend (via OSGI Framework) plugins, you would check out the the [[AppSuite:Backend build system#Source | backend]]<br /> <br /> === What can I build? ===<br /> <br /> If you want to have a simple introduction following easy steps from creating your workspace to actually performing your source code within AppSuite, read our [[AppSuite:GettingStarted | GettingStarted guide]].<br /> <br /> There are several other possibilities available to develop for AppSuite.<br /> <br /> *[[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]].<br /> <br /> *[[AppSuite:Writing_a_contacts_plugin | A contacts plugin]] let's you modify parts of AppSuite's contact view.<br /> <br /> *[[AppSuite:Using the Upsell widget | Upsell Widget]], to enable the AppSuite user to purchase additional features. <br /> <br /> *[[AppSuite:Writing a simple application | A real application/module]] for AppSuite, which should be displayed full screen.<br /> <br /> *[[AppSuite:Writing a notification area plugin | A notification plugin]] for AppSuite<br /> <br /> *[[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.<br /> <br /> *[[AppSuite:Creating a settings section in AppSuite settings | Settings plugin]] extending AppSuite settings and creating a new section.<br /> <br /> *[[AppSuite:Embedding your settings into AppSuite settings | Settings plugin]] embedding your own settings section via iframe into AppSuite.<br /> <br /> You got stuck somewhere? There are some hints, which might help you [[AppSuite:Debugging_the_UI | debugging the UI]].<br /> <br /> === How to get your code running ===<br /> 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.<br /> <br /> Since the AppSuite product consists of a server and a UI, you also need a working backend (AppSuite application server) to communicate with. <br /> Therefor you should run [[AppSuite:Appserver | Appserver]] using an existing OX AppSuite server and (with local parts of the AppSuite) automaticly get the recent stable source packages from the AppSuite servers. For using your namespace as a source for hosting your app, simply add the build-path of your app as an parameter while running appserver.<br /> <br /> === What's next ===<br /> No Idea what to do first? Read our [[AppSuite:GettingStarted | GettingStarted guide]] to have a step-by-step introduction about how to install the SDK, use the Build System, write your first app and get it running.</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:Developing_for_the_UI&diff=16422 AppSuite:Developing for the UI 2013-11-14T16:23:43Z

<p>John.broomfield: /* Using extension points */</p> <hr /> <div><div class="title">UI Development for OX AppSuite</div><br /> <br /> __TOC__<br /> <br /> This page contains articles explaining the inner workings of the OX App Suite, web-based, graphical user interface. It is aimed at software developers who want to expand existing features, implement extensions or just gain a general understanding of how the UI works.<br /> <br /> === Tech Overview ===<br /> All technologies and frameworks used for developing a new component for the App Suite UI are listed and described in the following article: [[AppSuite:UI developer primer| Requirements to develop for the UI]]<br /> <br /> ==== Development Flow for the App Suite UI ====<br /> <br /> [[File:OX_AppSuite_UI_Development_Workflow.png]]<br /> <br /> === Development Guidelines ===<br /> While developing code for OX products [[AppSuite:UI Development Style Guide | the UI Developement Style Guide]] helps you write safe, clear and functional code.<br /> <br /> Designing apps, plugins and widgets, and getting them running with the right layout, colors, look and feel is a breeze if you follow the guidelines described in [[AppSuite:UI Design Guide | the UI Design Guide]].<br /> <br /> Always keep in mind that using OX products should be possible for everyone. Therefor it's important to follow simple rules regarding [[AppSuite:Accessibility | accessibility]].<br /> <br /> === Using extension points ===<br /> <br /> Writing apps or plugins for App Suite will often include extending the existing user interface. App Suite provides extension points for you to add your own content.<br /> 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.<br /> <br /> === How to get code ===<br /> Using git as a version version control system getting the code from existing OX products is quite easy.<br /> Simply clone the [[AppSuite:UI build system#Source | UI]] repository and start working with it. If you would like to develop server/backend (via OSGI Framework) plugins, you would check out the the [[AppSuite:Backend build system#Source | backend]]<br /> <br /> === What can I build? ===<br /> <br /> If you want to have a simple introduction following easy steps from creating your workspace to actually performing your source code within AppSuite, read our [[AppSuite:GettingStarted | GettingStarted guide]].<br /> <br /> There are several other possibilities available to develop for AppSuite.<br /> <br /> *[[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]].<br /> <br /> *[[AppSuite:Writing_a_contacts_plugin | A contacts plugin]] let's you modify parts of AppSuite's contact view.<br /> <br /> *[[AppSuite:Using the Upsell widget | Upsell Widget]], to enable the AppSuite user to purchase additional features. <br /> <br /> *[[AppSuite:Writing a simple application | A real application/module]] for AppSuite, which should be displayed full screen.<br /> <br /> *[[AppSuite:Writing a notification area plugin | A notification plugin]] for AppSuite<br /> <br /> *[[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.<br /> <br /> *[[AppSuite:Creating a settings section in AppSuite settings | Settings plugin]] extending AppSuite settings and creating a new section.<br /> <br /> *[[AppSuite:Embedding your settings into AppSuite settings | Settings plugin]] embedding your own settings section via iframe into AppSuite.<br /> <br /> You got stuck somewhere? There are some hints, which might help you [[AppSuite:Debugging_the_UI | debugging the UI]].<br /> <br /> === How to get your code running ===<br /> 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.<br /> <br /> Since the AppSuite product consists of a server and a UI, you also need a working backend (AppSuite application server) to communicate with. <br /> Therefor you should run [[AppSuite:Appserver | Appserver]] using an existing OX AppSuite server and (with local parts of the AppSuite) automaticly get the recent stable source packages from the AppSuite servers. For using your namespace as a source for hosting your app, simply add the build-path of your app as an parameter while running appserver.<br /> <br /> === What's next ===<br /> No Idea what to do first? Read our [[AppSuite:GettingStarted | GettingStarted guide]] to have a step-by-step introduction about how to install the SDK, use the Build System, write your first app and get it running.</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:Developing_for_the_UI&diff=16421 AppSuite:Developing for the UI 2013-11-14T16:22:37Z

<p>John.broomfield: /* Using extension points */</p> <hr /> <div><div class="title">UI Development for OX AppSuite</div><br /> <br /> __TOC__<br /> <br /> This page contains articles explaining the inner workings of the OX App Suite, web-based, graphical user interface. It is aimed at software developers who want to expand existing features, implement extensions or just gain a general understanding of how the UI works.<br /> <br /> === Tech Overview ===<br /> All technologies and frameworks used for developing a new component for the App Suite UI are listed and described in the following article: [[AppSuite:UI developer primer| Requirements to develop for the UI]]<br /> <br /> ==== Development Flow for the App Suite UI ====<br /> <br /> [[File:OX_AppSuite_UI_Development_Workflow.png]]<br /> <br /> === Development Guidelines ===<br /> While developing code for OX products [[AppSuite:UI Development Style Guide | the UI Developement Style Guide]] helps you write safe, clear and functional code.<br /> <br /> Designing apps, plugins and widgets, and getting them running with the right layout, colors, look and feel is a breeze if you follow the guidelines described in [[AppSuite:UI Design Guide | the UI Design Guide]].<br /> <br /> Always keep in mind that using OX products should be possible for everyone. Therefor it's important to follow simple rules regarding [[AppSuite:Accessibility | accessibility]].<br /> <br /> === Using extension points ===<br /> <br /> Writing apps or plugins for App Suite will often include extending the existing user interface. App Suite provides extension points offering you possibility of adding your own content.<br /> 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.<br /> <br /> === How to get code ===<br /> Using git as a version version control system getting the code from existing OX products is quite easy.<br /> Simply clone the [[AppSuite:UI build system#Source | UI]] repository and start working with it. If you would like to develop server/backend (via OSGI Framework) plugins, you would check out the the [[AppSuite:Backend build system#Source | backend]]<br /> <br /> === What can I build? ===<br /> <br /> If you want to have a simple introduction following easy steps from creating your workspace to actually performing your source code within AppSuite, read our [[AppSuite:GettingStarted | GettingStarted guide]].<br /> <br /> There are several other possibilities available to develop for AppSuite.<br /> <br /> *[[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]].<br /> <br /> *[[AppSuite:Writing_a_contacts_plugin | A contacts plugin]] let's you modify parts of AppSuite's contact view.<br /> <br /> *[[AppSuite:Using the Upsell widget | Upsell Widget]], to enable the AppSuite user to purchase additional features. <br /> <br /> *[[AppSuite:Writing a simple application | A real application/module]] for AppSuite, which should be displayed full screen.<br /> <br /> *[[AppSuite:Writing a notification area plugin | A notification plugin]] for AppSuite<br /> <br /> *[[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.<br /> <br /> *[[AppSuite:Creating a settings section in AppSuite settings | Settings plugin]] extending AppSuite settings and creating a new section.<br /> <br /> *[[AppSuite:Embedding your settings into AppSuite settings | Settings plugin]] embedding your own settings section via iframe into AppSuite.<br /> <br /> You got stuck somewhere? There are some hints, which might help you [[AppSuite:Debugging_the_UI | debugging the UI]].<br /> <br /> === How to get your code running ===<br /> 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.<br /> <br /> Since the AppSuite product consists of a server and a UI, you also need a working backend (AppSuite application server) to communicate with. <br /> Therefor you should run [[AppSuite:Appserver | Appserver]] using an existing OX AppSuite server and (with local parts of the AppSuite) automaticly get the recent stable source packages from the AppSuite servers. For using your namespace as a source for hosting your app, simply add the build-path of your app as an parameter while running appserver.<br /> <br /> === What's next ===<br /> No Idea what to do first? Read our [[AppSuite:GettingStarted | GettingStarted guide]] to have a step-by-step introduction about how to install the SDK, use the Build System, write your first app and get it running.</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:Developing_for_the_UI&diff=16420 AppSuite:Developing for the UI 2013-11-14T16:20:47Z

<p>John.broomfield: /* Development Guidelines */</p> <hr /> <div><div class="title">UI Development for OX AppSuite</div><br /> <br /> __TOC__<br /> <br /> This page contains articles explaining the inner workings of the OX App Suite, web-based, graphical user interface. It is aimed at software developers who want to expand existing features, implement extensions or just gain a general understanding of how the UI works.<br /> <br /> === Tech Overview ===<br /> All technologies and frameworks used for developing a new component for the App Suite UI are listed and described in the following article: [[AppSuite:UI developer primer| Requirements to develop for the UI]]<br /> <br /> ==== Development Flow for the App Suite UI ====<br /> <br /> [[File:OX_AppSuite_UI_Development_Workflow.png]]<br /> <br /> === Development Guidelines ===<br /> While developing code for OX products [[AppSuite:UI Development Style Guide | the UI Developement Style Guide]] helps you write safe, clear and functional code.<br /> <br /> Designing apps, plugins and widgets, and getting them running with the right layout, colors, look and feel is a breeze if you follow the guidelines described in [[AppSuite:UI Design Guide | the UI Design Guide]].<br /> <br /> Always keep in mind that using OX products should be possible for everyone. Therefor it's important to follow simple rules regarding [[AppSuite:Accessibility | accessibility]].<br /> <br /> === Using extension points ===<br /> <br /> 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.<br /> 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.<br /> <br /> === How to get code ===<br /> Using git as a version version control system getting the code from existing OX products is quite easy.<br /> Simply clone the [[AppSuite:UI build system#Source | UI]] repository and start working with it. If you would like to develop server/backend (via OSGI Framework) plugins, you would check out the the [[AppSuite:Backend build system#Source | backend]]<br /> <br /> === What can I build? ===<br /> <br /> If you want to have a simple introduction following easy steps from creating your workspace to actually performing your source code within AppSuite, read our [[AppSuite:GettingStarted | GettingStarted guide]].<br /> <br /> There are several other possibilities available to develop for AppSuite.<br /> <br /> *[[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]].<br /> <br /> *[[AppSuite:Writing_a_contacts_plugin | A contacts plugin]] let's you modify parts of AppSuite's contact view.<br /> <br /> *[[AppSuite:Using the Upsell widget | Upsell Widget]], to enable the AppSuite user to purchase additional features. <br /> <br /> *[[AppSuite:Writing a simple application | A real application/module]] for AppSuite, which should be displayed full screen.<br /> <br /> *[[AppSuite:Writing a notification area plugin | A notification plugin]] for AppSuite<br /> <br /> *[[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.<br /> <br /> *[[AppSuite:Creating a settings section in AppSuite settings | Settings plugin]] extending AppSuite settings and creating a new section.<br /> <br /> *[[AppSuite:Embedding your settings into AppSuite settings | Settings plugin]] embedding your own settings section via iframe into AppSuite.<br /> <br /> You got stuck somewhere? There are some hints, which might help you [[AppSuite:Debugging_the_UI | debugging the UI]].<br /> <br /> === How to get your code running ===<br /> 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.<br /> <br /> Since the AppSuite product consists of a server and a UI, you also need a working backend (AppSuite application server) to communicate with. <br /> Therefor you should run [[AppSuite:Appserver | Appserver]] using an existing OX AppSuite server and (with local parts of the AppSuite) automaticly get the recent stable source packages from the AppSuite servers. For using your namespace as a source for hosting your app, simply add the build-path of your app as an parameter while running appserver.<br /> <br /> === What's next ===<br /> No Idea what to do first? Read our [[AppSuite:GettingStarted | GettingStarted guide]] to have a step-by-step introduction about how to install the SDK, use the Build System, write your first app and get it running.</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:Developing_for_the_UI&diff=16419 AppSuite:Developing for the UI 2013-11-14T16:20:07Z

<p>John.broomfield: /* Development Guidelines */</p> <hr /> <div><div class="title">UI Development for OX AppSuite</div><br /> <br /> __TOC__<br /> <br /> This page contains articles explaining the inner workings of the OX App Suite, web-based, graphical user interface. It is aimed at software developers who want to expand existing features, implement extensions or just gain a general understanding of how the UI works.<br /> <br /> === Tech Overview ===<br /> All technologies and frameworks used for developing a new component for the App Suite UI are listed and described in the following article: [[AppSuite:UI developer primer| Requirements to develop for the UI]]<br /> <br /> ==== Development Flow for the App Suite UI ====<br /> <br /> [[File:OX_AppSuite_UI_Development_Workflow.png]]<br /> <br /> === Development Guidelines ===<br /> While developing code for OX products [[AppSuite:UI Development Style Guide | the UI Developement Style Guide]] helps you write safe, clear and functional code.<br /> <br /> Designing apps, plugins and widgets, and getting them running with the right layout, colors, look and feel is a breeze if you follow the guidelines described here [[AppSuite:UI Design Guide | the UI Design Guide]].<br /> <br /> Always keep in mind that using OX products should be possible for everyone. Therefor it's important to follow simple rules regarding [[AppSuite:Accessibility | accessibility]].<br /> <br /> === Using extension points ===<br /> <br /> 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.<br /> 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.<br /> <br /> === How to get code ===<br /> Using git as a version version control system getting the code from existing OX products is quite easy.<br /> Simply clone the [[AppSuite:UI build system#Source | UI]] repository and start working with it. If you would like to develop server/backend (via OSGI Framework) plugins, you would check out the the [[AppSuite:Backend build system#Source | backend]]<br /> <br /> === What can I build? ===<br /> <br /> If you want to have a simple introduction following easy steps from creating your workspace to actually performing your source code within AppSuite, read our [[AppSuite:GettingStarted | GettingStarted guide]].<br /> <br /> There are several other possibilities available to develop for AppSuite.<br /> <br /> *[[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]].<br /> <br /> *[[AppSuite:Writing_a_contacts_plugin | A contacts plugin]] let's you modify parts of AppSuite's contact view.<br /> <br /> *[[AppSuite:Using the Upsell widget | Upsell Widget]], to enable the AppSuite user to purchase additional features. <br /> <br /> *[[AppSuite:Writing a simple application | A real application/module]] for AppSuite, which should be displayed full screen.<br /> <br /> *[[AppSuite:Writing a notification area plugin | A notification plugin]] for AppSuite<br /> <br /> *[[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.<br /> <br /> *[[AppSuite:Creating a settings section in AppSuite settings | Settings plugin]] extending AppSuite settings and creating a new section.<br /> <br /> *[[AppSuite:Embedding your settings into AppSuite settings | Settings plugin]] embedding your own settings section via iframe into AppSuite.<br /> <br /> You got stuck somewhere? There are some hints, which might help you [[AppSuite:Debugging_the_UI | debugging the UI]].<br /> <br /> === How to get your code running ===<br /> 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.<br /> <br /> Since the AppSuite product consists of a server and a UI, you also need a working backend (AppSuite application server) to communicate with. <br /> Therefor you should run [[AppSuite:Appserver | Appserver]] using an existing OX AppSuite server and (with local parts of the AppSuite) automaticly get the recent stable source packages from the AppSuite servers. For using your namespace as a source for hosting your app, simply add the build-path of your app as an parameter while running appserver.<br /> <br /> === What's next ===<br /> No Idea what to do first? Read our [[AppSuite:GettingStarted | GettingStarted guide]] to have a step-by-step introduction about how to install the SDK, use the Build System, write your first app and get it running.</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:Developing_for_the_UI&diff=16418 AppSuite:Developing for the UI 2013-11-14T16:15:44Z

<p>John.broomfield: /* What can i build? */</p> <hr /> <div><div class="title">UI Development for OX AppSuite</div><br /> <br /> __TOC__<br /> <br /> This page contains articles explaining the inner workings of the OX App Suite, web-based, graphical user interface. It is aimed at software developers who want to expand existing features, implement extensions or just gain a general understanding of how the UI works.<br /> <br /> === Tech Overview ===<br /> All technologies and frameworks used for developing a new component for the App Suite UI are listed and described in the following article: [[AppSuite:UI developer primer| Requirements to develop for the UI]]<br /> <br /> ==== Development Flow for the App Suite UI ====<br /> <br /> [[File:OX_AppSuite_UI_Development_Workflow.png]]<br /> <br /> === Development Guidelines ===<br /> While developing code for OX products [[AppSuite:UI Development Style Guide | the UI Developement Style Guide]] helps you writing safe, clear and functional code.<br /> <br /> Designing apps, plugins and widgets running with the right layout, colors, look and feel is a breeze following the guidelines described in [[AppSuite:UI Design Guide | the UI Design Guide]].<br /> <br /> 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]].<br /> <br /> === Using extension points ===<br /> <br /> 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.<br /> 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.<br /> <br /> === How to get code ===<br /> Using git as a version version control system getting the code from existing OX products is quite easy.<br /> Simply clone the [[AppSuite:UI build system#Source | UI]] repository and start working with it. If you would like to develop server/backend (via OSGI Framework) plugins, you would check out the the [[AppSuite:Backend build system#Source | backend]]<br /> <br /> === What can I build? ===<br /> <br /> If you want to have a simple introduction following easy steps from creating your workspace to actually performing your source code within AppSuite, read our [[AppSuite:GettingStarted | GettingStarted guide]].<br /> <br /> There are several other possibilities available to develop for AppSuite.<br /> <br /> *[[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]].<br /> <br /> *[[AppSuite:Writing_a_contacts_plugin | A contacts plugin]] let's you modify parts of AppSuite's contact view.<br /> <br /> *[[AppSuite:Using the Upsell widget | Upsell Widget]], to enable the AppSuite user to purchase additional features. <br /> <br /> *[[AppSuite:Writing a simple application | A real application/module]] for AppSuite, which should be displayed full screen.<br /> <br /> *[[AppSuite:Writing a notification area plugin | A notification plugin]] for AppSuite<br /> <br /> *[[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.<br /> <br /> *[[AppSuite:Creating a settings section in AppSuite settings | Settings plugin]] extending AppSuite settings and creating a new section.<br /> <br /> *[[AppSuite:Embedding your settings into AppSuite settings | Settings plugin]] embedding your own settings section via iframe into AppSuite.<br /> <br /> You got stuck somewhere? There are some hints, which might help you [[AppSuite:Debugging_the_UI | debugging the UI]].<br /> <br /> === How to get your code running ===<br /> 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.<br /> <br /> Since the AppSuite product consists of a server and a UI, you also need a working backend (AppSuite application server) to communicate with. <br /> Therefor you should run [[AppSuite:Appserver | Appserver]] using an existing OX AppSuite server and (with local parts of the AppSuite) automaticly get the recent stable source packages from the AppSuite servers. For using your namespace as a source for hosting your app, simply add the build-path of your app as an parameter while running appserver.<br /> <br /> === What's next ===<br /> No Idea what to do first? Read our [[AppSuite:GettingStarted | GettingStarted guide]] to have a step-by-step introduction about how to install the SDK, use the Build System, write your first app and get it running.</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:Developing_for_the_UI&diff=16417 AppSuite:Developing for the UI 2013-11-14T16:15:16Z

<p>John.broomfield: /* Developing Guidelines */</p> <hr /> <div><div class="title">UI Development for OX AppSuite</div><br /> <br /> __TOC__<br /> <br /> This page contains articles explaining the inner workings of the OX App Suite, web-based, graphical user interface. It is aimed at software developers who want to expand existing features, implement extensions or just gain a general understanding of how the UI works.<br /> <br /> === Tech Overview ===<br /> All technologies and frameworks used for developing a new component for the App Suite UI are listed and described in the following article: [[AppSuite:UI developer primer| Requirements to develop for the UI]]<br /> <br /> ==== Development Flow for the App Suite UI ====<br /> <br /> [[File:OX_AppSuite_UI_Development_Workflow.png]]<br /> <br /> === Development Guidelines ===<br /> While developing code for OX products [[AppSuite:UI Development Style Guide | the UI Developement Style Guide]] helps you writing safe, clear and functional code.<br /> <br /> Designing apps, plugins and widgets running with the right layout, colors, look and feel is a breeze following the guidelines described in [[AppSuite:UI Design Guide | the UI Design Guide]].<br /> <br /> 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]].<br /> <br /> === Using extension points ===<br /> <br /> 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.<br /> 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.<br /> <br /> === How to get code ===<br /> Using git as a version version control system getting the code from existing OX products is quite easy.<br /> Simply clone the [[AppSuite:UI build system#Source | UI]] repository and start working with it. If you would like to develop server/backend (via OSGI Framework) plugins, you would check out the the [[AppSuite:Backend build system#Source | backend]]<br /> <br /> === What can i build? ===<br /> <br /> If you want to have a simple introduction following easy steps from creating your workspace to actually performing your source code within AppSuite, read our [[AppSuite:GettingStarted | GettingStarted guide]].<br /> <br /> There are several other possibilities available to develop for AppSuite.<br /> <br /> *[[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]].<br /> <br /> *[[AppSuite:Writing_a_contacts_plugin | A contacts plugin]] let's you modify parts of AppSuite's contact view.<br /> <br /> *[[AppSuite:Using the Upsell widget | Upsell Widget]], to enable the AppSuite user to purchase additional features. <br /> <br /> *[[AppSuite:Writing a simple application | A real application/module]] for AppSuite, which should be displayed full screen.<br /> <br /> *[[AppSuite:Writing a notification area plugin | A notification plugin]] for AppSuite<br /> <br /> *[[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.<br /> <br /> *[[AppSuite:Creating a settings section in AppSuite settings | Settings plugin]] extending AppSuite settings and creating a new section.<br /> <br /> *[[AppSuite:Embedding your settings into AppSuite settings | Settings plugin]] embedding your own settings section via iframe into AppSuite.<br /> <br /> You got stuck somewhere? There are some hints, which might help you [[AppSuite:Debugging_the_UI | debugging the UI]].<br /> <br /> === How to get your code running ===<br /> 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.<br /> <br /> Since the AppSuite product consists of a server and a UI, you also need a working backend (AppSuite application server) to communicate with. <br /> Therefor you should run [[AppSuite:Appserver | Appserver]] using an existing OX AppSuite server and (with local parts of the AppSuite) automaticly get the recent stable source packages from the AppSuite servers. For using your namespace as a source for hosting your app, simply add the build-path of your app as an parameter while running appserver.<br /> <br /> === What's next ===<br /> No Idea what to do first? Read our [[AppSuite:GettingStarted | GettingStarted guide]] to have a step-by-step introduction about how to install the SDK, use the Build System, write your first app and get it running.</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:Developing_for_the_UI&diff=16416 AppSuite:Developing for the UI 2013-11-14T16:14:35Z

<p>John.broomfield: /* Development Flow for the AppSuite UI */</p> <hr /> <div><div class="title">UI Development for OX AppSuite</div><br /> <br /> __TOC__<br /> <br /> This page contains articles explaining the inner workings of the OX App Suite, web-based, graphical user interface. It is aimed at software developers who want to expand existing features, implement extensions or just gain a general understanding of how the UI works.<br /> <br /> === Tech Overview ===<br /> All technologies and frameworks used for developing a new component for the App Suite UI are listed and described in the following article: [[AppSuite:UI developer primer| Requirements to develop for the UI]]<br /> <br /> ==== Development Flow for the App Suite UI ====<br /> <br /> [[File:OX_AppSuite_UI_Development_Workflow.png]]<br /> <br /> === Developing Guidelines ===<br /> While developing code for OX products [[AppSuite:UI Development Style Guide | the UI Developement Style Guide]] helps you writing safe, clear and functional code.<br /> <br /> Designing apps, plugins and widgets running with the right layout, colors, look and feel is a breeze following the guidelines described in [[AppSuite:UI Design Guide | the UI Design Guide]].<br /> <br /> 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]].<br /> <br /> === Using extension points ===<br /> <br /> 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.<br /> 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.<br /> <br /> === How to get code ===<br /> Using git as a version version control system getting the code from existing OX products is quite easy.<br /> Simply clone the [[AppSuite:UI build system#Source | UI]] repository and start working with it. If you would like to develop server/backend (via OSGI Framework) plugins, you would check out the the [[AppSuite:Backend build system#Source | backend]]<br /> <br /> === What can i build? ===<br /> <br /> If you want to have a simple introduction following easy steps from creating your workspace to actually performing your source code within AppSuite, read our [[AppSuite:GettingStarted | GettingStarted guide]].<br /> <br /> There are several other possibilities available to develop for AppSuite.<br /> <br /> *[[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]].<br /> <br /> *[[AppSuite:Writing_a_contacts_plugin | A contacts plugin]] let's you modify parts of AppSuite's contact view.<br /> <br /> *[[AppSuite:Using the Upsell widget | Upsell Widget]], to enable the AppSuite user to purchase additional features. <br /> <br /> *[[AppSuite:Writing a simple application | A real application/module]] for AppSuite, which should be displayed full screen.<br /> <br /> *[[AppSuite:Writing a notification area plugin | A notification plugin]] for AppSuite<br /> <br /> *[[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.<br /> <br /> *[[AppSuite:Creating a settings section in AppSuite settings | Settings plugin]] extending AppSuite settings and creating a new section.<br /> <br /> *[[AppSuite:Embedding your settings into AppSuite settings | Settings plugin]] embedding your own settings section via iframe into AppSuite.<br /> <br /> You got stuck somewhere? There are some hints, which might help you [[AppSuite:Debugging_the_UI | debugging the UI]].<br /> <br /> === How to get your code running ===<br /> 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.<br /> <br /> Since the AppSuite product consists of a server and a UI, you also need a working backend (AppSuite application server) to communicate with. <br /> Therefor you should run [[AppSuite:Appserver | Appserver]] using an existing OX AppSuite server and (with local parts of the AppSuite) automaticly get the recent stable source packages from the AppSuite servers. For using your namespace as a source for hosting your app, simply add the build-path of your app as an parameter while running appserver.<br /> <br /> === What's next ===<br /> No Idea what to do first? Read our [[AppSuite:GettingStarted | GettingStarted guide]] to have a step-by-step introduction about how to install the SDK, use the Build System, write your first app and get it running.</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=AppSuite:Developing_for_the_UI&diff=16415 AppSuite:Developing for the UI 2013-11-14T16:13:39Z

<p>John.broomfield: </p> <hr /> <div><div class="title">UI Development for OX AppSuite</div><br /> <br /> __TOC__<br /> <br /> This page contains articles explaining the inner workings of the OX App Suite, web-based, graphical user interface. It is aimed at software developers who want to expand existing features, implement extensions or just gain a general understanding of how the UI works.<br /> <br /> === Tech Overview ===<br /> All technologies and frameworks used for developing a new component for the App Suite UI are listed and described in the following article: [[AppSuite:UI developer primer| Requirements to develop for the UI]]<br /> <br /> ==== Development Flow for the AppSuite UI ====<br /> <br /> [[File:OX_AppSuite_UI_Development_Workflow.png]]<br /> <br /> === Developing Guidelines ===<br /> While developing code for OX products [[AppSuite:UI Development Style Guide | the UI Developement Style Guide]] helps you writing safe, clear and functional code.<br /> <br /> Designing apps, plugins and widgets running with the right layout, colors, look and feel is a breeze following the guidelines described in [[AppSuite:UI Design Guide | the UI Design Guide]].<br /> <br /> 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]].<br /> <br /> === Using extension points ===<br /> <br /> 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.<br /> 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.<br /> <br /> === How to get code ===<br /> Using git as a version version control system getting the code from existing OX products is quite easy.<br /> Simply clone the [[AppSuite:UI build system#Source | UI]] repository and start working with it. If you would like to develop server/backend (via OSGI Framework) plugins, you would check out the the [[AppSuite:Backend build system#Source | backend]]<br /> <br /> === What can i build? ===<br /> <br /> If you want to have a simple introduction following easy steps from creating your workspace to actually performing your source code within AppSuite, read our [[AppSuite:GettingStarted | GettingStarted guide]].<br /> <br /> There are several other possibilities available to develop for AppSuite.<br /> <br /> *[[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]].<br /> <br /> *[[AppSuite:Writing_a_contacts_plugin | A contacts plugin]] let's you modify parts of AppSuite's contact view.<br /> <br /> *[[AppSuite:Using the Upsell widget | Upsell Widget]], to enable the AppSuite user to purchase additional features. <br /> <br /> *[[AppSuite:Writing a simple application | A real application/module]] for AppSuite, which should be displayed full screen.<br /> <br /> *[[AppSuite:Writing a notification area plugin | A notification plugin]] for AppSuite<br /> <br /> *[[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.<br /> <br /> *[[AppSuite:Creating a settings section in AppSuite settings | Settings plugin]] extending AppSuite settings and creating a new section.<br /> <br /> *[[AppSuite:Embedding your settings into AppSuite settings | Settings plugin]] embedding your own settings section via iframe into AppSuite.<br /> <br /> You got stuck somewhere? There are some hints, which might help you [[AppSuite:Debugging_the_UI | debugging the UI]].<br /> <br /> === How to get your code running ===<br /> 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.<br /> <br /> Since the AppSuite product consists of a server and a UI, you also need a working backend (AppSuite application server) to communicate with. <br /> Therefor you should run [[AppSuite:Appserver | Appserver]] using an existing OX AppSuite server and (with local parts of the AppSuite) automaticly get the recent stable source packages from the AppSuite servers. For using your namespace as a source for hosting your app, simply add the build-path of your app as an parameter while running appserver.<br /> <br /> === What's next ===<br /> No Idea what to do first? Read our [[AppSuite:GettingStarted | GettingStarted guide]] to have a step-by-step introduction about how to install the SDK, use the Build System, write your first app and get it running.</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=Help:Howto&diff=15346 Help:Howto 2013-08-19T08:03:26Z

<p>John.broomfield: /* Writing */</p> <hr /> <div><div class="title">Writing for OXpedia</div><br /> <br /> '''Summary:''' This article explains how to write a great OXpedia article .<br /> <br /> __TOC__<br /> <br /> First and foremost: A wiki thrives on articles. If you only follow one rule, then it should be this:<br /> "Write the article you are thinking about the way you want to." <br /> Then let [[#Who we are|us]] know. If it needs fixing in anyway then we will fix it for you. On the other hand, if you prefer to write the best article possible, then this style guide is meant to help you.<br /> <br /> <br /> == Style Guide ==<br /> <br /> === Writing ===<br /> <br /> There are tons of articles on writing technical documentation (see below for links). Here is a condensed version:<br /> <br /> * If you have got the choice between funny, eloquent and concise, go for the latter. (Actually, don't "go for the latter", but "go for concise", as the next guideline will explain).<br /> <br /> * Make sentences that stand on their own. This is especially important in a wiki where paragraphs or even lines might be moved around.<br /> <br /> === Namespace ===<br /> <br /> AppSuite-specific articles go into the AppSuite:* namespace. That means you simply prefix the page title with AppSuite:, that's all. The tricky part is knowing whether the article is AppSuite-specific. This is obvious for UI articles. But for server articles, it is not that clear-cut, as the backend is usually backwards-compatible with OX6. When in doubt, put it in the main namespace. (Which is called?)<br /> <br /> <br /> <br /> === Layout ===<br /> <br /> Due to some php magic, our skin does not show the article title. The benefit is that you are not bound by the restrictions of article titles on MediaWiki. To put up a <nowiki><div class="title">Title of the article</div></nowiki> element on top.<br /> <br /> Decide whether to use the ''table of contents'', which links all article headings and subheadings. If you do so, use <nowiki>__TOC__</nowiki>. Use it after the intro sentence and before the first heading that you wrote.<br /> <br /> Write an intro sentence that gives the user a rough overview of what the article covers.<br /> <br /> <br /> <br /> === Categories ===<br /> <br /> You are free to invent new categories. The following ones are just a fraction of all categories this wiki contains, but they are those we would like to see used more widely. We propagate these by linking them from the main page so they get a lot of visibility. If you want your hard work to be found, use them:<br /> <br /> * This wiki contains articles for OX5, OX6 and AppSuite. Please indicate which version you're referring to by adding either <nowiki>[[Category: OX5]]</nowiki>, <nowiki>[[Category: OX6]]</nowiki> or <nowiki>[[Category: AppSuite]]</nowiki>.<br /> <br /> ** Server-related articles usually concern both OX6 and AppSuite, so simply use both categories.<br /> <br /> * Articles here aim at a certain target group. Ask yourself whether you are writing for :<br /> <br /> ** Potential customers, <nowiki>[[Category: Customer]]</nowiki>, people interested in buying the product<br /> <br /> ** Users, <nowiki>[[Category: User]]</nowiki>, people working with the product<br /> <br /> *** If you are writing for users, more power to you, but consider letting the people responsible for the user manual know. Users get translated manuals, so these articles leave the wiki after an incubation period.<br /> <br /> ** Admins, <nowiki>[[Category: Admin]]</nowiki>, people running the product on their servers<br /> <br /> ** Developers <nowiki>[[Category: Developer]]</nowiki>, people extending the product using our SPIs or APIs<br /> <br /> *** Go into detail, explaining whether you are writing about a server component <nowiki>[[Category: Server]]</nowiki> or a user interface component <nowiki>[[Category: UI]]</nowiki><br /> <br /> <br /> <br /> === Numbering and versioning ===<br /> <br /> As opposed to normal wikis, it is not just the current version of an article that interests a user: Documentation for an older version of the product might be needed, too. The way we handle this might seem familiar to linux users:<br /> <br /> * When starting an article, use a good title. No numbers needed. For example "My useful article"<br /> <br /> * Once you realize that you are creating text that needs to be versioned, create a page for that version by adding a space and then the version number. For example: "My useful article 7.4.0". Ignore the fact that we used both "v7.4.0" and "7_4_0" in the past. That's outdated.<br /> <br /> ** This article is probably a verbatim copy of the one you worked on last. That should not be much trouble. If you're admin, you can even move the article. That takes care of the next step, too, which you have to do by hand otherwise.<br /> <br /> * Replace the content of the old article with a redirect to the most current version. For example: "My useful article" contains only <nowiki>#REDIRECT [[My useful article 7.4.0]]</nowiki><br /> <br /> * When you have articles for more than one version, please use the Template <nowiki>{{Version|7.x.x}}</nowiki> and point to the next and previous version in line.<br /> <br /> === Templates ===<br /> <br /> Templates make recurring tasks easier. The following templates are used regularly within the OXpedia:<br /> <br /> * The [[API status|level of stability]] a described feature has: <nowiki>{{Stability-unstable}}, {{Stability-stable}}, {{Stability-frozen}} and {{Stability-deprecated}}</nowiki><br /> * The version, used for pages with information for a specific version: <nowiki>{{Version|7.4.0}}</nowiki><br /> <br /> == Hints for Mediawiki ==<br /> This is a media wiki... even if our great design is trying to fool you into thinking otherwise. So all Mediawiki[http://meta.wikimedia.org] tricks apply here, too.<br /> <br /> * [http://en.wikipedia.org/wiki/Help:Editing Editing basic for Wikipedia]<br /> * [http://meta.wikimedia.org/wiki/Image:Wiki-refcard.pdf Markup cheat sheet (PDF)]<br /> * [http://meta.wikimedia.org/wiki/Help:Reference_card#Links_to_other_help_pages Mediawiki help pages]<br /> * [http://en.wikipedia.org/wiki/Wikipedia:Guide_to_layout Wikipedia's guide to layout]<br /> <br /> == Who we are ==<br /> We are the OXpedia team. You can reach us via oxpedia@open-xchange.com<br /> <br /> [[Category: Meta]]</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=Help:Howto&diff=15345 Help:Howto 2013-08-19T08:00:43Z

<p>John.broomfield: </p> <hr /> <div><div class="title">Writing for OXpedia</div><br /> <br /> '''Summary:''' This article explains how to write a great OXpedia article .<br /> <br /> __TOC__<br /> <br /> First and foremost: A wiki thrives on articles. If you only follow one rule, then it should be this:<br /> "Write the article you are thinking about the way you want to." <br /> Then let [[#Who we are|us]] know. If it needs fixing in anyway then we will fix it for you. On the other hand, if you prefer to write the best article possible, then this style guide is meant to help you.<br /> <br /> <br /> == Style Guide ==<br /> <br /> === Writing ===<br /> <br /> There are tons of articles on writing technical documentation. Here is a condensed version:<br /> <br /> * If you have got the choice between funny, eloquent and concise, go for the latter. (Actually, don't "go for the latter", but "go for concise", as the next guideline will explain).<br /> <br /> * Make sentences that stand on their own. This is especially important in a wiki where paragraphs or even lines might be moved around.<br /> <br /> <br /> <br /> === Namespace ===<br /> <br /> AppSuite-specific articles go into the AppSuite:* namespace. That means you simply prefix the page title with AppSuite:, that's all. The tricky part is knowing whether the article is AppSuite-specific. This is obvious for UI articles. But for server articles, it is not that clear-cut, as the backend is usually backwards-compatible with OX6. When in doubt, put it in the main namespace. (Which is called?)<br /> <br /> <br /> <br /> === Layout ===<br /> <br /> Due to some php magic, our skin does not show the article title. The benefit is that you are not bound by the restrictions of article titles on MediaWiki. To put up a <nowiki><div class="title">Title of the article</div></nowiki> element on top.<br /> <br /> Decide whether to use the ''table of contents'', which links all article headings and subheadings. If you do so, use <nowiki>__TOC__</nowiki>. Use it after the intro sentence and before the first heading that you wrote.<br /> <br /> Write an intro sentence that gives the user a rough overview of what the article covers.<br /> <br /> <br /> <br /> === Categories ===<br /> <br /> You are free to invent new categories. The following ones are just a fraction of all categories this wiki contains, but they are those we would like to see used more widely. We propagate these by linking them from the main page so they get a lot of visibility. If you want your hard work to be found, use them:<br /> <br /> * This wiki contains articles for OX5, OX6 and AppSuite. Please indicate which version you're referring to by adding either <nowiki>[[Category: OX5]]</nowiki>, <nowiki>[[Category: OX6]]</nowiki> or <nowiki>[[Category: AppSuite]]</nowiki>.<br /> <br /> ** Server-related articles usually concern both OX6 and AppSuite, so simply use both categories.<br /> <br /> * Articles here aim at a certain target group. Ask yourself whether you are writing for :<br /> <br /> ** Potential customers, <nowiki>[[Category: Customer]]</nowiki>, people interested in buying the product<br /> <br /> ** Users, <nowiki>[[Category: User]]</nowiki>, people working with the product<br /> <br /> *** If you are writing for users, more power to you, but consider letting the people responsible for the user manual know. Users get translated manuals, so these articles leave the wiki after an incubation period.<br /> <br /> ** Admins, <nowiki>[[Category: Admin]]</nowiki>, people running the product on their servers<br /> <br /> ** Developers <nowiki>[[Category: Developer]]</nowiki>, people extending the product using our SPIs or APIs<br /> <br /> *** Go into detail, explaining whether you are writing about a server component <nowiki>[[Category: Server]]</nowiki> or a user interface component <nowiki>[[Category: UI]]</nowiki><br /> <br /> <br /> <br /> === Numbering and versioning ===<br /> <br /> As opposed to normal wikis, it is not just the current version of an article that interests a user: Documentation for an older version of the product might be needed, too. The way we handle this might seem familiar to linux users:<br /> <br /> * When starting an article, use a good title. No numbers needed. For example "My useful article"<br /> <br /> * Once you realize that you are creating text that needs to be versioned, create a page for that version by adding a space and then the version number. For example: "My useful article 7.4.0". Ignore the fact that we used both "v7.4.0" and "7_4_0" in the past. That's outdated.<br /> <br /> ** This article is probably a verbatim copy of the one you worked on last. That should not be much trouble. If you're admin, you can even move the article. That takes care of the next step, too, which you have to do by hand otherwise.<br /> <br /> * Replace the content of the old article with a redirect to the most current version. For example: "My useful article" contains only <nowiki>#REDIRECT [[My useful article 7.4.0]]</nowiki><br /> <br /> * When you have articles for more than one version, please use the Template <nowiki>{{Version|7.x.x}}</nowiki> and point to the next and previous version in line.<br /> <br /> === Templates ===<br /> <br /> Templates make recurring tasks easier. The following templates are used regularly within the OXpedia:<br /> <br /> * The [[API status|level of stability]] a described feature has: <nowiki>{{Stability-unstable}}, {{Stability-stable}}, {{Stability-frozen}} and {{Stability-deprecated}}</nowiki><br /> * The version, used for pages with information for a specific version: <nowiki>{{Version|7.4.0}}</nowiki><br /> <br /> == Hints for Mediawiki ==<br /> This is a media wiki... even if our great design is trying to fool you into thinking otherwise. So all Mediawiki[http://meta.wikimedia.org] tricks apply here, too.<br /> <br /> * [http://en.wikipedia.org/wiki/Help:Editing Editing basic for Wikipedia]<br /> * [http://meta.wikimedia.org/wiki/Image:Wiki-refcard.pdf Markup cheat sheet (PDF)]<br /> * [http://meta.wikimedia.org/wiki/Help:Reference_card#Links_to_other_help_pages Mediawiki help pages]<br /> * [http://en.wikipedia.org/wiki/Wikipedia:Guide_to_layout Wikipedia's guide to layout]<br /> <br /> == Who we are ==<br /> We are the OXpedia team. You can reach us via oxpedia@open-xchange.com<br /> <br /> [[Category: Meta]]</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=Help:Howto&diff=15344 Help:Howto 2013-08-19T07:59:09Z

<p>John.broomfield: </p> <hr /> <div><div class="title">Writing for OXpedia</div><br /> <br /> '''Summary:''' This article explains how to write a great OXpedia article .<br /> <br /> __TOC__<br /> <br /> First and foremost: A wiki thrives on articles. If you only follow one rule, then it should be this:<br /> ''Write the article you are thinking about the way you want to." <br /> Then let [[#Who we are|us]] know. If it needs fixing in anyway then we will fix it for you. On the other hand, if you prefer to write the best article possible, then this style guide is meant to help you.<br /> <br /> <br /> == Style Guide ==<br /> <br /> === Writing ===<br /> <br /> There are tons of articles on writing technical documentation. Here is a condensed version:<br /> <br /> * If you have got the choice between funny, eloquent and concise, go for the latter. (Actually, don't "go for the latter", but "go for concise", as the next guideline will explain).<br /> <br /> * Make sentences that stand on their own. This is especially important in a wiki where paragraphs or even lines might be moved around.<br /> <br /> <br /> <br /> === Namespace ===<br /> <br /> AppSuite-specific articles go into the AppSuite:* namespace. That means you simply prefix the page title with AppSuite:, that's all. The tricky part is knowing whether the article is AppSuite-specific. This is obvious for UI articles. But for server articles, it is not that clear-cut, as the backend is usually backwards-compatible with OX6. When in doubt, put it in the main namespace. (Which is called?)<br /> <br /> <br /> <br /> === Layout ===<br /> <br /> Due to some php magic, our skin does not show the article title. The benefit is that you are not bound by the restrictions of article titles on MediaWiki. To put up a <nowiki><div class="title">Title of the article</div></nowiki> element on top.<br /> <br /> Decide whether to use the ''table of contents'', which links all article headings and subheadings. If you do so, use <nowiki>__TOC__</nowiki>. Use it after the intro sentence and before the first heading that you wrote.<br /> <br /> Write an intro sentence that gives the user a rough overview of what the article covers.<br /> <br /> <br /> <br /> === Categories ===<br /> <br /> You are free to invent new categories. The following ones are just a fraction of all categories this wiki contains, but they are those we would like to see used more widely. We propagate these by linking them from the main page so they get a lot of visibility. If you want your hard work to be found, use them:<br /> <br /> * This wiki contains articles for OX5, OX6 and AppSuite. Please indicate which version you're referring to by adding either <nowiki>[[Category: OX5]]</nowiki>, <nowiki>[[Category: OX6]]</nowiki> or <nowiki>[[Category: AppSuite]]</nowiki>.<br /> <br /> ** Server-related articles usually concern both OX6 and AppSuite, so simply use both categories.<br /> <br /> * Articles here aim at a certain target group. Ask yourself whether you are writing for :<br /> <br /> ** Potential customers, <nowiki>[[Category: Customer]]</nowiki>, people interested in buying the product<br /> <br /> ** Users, <nowiki>[[Category: User]]</nowiki>, people working with the product<br /> <br /> *** If you are writing for users, more power to you, but consider letting the people responsible for the user manual know. Users get translated manuals, so these articles leave the wiki after an incubation period.<br /> <br /> ** Admins, <nowiki>[[Category: Admin]]</nowiki>, people running the product on their servers<br /> <br /> ** Developers <nowiki>[[Category: Developer]]</nowiki>, people extending the product using our SPIs or APIs<br /> <br /> *** Go into detail, explaining whether you are writing about a server component <nowiki>[[Category: Server]]</nowiki> or a user interface component <nowiki>[[Category: UI]]</nowiki><br /> <br /> <br /> <br /> === Numbering and versioning ===<br /> <br /> As opposed to normal wikis, it is not just the current version of an article that interests a user: Documentation for an older version of the product might be needed, too. The way we handle this might seem familiar to linux users:<br /> <br /> * When starting an article, use a good title. No numbers needed. For example "My useful article"<br /> <br /> * Once you realize that you are creating text that needs to be versioned, create a page for that version by adding a space and then the version number. For example: "My useful article 7.4.0". Ignore the fact that we used both "v7.4.0" and "7_4_0" in the past. That's outdated.<br /> <br /> ** This article is probably a verbatim copy of the one you worked on last. That should not be much trouble. If you're admin, you can even move the article. That takes care of the next step, too, which you have to do by hand otherwise.<br /> <br /> * Replace the content of the old article with a redirect to the most current version. For example: "My useful article" contains only <nowiki>#REDIRECT [[My useful article 7.4.0]]</nowiki><br /> <br /> * When you have articles for more than one version, please use the Template <nowiki>{{Version|7.x.x}}</nowiki> and point to the next and previous version in line.<br /> <br /> === Templates ===<br /> <br /> Templates make recurring tasks easier. The following templates are used regularly within the OXpedia:<br /> <br /> * The [[API status|level of stability]] a described feature has: <nowiki>{{Stability-unstable}}, {{Stability-stable}}, {{Stability-frozen}} and {{Stability-deprecated}}</nowiki><br /> * The version, used for pages with information for a specific version: <nowiki>{{Version|7.4.0}}</nowiki><br /> <br /> == Hints for Mediawiki ==<br /> This is a media wiki... even if our great design is trying to fool you into thinking otherwise. So all Mediawiki[http://meta.wikimedia.org] tricks apply here, too.<br /> <br /> * [http://en.wikipedia.org/wiki/Help:Editing Editing basic for Wikipedia]<br /> * [http://meta.wikimedia.org/wiki/Image:Wiki-refcard.pdf Markup cheat sheet (PDF)]<br /> * [http://meta.wikimedia.org/wiki/Help:Reference_card#Links_to_other_help_pages Mediawiki help pages]<br /> * [http://en.wikipedia.org/wiki/Wikipedia:Guide_to_layout Wikipedia's guide to layout]<br /> <br /> == Who we are ==<br /> We are the OXpedia team. You can reach us via oxpedia@open-xchange.com<br /> <br /> [[Category: Meta]]</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=Help:Howto&diff=15343 Help:Howto 2013-08-16T14:19:01Z

<p>John.broomfield: </p> <hr /> <div><div class="title">Writing for OXpedia</div><br /> <br /> '''Summary:''' This article explains how to write a great OXpedia article .<br /> <br /> __TOC__<br /> <br /> First and foremost: A wiki thrives on articles. If you only follow one rule, then it should be this: ''Write the article you are thinking about the way you want to. Then let [[#Who we are|us]] know.'' If it needs it then we'll fix it. On the other hand, if you prefer to write the best article possible, this style guide is meant to help you.<br /> <br /> <br /> == Style Guide ==<br /> <br /> === Writing ===<br /> <br /> There are tons of articles on writing technical documentation. Here is a condensed version:<br /> <br /> * If you have got the choice between funny, eloquent and concise, go for the latter. (Actually, don't "go for the latter", but "go for concise", as the next guideline will explain).<br /> <br /> * Make sentences that stand on their own. This is especially important in a wiki where paragraphs or even lines might be moved around.<br /> <br /> <br /> <br /> === Namespace ===<br /> <br /> AppSuite-specific articles go into the AppSuite:* namespace. That means you simply prefix the page title with AppSuite:, that's all. The tricky part is knowing whether the article is AppSuite-specific. This is obvious for UI articles. But for server articles, it is not that clear-cut, as the backend is usually backwards-compatible with OX6. When in doubt, put it in the main namespace. (Which is called?)<br /> <br /> <br /> <br /> === Layout ===<br /> <br /> Due to some php magic, our skin does not show the article title. The benefit is that you are not bound by the restrictions of article titles on MediaWiki. To put up a <nowiki><div class="title">Title of the article</div></nowiki> element on top.<br /> <br /> Decide whether to use the ''table of contents'', which links all article headings and subheadings. If you do so, use <nowiki>__TOC__</nowiki>. Use it after the intro sentence and before the first heading that you wrote.<br /> <br /> Write an intro sentence that gives the user a rough overview of what the article covers.<br /> <br /> <br /> <br /> === Categories ===<br /> <br /> You are free to invent new categories. The following ones are just a fraction of all categories this wiki contains, but they are those we would like to see used more widely. We propagate these by linking them from the main page so they get a lot of visibility. If you want your hard work to be found, use them:<br /> <br /> * This wiki contains articles for OX5, OX6 and AppSuite. Please indicate which version you're referring to by adding either <nowiki>[[Category: OX5]]</nowiki>, <nowiki>[[Category: OX6]]</nowiki> or <nowiki>[[Category: AppSuite]]</nowiki>.<br /> <br /> ** Server-related articles usually concern both OX6 and AppSuite, so simply use both categories.<br /> <br /> * Articles here aim at a certain target group. Ask yourself whether you are writing for :<br /> <br /> ** Potential customers, <nowiki>[[Category: Customer]]</nowiki>, people interested in buying the product<br /> <br /> ** Users, <nowiki>[[Category: User]]</nowiki>, people working with the product<br /> <br /> *** If you are writing for users, more power to you, but consider letting the people responsible for the user manual know. Users get translated manuals, so these articles leave the wiki after an incubation period.<br /> <br /> ** Admins, <nowiki>[[Category: Admin]]</nowiki>, people running the product on their servers<br /> <br /> ** Developers <nowiki>[[Category: Developer]]</nowiki>, people extending the product using our SPIs or APIs<br /> <br /> *** Go into detail, explaining whether you are writing about a server component <nowiki>[[Category: Server]]</nowiki> or a user interface component <nowiki>[[Category: UI]]</nowiki><br /> <br /> <br /> <br /> === Numbering and versioning ===<br /> <br /> As opposed to normal wikis, it is not just the current version of an article that interests a user: Documentation for an older version of the product might be needed, too. The way we handle this might seem familiar to linux users:<br /> <br /> * When starting an article, use a good title. No numbers needed. For example "My useful article"<br /> <br /> * Once you realize that you are creating text that needs to be versioned, create a page for that version by adding a space and then the version number. For example: "My useful article 7.4.0". Ignore the fact that we used both "v7.4.0" and "7_4_0" in the past. That's outdated.<br /> <br /> ** This article is probably a verbatim copy of the one you worked on last. That should not be much trouble. If you're admin, you can even move the article. That takes care of the next step, too, which you have to do by hand otherwise.<br /> <br /> * Replace the content of the old article with a redirect to the most current version. For example: "My useful article" contains only <nowiki>#REDIRECT [[My useful article 7.4.0]]</nowiki><br /> <br /> * When you have articles for more than one version, please use the Template <nowiki>{{Version|7.x.x}}</nowiki> and point to the next and previous version in line.<br /> <br /> === Templates ===<br /> <br /> Templates make recurring tasks easier. The following templates are used regularly within the OXpedia:<br /> <br /> * The [[API status|level of stability]] a described feature has: <nowiki>{{Stability-unstable}}, {{Stability-stable}}, {{Stability-frozen}} and {{Stability-deprecated}}</nowiki><br /> * The version, used for pages with information for a specific version: <nowiki>{{Version|7.4.0}}</nowiki><br /> <br /> == Hints for Mediawiki ==<br /> This is a media wiki... even if our great design is trying to fool you into thinking otherwise. So all Mediawiki[http://meta.wikimedia.org] tricks apply here, too.<br /> <br /> * [http://en.wikipedia.org/wiki/Help:Editing Editing basic for Wikipedia]<br /> * [http://meta.wikimedia.org/wiki/Image:Wiki-refcard.pdf Markup cheat sheet (PDF)]<br /> * [http://meta.wikimedia.org/wiki/Help:Reference_card#Links_to_other_help_pages Mediawiki help pages]<br /> * [http://en.wikipedia.org/wiki/Wikipedia:Guide_to_layout Wikipedia's guide to layout]<br /> <br /> == Who we are ==<br /> We are the OXpedia team. You can reach us via oxpedia@open-xchange.com<br /> <br /> [[Category: Meta]]</div>

John.broomfield https://wiki.open-xchange.com/wiki/index.php?title=API_status&diff=15214 API status 2013-08-07T13:51:29Z

<p>John.broomfield: </p> <hr /> <div><div class="title">API Status</div><br /> At Open-Xchange we are continuously improving our products. Most of the time the<br /> changes we make will have no side effects on existing installations and 3rd<br /> party software integration. However, sometimes fixing a bug or adding a new<br /> feature requires changes to the existing API that are not always backwards<br /> compatible.<br /> <br /> To help you understand the impact of these changes we have defined the following<br /> API status list. This page describes each level and indicates how information<br /> about changes to documented features is communicated.<br /> <br /> In creating these levels we were inspired by the [http://nodejs.org/api/documentation.html#documentation_stability_index node.js stability index].<br /> <br /> __TOC__<br /> <br /> API features can be categorized as follows.<br /> <br /> == In development ==<br /> <br /> This feature is currently being developed by Open-Xchange. If this is a customer<br /> request the customer requesting the change will provide feedback. On occasion<br /> Open-Xchange may solicit input from a wider audience in order to optimize<br /> feature development for the widest possible audience. Due to the low overhead of<br /> making changes at this stage feedback is more likely to be integrated into the<br /> feature than at other status levels.<br /> <br /> Changes will not be announced. Using the watch function to stay updated may<br /> help. We will try to update the documentation concurrently with code changes,<br /> but this cannot be guaranteed.<br /> <br /> == New ==<br /> <br /> This feature was recently released, is fully tested and considered stable but is<br /> in the process of settling. Based on customer experience across a diverse range<br /> of production environments it is possible that further changes may be necessary.<br /> To indicate this we have defined a separate level from Stable.<br /> <br /> This feature is documented. Changes will not be announced. We recommend using<br /> the watch function for the given page to stay updated.<br /> <br /> == Stable ==<br /> <br /> The feature is considered stable and is fully documented. However it is possible<br /> that cleanup in the underlying code may cause minor changes.<br /> Backwards-compatibility will be maintained if possible.<br /> <br /> Changes that are not backwards compatible will be announced in the release<br /> notes.<br /> <br /> == Frozen ==<br /> <br /> This API has been tested extensively in production and is unlikely to be<br /> changed. If changes do occur they will be announced in the release notes two<br /> major releases in advance.<br /> <br /> == Deprecated ==<br /> <br /> This feature is known to be problematic, and changes or even removal are<br /> planned. Do not rely on it. Use of the feature may cause warnings. Backwards<br /> compatibility should not be expected.<br /> <br /> Changes will not be announced.<br /> <br /> [[Category:Meta]]<br /> [[Category:AppSuite]]</div>

John.broomfield