Changes for page Your First Rest Project
Last modified by Steve Peery on 2013/09/06 11:02
From version 23.1
edited by Filippo Laurìa
on 2013/07/22 12:41
on 2013/07/22 12:41
Change comment:
There is no comment for this version
To version 11.1
edited by Pascal Robert
on 2011/12/27 22:21
on 2011/12/27 22:21
Change comment:
There is no comment for this version
Summary
-
Page properties (2 modified, 0 added, 0 removed)
Details
- Page properties
-
- Author
-
... ... @@ -1,1 +1,1 @@ 1 -XWiki. filippolauria1 +XWiki.probert - Content
-
... ... @@ -1,7 +1,5 @@ 1 +{{toc}}{{/toc}} 1 1 2 - 3 -{{toc/}} 4 - 5 5 = Introduction = 6 6 7 7 In the first part of the Blog tutorial, you will learn: ... ... @@ -22,93 +22,20 @@ 22 22 23 23 BlogEntry will have the following columns: 24 24 25 -|=((( 26 -Column name 27 -)))|=((( 28 -Type 29 -)))|=((( 30 -Constraints 31 -))) 32 -|((( 33 -id 34 -)))|((( 35 -integer 36 -)))|((( 37 -primary key 38 -))) 39 -|((( 40 -title 41 -)))|((( 42 -string(255) 43 -)))|((( 44 - 45 -))) 46 -|((( 47 -content 48 -)))|((( 49 -string(4000) 50 -)))|((( 51 - 52 -))) 53 -|((( 54 -creationDate 55 -)))|((( 56 -timestamp 57 -)))|((( 58 - 59 -))) 60 -|((( 61 -lastModified 62 -)))|((( 63 -timestamp 64 -)))|((( 65 - 66 -))) 67 -|((( 68 -author 69 -)))|((( 70 -integer 71 -)))|((( 72 -relation with Author 73 -))) 23 +|= Column name |= Type |= Constraints 24 +| id | integer | primary key 25 +| title | string(255) | 26 +| content | string(4000) | 27 +| creationDate | timestamp | 28 +| author | integer | relation with Author 74 74 75 75 Author will have the following columns: 76 76 77 -|=((( 78 -Column name 79 -)))|=((( 80 -Type 81 -)))|=((( 82 -Constraints 83 -))) 84 -|((( 85 -id 86 -)))|((( 87 -integer 88 -)))|((( 89 -primary key 90 -))) 91 -|((( 92 -firstName 93 -)))|((( 94 -string(50) 95 -)))|((( 96 - 97 -))) 98 -|((( 99 -lastName 100 -)))|((( 101 -string(50) 102 -)))|((( 103 - 104 -))) 105 -|((( 106 -email 107 -)))|((( 108 -string(100) 109 -)))|((( 110 -unique 111 -))) 32 +|= Column name |= Type |= Constraints 33 +| id | integer | primary key 34 +| firstName | string(50) | 35 +| lastName | string(50) | 36 +| email | string(100) | unique 112 112 113 113 == Creating the EOModel == 114 114 ... ... @@ -116,24 +116,16 @@ 116 116 117 117 An EOModel consists of entities, attributes and relationships. When using it in a RDBMS context, an entity is a table (or a view), an attribute is a table column and a relationship is a join between two tables. 118 118 119 -To create the EOModel, in the project right-click on the project name and select **New** -> **EOModel**.44 +To create the EOModel, in the project right-click on the project name and select **New** > **EOModel**. 120 120 121 121 Name it **BlogModel** and in the plugin list, select **H2**. Click **Finish**. 122 122 123 123 The model should show up in a window that looks like this: 124 124 125 -[[image:attach:EOModeler.png]] 126 - 127 127 If it didn't show up, the window might have opened behind the main Eclipse window. If that's the case, open the **Window** menu and select the windows that have //Entity Modeler// in its name. 128 128 129 -In the Entity Modeler window, click on **Default**, and for the **URL** field, type 52 +In the Entity Modeler window, click on **Default**, and for the **URL** field, type {{code}}jdbc:h2:~/BlogTutorial{{/code}}. When the database will be created, it will be stored in your home directory (/Users/youruser/ on OS X). 130 130 131 -{{code}} 132 -jdbc:h2:~/BlogTutorial 133 -{{/code}} 134 - 135 -. When the database will be created, it will be stored in your home directory (/Users/youruser/ on OS X). 136 - 137 137 Now, right-click on **BlogModel** and select **New Entity**. 138 138 139 139 Type the following details in the **Basic** tab: ... ... @@ -154,89 +154,35 @@ 154 154 155 155 Now, repeat the last two steps to create the other attributes for the **BlogEntry** entity, with the following values: 156 156 157 -|=((( 158 -Attribute name 159 -)))|=((( 160 -Column 161 -)))|=((( 162 -Prototype 163 -))) 164 -|((( 165 -content 166 -)))|((( 167 -content 168 -)))|((( 169 -longtext 170 -))) 171 -|((( 172 -creationDate 173 -)))|((( 174 -creationDate 175 -)))|((( 176 -dateTime 177 -))) 178 -|((( 179 -lastModified 180 -)))|((( 181 -lastModified 182 -)))|((( 183 -dateTime 184 -))) 74 +|= Attribute name |= Column |= Prototype 75 +| content | content | longtext 76 +| creationDate | creationDate | dateTime 185 185 186 186 If you did everything well, the list of attributes should look like this: 187 187 188 - [[image:attach:list_wlock.png]]80 +You will notice that the attributes have a column with a lock in it. When a lock is present, it will use the value of that attribute for //UPDATE ... WHERE attribute = ''// statement. This is to do optimistic locking, aka to prevent data conflict when the data object was modified by two different users. Using timestamps for optimistic locking is not a good idea because for certain RDBMS, the value can be different because of milliseconds, so remove the locks on the **lastModified** and **creationDate** attributes. The final list should look like this: 189 189 190 -You will notice that the attributes have a column with a lock in it. When a lock is present, it will use the value of that attribute for //UPDATE ... WHERE attribute = ''// statement. This is to do optimistic locking, aka to prevent data conflict when the data object was modified by two different users. Using timestamps for optimistic locking is not a good idea because for certain RDBMS, the value can be different because of milliseconds, so remove the locks on the **creationDate** attribute. The final list should look like this: 191 - 192 -[[image:attach:list.png]] 193 - 194 194 Next step is to create the **Author** entity. Create a new entity with **Author** at its name (and also as the table name), and for the class name, use **your.app.model.Author**. The attributes for this entity are: 195 195 196 -|=((( 197 -Attribute name 198 -)))|=((( 199 -Column 200 -)))|=((( 201 -Prototype 202 -))) 203 -|((( 204 -firstName 205 -)))|((( 206 -firstName 207 -)))|((( 208 -varchar50 209 -))) 210 -|((( 211 -lastName 212 -)))|((( 213 -lastName 214 -)))|((( 215 -varchar50 216 -))) 217 -|((( 218 -email 219 -)))|((( 220 -email 221 -)))|((( 222 -varchar100 223 -))) 84 +|= Attribute name |= Column |= Prototype 85 +| firstName | firstName | varchar50 86 +| lastName | lastName | varchar50 87 +| email | email | varchar100 224 224 225 225 Final list of attributes should look like this: 226 226 227 - 91 +Now, it's time to link the two entities together. A Author can have multiple blog entries, and a BlogEntry can only have one author. To create the relationship (the join), right-click on **Author** and select **New Relationship**. On your right, select **BlogEntry** in the list. On your left, select **to many BlogEntries**, and on your left, select **to one Author**. Now, in BlogEntry, we need to store the primary key of the author so that we can make the join. The relationship builder allow us to add that attribute, so make sure **and a new foreign key named** is checked (it is checked by default). The **Create Relationship** pane should look like this: 228 228 229 -Now, it's time to link the two entities together. An Author can have multiple blog entries, and a BlogEntry can only have one author. To create the relationship (the join), right-click on **Author** and select **New Relationship**. On your right, select **BlogEntry** in the list. On your left, select **to many BlogEntries**, and on your right, select **to one Author**. Now, in BlogEntry, we need to store the primary key of the author so that we can make the join. The relationship builder allow us to add that attribute, so make sure **and a new foreign key named** is checked (it is checked by default). The **Create Relationship** pane should look like this: 230 - 231 231 If you check in the **Outline** tab, you should see that **Author** now have a **blogEntries** relationship, and **BlogEntry** have a **author** relationship. 232 232 233 -You are now ready to save the model. Save it (File -> Save) and close the **Entity Modeler** window. If you open the **Sources** in the main Eclipse window, you will notice that the **Sources** folder contains a package named **your.app.model**.(If this folder doesn't appear, you may need to set your preferences to automatically generate these source files; see the second suggestion on [[http:~~/~~/wiki.wocommunity.org/display/documentation/Useful+Eclipse+or+WOLips+Preferences>>url:http://wiki.wocommunity.org/display/documentation/Useful+Eclipse+or+WOLips+Preferences||rel="nofollow" shape="rect" class="external-link"]].)95 +You are now ready to save the model. Save it (File > Save) and close the **Entity Modeler** window. If you open the **Sources** in the main Eclipse window, you will notice that the **Sources** folder contains a package named **your.app.model**. 234 234 235 -That package have four Java classes: ** _Author**, **Author**, **_BlogEntry** and **BlogEntry**. Those classes were generated by Veogen, a templating engine build on Velocity. The two classes that starts with a underscore are recreated every time you change the EOModel, so if you want to change something in those classes, you need to change the template (no need for that right now). But you can change freely the two classes that don't have the underscore, and this is what we will be doing.97 +That package have four Java classes: **Author**, **Author**, **BlogEntry** and **BlogEntry**. Those classes were generated by Veogen, a templating engine build on Velocity. The two classes that starts with a underscore are recreated every time you change the EOModel, so if you want to change something in those classes, you need to change the template (no need for that right now). But you can change freely the two classes that don't have the underscore, and this is what we will be doing. 236 236 237 237 What we are going to do is to write a simple method that returns the full name of an author, e.g. a method that simply concatenate the first name, a space and the last name of the author. To do so, double-click on **Author.java** and add the following methods: 238 238 239 239 {{code}} 102 + 240 240 public String fullName() { 241 241 return this.firstName() + " " + this.lastName(); 242 242 } ... ... @@ -246,23 +246,22 @@ 246 246 Nothing fancy here. Now open **BlogEntry.java** and add the following method: 247 247 248 248 {{code}} 112 + 249 249 @Override 250 250 public void awakeFromInsertion(EOEditingContext editingContext) { 251 - super.awakeFromInsertion(editingContext); 252 - NSTimestamp now = new NSTimestamp(); 253 - setCreationDate(now); 254 - setLastModified(now); 115 + super.awakeFromInsertion(editingContext); 116 + this.setCreationDate(new NSTimestamp()); 255 255 } 256 256 257 257 {{/code}} 258 258 259 -Why are we adding this? **awakeFromInsertion** is a very good way of setting default values when creating a new instance of a Enterprise Object (EO). In this case, we want to set automatically the creation andlastmodification dateswithout having the user to add thosevalues.121 +Why are we adding this? **awakeFromInsertion** is a very good way of setting default values when creating a new instance of a Enterprise Object (EO). In this case, we want to set automatically the creation date without having the user to add that value. 260 260 261 261 Now, let's use migrations to actually create the database. 262 262 263 263 == Using migrations == 264 264 265 -Migrations allow you to create the tables and columns (and some types of constraint). **Entity Modeler** ha ssupport to generate the code for the first migration, which is called "migration 0". To do that, open the EOModel (**BlogModel EOModel** in the **Resources** folder), right-click on the model name and select **Generate Migration**.127 +Migrations allow you to create the tables and columns (and some types of constraint). **Entity Modeler** have support to generate the code for the first migration, which is called "migration 0". To do that, open the EOModel (**BlogModel EOModel** in the **Resources** folder), right-click on the model name and select **Generate Migration**. 266 266 267 267 Copy the generated code in the clipboard. Close **Entity Modeler** and in the main Eclipse window, right-click on **Sources**, select **New** and select **Class**. 268 268 ... ... @@ -275,6 +275,7 @@ 275 275 Remove the pound char in front of those two properties: 276 276 277 277 {{code}} 140 + 278 278 #er.migration.migrateAtStartup=true 279 279 #er.migration.createTablesIfNecessary=true 280 280 ... ... @@ -283,14 +283,16 @@ 283 283 After removing the pound char, the two properties should look like this: 284 284 285 285 {{code}} 149 + 286 286 er.migration.migrateAtStartup=true 287 287 er.migration.createTablesIfNecessary=true 288 288 289 289 {{/code}} 290 290 291 -You are now ready to start the application so that it creates the database !To do so, right-click on **Application.java** (in the **your.app** folder) and select **Run As**-> **WOApplication**. In Eclipse's Console tab, you should see some output, including something similar to:155 +You are now ready to start the application so that it creates the database To do so, right-click on **Application.java** (in the **your.app** folder) and select **Run As** > **WOApplication**. In Eclipse's Console tab, you should see some output, including something similar to: 292 292 293 293 {{code}} 158 + 294 294 BlogRest[62990] INFO er.extensions.migration.ERXMigrator - Upgrading BlogModel to version 0 with migration 'your.app.model.migrations.BlogModel0@4743bf3d' 295 295 BlogRest[62990] INFO er.extensions.jdbc.ERXJDBCUtilities - Executing CREATE TABLE Author(email VARCHAR(100) NOT NULL, firstName VARCHAR(50) NOT NULL, id INTEGER NOT NULL, lastName VARCHAR(50) NOT NULL) 296 296 BlogRest[62990] INFO er.extensions.jdbc.ERXJDBCUtilities - Executing ALTER TABLE Author ADD PRIMARY KEY (id) ... ... @@ -301,7 +301,7 @@ 301 301 302 302 {{/code}} 303 303 304 -If you see this and that the application is running (it should open a window in your favorite browser), migration worked and your database have been created, congratulations !You can now stop the application (click the square red button in Eclipse's Console tab) and continue to the next step.169 +If you see this and that the application is running (it should open a window in your favorite browser), migration worked and your database have been created, congratulations You can now stop the application (click the square red button in Eclipse's Console tab) and continue to the next step. 305 305 306 306 = Creating REST controllers and routes = 307 307 ... ... @@ -323,6 +323,8 @@ 323 323 You can shorten the URL by using mod_rewrite in Apache httpd 324 324 {{/info}} 325 325 191 +. 192 + 326 326 == Creating controllers == 327 327 328 328 ERRest needs controllers to act as a broker between working with the objects and the routes. So let's create a controller for BlogEntry. ... ... @@ -338,15 +338,16 @@ 338 338 * **indexAction**: to list all (or a sublist) of the objects. 339 339 340 340 {{info}} 341 -In Project Wonder, * *Action**at the end of a method is a convention for REST and Direct Actions, when you call those methods from certain components, you don't need to add the **Action**part.208 +In Project Wonder, *Action* at the end of a method is a convention for REST and Direct Actions, when you call those methods from certain components, you don't need to add the *Action* part. 342 342 {{/info}} 343 343 344 -For this tutorial, we will implement the **createAction** and ** indexAction** methods. But first, we need to create a key filter. A key filter will... filter the input and the output of REST request so that you don't have to send all attributes for a blog entry. For example, we want to show the details for an author, but we don't want to show the password for the author (in real-life, the password would be encrypted)!211 +For this tutorial, we will implement the **createAction** and **showAction** methods. But first, we need to create a key filter. A key filter will... filter the input and the output of REST request so that you don't have to send all attributes for a blog entry. For example, we want to show the details for an author, but we don't want to show the password for the author (in real-life, the password would be encrypted)! 345 345 346 346 Add this method in **BlogEntryController**: 347 347 348 348 {{code}} 349 -protected ERXKeyFilter filter() { 216 + 217 + protected ERXKeyFilter filter() { 350 350 ERXKeyFilter personFilter = ERXKeyFilter.filterWithAttributes(); 351 351 personFilter.setAnonymousUpdateEnabled(true); 352 352 ... ... @@ -359,10 +359,11 @@ 359 359 360 360 {{/code}} 361 361 362 -Now, let's implement the **creat eAction** method:230 +Now, let's implement the **creationAction** method: 363 363 364 364 {{code}} 365 -public WOActionResults createAction() throws Throwable { 233 + 234 + public WOActionResults createAction() throws Throwable { 366 366 BlogEntry entry = create(filter()); 367 367 editingContext().saveChanges(); 368 368 return response(entry, filter()); ... ... @@ -372,10 +372,11 @@ 372 372 373 373 In 3 lines of code, you can create an object based on the request, save the new object to the database and return the new object in the response. Not bad, eh? 374 374 375 -Last step in the controller: implementing the ** indexAction** method. Again, the code is simple:244 +Last step in the controller: implementing the **showAction** method. Again, the code is simple: 376 376 377 377 {{code}} 378 -public WOActionResults indexAction() throws Throwable { 247 + 248 + public WOActionResults indexAction() throws Throwable { 379 379 NSArray<BlogEntry> entries = BlogEntry.fetchAllBlogEntries(editingContext()); 380 380 return response(entries, filter()); 381 381 } ... ... @@ -391,7 +391,8 @@ 391 391 A route in ERRest is simply a way to define the URL for the entities and to specify which controller the route should use. When your controller extends from **ERXDefaultRouteController**, it's easy to register a controller and a route. In **Application.java**, in the **Application** constructor, add the following code: 392 392 393 393 {{code}} 394 -ERXRouteRequestHandler restRequestHandler = new ERXRouteRequestHandler(); 264 + 265 + ERXRouteRequestHandler restRequestHandler = new ERXRouteRequestHandler(); 395 395 restRequestHandler.addDefaultRoutes(BlogEntry.ENTITY_NAME); 396 396 ERXRouteRequestHandler.register(restRequestHandler); 397 397 setDefaultRequestHandler(restRequestHandler); ... ... @@ -398,15 +398,15 @@ 398 398 399 399 {{/code}} 400 400 401 -The **addDefaultRoutes** method do all of the required magic, and use convention. That's why we had to name the controller **BlogEntryController**, because the convention is <EntityName>Controller. 272 +The **addDefaultRoutes** method do all of the required magic, and use convention. That's why we had to name the controller **BlogEntryController**, because the convention is <EntityName>Controller. 402 402 403 -We are now reading to add and list blog postings! Start the application and take notice of the URL. It should be something like _[[http:~~/~~/yourip:someport/cgi-bin/WebObjects/BlogRest.woa_>>url:http://youripsomeport||shape="rect"]]274 +We are now reading to add and list blog postings! Start the application and take notice of the URL. It should be something like //http:~/~/yourip:someport/cgi-bin/WebObjects/BlogRest.woa// 404 404 405 405 == Adding posts and authors with curl == 406 406 407 407 Since we didn't implement any HTML for our REST routes, we will create blog entries with //curl//, an open source HTTP client that is bundled with Mac OS X (you can use another client, like wget, if you like too). So let's create a blog entry. 408 408 409 -To create a blog entry, you need to use the POST HTTP method. We will use JSON as the format since it's a bit less chatty than XML. So if the URL to the application is // [[http:~~/~~/192.168.0.102:52406/cgi-bin/WebObjects/BlogRest.woa_>>url:http://192.168.0.102:52406/cgi-bin/WebObjects/BlogRest.woa_||shape="rect"]], the full_curl// command will be:280 +To create a blog entry, you need to use the POST HTTP method. We will use JSON as the format since it's a bit less chatty than XML. So if the URL to the application is //http:~/~/192.168.0.102:52406/cgi-bin/WebObjects/BlogRest.woa_, the full //curl// command will be~:// 410 410 411 411 {{code}} 412 412 curl -X POST -v -d '{ "title": "First post", "content": "Some text", "author": { "firstName": "Pascal", "lastName": "Robert", "email": "probert@macti.ca" } }' http://192.168.0.102:52406/cgi-bin/WebObjects/BlogRest.woa/ra/blogEntries.json ... ... @@ -415,6 +415,7 @@ 415 415 The response should look this: 416 416 417 417 {{code}} 289 + 418 418 HTTP/1.0 201 Apple WebObjects 419 419 Content-Length: 249 420 420 x-webobjects-loadaverage: 0 ... ... @@ -427,127 +427,9 @@ 427 427 To get a list of blog entries: 428 428 429 429 {{code}} 302 + 430 430 curl -X GET http://192.168.0.102:52406/cgi-bin/WebObjects/BlogRest.woa/ra/blogEntries.json 431 431 432 432 {{/code}} 433 433 434 -You can stop the application and proceed to the next step. 435 - 436 436 == Adding HTML views for blog posts == 437 - 438 -Now, let's build a HTML view for blog posts (you don't want your readers to get your posts by JSON, right?). Again, we will use convention to make it work easily. Open up **BlogEntryController** and add the following method: 439 - 440 -{{code}} 441 -@Override 442 - protected boolean isAutomaticHtmlRoutingEnabled() { 443 - return true; 444 - } 445 - 446 -{{/code}} 447 - 448 -Switching the return value of this method says that we will follow a certain convention for HTML components. The convention for automatic HTML routing is that the component should be named <EntityName><Action>Page.wo. So in our case, the component will be **BlogEntryIndexPage**. Right-click on the project name in Eclipse and select **New** -> **WOComponent**. Change the name to **BlogEntryIndexPage** and check the **Create HTML contents** button. Click **Finish**. 449 - 450 -The next step to get it to work is to make **BlogEntryIndexPage** to implement the **er.rest.routes.IERXRouteComponent** interface. 451 - 452 -{{code}} 453 -import er.rest.routes.IERXRouteComponent; 454 - 455 -public class BlogEntryIndexPage extends WOComponent implements IERXRouteComponent { 456 - 457 -{{/code}} 458 - 459 -So now, the automatic HTML routing will send the request for **ra/blogEntries.html** to the **BlogEntryIndexPage** component. But we don't have any content in this component, so let's make a method to fetch all blog entries per creation date in descending order. So in **BlogEntryIndexPage.java**, add the following method: 460 - 461 -{{code}} 462 -public NSArray<BlogEntry> entries() { 463 - EOEditingContext ec = ERXEC.newEditingContext(); 464 - return BlogEntry.fetchAllBlogEntries(ec, BlogEntry.CREATION_DATE.descs()); 465 - } 466 - 467 -{{/code}} 468 - 469 -We need to use that method in a WORepetition, and for that loop, we need a BlogEntry variable to iterate in the list, so add the following code to **BlogEntryIndexPage.java**: 470 - 471 -{{code}} 472 -private BlogEntry entryItem; 473 - 474 - public BlogEntry entryItem() { 475 - return entryItem; 476 - } 477 - 478 - public void setEntryItem(BlogEntry entryItem) { 479 - this.entryItem = entryItem; 480 - } 481 - 482 -{{/code}} 483 - 484 -The Java part is done, so let's add the loop inside the component. Open **BlogEntryIndexPage.wo** (it's located in the **Component** folder) and right after the <body> tag, add: 485 - 486 -{{code}} 487 -<wo:loop list="$entries" item="$entryItem"> 488 - <p><wo:str value="$entryItem.title" /></p> 489 - <p><wo:str value="$entryItem.author.fullName" /></p> 490 - </wo:loop> 491 - 492 -{{/code}} 493 - 494 -That component code will loop over the blog entries and display the title of the entry + the name of the author. Save everything and run the application. 495 - 496 -If you go to [[http:~~/~~/192.168.0.102:52406/cgi-bin/WebObjects/BlogRest.woa/ra/blogEntries.html>>url:http://192.168.0.102:52406/cgi-bin/WebObjects/BlogRest.woa/ra/blogEntries.html||shape="rect"]], you will see the list of blog entries! 497 - 498 -Now that we have a list of blog entries, let's make a page to show the content of a blog entry. Create a new component named **BlogEntryShowPage**. 499 - 500 -Open **BlogEntryShowPage.java** and make sure the class implements **er.rest.routes.IERXRouteComponent**. 501 - 502 -{{code}} 503 -import er.rest.routes.IERXRouteComponent; 504 - 505 -public class BlogEntryShowPage extends WOComponent implements IERXRouteComponent { 506 - 507 -{{/code}} 508 - 509 -We need to add other methods to receive the BlogEntry object from the controller. In **BlogEntryShowPage.java**, add: 510 - 511 -{{code}} 512 -private BlogEntry blogEntry; 513 - 514 - @ERXRouteParameter 515 - public void setBlogEntry(BlogEntry blogEntryFromController) { 516 - this.blogEntry = blogEntryFromController; 517 - } 518 - 519 - public BlogEntry blogEntry() { 520 - return this.blogEntry; 521 - } 522 - 523 -{{/code}} 524 - 525 -The **@ERXRouteParameter** annotation tells the REST framework that it can automatically receive an object from the controller. And again, it's convention at work. You have to use the annotation and the setter name should be //set<EntityName>//, so for a BlogEntry, it's //setBlogEntry//, for a Author, it will be //setAuthor//. 526 - 527 -The Java part of the work is done, so save the Java class. It's time to work on the component part. Open **BlogEntryShowPage.wo** and between the <body></body> part, add: 528 - 529 -{{code}} 530 -<h1><wo:str value="$blogEntry.title" /></h1> 531 - <p><wo:str value="$blogEntry.content" /></p> 532 - <p>Created on: <wo:str value="$blogEntry.creationDate" dateformat="%Y/%m/%d" /></p> 533 - <p>Added by: <wo:str value="$blogEntry.author.fullName" /></p> 534 - 535 -{{/code}} 536 - 537 -Our view component is done, the only thing remaining is a link for the blog entry list (BlogEntryIndexPage) to the view page (BlogEntryShowPage). Save **BlogEntryShowPage.wo** and open **BlogEntryIndexPage.wo**. We are going to add a link on the title, you will replace to replace this: 538 - 539 -{{code}} 540 -<p><wo:str value="$entryItem.title" /></p> 541 - 542 -{{/code}} 543 - 544 -with: 545 - 546 -{{code}} 547 -<p><wo:ERXRouteLink entityName="BlogEntry" record="$entryItem" action="show"><wo:str value="$entryItem.title" /></wo:ERXRouteLink></p> 548 - 549 -{{/code}} 550 - 551 -Save the component and run the app. Go to [[http:~~/~~/192.168.0.102:52406/cgi-bin/WebObjects/BlogRest.woa/ra/blogEntries.html>>url:http://192.168.0.102:52406/cgi-bin/WebObjects/BlogRest.woa/ra/blogEntries.html||shape="rect"]] to get the list of posts, and you should see a link on the title. Click on it, and now you get the full details of the blog entry! 552 - 553 -The REST part of this tutorial is now complete, [[you can now move to the next part of the tutorial>>doc:Your First Framework]].