{"id":4362,"date":"2019-03-22T10:26:27","date_gmt":"2019-03-22T09:26:27","guid":{"rendered":"https:\/\/www.softproject.de\/de\/?post_type=demos&#038;p=4362"},"modified":"2022-07-26T13:22:13","modified_gmt":"2022-07-26T11:22:13","slug":"get-started-web-apps-1","status":"publish","type":"demos","link":"https:\/\/www.softproject.de\/de\/demos\/get-started-web-apps-1\/","title":{"rendered":"X4\u00a0Activities Web\u00a0Apps (1. Teil)"},"content":{"rendered":"<section class=\"wpb-content-wrapper\"><p>[vc_row row_height_percent=&#8220;0&#8243; override_padding=&#8220;yes&#8220; h_padding=&#8220;2&#8243; top_padding=&#8220;3&#8243; bottom_padding=&#8220;3&#8243; back_color=&#8220;color-nhtu&#8220; overlay_alpha=&#8220;50&#8243; gutter_size=&#8220;3&#8243; column_width_percent=&#8220;100&#8243; shift_y=&#8220;0&#8243; z_index=&#8220;0&#8243;][vc_column column_width_percent=&#8220;100&#8243; position_horizontal=&#8220;left&#8220; gutter_size=&#8220;3&#8243; style=&#8220;dark&#8220; overlay_alpha=&#8220;50&#8243; shift_x=&#8220;0&#8243; shift_y=&#8220;0&#8243; shift_y_down=&#8220;0&#8243; z_index=&#8220;0&#8243; medium_width=&#8220;0&#8243; mobile_width=&#8220;0&#8243; width=&#8220;1\/1&#8243;][vc_custom_heading heading_semantic=&#8220;h1&#8243; text_size=&#8220;h1&#8243; uncode_shortcode_id=&#8220;117373&#8243;]Get started with Web Apps[\/vc_custom_heading][vc_column_text text_lead=&#8220;yes&#8220;]Teil 1: Erstellen Sie Ihre erste Web App in 5 Minuten.[\/vc_column_text][\/vc_column][\/vc_row][vc_row row_height_percent=&#8220;0&#8243; override_padding=&#8220;yes&#8220; h_padding=&#8220;2&#8243; top_padding=&#8220;3&#8243; bottom_padding=&#8220;3&#8243; overlay_alpha=&#8220;50&#8243; gutter_size=&#8220;4&#8243; column_width_percent=&#8220;100&#8243; shift_y=&#8220;0&#8243; z_index=&#8220;0&#8243;][vc_column column_width_percent=&#8220;100&#8243; position_horizontal=&#8220;left&#8220; gutter_size=&#8220;3&#8243; overlay_alpha=&#8220;50&#8243; shift_x=&#8220;0&#8243; shift_y=&#8220;0&#8243; shift_y_down=&#8220;0&#8243; z_index=&#8220;0&#8243; medium_width=&#8220;0&#8243; mobile_width=&#8220;0&#8243; width=&#8220;7\/12&#8243;][vc_custom_heading]Tutorial: Erste Schritte mit X4 Activities Web Apps[\/vc_custom_heading][vc_column_text]Das ist das erste aus einer Reihe von Tutorials. In dieser Reihe lernen Sie grundlegendes, um eine Web App mit X4 Activities zu erstellen.<\/p>\n<p>Eine detailliertere Einf\u00fchrung finden Sie im Handbuch f\u00fcr X4 Activities.<\/p>\n<p>Am Ende der Reihe verf\u00fcgen Sie \u00fcber eine Web App, mit der eine Filmdatenbank verwaltet werden kann.[\/vc_column_text][vc_custom_heading heading_semantic=&#8220;h3&#8243; text_size=&#8220;h3&#8243;]Inhaltsverzeichnis[\/vc_custom_heading][vc_column_text]1. <a href=\"#web-app-erstellen\">Erstellen einer X4 Activities Web App<\/a><\/p>\n<p>2. <a href=\"#web-app-ausf\u00fchren\">Ausf\u00fchren der Web App<\/a><\/p>\n<p>3. <a href=\"#projektdateien-ueberpruefen\">\u00dcberpr\u00fcfen der Projektdateien<\/a><\/p>\n<p>4. <a href=\"#naechste-schritte\">N\u00e4chste Schritte<\/a>[\/vc_column_text][uncode_list icon=&#8220;fa fa-check&#8220; icon_color=&#8220;accent&#8220;]In diesem Tutorial:<\/p>\n<ul>\n<li>Erstellen Sie ein Web App-Projekt im X4\u00a0Designer.<\/li>\n<li>F\u00fchren Sie die Web App aus.<\/li>\n<li>\u00dcberpr\u00fcfen Sie die Projektdateien.<\/li>\n<\/ul>\n<p>[\/uncode_list][vc_column_text]Am Ende dieses Tutorials verf\u00fcgen Sie \u00fcber eine funktionsf\u00e4hige X4\u00a0Activities\u00a0Web\u00a0App, auf der Sie in sp\u00e4teren Tutorials aufbauen werden.[\/vc_column_text][\/vc_column][vc_column column_width_percent=&#8220;100&#8243; gutter_size=&#8220;3&#8243; override_padding=&#8220;yes&#8220; column_padding=&#8220;3&#8243; back_color=&#8220;color-xsdn&#8220; overlay_alpha=&#8220;50&#8243; shift_x=&#8220;0&#8243; shift_y=&#8220;0&#8243; shift_y_down=&#8220;0&#8243; z_index=&#8220;0&#8243; medium_width=&#8220;0&#8243; mobile_width=&#8220;0&#8243; radius=&#8220;lg&#8220; shadow=&#8220;std&#8220; width=&#8220;5\/12&#8243;][vc_column_text]<\/p>\n<h3>Case<\/h3>\n<p>Highlights aus dem Release 6.0 der X4 Suite[\/vc_column_text][vc_column_text]<\/p>\n<h3>X4 Suite-Komponenten<\/h3>\n<p>X4 Activities Web App[\/vc_column_text][vc_column_text]<\/p>\n<h3>Branchen<\/h3>\n<p>Branchen\u00fcbergreifend[\/vc_column_text][\/vc_column][\/vc_row][vc_row row_height_percent=&#8220;0&#8243; overlay_alpha=&#8220;50&#8243; gutter_size=&#8220;3&#8243; column_width_percent=&#8220;100&#8243; shift_y=&#8220;0&#8243; z_index=&#8220;0&#8243; row_name=&#8220;web-app-erstellen&#8220;][vc_column width=&#8220;7\/12&#8243;][vc_custom_heading heading_semantic=&#8220;h3&#8243; text_size=&#8220;h3&#8243;]1. Erstellen einer X4 Activities Web App[\/vc_custom_heading][vc_column_text]Um den <b>Project Creation Wizard<\/b> zu \u00f6ffnen, klicken Sie im X4 Designer im Men\u00fc <b>File<\/b> auf <b>New &gt; Web App Project<\/b>.[\/vc_column_text][vc_single_image media=&#8220;4366&#8243; media_width_percent=&#8220;100&#8243;][vc_column_text]Nennen Sie das Projekt <em><code>MovieManager<\/code><\/em>.[\/vc_column_text][vc_single_image media=&#8220;4367&#8243; media_width_percent=&#8220;100&#8243;][vc_column_text]Das folgende Projekt wird erstellt:[\/vc_column_text][vc_single_image media=&#8220;4368&#8243; media_width_percent=&#8220;100&#8243;][\/vc_column][vc_column width=&#8220;5\/12&#8243;][\/vc_column][\/vc_row][vc_row row_height_percent=&#8220;0&#8243; overlay_alpha=&#8220;50&#8243; gutter_size=&#8220;3&#8243; column_width_percent=&#8220;100&#8243; shift_y=&#8220;0&#8243; z_index=&#8220;0&#8243; row_name=&#8220;web-app-ausf\u00fchren&#8220;][vc_column width=&#8220;7\/12&#8243;][vc_custom_heading heading_semantic=&#8220;h3&#8243; text_size=&#8220;h3&#8243;]2. Ausf\u00fchren der Web App[\/vc_custom_heading][vc_column_text]Klicken Sie mit der rechten Maustaste auf das Web App-Projekt. W\u00e4hlen Sie im Kontextmen\u00fc <b>Open Web App in browser<\/b>.[\/vc_column_text][vc_single_image media=&#8220;4369&#8243; media_width_percent=&#8220;100&#8243;][vc_column_text]Melden Sie sich im Browser mit den Standard-Benutzerinformationen an.[\/vc_column_text][vc_single_image media=&#8220;4365&#8243; media_width_percent=&#8220;100&#8243;][vc_column_text]Nach der Anmeldung gelangen Sie zu Ihrer Web App:[\/vc_column_text][vc_single_image media=&#8220;4370&#8243; media_width_percent=&#8220;100&#8243;][\/vc_column][vc_column width=&#8220;5\/12&#8243;][\/vc_column][\/vc_row][vc_row row_height_percent=&#8220;0&#8243; overlay_alpha=&#8220;50&#8243; gutter_size=&#8220;3&#8243; column_width_percent=&#8220;100&#8243; shift_y=&#8220;0&#8243; z_index=&#8220;0&#8243; row_name=&#8220;projektdateien-ueberpruefen&#8220;][vc_column width=&#8220;7\/12&#8243;][vc_custom_heading heading_semantic=&#8220;h3&#8243; text_size=&#8220;h3&#8243;]3. \u00dcberpr\u00fcfen der Projektdateien[\/vc_custom_heading][vc_column_text]Es folgt eine \u00dcbersicht \u00fcber die Projektordner und -dateien, mit denen Sie in sp\u00e4teren Tutorials arbeiten werden.[\/vc_column_text][vc_custom_heading heading_semantic=&#8220;h4&#8243; text_size=&#8220;h4&#8243;]Ordner \u201eResources\u201c[\/vc_custom_heading][vc_column_text]Enth\u00e4lt statische Dateien (Ressourcen), die f\u00fcr den Endbenutzer \u00fcber die Web App verf\u00fcgbar sind, z. B. das Logo der Anwendung oder verwendete Bilder.<\/p>\n<p>ACHTUNG: Die Inhalte dieses Ordners sind ggf. \u00fcber das Internet abrufbar.[\/vc_column_text][vc_custom_heading heading_semantic=&#8220;h4&#8243; text_size=&#8220;h4&#8243;]Ordner \u201eServices\u201c[\/vc_custom_heading][vc_column_text]Enth\u00e4lt eine Ordnerstruktur analog zur Struktur von ESB-Projekten. Innerhalb dieses Ordners wird die Logik der Web App mit X4\u00a0Prozessen definiert. Folgende Unterordner sind hier definiert:[\/vc_column_text][uncode_list icon=&#8220;fa fa-check&#8220; icon_color=&#8220;accent&#8220;]<\/p>\n<ul>\n<li><code>Adapters<\/code>: Enth\u00e4lt Referenzen zu Adaptern.<\/li>\n<li><code>Processes<\/code>: Enth\u00e4lt X4 Prozesse, die die Logik der Web App abbilden.<\/li>\n<li><code>Resources<\/code>: Enth\u00e4lt Ressourcen zur Verwendung in den Prozessen. (INFO: Die Inhalte dieses Ordners sind NICHT \u00fcber das Internet abrufbar.)<\/li>\n<li><code>TemporaryFiles<\/code>: Enth\u00e4lt tempor\u00e4re Dateien zur Verwendung in den Prozessen.<\/li>\n<li><code>Transformations<\/code>: Enth\u00e4lt Transformationsdateien zur Verwendung in den Prozessen.<\/li>\n<\/ul>\n<p>[\/uncode_list][vc_custom_heading heading_semantic=&#8220;h4&#8243; text_size=&#8220;h4&#8243;]Ordner \u201eTranslations\u201d[\/vc_custom_heading][vc_column_text]Dieser Ordner enth\u00e4lt \u00dcbersetzungsdateien zur Lokalisierung der Web App.[\/vc_column_text][vc_custom_heading heading_semantic=&#8220;h4&#8243; text_size=&#8220;h4&#8243;]Datei \u201eMovieManager.dpr\u201c[\/vc_custom_heading][vc_column_text]Diese Datei ist eine deklarative Beschreibungsdatei (XML) der Datenschutzerkl\u00e4rung der Web App. Diese Datei ist optional und kann entfernt werden, falls keine Datenschutzerkl\u00e4rung f\u00fcr die Web App ben\u00f6tigt wird.[\/vc_column_text][vc_custom_heading heading_semantic=&#8220;h4&#8243; text_size=&#8220;h4&#8243;]Datei \u201eMovieManager.imprint\u201c[\/vc_custom_heading][vc_column_text]Diese Datei ist eine deklarative Beschreibungsdatei (XML) des Impressums der Web App. Diese Datei ist optional und kann entfernt werden, falls kein Impressum f\u00fcr die Web App ben\u00f6tigt wird.[\/vc_column_text][vc_custom_heading heading_semantic=&#8220;h4&#8243; text_size=&#8220;h4&#8243;]Datei \u201eMovieManager.theme\u201c[\/vc_custom_heading][vc_column_text]Diese Datei enth\u00e4lt den Theme Editor f\u00fcr die Web App. Der Theme Editor erm\u00f6glicht die Anpassung des Designs auf Basis von Material-Design-Farbpaletten.[\/vc_column_text][vc_custom_heading heading_semantic=&#8220;h4&#8243; text_size=&#8220;h4&#8243;]Datei \u201eMovieManager.wad\u201c[\/vc_custom_heading][vc_column_text]Diese Datei enth\u00e4lt die deklarative Beschreibungsdatei (XML) der Web App. Die Web App-Definition enth\u00e4lt sowohl die Beschreibung des Datenmodells (Model) als auch die Beschreibung der Oberfl\u00e4chen.<\/p>\n<p>Weitere Informationen zu WAD-Dateien finden Sie im X4 Activities Handbuch.[\/vc_column_text][\/vc_column][vc_column width=&#8220;5\/12&#8243;][\/vc_column][\/vc_row][vc_row row_height_percent=&#8220;0&#8243; overlay_alpha=&#8220;50&#8243; gutter_size=&#8220;3&#8243; column_width_percent=&#8220;100&#8243; shift_y=&#8220;0&#8243; z_index=&#8220;0&#8243; row_name=&#8220;naechste-schritte&#8220;][vc_column width=&#8220;7\/12&#8243;][vc_custom_heading]4. N\u00e4chste Schritte[\/vc_custom_heading][uncode_list icon=&#8220;fa fa-check&#8220; icon_color=&#8220;accent&#8220;]In diesem Tutorial:<\/p>\n<ul>\n<li>Haben Sie eine X4 Activities Web App erstellt.<\/li>\n<li>Haben Sie die Web App ausgef\u00fchrt.<\/li>\n<li>Haben Sie die Projektdateien \u00fcberpr\u00fcft.<\/li>\n<\/ul>\n<p>[\/uncode_list][vc_column_text]Fahren Sie mit dem n\u00e4chsten Tutorial der Reihe fort (auf der Startseite des X4 Designers \u2013 sobald verf\u00fcgbar).[\/vc_column_text][vc_button button_color=&#8220;accent&#8220; radius=&#8220;btn-circle&#8220; border_width=&#8220;0&#8243; link=&#8220;url:https%3A%2F%2Fsoftproject.de%2Fde%2F%3Fdateidownload%3D6761||target:%20_blank|&#8220;]Demodateien herunterladen[\/vc_button][\/vc_column][vc_column width=&#8220;5\/12&#8243;][\/vc_column][\/vc_row][vc_row row_height_percent=&#8220;0&#8243; override_padding=&#8220;yes&#8220; h_padding=&#8220;2&#8243; top_padding=&#8220;3&#8243; bottom_padding=&#8220;3&#8243; back_color=&#8220;color-xsdn&#8220; overlay_alpha=&#8220;50&#8243; gutter_size=&#8220;3&#8243; column_width_percent=&#8220;100&#8243; shift_y=&#8220;0&#8243; z_index=&#8220;0&#8243;][vc_column column_width_use_pixel=&#8220;yes&#8220; position_horizontal=&#8220;left&#8220; gutter_size=&#8220;3&#8243; overlay_alpha=&#8220;50&#8243; shift_x=&#8220;0&#8243; shift_y=&#8220;0&#8243; shift_y_down=&#8220;0&#8243; z_index=&#8220;0&#8243; medium_width=&#8220;0&#8243; mobile_width=&#8220;0&#8243; width=&#8220;2\/3&#8243; column_width_pixel=&#8220;700&#8243;][vc_custom_heading]Haben Sie noch Fragen?[\/vc_custom_heading][vc_empty_space empty_h=&#8220;1&#8243;]<p class=\"wpcf7-contact-form-not-found\"><strong>Fehler:<\/strong> Kontaktformular wurde nicht gefunden.<\/p>[\/vc_column][vc_column column_width_percent=&#8220;100&#8243; align_horizontal=&#8220;align_center&#8220; gutter_size=&#8220;3&#8243; overlay_alpha=&#8220;50&#8243; shift_x=&#8220;0&#8243; shift_y=&#8220;0&#8243; shift_y_down=&#8220;0&#8243; z_index=&#8220;0&#8243; medium_width=&#8220;0&#8243; mobile_width=&#8220;0&#8243; width=&#8220;1\/3&#8243;][\/vc_column][\/vc_row]<\/p>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>Lernen Sie mit diesem Tutorial, wie Sie ganz einfach Ihre eigene erste X4\u00a0Activities Web\u00a0App in nur f\u00fcnf Minuten erstellen!<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"template":"","demos_kategorien":[43,82,190],"distributor_meta":false,"distributor_terms":false,"distributor_media":false,"distributor_original_site_name":"SoftProject","distributor_original_site_url":"https:\/\/www.softproject.de\/de","push-errors":false,"_links":{"self":[{"href":"https:\/\/www.softproject.de\/de\/wp-json\/wp\/v2\/demos\/4362"}],"collection":[{"href":"https:\/\/www.softproject.de\/de\/wp-json\/wp\/v2\/demos"}],"about":[{"href":"https:\/\/www.softproject.de\/de\/wp-json\/wp\/v2\/types\/demos"}],"version-history":[{"count":0,"href":"https:\/\/www.softproject.de\/de\/wp-json\/wp\/v2\/demos\/4362\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.softproject.de\/de\/wp-json\/wp\/v2\/media?parent=4362"}],"wp:term":[{"taxonomy":"demos_kategorien","embeddable":true,"href":"https:\/\/www.softproject.de\/de\/wp-json\/wp\/v2\/demos_kategorien?post=4362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}