Showing posts with label layout. Show all posts
Showing posts with label layout. Show all posts

Thursday, February 20, 2020

ReactJS Call Methods / Functions Between Component And Layout

In order to execute a function from a layout / component, you will need to pass component / layout reference to other side. React supports a special attribute that you can attach to any component, pass reference to other side, and you can access the functions of the component in the layout accessing
Sample App.js
import React, { Suspense, lazy } from "react";
import { BrowserRouter, Switch } from "react-router-dom";
import DashboardLayoutRoute from "./DashboardLayout";

import Home from "./Home";

const Connections = lazy(() => import("./Connections"));

class App extends React.Component {
  constructor() {
    super();

    console.log("App Initialized");
  }

  render() {
    return (
      <BrowserRouter basename={this.APP_PATH}>
        <Switch>
          <DashboardLayoutRoute exact path="/" component={Home} />
        </Switch>
        <Suspense fallback={<div>Loading...</div>}>
          <Switch>
            <DashboardLayoutRoute path="/connections" component={Connections} />
          </Switch>
        </Suspense>
      </BrowserRouter>
    );
  }
}

export default App;
Sample Layout
import React from "react";
import { Route } from "react-router-dom";

class DashboardLayoutComponent extends React.Component {
  constructor(props) {
    super(props);

    this.callBackToComponent = this.callBackToComponent.bind(this);
  }

  componentDidMount() {
    console.log("Layout Component Did Mount");
    let _this = this;
    if (this.props.children.type._result instanceof Promise) {
      this.props.children.type._result.then(function(data) {
        _this.callBackToComponent();
      });
    } else {
      this.callBackToComponent();
    }
  }

  componentDidUpdate() {
    console.log("Layout Component Did Update");
    let _this = this;
    if (this.props.children.type._result instanceof Promise) {
      this.props.children.type._result.then(function(data) {
        _this.callBackToComponent();
      });
    } else {
      this.callBackToComponent();
    }
  }

  callBackToComponent() {
    let t = this.props.children.type;
    if (t.prototype !== undefined) {
      t.prototype.callBackToParentComponent(this);
    } else {
      // If you use your Route in Suspense
      t._result.prototype.callBackToParentComponent(this);
    }
  }

  callbackParent() {
    console.log("Layout function called from some component");
  }

  render() {
    return (
      <div className={"dashboard-main-container"}>
        <div className="container">
          <div className="row">
            <div className="col-sm-10 right-body-container">
              {this.props.children}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const DashboardLayoutRoute = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={matchProps => (
        <DashboardLayoutComponent {...matchProps}>
          <Component key={matchProps.match.params.id} {...matchProps} />
        </DashboardLayoutComponent>
      )}
    />
  );
};

export default DashboardLayoutRoute;
Sample Component
import React from "react";
import { Link } from "react-router-dom";

class Connections extends React.Component {
  constructor() {
    super();

    console.log("Connections");
  }

  // this function will be called from layout function with self reference
  // so calling [layout.callbackParent()] will call a function inside layout component itself
  callBackToParentComponent(layout) {
    console.log("callBackToParentComponent for Connections");
    layout.callbackParent();
  }

  render() {
    return (
      <div>
        <h1>Connections</h1>
        <Link to={"/"}>Home</Link>
      </div>
    );
  }
}

export default Connections;
Sample console.log
App Initialized 
App Initialized 
Layout Component Did Mount 
callBackToParentComponent for Connections 
Layout function called from some component 
Connections 
Connections 
Home 
Home 
Layout Component Did Mount 
callBackToParentComponent for Home 
Layout function called from some component 
Connections 
Connections 
Layout Component Did Mount 
callBackToParentComponent for Connections 
Layout function called from some component 
Sample Output:
Live Example At codesandbox.io:

https://codesandbox.io/s/reactjs-call-methods-functions-between-component-and-layout-fydou

Thursday, October 25, 2018

Android: Get linearLayout (Any layout file from layout folder by name) and add to current Layout

In need to get a LinearLayout (Any layout file from layout folder by name) and add to current Layout
package com.pritom;

import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.LinearLayout;

public class TestActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.home_main_page);

        LinearLayout mainLayout = this.findViewById(R.id.mainLayoutScrollView);
        /* If you want to remove all views from current layout */
        if (mainLayout.getChildCount() > 0) mainLayout.removeAllViews();

        LayoutInflater inflater = (LayoutInflater) this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        /* There must be a layout file named 'home_content.xml' in layout folder */
        View view = inflater.inflate(R.layout.home_content, null);
        mainLayout.addView(view);
    }
}

Saturday, February 11, 2017

Simple Laravel Layouts using Blade

The most part of Laravel is usage of layout. It helps you to design a better application. You can create a layout and use that for view pages. Below is a good & simple example how you can create and use layouts.

At first create file named "test.blade.php" under "resources/views/layouts" folder with following contents:


<!DOCTYPE html>
<html>
    <head>
        <title>Title - @yield('title')</title>      
    </head>

    <body>
        <section>
            @yield('content')                
        </section>
        <section>
            @yield('pageScript')
        </section>
    </body>
</html>

The use of the layout file would be as like (from any resources blade file):


@extends('layouts.test') //This line will include layout file

@section('title', 'Title of the page') //Set title of the page

@section('content') //Start content of the page
Html content goes here
@stop //End content of the page

@section('pageScript') //Start javascript of the page
<script src="{{ asset('/js/some-js-file.js') }}"></script>

<script>
$(document).ready(function () {
    
});
</script>
@stop //End javascript of the page

Friday, April 26, 2013

how to make second layout xml file in android with graphical tab

Make sure you open the layout XML in Eclipse using the "Android Layout Editor": right-click (or if on a Mac, ctrl-click) the layout file, then select "Open With..." and "Android Layout Editor".