Wireframing with Oracle JET

I learned a few interesting things from my colleague Sylvain Côme in London today. Sylvain is a very big enthusiast of Oracle JET and is introducing it in a variety of contexts. For wireframing, he uses Adobe XD. For the images in his wireframes, he has installed SVG Crowbar into his Chrome browser, which enables him to download SVG files of images in the Oracle JET Cookbook. He then imports those SVG files into his wireframe in Adobe XD, where he can even edit them, resulting in a wireframe with awesome Oracle JET visualizations, which will, once the wireframe is accepted, look identical to the final app since the SVG files are created directly from the image of the related Oracle JET component in the Oracle JET Cookbook.

That's a lot of info to process all at once, so let's take it step by step.

1. Start up Chrome,  show the Chrome bookmarks bar (Ctrl + Shift + B), and then go here and follow the instructions: 

http://nytimes.github.io/svg-crowbar.

2. Go to one of the cool data visualizations in the Oracle JET Cookbook, such as this one:

http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=dataVisualizations&demo=polarWeatherPlot

3. Click "SVG Crowbar 2" in the bookmarks bar and you'll see (depending on how many SVG images are available), an icon for each SVG image. In this case, there's only one SVG image on the page, which makes it very simple and simply click the Download button:

4.  You now have an SVG image. Open Adobe XD, which is not supported yet on Windows, which is what I'm using, so let's use this instead, just to prove the point:

http://editor.method.ac

Click the link above and then go to File | Open SVG. Browse to the SVG you downloaded and open it into the above. 

Now, as you can see above, depending on the SVG image you're using, you can edit all kinds of parts of it, and then integrate it into your wireframe. Of course, before downloading it, you can edit various parts directly in the browser within the Oracle JET recipe in the Oracle JET Cookbook too, i.e., tweak code, and then click Apply.

It's pretty powerful, as you can see, that you can use the power of SVG via the Oracle JET Cookbook to create content for your wireframes, very easily indeed!