xblock架构,链接与加载

首先,xblock是一个模块,edx即edx-platform,在github.com/edx/edx-platform中,此平台有一个专门加载xblock的模块,定义了所有的接口,可以逐一将模块中的所有信息传递到平台中,严格来说应该是将整个xblock的数据导入到web端.通过web应用,通常是nginx这种,基于python的djangoWeb框架来进行后端xblock的开发.

Edx-platform是完整的edx组件,以及开发环境,在进行open-edx开发是还需要三个环境,git,python和python virtualenv,python virtualenv是因为edx目前的版本只支持python2.7而archive库版本已经是python3了,如果本地python版本与edx一致那么是不需要virtualenv的,其作用是模拟一个环境,python2和python3都可以运行.

xblock是一个相对前端的组件,实际上整个edx都是django来开发的,某种意义上edx是一个纯粹的web应用.Edx还提供了一套快速开发xblock的工具,称为xblock-sdk

xblock的主要模块分以下几个:(以加载一个视频及其附加模块为例)

1.init.py    其实就是加载所有的python模块,从这些模块中导入关键的类和函数.

2.setup.py

主要功能是加载一个xblock,安装,注册.

workbench会调用workbench_senario()来注册这个xblock,在xblock模块这个文件夹目录下,setup.py应注册如下几个属性:

 setup(
     name='videoblock',
     version='0.1',
     description='yourdescription',
     py_modules=['nameofyourxblock'],
     install_requires=['XBlock'],
     entry_points={
         'xblock.v1': [
             nameofyourxblock = nameofyourxblock:theclassofyourxblock',
         ]
     }
 )

其中关键是nameofyourxblock和the class

这样一个py文件就写好了,如果在后面的python文件中定义了workbench的话,setup.py会自动加载

3.yourxblock.py,一般在xblock文件夹下面,存放requirement.txt以及setup.py,还需要另外命名一个文件夹成为yourxblock.py,注意,文件夹的名字,要跟调用的文件夹路径相同,init.py也要包含进这个文件夹里面,在此文件夹内,还有一个文件夹名为static,里面是关于前端的部分,如html,css,javascript等,用来修饰增强xblock的功能,因为本质上edx xblock是前端的web框架编写的

这个python文件一般如下:

import pkg_resources
import requests

from urlparse import urlparse

from xblock.core import XBlock
from xblock.fields import Scope, Integer, String
from xblock.fragment import Fragment

class classofyourxblock(XBlock)://xblock类的名称
    attribute1=type1;//String(help="URL of the video page at the provider", default=None, scope=Scope.content)//属性,如整数,字符串,等
    attribute2=type2;//Integer(help="The number of times the student watched the video", default=0, scope=Scope.user_state)
    ...
def student_view(self, context):     //学生端的框架编写
        provider, embed_code = self.get_embed_code_for_url(self.attribute1)//provider是外部引用的URL,如youku,tudou等等,此函数从某个attribute提供的信息返回一个列表,包括提供商
以及要嵌入的媒体内容

        # Load the HTML fragment from within the package and fill in the template
        html_str = pkg_resources.resource_string(__name__, "static/html/nameofyourxblock.html")
        frag = Fragment(unicode(html_str).format(self=self, embed_code=embed_code))

        # Load CSS
        css_str = pkg_resources.resource_string(__name__, "static/css/simplevideo.css")
        frag.add_css(unicode(css_str))

        # Load JS
        if provider == 'URL of video'://如果PROVIDER是某个provider
            frag.add_javascript_url("video javascript")//这里的video javascript是指服务提供商自己开发的接口所提供的js库
            js_str = pkg_resources.resource_string(__name__, "static/js/nameofyourxblock.js")
            frag.add_javascript(unicode(js_str))
            frag.initialize_js('classofyouxblock')

        return frag         //frag是整个xblock的核心,能够加载html,css,js等前端文件,以及从外部媒体提供商获取媒体流
def get_embed_code_for_url(self, url): //这个函数是获取媒体流的核心,通过外部提供的api,json接口,获取一些属性,为class中的attribute赋值

        hostname = url and urlparse(url).hostname
        params = {
            'url': url,
            'format': 'json',
            'attribute1': self.attribute1,
            'attribute2': self.attribute2
        }

        if hostname == 'URL':
            oembed_url = 'the json of provider'
            params['api'] = True
        else:
            return hostname, '<p>Unsupported video provider ({0})</p>'.format(hostname)

        try:
            r = requests.get(oembed_url, params=params)
            r.raise_for_status()
        except Exception as e:
            return hostname, '<p>Error getting video from provider ({error})</p>'.format(error=e)
        response = r.json()

        return hostname, response['html']

    @XBlock.json_handler                             //装饰器,定义在edx-platform中
    def mark_as_watched(self, data, suffix=''):        //这里是一个投票的函数,当xblock被访问一次,此计数值加一,是json的一个句柄
        if data.get('watched'):
            self.watched_count += 1

        return {'watched_count': self.watched_count}

    @staticmethod                                       //工作台负责加载整个页面模式以及xblock相对位置的,也是整个xblock的核心
    def workbench_scenarios():
        return [                                        //从垂直方向定义了xblock的位置,可以在其中嵌入更多的xblock,也可以在其中嵌入一些前端的内容
            ("nameofyourxblock",
            """\
                <vertical_demo>
                    <nameofyourxblock attribute1=..  attribute2=... />
                    <html_demo><div>the module you want to add in html</div></html_demo>
                    other xblock1
                    other xblock2
                    ...
                </vertical_demo>
             """)
        ]                                                 //至此,一个视频的xblock就完成了

4.static/html,css,javascript,这些就是个人自定义的内容了,笔者对前端完全不懂因此不在此讨论,在这些前端文件中,可以控制xblock的表现形式,另外要说的是,获取媒体流的html文件,必须把embed_code在html中声明,否则无法获取媒体流

xblock的加载:python  manage.py  runserver

然后在localhost:8000端口可以看到被加载的 xblock