|
5 | 5 | xmlns:xlink="http://www.w3.org/1999/xlink"> |
6 | 6 | <info> |
7 | 7 | <title>Getting Started with Web Application Development</title> |
8 | | - <date>2Q19</date> |
| 8 | + <date>4Q24</date> |
9 | 9 | <keywordset> |
10 | 10 | <keyword>getting-started</keyword> |
11 | 11 | <keyword>application-development</keyword> |
|
86 | 86 | <sect1 xml:id="starting"> |
87 | 87 | <title>Starting a New Application</title> |
88 | 88 |
|
89 | | - <para>To start a new application, open <link xlink:href="{eXide}/index.html">eXide</link> by |
90 | | - clicking the link or by going via the dashboard or the system tray menu of |
91 | | - eXist-db.</para> |
92 | | - <orderedlist> |
93 | | - <listitem> |
94 | | - <para>From the main menu, select <literal>Application</literal>/<literal>New |
95 | | - Application</literal>. The Deployment Editor dialog should pop up. (If you are |
96 | | - not logged in as an admin user yet, you'll first be asked to do so.)</para> |
97 | | - </listitem> |
98 | | - <listitem> |
99 | | - <para>Fill out the form by choosing a template, a target collection, a name, an |
100 | | - abbreviation and a title for the application (see below). All other form fields |
101 | | - and pages are optional, so you can ignore them for now.</para> |
102 | | - <figure> |
103 | | - <title>Deployment Editor Dialog</title> |
104 | | - <mediaobject> |
105 | | - <imageobject> |
106 | | - <imagedata fileref="assets/new-application-screen.png"/> |
107 | | - </imageobject> |
108 | | - </mediaobject> |
109 | | - </figure> |
110 | | - <para>The important fields are:</para> |
111 | | - <variablelist> |
112 | | - <varlistentry> |
113 | | - <term>Template</term> |
114 | | - <listitem> |
115 | | - <para>The template used to generate the new application. Right now three |
116 | | - templates are available: </para> |
117 | | - <itemizedlist> |
118 | | - <listitem> |
119 | | - <para>The "eXist-db Design" template is based on the standard |
120 | | - eXist-db page layout and design.</para> |
121 | | - </listitem> |
122 | | - <listitem> |
123 | | - <para>The "Plain" template creates a basic page layout without |
124 | | - eXist-db specific stuff.</para> |
125 | | - </listitem> |
126 | | - <listitem> |
127 | | - <para>The "Empty Package" creates an empty package with just the |
128 | | - descriptors in it.</para> |
129 | | - </listitem> |
130 | | - </itemizedlist> |
131 | | - <para>Both the "eXist-db Design" and "Plain" templates use the Bootstrap |
132 | | - CSS library for styling and the HTML templating XQuery module to |
133 | | - achieve a clean separation of concerns. More about this |
134 | | - later.</para> |
135 | | - </listitem> |
136 | | - </varlistentry> |
137 | | - <varlistentry> |
138 | | - <term>Type of the package</term> |
139 | | - <listitem> |
140 | | - <para>The main distinction between "library" and "application" is: a |
141 | | - "library" does not have an HTML view and will therefore not show a |
142 | | - clickable icon in the dashboard. If you want to create a library, |
143 | | - use the "Empty Package" template.</para> |
144 | | - </listitem> |
145 | | - </varlistentry> |
146 | | - <varlistentry> |
147 | | - <term>Target collection</term> |
148 | | - <listitem> |
149 | | - <para>This is the collection where your app will be installed by |
150 | | - default. Please note that this can be changed by the package manager |
151 | | - during install. It is a recommendation, not a requirement.</para> |
152 | | - </listitem> |
153 | | - </varlistentry> |
154 | | - <varlistentry> |
155 | | - <term>Name</term> |
156 | | - <listitem> |
157 | | - <para>A unique identifier for the application. The EXPath proposal |
158 | | - recommends to use a URI here to avoid name collisions so we have |
159 | | - made this is a requirement.</para> |
160 | | - </listitem> |
161 | | - </varlistentry> |
162 | | - <varlistentry> |
163 | | - <term>Abbreviation</term> |
164 | | - <listitem> |
165 | | - <para>A short abbreviation for the application. Among other things, it |
166 | | - will be used as the file name of the final <code>.xar</code> package |
167 | | - and for the name of the collection into which the application |
168 | | - installs. Choose a simple abbreviation without spaces or punctuation |
169 | | - characters.</para> |
170 | | - </listitem> |
171 | | - </varlistentry> |
172 | | - <varlistentry> |
173 | | - <term>Title</term> |
174 | | - <listitem> |
175 | | - <para>A short description of the application, which will be displayed to |
176 | | - the user in the dashboard.</para> |
177 | | - </listitem> |
178 | | - </varlistentry> |
179 | | - </variablelist> |
180 | | - </listitem> |
181 | | - <listitem> |
182 | | - <para>Click on <guimenuitem>Done</guimenuitem> when you have completed the form. |
183 | | - eXide will now generate a collection hierarchy for the application based on the |
184 | | - template selected. Once completed, the <guimenuitem>Open Document</guimenuitem> |
185 | | - dialog will pop up to indicate that you can start editing files.</para> |
186 | | - <para>In the following, we assume that the app has been called "Tutorial" and its |
187 | | - abbreviation is "tutorial".</para> |
188 | | - <figure> |
189 | | - <title>Open Document Dialog after generating application</title> |
190 | | - <mediaobject> |
191 | | - <imageobject> |
192 | | - <imagedata fileref="assets/new-application-completed.png"/> |
193 | | - </imageobject> |
194 | | - </mediaobject> |
195 | | - </figure> |
196 | | - </listitem> |
197 | | - <listitem> |
198 | | - |
199 | | - <para>To test if the application has been generated properly, select the |
200 | | - <literal>index.html</literal> page of the new app in the open dialog and load it |
201 | | - into eXide. With <literal>index.html</literal> open, select |
202 | | - <guimenuitem>Application, Run App</guimenuitem> from the menu. A small dialog |
203 | | - box will pop up, showing you a link to the application.</para> |
204 | | - <para>Click on the link to run the application in a separate browser tab. </para> |
205 | | - <figure> |
206 | | - <title>Run Dialog</title> |
207 | | - <mediaobject> |
208 | | - <imageobject> |
209 | | - <imagedata fileref="assets/new-application-run.png"/> |
210 | | - </imageobject> |
211 | | - </mediaobject> |
212 | | - </figure> |
213 | | - <figure> |
214 | | - <title>The Default Start Page of the Application</title> |
215 | | - <mediaobject> |
216 | | - <imageobject> |
217 | | - <imagedata fileref="assets/new-application-home.png"/> |
218 | | - </imageobject> |
219 | | - </mediaobject> |
220 | | - </figure> |
221 | | - <para>All the items in the <literal>Application</literal> menu apply to the active |
222 | | - app (the application to which the file currently open in the editor belongs). |
223 | | - You can check which app is active by looking at the <guimenuitem>Current |
224 | | - app:</guimenuitem> status label at the top right of the eXide window.</para> |
225 | | - </listitem> |
226 | | - </orderedlist> |
| 89 | + <para>There are many ways to start new applications on your local environment, we provide a <link xlink:href="https://github.com/eXist-db/generator-exist">yeoman generator</link> to be run from your commandline.</para> |
227 | 90 | </sect1> |
228 | 91 |
|
229 | 92 | <!-- ================================================================== --> |
|
0 commit comments