Getting started

Shark works on top of Django and you can mix and match. To setup a Shark project you’ll first create a Django project and an app. Then make these changes:

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'', include(shark.urls()))
]

Now you can create a page handler in views.py:

from shark.handler import BasePageHandler

class HelloWorld(BasePageHandler):
    route = '^$'

    def render_page(self):
        self.append('Hello world')

Shark Objects

This is where Shark deviates a lot from any framework you might be used to. We don't use html to build pages, but instead use Shark Objects. These are classes that represent page elements; from a simple heading to a complete graph. The class describes the html, css and js needed to render the element. Shark comes with a lot of elements included and you can also add your own. Let's look at an example of a page with a heading and a link to another page:

from shark.handler import BasePageHandler

class SimplePage(BasePageHandler):
    route = '^$'

    def render_page(self):
        self.append(
            Heading('Hello world', 3),
            Anchor('link', 'http://google.com')
        )

This will render as:

Hello world

link

By now you’re probably thinking this looks like a complicated way to write simple HTML. So let’s look at an example to show the power of web objects:

data = [
    {'year': 2011, 'wheat': 10.4, 'corn': 14.2},
    ...
]

self.append(multiple_panel_row(
        Markdown("###Hello world\n[Google](http://google.com)"),
        create_table(data, ['Year', 'Price Wheat=wheat', 'Price Corn=corn'], {}),
        Graph(data, 'year', ['wheat', 'corn'])
    ))

Which results in:

Hello world

Google

Year Price Wheat Price Corn
2011 10.4 14.2
2012 8.2 12.4
2013 9.8 7.2
2014 14.2 8.4
2015 14.0 12.3

Routes

So far we’ve only had one page, through routes you can add pages. You can have static routes such as ‘/faq’ or dynamic routes using regular expressions. Any parts of the regular expression between braces () will become arguments for the render_page function. A simple example:

class Item(BasePageHandler):
    route = '^item/(.*)$'

    def render_page(self, item_number):
        self.append(Header('Item {}'.format(item_number))

Actions

The easiest way to do AJAX calls is through Actions. Here we add an action to the onclick event of a link:

class ActionExample(BasePageHandler):
    route = '^item/(.*)$'

    def render_page(self, item_number):
        self.append(
            Heading('Item {}'.format(item_number)),
            Button('Do something!', action('do_something'))

    def do_something(self, item_number):
        # Do something with the item.

As you can see, all the AJAX actions that the page could trigger are contained in the handler class. This is the main reason we use a class to render pages unlike default Django, which uses functions. In shark everything is in one place: The route, the view and any AJAX actions on the page.

Forms

Making it easy and quick to create flexible and robust forms is key. To be implemented.

Modals

Modals are simple to add. Docs to come.

Favicons

Go to http://www.favicon-generator.org/ and generate all the icons. Put these files in /static/icons in your project. Done.


Source Code

Pages on getshark.org have the source code for the page handler at the bottom of the page. If there's no code, it's a static page. Here's the code needed to render the current page:

class GettingStartedHandler(PageHandler):
    route = '^getting-started$'

    def render_page(self, request):
        self.title =u'Getting started - Shark'

        data = [
            {'year': 2011, 'wheat': 10.4, 'corn': 14.2},
            {'year': 2012, 'wheat': 8.2, 'corn': 12.4},
            {'year': 2013, 'wheat': 9.8, 'corn': 7.2},
            {'year': 2014, 'wheat': 14.2, 'corn': 8.4},
            {'year': 2015, 'wheat': 14.0, 'corn': 12.3}
        ]

        self += Row(classes='col-md-9', items=[
                Markdown(self.text('Getting Started Full Page'),
                         example_1=Panel([
                            Heading('Hello world', 3),
                            Anchor('link', 'http://google.com')
                         ]),
                         example_2=Panel(multiple_panel_row(
                            Markdown("###Hello world\n[Google](http://google.com)"),
                            create_table(data, ['Year', 'Price Wheat=wheat', 'Price Corn=corn'], {}),
                            Graph(data, 'year', ['wheat', 'corn'])
                         )))
            ])