Search code examples
ibm-mobilefirstworklight-studio

IBM Worklight 6.0 - content root and local worklight server set-up

I am teaching myself Worklight. I followed the Get Started guide provided by IBM (http://www.ibm.com/developerworks/mobile/worklight/getting-started.html).

Examples in the above site use relative path to link to a page or getting images. Is it possible to put a / (foreward slash) in front of each link to make it relative to the root folder? If possible, how can I configure my local worklight server so the links and images work on the app?

I have app set up as below directory structures in the /common/ directory. Many pages load shared header and menu on the page. When I use <a href="/app-pages/page1.html">' or <img src="/images/ImageName.png">, This causes 404. Not Found - http://localhost:10080/images/ImageName.png

  • home.html
  • /app-pages/page1.html
  • /app-pages/page2.html
  • /app-pages/sub-cat/pageA.html
  • /app-pages/sub-cat/pageB.html
  • /shared/header.html
  • /shared/menu.html
  • /images
  • /css/
  • /js/
  • /jqueryMobile

FYI, my dev environment is as below.

  1. Windows 7
  2. Eclipse Juno
  3. Worklight 6.0
Solution

  • In a new Worklight application called "test", under the common folder you will have the following hierarchy:

    • css
    • images
    • js
    • test.html

    In test.html, if I will add <src="images/icon.png"/> then once previewing the app the icon.png image located in the images folder will be displayed:

    enter image description here

    I see that you are also trying to use multiple pages in your app. Make sure to read the Building a multi-page application training module.