Created a nice software using SpiderBasic ? Post you link here !
User avatar
eddy
 
Posts: 124
Joined: Thu Mar 27, 2014 8:34 am

React Bootstrap 3.3.4

by eddy Sat Apr 11, 2015 3:15 pm

Code: Select all

; ******************************
; Plugins
; ******************************

Macro InitPlugins(IsInitialized=#True) ; internal functions
  CompilerIf IsInitialized
    !"undefined"==typeof window.SpiderPlugins&&(window.SpiderPlugins={extensions:{},paths:{},names:[]})
  CompilerElse
    !window.SpiderPlugins={extensions:{},paths:{},names:[]};
  CompilerEndIf   
EndMacro

Procedure DeclarePluginResource(Resource.s)
  InitPlugins()
  !,window.SpiderPlugins.names.push(v_resource)
EndProcedure

Procedure DeclarePlugin(Plugin.s, Path.s, IsUsed=#True)
  InitPlugins()
  !,window.SpiderPlugins.paths[v_plugin]=v_path
  !,v_isused && window.SpiderPlugins.names.push(v_plugin);
EndProcedure

Procedure UsePlugins(*FunctionUsingPlugins, EnforceDefine=#False) 
  !var cfg=$.extend({ enforceDefine: v_enforcedefine, paths: window.SpiderPlugins.paths }, window.SpiderPlugins.extensions);
  !requirejs.config(cfg);
  !require(window.SpiderPlugins.names, p_functionusingplugins); 
  InitPlugins(#False)
EndProcedure

Procedure DeclareHeaderCSS(css.s)
  !$('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', v_css) );
EndProcedure


CompilerIf #PB_Compiler_IsMainFile
  ; *************************
  ; EXAMPLE - REACT plugin
  ; *************************
 
  Procedure InitReact(React, JSXTransformer, ReactBootstrap)
    !React = v_react;
    !JSXTransformer = v_jsxtransformer;
    !ReactBootstrap = v_reactbootstrap;   
    !$.extend(window,v_reactbootstrap);// fix component namespaces: ReactBootstrap.Grid => window.Grid     
  EndProcedure
 
  Procedure RenderReactComponent(CodeJSX.s, Target.s="document.body")
    Protected jsx.s="React.render( "+CodeJSX+", "+Target+" );"
    !JSXTransformer.exec(v_jsx);
  EndProcedure 
 
  Procedure CreateReactBootstrap(React, JSXTransformer, ReactBootstrap)
    InitReact(React, JSXTransformer, ReactBootstrap)
    Global Title.s="Menu"
    RenderReactComponent("<Grid fluid>"+
                         #LF$+"<PageHeader><OverlayTrigger placement='bottom' overlay={<Tooltip bsStyle='success'><strong>A new basic</strong> for web development.</Tooltip>}>"+
                         #LF$+"<span>Spiderbasic <small>Web Application</small></span>"+                         
                         #LF$+"</OverlayTrigger></PageHeader>"+                     
                         #LF$+"<Col md={2}>"+
                         #LF$+"    <ListGroup>"+
                         #LF$+"    <ListGroupItem href='#link1' disabled>Info</ListGroupItem>"+
                         #LF$+"    <ListGroupItem href='#link1'>&hellip;</ListGroupItem>"+
                         #LF$+"    <ListGroupItem href='#link1'>&hellip;</ListGroupItem>"+
                         #LF$+"    <ListGroupItem href='#link1' header={<span><Glyphicon glyph='play-circle' />&nbsp;Projects</span>}>Some code samples<Badge pullRight >20</Badge></ListGroupItem>"+
                         #LF$+"    <ListGroupItem href='#link1' header={<span><Glyphicon glyph='book'/>&nbsp;Documents</span>}>Some tutorials<Badge pullRight >42</Badge></ListGroupItem>"+
                         #LF$+"    </ListGroup>"+
                         #LF$+"    <ProgressBar now={60} active label='%(percent)s%' />"+
                         #LF$+"    <Label bsStyle='success'>ReactJS</Label>&nbsp;<Label bsStyle='warning'>Bootstrap</Label>&nbsp;"+
                         #LF$+"    <p><TabbedArea defaultActiveKey={2}>"+
                         #LF$+"       <TabPane eventKey={1} tab='Reviews'><p><Well bsSize='small'>Some comments &hellip;!</Well></p></TabPane>"+
                         #LF$+"       <TabPane eventKey={2} tab='Stats'>"+
                         #LF$+"         <Table hover condensed >"+
                         #LF$+"         <thead>"+
                         #LF$+"         <tr><th>#</th><th>File</th><th>Downloads</th></tr>"+
                         #LF$+"         </thead>"+
                         #LF$+"         <tbody>"+
                         #LF$+"           <tr><td>1</td><td>Gadgets</td><td>110</td></tr>"+
                         #LF$+"           <tr><td>2</td><td>Games</td><td>57<Glyphicon glyph='arrow-down' style={{color: 'red'}} /></td></tr>"+
                         #LF$+"           <tr><td>3</td><td>3D</td><td>200<Glyphicon glyph='arrow-up' style={{color:'green'}} /></td></tr>"+
                         #LF$+"         </tbody>"+
                         #LF$+"         </Table>"+
                         #LF$+"       </TabPane>"+
                         #LF$+"    </TabbedArea></p>"+
                         #LF$+"</Col>"+
                         #LF$+"<Col md={10}>"+
                         #LF$+"  <Panel header={v_title} bsStyle='primary'>"+   
                         #LF$+"  <ButtonGroup bsSize='large'>"+
                         #LF$+"    <Button>Home</Button>"+
                         #LF$+"    <Button>Showcase</Button>"+
                         #LF$+"    <Button>About</Button>"+
                         #LF$+"    <Button bsStyle='danger' >Exit</Button>"+
                         #LF$+"  </ButtonGroup>"+                                                 
                         #LF$+"  </Panel>"+
                         #LF$+"     <Jumbotron>"+
                         #LF$+"     <h1>Hello, world!</h1>"+
                         #LF$+"     <p>This is a demo using Bootstrap 3.3.4 and ReactJS 0.13</p>"+
                         #LF$+"     <p><OverlayTrigger trigger='click' placement='top' overlay={<Popover title='More Info'><strong>Coming soon!</strong> Description here.</Popover>}>"+
                         #LF$+"     <Button bsStyle='primary'>Learn more</Button>"+
                         #LF$+"     </OverlayTrigger></p>"+
                         #LF$+"     </Jumbotron>"+
                         #LF$+"</Col>"+
                         #LF$+"</Grid>"); // #LF$ are mandatory
  EndProcedure
 
  DeclareHeaderCSS("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css");
  DeclareHeaderCSS("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.min.css"); //bootstrap default theme can be removed, replaced or customized
  DeclarePlugin("react","//cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react")
  DeclarePlugin("JSXTransformer","//cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer")
  DeclarePlugin("react-bootstrap","//rawgit.com/react-bootstrap/react-bootstrap-bower/master/react-bootstrap.min") 
  UsePlugins(@CreateReactBootstrap())
CompilerEndIf
User avatar
eddy
 
Posts: 124
Joined: Thu Mar 27, 2014 8:34 am

Re: React Bootstrap 3.3.4

by eddy Wed Apr 15, 2015 11:10 pm

Updated
- fix JSX string : add missing line breaks #LF$ ( multiline strings are lame to write :roll: )
- add optional bootstrap theme
- add more components
Return to Showcase

Who is online

Users browsing this forum: No registered users and 2 guests