OAE Developer Bootcamp

1

June 10-15, 2012

Growing Community; Growing Possibilities

Sakai OAE Sakai OAE Developer WorkshopDeveloper Workshop

Bert Pareyn, Zach Thomas

22012 Jasig Sakai Conference

OAE DevelopmentOAE DevelopmentWhat Is It All About?


A Few PrinciplesA Few Principles Design comes first We enable front-end engineers We balance new technology with stability


A Few Technical DetailsA Few Technical Details Rely heavily on client-side Javascript Driven by JSON “feeds” out of the server Java-based backend (more on that later) Inspired by REST Easy to make requests


Getting StartedGetting StartedTools and Code


git for version control github for project hosting Java 6 Ruby 1.9.3 maven, rake we love curl! Firebug, Web Developer toolbar an assortment of browsers your favorite editor Eclipse, Aptana, IntelliJ IDEA

Tools of the TradeTools of the Trade


First StepsFirst Steps

git clone git://github.com/sakaiproject/nakamura.gitcd nakamuramvn clean installjava -jar -Xmx512m -XX:MaxPermSize=128m \app/target/org.sakaiproject.nakamura.app-1.4-SNAPSHOT.jar

Pre-built binary at http://bit.ly/LgcxWm Log is at sling/logs/error.log Access the system at http://localhost:8080

http://bit.ly/LgcxWm

http://localhost:8080/


Demo: Kick the TiresDemo: Kick the Tires


UI Source CodeUI Source Code

git clone git://github.com/sakaiproject/3akai-ux.git

10


Hello To DoHello To DoBringing In a New Feature

11


A Simple WidgetA Simple Widget

12


A Helping of AJAXA Helping of AJAX

{ "items": 2, "results": [ { "completed": false, "description": "Go get some milk.", "details": "Whole milk, not the low fat!!!" }, { "completed": true, "description": "Get the kids a dentist appt.", "details": "Dr. Starch" } ]}

13


Jump Start With Static DataJump Start With Static Data Front-end engineers can get to work using

static files to return representative data When the live data is available, can switch

over

14


Mapping to Your FilesystemMapping to Your Filesystem Setting the paths to your UI in the Felix

console ensures we use the correct local UI:

15


Front-end ArchitectureFront-end ArchitectureAll About Widgets

16


Widgets in the OAEWidgets in the OAE Widgets are reusable pieces of functionality Used for everything in the OAE UI Structure defined:

17


HTML/CSSHTML/CSS Widgets are injected into the page No need for <html> or <body> tags No inline CSS Templates for loops, conditions CSS and JS declarations go into your HTML

18


HTML/CSSHTML/CSS CSS and JS for the widget included in the

widget HTML file Main content container:

19


Creating the TemplateCreating the Template Comment out the HTML and JavaScript:

20


Creating the TemplateCreating the Template Render the HTML and pass data in:

21


Widget i18nWidget i18n What about that __MSG__NOTHING__TO__DO?

i18n keys!

22


Widget i18nWidget i18n UI needs to be available in multiple

languages Standard properties file (1 per language) Main language files in /dev/bundles — used

multiple times Widgets can have their own bundles There’s translation priority

23


Translation PriorityTranslation Priority1. Widget specific language files2. Widget default language files3. Container specific language file4. Container default language file

24


OAE Widget LibraryOAE Widget LibraryMaking contributions

25


Sakai OAE Widget SDKSakai OAE Widget SDK Important part of what OAE is trying to

achieve Create a healthy ecosystem around widget

creation Guide through examples, our APIs (UI & back-

end), forum, and Q&A, design and style guide, best practices, FAQ…

Allows you to contribute back

26


Sakai OAE Widget SDKSakai OAE Widget SDK The SDK is live for everyone to see Continuous update of documentation going

on Incoming stream of widgets is picking up http://oae-widgets.sakaiproject.org

http://oae-widgets.sakaiproject.org/

27


Hands-On: To Do WidgetHands-On: To Do Widget

28


Server ArchitectureServer ArchitectureOverview

29


Pretty PicturePretty Picture

30


Apache FelixApache Felix Our OSGi runtime environment Allows us to modularize Handles dependencies between modules Allows modules to expose services

31


Apache SlingApache Sling RESTful glue on top of Jackrabbit Allows you to address content by URI Allows you to bind code to content

32


A Few Words About OSGiA Few Words About OSGi A specification for modules in Java Three main aspects:

◦ Defining the module (visibility, dependencies)◦ Providing a dynamic lifecycle for that module◦ Exposing services to other modules

33


OSGi bundlesOSGi bundles Modules in OSGi are called “bundles” Actually just a jar with a special manifest The manifest declares visibility of packages The manifest declares dependencies In an OSGi runtime, bundles have a lifecycle:

◦ Installed◦ Resolved◦ Active

34


OSGi bundle lifecycleOSGi bundle lifecycle

35


Demo: Felix ConsoleDemo: Felix Console

36


Adding Server CodeAdding Server CodeCreating A Bundle

37


Anatomy of a BundleAnatomy of a Bundle Basically, a jar file with an OSGi manifest But the devil is in the details So we use maven so our builds are:

◦ automated◦ repeatable◦ tested

38


Maven archtetypeMaven archtetype

mvn archetype:generate ‑DarchetypeGroupId=org.sakaiproject.nakamura \ ‑DarchetypeArtifactId=org.sakaiproject.nakamura.acme-archetype \ ‑DarchetypeVersion=1.1 \‑DarchetypeRepository=https://source.sakaiproject.org/maven2/

39


Introducing a ServletIntroducing a Servlet 1 @SlingServlet(paths = "/api/todo/mine") 2 public class TodoServlet extends SlingAllMethodsServlet { 3 4 private static final Logger LOGGER = LoggerFactory.getLogger(TodoServlet.class); 5 6 @Reference 7 TodoService todoService; 8 9 @Override10 protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response)11 throws ServletException, IOException {12 LOGGER.info("TodoServlet");13 14 List<TodoItem> myTodos = todoService.getIncompleteItemsForPerson(request.getRemoteUser());15 16 response.setContentType("application/json");17 response.write(makeJson(myTodos));18 }19 20 }

40

1 @Service 2 @Component 3 public class BasicTodoService implements TodoService { 4 5 private Map<String, List<TodoItem>> todoStorage; 6 7 public List<TodoItem> getIncompleteItemsForPerson(String personId) { 8 return todoStorage.get(personId); 9 }10 11 public void saveItemsForPerson(List<TodoItem> items, String personId) {12 todoStorage.put(personId, items);13 }


Introducing a ServiceIntroducing a Service1 public interface TodoService {2 List<TodoItem> getIncompleteItemsForPerson(String personId);3 void saveItemsForPerson(List<TodoItem> items, String personId);4 }

1 @Service 2 @Component 3 public class BasicTodoService implements TodoService { 4 5 private Map<String, List<TodoItem>> todoStorage; 6 7 public List<TodoItem> getIncompleteItemsForPerson(String personId) { 8 return todoStorage.get(personId); 9 }10 11 public void saveItemsForPerson(List<TodoItem> items, String personId) {12 todoStorage.put(personId, items);13 }

41


Don’t Forget Your Tests!Don’t Forget Your Tests!

1 @Test 2 public void testMakeJson() throws Exception { 3 TodoItem testItem1 = new TodoItem(); 4 testItem1.description = "Go get the milk"; 5 testItem1.details = "Make sure it's not the low fat!"; 6 7 TodoItem testItem2 = new TodoItem(); 8 testItem2.description = "Make dentist appt."; 9 testItem2.details = "Dr. Starch, 555-123-4567";10 List<TodoItem> todoItems = Arrays.asList(new TodoItem[]{testItem1, testItem2});11 String json = TodoServlet.makeJson(todoItems);12 assertEquals("Did not get the JSON we expect.", SAMPLE_JSON, json);13 }

42


Demo: Build and DeployDemo: Build and Deploy

43


Other StuffOther StuffMailing lists, repositories, etc.

44


How We WorkHow We Work http://collab.sakaiproject.org/pipermail/oae-dev pipermail/oae-production http://github.com/sakaiproject

◦ 3akai-ux◦ nakamura◦ sparsemapcontent◦ OAE-Builder

http://collab.sakaiproject.org/pipermail/oae-dev

OAE Developer Bootcamp

Education

Transcript of OAE Developer Bootcamp