The review slipped past me this week. A little food poisoning will do that to a person. But I’m kicking again.
A Quick Summary
The RSS/News Feed section of the app has been built and put into action. So if you pull the latest code and run the application, navigate into the news section you’ll get the Basho Blog feed. This definitely needs cleaned up a bit from the UI perspective but the main elements are there.
Next steps are…
One of the things the team is aiming to knock out next is to get some MVVM (Mode View ViewModel) architecture setup to build against versus what we’ve started with, which is just the basic skeleton of things thrown together. It works, but it’ll be nice to have some clean architecture behind the application to work with.
I’m aiming to put together a blog entry on troubleshooting the build server for Junction and also the how-to on setting up the RSS/News Feed Reader section of the app in the coming week also. Subscribe to keep up with the latest in Junction news and also all the other tidbits on the blog. Cheers!
It’s time for another Tuesday Bi-weekly Review! We’ve been making some progress and so far we’ve tackled a few elements of the project. The first big task was to get more information out there for the community & team working on the project. I’ve spent some time along with the contributors on github and via other means to make more information available to what the intent is and how people can contribute. So if you’re interested in helping with an entire domain space or merely a small element of the application, ping me and I’ll work with you to make it as easy as possible to contribute. With that, let’s jump into what’s what and what’s new. Cheers!
We Have a Build Server, More on This Soon, but for now…
I’ll have a post on how to setup Team City and quick tour of what is setup for the Junction Project. So stay tuned and I’ll have that and other news posted as it happens this coming week along with Team City & other tutorials related to the project itself. For a quick sneak peek feel free to take a look at the build server located at: http://teamcity.cascadiahacks.org/. Just login with “guest” and no password.
More Items Listed and Working on First Feature Commits and Comments For…
So every two weeks I intend to provide an update for the Junction Project. Who might have joined, what was worked on, where we are and generally any other bits of news related to the project. This is the first “Junction Two Weeks on Tuesday Review” so enjoy! 🙂
Clive Boulton @cliveb, Jared Wray @jaredwray, Kristen Mozian @kmozian and OJ Reeves @OJ joined the project to help out.
Issues, as stories and tasks were added to get started with the project. Here’s a first draft of the things we’re all working on. If you’d like to jump in, feel free to ping me and I’ll add you to the project, you can submit a PR (Pull Request) or talk to me about organizing a hackathon to help move the project forward.
Github Issues – Working Items
The easiest way to view these is to log into the Huboard Kanban Board and give a look see of what is in progress and who’s working on what. Currently I’ve outlined the big items that we’re working on and would love a fellow coder to jump in on. If you’re interested, ping me @adron or just jump into the issues list on Github (or view by milestone – i.e. functional area) and comment on the issue you want to dive into, I’ll add you so you can get started!
For the “Call the Doctor (Administration and Maintenance)” part of the application there are a number of questions to answer. How should we connect to Riak to ensure a secure SSH connection? Should we even use SSH? Is there another way to connect to the Riak Cluster for a secure way to administer the cluster?
In the “Golfing With Your Data (Query, Put, Deletes, Etc. Handling the CRUD)” one could dive into creating a functional query space to pull data out of a Riak Cluster. A lot of UI work needs to be done in this space, so if you’re up for putting together some awesome windows 8 interfaces, I’d love to hear from you!
Review Summary
At this point we’re moving forward. We’re always looking forward to new participants so reach out if you’re up for helping out! So until the next two weeks are up, see ya at the Junction!
As I’ve started working on a Windows 8 project here at Basho, there are a few pieces of collateral that help out to bring some branding and appeal to the application appearance. The first two things to grab if you want build a good looking Riak + Windows 8 application are the assets for design.
Basho Design Assets : This includes several transparent images for the Basho & Riak, Riak CS and Riak Enterprise logos. Toward the bottom of the page there are also a number of Bashomen that you can download.
Windows 8 Store Design Assets : This page includes a lot of downloadable Photoshop & other design assets for putting together a Windows 8 user interface and experience.
Windows 8 Design Guidelines : This page shows how the interactions on Windows 8 are supposed to be used, developed around and what their best use is.
To check out the design assets I’ve put together I’ve created a github repository junction_design_assets. In this repository are all of the Adobe Photoshop *.psd files for each logo, wide logo, small logo, store logo, badge logo and splash screen image for the upcoming application. I’ve also attached an Apache 2.0 license to this for use by others. All of the images created had a transparent background, and are set to display against a black or other dark background.
Here’s a quick intro where all of these design assets go, via Visual Studio 2012. The first step was to create a good splash screen, as defined by the Windows 8 guidelines for images at sizes of 1116x540px, 868x420px and 620x300px.
Setting up the Splash Screen (Click for full size image)
A: Open the Package.appmanifest file and the designed that is displayed above will show a screen used for editing the file.
B: In this case I changed the background color to black since I created all of the images to display on a dark background. One can’t get any darker than the darkest black, and this is that black!
C: When you click on the elipsis to upload each of the images it will upload the image to the Assets folder within the project. With that in mind DO NOT manually put the images into the project. Use this screen or you’ll end up with all sorts of headaches.
Also important is the default SplashScreen.png that is put into the Spash screen: text box. Don’t fill this in first, instead click each ellipsis under each splash screen image size and select each image for each size. The odd thing is (one of those completely non-intuitive things) is that the Assets\SplashScreen.png file doesn’t actually exist in the Assets directory, but is instead created somehow through pixie dust magic and added to the project. This will be the same for other sections of the Package.appmanifest file settings and logo images that are to be added. So remember to NOT change this but to instead upload all of the other images required first.
The second step then was to get a good logo as defined by the guidelines at 270x270px, 210x210px, 150x150px and 120x120px. For this I went with the Riak Graphic Logo with images as shown at the different sizes.
Adding the Logo (Click for full size image)
Next up is the Wide Logo…
Wide Logo (Click for full size image)
The Small Logo…
Small Logo (Click for full size image)
…and the Store Logo.
Store Logo (Click for full size image)
This is the first step, which is where I’m at so far with this application. The application is also available with an Apache 2.0 license with the code on github. If you’d like to jump into the code and help me build this application please feel free to reach out to me twitter @adron or hit me on Github @adron.
I’m a fan of JavaScript and I’m warming to some of the Metro interfaces on Windows 8. I’ve always found the Windows 7 Phone UI, which is the first iteration of the Metro UI, to be a very slick phone interface. So with this blog entry I’m going to lay out setting up a default Windows 8 Metro application using JavaScript as the language of choice.
Prerequisites:
Windows 8
Visual Studio 2012
Open Visual Studio 2012 and click on file -> new project -> and then find the JavaScript section and pick the blank metro app.
New Windows 8 Metro Project
Once you have the application created, I’d suggest following good practice and adding QUnit-Metro to your project with Nuget(or get the actual files if you don’t want to use Nuget).
Getting QUnit-Metro via Nuget
Once you’ve added the QUnit-Metro interface you’re ready to get started writing tests. But before writing a test take a look at the additional files that the QUnit-Metro Nuget Package adds to the project.
Things Added With QUnit-Metro
In the screenshot (click for a full size image), I’ve pointed in a clockwise order:
The package is added and listed in the packages file now for Nuget.
There are now three CSS files added for QUnit. Two are Metro specific, which gives a more Metro look to the results of the tests.
The qunitmetro.js file is the testing framework.
With this collateral added we can setup a test within the default.html page of the project. First add the following code so that your default.html file looks like this:
[sourcecode language=”html”]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Readingz</title>
<!– These files are included when the project is generated, I don’t really know where they are… –>
<link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
<!– These are the CSS and JavaScript files that I’ve edited for testing. –>
<script src="/js/qunitmetro.js"></script>
<script src="/js/default.js"></script>
<script src="/js/default_tests.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<link href="/css/qunitmetro-light.css" rel="stylesheet" />
</head>
<body>
<p>Content goes here</p>
<button>Press This!</button>
<!– This is for testing only. It goes away when application is ready to ship. –>
<div id="qunit"></div>
</body>
</html>
[/sourcecode]
The Microsoft.WinJS.1.0.RC libraries are included by default, which I’m assuming when I get fully upgraded to the released version of Windows 8 and Visual Studio 2012 that this might just read Microsoft.WinJS.1.0. The section of scripts and links below that are the added QUnit-Metro files. I included the qunitmetro-light.css file for metro style test results.
In the body of the page the div with the id of qunit…
is added where the test results will display. That’s how simple it actually is. To add actual tests, I’ve added a default_tests.js file to the js directory. I then added a simple test to the file that I’ve shown below.
[sourcecode language=”javascript”]
test("hello windows world of javascript tests!", function () {
ok(1 == "1", "Passed!");
});
[/sourcecode]
Run the application and you’ll find the following result displayed in your application.
The Running Application
This is one place where an odd thing seems to be occurring (if you have any idea what the problem is, leave a comment, and I’ll do the same when I get the issues resolved). The test just keeps reporting “Running…” until you click on Readingz, noglobals, or somewhere else on the screen in that area to make an action occur. When I click on Readingz the test runs successfully like it should.
Test Ran
What’s up with that? It’s a pretty odd action.
Another issue that I ran into, which was a user error issue on my behalf, was I swapped around the three script files so the qunit-metro file loaded last. I actually stumbled and posted the issue on Stackoverflow here.
…and another update on Junction.
You must be logged in to post a comment.