|
|
| (21 intermediate revisions by one other user not shown) |
| 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.
| + | |
| − | | + | |
| − | [[image:Sdk_new_messagefield.png]]
| + | |
| − | | + | |
| − | [[image:Sdk_message_1.png]]
| + | |
| − | | + | |
| − | [[image:Sdk_message_2.png]]
| + | |
| − | | + | |
| − | [[image:Sdk_message_3.png]]
| + | |
| − | | + | |
| − | [[image:Sdk_message_4.png]]
| + | |
| − | | + | |
| − | As the only reason for adding the group box field is a better layout for the ''Hello World'' application we could also have directly added the message field here.
| + | |
| − | | + | |
| − | | + | |
| − | [[image:Sdk_load_service.png]]
| + | |
| − | | + | |
| − | [[image:Sdk_start_server.png]]
| + | |
| − | | + | |
| − | [[image:Sdk_start_client_swt.png]]
| + | |
| − | | + | |
| − | start with bla
| + | |
| − | | + | |
| − | == 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.
| + | |
