Post on 04-Feb-2015
description
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?
32012 Jasig Sakai Conference
A Few PrinciplesA Few Principles Design comes first We enable front-end engineers We balance new technology with stability
42012 Jasig Sakai Conference
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
52012 Jasig Sakai Conference
Getting StartedGetting StartedTools and Code
62012 Jasig Sakai Conference
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
72012 Jasig Sakai Conference
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
82012 Jasig Sakai Conference
Demo: Kick the TiresDemo: Kick the Tires
92012 Jasig Sakai Conference
UI Source CodeUI Source Code
git clone git://github.com/sakaiproject/3akai-ux.git
10
2012 Jasig Sakai Conference
Hello To DoHello To DoBringing In a New Feature
11
2012 Jasig Sakai Conference
A Simple WidgetA Simple Widget
12
2012 Jasig Sakai Conference
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
2012 Jasig Sakai Conference
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
2012 Jasig Sakai Conference
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
2012 Jasig Sakai Conference
Front-end ArchitectureFront-end ArchitectureAll About Widgets
16
2012 Jasig Sakai Conference
Widgets in the OAEWidgets in the OAE Widgets are reusable pieces of functionality Used for everything in the OAE UI Structure defined:
17
2012 Jasig Sakai Conference
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
2012 Jasig Sakai Conference
HTML/CSSHTML/CSS CSS and JS for the widget included in the
widget HTML file Main content container:
19
2012 Jasig Sakai Conference
Creating the TemplateCreating the Template Comment out the HTML and JavaScript:
20
2012 Jasig Sakai Conference
Creating the TemplateCreating the Template Render the HTML and pass data in:
21
2012 Jasig Sakai Conference
Widget i18nWidget i18n What about that __MSG__NOTHING__TO__DO?
i18n keys!
22
2012 Jasig Sakai Conference
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
2012 Jasig Sakai Conference
Translation PriorityTranslation Priority1. Widget specific language files2. Widget default language files3. Container specific language file4. Container default language file
24
2012 Jasig Sakai Conference
OAE Widget LibraryOAE Widget LibraryMaking contributions
25
2012 Jasig Sakai Conference
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
2012 Jasig Sakai Conference
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
27
2012 Jasig Sakai Conference
Hands-On: To Do WidgetHands-On: To Do Widget
28
2012 Jasig Sakai Conference
Server ArchitectureServer ArchitectureOverview
29
2012 Jasig Sakai Conference
Pretty PicturePretty Picture
30
2012 Jasig Sakai Conference
Apache FelixApache Felix Our OSGi runtime environment Allows us to modularize Handles dependencies between modules Allows modules to expose services
31
2012 Jasig Sakai Conference
Apache SlingApache Sling RESTful glue on top of Jackrabbit Allows you to address content by URI Allows you to bind code to content
32
2012 Jasig Sakai Conference
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
2012 Jasig Sakai Conference
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
2012 Jasig Sakai Conference
OSGi bundle lifecycleOSGi bundle lifecycle
35
2012 Jasig Sakai Conference
Demo: Felix ConsoleDemo: Felix Console
36
2012 Jasig Sakai Conference
Adding Server CodeAdding Server CodeCreating A Bundle
37
2012 Jasig Sakai Conference
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
2012 Jasig Sakai Conference
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
2012 Jasig Sakai Conference
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 }
2012 Jasig Sakai Conference
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
2012 Jasig Sakai Conference
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
2012 Jasig Sakai Conference
Demo: Build and DeployDemo: Build and Deploy
43
2012 Jasig Sakai Conference
Other StuffOther StuffMailing lists, repositories, etc.
44
2012 Jasig Sakai Conference
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
45
© xkcd.com
2012 Jasig Sakai Conference
Thank You!Thank You!