Tweet
Tweet

Slide 1

Slide 1 text

More XPages! Serdar Başeğmez Turkish Lotus User Group ©2011 IBM Corporation

Slide 2

Slide 2 text

Lotus Domino to develop Lotus Domino to develop Web-based Application? Web-based Application?

Slide 3

Slide 3 text

Form1 Form1 View1 View1 View2 View2 View3 View3 $$ViewTemplate for View1 $$ViewTemplate for View1 $$ViewTemplate for View2 $$ViewTemplate for View2 $$ViewTemplate for View3 $$ViewTemplate for View3 Javascripts for AJAX Javascripts for AJAX Javascript for Validations Javascript for Validations WebQueryOpen Agent WebQueryOpen Agent WebQuerySave Agent WebQuerySave Agent Web Agents Web Agents More and More agents... More and More agents... For Mobile interfaces, For Mobile interfaces, Form/View/Agent/Javascript/... Form/View/Agent/Javascript/... Lots of CSS! Lots of CSS! YEP! YEP! Other Javascript stuff Other Javascript stuff A few details should be handled of course ;-)

Slide 4

Slide 4 text

You'll need some time... You'll need some time...

Slide 5

Slide 5 text

... and more time for ... and more time for additional specs! additional specs!

Slide 6

Slide 6 text

● Study first... Study first... How to start? How to start?

Slide 7

Slide 7 text

Assume we've started! Assume we've started!

Slide 8

Slide 8 text

First application... First application...

Slide 9

Slide 9 text

One more... One more...

Slide 10

Slide 10 text

...but they are ...but they are not beautiful! not beautiful!

Slide 11

Slide 11 text

...or not functional ...or not functional like those! like those!

Slide 12

Slide 12 text

...Those??? ...Those???

Slide 13

Slide 13 text

We can't teach any of them in 30 minutes... We can't teach any of them in 30 minutes... But some tips and tricks But some tips and tricks about about where you may look up... where you may look up...

Slide 14

Slide 14 text

- trailer - What changed?

Slide 15

Slide 15 text

Application Architecture (UI)... Actionbar Navigation Content

Slide 16

Slide 16 text

Application Architecture (UI)... Actionbar Navigation Content

Slide 17

Slide 17 text

But, in real life...

Slide 18

Slide 18 text

Application Architecture (Data)... 2 1 3

Slide 19

Slide 19 text

Application Architecture (Design)... View-Centric Design Navigation Centric Design

Slide 20

Slide 20 text

- episode 1 - Themes

Slide 21

Slide 21 text

Themes, take this and... Themes, take this and...

Slide 22

Slide 22 text

...convert into this! ...convert into this!

Slide 23

Slide 23 text

What is Theme? What is Theme? 1 Transforms! XPages (JSF, XML) XHTML XSP Engine XPages (JSF, XML) Theme XSLT(?)

Slide 24

Slide 24 text

Basit bir XPage düşünelim... This is our
object... These have been added by standard theme...

Slide 25

Slide 25 text

A simple theme... Put this CSS file İnto all pages... Then change styleClass property for all DIV objects... It seems OK...

Slide 26

Slide 26 text

Moreover... Themes are programmable... We can add different CSS file for the worst browser of the world...

Slide 27

Slide 27 text

2 What is Theme? What is Theme? Theme refers to a 'look and feel' set a 'look and feel' set containing CSS, containing CSS, images and scripts images and scripts as well... What is it?

Slide 28

Slide 28 text

oneuiv2... These are additions of the theme.

Slide 29

Slide 29 text

oneuiv2 – roughly...

Slide 30

Slide 30 text

An appropriate use...

Slide 31

Slide 31 text

For example... Normally... becomes... We will use the defined class name in OneUI

Slide 32

Slide 32 text

Sources... ● Wiki Articles ● Create the website layout - XPage enabling an existing Notes client application ● Documentation ● OneUI Documentation & Design Samples ● OpenNTF Samples ● XPages Framework

Slide 33

Slide 33 text

- episode 2 - dojo

Slide 34

Slide 34 text

It's hard to develop web app! Cross-browser compatible client-side js library containing lots of reusable objects...

Slide 35

Slide 35 text

Example: Standard Combobox... Ugly, Difficult, We may select only allowed options!

Slide 36

Slide 36 text

Let's try a different method: Enable dojo in Xpage properties... Define the DojoType for our object... 2 1 3 Define dojo objects we will use...

Slide 37

Slide 37 text

Result: 2 1 3 Looks nice and elegant... Built-in type-ahead! Cool... We may enter a new keyword... 4 FilteringSelect can be used to limit options like in traditional combobox.

Slide 38

Slide 38 text

dojo is more useful than that... Source: YouAtNotes XPages Wiki

Slide 39

Slide 39 text

Sources... ● Wiki Articles ● Using Dojo on Domino web forms ● YouAtNotes XPages Wiki: Work with Dojo ● Documentation ● Official Dojo Project home ● Dojo Campus ● OpenNTF Samples ● Demonstration Application for XPages

Slide 40

Slide 40 text

- episode 3 - Extension Library

Slide 41

Slide 41 text

What is Extension Library? http://extlib.openntf.org/ Extension Library will be supported/included in future releases...

Slide 42

Slide 42 text

How to use Extension Library? Extension Library should be installed, both Domino Designer Domino Designer and Domino Server Domino Server

Slide 43

Slide 43 text

1 Extension Library installation... http://extlib.openntf.org/ Download...

Slide 44

Slide 44 text

2 Designer install...

Slide 45

Slide 45 text

2 Designer install... Next, Next & Next... Check versions here...

Slide 46

Slide 46 text

3 Server Install... Extract to the folder in Domino: data\domino\workspace\applications\eclipse

Slide 47

Slide 47 text

3 Server install... restart the server... Check if it's OK?

Slide 48

Slide 48 text

Some Examples...

Slide 49

Slide 49 text

Some more...

Slide 50

Slide 50 text

Some more... Normally you cannot expand two categories in the same time. ExtLib makes it possible...

Slide 51

Slide 51 text

More examples...

Slide 52

Slide 52 text

WOW Examples...

Slide 53

Slide 53 text

For all examples...

Slide 54

Slide 54 text

Sources... ● Wiki Articles ● LS11 AD116 XPages Extension Library ● Demo: XPages Extension Library - Overview (video) ● OpenNTF ● OpenNTF Extension Library Project

Slide 55

Slide 55 text

- episode 4 - Mobile Interfaces

Slide 56

Slide 56 text

Mobil Interfaces and XPages 1 XPages can be used to develop Mobile Browser Applications Nothing more... Central Admin. Ease of development HTML/CSS/JS Need to be connected 'Login' problem Limited features

Slide 57

Slide 57 text

2 Mobil Interfaces and XPages For example...

Slide 58

Slide 58 text

2 Mobil Interfaces and XPages Although Mobile Browsers are so powerful today, They are not capable that much! ● Small screen. ● No/limited Richtext, upload capabilities. ● No mouse! Some are not even 'touchy'. ● Difficult navigation.

Slide 59

Slide 59 text

2 Mobil Interfaces and XPages There are standards and schemes for mobile interfaces...

Slide 60

Slide 60 text

3 Mobil Interfaces and XPages Tools... ● Extension Library http://extlib.openntf.org/ Layouts Configuration Helpers Renderer APIs

Slide 61

Slide 61 text

3 Mobil Interfaces and XPages Tools... ● OpenNTF XPages Mobile Controls http://mobilecontrols.openntf.org/ Basic Controls Access to Device Capabilities Access to popular libraries

Slide 62

Slide 62 text

4 Mobil Interfaces and XPages OpenNTF XPages Mobile Controls...

Slide 63

Slide 63 text

4 Mobil Interfaces and XPages OpenNTF XPages Mobile Controls...

Slide 64

Slide 64 text

4 Mobil Interfaces and XPages OpenNTF XPages Mobile Controls...

Slide 65

Slide 65 text

4 Mobil Interfaces and XPages OpenNTF XPages Mobile Controls...

Slide 66

Slide 66 text

5 Next steps for Mobil Interfaces ● Offline apps. ● Canvas. ● Video/audio streaming. ● GeoLocation API. ● Advanced forms.

Slide 67

Slide 67 text

Sources... ● Wiki Articles ● X-Pages iPhone Application Tutorial ● Mobile Design Principles (Inside Lotus) ● OpenNTF ● OpenNTF - XPages Mobile Controls ● Blogs ● Hughes Connect ● Domino Guru

Slide 68

Slide 68 text

Questions... Questions... But some are easy to answer!

Slide 69

Slide 69 text

Frequently Given Answers... Which Apps to be transformed to XPages? Some applications may be very difficult to convert... Remember there are problems with Rich Text, Encryption, View/Folder manipulation in XPages. Depending the architecture, some interfaces may be moved to XPages and hybrid use can be suggested...

Slide 70

Slide 70 text

Frequently Given Answers... Extension Library is ready, isn't it? Mostly yes! But remember, it is not officially supported...

Slide 71

Slide 71 text

Frequently Given Answers... Is OpenNTF Mobile Controls ready? Not yet... Currently Dojo 1.5.0 is in use, so additional configuration is needed. Not tested enough. But, you can design your mobile interfaces with pure coding. OpenNTF Mobile Controls make you faster and extend your toolbox...

Slide 72

Slide 72 text

Frequently Given Answers... What about 'Native' mobile apps? You need to learn Native development to develop Native Apps. You may use Web services and REST API to connect your Domino applications...

Slide 73

Slide 73 text

Frequently Given Answers... Windows Mobile or Symbian? Microsoft and Nokia has made an interested move. Currently, there are different paradigms for IE (trident-webkit, dojo-jQuery, etc.) IBM doesn't support these platforms and Symbian is going to die... Political answer: Time will show...

Slide 74

Slide 74 text

Frequently Given Answers... There were WML, WAP? Just forget them ;-)

Slide 75

Slide 75 text

Real Questions? Real Questions? Serdar Basegmez (@sbasegmez) Turkish Lotus User Group lotus IBM Lotus yazılımları üzerine Türkçe Blog notus.com lotus IBM Lotus yazılımları üzerine Türkçe Blog notus.com

Slide 76

Slide 76 text

Before sharing this... Credit to these guys! http://www.flickr.com/people/pedro/ http://www.flickr.com/photos/hashir/ http://www.flickr.com/photos/spike55151/ http://www.flickr.com/photos/charlesonflickr http://www.flickr.com/photos/hikingartist Chris Toohey dominoguru.com Matt White mattwhite.me Tim Clark thexcast.net Niklas Heidloff heidloff.net Julian Buss juliusbuss.de Tim Tripcony timtripcony.com Stephan H. Wissel wissel.net