|
|
| Line 1: |
Line 1: |
| − | = Eclipse Scout adds Mobile Support =
| + | The Scout documentation has been moved to https://eclipsescout.github.io/. |
| − | | + | |
| − | [http://eclipse.org/scout/ Eclipse Scout] is a framework to build business applications based on the Eclipse platform.
| + | |
| − | So far, Scout client applications included support for Swing or SWT to build desktop applications,
| + | |
| − | and Eclipse RAP for web applications.
| + | |
| − | | + | |
| − | New with the Kepler release, Scout has added support for creating mobile applications that run on tablets and smart phones.
| + | |
| − | Thanks to the clean separation of the Scout application model from a specific UI technology Scout applications may now be deployed on mobile phones, as web applications or to the desktop with a single code base.
| + | |
| − | This feature greatly reduces maintenance costs for larger applications that need to be available on multiple frontends.
| + | |
| − | | + | |
| − | Below, a mid-sized Scout business application (20'000 Java classes) is shown.
| + | |
| − | This application takes advantage of Scout's mobile support and can be deployed to desktop and mobile frontends simultaneously.
| + | |
| − | | + | |
| − | [[image:Eclipsescout_businessapplication_kepler.png]]
| + | |
| − | | + | |
| − | The rendering of the UI is adapted to the different target devices at runtime. | + | |
| − | For this, a device transformer component takes care of adapting UI elements to a specific frontend.
| + | |
| − | Examples being context menus that are replaced with touch buttons for mobile devices and tables that are mapped to lists with finger scrolling support.
| + | |
| − | | + | |
| − | For the application shown above, less than 20 Java classes are specifically built for the mobile client.
| + | |
| − | These classes are mainly responsible for the application's home screen and the telephony integration on mobile phones.
| + | |
| − | In addition, 200 minor frontend specific adaptations are included in the code base of the product.
| + | |
| − | This results in over 98% of the Java code beeing reused across the different frontends.
| + | |
| − | | + | |
| − | Being independent of specific UI technologies is clearly one of Scout's major assets.
| + | |
| − | As an additionaly benefits, it reduces the long term risks of "marrying" critical business applications to the "wrong" UI technology to almost zero.
| + | |
| − | In fact, the default setup of Scout applications enforces the separation of business code from UI technology codes.
| + | |
| − | | + | |
| − | The scope of the Scout framework is best shown using a layered setup typical for enterprise IT landscapes.
| + | |
| − | Many well established open source frameworks exist to deal with data access, persistence and the implementation of backend systems up to the business service layer.
| + | |
| − | | + | |
| − | [[image:Scout_integration.png]]
| + | |
| − | | + | |
| − | On top of a business service layer, Scout applications cover the area from the application layer up to the UI layer as shown above.
| + | |
| − | In this domain, Scout covers most of the recurring aspects of business applications such as UI modeling and rendering including dozens of UI components, data binding, client server communication, authentication and authorization, and server services.
| + | |
| − | | + | |
| − | Scout's runtime functionality already makes application developers more efficient.
| + | |
| − | However, the Eclipse Scout package also includes a comprehensive tooling component, the Scout SDK.
| + | |
| − | Working with the Scout SDK increases the productivity of Scout developers even further.
| + | |
| − | And at the same time, learning Scout is made as simple as possible with the Scout SDK.
| + | |
| − | | + | |
| − | As this text has been written for software developers without prior knowledge of Scout we want to provide a hands-on introduction based on the Scout package in the reminder of this article.
| + | |
| − | | + | |
| − | | + | |
| − | = The Hello World =
| + | |
| − | | + | |
| − | A "Hello World" program is a traditional way to begin any new framwork or programming language.
| + | |
| − | The special aspect of the Scout "Hello World" is it's client server architecture including clients that runs on the desktop, in a web browser, and on mobile devices.
| + | |
| − | | + | |
| − | In the text below we will first introduce the "Hello World" from the user perspective before we go through the installation process and dive into the actual implementation.
| + | |
| − | | + | |
| − | == What the User sees ==
| + | |
| − | | + | |
| − | When the user starts a client desktop application he/she gets either a Swing or SWT based application showing a ''"hello world!"'' message in the main frame of the application.
| + | |
| − | To run the ''Hello World'' as a web application in a browser, the user can also type the URL to the application into the address bar of a web browser.
| + | |
| − | As shown below, the user has the choice between three different client applications.
| + | |
| − | | + | |
| − | [[image:Helloworld_running.png]]
| + | |
| − | | + | |
| − | To demonstrate the new mobile Support shipped with the Kepler relase of Scout, the user can also type the application's URL into a mobile browser.
| + | |
| − | Depending on the frontend device used, the user is redirected to specific links for mobile phones or tablets.
| + | |
| − | | + | |
| − | [[image:Helloworld_running_mobile.png]]
| + | |
| − | | + | |
| − | When we compare the ''Hello World'' web application with the mobile version shown above the slight differences between the two frontends become apparent.
| + | |
| − | On the mobile device the label of the message field is rendered on top of the text and instead of a Tools button that provides access to the applications menu tree we just have a logout button on the mobiles home form.
| + | |
| − | | + | |
| − | == Installing Scout ==
| + | |
| − | | + | |
| − | Installing the '''Eclipse for Scout Developers''' package is no different from installing any other Eclipse package.
| + | |
| − | The Scout package is available on [http://eclipse.org/downloads eclipse.org/downloads]
| + | |
| − | and the only prerequisite for the installation is a working JDK version 6 or 7.
| + | |
| − | | + | |
| − | In case you prefer to go through detailed installation instructions, have a look at [http://tools.bsiag.com/scoutbook/3.9/2013-07-11_15-05-49/html/bookap2.html#x96-86000B these pages].
| + | |
| − | | + | |
| − | == The Implementation ==
| + | |
| − | | + | |
| − | Begin the implementation of the ''Hello World'' application with starting your Eclipse IDE executable and providing an empty workspace directory.
| + | |
| − | | + | |
| − | Once Eclipse has started, click away the welcome screen to switch to the workbench of the Scout SDK and you see the Scout perspective with its '''Scout Explorer''' shown in the upper left of the Eclipse IDE.
| + | |
| − | | + | |
| − | [[image:Sdk_new_projectmenu.png]]
| + | |
| − | | + | |
| − | As shown above, use context menu ''New Scout Project...'' to launch the new project wizard.
| + | |
| − | | + | |
| − | [[image:Sdk_new_project.png]]
| + | |
| − | | + | |
| − | In the new project wizard enter '''org.eclipsescout.helloworld''' into the field ''Application Name'' and click on the wizard's ''Finish'' button.
| + | |
| − | | + | |
| − | After the Scout SDK has created the initial Scout application in the background the application model is presented as a tree in the Scout Explorer view.
| + | |
| − | | + | |
| − | [[image:Sdk_new_formfield.png]]
| + | |
| − | | + | |
| − | And, under the main project node ''org.eclipsescout.helloworld'':
| + | |
| − | | + | |
| − | * Navigate to the orange client node ''org.eclipsescout.helloworld.client''
| + | |
| − | * Expand its sub folder ''Forms''
| + | |
| − | * Expand the ''DesktopForm'' node
| + | |
| − | * Click on the '''MainBox''' node
| + | |
| − | | + | |
| − | What you have done now is selecting the container of all form fields of the desktop form which in turn is the dialog shown in the main application window of the ''Hello World'' application.
| + | |
| − | | + | |
| − | We now add the first form field by selecting the context menu '''New Form Field... ''' on the ''MainBox'' node.
| + | |
| − | This will open the new form field wizard shown below.
| + | |
| − | | + | |
| − | [[image:Sdk_groupbox_1.png]]
| + | |
| − | | + | |
| − | In the first wizard step we select a '''GroupBox''' component and click on the ''Next'' button.
| + | |
| − | | + | |
| − | [[image:Sdk_groupbox_2.png]]
| + | |
| − | | + | |
| − | Then we set the ''Class Name'' field to '''DesktopBox''' and click the ''Finish'' button.
| + | |
| − | This will add a group box field that later holds the message field.
| + | |
| − | Please note the only reason for adding the group box field here is a better layout for the ''Hello World'' application.
| + | |
| − | We could also have added the message field directly into the ''MainBox''.
| + | |
| − | | + | |
| − | On the newly created desktop box field we now want to add the message field.
| + | |
| − | As shown below, we now use the context menu '''New Form Field... ''' on the ''DesktopBox'' node.
| + | |
| − | | + | |
| − | [[image:Sdk_new_messagefield.png]]
| + | |
| − | | + | |
| − | In the first wizard step we select a '''StringField''' component and click on the ''Next'' button.
| + | |
| − | | + | |
| − | [[image:Sdk_message_1.png]]
| + | |
| − | | + | |
| − | To provide the lable for this string field we add '''Message''' into the ''Name'' field as shown below.
| + | |
| − | | + | |
| − | [[image:Sdk_message_2.png]]
| + | |
| − | | + | |
| − | From the drop-down list presented by the wizard select the entry '''New translated text...''' with a double click.
| + | |
| − | This starts the new text entry wizard shown below.
| + | |
| − | | + | |
| − | [[image:Sdk_message_3.png]]
| + | |
| − | | + | |
| − | In this step, the Scout SDK helps the developer to work with translated texts, rather than typing in string literals directly into the source code of the Scout application.
| + | |
| − | The texts entered into the langauge tabs will be copied by the Scout SDK into Java properties files and the application code then only contains the text keys.
| + | |
| − | | + | |
| − | As we only have a ''default'' language tab to fill in, the suggested values for the fields ''Key Name'' and ''default'' are fine and we can close the dialog with the ''Ok'' button.
| + | |
| − | | + | |
| − | [[image:Sdk_message_4.png]]
| + | |
| − | | + | |
| − | Having filled in the label text the class name field is automatically filled in and we can close the wizard with the ''Finish'' button.
| + | |
| − | With this step we have completed the implementation of the Scout client part of the ''Hello World'' application.
| + | |
| − | | + | |
| − | As a next step, we will now implement the business logic on the Scout server that will provide the content to the message field that is displayed in the Scout client to the user.
| + | |
| − | | + | |
| − | [[image:Sdk_load_service.png]]
| + | |
| − | | + | |
| − | To implement the server logic of the ''Hello World'' application, we first navigate to the ''load'' method of the '''DesktopService''' under the blue server node as shown above.
| + | |
| − | | + | |
| − | This follows the Scout standard pattern where each client form has an associated server service that is responsible for loading form content and storing user changes using the application's persistence mechanism.
| + | |
| − | | + | |
| − | In the ''Hello World'' application the desktop service is only used to load an initial content into the message field of the desktop form.
| + | |
| − | With a double click on the load method shown in the Scout Explorer the associated source code is loaded into the Java editor.
| + | |
| − | In the Java code we only need to provide the Scout code to fill in the content to the message field.
| + | |
| − | | + | |
| − | <code>
| + | |
| − | formData.getMessage().setValue("hello world!");
| + | |
| − | </code>
| + | |
| − | | + | |
| − | Using the ''formData'' input parameter, we can access the desktop forms message field with method '''getMessage''' and use '''setValue''' to fill in the desired content.
| + | |
| − | This leads to the final implementation of the ''load'' method as shown below:
| + | |
| − | | + | |
| − | <code>
| + | |
| − | @Override
| + | |
| − | public DesktopFormData load(DesktopFormData formData) throws ProcessingException {
| + | |
| − | formData.getMessage().setValue("hello world!");
| + | |
| − | return formData;
| + | |
| − | }
| + | |
| − | </code>
| + | |
| − | | + | |
| − | That's it. The transportation of the form data object between the Scout server and client application and the necessary mapping of its content to the form fields in the client application is performed by the framework and does not require any work by the Scout developer.
| + | |
| − | | + | |
| − | == Running the Application ==
| + | |
| − | | + | |
| − | To launch the ''Hello World'' application from within the Scout SDK first select the main project node '''org.eclipsescout.helloworld''' in the Scout Explorer as shown below.
| + | |
| − | | + | |
| − | The ''Scout Object Property'' view of the main project node contains a ''Product Launchers'' section.
| + | |
| − | This section contains a launcher box for each development product of the ''Hello World'' application.
| + | |
| − | | + | |
| − | [[image:Sdk_start_server.png]]
| + | |
| − | | + | |
| − | As shown in the screenshot above, we first start the ''Hello World'' server application with a click on the green ''Start Product'' icon in the '''Server''' box.
| + | |
| − | | + | |
| − | [[image:Sdk_start_client_swt.png]]
| + | |
| − | | + | |
| − | Then we can start the client products in turn.
| + | |
| − | In the screenshot above the SWT client is started using the start icon in the '''SWT''' box.
| + | |
| − | | + | |
| − | To access the necessary target URLs for web and mobile clients of the ''Hello World'' application click on the link '''open config.ini''' provided in the ''RAP'' launcher box.
| + | |
| − | This will open the config.ini file that contains the URL in the form of comments.
| + | |
| − | | + | |
| − | * <code>http://localhost:8082/mobile</code>
| + | |
| − | * <code>http://localhost:8082/tablet</code>
| + | |
| − | * <code>http://localhost:8082/web</code>
| + | |
| − | * <code>http://localhost:8082/</code> (for automatic dispatching)
| + | |
| − | | + | |
| − | = Next Steps =
| + | |
| − | | + | |
| − | In case you have been intrigued by what you have seen from Scout so far you might consider the following steps
| + | |
| − | | + | |
| − | '''Do more tutorials'''. In addition to the ''Hello World'' tutorial presented above, a significant amount of additional [http://wiki.eclipse.org/Scout/Tutorial/3.9 tutorials] and [http://wiki.eclipse.org/Scout/HowTo/3.9 how-tos] is available on the [http://wiki.eclipse.org/Scout Scout wiki].
| + | |
| − | Depending on your time and interest, this will keep you occupied an addtional hour - or several days.
| + | |
| − | In case you run into difficulties or have general questions regarding Scout we are happy to answer your questions in the [http://www.eclipse.org/forums/index.php?t=thread&frm_id=174 Scout forum]. Please bear in mind that July and August is summer vacation time and we are less responsive during these months.
| + | |
| − | | + | |
| − | '''Browse the Book'''. A more comprehensive introduction is available in the [http://wiki.eclipse.org/Scout/Book/3.9 Scout book], also new with the Kepler release. So far, the book provides a good introduction and a general overview of the possibilities of Scout applications. For the next releases we plan to add more material to the book that cover various aspects of Scout and the development of Scout applications in greater detail.
| + | |
| − | The Scout book is free and available in [http://tools.bsiag.com/scoutbook/3.9/2013-07-11_15-05-49/html/book.html HTML format] for online browsing. For offline usage the book is availabe in [http://tools.bsiag.com/scoutbook/3.9/2013-07-11_15-05-49/pdf/book.pdf PDF], [http://tools.bsiag.com/scoutbook/3.9/2013-07-11_15-05-49/epub/ EPUB] and [http://tools.bsiag.com/scoutbook/3.9/2013-07-11_15-05-49/html/book.zip ZIP] (zipped HTML) formats.
| + | |
| − | | + | |
| − | '''Follow Scout'''. For more recent updates, check out the [http://www.bsiag.com/scout/ Scout blog] or the [https://twitter.com/EclipseScout @EclipseScout] Twitter account.
| + | |
| − | If you happen to live near Zurich also have a look at the local Eclipse Community page on [https://plus.google.com/communities/103558137660089260183 Google+].
| + | |
| − | This is the place where we usually announce public Eclipse events that frequently include Scout presentations.
| + | |
